matterviz 0.4.1 → 0.4.2

package/dist/spectral/BandsAndDos.svelte

@@ -44,10 +44,12 @@
   const bands_default_axis = (range = shared_frequency_range): AxisConfig =>
     shared_y_axis ? axis_with_range(bands_props.y_axis, range) : { ...bands_props.y_axis }
   const dos_default_axis = (range = shared_frequency_range): AxisConfig =>
-    shared_y_axis ? axis_with_range(dos_props.y_axis, range, ``) : {
-      label: ``,
-      ...dos_props.y_axis,
-    }
+    shared_y_axis
+      ? axis_with_range(dos_props.y_axis, range, ``)
+      : {
+          label: ``,
+          ...dos_props.y_axis,
+        }
 
   let synced_zoom_range = $state<Vec2 | null>(null)
   let bands_y_axis = $state<AxisConfig>(bands_default_axis())
@@ -88,14 +90,14 @@
   $effect(() =>
     propagate_synced_range(
       untrack(() => bands_y_axis.range) as Vec2 | undefined,
-      (base_range) => bands_y_axis = bands_default_axis(base_range),
-    )
+      (base_range) => (bands_y_axis = bands_default_axis(base_range)),
+    ),
   )
   $effect(() =>
     propagate_synced_range(
       untrack(() => dos_y_axis.range) as Vec2 | undefined,
-      (base_range) => dos_y_axis = dos_default_axis(base_range),
-    )
+      (base_range) => (dos_y_axis = dos_default_axis(base_range)),
+    ),
   )
 
   let hovered_frequency = $state<number | null>(null)
@@ -106,7 +108,7 @@
 
 <div
   {...rest}
-  class="bands-and-dos {rest.class ?? ``}"
+  class={[`bands-and-dos`, rest.class]}
   style={`display: grid; grid-template-columns: 1fr 200px; gap: 0;` + (rest.style ?? ``)}
 >
   {@render children?.({ hovered_frequency })}

package/dist/spectral/BrillouinBandsDos.svelte

@@ -44,16 +44,13 @@
   ) as BaseBandStructure | null
 
   // Compute shared frequency/energy range from both bands and DOS data
-  let shared_frequency_range = $derived(
-    helpers.compute_frequency_range(band_structs, doses),
-  )
+  let shared_frequency_range = $derived(helpers.compute_frequency_range(band_structs, doses))
 
   // Extract Fermi level from electronic band structure or DOS data
   let fermi_level = $derived.by((): number | undefined => {
     // Check band structures for efermi
-    const bs_source = `efermi` in (band_structs as object)
-      ? band_structs
-      : Object.values(band_structs)[0]
+    const bs_source =
+      `efermi` in (band_structs as object) ? band_structs : Object.values(band_structs)[0]
     const bs_efermi = (bs_source as Record<string, unknown>)?.efermi
     if (typeof bs_efermi === `number`) return bs_efermi
 
@@ -75,13 +72,12 @@
   let hovered_band_point = $state<InternalPoint | null>(null)
   let bands_x_positions = $state<Record<string, Vec2>>({})
   let hovered_qpoint_index = $derived(
-    hovered_band_point && first_band_struct &&
-      Object.keys(bands_x_positions).length > 0
+    hovered_band_point && first_band_struct && Object.keys(bands_x_positions).length > 0
       ? helpers.find_qpoint_at_rescaled_x(
-        first_band_struct,
-        hovered_band_point.x,
-        bands_x_positions,
-      )
+          first_band_struct,
+          hovered_band_point.x,
+          bands_x_positions,
+        )
       : null,
   )
   // Q-point hovered directly on the BZ k-path (reverse direction: BZ -> bands/DOS)
@@ -89,9 +85,7 @@
   // Unified hovered q-point: a band-point hover takes priority, else a BZ k-path hover
   let active_qpoint_index = $derived(hovered_qpoint_index ?? bz_hovered_qpoint_index)
   let hovered_k_point = $derived(
-    active_qpoint_index !== null
-      ? (k_path_points[active_qpoint_index] as Vec3)
-      : null,
+    active_qpoint_index !== null ? (k_path_points[active_qpoint_index] as Vec3) : null,
   )
   const [desktop_width, tablet_width] = [1200, 600]
   let clientWidth = $state(desktop_width)
@@ -101,8 +95,8 @@
     clientWidth >= desktop_width
       ? `desktop`
       : clientWidth >= tablet_width
-      ? `tablet`
-      : `phone`,
+        ? `tablet`
+        : `phone`,
   )
 
   const bands_default_axis = (range = shared_frequency_range): AxisConfig =>
