matterviz 0.4.1 → 0.4.2

package/dist/composition/parse.js

@@ -1,4 +1,5 @@
-import { element_data, is_elem_symbol } from '../element';
+import { default as element_data } from '../element/data';
+import { is_elem_symbol } from '../element/helpers';
 import { ELEM_SYMBOLS } from '../labels';
 // Create symbol/number/mass/electronegativity lookup maps for O(1) access
 export const ATOMIC_NUMBER_TO_SYMBOL = {};
@@ -24,7 +25,7 @@ const is_atomic_number_composition = (obj) => {
         atomic_nums.every((atomic_num) => Number.isInteger(atomic_num) && Object.hasOwn(ATOMIC_NUMBER_TO_SYMBOL, atomic_num)));
 };
 const format_state = (state) => (state > 0 ? `+` : ``) + state;
-const parse_count = (count) => (count ? parseFloat(count) : 1);
+const parse_count = (count) => (count ? Number(count) : 1);
 const format_count = (count) => {
     if (!Number.isFinite(count))
         return `${count}`;
@@ -63,9 +64,9 @@ export const atomic_symbol_to_num = (symbol_composition) => {
 // Expand parentheses in chemical formulas
 const expand_parentheses = (formula) => {
     while (formula.includes(`(`)) {
-        const expanded = formula.replaceAll(/\(([^()]+)\)(\d+(?:\.\d+)?|\.\d+)?/g, (_match, group, multiplier) => {
+        const expanded = formula.replaceAll(/\((?<group>[^()]+)\)(?<multiplier>\d+(?:\.\d+)?|\.\d+)?/g, (_match, group, multiplier) => {
             const mult = parse_count(multiplier);
-            return group.replaceAll(/([A-Z][a-z]?)(\d+(?:\.\d+)?|\.\d+)?/g, (_m, element, count) => {
+            return group.replaceAll(/(?<element>[A-Z][a-z]?)(?<count>\d+(?:\.\d+)?|\.\d+)?/g, (_m, element, count) => {
                 const count_str = format_count(parse_count(count) * mult);
                 return element + (count_str === `1` ? `` : count_str);
             });
@@ -87,9 +88,9 @@ export const parse_formula = (formula) => {
     for (const [seg_idx, segment] of segments.entries()) {
         // only hydrate segments (after a separator) carry a leading multiplier
         const coeff = seg_idx > 0 ? /^(?:\d+(?:\.\d+)?|\.\d+)/.exec(segment)?.[0] : undefined;
-        const multiplier = coeff ? parseFloat(coeff) : 1;
+        const multiplier = coeff ? Number(coeff) : 1;
         const expanded = expand_parentheses(segment.slice(coeff?.length ?? 0));
-        for (const match of expanded.matchAll(/([A-Z][a-z]?)(\d+(?:\.\d+)?|\.\d+)?/g)) {
+        for (const match of expanded.matchAll(/(?<element>[A-Z][a-z]?)(?<count>\d+(?:\.\d+)?|\.\d+)?/g)) {
             const [, element, count] = match;
             if (!is_elem_symbol(element))
                 throw new Error(`Invalid element symbol: ${element}`);
@@ -206,12 +207,12 @@ const parse_oxidation_state = (oxidation_str) => {
         return oxidation_str === `+` ? 1 : -1;
     }
     // Handle formats like "2+", "+2", "2-", "-2"
-    const ox_match = /([+-]?)(\d+)([+-]?)/.exec(oxidation_str);
+    const ox_match = /(?<sign_before>[+-]?)(?<number>\d+)(?<sign_after>[+-]?)/.exec(oxidation_str);
     if (!ox_match)
         return 0;
     const [, sign_before, number, sign_after] = ox_match;
     const sign = sign_before || sign_after || `+`;
-    return sign === `-` ? -parseInt(number, 10) : parseInt(number, 10);
+    return sign === `-` ? -Number(number) : Number(number);
 };
 // Parse chemical formula string with oxidation states into structured data.
 // Supports both ^2+ and [2+] syntax for oxidation states.
@@ -229,7 +230,7 @@ export const parse_formula_with_oxidation = (formula, strict = false) => {
     //          - just oxidation: (?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])
     //          - just count: count
     //          - neither
-    const regex = /([A-Z][a-z]?)(?:(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])((?:\d+(?:\.\d+)?|\.\d+)?)|((?:\d+(?:\.\d+)?|\.\d+))(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])?)?/g;
+    const regex = /(?<element>[A-Z][a-z]?)(?:(?:\^(?<oxi_caret>[+-]?\d+[+-]?|[+-])|\[(?<oxi_bracket>[+-]?\d+[+-]?|[+-])\])(?<count_after>(?:\d+(?:\.\d+)?|\.\d+)?)|(?<count_before>(?:\d+(?:\.\d+)?|\.\d+))(?:\^(?<oxi_caret_2>[+-]?\d+[+-]?|[+-])|\[(?<oxi_bracket_2>[+-]?\d+[+-]?|[+-])\])?)?/g;
     let match;
     let orig_idx = 0;
     while ((match = regex.exec(cleaned_formula)) !== null) {
@@ -387,7 +388,7 @@ export function parse_formula_with_wildcards(formula) {
     // Regex to match either:
     // 1. Standard element symbol with optional decimal count
     // 2. Wildcard with optional decimal count
-    const regex = /([A-Z][a-z]?)((?:\d+(?:\.\d+)?|\.\d+)?)|(\*)((?:\d+(?:\.\d+)?|\.\d+)?)/g;
+    const regex = /(?<element>[A-Z][a-z]?)(?<count>(?:\d+(?:\.\d+)?|\.\d+)?)|(?<wildcard>\*)(?<wildcard_count>(?:\d+(?:\.\d+)?|\.\d+)?)/g;
     let match;
     while ((match = regex.exec(cleaned)) !== null) {
         if (match[3] === `*`) {

package/dist/constants.js

@@ -61,9 +61,11 @@ export const TRAJ_KEYWORDS_REGEX = new RegExp(`(^|[-_.])(${TRAJ_KEYWORDS.join(`|
 export const STRUCT_KEYWORDS_REGEX = new RegExp(`(${STRUCT_KEYWORDS.join(`|`)})`, `i`);
 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`);
+// Build a case-insensitive `\.(ext1|ext2|...)$` regex from extensions (leading dots stripped)
+const ext_regex = (exts) => new RegExp(`\\.(${exts.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
 // File extensions for different file types
 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 TRAJ_EXTENSIONS_REGEX = ext_regex(TRAJ_EXTENSIONS);
 export const STRUCTURE_EXTENSIONS = Object.freeze([
     `.cif`,
     `.mcif`,
@@ -79,7 +81,7 @@ export const STRUCTURE_EXTENSIONS = Object.freeze([
     `.sdf`,
     `.mmcif`,
 ]);
-export const STRUCTURE_EXTENSIONS_REGEX = new RegExp(`\\.(${STRUCTURE_EXTENSIONS.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
+export const STRUCTURE_EXTENSIONS_REGEX = ext_regex(STRUCTURE_EXTENSIONS);
 export const TRAJ_FALLBACK_EXTENSIONS = Object.freeze([
     `.dat`,
     `.data`,
@@ -87,13 +89,13 @@ export const TRAJ_FALLBACK_EXTENSIONS = Object.freeze([
     `.out`,
     `.json`,
 ]);
-export const TRAJ_FALLBACK_EXTENSIONS_REGEX = new RegExp(`\\.(${TRAJ_FALLBACK_EXTENSIONS.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
+export const TRAJ_FALLBACK_EXTENSIONS_REGEX = ext_regex(TRAJ_FALLBACK_EXTENSIONS);
 // Special regex patterns
-export const VASP_FILES_REGEX = /(?:^|[\\/_.-])(poscar|contcar|potcar|incar|kpoints|outcar)(?:[\\/_.-]|$)/i;
-export const VASP_VOLUMETRIC_REGEX = /(?:^|[\\/_.-])(chgcar|aeccar[012]?|elfcar|locpot|parchg)(?:[\\/_.-]|$)/i;
+export const VASP_FILES_REGEX = /(?:^|[\\/_.-])(?:poscar|contcar|potcar|incar|kpoints|outcar)(?:[\\/_.-]|$)/i;
+export const VASP_VOLUMETRIC_REGEX = /(?:^|[\\/_.-])(?:chgcar|aeccar[012]?|elfcar|locpot|parchg)(?:[\\/_.-]|$)/i;
 export const XDATCAR_REGEX = /xdatcar/i;
-export const CONFIG_DIRS_REGEX = /(?:^|[\\/])(\.vscode|\.idea|\.nyc_output|\.cache|\.tmp|\.temp|node_modules|dist|build|coverage)(?:[\\/]|$)/i;
-export const MD_SIM_EXCLUDE_REGEX = /md_simulation\.(out|txt|yml|py|csv|html|css|md|js|ts)$/i;
-export const XYZ_EXTXYZ_REGEX = /\.(xyz|extxyz)$/i;
+export const CONFIG_DIRS_REGEX = /(?:^|[\\/])(?:\.vscode|\.idea|\.nyc_output|\.cache|\.tmp|\.temp|node_modules|dist|build|coverage)(?:[\\/]|$)/i;
+export const MD_SIM_EXCLUDE_REGEX = /md_simulation\.(?:out|txt|yml|py|csv|html|css|md|js|ts)$/i;
+export const XYZ_EXTXYZ_REGEX = /\.(?:xyz|extxyz)$/i;
 // Compression extensions regex (shared across files)
-export const COMPRESSION_EXTENSIONS_REGEX = new RegExp(`\\.(${COMPRESSION_EXTENSIONS.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
+export const COMPRESSION_EXTENSIONS_REGEX = ext_regex(COMPRESSION_EXTENSIONS);

package/dist/convex-hull/ConvexHull.svelte

@@ -12,10 +12,11 @@
   // Union type combining all possible props from 2D, 3D, and 4D components
   // each specific component will only use its relevant props from this super set
   // (gas_config/gas_pressures already come from BaseConvexHullProps)
-  type ConvexHullProps = BaseConvexHullProps & Hull3DProps & {
-    x_axis?: AxisConfig
-    y_axis?: AxisConfig
-  }
+  type ConvexHullProps = BaseConvexHullProps &
+    Hull3DProps & {
+      x_axis?: AxisConfig
+      y_axis?: AxisConfig
+    }
 
   let {
     entries = [],
@@ -26,9 +27,7 @@
     show_unstable = $bindable(true),
     hidden_categories = $bindable([]),
     show_hull_faces = $bindable(true),
-    hull_face_opacity: hull_face_opacity_prop = $bindable(
-      undefined as number | undefined,
-    ),
+    hull_face_opacity: hull_face_opacity_prop = $bindable(undefined as number | undefined),
     color_mode = $bindable(`energy`),
     color_scale = $bindable(`interpolateViridis`),
     info_pane_open = $bindable(false),
@@ -88,8 +87,7 @@
   // while each component declares only its dimension's props (2D lacks Hull3DProps, 3D/4D
   // lack x/y_axis), so a constructor union wouldn't compile. Svelte ignores extra props.
   const ConvexHullComponent = $derived(
-    { 2: ConvexHull2D, 3: ConvexHull3D, 4: ConvexHull4D }[element_count] ??
-      null,
+    { 2: ConvexHull2D, 3: ConvexHull3D, 4: ConvexHull4D }[element_count] ?? null,
   ) as Component<ConvexHullProps> | null
 </script>
 
@@ -125,14 +123,13 @@
 {:else}
   <!-- Error state for unsupported dimensionalities -->
   <div class="convex-hull-error">
-    <div
-      style="text-align: center; padding: 2em; color: var(--convex-hull-text-color, #666)"
-    >
+    <div style="text-align: center; padding: 2em; color: var(--convex-hull-text-color, #666)">
       <h3 id="unsupported-chemical-system" style="margin: 0 0 1em 0">Unsupported Chemical System</h3>
       <p style="margin: 0">
-        Convex hulls require 2, 3, or 4 elements. Found {element_count} element{
-          element_count === 1 ? `` : `s`
-        }:
+        Convex hulls require 2, 3, or 4 elements. Found {element_count} element{element_count ===
+        1
+          ? ``
+          : `s`}:
       </p>
       <p style="margin: 0.5em 0 0 0; font-weight: bold">
         {elements.join(`, `)}

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

@@ -5,6 +5,6 @@ type ConvexHullProps = BaseConvexHullProps & Hull3DProps & {
     x_axis?: AxisConfig;
     y_axis?: AxisConfig;
 };
-declare const ConvexHull: Component<ConvexHullProps, {}, "display" | "temperature" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "show_hull_faces" | "hull_face_opacity" | "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 ConvexHull: Component<ConvexHullProps, {}, "display" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "temperature" | "show_hull_faces" | "hull_face_opacity" | "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 ConvexHull = ReturnType<typeof ConvexHull>;
 export default ConvexHull;

package/dist/convex-hull/ConvexHull2D.svelte

@@ -32,12 +32,7 @@
   import StructurePopup from './StructurePopup.svelte'
   import TemperatureSlider from './TemperatureSlider.svelte'
   import * as thermo from './thermodynamics'
-  import type {
-    ConvexHullEntry,
-    HighlightStyle,
-    HoverData3D,
-    PhaseData,
-  } from './types'
+  import type { ConvexHullEntry, HighlightStyle, HoverData3D, PhaseData } from './types'
   import { MAGNETIC_ORDERING_CATEGORY } from './types'
 
   // Binary convex hull rendered as energy vs composition (x in [0, 1])
@@ -58,9 +53,7 @@
     entry_category = MAGNETIC_ORDERING_CATEGORY,
     hidden_categories = $bindable([]),
     color_mode = $bindable(DEFAULTS.convex_hull.binary.color_mode),
-    color_scale = $bindable(
-      DEFAULTS.convex_hull.binary.color_scale as D3InterpolateName,
-    ),
+    color_scale = $bindable(DEFAULTS.convex_hull.binary.color_scale as D3InterpolateName),
     info_pane_open = $bindable(DEFAULTS.convex_hull.binary.info_pane_open),
     controls_open = $bindable(DEFAULTS.convex_hull.binary.legend_pane_open),
     max_hull_dist_show_phases = $bindable(
@@ -70,9 +63,7 @@
       DEFAULTS.convex_hull.binary.max_hull_dist_show_labels,
     ),
     show_stable_labels = $bindable(DEFAULTS.convex_hull.binary.show_stable_labels),
-    show_unstable_labels = $bindable(
-      DEFAULTS.convex_hull.binary.show_unstable_labels,
-    ),
+    show_unstable_labels = $bindable(DEFAULTS.convex_hull.binary.show_unstable_labels),
     on_file_drop,
     enable_click_selection = true,
     enable_structure_preview = true,
@@ -117,9 +108,7 @@
   const show_hull_line = $derived(merged_config.show_hull)
 
   // Merge highlight style with defaults (consistent with 3D/4D)
-  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 =>
@@ -142,12 +131,11 @@
     show_unstable: () => show_unstable,
     entry_category: () => entry_category,
     hidden_categories: () => hidden_categories,
-    keep_plot_entry: (entry, max_dist) =>
-      helpers.entry_is_stable(entry) || (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,
+    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 elements = $derived(hull_data.elements)
@@ -210,30 +198,35 @@
         return { all_enriched_entries: [], hull_points: [] }
       }
 
-    // Build lower hull input: one minimum-energy point per composition x.
-    // Excluded entries don't participate in hull construction.
-    const min_y_by_x = new SvelteMap<number, number>()
-    for (const entry of coords_entries) {
-      if (entry.exclude_from_hull) continue
-      const current_min_y = min_y_by_x.get(entry.x)
-      if (current_min_y === undefined || entry.y < current_min_y) {
-        min_y_by_x.set(entry.x, entry.y)
+      // Build lower hull input: one minimum-energy point per composition x.
+      // Excluded entries don't participate in hull construction.
+      const min_y_by_x = new SvelteMap<number, number>()
+      for (const entry of coords_entries) {
+        if (entry.exclude_from_hull) continue
+        const current_min_y = min_y_by_x.get(entry.x)
+        if (current_min_y === undefined || entry.y < current_min_y) {
+          min_y_by_x.set(entry.x, entry.y)
+        }
       }
-    }
 
-    const hull_input = [...min_y_by_x].map(([x_coord, min_y]) => ({
-      x: x_coord,
-      y: min_y,
-    }))
-    const computed_hull_points = thermo.compute_lower_hull_2d(hull_input)
-
-    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, ...helpers.compute_hull_stability(raw_dist, entry.exclude_from_hull) }
-    })
-    return { all_enriched_entries: enriched_entries, hull_points: computed_hull_points }
-  })
+      const hull_input = [...min_y_by_x].map(([x_coord, min_y]) => ({
+        x: x_coord,
+        y: min_y,
+      }))
+      const computed_hull_points = thermo.compute_lower_hull_2d(hull_input)
+
+      const enriched_entries = coords_entries.map((entry) => {
+        const y_hull = thermo.interpolate_hull_2d(computed_hull_points, entry.x)
+        // degenerate hull (<2 points): y_hull null -> unknown distance (not 0/stable)
+        const raw_dist = y_hull == null ? undefined : entry.y - y_hull
+        return {
+          ...entry,
+          ...helpers.compute_hull_stability(raw_dist, entry.exclude_from_hull),
+        }
+      })
+      return { all_enriched_entries: enriched_entries, hull_points: computed_hull_points }
+    },
+  )
 
   let reset_counter = $state(0)
   // Drag and drop state (to match 3D/4D components)
@@ -259,13 +252,12 @@
   const y_domain = $derived.by((): Vec2 => {
     const ys = plot_entries.map((entry) => entry.y)
     if (ys.length === 0) return [-1, 0]
-    const min_y_data = Math.min(...ys)
-    const max_y_data = Math.max(...ys)
+    const min_y_data = helpers.array_min(ys)
+    const max_y_data = helpers.array_max(ys)
     const span = Math.max(1e-9, max_y_data - min_y_data)
     const pad = 0.05 * span
     return [min_y_data - pad, max_y_data + pad]
   })
-
   // Build ScatterPlot series --------------------------------------------------
 
   // Map MarkerSymbol to D3SymbolName (type-safe via symbol_map lookup)
@@ -296,15 +288,19 @@
       const hl = is_highlighted(entry) ? merged_highlight_style : null
 
       point_style[idx] = {
-        fill: hl?.effect === `color` || hl?.effect === `both`
-          ? hl?.color
-          : is_energy_mode
-          ? undefined
-          : (is_stable ? stable_color : unstable_color),
+        fill:
+          hl?.effect === `color` || hl?.effect === `both`
+            ? hl?.color
+            : is_energy_mode
+              ? undefined
+              : is_stable
+                ? stable_color
+                : unstable_color,
         stroke: is_stable ? `#ffffff` : `#000000`,
-        radius: hl?.effect === `size` || hl?.effect === `both`
-          ? base_radius * (hl?.size_multiplier ?? 1)
-          : base_radius,
+        radius:
+          hl?.effect === `size` || hl?.effect === `both`
+            ? base_radius * (hl?.size_multiplier ?? 1)
+            : base_radius,
         symbol_type: marker_to_d3_symbol(entry.marker),
         is_highlighted: Boolean(hl),
         highlight_effect: hl?.effect,
@@ -400,8 +396,7 @@
       show_unstable_labels !== DEFAULTS.convex_hull.binary.show_unstable_labels ||
       // Compare with auto-computed threshold, with small tolerance for floating point
       Math.abs(max_hull_dist_show_phases - auto_default_threshold) > 0.001 ||
-      max_hull_dist_show_labels !==
-        DEFAULTS.convex_hull.binary.max_hull_dist_show_labels,
+      max_hull_dist_show_labels !== DEFAULTS.convex_hull.binary.max_hull_dist_show_labels,
   )
 
   // Custom hover tooltip state used with ScatterPlot events
@@ -422,11 +417,13 @@
     const current_popup = helpers.current_entry(structure_popup.entry, plot_entries)
     if (structure_popup.open) {
       const structure = current_popup && extract_structure_from_entry(current_popup)
-      if (!structure) structure_popup = { open: false, structure: null, entry: null, place_right: true }
+      if (!structure)
+        structure_popup = { open: false, structure: null, entry: null, place_right: true }
       else if (
         current_popup !== structure_popup.entry ||
         structure !== structure_popup.structure
-      ) structure_popup = { ...structure_popup, entry: current_popup, structure }
+      )
+        structure_popup = { ...structure_popup, entry: current_popup, structure }
     }
   })
 
@@ -434,10 +431,10 @@
     const target = event.target
     if (target instanceof HTMLElement && target.tagName.match(/INPUT|TEXTAREA/)) return
     const actions: Record<string, () => void> = {
-      b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
-      s: () => show_stable = !show_stable,
-      u: () => show_unstable = !show_unstable,
-      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),
+      l: () => (show_stable_labels = !show_stable_labels),
     }
     actions[event.key.toLowerCase()]?.()
   }
@@ -448,14 +445,16 @@
     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
-    }, entry_category)
+  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
+      },
+      entry_category,
+    )
   }
 
   function close_structure_popup() {
@@ -472,8 +471,7 @@
     if (!entry) return
 
     const now = Date.now()
-    const is_double_click = last_clicked_entry === entry &&
-      now - last_click_time < 300
+    const is_double_click = last_clicked_entry === entry && now - last_click_time < 300
 
     if (is_double_click) {
       // Double-click: copy to clipboard
@@ -524,9 +522,8 @@
 <!-- Hover tooltip matching 3D/4D style (content only; container handled by ScatterPlot) -->
 {#snippet tooltip(point: ScatterHandlerProps<ConvexHullEntry>)}
   {@const entry = point.metadata}
-  {@const entry_highlight = entry && is_highlighted(entry)
-    ? merged_highlight_style
-    : undefined}
+  {@const entry_highlight =
+    entry && is_highlighted(entry) ? merged_highlight_style : undefined}
   {#if entry}
     <ConvexHullTooltip
       {entry}
@@ -600,9 +597,14 @@
   {/if}
 {/snippet}
 
-{#snippet user_content(
-  { x_scale_fn, pad, height, y_scale_fn, y_range, width }: UserContentProps,
-)}
+{#snippet user_content({
+  x_scale_fn,
+  pad,
+  height,
+  y_scale_fn,
+  y_range,
+  width,
+}: UserContentProps)}
   {@const [x0, x1, y0] = [x_scale_fn(0), x_scale_fn(1), y_scale_fn(y_range[0])]}
   {@const stroke = {
     stroke: `var(--scatter-grid-stroke, gray)`,
@@ -616,7 +618,7 @@
 {#key reset_counter}
   <ScatterPlot
     {...rest}
-    class="convex-hull-2d {rest.class ?? ``} {drag_over ? `dragover` : ``}"
+    class={[`convex-hull-2d`, rest.class, drag_over && `dragover`]}
     style={`${style}; ${rest.style ?? ``}`}
     data-has-selection={selected_entry !== null}
     bind:wrapper
@@ -668,9 +670,7 @@
         return
       }
       const { metadata: entry, event } = data
-      hover_data = entry
-        ? { entry, position: { x: event.clientX, y: event.clientY } }
-        : null
+      hover_data = entry ? { entry, position: { x: event.clientX, y: event.clientY } } : null
       on_point_hover?.(hover_data)
     }}
     padding={{ t: 30, b: 60, l: 60, r: 30 }}
@@ -685,14 +685,14 @@
       {@html sanitize_html(merged_controls.title || phase_stats?.chemical_system || ``)}
     </h3>
 
-    <ClickFeedback
-      bind:visible={copy_feedback.visible}
-      position={copy_feedback.position}
-    />
-    <DragOverlay visible={drag_over} />
+    <ClickFeedback bind:visible={copy_feedback.visible} position={copy_feedback.position} />
+    <DragOverlay visible={drag_over} message="Drop JSON file to load phase diagram data" />
 
     {#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}
@@ -720,8 +720,7 @@
 
 <style>
   :global(.convex-hull-2d:fullscreen) {
-    background: var(--hull-2d-bg-fullscreen, var(--hull-2d-bg, var(--hull-bg)))
-      !important;
+    background: var(--hull-2d-bg-fullscreen, var(--hull-2d-bg, var(--hull-bg))) !important;
     overflow: hidden;
   }
   :global(.convex-hull-2d.dragover) {
@@ -736,9 +735,11 @@
     cursor: pointer;
     border-radius: 3px;
     color: var(--text-color, currentColor);
-    transition: background-color 0.2s, opacity 0.2s;
+    transition:
+      background-color 0.2s,
+      opacity 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));
   }
   :global(.convex-hull-2d :is(.control-btn, .fullscreen-btn):hover) {
     background-color: color-mix(in srgb, currentColor 8%, transparent);

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

@@ -6,6 +6,6 @@ type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & {
     x_axis?: AxisConfig;
     y_axis?: AxisConfig;
 };
-declare const ConvexHull2D: import("svelte").Component<$$ComponentProps, {}, "display" | "temperature" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "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 ConvexHull2D: import("svelte").Component<$$ComponentProps, {}, "display" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "temperature" | "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 ConvexHull2D = ReturnType<typeof ConvexHull2D>;
 export default ConvexHull2D;