matterviz 0.3.7 → 0.4.0

package/dist/symmetry/spacegroups.js

@@ -40,24 +40,20 @@ export function spacegroup_num_to_crystal_sys(spacegroup) {
 }
 // Convert space group (number or symbol) to crystal system
 export function spacegroup_to_crystal_sys(spacegroup) {
-    if (typeof spacegroup === `number`)
-        return spacegroup_num_to_crystal_sys(spacegroup);
-    // Try to parse as symbol
-    const number = SPACEGROUP_SYMBOL_TO_NUM[spacegroup];
-    if (number !== undefined)
-        return spacegroup_num_to_crystal_sys(number);
-    // Try to parse string as number
-    const parsed = parseInt(spacegroup, 10);
-    if (!isNaN(parsed))
-        return spacegroup_num_to_crystal_sys(parsed);
-    return null;
+    const num = normalize_spacegroup(spacegroup);
+    return num == null ? null : spacegroup_num_to_crystal_sys(num);
 }
-// Normalize space group input to number
+// Normalize space group input (number, Hermann-Mauguin symbol, or numeric string
+// like "225") to a space group number in [1, 230], or null if invalid
 export function normalize_spacegroup(spacegroup) {
     if (typeof spacegroup === `number`) {
         return spacegroup >= 1 && spacegroup <= 230 ? spacegroup : null;
     }
-    return SPACEGROUP_SYMBOL_TO_NUM[spacegroup] ?? null;
+    const from_symbol = SPACEGROUP_SYMBOL_TO_NUM[spacegroup];
+    if (from_symbol !== undefined)
+        return from_symbol;
+    const parsed = parseInt(spacegroup, 10);
+    return isNaN(parsed) ? null : normalize_spacegroup(parsed);
 }
 export const SPACEGROUP_SYMBOL_TO_NUM = {
     // Triclinic
@@ -392,3 +388,42 @@ export const SPACEGROUP_NUM_TO_SYMBOL = Object.entries(SPACEGROUP_SYMBOL_TO_NUM)
         acc[num] = symbol;
     return acc;
 }, {});
+// Build crystal-system -> spacegroup hierarchy data for the Sunburst component from a
+// list of spacegroup numbers or symbols (one entry per occurrence; counts become leaf
+// values). Leaf ids follow the pymatviz spacegroup_sunburst scheme, e.g. "cubic/225".
+export function spacegroup_sunburst_data(spacegroups) {
+    const counts = new Map();
+    let n_invalid = 0;
+    for (const spacegroup of spacegroups) {
+        const num = normalize_spacegroup(spacegroup); // numbers, symbols, numeric strings
+        if (num == null) {
+            n_invalid += 1;
+            continue;
+        }
+        counts.set(num, (counts.get(num) ?? 0) + 1);
+    }
+    if (n_invalid > 0) {
+        console.warn(`spacegroup_sunburst_data: skipped ${n_invalid} invalid spacegroup(s) (expected numbers 1-230 or Hermann-Mauguin symbols)`);
+    }
+    // Emit crystal systems in canonical (space group number) order, only those present
+    return CRYSTAL_SYSTEMS.flatMap((system) => {
+        const nums = [...counts.keys()]
+            .filter((num) => spacegroup_num_to_crystal_sys(num) === system)
+            .sort((num_a, num_b) => num_a - num_b);
+        if (nums.length === 0)
+            return [];
+        return [
+            {
+                id: system,
+                label: system,
+                color: CRYSTAL_SYSTEM_COLORS[system],
+                children: nums.map((num) => ({
+                    id: `${system}/${num}`,
+                    label: SPACEGROUP_NUM_TO_SYMBOL[num] ?? `${num}`,
+                    value: counts.get(num),
+                    metadata: { spacegroup: num, crystal_system: system },
+                })),
+            },
+        ];
+    });
+}

package/dist/table/HeatmapTable.svelte

@@ -32,6 +32,57 @@
   const is_invalid = (val: unknown) =>
     val == null || (typeof val === `number` && Number.isNaN(val))
 
