matterviz 0.3.0 → 0.3.2

package/dist/icons.js

@@ -331,6 +331,14 @@ export const ICON_DATA = {
         viewBox: `0 0 15 15`,
         path: `M4.854 2.146a.5.5 0 0 1 0 .708L3.707 4H9a4.5 4.5 0 1 1 0 9H5a.5.5 0 0 1 0-1h4a3.5 3.5 0 1 0 0-7H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0`,
     },
+    Undo: {
+        viewBox: `0 0 24 24`,
+        path: `M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z`,
+    },
+    Redo: {
+        viewBox: `0 0 24 24`,
+        path: `M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z`,
+    },
     TwoColumns: {
         viewBox: `0 0 24 24`,
         path: `M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 0H5v14h4zm4 0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v14h4z`,
@@ -479,4 +487,115 @@ export const ICON_DATA = {
         viewBox: `0 0 24 24`,
         path: `M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h10q.425 0 .713.288T16 10v4q0 .425-.288.713T15 15H5q-.425 0-.712-.288T4 14`,
     },
+    Filter: {
+        viewBox: `0 0 24 24`,
+        path: `M22 3H2l8 9.46V19l4 2v-8.54z`,
+    },
+    Eye: {
+        viewBox: `0 0 24 24`,
+        path: `M12 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6m0 8a5 5 0 1 1 0-10a5 5 0 0 1 0 10m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5`,
+    },
+    EyeOff: {
+        viewBox: `0 0 24 24`,
+        path: `M11.83 9L15 12.16V12a3 3 0 0 0-3-3zm-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28l.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22L21 20.73L3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7`,
+    },
+    Pin: {
+        viewBox: `0 0 24 24`,
+        path: `M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2z`,
+    },
+    Unpin: {
+        viewBox: `0 0 24 24`,
+        path: `M2 5.27L3.28 4L20 20.72L18.73 22l-5.93-5.93V22h-1.6v-6H6v-2l2-2v-.73zM16 12l2 2v2h-.18L8 6.18V4H7V2h10v2h-1z`,
+    },
+    ArrowLeft: {
+        viewBox: `0 0 24 24`,
+        path: `M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z`,
+    },
+    ArrowRight: {
+        viewBox: `0 0 24 24`,
+        path: `M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z`,
+    },
+    ZoomIn: {
+        viewBox: `0 0 24 24`,
+        stroke: `currentColor`,
+        path: `<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></g>`,
+    },
+    ZoomOut: {
+        viewBox: `0 0 24 24`,
+        stroke: `currentColor`,
+        path: `<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></g>`,
+    },
+    Play: {
+        viewBox: `0 0 24 24`,
+        path: `M8 5v14l11-7z`,
+    },
+    Pause: {
+        viewBox: `0 0 24 24`,
+        path: `M6 19h4V5H6zm8-14v14h4V5z`,
+    },
+    ExternalLink: {
+        viewBox: `0 0 24 24`,
+        stroke: `currentColor`,
+        path: `<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></g>`,
+    },
+    Sort: {
+        viewBox: `0 0 24 24`,
+        path: `M3 18h6v-2H3zM3 6v2h18V6zm0 7h12v-2H3z`,
+    },
+    SortAsc: {
+        viewBox: `0 0 24 24`,
+        path: `M3 18v-2h6v2zM3 13v-2h12v2zM3 8V6h13v2zM19 18V10h-2l3-5l3 5h-2v8z`,
+    },
+    SortDesc: {
+        viewBox: `0 0 24 24`,
+        path: `M3 18v-2h6v2zM3 13v-2h12v2zM3 8V6h13v2zM19 6v8h-2l3 5l3-5h-2V6z`,
+    },
+    BrillouinZone: {
+        viewBox: `0 0 24 24`,
+        stroke: `currentColor`,
+        path: `<g stroke-width="1.3" fill="none"><polygon points="12,1 22,7 22,17 12,23 2,17 2,7"/><line x1="2" y1="7" x2="22" y2="17"/><line x1="12" y1="1" x2="12" y2="23"/><line x1="22" y1="7" x2="2" y2="17"/></g>`,
+    },
+    BandStructure: {
+        viewBox: `0 0 28 24`,
+        stroke: `currentColor`,
+        path: `<g stroke-width="1.3" fill="none" stroke-linecap="round"><path d="M1 20c3-4 5-6 7-6s5 5 7 5 5-4 7-4"/><path d="M1 17c2-3 5-5 7-3s5 4 7 3 5-5 7-3"/><line x1="1" y1="12" x2="27" y2="12" stroke-dasharray="2 1.5" opacity="0.2"/><path d="M1 9c3 3 5 5 7 5s5-5 7-5 5 3 7 3"/><path d="M1 6c2 2 5 4 7 2s5-3 7-2 5 4 7 2"/><path d="M1 4c3 1 5 1 7 0s5-1 7 0 5 1 7 0" opacity="0.5"/><line x1="8" y1="1" x2="8" y2="23" stroke-dasharray="1.5 1.5" opacity="0.2"/><line x1="15" y1="1" x2="15" y2="23" stroke-dasharray="1.5 1.5" opacity="0.2"/><line x1="22" y1="1" x2="22" y2="23" stroke-dasharray="1.5 1.5" opacity="0.2"/></g>`,
+    },
+    DensityOfStates: {
+        viewBox: `0 0 24 24`,
+        stroke: `currentColor`,
+        path: `<line x1="3" y1="21" x2="21" y2="21" stroke-width="0.7" opacity="0.3"/><path d="M3 21C3 21 4 21 5 11C6 21 7 21 9 21C9 21 10 21 11 15C12 21 13 21 14 21C14 21 15 21 16.5 6C18 21 19 21 21 21" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M3 21C3 21 4 21 5 11C6 21 7 21 9 21C9 21 10 21 11 15C12 21 13 21 14 21C14 21 15 21 16.5 6C18 21 19 21 21 21Z" fill="currentColor" stroke="none" opacity="0.12"/>`,
+    },
+    BandsDOS: {
+        viewBox: `0 0 24 24`,
+        path: `<path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h10v16H4zm12 0h4v16h-4z"/>`,
+    },
+    ThreePanels: {
+        viewBox: `0 0 24 24`,
+        path: `<path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h5v16H4zm7 0h9v8h-9zm0 10h9v6h-9z"/>`,
+    },
+    FermiSurface: {
+        viewBox: `0 0 24 24`,
+        stroke: `currentColor`,
+        path: `<g stroke-width="1.3" fill="none"><circle cx="12" cy="12" r="9" opacity="0.3"/><ellipse cx="12" cy="12" rx="9" ry="4"/><ellipse cx="12" cy="12" rx="4" ry="9"/><ellipse cx="12" cy="12" rx="6" ry="7" transform="rotate(45 12 12)" opacity="0.5"/></g>`,
+    },
+    ScatterPlot3D: {
+        viewBox: `0 0 24 24`,
+        path: `<g stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"><line x1="3" y1="21" x2="3" y2="5"/><line x1="3" y1="21" x2="21" y2="21"/><line x1="3" y1="21" x2="9" y2="15"/></g><circle cx="11" cy="11" r="1.5" fill="currentColor"/><circle cx="16" cy="15" r="1.5" fill="currentColor"/><circle cx="8" cy="16" r="1.5" fill="currentColor"/><circle cx="15" cy="8" r="1.5" fill="currentColor"/>`,
+    },
+    SpacegroupBarPlot: {
+        viewBox: `0 0 24 24`,
+        path: `<rect x="2" y="13" width="3.5" height="8" fill="currentColor"/><rect x="7" y="7" width="3.5" height="14" fill="currentColor"/><rect x="12" y="10" width="3.5" height="11" fill="currentColor"/><rect x="17" y="5" width="3.5" height="16" fill="currentColor"/><path d="M21 2l1.5 2.5h-3z" fill="currentColor" opacity="0.5"/>`,
+    },
+    HeatmapMatrix: {
+        viewBox: `0 0 24 24`,
+        path: `<rect x="2" y="2" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.9"/><rect x="9.2" y="2" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.4"/><rect x="16.5" y="2" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.15"/><rect x="2" y="9.2" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.5"/><rect x="9.2" y="9.2" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.8"/><rect x="16.5" y="9.2" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.35"/><rect x="2" y="16.5" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.2"/><rect x="9.2" y="16.5" width="5.5" height="5.5" rx="0.8" fill="currentColor" opacity="0.65"/><rect x="16.5" y="16.5" width="5.5" height="5.5" rx="0.8" fill="currentColor"/>`,
+    },
+    HeatmapTable: {
+        viewBox: `0 0 24 24`,
+        path: `<rect x="2" y="2" width="20" height="4" rx="1" fill="currentColor" opacity="0.25"/><rect x="2" y="8" width="9" height="3.5" rx="0.5" fill="currentColor" opacity="0.6"/><rect x="13" y="8" width="9" height="3.5" rx="0.5" fill="currentColor" opacity="0.35"/><rect x="2" y="13.5" width="9" height="3.5" rx="0.5" fill="currentColor" opacity="0.85"/><rect x="13" y="13.5" width="9" height="3.5" rx="0.5" fill="currentColor" opacity="0.5"/><rect x="2" y="19" width="9" height="3.5" rx="0.5" fill="currentColor" opacity="0.3"/><rect x="13" y="19" width="9" height="3.5" rx="0.5" fill="currentColor" opacity="0.9"/>`,
+    },
+    ColorBar: {
+        viewBox: `0 0 24 24`,
+        path: `<rect x="6" y="2" width="5" height="20" rx="2.5" fill="currentColor" opacity="0.15"/><rect x="6" y="2" width="5" height="15" rx="2.5" fill="currentColor" opacity="0.4"/><rect x="6" y="2" width="5" height="10" rx="2.5" fill="currentColor" opacity="0.7"/><rect x="6" y="2" width="5" height="5" rx="2.5" fill="currentColor"/><g stroke="currentColor" stroke-width="1.2" opacity="0.5"><line x1="13" y1="4" x2="16" y2="4"/><line x1="13" y1="12" x2="16" y2="12"/><line x1="13" y1="20" x2="16" y2="20"/></g>`,
+    },
 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './brillouin';
+export * from './chempot-diagram';
 export * from './colors';
 export * from './composition';
 export * from './constants';
@@ -10,9 +11,13 @@ export { default as EmptyState } from './EmptyState.svelte';
 export * from './feedback';
 export * from './fermi-surface';
 export { default as FilePicker } from './FilePicker.svelte';
+export * from './heatmap-matrix';
 export { default as Icon } from './Icon.svelte';
-export { ICON_DATA, type IconName } from './icons';
+export * from './icons';
 export * from './io';
+export { default as MillerIndexInput } from './MillerIndexInput.svelte';
+export { auto_isosurface_settings, DEFAULT_ISOSURFACE_SETTINGS, generate_layers, grid_data_range, Isosurface as VolumetricIsosurface, IsosurfaceControls, LAYER_COLORS, parse_chgcar, parse_cube, parse_volumetric_file, sample_hkl_slice, trilinear_interpolate, } from './isosurface';
+export type { DataRange, IsosurfaceLayer, IsosurfaceSettings, SliceResult, VolumetricData, VolumetricFileData, } from './isosurface';
 export * from './labels';
 export * from './layout';
 export * from './math';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './brillouin';
+export * from './chempot-diagram';
 export * from './colors';
 export * from './composition';
 export * from './constants';
@@ -10,9 +11,13 @@ export { default as EmptyState } from './EmptyState.svelte';
 export * from './feedback';
 export * from './fermi-surface';
 export { default as FilePicker } from './FilePicker.svelte';
+export * from './heatmap-matrix';
 export { default as Icon } from './Icon.svelte';
-export { ICON_DATA } from './icons';
+export * from './icons';
 export * from './io';
+export { default as MillerIndexInput } from './MillerIndexInput.svelte';
+// Explicit exports to avoid name clash with fermi-surface's Isosurface type
+export { auto_isosurface_settings, DEFAULT_ISOSURFACE_SETTINGS, generate_layers, grid_data_range, Isosurface as VolumetricIsosurface, IsosurfaceControls, LAYER_COLORS, parse_chgcar, parse_cube, parse_volumetric_file, sample_hkl_slice, trilinear_interpolate, } from './isosurface';
 export * from './labels';
 export * from './layout';
 export * from './math';

package/dist/io/export.js

@@ -1,6 +1,16 @@
 import { download } from './fetch';
 import { create_structure_filename } from '../structure/export';
-import { Vector2 } from 'three';
+import { Vector2, WebGLRenderer } 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`;
+}
 // Export structure as PNG image from canvas
 export function export_canvas_as_png(canvas, structure_or_filename, png_dpi = 150, scene = null, camera = null) {
     try {
@@ -25,7 +35,8 @@ export function export_canvas_as_png(canvas, structure_or_filename, png_dpi = 15
         // Convert DPI to multiplier (72 DPI is baseline web resolution)
         // Cap to a reasonable upper bound to avoid excessive memory use
         const resolution_multiplier = Math.min(png_dpi / 72, 10);
-        const renderer = canvas.__renderer;
+        const renderer_val = canvas.__renderer;
+        const renderer = is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
         // Force render to populate buffer
         if (renderer && scene && camera)
             renderer.render(scene, camera);
@@ -208,7 +219,8 @@ 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 = canvas.__renderer;
+    const renderer_val = canvas.__renderer;
+    const renderer = is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
     // Store original renderer settings if changing resolution
     let orig_pixel_ratio;
     let orig_size;

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

@@ -0,0 +1,7 @@
+export interface FileDropOptions {
+    allow: () => boolean;
+    on_drop: (content: string | ArrayBuffer, filename: string) => void | Promise<void>;
+    on_error?: (msg: string) => void;
+    set_loading?: (loading: boolean) => void;
+}
+export declare function create_file_drop_handler(opts: FileDropOptions): (event: DragEvent) => Promise<void>;

package/dist/io/file-drop.js

@@ -0,0 +1,43 @@
+// Shared file-drop handler composable for drag-and-drop file loading.
+import { decompress_file } from './decompress';
+import { handle_url_drop } from './url-drop';
+// 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())
+            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);
+        }
+    };
+}

package/dist/io/index.d.ts

@@ -1,7 +1,7 @@
 export * from './decompress';
 export * from './export';
 export * from './fetch';
+export * from './file-drop';
 export * from './is-binary';
 export * from './types';
-export declare function handle_url_drop(drag_event: DragEvent, callback: (content: string | ArrayBuffer, filename: string) => Promise<void> | void): Promise<boolean>;
-export declare function load_from_url(url: string, callback: (content: string | ArrayBuffer, filename: string) => Promise<void> | void): Promise<void>;
+export * from './url-drop';

package/dist/io/index.js

@@ -1,117 +1,7 @@
-import { load_binary_traj } from '../trajectory/parse';
 export * from './decompress';
 export * from './export';
 export * from './fetch';
+export * from './file-drop';
 export * from './is-binary';
 export * from './types';
-// Handle URL-based file drop data by fetching content lazily
-export async function handle_url_drop(drag_event, callback) {
-    const json_data = drag_event.dataTransfer?.getData(`application/json`);
-    if (!json_data)
-        return false;
-    const file_info = JSON.parse(json_data);
-    if (!file_info.url)
-        return false;
-    await load_from_url(file_info.url, 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() || ``;
-    const extract_filename = (headers) => {
-        const fallback = url_basename;
-        if (!headers)
-            return 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);
-        if (star_match?.[1]) {
-            const raw = star_match[1].trim().replace(/^"|"$/g, ``);
-            try {
-                return decodeURIComponent(raw);
-            }
-            catch {
-                return raw;
-            }
-        }
-        const plain_match = /filename\s*=\s*"?([^";]+)"?/i.exec(content_disposition_str);
-        return plain_match?.[1]?.trim() || fallback;
-    };
-    // Check for known binary file extensions
-    const known_bin_extensions = `h5 hdf5 traj npz pkl dat gz gzip zip bz2 xz brml`.split(` `);
-    if (known_bin_extensions.includes(ext)) {
-        // Force binary mode for known binary files to handle GitHub Pages content-type issues
-        const resp = await fetch(url);
-        if (!resp.ok)
-            throw new Error(`Fetch failed: ${resp.status}`);
-        const filename = extract_filename(resp.headers);
-        // 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$/, ``));
-            }
-        }
-        // 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
-        if ([`h5`, `hdf5`].includes(ext)) {
-            const result = await load_binary_traj(resp, `H5`, true);
-            // Log warning if signature doesn't match (only for ArrayBuffer results)
-            if (result instanceof ArrayBuffer && result.byteLength >= 8) {
-                const view = new Uint8Array(result.slice(0, 8));
-                const hdf5_signature = [0x89, 0x48, 0x44, 0x46, 0x0d, 0x0a, 0x1a, 0x0a];
-                if (!hdf5_signature.every((byte, idx) => view[idx] === byte)) {
-                    console.warn(`File has .h5/.hdf5 extension but missing HDF5 signature`);
-                }
-            }
-            return callback(result, extract_filename(resp.headers));
-        }
-        // For .traj files, ensure we always get ArrayBuffer for proper ASE parsing
-        if (ext === `traj`) {
-            const buffer = await load_binary_traj(resp, `.traj`);
-            return callback(buffer, extract_filename(resp.headers));
-        }
-        if (resp.headers.get(`content-encoding`) === `gzip`) {
-            return callback(await resp.text(), extract_filename(resp.headers));
-        }
-        return callback(await resp.arrayBuffer(), extract_filename(resp.headers));
-    }
-    // Skip Range requests for known text formats to avoid production server issues
-    const known_text_extensions = `xyz extxyz json cif poscar yaml yml txt md py js ts css html xml`.split(` `);
-    // Include VASP files that don't have extensions (POSCAR, XDATCAR, CONTCAR)
-    const is_known_text = known_text_extensions.includes(ext) ||
-        url_basename.toLowerCase().match(/^(poscar|xdatcar|contcar)$/i);
-    if (!is_known_text) {
-        try { // Check for magic bytes only for unknown formats
-            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}`);
-                    return callback(await resp.arrayBuffer(), extract_filename(resp.headers));
-                }
-            }
-        }
-        catch {
-            // Fall through to text fetch if HEAD request fails
-        }
-    }
-    const resp = await fetch(url);
-    if (!resp.ok)
-        throw new Error(`Fetch failed: ${resp.status}`);
-    return callback(await resp.text(), extract_filename(resp.headers));
-}
+export * from './url-drop';

