matterviz 0.3.3 → 0.3.5

package/dist/FilePicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FileInfo } from './io'
-  import { tooltip } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
 
   // Delay for distinguishing click from double-click (ms)

package/dist/app.css

@@ -20,6 +20,13 @@
   --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
   --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
   --border-radius: 3pt;
+
+  /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
+     These must exceed Threlte HTML overlays, which use very high z-index values. */
+  --z-index-overlay-controls: 100000000;
+  --z-index-overlay-nav: 100000001;
+  --z-index-overlay-dialog: 100000002;
+  --z-index-overlay-options: 100000003;
 }
 
 /* App-shell styles: page layout, typography, headings, navigation.

package/dist/brillouin/BrillouinZone.svelte

@@ -444,7 +444,7 @@
             y={hover_data.screen_position.y}
             bg_color={hover_data.is_ibz ? ibz_color : surface_color}
             fixed
-            style="z-index: calc(var(--bz-buttons-z-index, 100000000) + 1); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)"
+            style="z-index: calc(var(--bz-buttons-z-index, var(--z-index-overlay-controls, 100000000)) + 1); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)"
           >
             <BrillouinZoneTooltip {hover_data} tooltip={tooltip_config} />
           </PlotTooltip>
@@ -497,7 +497,10 @@
     top: var(--bz-buttons-top, var(--ctrl-btn-top, 1ex));
     right: var(--bz-buttons-right, var(--ctrl-btn-right, 1ex));
     gap: clamp(6pt, 1cqmin, 9pt);
-    z-index: var(--bz-buttons-z-index, 100000000);
+    z-index: var(
+      --bz-buttons-z-index,
+      var(--z-index-overlay-controls, 100000000)
+    );
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;

package/dist/brillouin/compute.js

@@ -205,7 +205,7 @@ export function compute_convex_hull(vertices, edge_sharp_angle_deg = 5) {
     }
     const geometry = new ConvexGeometry(vertices.map((cert) => new Vector3(...cert)));
     const pos = geometry.getAttribute(`position`);
-    const idx = geometry.index;
+    const geometry_index = geometry.index;
     // Deduplicate vertices from Three.js geometry
     const unique_verts = [];
     const vert_map = new Map();
@@ -218,10 +218,14 @@ export function compute_convex_hull(vertices, edge_sharp_angle_deg = 5) {
     }
     // Build faces with deduplicated vertex indices
     const faces = [];
-    const n_faces = idx ? idx.count / 3 : pos.count / 3;
+    const n_faces = geometry_index ? geometry_index.count / 3 : pos.count / 3;
     for (let idx_face = 0; idx_face < n_faces; idx_face++) {
-        const tri = idx
-            ? [idx.getX(idx_face * 3), idx.getX(idx_face * 3 + 1), idx.getX(idx_face * 3 + 2)]
+        const tri = geometry_index
+            ? [
+                geometry_index.getX(idx_face * 3),
+                geometry_index.getX(idx_face * 3 + 1),
+                geometry_index.getX(idx_face * 3 + 2),
+            ]
             : [idx_face * 3, idx_face * 3 + 1, idx_face * 3 + 2];
         faces.push(tri.map((j) => {
             const mapped = vert_map.get(j);

package/dist/chempot-diagram/ChemPotDiagram3D.svelte

@@ -1931,8 +1931,8 @@
   const export_basename = $derived(`chempot-${plot_elements.join(`-`)}`)
 
   function get_view_settings(): Record<string, unknown> {
-    const camera_position = orbit_controls_ref?.object?.position
-    const camera_target = orbit_controls_ref?.target
+    const view_camera_position = orbit_controls_ref?.object?.position
+    const view_camera_target = orbit_controls_ref?.target
     return {
       elements: plot_elements,
       camera_projection,
@@ -1940,11 +1940,11 @@
       color_mode,
       color_scale,
       reverse_color_scale,
-      camera_position: camera_position
-        ? [camera_position.x, camera_position.y, camera_position.z]
+      camera_position: view_camera_position
+        ? [view_camera_position.x, view_camera_position.y, view_camera_position.z]
         : null,
-      camera_target: camera_target
-        ? [camera_target.x, camera_target.y, camera_target.z]
+      camera_target: view_camera_target
+        ? [view_camera_target.x, view_camera_target.y, view_camera_target.z]
         : null,
     }
   }

package/dist/chempot-diagram/async-compute.svelte.js

@@ -28,8 +28,8 @@ function get_worker() {
     if (typeof Worker === `undefined`)
         return null;
     if (!worker) {
-        worker = new Worker(new URL(`./chempot-worker.ts`, import.meta.url), { type: `module` });
-        worker.onmessage = ({ data: { id, result, error } }) => {
+        worker = new Worker(new URL(`./chempot-worker.js`, import.meta.url), { type: `module` });
+        worker.addEventListener(`message`, ({ data: { id, result, error } }) => {
             const req = pending.get(id);
             if (!req)
                 return;
@@ -38,15 +38,15 @@ function get_worker() {
                 req.reject(new Error(error ?? `Worker returned null`));
             else
                 req.resolve(result);
-        };
-        worker.onerror = (event) => {
+        });
+        worker.addEventListener(`error`, (event) => {
             event.preventDefault();
             const err = new Error(event.message || `Worker initialization error`);
             for (const req of pending.values())
                 req.reject(err);
             pending.clear();
             worker = null;
-        };
+        });
     }
     return worker;
 }
@@ -66,6 +66,7 @@ export function compute_chempot_async(entries, config = {}) {
         pending.set(id, { resolve, reject });
         try {
             // $state.snapshot strips Svelte $state proxies (not structured-cloneable)
+            // eslint-disable-next-line unicorn/require-post-message-target-origin
             wkr.postMessage($state.snapshot({ id, entries, config }));
         }
         catch (err) {

package/dist/chempot-diagram/chempot-worker.js

@@ -1,5 +1,5 @@
 import { compute_chempot_diagram } from './compute';
-self.onmessage = (event) => {
+self.addEventListener(`message`, (event) => {
     const { id, entries, config } = event.data;
     try {
         const result = compute_chempot_diagram(entries, config);
@@ -8,4 +8,4 @@ self.onmessage = (event) => {
     catch (err) {
         postMessage({ id, result: null, error: err instanceof Error ? err.message : String(err) });
     }
-};
+});

package/dist/chempot-diagram/compute.js

@@ -149,7 +149,7 @@ export function build_hyperplanes(min_entries, el_refs, elements) {
         const atom_count = count_atoms_in_composition(entry.composition);
         const composition = entry.composition;
         const energy_per_atom = get_energy_per_atom(entry);
-        const row = new Array(n_elems + 1).fill(0);
+        const row = Array(n_elems + 1).fill(0);
         let ref_energy = 0;
         for (let elem_idx = 0; elem_idx < n_elems; elem_idx++) {
             const element = elements[elem_idx];
@@ -180,12 +180,12 @@ export function build_border_hyperplanes(lims) {
     const borders = [];
     for (let idx = 0; idx < dim; idx++) {
         // Lower bound: -mu_i + lo <= 0 → [-1, 0, ..., lo]
-        const lower = new Array(dim + 1).fill(0);
+        const lower = Array(dim + 1).fill(0);
         lower[idx] = -1;
         lower[dim] = lims[idx][0];
         borders.push(lower);
         // Upper bound: mu_i - hi <= 0 → [1, 0, ..., -hi]
-        const upper = new Array(dim + 1).fill(0);
+        const upper = Array(dim + 1).fill(0);
         upper[idx] = 1;
         upper[dim] = -lims[idx][1];
         borders.push(upper);
@@ -246,12 +246,12 @@ export function compute_domains(hyperplanes, border_hyperplanes, hyperplane_entr
             domains[formula] = [];
     }
     // Pre-allocate reusable buffers to avoid GC pressure in the combo loop
-    const mu = new Array(dim).fill(0);
-    const offsets = new Array(dim).fill(0);
+    const mu = Array(dim).fill(0);
+    const offsets = Array(dim).fill(0);
     // For dim <= 3, use inline solvers; for larger dims, build A on the fly
-    const A_rows = dim > 3 ? Array.from({ length: dim }, () => new Array(dim).fill(0)) : [];
+    const A_rows = dim > 3 ? Array.from({ length: dim }, () => Array(dim).fill(0)) : [];
     // Generate all combinations of dim indices from n_total halfspaces
-    const combo = new Array(dim).fill(0);
+    const combo = Array(dim).fill(0);
     for (let idx = 0; idx < dim; idx++)
         combo[idx] = idx;
     function advance_combo() {
@@ -434,7 +434,7 @@ export function simple_pca(data, k = 2) {
         return { scores: [], eigenvectors: [] };
     }
     // Center the data
-    const means = new Array(n_cols).fill(0);
+    const means = Array(n_cols).fill(0);
     for (const row of data) {
         for (let col = 0; col < n_cols; col++)
             means[col] += row[col];
@@ -443,7 +443,7 @@ export function simple_pca(data, k = 2) {
         means[col] /= n_rows;
     const centered = data.map((row) => row.map((val, col) => val - means[col]));
     // Covariance matrix
-    const cov = Array.from({ length: n_cols }, () => new Array(n_cols).fill(0));
+    const cov = Array.from({ length: n_cols }, () => Array(n_cols).fill(0));
     for (const row of centered) {
         for (let idx = 0; idx < n_cols; idx++) {
             for (let jdx = idx; jdx < n_cols; jdx++) {
@@ -462,11 +462,11 @@ export function simple_pca(data, k = 2) {
     const eigenvectors = [];
     const work_cov = cov.map((row) => [...row]);
     for (let comp = 0; comp < k; comp++) {
-        let vec = new Array(n_cols).fill(0);
+        let vec = Array(n_cols).fill(0);
         vec[comp % n_cols] = 1; // initial guess
         for (let iter = 0; iter < 100; iter++) {
             // Matrix-vector multiply
-            const new_vec = new Array(n_cols).fill(0);
+            const new_vec = Array(n_cols).fill(0);
             for (let idx = 0; idx < n_cols; idx++) {
                 for (let jdx = 0; jdx < n_cols; jdx++) {
                     new_vec[idx] += work_cov[idx][jdx] * vec[jdx];
@@ -548,8 +548,8 @@ export function get_3d_domain_simplexes_and_ann_loc(points_3d) {
     const mean_3d = Array.from({ length: n_dims }, (_, dim) => unique.reduce((sum, pt) => sum + pt[dim], 0) / unique.length);
     const centroid_x = centroid[0] ?? 0;
     const centroid_y = centroid[1] ?? 0;
-    const first_eigenvector = eigenvectors[0] ?? new Array(n_dims).fill(0);
-    const second_eigenvector = eigenvectors[1] ?? new Array(n_dims).fill(0);
+    const first_eigenvector = eigenvectors[0] ?? Array(n_dims).fill(0);
+    const second_eigenvector = eigenvectors[1] ?? Array(n_dims).fill(0);
     const ann_loc = mean_3d.map((m, dim) => m + centroid_x * first_eigenvector[dim] + centroid_y * second_eigenvector[dim]);
     // Map hull vertices back to original point indices using nearest projected
     // vertex instead of stringified coordinates to avoid precision aliasing.
@@ -675,7 +675,7 @@ export function get_ternary_combinations(elements) {
     }
     return combos;
 }
-let _nd_cache = null;
+let nd_cache = null;
 // Content-based fingerprint for N-D result caching. Uses sorted formula keys
 // so deserialized Web Worker copies match and different compositions never collide.
 export function make_nd_cache_key(entries, formal_chempots, default_min_limit, limits) {
@@ -723,7 +723,7 @@ export function compute_chempot_diagram(entries, config = {}) {
     const cache_key = is_projection
         ? make_nd_cache_key(entries, formal_chempots, default_min_limit, limits)
         : ``;
-    let nd_result = is_projection && _nd_cache?.key === cache_key ? _nd_cache.result : null;
+    let nd_result = is_projection && nd_cache?.key === cache_key ? nd_cache.result : null;
     if (!nd_result) {
         // In subsystem mode, filter entries to only those within the element set
         let working_entries = entries;
@@ -779,7 +779,7 @@ export function compute_chempot_diagram(entries, config = {}) {
         };
         // Cache for projection mode reuse
         if (is_projection) {
-            _nd_cache = { key: cache_key, result: nd_result };
+            nd_cache = { key: cache_key, result: nd_result };
         }
     }
     let domains = nd_result.domains;

package/dist/composition/FormulaFilter.svelte

@@ -2,7 +2,7 @@
   import Icon from '../Icon.svelte'
   import { get_alphabetical_formula } from './format'
   import { ELEM_SYMBOLS } from '../labels'
-  import { tooltip } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { FormulaSearchMode } from './index'
   import {
@@ -398,11 +398,11 @@
     const operator = token.startsWith(`-`) || token.startsWith(`!`)
       ? `exclude`
       : `include`
-    const value =
+    const stripped_value =
       token.startsWith(`+`) || token.startsWith(`-`) || token.startsWith(`!`)
         ? token.slice(1)
         : token
-    return { operator, value }
+    return { operator, value: stripped_value }
   }
 
   function serialize_token(

package/dist/constants.js

@@ -9,9 +9,7 @@ export const COMPRESSION_FORMATS = {
     bz2: [`.bz2`], // Browser DecompressionStream doesn't support BZ2
 };
 // All detectable compression extensions
-export const COMPRESSION_EXTENSIONS = Object.freeze([
-    ...Object.values(COMPRESSION_FORMATS).flat(),
-]);
+export const COMPRESSION_EXTENSIONS = Object.freeze(Object.values(COMPRESSION_FORMATS).flat());
 // Keywords that indicate a file is likely a trajectory file
 export const TRAJ_KEYWORDS = Object.freeze([
     `trajectory`,
@@ -64,11 +62,7 @@ export const STRUCT_KEYWORDS_REGEX = new RegExp(`(${STRUCT_KEYWORDS.join(`|`)})`
 export const STRUCT_KEYWORDS_STRICT_REGEX = new RegExp(`(${STRUCT_KEYWORDS_STRICT.join(`|`)})`, `i`);
 export const TRAJ_KEYWORDS_SIMPLE_REGEX = new RegExp(`(${TRAJ_KEYWORDS.join(`|`)})`, `i`);
 // File extensions for different file types
-export const TRAJ_EXTENSIONS = Object.freeze([
-    `.traj`,
-    `.xtc`,
-    `.lammpstrj`,
-]);
+export const TRAJ_EXTENSIONS = Object.freeze([`.traj`, `.xtc`, `.lammpstrj`]);
 export const TRAJ_EXTENSIONS_REGEX = new RegExp(`\\.(${TRAJ_EXTENSIONS.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
 export const STRUCTURE_EXTENSIONS = Object.freeze([
     `.cif`,

package/dist/convex-hull/ConvexHull.svelte

@@ -55,10 +55,10 @@
   // Lightweight element extraction - count unique elements, stripping oxidation states
   // (e.g. "V4+" -> "V") to avoid counting the same element multiple times
   function extract_unique_elements(
-    entries: { composition: Record<string, number> }[],
+    hull_entries: { composition: Record<string, number> }[],
   ): string[] {
     const elements = new SvelteSet<string>()
-    for (const entry of entries) {
+    for (const entry of hull_entries) {
       for (const key of Object.keys(entry.composition)) {
         // Extract valid element symbols, stripping oxidation states
         for (const elem of extract_formula_elements(key, { unique: false })) {

package/dist/convex-hull/ConvexHull2D.svelte

@@ -11,6 +11,7 @@
   import { set_fullscreen_bg, setup_fullscreen_effect } from '../layout'
   import type {
     AxisConfig,
+    PointStyle,
     ScatterHandlerEvent,
     ScatterHandlerProps,
     UserContentProps,
@@ -99,8 +100,8 @@
     ...default_hull_config,
     point_size: 6, // Binary diagrams use slightly smaller points
     ...config,
-    colors: { ...default_hull_config.colors, ...(config.colors || {}) },
-    margin: { t: 40, r: 40, b: 60, l: 60, ...(config.margin || {}) },
+    colors: { ...default_hull_config.colors, ...config.colors },
+    margin: { t: 40, r: 40, b: 60, l: 60, ...config.margin },
   })
 
   // Merge highlight style with defaults (consistent with 3D/4D)
@@ -274,16 +275,16 @@
       x: x_coord,
       y: min_y,
     }))
-    const hull_points = thermo.compute_lower_hull_2d(hull_input)
+    const computed_hull_points = thermo.compute_lower_hull_2d(hull_input)
 
-    const all_enriched_entries = coords_entries.map((entry) => {
-      const y_hull = thermo.interpolate_hull_2d(hull_points, entry.x)
+    const enriched_entries = coords_entries.map((entry) => {
+      const y_hull = thermo.interpolate_hull_2d(computed_hull_points, entry.x)
       const raw_dist = y_hull == null ? 0 : entry.y - y_hull
       return {
         ...entry, ...compute_hull_stability(raw_dist, entry.exclude_from_hull), visible: true,
       }
     })
-    return { all_enriched_entries, hull_points }
+    return { all_enriched_entries: enriched_entries, hull_points: computed_hull_points }
   })
 
   // Auto threshold: show all for few entries, use default for many, interpolate between
@@ -377,10 +378,10 @@
     const count = visible_entries.length
 
     // Single pass: extract x, y, color_values, and point_style simultaneously
-    const x_vals: number[] = new Array(count)
-    const y_vals: number[] = new Array(count)
-    const color_values: number[] = is_energy_mode ? new Array(count) : []
-    const point_style = new Array(count)
+    const x_vals: number[] = Array(count)
+    const y_vals: number[] = Array(count)
+    const color_values: number[] = is_energy_mode ? Array(count) : []
+    const point_style: PointStyle[] = Array(count)
 
     for (let idx = 0; idx < count; idx++) {
       const entry = visible_entries[idx]

package/dist/convex-hull/ConvexHull3D.svelte

@@ -130,8 +130,8 @@
   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 || {}) },
+    colors: { ...default_hull_config.colors, ...config.colors },
+    margin: { t: 40, r: 40, b: 60, l: 60, ...config.margin },
   })
 
   // Temperature-dependent free energy support
@@ -306,7 +306,7 @@
   })
 
   // Canvas rendering
-  let canvas: HTMLCanvasElement
+  let canvas: HTMLCanvasElement | undefined = undefined
   let ctx: CanvasRenderingContext2D | null = null
 
   // Performance optimization
@@ -632,7 +632,7 @@
   }
 
   function draw_structure_outline(): void {
-    if (!ctx) return
+    if (!ctx || !canvas) return
 
     // Set consistent style for all triangle structure lines
     ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color
@@ -644,12 +644,11 @@
   }
 
   function draw_triangle_structure(): void {
-    if (!ctx) return
+    if (!ctx || !canvas) 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 e_form_min = energy_range.min // Includes 0 for elemental references
+    const e_form_max = energy_range.max // Includes 0 for elemental references
 
     // Draw base triangle edges (top triangle at formation energy = 0)
     const triangle_edges = get_triangle_edges()
@@ -799,8 +798,7 @@
     // Lazy computation for uniform mode: normalize alpha by formation energy
     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)
+      const min_fe = energy_range.min
       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
@@ -955,8 +953,7 @@
 
   // 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
+    const min_fe = plot_entries.length ? energy_range.min : -1
     return [min_fe, 0]
   })
 
@@ -1387,8 +1384,13 @@
   // 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)]
+    let min = 0
+    let max = 0
+    for (const entry of plot_entries) {
+      const energy = entry.e_form_per_atom ?? 0
+      min = Math.min(min, energy)
+      max = Math.max(max, energy)
+    }
     const z_scale = 0.75 / Math.max(max - min, 0.001)
     return { min, max, center: (min + max) / 2, z_scale }
   })

package/dist/convex-hull/ConvexHull4D.svelte

@@ -107,8 +107,8 @@
   const merged_config = $derived({
     ...default_hull_config,
     ...config,
-    colors: { ...default_hull_config.colors, ...(config.colors || {}) },
-    margin: { t: 60, r: 60, b: 60, l: 60, ...(config.margin || {}) },
+    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
@@ -311,7 +311,7 @@
     )
   })
 
-  let canvas: HTMLCanvasElement
+  let canvas: HTMLCanvasElement | undefined = undefined
   let ctx: CanvasRenderingContext2D | null = null
   let frame_id = 0 // Performance optimization
 
@@ -554,7 +554,7 @@
   }
 
   function draw_structure_outline(): void {
-    if (!ctx) return
+    if (!ctx || !canvas) return
 
     const styles = getComputedStyle(canvas)
     // Match gray dashed structure lines used in 3D
@@ -732,10 +732,11 @@
     // Lazy computation for uniform mode: normalize alpha by formation energy
     let norm_alpha: ((w: 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 = (energy: number) => {
-        const t = Math.max(0, Math.min(1, (0 - energy) / Math.max(1e-6, 0 - min_fe)))
+        const t = Math.max(
+          0,
+          Math.min(1, (0 - energy) / Math.max(1e-6, 0 - formation_energy_min)),
+        )
         return t * hull_face_opacity
       }
     }
@@ -1032,15 +1033,19 @@
     const rect = container?.getBoundingClientRect()
     const [width, height] = rect ? [rect.width, rect.height] : [400, 400]
 
-    canvas.width = Math.max(0, Math.round(width * dpr))
-    canvas.height = Math.max(0, Math.round(height * dpr))
+    const new_width = Math.max(0, Math.round(width * dpr))
+    const new_height = Math.max(0, Math.round(height * dpr))
     canvas_dims = { width, height, scale: Math.min(width, height) / 600 }
 
-    ctx = canvas.getContext(`2d`)
-    if (ctx) {
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-      ctx.imageSmoothingEnabled = true
-      ctx.imageSmoothingQuality = `high`
+    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`
+      }
     }
     render_once()
   }
@@ -1078,6 +1083,13 @@
 
   // Performance: Cache canvas dimensions and pre-compute sorted point projections
   let canvas_dims = $state({ width: 600, height: 600, scale: 1 })
+  const formation_energy_min = $derived.by(() => {
+    let min_energy = 0
+    for (const entry of plot_entries) {
+      min_energy = Math.min(min_energy, entry.e_form_per_atom ?? 0)
+    }
+    return min_energy
+  })
   const sorted_points_cache = $derived.by(() => {
     if (!canvas || plot_entries.length === 0) return []
     return plot_entries

package/dist/convex-hull/ConvexHullControls.svelte

@@ -5,7 +5,7 @@
   import { sanitize_html } from '../sanitize'
   import { ColorScaleSelect } from '../plot'
   import type { ComponentProps } from 'svelte'
-  import { tooltip } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type {
     ConvexHullControlsType,