matterviz 0.3.7 → 0.4.1

package/dist/io/export.js

@@ -1,28 +1,21 @@
 import { download } from './fetch';
 import { create_structure_filename } from '../structure/export';
+import { to_error } from '../utils';
 import { Vector2 } from 'three';
-function is_webgl_renderer_like(value) {
-    if (typeof value !== `object` || !value)
-        return false;
-    const renderer_obj = value;
-    return (typeof renderer_obj.render === `function` &&
-        typeof renderer_obj.getPixelRatio === `function` &&
-        typeof renderer_obj.setPixelRatio === `function` &&
-        typeof renderer_obj.getSize === `function` &&
-        typeof renderer_obj.setSize === `function`);
-}
-function get_canvas_renderer(canvas) {
-    const renderer_val = canvas[`__renderer`];
-    return is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
-}
+// Maps a Threlte canvas to its WebGLRenderer so PNG export can look up the renderer for a
+// given canvas without mutating the DOM element. Populated by bind_renderer (scene/).
+export const renderer_registry = new WeakMap();
+// PNG DPI -> render scale relative to the 72 DPI baseline, capped at 10x. DPI floors
+// at 1 (non-finite -> 72) so bad inputs can't yield 0x0 canvases or NaN pixel ratios.
+export const dpi_to_scale = (png_dpi) => Math.min(Math.max(1, Number.isFinite(png_dpi) ? png_dpi : 72) / 72, 10);
 // Capture a WebGL canvas as a PNG Blob at the given DPI.
 // Temporarily adjusts renderer pixel ratio for high-res capture, then restores.
 // Returns data directly (no browser download), suitable for programmatic capture
 // in test suites, server-side rendering, or Python widget integration via anywidget.
 // DPI is converted to a resolution multiplier relative to 72 DPI baseline, capped at 10x.
 export function canvas_to_png_blob(canvas, png_dpi = 150, scene = null, camera = null) {
-    const resolution_multiplier = Math.min(png_dpi / 72, 10);
-    const renderer = get_canvas_renderer(canvas);
+    const resolution_multiplier = dpi_to_scale(png_dpi);
+    const renderer = renderer_registry.get(canvas);
     if (resolution_multiplier <= 1.1 || !renderer) {
         if (renderer && scene && camera)
             renderer.render(scene, camera);
@@ -36,7 +29,7 @@ export function canvas_to_png_blob(canvas, png_dpi = 150, scene = null, camera =
                 }, `image/png`);
             }
             catch (error) {
-                reject(error);
+                reject(to_error(error));
             }
         });
     }
@@ -63,7 +56,7 @@ export function canvas_to_png_blob(canvas, png_dpi = 150, scene = null, camera =
         }
         catch (error) {
             restore();
-            reject(error);
+            reject(to_error(error));
         }
     });
 }
@@ -90,34 +83,56 @@ export function export_canvas_as_png(canvas, structure_or_filename, png_dpi = 15
 }
 // Helper to ensure font-family is set on SVG root
 function set_svg_font_family(svg) {
-    const style = svg.getAttribute(`style`) || ``;
+    const style = svg.getAttribute(`style`) ?? ``;
     if (!style.includes(`font-family`)) {
         svg.setAttribute(`style`, `${style}${style ? `;` : ``}font-family:sans-serif;`);
     }
     // Also set as attribute for extra robustness
     svg.setAttribute(`font-family`, `sans-serif`);
 }
