matterviz 0.4.1 → 0.4.3

package/dist/EmptyState.svelte

@@ -2,7 +2,11 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { message, children, ...rest }: {
+  let {
+    message,
+    children,
+    ...rest
+  }: {
     // Simple text message to display. Ignored if children snippet is provided.
     message?: string
     // Custom content to render. Takes precedence over message prop.
@@ -10,7 +14,7 @@
   } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
-<div {...rest} class="empty-state {rest.class ?? ``}">
+<div {...rest} class={[`empty-state`, rest.class]}>
   {#if children}
     {@render children()}
   {:else if message}
@@ -34,10 +38,12 @@
   .empty-state :global(.status-message) {
     --status-message-border: none; /* Remove inner border from StatusMessage */
   }
-  .empty-state > :global(:is(p, h3, ul, strong)), .empty-state > .message {
+  .empty-state > :global(:is(p, h3, ul, strong)),
+  .empty-state > .message {
     max-width: var(--empty-state-max-width, 500px);
   }
-  .empty-state :global(p), .empty-state > .message {
+  .empty-state :global(p),
+  .empty-state > .message {
     color: var(--text-color-muted);
     margin: 0;
   }

package/dist/FilePicker.svelte

@@ -56,12 +56,23 @@
   // Timer for distinguishing click from double-click (per-component state)
   let click_timer: ReturnType<typeof setTimeout> | null = null
   let click_timer_file: string | null = null
+  const file_key = (file: FileInfo): string => file.url || file.name
 
   const clear_click_timer = () => {
-    if (click_timer) clearTimeout(click_timer)
+    if (click_timer !== null) clearTimeout(click_timer)
     click_timer = null
     click_timer_file = null
   }
+  const is_activation_key = (event: KeyboardEvent): boolean =>
+    event.key === `Enter` || event.key === ` `
+
+  const schedule_single_click = (file: FileInfo, event: MouseEvent) => {
+    click_timer_file = file_key(file)
+    click_timer = setTimeout(() => {
+      clear_click_timer()
+      on_click?.(file, event)
+    }, CLICK_DELAY)
+  }
 
   // Helper function to get the base file type (removing .gz extension)
   const get_base_file_type = (file: FileInfo): string => {
@@ -94,38 +105,29 @@
   )
 
   const toggle_filter = (kind: FilterKind, filter: string) => {
-    if (kind === `category`) {
-      active_category_filter = active_category_filter === filter ? null : filter
-      active_type_filter = null
-    } else {
-      active_type_filter = active_type_filter === filter ? null : filter
-      active_category_filter = null
-    }
+    const active_filter = kind === `category` ? active_category_filter : active_type_filter
+    active_category_filter = kind === `category` && active_filter !== filter ? filter : null
+    active_type_filter = kind === `type` && active_filter !== filter ? filter : null
   }
 
   const handle_drag_start = (file: FileInfo) => (event: DragEvent) => {
-    const file_url = file.url || file.name // Get the URL to drag (falling back to name)
-
-    const payload = JSON.stringify({
-      name: file.name,
-      url: file_url,
-      type: file.type || get_base_file_type(file),
-      category: file.category,
-    })
-    // Set file data as JSON for applications that can handle it
-    event.dataTransfer?.setData(`application/json`, payload)
-
-    // Also set plain text as fallback for external applications
-    event.dataTransfer?.setData(`text/plain`, file_url)
-
+    const url = file_key(file)
+    event.dataTransfer?.setData(
+      `application/json`,
+      JSON.stringify({
+        name: file.name,
+        url,
+        type: file.type || get_base_file_type(file),
+        category: file.category,
+      }),
+    )
+    event.dataTransfer?.setData(`text/plain`, url)
     on_drag_start?.(file, event)
   }
 
   // Get unique file types/categories for format/category filters
   let uniq_formats = $derived([...new Set(files.map(get_base_file_type))].sort())
-  let uniq_categories = $derived(
-    [...new Set(files.map(get_category_id))].filter(Boolean).sort(),
-  )
+  let uniq_categories = $derived([...new Set(files.map(get_category_id))].sort())
 </script>
 
 <div class="file-picker" class:vertical={layout === `vertical`} {...rest}>
@@ -135,11 +137,8 @@
       <span
         class="legend-item"
         class:active={is_active}
-        onclick={() => category && toggle_filter(`category`, category)}
-        onkeydown={(evt) =>
-        (evt.key === `Enter` || evt.key === ` `) &&
-        category &&
-        toggle_filter(`category`, category)}
+        onclick={() => toggle_filter(`category`, category)}
+        onkeydown={(event) => is_activation_key(event) && toggle_filter(`category`, category)}
         role="button"
         tabindex="0"
         aria-pressed={is_active}
@@ -148,8 +147,7 @@
         {category}
       </span>
     {/each}
-    {#if show_category_filters && uniq_categories.length > 0 &&
-        uniq_formats.length > 0}
+    {#if show_category_filters && uniq_categories.length > 0 && uniq_formats.length > 0}
       <span class="divider"></span>
     {/if}
 
@@ -159,16 +157,13 @@
         class="legend-item format-item"
         class:active={is_active}
         onclick={() => toggle_filter(`type`, format)}
-        onkeydown={(evt) =>
-        (evt.key === `Enter` || evt.key === ` `) && toggle_filter(`type`, format)}
+        onkeydown={(event) => is_activation_key(event) && toggle_filter(`type`, format)}
         role="button"
         tabindex="0"
         {@attach tooltip({ content: `Filter to show only ${format.toUpperCase()} files` })}
       >
-        <span
-          class="format-circle"
-          style:background-color={file_type_colors[format]}
-        ></span> {format.toUpperCase()}
+        <span class="format-circle" style:background-color={file_type_colors[format]}></span>
+        {format.toUpperCase()}
       </span>
     {/each}
 
@@ -176,7 +171,7 @@
       <button
         {@attach tooltip({ content: `Clear all filters` })}
         class="clear-filter"
-        onclick={() => [active_category_filter, active_type_filter] = [null, null]}
+        onclick={() => ([active_category_filter, active_type_filter] = [null, null])}
       >
         ✕
       </button>
@@ -194,26 +189,17 @@
       ondragend={() => on_drag_end?.()}
       onclick={(event) => {
         clear_click_timer()
-        if (on_dblclick) {
-          // Delay click to allow double-click to cancel it
-          const target_file = file.name
-          click_timer_file = target_file
-          click_timer = setTimeout(() => {
-            if (click_timer_file === target_file) {
-              clear_click_timer()
-              on_click?.(file, event)
-            }
-          }, CLICK_DELAY)
-        } else {
-          on_click?.(file, event)
-        }
+        if (on_dblclick) schedule_single_click(file, event)
+        else on_click?.(file, event)
       }}
       ondblclick={(event) => {
+        const pending = click_timer_file
         clear_click_timer()
-        on_dblclick?.(file, event)
+        if (pending !== null && pending === file_key(file)) on_dblclick?.(file, event)
+        else schedule_single_click(file, event)
       }}
       onkeydown={(event) => {
-        if ([`Enter`, ` `].includes(event.key)) {
+        if (is_activation_key(event)) {
           event.preventDefault()
           clear_click_timer()
           on_click?.(file, event)
@@ -222,17 +208,19 @@
       role="button"
       tabindex="0"
       title={on_click
-      ? `Click to load or drag this ${base_type.toUpperCase()} file`
-      : `Drag this ${base_type.toUpperCase()} file`}
+        ? `Click to load or drag this ${base_type.toUpperCase()} file`
+        : `Drag this ${base_type.toUpperCase()} file`}
     >
       {#if file.label}
         <span
           class="file-type-badge"
           style:background-color={file_type_colors[base_type] ?? `rgba(128,128,128,0.8)`}
-        >{base_type.toUpperCase()}</span>
+          >{base_type.toUpperCase()}</span
+        >
       {/if}
       <div class="file-name">
-        {file.category ? `${file.category_icon} ` : ``}{file.label ?? file.name}
+        {file.category && file.category_icon ? `${file.category_icon} ` : ``}{file.label ??
+          file.name}
       </div>
     </div>
   {/each}
@@ -318,9 +306,9 @@
   .file-item {
     display: flex;
     align-items: center;
-    padding: 4pt 8pt;
+    padding: 2pt 8pt;
     border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2));
-    border-radius: 20px;
+    border-radius: 9px;
     cursor: grab;
     background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.1));
     transition: all 0.2s ease;

package/dist/Icon.svelte

@@ -3,10 +3,13 @@
   import { ICON_DATA, type IconName } from './icons'
 
   type IconData = { path: string; viewBox: string; stroke?: string }
-  let { icon, path, viewBox = `0 0 24 24`, stroke, ...rest }:
-    & { icon?: IconName }
-    & Partial<IconData>
-    & SVGAttributes<SVGSVGElement> = $props()
+  let {
+    icon,
+    path,
+    viewBox = `0 0 24 24`,
+    stroke,
+    ...rest
+  }: { icon?: IconName } & Partial<IconData> & SVGAttributes<SVGSVGElement> = $props()
 
   const data: IconData = $derived.by(() => {
     if (path) return { path, viewBox, stroke }

package/dist/MillerIndexInput.svelte

@@ -20,7 +20,7 @@
     }
     // Fall back to compact single-digit format: "001", "-101"
     const compact = input.replaceAll(/\s+/g, ``)
-    const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/)
+    const match = compact.match(/^(?<h>-?\d)(?<k>-?\d)(?<l>-?\d)$/)
     if (match) return [Number(match[1]), Number(match[2]), Number(match[3])] as Vec3
     return null
   }
@@ -53,7 +53,7 @@
       font-size: 0.85em;
     }
     input {
-      width: 4em;
+      width: 5.5em;
       padding: 0.15em 0.3em;
       border: 1px solid var(--border-color, #ccc);
       border-radius: 4px;

package/dist/api/optimade.js

@@ -110,12 +110,16 @@ export function detect_provider_from_slug(slug, providers) {
     const prefix = decoded_slug.split(`-`)[0].toLowerCase();
     return providers.find((provider) => provider.id === prefix)?.id ?? ``;
 }
-export async function fetch_optimade_structure(structure_id, provider, providers) {
+// Resolve a provider id to its versioned API base URL (throws on unknown provider)
+async function get_api_base(provider, providers) {
     const provider_config = providers.find((entry) => entry.id === provider);
     if (!provider_config)
         throw new Error(`Unknown provider: ${provider}`);
     const base_url = await resolve_provider_url(provider_config.attributes.base_url);
-    const api_base = base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
+    return base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
+}
+export async function fetch_optimade_structure(structure_id, provider, providers) {
+    const api_base = await get_api_base(provider, providers);
     const encoded_id = encode_structure_id(structure_id);
     const response = await fetch_with_cors_proxy(`${api_base}/structures/${encoded_id}`);
     const data = await response.json();
@@ -124,12 +128,11 @@ export async function fetch_optimade_structure(structure_id, provider, providers
     return Array.isArray(data.data) ? data.data[0] : data.data;
 }
 export async function fetch_suggested_structures(provider, providers, limit = 12) {
-    const provider_config = providers.find((entry) => entry.id === provider);
-    if (!provider_config)
-        throw new Error(`Unknown provider: ${provider}`);
     try {
-        const base_url = await resolve_provider_url(provider_config.attributes.base_url);
-        const api_base = base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
+        // Keep get_api_base inside try: suggestions are optional, so unknown providers and
+        // URL-resolution failures both soft-fail to []. Note: unknown provider threw
+        // pre-cleanup, which left the sole caller's loading state stuck on rejection.
+        const api_base = await get_api_base(provider, providers);
         const response = await fetch_with_cors_proxy(`${api_base}/structures?page_limit=${limit}&page_offset=0`);
         const data = await response.json();
         return Array.isArray(data.data) ? data.data : [];

package/dist/app.css

@@ -18,6 +18,28 @@
   --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
   --border-radius: 3pt;
 
+  /* Single source of truth for viewer control-button icon size, shared by all viewer chromes
+     (Structure/Brillouin/Fermi/ConvexHull/Trajectory). Scales with the container but is capped so
+     toolbar icons don't grow oversized in fullscreen. Uses rem (not em) so the size is consistent
+     across viewers regardless of their local font-size (e.g. Trajectory's controls run at 0.85em).
+     Override per viewer by setting this on its wrapper. */
+  --ctrl-btn-icon-size: clamp(0.7rem, 2cqmin, 0.85rem);
+
+  /* In-viewer overlay stack (inside one viewer container, above its WebGL
+     canvas): 1 viewport labels · 2 glass chips · 4–6 carousel chrome
+     (legend/resize-handle/pager) · 10 draggable panes · 100 dropdowns +
+     toasts · 1000 canvas tooltips + error banners. Components fall back to
+     these tiers; override per instance via their dedicated --*-z-index vars.
+     NOTE (WKWebView/Tauri): overlays that can overlap a WebGL canvas also
+     need their own compositing layer (will-change: transform) — after hiding
+     and re-showing the window, WebKit reattaches canvas layers above
+     non-composited overlays regardless of z-index. */
+  --z-index-viewer-label: 1;
+  --z-index-viewer-chip: 2;
+  --z-index-viewer-pane: 10;
+  --z-index-viewer-dropdown: 100;
+  --z-index-viewer-tooltip: 1000;
+
   /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
      These must exceed Threlte HTML overlays, which use very high z-index values. */
   --z-index-overlay-controls: 100000000;
@@ -204,6 +226,52 @@
   input:is([type='checkbox'], [type='radio'], [type='range'], [type='color']) {
     border: none;
   }
+  input[type='range'] {
+    --range-track-bg: var(--range-track-bg-override, var(--surface-bg, #2a2f3a));
+    --range-track-border: var(--range-track-border-override, var(--border-color, #404040));
+    --range-thumb-bg: var(--range-thumb-bg-override, var(--accent-color, #4a9eff));
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    accent-color: var(--range-thumb-bg);
+    cursor: pointer;
+  }
+  input[type='range']::-webkit-slider-runnable-track {
+    height: var(--range-track-height, 0.45rem);
+    border-radius: 999px;
+    background: var(--range-track-bg);
+    box-shadow: inset 0 0 0 1px var(--range-track-border);
+  }
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    inline-size: var(--range-thumb-size, 0.9rem);
+    block-size: var(--range-thumb-size, 0.9rem);
+    margin-top: calc(
+      (var(--range-track-height, 0.45rem) - var(--range-thumb-size, 0.9rem)) / 2
+    );
+    border-radius: 50%;
+    background: var(--range-thumb-bg);
+    box-shadow: 0 0 0 2px var(--surface-bg, #1f242d);
+  }
+  input[type='range']::-moz-range-track {
+    height: var(--range-track-height, 0.45rem);
+    border-radius: 999px;
+    background: var(--range-track-bg);
+    box-shadow: inset 0 0 0 1px var(--range-track-border);
+  }
+  input[type='range']::-moz-range-progress {
+    height: var(--range-track-height, 0.45rem);
+    border-radius: 999px;
+    background: var(--range-thumb-bg);
+  }
+  input[type='range']::-moz-range-thumb {
+    inline-size: var(--range-thumb-size, 0.9rem);
+    block-size: var(--range-thumb-size, 0.9rem);
+    border: 0;
+    border-radius: 50%;
+    background: var(--range-thumb-bg);
+    box-shadow: 0 0 0 2px var(--surface-bg, #1f242d);
+  }
   input[type='number'] {
     min-width: 40px;
     width: auto;

package/dist/brillouin/BrillouinZone.svelte

@@ -3,7 +3,7 @@
   import EmptyState from '../EmptyState.svelte'
   import { StatusMessage } from '../feedback'
   import Spinner from '../feedback/Spinner.svelte'
-  import { create_file_drop_handler, drag_over_handlers, load_from_url } from '../io'
+  import * as io from '../io'
   import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
   import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import type { Vec3 } from '../math'
@@ -53,7 +53,7 @@
     surface_color = $bindable(`#4488ff`),
     surface_opacity = $bindable(0.3),
     edge_color = $bindable(`#000000`),
-    edge_width = $bindable(0.05),
+    edge_width = $bindable(0.002),
     show_vectors = $bindable(true),
     vector_scale = $bindable(1.0),
     camera_projection = $bindable(`perspective`),
@@ -91,72 +91,68 @@
     on_point_hover,
     on_hover,
     ...rest
-  }:
-    & {
-      structure?: Crystal
-      bz_order?: number
-      bz_data?: BrillouinZoneData
-      controls_open?: boolean
-      info_pane_open?: boolean
-      surface_color?: string
-      surface_opacity?: number
-      edge_color?: string
-      edge_width?: number
-      show_vectors?: boolean
-      vector_scale?: number
-      camera_projection?: CameraProjection
-      // Irreducible BZ options
-      show_ibz?: boolean
-      ibz_color?: string
-      ibz_opacity?: number
-      ibz_data?: IrreducibleBZData | null
-      // Controls visibility configuration.
-      // - 'always': controls always visible
-      // - 'hover': controls visible on component hover (default)
-      // - 'never': controls never visible
-      // - object: { mode, hidden, style } for fine-grained control
-      //
-      // Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
-      show_controls?: ShowControlsProp
-      fullscreen?: boolean
-      width?: number
-      height?: number
-      wrapper?: HTMLDivElement
-      png_dpi?: number
-      hovered?: boolean
-      dragover?: boolean
-      allow_file_drop?: boolean
-      fullscreen_toggle?: FullscreenToggleProp
-      data_url?: string
-      on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
-      spinner_props?: ComponentProps<typeof Spinner>
-      loading?: boolean
-      error_msg?: string
-      structure_string?: string
-      // K-path points in Cartesian reciprocal space coordinates (not fractional coords)
-      // Should be computed using the reciprocal lattice matrix (includes 2π factor)
-      k_path_points?: Vec3[]
-      // K-path labels with positions in Cartesian reciprocal space coordinates
-      // Each position should match a corresponding point in k_path_points
-      k_path_labels?: { position: Vec3; label: string | null }[]
-      // Currently hovered k-point in Cartesian reciprocal space coordinates
-      hovered_k_point?: Vec3 | null
-      // Index of the currently hovered q-point in the band structure
-      hovered_qpoint_index?: number | null
-      // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
-      on_kpath_hover?: (qpoint_index: number | null) => void
-      children?: Snippet<
-        [{ structure?: Crystal; bz_data?: BrillouinZoneData }]
-      >
-      tooltip_config?: BZTooltipProp
-      on_file_load?: (data: BZHandlerData) => void
-      on_error?: (data: BZHandlerData) => void
-      on_fullscreen_change?: (data: BZHandlerData) => void
-      on_point_hover?: (data: BZHoverData | null) => void
-      // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
-      on_hover?: (data: BZHoverData | null) => void
-    }
-    & HTMLAttributes<HTMLDivElement> = $props()
+  }: {
+    structure?: Crystal
+    bz_order?: number
+    bz_data?: BrillouinZoneData
+    controls_open?: boolean
+    info_pane_open?: boolean
+    surface_color?: string
+    surface_opacity?: number
+    edge_color?: string
+    edge_width?: number
+    show_vectors?: boolean
+    vector_scale?: number
+    camera_projection?: CameraProjection
+    // Irreducible BZ options
+    show_ibz?: boolean
+    ibz_color?: string
+    ibz_opacity?: number
+    ibz_data?: IrreducibleBZData | null
+    // Controls visibility configuration.
+    // - 'always': controls always visible
+    // - 'hover': controls visible on component hover (default)
+    // - 'never': controls never visible
+    // - object: { mode, hidden, style } for fine-grained control
+    //
+    // Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
+    show_controls?: ShowControlsProp
+    fullscreen?: boolean
+    width?: number
+    height?: number
+    wrapper?: HTMLDivElement
+    png_dpi?: number
+    hovered?: boolean
+    dragover?: boolean
+    allow_file_drop?: boolean
+    fullscreen_toggle?: FullscreenToggleProp
+    data_url?: string
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+    spinner_props?: ComponentProps<typeof Spinner>
+    loading?: boolean
+    error_msg?: string
+    structure_string?: string
+    // K-path points in Cartesian reciprocal space coordinates (not fractional coords)
+    // Should be computed using the reciprocal lattice matrix (includes 2π factor)
+    k_path_points?: Vec3[]
+    // K-path labels with positions in Cartesian reciprocal space coordinates
+    // Each position should match a corresponding point in k_path_points
+    k_path_labels?: { position: Vec3; label: string | null }[]
+    // Currently hovered k-point in Cartesian reciprocal space coordinates
+    hovered_k_point?: Vec3 | null
+    // Index of the currently hovered q-point in the band structure
+    hovered_qpoint_index?: number | null
+    // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
+    on_kpath_hover?: (qpoint_index: number | null) => void
+    children?: Snippet<[{ structure?: Crystal; bz_data?: BrillouinZoneData }]>
+    tooltip_config?: BZTooltipProp
+    on_file_load?: (data: BZHandlerData) => void
+    on_error?: (data: BZHandlerData) => void
+    on_fullscreen_change?: (data: BZHandlerData) => void
+    on_point_hover?: (data: BZHoverData | null) => void
+    // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
+    on_hover?: (data: BZHoverData | null) => void
+  } & HTMLAttributes<HTMLDivElement> = $props()
 
   let scene = $state(undefined)
   let camera = $state(undefined)
@@ -181,9 +177,7 @@
 
   // Parse and load structure from content
   function parse_structure(content: string | ArrayBuffer, filename: string) {
-    const text = content instanceof ArrayBuffer
-      ? new TextDecoder().decode(content)
-      : content
+    const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
     const parsed = parse_any_structure(text, filename)
     if (!parsed) throw new Error(`Failed to parse structure from ${filename}`)
 
@@ -198,9 +192,7 @@
     try {
       parse_structure(content, filename)
     } catch (err) {
-      error_msg = `Failed to parse ${filename}: ${
-        to_error(err).message
-      }`
+      error_msg = `Failed to parse ${filename}: ${to_error(err).message}`
       on_error?.({ error_msg, filename })
     }
   }
@@ -241,9 +233,7 @@
     analyze_structure_symmetry(structure, {})
       .then((sym_data) => {
         if (stale) return
-        const point_group_ops = extract_point_group_from_operations(
-          sym_data.operations,
-        )
+        const point_group_ops = extract_point_group_from_operations(sym_data.operations)
         ibz_data = compute_irreducible_bz(captured_bz, point_group_ops)
       })
       .catch((err) => {
@@ -258,24 +248,29 @@
   })
 
   // Load structure from URL or string
+  let data_url_load_id = 0
   $effect(() => {
     const handle_error = (err: unknown, source: string) => {
       error_msg = to_error(err).message
       on_error?.({ error_msg, filename: source })
     }
 
-    if (data_url && !structure) {
+    const requested_url = data_url
+    if (requested_url && !structure) {
+      const load_id = ++data_url_load_id
       loading = true
       error_msg = undefined
-      load_from_url(
-        data_url,
-        (content, filename) =>
-          on_file_drop
-            ? on_file_drop(content, filename)
-            : safe_parse(content, filename),
-      )
-        .catch((err) => handle_error(err, data_url))
-        .finally(() => (loading = false))
+      io.load_from_url(requested_url, (content, filename) => {
+        if (load_id !== data_url_load_id) return
+        return on_file_drop ? on_file_drop(content, filename) : safe_parse(content, filename)
+      })
+        .catch((err) => {
+          if (load_id !== data_url_load_id) return
+          handle_error(err, io.basename_from_url(requested_url))
+        })
+        .finally(() => {
+          if (load_id === data_url_load_id) loading = false
+        })
     } else if (structure_string && !data_url) {
       loading = true
       error_msg = undefined
@@ -289,7 +284,7 @@
     }
   })
 
-  const handle_file_drop = create_file_drop_handler({
+  const handle_file_drop = io.create_file_drop_handler({
     allow: () => allow_file_drop,
     on_drop: (content, filename) => (on_file_drop || safe_parse)(content, filename),
     on_error: (msg) => {
@@ -307,7 +302,8 @@
     if (
       target instanceof HTMLElement &&
       (target.tagName === `INPUT` || target.tagName === `TEXTAREA`)
-    ) return
+    )
+      return
 
     if (event.key === `f` && fullscreen_toggle) toggle_fullscreen(wrapper)
     else if (event.key === `i`) info_pane_open = !info_pane_open
@@ -338,10 +334,13 @@
   onmouseenter={() => (hovered = true)}
   onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
-  {...drag_over_handlers({ allow: () => allow_file_drop, set_dragover: (over) => dragover = over })}
+  {...io.drag_over_handlers({
+    allow: () => allow_file_drop,
+    set_dragover: (over) => (dragover = over),
+  })}
   {onkeydown}
   {...rest}
-  class="brillouin-zone {rest.class ?? ``}"
+  class={[`brillouin-zone`, rest.class]}
 >
   {@render children?.({ structure, bz_data })}
   {#if loading}