+  // tooltip() wires [title]/[aria-label]/[data-title] elements once when it runs.
+  // Table cells are replaced when the table re-renders (sort, filter, data or
+  // pagination changes), which would silently drop their tooltips. Observe the
+  // container and incrementally wire newly added elements / unwire removed ones,
+  // instead of tearing down and rebuilding every tooltip on each unrelated DOM
+  // mutation (dropdowns, panes, pagination, context menu).
+  const tooltip_selector = `[title], [aria-label], [data-title]`
+  function table_tooltips(node: HTMLElement) {
+    const options = { allow_html: true } as const
+    // Per-element cleanups so individual nodes can be unwired as they leave the DOM.
+    const wired = new SvelteMap<Element, () => void>()
+
+    const wire = (root: Element) => {
+      const targets = root.matches(tooltip_selector)
+        ? [root, ...root.querySelectorAll(tooltip_selector)]
+        : [...root.querySelectorAll(tooltip_selector)]
+      for (const el of targets) {
+        if (!(el instanceof HTMLElement) || wired.has(el)) continue
+        // tooltip() only mutates attributes (title -> data-original-title), never
+        // childList, so wiring here can't re-trigger the childList observer below.
+        const cleanup = tooltip(options)(el)
+        if (cleanup) wired.set(el, cleanup)
+      }
+    }
+
+    wire(node)
+    const observer = new MutationObserver((mutations) => {
+      // Unwire elements that left the DOM. isConnected stays true for moved nodes
+      // (e.g. row reordering on sort), so those keep their tooltips without churn.
+      // Deleting the current entry mid-iteration is safe for Map.
+      for (const [el, cleanup] of wired) {
+        if (!el.isConnected) {
+          cleanup()
+          wired.delete(el)
+        }
+      }
+      // Wire only the freshly added subtrees, not the whole container.
+      for (const { addedNodes } of mutations) {
+        for (const added of addedNodes) {
+          if (added instanceof Element) wire(added)
+        }
+      }
+    })
+    observer.observe(node, { childList: true, subtree: true })
+    return () => {
+      observer.disconnect()
+      for (const cleanup of wired.values()) cleanup()
+      wired.clear()
+    }
+  }
+
   const NUMERIC_WITH_ERROR_RE =
     /^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/
 
@@ -484,7 +535,7 @@
 
         // Push invalid values to bottom
         if (is_invalid(val1) || is_invalid(val2)) {
-          return +is_invalid(val1) - +is_invalid(val2)
+          return Number(is_invalid(val1)) - Number(is_invalid(val2))
         }
 
         const sort_val1 = get_sort_val(val1)
@@ -497,10 +548,11 @@
             sensitivity: `base`,
           })
           if (cmp !== 0) return cmp * modifier
-        } else {
-          if (sort_val1 !== sort_val2) {
-            return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier
-          }
+        } else if (typeof sort_val1 !== typeof sort_val2) {
+          // number<string is false both ways, breaking the comparator: numbers sort first
+          return (typeof sort_val1 === `number` ? -1 : 1) * modifier
+        } else if (sort_val1 !== sort_val2) {
+          return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier
         }
       }
       return 0
