matterviz 0.3.7 → 0.4.1

package/dist/spectral/helpers.js

@@ -1,6 +1,7 @@
 // Helper utilities for band structure and DOS data processing
 import { SUBSCRIPT_MAP } from '../labels';
-import { centered_frac, euclidean_dist } from '../math';
+import { is_plain_object } from '../utils';
+import { euclidean_dist, is_square_matrix } from '../math';
 const is_subscript_key = (key) => key in SUBSCRIPT_MAP;
 // Check if range is a valid [min, max] tuple (strict 2-element array of finite numbers)
 export const is_valid_range = (range) => Array.isArray(range) &&
@@ -22,6 +23,22 @@ export const axis_with_range = (axis, range, label) => ({
     ...(label !== undefined && { label }),
     ...(is_valid_range(range) && { range }),
 });
+// Sync a ScatterPlot's internal y-axis range back onto a parent bindable axis.
+// Returns a new axis when the range changed (or became invalid and must be
+// cleared), otherwise the same reference so callers can skip reassignment and
+// avoid reactive churn (assign only when `result !== axis`).
+export function sync_axis_range(axis, range) {
+    if (is_valid_range(range)) {
+        if (axis.range?.[0] === range[0] && axis.range?.[1] === range[1])
+            return axis;
+        return { ...axis, range };
+    }
+    if (`range` in axis) {
+        const { range: _omit, ...rest } = axis;
+        return rest;
+    }
+    return axis;
+}
 // Detect which plot triggered a zoom change and return the new synced range.
 // Returns null to reset to shared range, undefined for no change, or Vec2 for new zoom.
 export function detect_zoom_change(bands_range, dos_range, shared_range, current_synced, dos_enabled = true) {
@@ -70,12 +87,12 @@ export function pretty_sym_point(symbol) {
     // Handle subscripts: convert S0 to S₀, K1 to K₁, Γ1 to Γ₁, etc.
     // Use \p{L} to match any Unicode letter (not just ASCII A-Z)
     return symbol
-        .replace(/_/g, ``)
-        .replace(/\\?GAMMA/gi, `Γ`)
-        .replace(/\\?DELTA/gi, `Δ`)
-        .replace(/\\?SIGMA/gi, `Σ`)
-        .replace(/\\?LAMBDA/gi, `Λ`)
-        .replace(/(\p{L})(\d+)/gu, (_, letter, num) => letter +
+        .replaceAll('_', ``)
+        .replaceAll(/\\?GAMMA/gi, `Γ`)
+        .replaceAll(/\\?DELTA/gi, `Δ`)
+        .replaceAll(/\\?SIGMA/gi, `Σ`)
+        .replaceAll(/\\?LAMBDA/gi, `Λ`)
+        .replaceAll(/(\p{L})(\d+)/gu, (_, letter, num) => letter +
         num
             .split(``)
             .map((digit) => (is_subscript_key(digit) ? SUBSCRIPT_MAP[digit] : digit))
@@ -133,7 +150,7 @@ export function get_ribbon_config(ribbon_config, label) {
 export function get_band_xaxis_ticks(band_struct, branches = []) {
     const ticks_x_pos = [];
     const tick_labels = [];
-    let prev_label = band_struct.qpoints[0]?.label || null;
+    let prev_label = band_struct.qpoints[0]?.label ?? null;
     let prev_branch = band_struct.branches[0]?.name || null;
     // Convert branches to Set for consistent handling
     const branches_set = Array.isArray(branches) ? new Set(branches) : branches;
@@ -148,7 +165,7 @@ export function get_band_xaxis_ticks(band_struct, branches = []) {
         const this_branch = branch_names[0] || null;
         if (point.label !== prev_label && prev_branch !== this_branch) {
             // Branch transition - combine labels
-            tick_labels[tick_labels.length - 1] = `${prev_label || ``}|${point.label}`;
+            tick_labels[tick_labels.length - 1] = `${prev_label ?? ``}|${point.label}`;
             ticks_x_pos[ticks_x_pos.length - 1] = band_struct.distance[idx];
         }
         else if (branches_set.size === 0 || (this_branch && branches_set.has(this_branch))) {
@@ -188,7 +205,7 @@ export function normalize_densities(densities, freqs_or_energies, mode) {
         return normalized.map((dens) => dens / max_val);
     }
     else if (mode === `sum`) {
-        const sum = normalized.reduce((acc, d) => acc + d, 0);
+        const sum = normalized.reduce((acc, dens) => acc + dens, 0);
         if (sum === 0)
             return normalized;
         return normalized.map((dens) => dens / sum);
@@ -199,7 +216,7 @@ export function normalize_densities(densities, freqs_or_energies, mode) {
         const bin_width = freqs_or_energies[1] - freqs_or_energies[0];
         if (bin_width === 0)
             return normalized;
-        const sum = normalized.reduce((acc, d) => acc + d, 0);
+        const sum = normalized.reduce((acc, dens) => acc + dens, 0);
         if (sum === 0)
             return normalized;
         return normalized.map((dens) => dens / (sum * bin_width));
@@ -222,6 +239,7 @@ function fnv1a_hash(arr) {
         hash ^= int_view[1];
         hash = Math.imul(hash, 16777619);
     }
+    // oxlint-disable-next-line eslint-plugin-unicorn/prefer-math-trunc -- `>>> 0` is unsigned 32-bit coercion, not truncation
     return hash >>> 0; // Ensure unsigned
 }
 // Generate cache key using FNV-1a hash over full arrays (O(n), low collision risk)
@@ -233,7 +251,7 @@ function generate_smearing_cache_key(freqs_or_energies, densities, sigma) {
 }
 // Core Gaussian smearing computation (unmemoized)
 function apply_gaussian_smearing_core(freqs_or_energies, densities, sigma) {
-    const orig_sum = densities.reduce((acc, d) => acc + d, 0);
+    const orig_sum = densities.reduce((acc, dens) => acc + dens, 0);
     if (sigma <= 0 || orig_sum === 0)
         return densities;
     const smeared = Array(densities.length).fill(0);
@@ -252,7 +270,7 @@ function apply_gaussian_smearing_core(freqs_or_energies, densities, sigma) {
         }
     }
     // Normalize to preserve integral
-    const smeared_sum = smeared.reduce((acc, d) => acc + d, 0);
+    const smeared_sum = smeared.reduce((acc, dens) => acc + dens, 0);
     if (smeared_sum === 0)
         return densities;
     const normalization = orig_sum / smeared_sum;
@@ -291,7 +309,7 @@ export function clear_smearing_cache() {
 }
 // Type guards for pymatgen qpoint formats
 const is_vec3 = (val) => Array.isArray(val) && val.length >= 3 && val.slice(0, 3).every(Number.isFinite);
-const is_kpoint = (val) => !!val && typeof val === `object` && `frac_coords` in val && is_vec3(val.frac_coords);
+const is_kpoint = (val) => val !== null && typeof val === `object` && `frac_coords` in val && is_vec3(val.frac_coords);
 const is_pymatgen_format = (obj) => {
     // Check for explicit pymatgen markers
     if (typeof obj[`@class`] === `string` || typeof obj[`@module`] === `string`) {
@@ -313,8 +331,8 @@ const parse_qpoint = (qpt, labels_dict) => {
             : null;
     if (!frac_coords)
         return null;
-    const label = (is_kpoint(qpt) && typeof qpt.label === `string` && qpt.label) ||
-        Object.entries(labels_dict ?? {}).find(([, c]) => euclidean_dist(frac_coords, c) < 1e-4)?.[0] ||
+    const label = ((is_kpoint(qpt) && typeof qpt.label === `string` && qpt.label) ||
+        Object.entries(labels_dict ?? {}).find(([, c]) => euclidean_dist(frac_coords, c) < 1e-4)?.[0]) ??
         null;
     return { label, frac_coords };
 };
@@ -386,13 +404,13 @@ function convert_pymatgen_band_structure(pmg) {
     const unit = pmg.unit?.toLowerCase() ?? (has_frequencies_cm ? `cm-1` : `thz`);
     if (!Array.isArray(raw_qpts) ||
         !Array.isArray(raw_bands) ||
-        !raw_qpts.length ||
-        !raw_bands.length)
+        raw_qpts.length === 0 ||
+        raw_bands.length === 0)
         return null;
     const qpoints = raw_qpts
         .map((qpoint) => parse_qpoint(qpoint, labels_dict))
         .filter((qpoint) => qpoint !== null);
-    if (!qpoints.length)
+    if (qpoints.length === 0)
         return null;
     // Step distances and discontinuity detection (5x median threshold)
     const steps = qpoints
@@ -439,7 +457,7 @@ function convert_pymatgen_band_structure(pmg) {
         })
             .filter((branch) => branch.start_index <= branch.end_index);
     }
-    if (!branches.length) {
+    if (branches.length === 0) {
         branches.push({ start_index: 0, end_index: qpoints.length - 1, name: `path` });
     }
     // Convert bands to THz based on input unit
@@ -474,10 +492,9 @@ function convert_pymatgen_band_structure(pmg) {
         },
     };
 }
-export function normalize_band_structure(bs) {
-    if (!bs || typeof bs !== `object`)
+export function normalize_band_structure(band_struct) {
+    if (!is_plain_object(band_struct))
         return null;
-    const band_struct = bs;
     // Check if this is pymatgen format and convert if so
     if (is_pymatgen_format(band_struct)) {
         return convert_pymatgen_band_structure(band_struct);
@@ -499,27 +516,42 @@ export function normalize_band_structure(bs) {
             branch.end_index >= n_qpts ||
             branch.start_index > branch.end_index))
         return null;
-    return band_struct;
+    // Fill required defaults (recip_lattice/labels_dict/nb_bands) not covered above so the cast below is sound
+    const recip_lattice = band_struct.recip_lattice;
+    const normalized = {
+        ...band_struct,
+        nb_bands: typeof band_struct.nb_bands === `number` ? band_struct.nb_bands : bands.length,
+        labels_dict: band_struct.labels_dict ?? {},
+        recip_lattice: is_square_matrix(recip_lattice?.matrix, 3)
+            ? recip_lattice
+            : {
+                matrix: [
+                    [1, 0, 0],
+                    [0, 1, 0],
+                    [0, 0, 1],
+                ],
+            },
+    };
+    return normalized;
 }
 // Validate and normalize a DOS object.
 // Supports both matterviz and pymatgen formats.
 // Also auto-detects and converts cm⁻¹ to THz for legacy data (disable with auto_convert_units: false).
 export function normalize_dos(dos, options = {}) {
     const { auto_convert_units = true } = options;
-    if (!dos || typeof dos !== `object`)
+    if (!is_plain_object(dos))
         return null;
-    const dos_obj = dos;
     // Check for pymatgen format (has @class or @module)
-    const is_pymatgen = typeof dos_obj[`@class`] === `string` || typeof dos_obj[`@module`] === `string`;
-    const { frequencies, energies, spin_polarized } = dos_obj;
+    const is_pymatgen = typeof dos[`@class`] === `string` || typeof dos[`@module`] === `string`;
+    const { frequencies, energies, spin_polarized } = dos;
     // Handle densities as either array or dict with spin keys (pymatgen format)
     // Pymatgen stores densities as {1: [...], -1: [...]} or {"Spin.up": [...], ...}
-    const spin_channels = extract_spin_channels(dos_obj.densities);
+    const spin_channels = extract_spin_channels(dos.densities);
     if (!spin_channels)
         return null;
     const densities = spin_channels.up;
     // Use extracted spin-down or fallback to explicit field (for already-normalized DosData)
-    const spin_down_densities = spin_channels.down ?? dos_obj.spin_down_densities ?? null;
+    const spin_down_densities = spin_channels.down ?? dos.spin_down_densities ?? null;
     if (!Array.isArray(densities))
         return null;
     // Phonon DOS: has frequencies
@@ -574,19 +606,44 @@ export function extract_k_path_points(band_struct, recip_lattice_matrix, options
         throw new Error(`reciprocal_lattice_matrix must be a 3×3 matrix`);
     const [[m00, m01, m02], [m10, m11, m12], [m20, m21, m22]] = recip_lattice_matrix;
     return band_struct.qpoints.map((qpoint) => {
-        let [x, y, z] = qpoint.frac_coords;
-        // Wrap to first BZ if enabled (handles [0,1] vs [-0.5,0.5] convention difference)
-        if (wrap_to_bz) {
-            x = centered_frac(x);
-            y = centered_frac(y);
-            z = centered_frac(z);
-        }
-        const kx = x * m00 + y * m10 + z * m20;
-        const ky = x * m01 + y * m11 + z * m21;
-        const kz = x * m02 + y * m12 + z * m22;
-        return [kx, ky, kz];
+        const [x, y, z] = qpoint.frac_coords;
+        const cart = [
+            x * m00 + y * m10 + z * m20,
+            x * m01 + y * m11 + z * m21,
+            x * m02 + y * m12 + z * m22,
+        ];
+        // Fold into the first (Wigner-Seitz) BZ so points stay inside the rendered zone.
+        // Folding in Cartesian space (vs per-axis on fractional coords, which only yields
+        // the parallelepiped cell) handles non-orthogonal lattices and preserves path
+        // continuity: points already inside the zone are left untouched.
+        return wrap_to_bz ? fold_to_first_bz(cart, recip_lattice_matrix) : cart;
     });
 }
+// Fold a Cartesian reciprocal-space point into the first (Wigner-Seitz) Brillouin zone
+// by choosing the periodic image with the smallest norm (minimum-image convention).
+// The ±1 search (27 images) suffices for typical reciprocal lattices; extremely skewed
+// cells could in principle need a wider search.
+function fold_to_first_bz(cart, recip) {
+    let best = cart;
+    let best_norm = cart[0] ** 2 + cart[1] ** 2 + cart[2] ** 2;
+    for (let n1 = -1; n1 <= 1; n1++) {
+        for (let n2 = -1; n2 <= 1; n2++) {
+            for (let n3 = -1; n3 <= 1; n3++) {
+                if (n1 === 0 && n2 === 0 && n3 === 0)
+                    continue;
+                const cand = [
+                    cart[0] + n1 * recip[0][0] + n2 * recip[1][0] + n3 * recip[2][0],
+                    cart[1] + n1 * recip[0][1] + n2 * recip[1][1] + n3 * recip[2][1],
+                    cart[2] + n1 * recip[0][2] + n2 * recip[1][2] + n3 * recip[2][2],
+                ];
+                const norm = cand[0] ** 2 + cand[1] ** 2 + cand[2] ** 2;
+                if (norm < best_norm - 1e-9)
+                    [best, best_norm] = [cand, norm];
+            }
+        }
+    }
+    return best;
+}
 // Find the q-point index closest to a given distance along the band structure path
 export function find_qpoint_at_distance(band_struct, target) {
     const { distance } = band_struct;
@@ -594,6 +651,30 @@ export function find_qpoint_at_distance(band_struct, target) {
         return null;
     return distance.reduce((closest, dist, idx) => Math.abs(dist - target) < Math.abs(distance[closest] - target) ? idx : closest, 0);
 }
+// Rescaled x-position of a q-point index along the band plot path. Inverse of
+// find_qpoint_at_rescaled_x, used to highlight a q-point hovered in the Brillouin zone.
+// Returns null if the index doesn't fall on a plotted (non-discontinuity) branch.
+export function qpoint_x_position(band_struct, qpoint_index, x_positions) {
+    if (!band_struct?.branches?.length || !x_positions)
+        return null;
+    for (const branch of band_struct.branches) {
+        if (qpoint_index < branch.start_index || qpoint_index > branch.end_index)
+            continue;
+        const start_label = band_struct.qpoints[branch.start_index]?.label ?? undefined;
+        const end_label = band_struct.qpoints[branch.end_index]?.label ?? undefined;
+        const range = x_positions[get_segment_key(start_label, end_label)];
+        if (!range)
+            continue;
+        const [x_start, x_end] = range;
+        const d_start = band_struct.distance[branch.start_index];
+        const d_end = band_struct.distance[branch.end_index];
+        if (d_end === d_start)
+            return x_start; // discontinuity / zero-length segment
+        const ratio = (band_struct.distance[qpoint_index] - d_start) / (d_end - d_start);
+        return x_start + ratio * (x_end - x_start);
+    }
+    return null;
+}
 // Find q-point index from rescaled x-coordinate (used in band structure plots)
 // This handles the case where the plot uses custom x-axis scaling per segment
 export function find_qpoint_at_rescaled_x(band_struct, rescaled_x, x_positions) {
@@ -677,13 +758,12 @@ export function find_qpoint_at_rescaled_x(band_struct, rescaled_x, x_positions)
 // Returns a dict of label → DosData for each atom or orbital.
 // filter_keys: optional list of keys to include (e.g., ["Fe", "O"] for atoms or ["s", "p", "d"] for orbitals)
 export function extract_pdos(dos, pdos_type, filter_keys) {
-    if (!dos || typeof dos !== `object`)
+    if (!is_plain_object(dos))
         return null;
-    const dos_obj = dos;
     // Get the appropriate projected DOS dict
     const pdos_dict = pdos_type === `atom`
-        ? dos_obj.atom_dos
-        : dos_obj.spd_dos;
+        ? dos.atom_dos
+        : dos.spd_dos;
     if (!pdos_dict || typeof pdos_dict !== `object`)
         return null;
     const result = {};
@@ -786,21 +866,15 @@ export function generate_ribbon_path(x_values, y_values, width_values, x_scale_f
 // Handles both single objects with an efermi field and dicts of objects.
 // Returns undefined if no valid efermi is found or if the source is empty.
 export function extract_efermi(data) {
-    if (!data || typeof data !== `object`)
+    if (!is_plain_object(data))
         return undefined;
-    const obj = data;
     // Direct efermi field on the object
-    if (`efermi` in obj && typeof obj.efermi === `number`)
-        return obj.efermi;
+    if (typeof data.efermi === `number`)
+        return data.efermi;
     // Dict of objects - try to get efermi from first value
-    const values = Object.values(obj);
-    if (values.length === 0)
-        return undefined;
-    const first_val = values[0];
-    if (first_val && typeof first_val === `object`) {
-        const efermi = first_val.efermi;
-        if (typeof efermi === `number`)
-            return efermi;
+    const first_val = Object.values(data)[0];
+    if (is_plain_object(first_val) && typeof first_val.efermi === `number`) {
+        return first_val.efermi;
     }
     return undefined;
 }
@@ -820,18 +894,16 @@ export function negative_fraction(values) {
 // Check if raw band structure input has electronic markers (efermi, kpoints, or electronic @class).
 // Must be called on raw input before normalization since these fields aren't preserved.
 function is_electronic_band_struct(bs) {
-    if (!bs || typeof bs !== `object`)
+    if (!is_plain_object(bs))
         return false;
-    const obj = bs;
     // Electronic band structures have efermi field
-    if (`efermi` in obj && typeof obj.efermi === `number`)
+    if (typeof bs.efermi === `number`)
         return true;
     // Pymatgen electronic format uses kpoints (not qpoints)
-    if (`kpoints` in obj && Array.isArray(obj.kpoints) && obj.kpoints.length > 0) {
+    if (Array.isArray(bs.kpoints) && bs.kpoints.length > 0)
         return true;
-    }
     // Pymatgen @class: BandStructure* but not Phonon*
-    const raw_class = obj[`@class`];
+    const raw_class = bs[`@class`];
     const py_class_name = typeof raw_class === `string` ? raw_class : ``;
     if (py_class_name.startsWith(`BandStructure`) && !py_class_name.includes(`Phonon`)) {
         return true;
@@ -934,12 +1006,12 @@ export function format_dos_tooltip(x_formatted, y_formatted, label, is_horizonta
     };
     const lines = is_horizontal
         ? [
-            format_tooltip_line(y_parsed.name || freq_defaults.name, y_formatted, y_parsed.unit || freq_defaults.unit),
+            format_tooltip_line(y_parsed.name || freq_defaults.name, y_formatted, y_parsed.unit ?? freq_defaults.unit),
             format_tooltip_line(x_parsed.name || `Density`, x_formatted),
         ]
         : [
             format_tooltip_line(y_parsed.name || `Density`, y_formatted),
-            format_tooltip_line(x_parsed.name || freq_defaults.name, x_formatted, x_parsed.unit || freq_defaults.unit),
+            format_tooltip_line(x_parsed.name || freq_defaults.name, x_formatted, x_parsed.unit ?? freq_defaults.unit),
         ];
     return { title: num_series > 1 && label ? label : undefined, lines };
 }

package/dist/state.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { ChemicalElement, ElementCategory } from './element/types';
 import { DEFAULT_CATEGORY_COLORS, default_element_colors } from './colors';
-import type { Tooltip } from './plot';
 import { type ThemeMode, type ThemeType } from './theme';
 export declare const selected: {
     category: ElementCategory | null;
@@ -12,12 +11,6 @@ export declare const colors: {
     category: typeof DEFAULT_CATEGORY_COLORS;
     element: typeof default_element_colors;
 };
-export declare const tooltip: Tooltip;
-export declare const periodic_table_state: {
-    show_bonding_info: boolean;
-    show_oxidation_state: boolean;
-    highlighted_elements: string[];
-};
 export declare const theme_state: {
     mode: ThemeMode;
     system_mode: ThemeType;

package/dist/state.svelte.js

@@ -11,12 +11,6 @@ export const colors = $state({
     category: { ...DEFAULT_CATEGORY_COLORS },
     element: { ...default_element_colors },
 });
-export const tooltip = $state({ show: false, x: 0, y: 0, title: ``, items: [] });
-export const periodic_table_state = $state({
-    show_bonding_info: false,
-    show_oxidation_state: false,
-    highlighted_elements: [],
-});
 // Theme state with safe initialization
 let initial_theme_mode = AUTO_THEME;
 let initial_system_mode = COLOR_THEMES.light;

package/dist/structure/Arrow.svelte

@@ -42,11 +42,9 @@
     arrow_head_radius < 0 ? shaft_len * -arrow_head_radius : arrow_head_radius,
   )
 
-  const shaft_pos = $derived(
-    math.add(position, math.scale(dir, shaft_len * 0.5)) as Vec3,
-  )
+  const shaft_pos = $derived(math.add(position, math.scale(dir, shaft_len * 0.5)))
   const head_pos = $derived(
-    math.add(position, math.scale(dir, shaft_len + head_len * 0.5)) as Vec3,
+    math.add(position, math.scale(dir, shaft_len + head_len * 0.5)),
   )
 
   const rotation = $derived.by((): Vec3 => {

package/dist/structure/AtomLegend.svelte

@@ -128,8 +128,8 @@
       // Use unique_values instead of values to avoid undefined colors from duplicates
       property_colors?.unique_values?.flatMap((val) => {
         const idx = property_colors.values.indexOf(val)
-        return idx >= 0 ? [[val, property_colors.colors[idx]]] : []
-      }) ?? [],
+        return idx !== -1 ? [[val, property_colors.colors[idx]]] : []
+      }),
     ),
   )
 
@@ -324,6 +324,7 @@
 
 {#if show_element_legend}
   <div {...rest} class="atom-legend element-legend {rest.class ?? ``}">
+    {@render mode_selector_snippet()}
     {#each sorted_element_entries as [elem, amt], idx (elem)}
       {@const is_hidden = hidden_elements.has(elem as ElementSymbol)}
       {@const displayed_elem = element_mapping?.[elem as ElementSymbol] || elem}
@@ -465,7 +466,6 @@
       </div>
     {/each}
     {@render site_radius_control_snippet()}
-    {@render mode_selector_snippet()}
     {@render children?.({ mode_menu_open, structure })}
   </div>
 {:else if show_property_legend}
@@ -474,6 +474,7 @@
     class:categorical-legend={atom_color_config.scale_type === `categorical`}
     {...rest}
   >
+    {@render mode_selector_snippet()}
     {#if legend_title}
       <div class="legend-header">
         <h4>{legend_title}</h4>
@@ -533,7 +534,6 @@
       {/each}
     {/if}
     {@render site_radius_control_snippet()}
-    {@render mode_selector_snippet()}
     {@render children?.({ mode_menu_open, structure })}
   </div>
 {/if}
@@ -723,7 +723,8 @@
     position: relative;
     display: flex;
     align-items: center;
-    margin-left: calc(-0.5 * var(--struct-legend-gap, clamp(3pt, 2cqmin, 7pt)));
+    /* extra gap toward the color labels so the chevron groups with the cell-select control */
+    margin-right: calc(0.25 * var(--struct-legend-gap, clamp(3pt, 2cqmin, 7pt)));
   }
   .mode-toggle {
     background: transparent;
@@ -735,17 +736,15 @@
     font-size: 0.9em;
     opacity: 0;
     pointer-events: none;
+    transform: translateY(1px);
     transition: opacity 0.2s ease;
   }
   .mode-toggle :global(svg) {
     font-size: 1.15em;
   }
   .mode-toggle.visible {
-    opacity: 0.7;
-    pointer-events: auto;
-  }
-  .mode-toggle.visible:hover {
     opacity: 1;
+    pointer-events: auto;
   }
   .mode-dropdown {
     position: absolute;

package/dist/structure/AtomLegend.svelte.d.ts

@@ -30,6 +30,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
         structure?: AnyStructure | null;
     }]>;
 };
-declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "site_radius_overrides" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "element_mapping">;
+declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides">;
 type AtomLegend = ReturnType<typeof AtomLegend>;
 export default AtomLegend;

package/dist/structure/CanvasTooltip.svelte

@@ -19,6 +19,7 @@
 <style>
   div {
     width: max-content;
+    max-width: var(--canvas-tooltip-max-width, 16em);
     box-sizing: border-box;
     text-align: var(--canvas-tooltip-text-align, left);
     border-radius: var(--canvas-tooltip-border-radius, var(--border-radius, 3pt));

package/dist/structure/CellSelect.svelte

@@ -14,6 +14,7 @@
     loading = $bindable(false),
     direction = `down`,
     align = `right`,
+    suppress_hover = false,
   }: {
     supercell_scaling: string
     cell_type?: CellType
@@ -21,6 +22,7 @@
     loading?: boolean
     direction?: `up` | `down`
     align?: `left` | `right`
+    suppress_hover?: boolean // don't auto-open the menu on hover/focus (e.g. while a sibling popover is open)
   } = $props()
 
   let menu_open = $state(false)
@@ -80,20 +82,26 @@
       input_value = supercell_scaling
     }
   })
+
+  // Close + keep closed while suppressed so the menu can't obscure a sibling popover
+  // (e.g. the atom color-mode dropdown) the user is actively interacting with
+  $effect(() => {
+    if (suppress_hover) menu_open = false
+  })
 </script>
 
 <div
   class="cell-select"
   role="group"
   {@attach click_outside({ callback: () => (menu_open = false) })}
-  onmouseenter={() => (menu_open = true)}
+  onmouseenter={() => (menu_open = !suppress_hover)}
   onmouseleave={() => (menu_open = false)}
-  onfocusin={() => (menu_open = true)}
+  onfocusin={() => (menu_open = !suppress_hover)}
   onfocusout={handle_focus_out}
 >
   <button
     type="button"
-    onclick={() => (menu_open = !menu_open)}
+    onclick={() => (menu_open = !suppress_hover && !menu_open)}
     onkeydown={handle_key_down}
     class="toggle-btn"
     class:active={menu_open}
@@ -296,8 +304,7 @@
     gap: 3px;
   }
   .preset-btn {
-    padding: 0 1px;
-    line-height: 1;
+    padding: 1px;
     background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);

package/dist/structure/CellSelect.svelte.d.ts

@@ -7,7 +7,8 @@ type $$ComponentProps = {
     loading?: boolean;
     direction?: `up` | `down`;
     align?: `left` | `right`;
+    suppress_hover?: boolean;
 };
-declare const CellSelect: import("svelte").Component<$$ComponentProps, {}, "loading" | "supercell_scaling" | "cell_type">;
+declare const CellSelect: import("svelte").Component<$$ComponentProps, {}, "supercell_scaling" | "cell_type" | "loading">;
 type CellSelect = ReturnType<typeof CellSelect>;
 export default CellSelect;

package/dist/structure/Cylinder.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import type { Vec3 } from '../math'
   import { T } from '@threlte/core'
+  import type { ComponentProps } from 'svelte'
   import { Euler, Quaternion, Vector3 } from 'three'
 
-  let { from, to, color = `#808080`, thickness = 0.1 }: {
-    from: Vec3
-    to: Vec3
-    color?: string
-    thickness?: number
-  } = $props()
+  let { from, to, color = `#808080`, thickness = 0.1, opacity = 1, ...rest }:
+    & ComponentProps<typeof T.Mesh>
+    & {
+      from: Vec3
+      to: Vec3
+      color?: string
+      thickness?: number
+      opacity?: number // < 1 renders semi/fully transparent (e.g. invisible hover proxies)
+    } = $props()
 
   let from_vec = $derived(new Vector3(...from))
   let to_vec = $derived(new Vector3(...to))
@@ -39,7 +43,7 @@
   }
 </script>
 
-<T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>
+<T.Mesh {...rest} {position} {rotation} scale={[thickness, height, thickness]}>
   <T.CylinderGeometry args={[thickness, thickness, 1, 8]} />
-  <T.MeshStandardMaterial {color} />
+  <T.MeshStandardMaterial {color} transparent={opacity < 1} {opacity} depthWrite={opacity >= 1} />
 </T.Mesh>

package/dist/structure/Cylinder.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { Vec3 } from '../math';
-type $$ComponentProps = {
+import { T } from '@threlte/core';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = ComponentProps<typeof T.Mesh> & {
     from: Vec3;
     to: Vec3;
     color?: string;
     thickness?: number;
+    opacity?: number;
 };
 declare const Cylinder: import("svelte").Component<$$ComponentProps, {}, "">;
 type Cylinder = ReturnType<typeof Cylinder>;

package/dist/structure/Lattice.svelte

@@ -146,7 +146,7 @@
         {#each matrix as vec, idx (vec)}
           {@const shaft_length = Math.hypot(...vec) * 0.85}
           <!-- Shaft goes to 85% of vector length -->
-          {@const tip_start_position = math.scale(vec, 0.85) as Vec3}
+          {@const tip_start_position = math.scale(vec, 0.85)}
           <!-- Calculate rotation to align with vector direction -->
           {@const quaternion = new Quaternion().setFromUnitVectors(
       new Vector3(0, 1, 0), // Default up direction for cylinder/cone
@@ -157,7 +157,7 @@
       .toArray()
       .slice(0, 3) as Vec3}
           <!-- Arrow shaft - position at center of shaft length -->
-          {@const shaft_center = math.scale(vec, 0.425) as Vec3}
+          {@const shaft_center = math.scale(vec, 0.425)}
           <!-- Center at 42.5% = half of 85% -->
           <T.Mesh
             position={shaft_center}