@@ -169,11 +163,7 @@
   let hovered_frequency = $state<number | null>(null)
 </script>
 
-<div
-  {...rest}
-  class="bands-dos-brillouin {screen_class} {rest.class ?? ``}"
-  bind:clientWidth
->
+<div {...rest} class={[`bands-dos-brillouin`, screen_class, rest.class]} bind:clientWidth>
   {@render children?.({
     hovered_frequency,
     hovered_band_point,
@@ -201,11 +191,13 @@
     {k_path_points}
     k_path_labels={first_band_struct?.qpoints?.flatMap((qpoint, idx) =>
       k_path_points[idx]
-        ? [{
-          position: k_path_points[idx],
-          label: qpoint.label ? helpers.pretty_sym_point(qpoint.label) : null,
-        }]
-        : []
+        ? [
+            {
+              position: k_path_points[idx],
+              label: qpoint.label ? helpers.pretty_sym_point(qpoint.label) : null,
+            },
+          ]
+        : [],
     ) ?? []}
     {hovered_k_point}
     hovered_qpoint_index={active_qpoint_index}

package/dist/spectral/Dos.svelte

@@ -175,17 +175,18 @@
         }
 
         // Check for spin-down data (only for electronic DOS)
-        const has_spin_down = dos.type === `electronic` &&
-          dos.spin_down_densities?.length === dos.densities.length
+        const has_spin_down =
+          dos.type === `electronic` && dos.spin_down_densities?.length === dos.densities.length
         const should_show_spin_up = effective_spin_mode !== `down_only`
-        const should_show_spin_down = has_spin_down &&
-          effective_spin_mode !== `up_only` && effective_spin_mode !== null
+        const should_show_spin_down =
+          has_spin_down && effective_spin_mode !== `up_only` && effective_spin_mode !== null
 
         // Process spin-up (or total) densities
         if (should_show_spin_up) {
-          let densities_up = sigma > 0
-            ? apply_gaussian_smearing(x_values, dos.densities, sigma)
-            : [...dos.densities]
+          let densities_up =
+            sigma > 0
+              ? apply_gaussian_smearing(x_values, dos.densities, sigma)
+              : [...dos.densities]
 
           densities_up = normalize_densities(densities_up, x_values, normalize)
 
@@ -194,8 +195,8 @@
 
           // For stacked plots, accumulate densities (only if array lengths match)
           if (stack && cumulative_spin_up?.length === densities_up.length) {
-            densities_up = densities_up.map((density, idx) =>
-              density + (cumulative_spin_up?.[idx] ?? 0)
+            densities_up = densities_up.map(
+              (density, idx) => density + (cumulative_spin_up?.[idx] ?? 0),
             )
           } else if (stack && cumulative_spin_up) {
             console.warn(`DOS stacking: length mismatch for "${label}"`)
@@ -212,9 +213,10 @@
             cumulative_spin_up = densities_up
           }
 
-          const spin_label = has_spin_down && effective_spin_mode
-            ? `${label || `DOS ${dos_idx + 1}`} (↑)`
-            : (label || `DOS ${dos_idx + 1}`)
+          const spin_label =
+            has_spin_down && effective_spin_mode
+              ? `${label || `DOS ${dos_idx + 1}`} (↑)`
+              : label || `DOS ${dos_idx + 1}`
 
           const series_up: DataSeries = {
             x: is_horizontal ? densities_up : x_values,
@@ -228,13 +230,11 @@
         }
 
         // Process spin-down densities if available
-        if (
-          should_show_spin_down && dos.type === `electronic` &&
-          dos.spin_down_densities
-        ) {
-          let densities_down = sigma > 0
-            ? apply_gaussian_smearing(x_values, dos.spin_down_densities, sigma)
-            : [...dos.spin_down_densities]
+        if (should_show_spin_down && dos.type === `electronic` && dos.spin_down_densities) {
+          let densities_down =
+            sigma > 0
+              ? apply_gaussian_smearing(x_values, dos.spin_down_densities, sigma)
+              : [...dos.spin_down_densities]
 
           densities_down = normalize_densities(densities_down, x_values, normalize)
 
@@ -246,12 +246,10 @@
           // For stacked plots with overlay mode, use separate spin-down cumulative
           // This prevents spin-down from stacking on top of spin-up within the same DOS
           if (stack && effective_spin_mode === `overlay`) {
-            const prev_spin_down = cumulative_spin_down
-              ? [...cumulative_spin_down]
-              : null
+            const prev_spin_down = cumulative_spin_down ? [...cumulative_spin_down] : null
             if (cumulative_spin_down?.length === densities_down.length) {
-              densities_down = densities_down.map((density, idx) =>
-                density + (cumulative_spin_down?.[idx] ?? 0)
+              densities_down = densities_down.map(
+                (density, idx) => density + (cumulative_spin_down?.[idx] ?? 0),
               )
             } else if (cumulative_spin_down) {
               console.warn(`DOS stacking (spin-down): length mismatch for "${label}"`)
@@ -268,9 +266,10 @@
           }
 
           // Use a slightly different shade for spin-down in overlay mode
-          const spin_down_color = effective_spin_mode === `overlay`
-            ? PLOT_COLORS[(dos_idx * 2 + 1) % PLOT_COLORS.length]
-            : color
+          const spin_down_color =
+            effective_spin_mode === `overlay`
+              ? PLOT_COLORS[(dos_idx * 2 + 1) % PLOT_COLORS.length]
+              : color
 
           const series_down: DataSeries = {
             x: is_horizontal ? densities_down : x_values,
@@ -291,9 +290,10 @@
     },
   )
 
-  let all_freqs = $derived( // for clamping phonon noise
+  let all_freqs = $derived(
+    // for clamping phonon noise
     Object.values(doses_dict).flatMap((dos) =>
-      dos.type === `phonon` ? dos.frequencies : dos.energies
+      dos.type === `phonon` ? dos.frequencies : dos.energies,
     ),
   )
   let clamp_to_zero = $derived(
@@ -304,14 +304,13 @@
   )
 
   // Check if we have mirrored spin-down data (negative densities)
-  let has_mirrored_spin = $derived(
-    effective_spin_mode === `mirror` && has_spin_polarized,
-  )
+  let has_mirrored_spin = $derived(effective_spin_mode === `mirror` && has_spin_polarized)
 
   let x_range = $derived.by((): Vec2 | undefined => {
     if (series_data.length === 0) return undefined
     const all_x = series_data.flatMap((srs) => srs.x)
-    const min_x = Math.min(...all_x), max_x = Math.max(...all_x)
+    const min_x = Math.min(...all_x),
+      max_x = Math.max(...all_x)
     // For horizontal orientation with mirror mode, allow negative values (mirrored densities)
     if (is_horizontal && has_mirrored_spin) return [min_x, max_x]
     if (is_horizontal || clamp_to_zero) return [0, max_x]
@@ -321,7 +320,8 @@
   let y_range = $derived.by((): Vec2 | undefined => {
     if (series_data.length === 0) return undefined
     const all_y = series_data.flatMap((srs) => srs.y)
-    const min_y = Math.min(...all_y), max_y = Math.max(...all_y)
+    const min_y = Math.min(...all_y),
+      max_y = Math.max(...all_y)
     // For vertical orientation with mirror mode, allow negative values (mirrored densities)
     if (!is_horizontal && has_mirrored_spin) return [min_y, max_y]
     if (!is_horizontal || clamp_to_zero) return [0, max_y]
@@ -330,16 +330,10 @@
 
   // Get axis labels based on orientation
   let x_label = $derived(
-    is_horizontal
-      ? `Density of States`
-      : is_phonon
-      ? `Frequency (${units})`
-      : `Energy (eV)`,
+    is_horizontal ? `Density of States` : is_phonon ? `Frequency (${units})` : `Energy (eV)`,
   )
   let y_label = $derived(
-    is_horizontal
-      ? (is_phonon ? `Frequency (${units})` : `Energy (eV)`)
-      : `Density of States`,
+    is_horizontal ? (is_phonon ? `Frequency (${units})` : `Energy (eV)`) : `Density of States`,
   )
 
   // Compute final axis configurations with default labels
@@ -359,7 +353,6 @@
     range: y_range,
     ...y_axis,
   })
-
   // Sync zoom changes from ScatterPlot back to parent via bindable y_axis
   // Also clears parent range when internal range becomes invalid (auto-range reset)
   $effect(() => {
@@ -420,9 +413,13 @@
       lower_coords.push(`${lower_x.toFixed(2)},${lower_y.toFixed(2)}`)
     }
     // Trace upper edge forward, lower edge backward, close path
-    return `M${upper_coords[0]} ${
-      upper_coords.slice(1).map((coord) => `L${coord}`).join(` `)
-    } ${lower_coords.toReversed().map((coord) => `L${coord}`).join(` `)} Z`
+    return `M${upper_coords[0]} ${upper_coords
+      .slice(1)
+      .map((coord) => `L${coord}`)
+      .join(` `)} ${lower_coords
+      .toReversed()
+      .map((coord) => `L${coord}`)
+      .join(` `)} Z`
   }
 </script>
 
@@ -436,24 +433,22 @@
     hover_config={{ threshold_px: 50 }}
     controls={{ show: show_controls }}
     on_point_hover={(event) => {
-      hovered_frequency = is_horizontal
-        ? (event?.point?.y ?? null)
-        : (event?.point?.x ?? null)
+      hovered_frequency = is_horizontal ? (event?.point?.y ?? null) : (event?.point?.x ?? null)
     }}
     {...{ range_padding: 0, ...rest }}
   >
     {#snippet tooltip({ x_formatted, y_formatted, label })}
       {@const tooltip_data = format_dos_tooltip(
-      x_formatted,
-      y_formatted,
-      label ?? null,
-      is_horizontal,
-      is_phonon,
-      units,
-      final_x_axis.label ?? ``,
-      internal_y_axis.label ?? ``,
-      Object.keys(doses_dict).length,
-    )}
+        x_formatted,
+        y_formatted,
+        label ?? null,
+        is_horizontal,
+        is_phonon,
+        units,
+        final_x_axis.label ?? ``,
+        internal_y_axis.label ?? ``,
+        Object.keys(doses_dict).length,
+      )}
       {#if tooltip_data.title}<strong>{tooltip_data.title}</strong><br />{/if}
       {#each tooltip_data.lines as line, line_idx (line_idx)}
         {line}{#if line_idx < tooltip_data.lines.length - 1}<br />{/if}
@@ -559,15 +554,16 @@
       {/if}
 
       <!-- Fermi level line for electronic DOS -->
-      {@const fermi_pos = effective_fermi_level !== undefined
-      ? (is_horizontal
-        ? y_scale_fn(effective_fermi_level)
-        : x_scale_fn(effective_fermi_level))
-      : NaN}
+      {@const fermi_pos =
+        effective_fermi_level !== undefined
+          ? is_horizontal
+            ? y_scale_fn(effective_fermi_level)
+            : x_scale_fn(effective_fermi_level)
+          : NaN}
       {#if Number.isFinite(fermi_pos)}
         {@const [x1, x2, y1, y2] = is_horizontal
-      ? [pad.l, width - pad.r, fermi_pos, fermi_pos]
-      : [fermi_pos, fermi_pos, pad.t, height - pad.b]}
+          ? [pad.l, width - pad.r, fermi_pos, fermi_pos]
+          : [fermi_pos, fermi_pos, pad.t, height - pad.b]}
         <line
           class="fermi-level-line"
           {x1}
@@ -608,15 +604,16 @@
       {/if}
 
       <!-- Reference frequency line -->
-      {@const ref_pos = reference_frequency !== null
-      ? (is_horizontal
-        ? y_scale_fn(reference_frequency)
-        : x_scale_fn(reference_frequency))
-      : NaN}
+      {@const ref_pos =
+        reference_frequency !== null
+          ? is_horizontal
+            ? y_scale_fn(reference_frequency)
+            : x_scale_fn(reference_frequency)
+          : NaN}
       {#if Number.isFinite(ref_pos)}
         {@const [x1, x2, y1, y2] = is_horizontal
-      ? [pad.l, width - pad.r, ref_pos, ref_pos]
-      : [ref_pos, ref_pos, pad.t, height - pad.b]}
+          ? [pad.l, width - pad.r, ref_pos, ref_pos]
+          : [ref_pos, ref_pos, pad.t, height - pad.b]}
         <line
           {x1}
           {x2}

package/dist/spectral/helpers.d.ts

@@ -34,14 +34,14 @@ export declare function qpoint_x_position(band_struct: types.BaseBandStructure,
 export declare function find_qpoint_at_rescaled_x(band_struct: types.BaseBandStructure, rescaled_x: number, x_positions: Record<string, Vec2>): number | null;
 type SpinDensities = Record<string, number[]>;
 export interface PymatgenDos {
-    '@class': string;
-    '@module': string;
+    '@class'?: string;
+    '@module'?: string;
     energies: number[];
     densities: SpinDensities | number[];
     efermi: number;
 }
 export interface PymatgenCompleteDos extends PymatgenDos {
-    '@class': `CompleteDos` | `LobsterCompleteDos`;
+    '@class'?: `CompleteDos` | `LobsterCompleteDos`;
     structure?: Record<string, unknown>;
     pdos?: Record<string, SpinDensities>[];
     atom_dos?: Record<string, PymatgenDos>;

package/dist/spectral/helpers.js

@@ -92,7 +92,7 @@ export function pretty_sym_point(symbol) {
         .replaceAll(/\\?DELTA/gi, `Δ`)
         .replaceAll(/\\?SIGMA/gi, `Σ`)
         .replaceAll(/\\?LAMBDA/gi, `Λ`)
-        .replaceAll(/(\p{L})(\d+)/gu, (_, letter, num) => letter +
+        .replaceAll(/(?<letter>\p{L})(?<num>\d+)/gu, (_, letter, num) => letter +
         num
             .split(``)
             .map((digit) => (is_subscript_key(digit) ? SUBSCRIPT_MAP[digit] : digit))
@@ -195,33 +195,24 @@ export function convert_frequencies(frequencies, unit = `THz`) {
 }
 // Normalize DOS densities according to specified mode.
 export function normalize_densities(densities, freqs_or_energies, mode) {
-    if (!mode)
-        return densities;
-    const normalized = [...densities];
     if (mode === `max`) {
-        const max_val = Math.max(...normalized);
-        if (max_val === 0)
-            return normalized;
-        return normalized.map((dens) => dens / max_val);
+        const max_val = Math.max(...densities);
+        return max_val === 0 ? densities : densities.map((dens) => dens / max_val);
     }
-    else if (mode === `sum`) {
-        const sum = normalized.reduce((acc, dens) => acc + dens, 0);
-        if (sum === 0)
-            return normalized;
-        return normalized.map((dens) => dens / sum);
+    if (mode === `sum`) {
+        const sum = densities.reduce((acc, dens) => acc + dens, 0);
+        return sum === 0 ? densities : densities.map((dens) => dens / sum);
     }
-    else if (mode === `integral`) {
+    if (mode === `integral`) {
         if (freqs_or_energies.length < 2)
-            return normalized;
+            return densities;
         const bin_width = freqs_or_energies[1] - freqs_or_energies[0];
-        if (bin_width === 0)
-            return normalized;
-        const sum = normalized.reduce((acc, dens) => acc + dens, 0);
-        if (sum === 0)
-            return normalized;
-        return normalized.map((dens) => dens / (sum * bin_width));
+        const sum = densities.reduce((acc, dens) => acc + dens, 0);
+        if (bin_width === 0 || sum === 0)
+            return densities;
+        return densities.map((dens) => dens / (sum * bin_width));
     }
-    return normalized;
+    return densities;
 }
 // Simple LRU cache for Gaussian smearing results
 // Key: hash of (frequencies, densities, sigma), Value: smeared densities
@@ -255,18 +246,16 @@ function apply_gaussian_smearing_core(freqs_or_energies, densities, sigma) {
     if (sigma <= 0 || orig_sum === 0)
         return densities;
     const smeared = Array(densities.length).fill(0);
-    const truncation_width = 4; // Truncate Gaussian at ±4σ (contribution < 0.01%)
+    const cutoff = 4 * sigma; // Truncate Gaussian at ±4σ (contribution < 0.01%)
+    const inv_two_sigma_sq = 1 / (2 * sigma ** 2);
     for (let idx = 0; idx < freqs_or_energies.length; idx++) {
         const energy = freqs_or_energies[idx];
-        const cutoff = truncation_width * sigma;
         for (let jdx = 0; jdx < freqs_or_energies.length; jdx++) {
-            const e_j = freqs_or_energies[jdx];
-            const delta = Math.abs(energy - e_j);
+            const delta = energy - freqs_or_energies[jdx];
             // Skip points beyond truncation width
-            if (delta > cutoff)
+            if (Math.abs(delta) > cutoff)
                 continue;
-            const gaussian = Math.exp(-((energy - e_j) ** 2) / (2 * sigma ** 2));
-            smeared[idx] += densities[jdx] * gaussian;
+            smeared[idx] += densities[jdx] * Math.exp(-(delta ** 2) * inv_two_sigma_sq);
         }
     }
     // Normalize to preserve integral
@@ -958,7 +947,7 @@ export function compute_frequency_range(band_structs, doses, padding_factor = 0.
             }
         }
     }
-    const dos_list = doses
+    const dos_list = doses && typeof doses === `object`
         ? `densities` in doses
             ? [normalize_dos(doses)]
             : Object.values(doses).map((dos) => normalize_dos(dos))
@@ -981,18 +970,19 @@ export function compute_frequency_range(band_structs, doses, padding_factor = 0.
     }
     if (!Number.isFinite(min_val) || !Number.isFinite(max_val))
         return undefined;
-    const clamp_min = is_phonon &&
-        min_val < 0 && // clamp phonon noise to 0
-        negative_fraction(all_freqs) < IMAGINARY_MODE_NOISE_THRESHOLD;
-    if (clamp_min)
+    // clamp phonon noise to 0
+    if (is_phonon &&
+        min_val < 0 &&
+        negative_fraction(all_freqs) < IMAGINARY_MODE_NOISE_THRESHOLD) {
         min_val = 0;
+    }
     // Calculate padding from (possibly clamped) range for consistency with Bands.svelte
     const padding = (max_val - min_val) * padding_factor;
     return [min_val === 0 ? 0 : min_val - padding, max_val + padding];
 }
 // Parse axis label: "Frequency (THz)" → { name: "Frequency", unit: "THz" }
 function parse_axis_label(label) {
-    const match = /^(.+?)\s*\(([^)]+)\)$/.exec(label);
+    const match = /^(?<name>.+?)\s*\((?<unit>[^)]+)\)$/.exec(label);
     return match ? { name: match[1], unit: match[2] } : { name: label };
 }
 const format_tooltip_line = (name, value, unit) => `${name}: ${value}${unit ? ` ${unit}` : ``}`;

package/dist/state.svelte.js

@@ -1,6 +1,6 @@
 import { AUTO_THEME, COLOR_THEMES, THEME_TYPE } from './theme/index';
 import { DEFAULT_CATEGORY_COLORS, default_element_colors } from './colors';
-import { is_valid_theme_mode } from './theme';
+import { get_theme_preference } from './theme';
 export const selected = $state({
     category: null,
     element: null,
@@ -11,23 +11,10 @@ export const colors = $state({
     category: { ...DEFAULT_CATEGORY_COLORS },
     element: { ...default_element_colors },
 });
-// Theme state with safe initialization
-let initial_theme_mode = AUTO_THEME;
-let initial_system_mode = COLOR_THEMES.light;
-// Safe theme initialization for test environments
-try {
-    if (typeof window !== `undefined` && globalThis.localStorage) {
-        const saved_theme = localStorage.getItem(`matterviz-theme`) ?? ``;
-        initial_theme_mode = is_valid_theme_mode(saved_theme) ? saved_theme : AUTO_THEME;
-    }
-    else {
-        initial_theme_mode = AUTO_THEME;
-        initial_system_mode = COLOR_THEMES.light;
-    }
-}
-catch {
-    // Fallback for test environments or when localStorage is not available
-}
+// Theme state with safe initialization (get_theme_preference handles SSR +
+// missing/invalid localStorage, falling back to AUTO_THEME)
+const initial_theme_mode = get_theme_preference();
+const initial_system_mode = COLOR_THEMES.light;
 export const theme_state = $state({
     mode: initial_theme_mode,
     system_mode: initial_system_mode,

package/dist/structure/Arrow.svelte

@@ -4,7 +4,7 @@
   import { DEFAULTS } from '../settings'
   import { T } from '@threlte/core'
   import type { ComponentProps } from 'svelte'
-  import { Euler, Quaternion, Vector3 } from 'three'
+  import { rotation_from_direction } from './geometry'
 
   let {
     position,
@@ -26,35 +26,22 @@
   } = $props()
 
   const mag = $derived(Math.hypot(...vector))
-  const dir = $derived(
-    mag > math.EPS ? math.scale(vector, 1 / mag) : ([0, 1, 0] as Vec3),
-  )
+  const dir = $derived(mag > math.EPS ? math.scale(vector, 1 / mag) : ([0, 1, 0] as Vec3))
   const vec_len = $derived(mag * scale)
 
   const head_len = $derived(
     arrow_head_length < 0 ? vec_len * -arrow_head_length : arrow_head_length,
   )
   const shaft_len = $derived(Math.max(0, vec_len - head_len * 0.5))
-  const shaft_r = $derived(
-    shaft_radius < 0 ? shaft_len * -shaft_radius : shaft_radius,
-  )
+  const shaft_r = $derived(shaft_radius < 0 ? shaft_len * -shaft_radius : shaft_radius)
   const head_r = $derived(
     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)))
-  const head_pos = $derived(
-    math.add(position, math.scale(dir, shaft_len + head_len * 0.5)),
-  )
+  const head_pos = $derived(math.add(position, math.scale(dir, shaft_len + head_len * 0.5)))
 
-  const rotation = $derived.by((): Vec3 => {
-    if (mag < math.EPS) return [0, 0, 0]
-    const quat = new Quaternion().setFromUnitVectors(
-      new Vector3(0, 1, 0),
-      new Vector3(...dir),
-    )
-    return new Euler().setFromQuaternion(quat).toArray().slice(0, 3) as Vec3
-  })
+  const rotation = $derived(rotation_from_direction(vector))
 </script>
 
 {#if shaft_len > 0.01}