@@ -558,7 +610,7 @@
     // Shift+click for multi-column sort
     if (event.shiftKey) {
       const existing_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-      if (existing_idx >= 0) {
+      if (existing_idx !== -1) {
         // Toggle direction or remove if clicked again
         const existing = multi_sort[existing_idx]
         if (existing.ascending === (col.better === `lower`)) {
@@ -684,7 +736,7 @@
 
     // Check multi-sort first
     const multi_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-    if (multi_idx >= 0) {
+    if (multi_idx !== -1) {
       const arrow = multi_sort[multi_idx].ascending ? `↓` : `↑`
       const badge = multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``
       return `<span style="font-size: 0.8em;">${arrow}${badge}</span>`
@@ -716,7 +768,7 @@
   function toggle_row_select(row: RowData) {
     const row_id = get_row_id(row)
     const idx = selected_rows.findIndex((selected_row) => get_row_id(selected_row) === row_id)
-    if (idx >= 0) {
+    if (idx !== -1) {
       selected_rows = selected_rows.filter((_, i) => i !== idx)
     } else {
       selected_rows = [...selected_rows, row]
@@ -755,7 +807,7 @@
     const quote = (str: string) => {
       if (!csv_quote) return str
       if (str.includes(`,`) || str.includes(`"`) || str.includes(`\n`)) {
-        return `"${str.replace(/"/g, `""`)}"`
+        return `"${str.replaceAll('"', `""`)}"`
       }
       return str
     }
@@ -799,7 +851,7 @@
     const link = document.createElement(`a`)
     link.href = url
     link.download = filename
-    document.body.appendChild(link)
+    document.body.append(link)
     link.click()
     document.body.removeChild(link)
     URL.revokeObjectURL(url)
@@ -869,7 +921,7 @@
 {/snippet}
 
 <div
-  {@attach tooltip({ allow_html: true })}
+  {@attach table_tooltips}
   {...rest_props}
   bind:this={container_el}
   class="table-container {rest_props.class ?? ``}"

package/dist/table/HeatmapTable.svelte.d.ts

@@ -44,6 +44,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     }]>;
     footer?: Snippet;
 };
-declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "loading" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
+declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "loading" | "heatmap_opacity">;
 type HeatmapTable = ReturnType<typeof HeatmapTable>;
 export default HeatmapTable;

package/dist/table/index.d.ts

@@ -2,9 +2,7 @@ import * as d3sc from 'd3-scale-chromatic';
 import type { Snippet } from 'svelte';
 export { default as HeatmapTable } from './HeatmapTable.svelte';
 export { default as ToggleMenu } from './ToggleMenu.svelte';
-export type CellVal = string | number | boolean | undefined | null | Record<string, unknown> | {
-    [key: string]: string | number | null | undefined | boolean;
-}[];
+export type CellVal = string | number | boolean | undefined | null | Record<string, unknown> | Record<string, string | number | null | undefined | boolean>[];
 export type RowData = {
     style?: string;
     class?: string;

package/dist/table/index.js

@@ -5,7 +5,7 @@ import * as d3sc from 'd3-scale-chromatic';
 export { default as HeatmapTable } from './HeatmapTable.svelte';
 export { default as ToggleMenu } from './ToggleMenu.svelte';
 // Strip HTML tags from a string (for search, export, etc.)
-export const strip_html = (str) => str.replace(/<[^>]*>/g, ``);
+export const strip_html = (str) => str.replaceAll(/<[^>]*>/g, ``);
 // Calculate table cell background color based on its value and column config
 export function calc_cell_color(val, // cell value
 all_values, // all values in the column

package/dist/theme/index.js

@@ -33,7 +33,7 @@ export const get_theme_preference = () => {
         return AUTO_THEME;
     try {
         const saved = localStorage[storage_key];
-        return is_valid_theme_mode(saved || ``) ? saved : AUTO_THEME;
+        return is_valid_theme_mode(saved ?? ``) ? saved : AUTO_THEME;
     }
     catch {
         return AUTO_THEME;
@@ -57,8 +57,8 @@ export const apply_theme_to_dom = (mode) => {
     if (!resolved || !(resolved in THEME_TYPE)) {
         throw new Error(`Invalid theme mode: ${resolved}`);
     }
-    const theme = globalThis.MATTERVIZ_THEMES?.[resolved] || {};
-    const css_vars = globalThis.MATTERVIZ_CSS_MAP || {};
+    const theme = globalThis.MATTERVIZ_THEMES?.[resolved] ?? {};
+    const css_vars = globalThis.MATTERVIZ_CSS_MAP ?? {};
     const root = document.documentElement;
     Object.entries(theme).forEach(([key, value]) => {
         const css_var = css_vars[key];
@@ -72,8 +72,8 @@ export const apply_theme_to_dom = (mode) => {
     root.style.setProperty(`color-scheme`, color_scheme);
 };
 // Theme getters
-export const light_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.light] || {};
-export const dark_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.dark] || {};
-export const white_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.white] || {};
-export const black_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.black] || {};
-export const get_theme_by_name = (name) => globalThis.MATTERVIZ_THEMES?.[name] || {};
+export const light_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.light] ?? {};
+export const dark_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.dark] ?? {};
+export const white_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.white] ?? {};
+export const black_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.black] ?? {};
+export const get_theme_by_name = (name) => globalThis.MATTERVIZ_THEMES?.[name] ?? {};

package/dist/tooltip/KCoords.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Shared k-point coordinate rows for hover tooltips (Brillouin zone + Fermi surface)
+  import { format_vec3 } from '../labels'
+  import type { Vec3 } from '../math'
+
+  let { cartesian, fractional = null }: {
+    cartesian: Vec3
+    fractional?: Vec3 | null
+  } = $props()
+</script>
+
+<div class="k-coord-row">
+  <span class="k-coord-label"><span class="vec">k</span> (Å⁻¹):</span>
+  <span>{format_vec3(cartesian)}</span>
+</div>
+{#if fractional}
+  <div class="k-coord-row">
+    <span class="k-coord-label"><span class="vec">k</span> (frac):</span>
+    <span>{format_vec3(fractional)}</span>
+  </div>
+{/if}
+
+<style>
+  .k-coord-row {
+    display: flex;
+    gap: 4px;
+  }
+  .k-coord-label {
+    opacity: 0.8;
+    min-width: 50px;
+  }
+  .vec {
+    position: relative;
+    font-style: italic;
+  }
+  .vec::after {
+    content: '→';
+    position: absolute;
+    left: 50%;
+    top: -0.85em;
+    transform: translateX(-50%);
+    font-size: 0.6em;
+    font-style: normal;
+  }
+</style>

package/dist/tooltip/KCoords.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Vec3 } from '../math';
+type $$ComponentProps = {
+    cartesian: Vec3;
+    fractional?: Vec3 | null;
+};
+declare const KCoords: import("svelte").Component<$$ComponentProps, {}, "">;
+type KCoords = ReturnType<typeof KCoords>;
+export default KCoords;

package/dist/tooltip/index.d.ts

@@ -1,2 +1,3 @@
+export { default as KCoords } from './KCoords.svelte';
 export { default as TooltipContent } from './TooltipContent.svelte';
 export type * from './types';

package/dist/tooltip/index.js

@@ -1 +1,2 @@
+export { default as KCoords } from './KCoords.svelte';
 export { default as TooltipContent } from './TooltipContent.svelte';

package/dist/trajectory/Trajectory.svelte

@@ -6,13 +6,14 @@
   import Spinner from '../feedback/Spinner.svelte'
   import Icon from '../Icon.svelte'
   import { handle_url_drop, load_from_url } from '../io'
+  import { forward_window_keydown, handle_and_prevent } from '../keyboard'
   import { format_num, trajectory_property_config } from '../labels'
   import { sanitize_html } from '../sanitize'
   import { toggle_fullscreen } from '../layout'
   import type { ControlsConfig, DataSeries, Orientation, Point } from '../plot'
-  import type { ScatterHandlerProps } from '../plot/types'
+  import type { ScatterHandlerProps } from '../plot/core/types'
   import { Histogram, ScatterPlot } from '../plot'
-  import { toggle_series_visibility } from '../plot/utils/series-visibility'
+  import { toggle_series_visibility } from '../plot/core/utils/series-visibility'
   import { DEFAULTS } from '../settings'
   import Structure from '../structure/Structure.svelte'
   import { scaleLinear } from 'd3-scale'
@@ -31,7 +32,6 @@
   import { TrajectoryError, TrajectoryExportPane, TrajectoryInfoPane } from './index'
   import type { AtomTypeMapping, LoadingOptions } from './parse'
   import {
-    create_frame_loader,
     get_unsupported_format_message,
     MAX_BIN_FILE_SIZE,
     MAX_TEXT_FILE_SIZE,
@@ -98,6 +98,7 @@
     loading_options = {},
     atom_type_mapping,
     plot_skimming = true,
+    hovered = $bindable(false),
     ...rest
   }: EventHandlers & HTMLAttributes<HTMLDivElement> & {
     // trajectory data - can be provided directly or loaded from file
@@ -184,6 +185,8 @@
     atom_type_mapping?: AtomTypeMapping
     // Disable plot skimming (mouse over plot doesn't update structure/step slider)
     plot_skimming?: boolean
+    // bindable: true while the pointer is over the viewer (drives hover-scoped shortcuts)
+    hovered?: boolean
   } = $props()
 
   let dragover = $state(false)
@@ -341,19 +344,28 @@
   // Prevent circular updates when syncing legend toggles back to bindable visible_properties.
   let syncing_visible_properties = false
 
-  // Regenerate plot series when trajectory, config, or visible_properties change
+  // Regenerate plot series when trajectory, config, or visible_properties change.
+  // Read ALL reactive deps before the syncing guard can return: a guarded run that
+  // reads no dependencies leaves the effect dep-less, and Svelte permanently unlinks
+  // dep-less effects - trajectory changes would then never regenerate the plot.
   $effect(() => {
+    const [traj, extractor, config, keys] = [
+      trajectory,
+      data_extractor,
+      extended_config,
+      visible_properties,
+    ]
     if (syncing_visible_properties) return
-    const keys_set = visible_properties ? new Set(visible_properties) : undefined
+    const keys_set = keys ? new Set(keys) : undefined
 
-    if (trajectory?.plot_metadata) {
-      plot_series = generate_streaming_plot_series(trajectory.plot_metadata, {
-        property_config: extended_config,
+    if (traj?.plot_metadata) {
+      plot_series = generate_streaming_plot_series(traj.plot_metadata, {
+        property_config: config,
         default_visible_properties: keys_set,
       })
-    } else if (trajectory) {
-      plot_series = generate_plot_series(trajectory, data_extractor, {
-        property_config: extended_config,
+    } else if (traj) {
+      plot_series = generate_plot_series(traj, extractor, {
+        property_config: config,
         default_visible_properties: keys_set,
       })
     } else {
@@ -363,7 +375,7 @@
 
   // Update visible_properties binding when user toggles series visibility in legend
   $effect(() => {
-    if (!plot_series.length) return
+    if (plot_series.length === 0) return
 
     // Extract property keys from visible series metadata
     const visible_keys = plot_series.flatMap((srs) => {
@@ -477,8 +489,8 @@
   }
 
   // Helper function to read file content
-  async function read_file_content(file: File): Promise<string | ArrayBuffer> {
-    return new Promise((resolve, reject) => {
+  const read_file_content = (file: File): Promise<string | ArrayBuffer> =>
+    new Promise((resolve, reject) => {
       const reader = new FileReader()
       reader.addEventListener(`load`, () => resolve(reader.result as string | ArrayBuffer))
       reader.addEventListener(`error`, () => reject(new Error(`Failed to read file`)))
@@ -488,7 +500,6 @@
         reader.readAsText(file)
       } else reader.readAsArrayBuffer(file)
     })
-  }
 
   // Play/pause functionality
   function toggle_play() {
@@ -506,7 +517,7 @@
     is_playing = false
     if (trajectory) {
       on_pause?.({
-        trajectory: trajectory,
+        trajectory,
         step_idx: current_step_idx,
         frame_count: total_frames,
       })
@@ -517,9 +528,10 @@
     const playing = is_playing
     const rate_ms = 1000 / fps
 
+    // Read current interval once (untrack to avoid circular dependency)
+    const current_interval = untrack(() => play_interval)
     if (playing) {
-      // Clear existing interval if it exists - use untrack to avoid circular dependency
-      const current_interval = untrack(() => play_interval)
+      // Clear existing interval if it exists
       if (current_interval !== undefined) clearInterval(current_interval)
 
       // Create new interval with current frame rate
@@ -539,13 +551,10 @@
           }
         } else next_step()
       }, rate_ms)
-    } else {
-      // Clear interval when not playing - use untrack to avoid circular dependency
-      const current_interval = untrack(() => play_interval)
-      if (current_interval !== undefined) {
-        clearInterval(current_interval)
-        play_interval = undefined
-      }
+    } else if (current_interval !== undefined) {
+      // Clear interval when not playing
+      clearInterval(current_interval)
+      play_interval = undefined
     }
   })
 
@@ -624,6 +633,9 @@
         // Read file content directly
         const content = await read_file_content(file)
         await load_trajectory_data(content, file.name)
+        // Don't fall through: drops from IDEs/file managers often also carry a
+        // text/plain payload (the file path) which would clobber the loaded data
+        return
       }
 
       // Check for plain text data (fallback)
@@ -631,7 +643,6 @@
       if (text_data) {
         file_size = new Blob([text_data]).size // Calculate byte size of text data
         await load_trajectory_data(text_data, `trajectory.json`)
-        return
       }
     } catch (error) {
       console.error(`File drop failed:`, error)
@@ -674,7 +685,7 @@
 
   // Watch for frame rate changes
   $effect(() => {
-    on_frame_rate_change?.({ trajectory, fps: fps })
+    on_frame_rate_change?.({ trajectory, fps })
   })
 
   async function load_trajectory_data(data: string | ArrayBuffer, filename: string) {
@@ -751,9 +762,10 @@
         parsing_progress = progress
       }, merged_options)
 
-      // Attach frame loader and original data directly to trajectory for unified access
-      orig_data = data
-      trajectory.frame_loader = create_frame_loader(filename)
+      // Keep original data for on-demand frame loads only when indexed parsing attached a
+      // frame_loader. Direct-parse fallbacks (e.g. large JSON or extensionless blob:
+      // filenames) load all frames upfront, so retaining a full duplicate payload wastes memory.
+      orig_data = trajectory?.frame_loader ? data : null
     } catch (error) {
       console.error(`Indexed loading failed:`, error)
       throw error
@@ -783,9 +795,10 @@
     }
   }
 
-  // Handle keyboard shortcuts
-  function onkeydown(event: KeyboardEvent) {
-    if (!trajectory) return
+  // Handle keyboard shortcuts. Returns true if the key was handled, so the caller
+  // (handle_and_prevent / forward_window_keydown) can suppress the browser default.
+  function onkeydown(event: KeyboardEvent): boolean {
+    if (!trajectory) return false
 
     // Don't handle shortcuts if user is typing in an input field (but allow if it's our step input and not focused)
     const target = event.target instanceof HTMLElement ? event.target : null
@@ -794,18 +807,25 @@
       target?.tagName === `INPUT` || target?.tagName === `TEXTAREA`
 
     // Skip if typing in an input that's not our step input
-    if (is_input_focused && !is_step_input) return
+    if (is_input_focused && !is_step_input) return false
 
     // If typing in step input, only handle certain navigation keys
     if (is_step_input && is_input_focused) {
       // Allow normal typing, but handle special navigation keys
       if ([`Escape`, `Enter`].includes(event.key)) target?.blur() // Remove focus from input
-      return
+      return false
     }
 
     const is_cmd_or_ctrl = event.metaKey || event.ctrlKey
 
-    // Navigation shortcuts
+    // Only the Arrow keys intentionally use Cmd/Ctrl (jump to first/last). For any
+    // other key a Cmd/Ctrl combo is a browser/OS shortcut (find, tab switch, zoom)
+    // — bail so we neither hijack it nor preventDefault the browser's own action.
+    if (is_cmd_or_ctrl && event.key !== `ArrowLeft` && event.key !== `ArrowRight`) return false
+
+    // Track whether a shortcut fired so callers suppress browser defaults (page
+    // scroll on Space/arrows/PageUp-Down/Home/End) only when we handled the key.
+    let handled = true
     if (event.key === ` `) toggle_play()
     else if (event.key === `ArrowLeft`) {
       if (is_cmd_or_ctrl) go_to_step(0)
@@ -829,10 +849,10 @@
     // Playback speed shortcuts (only when playing)
     else if ((event.key === `=` || event.key === `+`) && is_playing) {
       fps = Math.min(fps_range[1], fps + 0.2)
-      on_frame_rate_change?.({ trajectory, fps: fps })
+      on_frame_rate_change?.({ trajectory, fps })
     } else if (event.key === `-` && is_playing) {
       fps = Math.max(fps_range[0], fps - 0.2)
-      on_frame_rate_change?.({ trajectory, fps: fps })
+      on_frame_rate_change?.({ trajectory, fps })
     } // System shortcuts
     else if (event.key === `Escape`) {
       if (document.fullscreenElement) document.exitFullscreen()
@@ -841,7 +861,9 @@
     } // Number keys 0-9 - jump to percentage of trajectory
     else if (event.key >= `0` && event.key <= `9`) {
       go_to_step(Math.floor((parseInt(event.key, 10) / 10) * (total_frames - 1)))
-    }
+    } else handled = false
+
+    return handled
   }
 
   // Separate state variables for each pane to match component prop types
@@ -859,6 +881,8 @@
   }}
 />
 
+<svelte:window onkeydown={forward_window_keydown(() => hovered, onkeydown)} />
+
 <div
   class:dragover
   class:active={is_playing || structure_info_open || structure_controls_open ||
@@ -869,6 +893,8 @@
   role="button"
   tabindex="0"
   aria-label="Drop trajectory file here to load"
+  onmouseenter={() => (hovered = true)}
+  onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
   ondragover={(event) => {
     event.preventDefault()
@@ -880,7 +906,7 @@
     dragover = false
   }}
   onclick={handle_click_outside}
-  {onkeydown}
+  onkeydown={handle_and_prevent(onkeydown)}
   {...rest}
   class="trajectory {actual_layout} {rest.class ?? ``}"
   class:show-both-views={[`structure+scatter`, `structure+histogram`].includes(display_mode) &&

package/dist/trajectory/Trajectory.svelte.d.ts

@@ -71,7 +71,8 @@ type $$ComponentProps = EventHandlers & HTMLAttributes<HTMLDivElement> & {
     loading_options?: LoadingOptions;
     atom_type_mapping?: AtomTypeMapping;
     plot_skimming?: boolean;
+    hovered?: boolean;
 };
-declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "trajectory" | "fps" | "display_mode" | "current_step_idx" | "visible_properties">;
+declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "trajectory" | "hovered" | "fps" | "display_mode" | "current_step_idx" | "visible_properties">;
 type Trajectory = ReturnType<typeof Trajectory>;
 export default Trajectory;

package/dist/trajectory/TrajectoryExportPane.svelte

@@ -8,6 +8,7 @@
   import type { TrajectoryType } from './'
   import type { ComponentProps } from 'svelte'
   import { tooltip } from 'svelte-multiselect/attachments'
+  import { to_error } from '../utils'
 
   let {
     export_pane_open = $bindable(false),
@@ -123,7 +124,7 @@
       }, 1000)
     } catch (error) {
       console.error(`Export failed:`, error)
-      export_error = error instanceof Error ? error.message : String(error)
+      export_error = to_error(error).message
       is_exporting = false
       export_progress = 0
     }

package/dist/trajectory/TrajectoryInfoPane.svelte

@@ -45,7 +45,7 @@
     frames.map((frame) => frame.metadata?.[prop]).filter(is_valid_number)
 
   const format_range = (values: number[], unit = ``, decimals = `.2~f`) => {
-    if (!values.length) return null
+    if (values.length === 0) return null
     if (values.length === 1) {
       return `${format_num(values[0], decimals)} ${unit}`.trim()
     }
@@ -61,6 +61,7 @@
     tooltip?: string,
   ): InfoItem | null => value ? { label, value, key, tooltip } : null
 
+  // oxlint-disable-next-line eslint-plugin-unicorn/prefer-native-coercion-functions -- type predicate needed for narrowing
   const is_info_item = (item: unknown): item is InfoItem => Boolean(item)
 
   const safe_formula = (structure: AnyStructure) => {