-// Serialize an SVG element to a standalone SVG string with proper XML headers.
-// Clones the element to avoid mutation, sets font-family/xmlns, and
-// prepends XML declaration + SVG DOCTYPE. Returns a complete SVG document string
-// suitable for saving to file or further processing.
-export function svg_to_svg_string(svg_element) {
-    const cloned_svg = svg_element.cloneNode(true);
-    set_svg_font_family(cloned_svg);
-    if (!cloned_svg.hasAttribute(`xmlns`)) {
-        cloned_svg.setAttribute(`xmlns`, `http://www.w3.org/2000/svg`);
+// Copy the given computed-style props from each live SVG element to its clone counterpart;
+// identical structure lets querySelectorAll(`*`) walk both in lockstep. Writes clone-only.
+function inline_computed_styles(live, clone, properties) {
+    const live_els = [live, ...live.querySelectorAll(`*`)];
+    const clone_els = [clone, ...clone.querySelectorAll(`*`)];
+    for (const [idx, live_el] of live_els.entries()) {
+        const computed = getComputedStyle(live_el);
+        for (const prop of properties) {
+            const val = computed.getPropertyValue(prop);
+            if (val)
+                clone_els[idx].setAttribute(prop, val);
+        }
+    }
+}
+// Clone, inline the given computed-style props, ensure font-family + xmlns, then serialize
+// to a standalone SVG string. Never mutates the live element.
+function serialize_svg_for_export(svg_element, inline_styles = []) {
+    const clone = svg_element.cloneNode(true);
+    if (inline_styles.length)
+        inline_computed_styles(svg_element, clone, inline_styles);
+    set_svg_font_family(clone);
+    if (!clone.hasAttribute(`xmlns`)) {
+        clone.setAttribute(`xmlns`, `http://www.w3.org/2000/svg`);
     }
-    const svg_string = new XMLSerializer().serializeToString(cloned_svg);
+    return new XMLSerializer().serializeToString(clone);
+}
+// Wrap serialize_svg_for_export's output as a full SVG document string (XML declaration +
+// DOCTYPE + SVG), suitable for saving to file.
+export function svg_to_svg_string(svg_element, 
+// CSS props to inline from computed styles as presentation attributes; a standalone SVG
+// drops page stylesheets (e.g. Svelte component styles), so class-based styling is lost.
+inline_styles = []) {
+    const svg_string = serialize_svg_for_export(svg_element, inline_styles);
     return `<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n${svg_string}`;
 }
 // Export SVG element as SVG file (triggers browser download)
-export function export_svg_as_svg(svg_element, filename) {
+export function export_svg_as_svg(svg_element, filename, inline_styles = []) {
     if (!svg_element) {
         console.warn(`SVG element not found for export`);
         return;
     }
     try {
-        const svg_content = svg_to_svg_string(svg_element);
+        const svg_content = svg_to_svg_string(svg_element, inline_styles);
         download(svg_content, filename, `image/svg+xml;charset=utf-8`);
     }
     catch (error) {
@@ -129,7 +144,7 @@ export function export_svg_as_svg(svg_element, filename) {
 // Image element, and returns the resulting PNG Blob. Rejects if viewBox is
 // missing or dimensions are invalid (zero width/height).
 // DPI is converted to a resolution multiplier relative to 72 DPI baseline, capped at 10x.
-export function svg_to_png_blob(svg_element, png_dpi = 150) {
+export function svg_to_png_blob(svg_element, png_dpi = 150, inline_styles = []) {
     const viewBox = svg_element.getAttribute(`viewBox`)?.trim();
     if (!viewBox)
         return Promise.reject(new Error(`SVG viewBox not found for PNG export`));
@@ -144,18 +159,17 @@ export function svg_to_png_blob(svg_element, png_dpi = 150) {
     if (!Number.isFinite(png_dpi) || png_dpi <= 0) {
         return Promise.reject(new Error(`Invalid PNG DPI for export`));
     }
-    const resolution_multiplier = Math.min(png_dpi / 72, 10);
-    const pixel_width = Math.round(width * resolution_multiplier);
-    const pixel_height = Math.round(height * resolution_multiplier);
+    const resolution_multiplier = dpi_to_scale(png_dpi);
+    // Floor at 1px: small viewBoxes at low DPI round to 0 and make toBlob fail confusingly
+    const pixel_width = Math.max(1, Math.round(width * resolution_multiplier));
+    const pixel_height = Math.max(1, Math.round(height * resolution_multiplier));
     const canvas = document.createElement(`canvas`);
     const ctx = canvas.getContext(`2d`);
     if (!ctx)
         return Promise.reject(new Error(`Canvas 2D context not available`));
     canvas.width = pixel_width;
     canvas.height = pixel_height;
-    const cloned_svg = svg_element.cloneNode(true);
-    set_svg_font_family(cloned_svg);
-    const serialized = new XMLSerializer().serializeToString(cloned_svg);
+    const serialized = serialize_svg_for_export(svg_element, inline_styles);
     const svg_blob = new Blob([serialized], { type: `image/svg+xml;charset=utf-8` });
     const svg_data_url = URL.createObjectURL(svg_blob);
     return new Promise((resolve, reject) => {
@@ -172,7 +186,7 @@ export function svg_to_png_blob(svg_element, png_dpi = 150) {
                 }, `image/png`, 1);
             }
             catch (error) {
-                reject(error);
+                reject(to_error(error));
             }
             finally {
                 URL.revokeObjectURL(svg_data_url);
@@ -186,15 +200,32 @@ export function svg_to_png_blob(svg_element, png_dpi = 150) {
     });
 }
 // Export SVG element as PNG (triggers browser download)
-export function export_svg_as_png(svg_element, filename, png_dpi = 150) {
+export function export_svg_as_png(svg_element, filename, png_dpi = 150, inline_styles = []) {
     if (!svg_element) {
         console.warn(`SVG element not found for PNG export`);
         return;
     }
-    svg_to_png_blob(svg_element, png_dpi)
+    svg_to_png_blob(svg_element, png_dpi, inline_styles)
         .then((blob) => download(blob, filename, `image/png`))
         .catch((error) => console.error(`Error exporting PNG:`, error));
 }
+// Watch a wrapper element for <canvas> insertion/removal: calls set(bool) immediately
+// and on every DOM mutation. Returns a cleanup that disconnects the observer (or
+// undefined when no wrapper is given). Used by export panes to enable canvas exports.
+export function observe_canvas_presence(wrapper, set) {
+    if (!wrapper) {
+        set(false);
+        return undefined;
+    }
+    const check = () => set(Boolean(wrapper.querySelector(`canvas`)));
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(wrapper, { childList: true, subtree: true });
+    return () => observer.disconnect();
+}
+// Estimate VP9 video bitrate (bits/s) from pixel count and frame rate.
+// VP9 needs ~0.1 bits per pixel per frame for good quality; clamped to [1, 200] Mbps.
+export const estimate_video_bitrate = (pixel_count, fps) => Math.max(1_000_000, Math.min(pixel_count * fps * 0.1, 200_000_000));
 // Generate FFmpeg command for WebM to MP4 conversion
 export function get_ffmpeg_conversion_command(input_filename) {
     const output = input_filename.replace(/\.webm$/i, `.mp4`);
@@ -208,7 +239,7 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
         typeof MediaRecorder === `undefined` ||
         !MediaRecorder.isTypeSupported(`video/webm;codecs=vp9`))
         throw new Error(`WebM video recording not supported in this browser`);
-    const renderer = get_canvas_renderer(canvas);
+    const renderer = renderer_registry.get(canvas);
     // Store original renderer settings if changing resolution
     let orig_pixel_ratio;
     let orig_size;
@@ -220,13 +251,8 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
         renderer.setSize(orig_size.width, orig_size.height, false);
     }
     // Calculate bitrate based on actual video dimensions
-    // VP9 typically needs 0.08-0.12 bits per pixel per frame for good quality
-    // canvas dimensions include device pixel ratio and any resolution_multiplier
-    const pixels_per_frame = canvas.width * canvas.height;
-    const bits_per_pixel_per_frame = 0.1; // Good quality for VP9
-    // Clamp bitrate to reasonable bounds (1 Mbps min, 200 Mbps max)
-    const calculated_bitrate = pixels_per_frame * fps * bits_per_pixel_per_frame;
-    const bitrate = Math.max(1_000_000, Math.min(calculated_bitrate, 200_000_000));
+    // (canvas dimensions include device pixel ratio and any resolution_multiplier)
+    const bitrate = estimate_video_bitrate(canvas.width * canvas.height, fps);
     const stream = canvas.captureStream(0);
     const chunks = [];
     const recorder = new MediaRecorder(stream, {
@@ -283,7 +309,7 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
                 resolve();
             }
             catch (error) {
-                reject(error);
+                reject(to_error(error));
             }
         });
         recorder.addEventListener(`error`, (event) => {
@@ -309,7 +335,7 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
         catch (error) {
             if (!is_resolved) {
                 is_resolved = true;
-                reject(error);
+                reject(to_error(error));
             }
         }
     });

package/dist/io/fetch.d.ts

@@ -2,4 +2,5 @@ export declare const to_query: (params: Record<string, string | number | undefin
 export declare function fetch_zipped<T>(url: string, { unzip }?: {
     unzip?: boolean | undefined;
 }): Promise<T | null>;
-export declare function download(data: string | Blob, filename: string, type: string): void;
+export type DownloadData = string | Blob | ArrayBuffer | ArrayBufferView<ArrayBuffer>;
+export declare function download(data: DownloadData, filename: string, type: string): void;

package/dist/io/fetch.js

@@ -22,7 +22,11 @@ function default_download(data, filename, type) {
     link.style.display = `none`;
     link.href = url;
     link.download = filename;
-    document.body.appendChild(link);
+    // keep the synthetic download click from bubbling to document-level handlers
+    // (e.g. DraggablePane's click-outside) that would dismiss an open pane the export
+    // button lives in
+    link.addEventListener(`click`, (evt) => evt.stopPropagation());
+    document.body.append(link);
     link.click();
     link.remove();
     URL.revokeObjectURL(url);

package/dist/io/file-drop.d.ts

@@ -4,4 +4,11 @@ export interface FileDropOptions {
     on_error?: (msg: string) => void;
     set_loading?: (loading: boolean) => void;
 }
-export declare function create_file_drop_handler(opts: FileDropOptions): (event: DragEvent) => Promise<void>;
+export declare const drag_over_handlers: (opts: {
+    allow?: () => boolean;
+    set_dragover: (over: boolean) => void;
+}) => {
+    ondragover: (event: DragEvent) => void;
+    ondragleave: () => void;
+};
+export declare const create_file_drop_handler: (opts: FileDropOptions) => ((event: DragEvent) => Promise<void>);

package/dist/io/file-drop.js

@@ -1,43 +1,55 @@
 // Shared file-drop handler composable for drag-and-drop file loading.
 import { decompress_file } from './decompress';
 import { handle_url_drop } from './url-drop';
+import { to_error } from '../utils';
+// Drag-over visual-state handlers for file-drop zones; spread onto the drop target
+// alongside `ondrop` from create_file_drop_handler
+export const drag_over_handlers = (opts) => ({
+    // preventDefault on dragover marks the element as a valid drop target; dragleave
+    // has no default action to cancel, so it only clears the visual state
+    ondragover: (event) => {
+        event.preventDefault();
+        if (opts.allow && !opts.allow())
+            return;
+        opts.set_dragover(true);
+    },
+    ondragleave: () => opts.set_dragover(false),
+});
 // Handles URL drops (from FilePicker), direct file drops with decompression,
 // loading state, and error reporting.
-export function create_file_drop_handler(opts) {
-    return async (event) => {
-        event.preventDefault();
-        if (!opts.allow())
+export const create_file_drop_handler = (opts) => async (event) => {
+    event.preventDefault();
+    if (!opts.allow())
+        return;
+    opts.set_loading?.(true);
+    let drop_filename = ``;
+    try {
+        let url_error;
+        const handled = await handle_url_drop(event, opts.on_drop).catch((exc) => {
+            url_error = to_error(exc).message;
+            return false;
+        });
+        if (handled)
+            return;
+        const file = event.dataTransfer?.files[0];
+        if (!file) {
+            if (url_error)
+                opts.on_error?.(`Failed to load from URL: ${url_error}`);
             return;
-        opts.set_loading?.(true);
-        let drop_filename = ``;
-        try {
-            let url_error;
-            const handled = await handle_url_drop(event, opts.on_drop).catch((exc) => {
-                url_error = exc instanceof Error ? exc.message : String(exc);
-                return false;
-            });
-            if (handled)
-                return;
-            const file = event.dataTransfer?.files[0];
-            if (!file) {
-                if (url_error)
-                    opts.on_error?.(`Failed to load from URL: ${url_error}`);
-                return;
-            }
-            drop_filename = file.name;
-            const { content, filename } = await decompress_file(file);
-            if (content)
-                await opts.on_drop(content, filename);
-        }
-        catch (exc) {
-            const detail = exc instanceof Error ? exc.message : String(exc);
-            const msg = drop_filename
-                ? `Failed to load file ${drop_filename}: ${detail}`
-                : `Failed to load file: ${detail}`;
-            opts.on_error?.(msg);
-        }
-        finally {
-            opts.set_loading?.(false);
         }
-    };
-}
+        drop_filename = file.name;
+        const { content, filename } = await decompress_file(file);
+        if (content)
+            await opts.on_drop(content, filename);
+    }
+    catch (exc) {
+        const detail = to_error(exc).message;
+        const msg = drop_filename
+            ? `Failed to load file ${drop_filename}: ${detail}`
+            : `Failed to load file: ${detail}`;
+        opts.on_error?.(msg);
+    }
+    finally {
+        opts.set_loading?.(false);
+    }
+};

package/dist/io/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ExportPane } from './ExportPane.svelte';
 export * from './decompress';
 export * from './export';
 export * from './fetch';
@@ -5,3 +6,4 @@ export * from './file-drop';
 export * from './is-binary';
 export type * from './types';
 export * from './url-drop';
+export declare function strip_compression_extensions(filename: string): string;

package/dist/io/index.js

@@ -1,6 +1,16 @@
+import { COMPRESSION_EXTENSIONS_REGEX } from '../constants';
+export { default as ExportPane } from './ExportPane.svelte';
 export * from './decompress';
 export * from './export';
 export * from './fetch';
 export * from './file-drop';
 export * from './is-binary';
 export * from './url-drop';
+// Lowercase a filename and strip all trailing compression extensions (.gz, .zip, ...)
+export function strip_compression_extensions(filename) {
+    let base_name = filename.toLowerCase();
+    while (COMPRESSION_EXTENSIONS_REGEX.test(base_name)) {
+        base_name = base_name.replace(COMPRESSION_EXTENSIONS_REGEX, ``);
+    }
+    return base_name;
+}

package/dist/io/types.d.ts

@@ -6,3 +6,16 @@ export interface FileInfo {
     category?: string;
     category_icon?: string;
 }
+export interface ExportItem {
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+    on_download?: () => void;
+    copy_text?: () => string | null;
+    show_dpi?: boolean;
+}
+export interface ExportSection {
+    title?: string;
+    tooltip?: string;
+    items: ExportItem[];
+}

package/dist/io/url-drop.js

@@ -1,7 +1,9 @@
 import { load_binary_traj } from '../trajectory/parse';
-const BINARY_EXTENSIONS = new Set(`h5 hdf5 traj npz pkl dat gz gzip zip bz2 xz brml`.split(` `));
+import { decompress_data_binary } from './decompress';
+const BINARY_EXTENSIONS = new Set(`h5 hdf5 traj npz pkl dat gz gzip zip bz2 xz brml raw`.split(` `));
 const TEXT_EXTENSIONS = new Set(`xyz extxyz json cif poscar yaml yml txt md py js ts css html xml`.split(` `));
 const VASP_BASENAME_RE = /^(poscar|xdatcar|contcar)$/i;
+const GZ_EXT_RE = /\.(gz|gzip)$/i;
 // Extract filename from Content-Disposition header, falling back to url_basename.
 function extract_filename(headers, fallback) {
     if (!headers)
@@ -9,9 +11,13 @@ function extract_filename(headers, fallback) {
     const content_disposition_str = headers.get(`content-disposition`);
     if (!content_disposition_str)
         return fallback;
-    const star_match = /filename\*=(?:UTF-8''|)([^;]+)/i.exec(content_disposition_str);
+    const star_match = /filename\*=([^;]+)/i.exec(content_disposition_str);
     if (star_match?.[1]) {
-        const raw = star_match[1].trim().replace(/^"|"$/g, ``);
+        let raw = star_match[1].trim().replaceAll(/^"|"$/g, ``);
+        // Strip any RFC 5987 charset'language' prefix; bare values pass through unchanged
+        const ext_value_match = /^[\w!#$%&+^`{}~-]+'[\w-]*'(.*)$/.exec(raw);
+        if (ext_value_match)
+            raw = ext_value_match[1];
         try {
             return decodeURIComponent(raw);
         }
@@ -20,7 +26,24 @@ function extract_filename(headers, fallback) {
         }
     }
     const plain_match = /filename\s*=\s*"?([^";]+)"?/i.exec(content_disposition_str);
-    return plain_match?.[1]?.trim() || fallback;
+    // truthiness check (not ??) so whitespace-only `filename=` values fall back too
+    const name = plain_match?.[1]?.trim();
+    if (!name)
+        return fallback;
+    return name;
+}
+const ext_of = (name) => name.split(`.`).pop()?.toLowerCase() ?? ``;
+// Whether the file inside a .gz/.gzip wrapper is a known binary format that a
+// lossy text decode would corrupt (bytes >= 0x80 → U+FFFD)
+const has_binary_inner_ext = (filename) => BINARY_EXTENSIONS.has(ext_of(filename.replace(GZ_EXT_RE, ``)));
+// Gunzip a fetched payload → [content, filename] with .gz/.gzip stripped; content
+// stays an ArrayBuffer for binary inner formats, decoded string otherwise
+async function decompress_gz_payload(buffer, filename) {
+    const decompressed = await decompress_data_binary(buffer, `gzip`);
+    const content = has_binary_inner_ext(filename)
+        ? decompressed
+        : new TextDecoder().decode(decompressed);
+    return [content, filename.replace(GZ_EXT_RE, ``)];
 }
 // Handle URL-based file drop data by fetching content lazily
 export async function handle_url_drop(drag_event, callback) {
@@ -40,8 +63,10 @@ export async function handle_url_drop(drag_event, callback) {
     return true;
 }
 export async function load_from_url(url, callback) {
-    const url_basename = url.split(`/`).pop() || url;
-    const ext = url_basename.split(`.`).pop()?.toLowerCase() || ``;
+    // Strip query string/hash before basename/extension detection so pre-signed
+    // URLs like traj.h5?X-Amz-Expires=300 still hit the right format path
+    const url_basename = url.split(/[?#]/)[0].split(`/`).pop() ?? url;
+    const ext = ext_of(url_basename);
     if (BINARY_EXTENSIONS.has(ext)) {
         // Force binary mode for known binary files to handle GitHub Pages content-type issues
         const resp = await fetch(url);
@@ -51,17 +76,11 @@ export async function load_from_url(url, callback) {
         // Handle gzipped files with proper content-encoding detection
         if (ext === `gz` || ext === `gzip`) {
             if (resp.headers.get(`content-encoding`) === `gzip`) {
-                // Browser automatically decompressed it, so it's text
-                return callback(await resp.text(), filename);
-            }
-            else {
-                // Need to decompress manually
-                const { decompress_data } = await import(`./decompress`);
-                const buffer = await resp.arrayBuffer();
-                const content = await decompress_data(buffer, `gzip`);
-                // Remove .gz extension when manually decompressing
-                return callback(content, filename.replace(/\.gz$/, ``));
+                // Browser already decompressed the stored .gz (GitHub Pages-style serving), so
+                // the body is the inner file — keep binary inner formats (.h5.gz, ...) binary
+                return callback(await (has_binary_inner_ext(filename) ? resp.arrayBuffer() : resp.text()), filename);
             }
+            return callback(...(await decompress_gz_payload(await resp.arrayBuffer(), filename)));
         }
         // For H5 files, always load as binary regardless of signature
         // to handle files that have .h5/.hdf5 extensions but may not have the proper HDF5 signature
@@ -82,40 +101,52 @@ export async function load_from_url(url, callback) {
             const buffer = await load_binary_traj(resp, `.traj`);
             return callback(buffer, filename);
         }
-        if (resp.headers.get(`content-encoding`) === `gzip`) {
-            return callback(await resp.text(), filename);
-        }
+        // Content-Encoding is transparent transport compression: fetch already
+        // decompressed the body, so binary formats (npz, pkl, brml, ...) must still
+        // be read as ArrayBuffer — .text() would corrupt them via lossy UTF-8 decode
         return callback(await resp.arrayBuffer(), filename);
     }
     // Skip Range requests for known text formats to avoid production server issues
     // Include VASP files that don't have extensions (POSCAR, XDATCAR, CONTCAR)
     const is_known_text = TEXT_EXTENSIONS.has(ext) || VASP_BASENAME_RE.test(url_basename);
-    let binary_callback_args;
+    let sniffed_callback_args;
     if (!is_known_text) {
+        // Only the Range sniff is guarded (failure → plain text fetch). Once magic bytes
+        // commit to a binary format, download/decompress errors must propagate instead of
+        // falling through to a text fetch that would parse the binary bytes as garbage.
+        let sniffed = null;
         try {
-            // Check for magic bytes only for unknown formats
+            // Check for magic bytes only for unknown formats (covers extensionless URLs
+            // like blob: object URLs whose basenames are UUIDs)
             const head = await fetch(url, { headers: { Range: `bytes=0-15` } });
             if (head.ok) {
                 const buf = new Uint8Array(await head.arrayBuffer());
                 const is_gzip = buf[0] === 0x1f && buf[1] === 0x8b;
                 const is_hdf5 = buf[0] === 0x89 && buf[1] === 0x48 && buf[2] === 0x44 && buf[3] === 0x46;
-                if (is_gzip || is_hdf5) {
-                    const resp = await fetch(url);
-                    if (!resp.ok)
-                        throw new Error(`Fetch failed: ${resp.status}`);
-                    binary_callback_args = [
-                        await resp.arrayBuffer(),
-                        extract_filename(resp.headers, url_basename),
-                    ];
-                }
+                // ASE .traj files start with the Ulm signature "- of Ulm"
+                const is_ase_traj = [0x2d, 0x20, 0x6f, 0x66, 0x20, 0x55, 0x6c, 0x6d].every((byte, idx) => buf[idx] === byte);
+                if (is_gzip)
+                    sniffed = `gzip`;
+                else if (is_hdf5 || is_ase_traj)
+                    sniffed = `binary`;
             }
         }
         catch {
-            // Fall through to text fetch if HEAD request fails
+            // Fall through to text fetch if the Range HEAD request fails
+        }
+        if (sniffed) {
+            const resp = await fetch(url);
+            if (!resp.ok)
+                throw new Error(`Fetch failed: ${resp.status}`);
+            const filename = extract_filename(resp.headers, url_basename);
+            const buffer = await resp.arrayBuffer();
+            // Gunzip sniffed gzip — downstream parsers can't handle raw gzip bytes
+            sniffed_callback_args =
+                sniffed === `gzip` ? await decompress_gz_payload(buffer, filename) : [buffer, filename];
         }
     }
-    if (binary_callback_args)
-        return callback(...binary_callback_args);
+    if (sniffed_callback_args)
+        return callback(...sniffed_callback_args);
     const resp = await fetch(url);
     if (!resp.ok)
         throw new Error(`Fetch failed: ${resp.status}`);