package/dist/io/types.d.ts

@@ -1,6 +1,7 @@
 export interface FileInfo {
     name: string;
     url: string;
+    label?: string;
     type?: string;
     category?: string;
     category_icon?: string;

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

@@ -0,0 +1,2 @@
+export declare function handle_url_drop(drag_event: DragEvent, callback: (content: string | ArrayBuffer, filename: string) => Promise<void> | void): Promise<boolean>;
+export declare function load_from_url(url: string, callback: (content: string | ArrayBuffer, filename: string) => Promise<void> | void): Promise<void>;

package/dist/io/url-drop.js

@@ -0,0 +1,118 @@
+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(` `));
+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;
+// Extract filename from Content-Disposition header, falling back to url_basename.
+function extract_filename(headers, fallback) {
+    if (!headers)
+        return 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);
+    if (star_match?.[1]) {
+        const raw = star_match[1].trim().replace(/^"|"$/g, ``);
+        try {
+            return decodeURIComponent(raw);
+        }
+        catch {
+            return raw;
+        }
+    }
+    const plain_match = /filename\s*=\s*"?([^";]+)"?/i.exec(content_disposition_str);
+    return plain_match?.[1]?.trim() || fallback;
+}
+// Handle URL-based file drop data by fetching content lazily
+export async function handle_url_drop(drag_event, callback) {
+    const json_data = drag_event.dataTransfer?.getData(`application/json`);
+    if (!json_data)
+        return false;
+    let file_info;
+    try {
+        file_info = JSON.parse(json_data);
+    }
+    catch {
+        return false;
+    }
+    if (!file_info.url)
+        return false;
+    await load_from_url(file_info.url, 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() || ``;
+    if (BINARY_EXTENSIONS.has(ext)) {
+        // Force binary mode for known binary files to handle GitHub Pages content-type issues
+        const resp = await fetch(url);
+        if (!resp.ok)
+            throw new Error(`Fetch failed: ${resp.status}`);
+        const filename = extract_filename(resp.headers, url_basename);
+        // 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$/, ``));
+            }
+        }
+        // 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
+        if (ext === `h5` || ext === `hdf5`) {
+            const result = await load_binary_traj(resp, `H5`, true);
+            // Log warning if signature doesn't match (only for ArrayBuffer results)
+            if (result instanceof ArrayBuffer && result.byteLength >= 8) {
+                const view = new Uint8Array(result.slice(0, 8));
+                const hdf5_signature = [0x89, 0x48, 0x44, 0x46, 0x0d, 0x0a, 0x1a, 0x0a];
+                if (!hdf5_signature.every((byte, idx) => view[idx] === byte)) {
+                    console.warn(`File has .h5/.hdf5 extension but missing HDF5 signature`);
+                }
+            }
+            return callback(result, filename);
+        }
+        // For .traj files, ensure we always get ArrayBuffer for proper ASE parsing
+        if (ext === `traj`) {
+            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);
+        }
+        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);
+    if (!is_known_text) {
+        try {
+            // Check for magic bytes only for unknown formats
+            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}`);
+                    return callback(await resp.arrayBuffer(), extract_filename(resp.headers, url_basename));
+                }
+            }
+        }
+        catch {
+            // Fall through to text fetch if HEAD request fails
+        }
+    }
+    const resp = await fetch(url);
+    if (!resp.ok)
+        throw new Error(`Fetch failed: ${resp.status}`);
+    return callback(await resp.text(), extract_filename(resp.headers, url_basename));
+}