matterviz 0.3.1 → 0.3.2

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

@@ -17,6 +17,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     default_num_format?: string;
     show_heatmap?: boolean;
     heatmap_class?: string;
+    onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void;
     onrowdblclick?: (event: MouseEvent, row: RowData) => void;
     column_order?: string[];
     export_data?: ExportData;
@@ -27,12 +28,22 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     selected_rows?: RowData[];
     hidden_columns?: string[];
     scroll_style?: string;
+    root_style?: string;
     onsort?: (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
     onsorterror?: (error: unknown, column: string, dir: `asc` | `desc`) => void;
     loading?: boolean;
     sort_data?: boolean;
     heatmap_opacity?: number;
+    empty_message?: string;
+    show_row_numbers?: boolean;
+    allow_better_toggle?: boolean;
+    show_controls?: boolean;
+    controls_open?: boolean;
+    header_cell?: Snippet<[{
+        col: Label;
+    }]>;
+    footer?: Snippet;
 };
-declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "loading" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
+declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "controls_open" | "loading" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
 type HeatmapTable = ReturnType<typeof HeatmapTable>;
 export default HeatmapTable;

package/dist/table/ToggleMenu.svelte

@@ -69,6 +69,8 @@ function toggle_section(name) {
         : [...collapsed_sections, name];
 }
 function toggle_column_visibility(col, event) {
+    if (!(event.target instanceof HTMLInputElement))
+        return;
     col.visible = event.target.checked;
     columns = [...columns]; // trigger reactivity on parent binding
 }

package/dist/table/index.d.ts

@@ -22,6 +22,7 @@ export type Label = {
     sticky?: boolean;
     visible?: boolean;
     sortable?: boolean;
+    show_sort_indicator?: boolean;
     disabled?: boolean;
     style?: string;
     cell_style?: string;
@@ -51,6 +52,7 @@ export type InitialSort = string | {
 };
 export type Pagination = boolean | {
     page_size?: number;
+    page_sizes?: number[];
 };
 export type Search = boolean | {
     placeholder?: string;

package/dist/trajectory/Trajectory.svelte

@@ -140,8 +140,12 @@ let extended_config = $derived.by(() => {
 });
 // Plot series state (not derived so we can update on legend toggle)
 let plot_series = $state([]);
+// 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
 $effect(() => {
+    if (syncing_visible_properties)
+        return;
     const keys_set = visible_properties ? new Set(visible_properties) : undefined;
     if (trajectory?.plot_metadata) {
         plot_series = generate_streaming_plot_series(trajectory.plot_metadata, {
@@ -164,20 +168,21 @@ $effect(() => {
     if (!plot_series.length)
         return;
     // Extract property keys from visible series metadata
-    const visible_keys = plot_series
-        .filter((srs) => srs.visible)
-        // Get property key from series metadata (stored during series generation)
-        .map((srs) => {
+    const visible_keys = plot_series.flatMap((srs) => {
+        if (!srs.visible)
+            return [];
         const metadata = Array.isArray(srs.metadata) ? srs.metadata[0] : srs.metadata;
-        return metadata?.property_key;
-    })
-        .filter((key) => Boolean(key));
+        const key = metadata?.property_key;
+        return key ? [key] : [];
+    });
     // Only update if changed (use untrack to avoid circular dependency)
     const current = untrack(() => visible_properties) || [];
     const has_changed = visible_keys.length !== current.length ||
         !visible_keys.every((key, idx) => key === current[idx]);
     if (has_changed) {
+        syncing_visible_properties = true;
         visible_properties = visible_keys;
+        queueMicrotask(() => (syncing_visible_properties = false));
     }
 });
 // Handler for legend toggle - updates plot_series state
@@ -194,7 +199,7 @@ let y_axis_labels = $derived(generate_axis_labels(plot_series));
 let y_axis = $derived({
     label: y_axis_labels.y1,
     format: `.2~s`,
-    label_shift: { y: 20 },
+    label_shift: { y: 10 },
 });
 let y2_axis = $derived({
     label: y_axis_labels.y2,
@@ -960,7 +965,7 @@ let fullscreen = $state(false);
             controls={scatter_controls}
             current_x_value={current_step_idx}
             change={plot_skimming ? handle_plot_change : undefined}
-            padding={{ t: 20, b: 60, l: 100, r: has_y2_series ? 100 : 20 }}
+            padding={{ t: 20, b: 60, l: 52, r: has_y2_series ? 100 : 20 }}
             range_padding={0}
             style="height: 100%"
             {...scatter_props}
@@ -973,14 +978,10 @@ let fullscreen = $state(false);
             }}
             class="plot {scatter_props.class ?? ``}"
           >
-            {#snippet tooltip({ x, y, metadata })}
-              {#if metadata?.series_label}
-                Step: {Math.round(x)}<br />
-                {@html metadata.series_label}: {typeof y === `number` ? format_num(y) : y}
-              {:else}
-                Step: {Math.round(x)}<br />
-                Value: {typeof y === `number` ? format_num(y) : y}
-              {/if}
+            {#snippet tooltip({ x, y, metadata, label })}
+              {@const formatted_y = typeof y === `number` ? format_num(y) : y}
+              Step: {Math.round(x)}<br />
+              {@html metadata?.series_label || label || `Value`}: {formatted_y}
             {/snippet}
           </ScatterPlot>
         {:else if display_mode === `histogram` || display_mode === `structure+histogram`}
@@ -1004,9 +1005,9 @@ let fullscreen = $state(false);
             --ctrl-btn-top="6ex"
           >
             {#snippet tooltip({ value, count, property })}
+              {#if property}<div><strong>{property}</strong></div>{/if}
               <div>Value: {format_num(value)}</div>
               <div>Count: {count}</div>
-              <div>{property}</div>
             {/snippet}
           </Histogram>
         {/if}
@@ -1049,61 +1050,55 @@ let fullscreen = $state(false);
     contain: layout;
     z-index: var(--traj-z-index, 1);
     container-type: size; /* enable cqh for panes if explicit height is set */
-  }
-  .trajectory :global(.plot) {
-    background: var(--surface-bg);
-  }
-  .trajectory.active {
-    z-index: 2; /* needed so info/control panes from an active viewer overlay those of the next (if there is one) */
-  }
-  .trajectory.active .trajectory-controls {
-    z-index: 5; /* needed so info/control panes from an active viewer its own plot when active, not sure why needed */
-  }
-  .trajectory:fullscreen {
-    height: 100vh !important;
-    width: 100vw !important;
-    border-radius: 0 !important;
-    background: var(--surface-bg);
-    overflow: hidden;
+    :global(.plot) {
+      background: var(--surface-bg);
+    }
+    &.active {
+      z-index: 2; /* needed so info/control panes from an active viewer overlay those of the next (if there is one) */
+      .trajectory-controls {
+        z-index: 5; /* needed so info/control panes from an active viewer its own plot when active, not sure why needed */
+      }
+    }
+    &:fullscreen {
+      height: 100vh !important;
+      width: 100vw !important;
+      border-radius: 0 !important;
+      background: var(--surface-bg);
+      overflow: hidden;
+    }
+    &.horizontal .content-area {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr;
+    }
+    &.vertical .content-area {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+    }
+    /* Display mode specific layouts */
+    &:is(.horizontal, .vertical) .content-area:is(.show-structure-only, .show-plot-only) {
+      grid-template-columns: 1fr !important;
+      grid-template-rows: 1fr !important;
+    }
+    &.dragover {
+      background-color: var(--traj-dragover-bg, var(--dragover-bg));
+      border: var(--traj-dragover-border, var(--dragover-border));
+    }
+    /* Mode: hover - controls visible on component hover */
+    &:hover .trajectory-controls.hover-visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
   /* Content area - grid container for equal sizing */
   .content-area {
     display: grid;
     flex: 1;
     min-height: 0; /* important for tall structure viewers not to overflow */
-  }
-  .trajectory.horizontal .content-area {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
-  }
-  .trajectory.vertical .content-area {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-  }
-  /* When plot is hidden, structure takes full space */
-  .content-area.hide-plot {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  /* When structure is hidden, plot takes full space */
-  .content-area.hide-structure {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  /* Display mode specific layouts */
-  .trajectory.horizontal .content-area.show-structure-only,
-  .trajectory.vertical .content-area.show-structure-only {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  .trajectory.horizontal .content-area.show-plot-only,
-  .trajectory.vertical .content-area.show-plot-only {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  .trajectory.dragover {
-    background-color: var(--traj-dragover-bg, var(--dragover-bg));
-    border: var(--traj-dragover-border, var(--dragover-border));
+    /* When plot or structure is hidden, the other takes full space */
+    &:is(.hide-plot, .hide-structure) {
+      grid-template-columns: 1fr !important;
+      grid-template-rows: 1fr !important;
+    }
   }
   .trajectory-controls {
     display: flex;
@@ -1117,27 +1112,29 @@ let fullscreen = $state(false);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
-  }
-  /* Mode: always - controls always visible */
-  .trajectory-controls.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: hover - controls visible on component hover */
-  .trajectory:hover .trajectory-controls.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: never - stays hidden (default state, no additional CSS needed) */
-  .trajectory-controls:focus-within {
-    z-index: var(--traj-controls-z-index, 999999999);
-  }
-  .trajectory-controls button {
-    background: var(--btn-bg);
-    font-size: clamp(0.8rem, 2cqw, 1rem);
-  }
-  .trajectory-controls button:hover:not(:disabled) {
-    background: var(--btn-bg-hover);
+    /* Mode: always - controls always visible */
+    &.always-visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    /* Mode: never - stays hidden (default state, no additional CSS needed) */
+    &:focus-within {
+      z-index: var(--traj-controls-z-index, 999999999);
+    }
+    button {
+      background: var(--btn-bg);
+      font-size: clamp(0.8rem, 2cqw, 1rem);
+      &:hover:not(:disabled) {
+        background: var(--btn-bg-hover);
+      }
+    }
+    input[type='number'] {
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
   .nav-section {
     display: flex;
@@ -1210,68 +1207,73 @@ let fullscreen = $state(false);
   .fullscreen-button {
     background: transparent !important;
     padding: 0;
-  }
-  .fullscreen-button:hover:not(:disabled) {
-    background: var(--border-color);
+    &:hover:not(:disabled) {
+      background: var(--border-color);
+    }
   }
   .info-section {
     display: flex;
     align-items: center;
-    gap: clamp(6pt, 1cqw, 1.5ex);
+    gap: clamp(3pt, 0.6cqw, 1ex);
     position: relative;
   }
+  .info-section :global(:is(.trajectory-info-toggle, .trajectory-export-toggle)) {
+    font-size: clamp(1rem, 2.2cqw, 1.1rem);
+  }
   .play-button {
     min-width: clamp(32px, 4cqw, 36px);
-  }
-  .play-button:hover:not(:disabled) {
-    background: var(--traj-play-btn-bg-hover, var(--btn-bg-hover, rgba(0, 0, 0, 0.2)));
-  }
-  .play-button.playing {
-    background: var(--traj-pause-btn-bg, var(--btn-bg, rgba(0, 0, 0, 0.1)));
-  }
-  .play-button.playing:hover:not(:disabled) {
-    background: var(--traj-pause-btn-bg-hover, var(--btn-bg-hover, rgba(0, 0, 0, 0.1)));
+    &:hover:not(:disabled) {
+      background: var(--traj-play-btn-bg-hover, var(--btn-bg-hover, rgba(0, 0, 0, 0.2)));
+    }
+    &.playing {
+      background: var(--traj-pause-btn-bg, var(--btn-bg, rgba(0, 0, 0, 0.1)));
+      &:hover:not(:disabled) {
+        background: var(
+          --traj-pause-btn-bg-hover,
+          var(--btn-bg-hover, rgba(0, 0, 0, 0.1))
+        );
+      }
+    }
   }
   :global(.trajectory-empty-state) {
     padding: 2rem;
     border-radius: var(--border-radius, 3pt);
     background: var(--dropzone-bg);
+    :where(p, ul) {
+      color: var(--text-color-muted);
+    }
+    :where(ul, li, strong) {
+      max-width: var(--trajectory-empty-state-max-width, 500px);
+      margin-inline: auto;
+    }
   }
-  :global(.trajectory-empty-state) :where(p, ul) {
-    color: var(--text-color-muted);
-  }
-  :global(.trajectory-empty-state) :where(ul, li, strong) {
-    max-width: var(--trajectory-empty-state-max-width, 500px);
-    margin-inline: auto;
-  }
-  button:hover:not(:disabled) {
-    background: var(--border-color);
-  }
-  button:disabled {
-    background: var(--btn-disabled-bg);
-    color: var(--text-color-muted);
-    cursor: not-allowed;
-  }
-  .trajectory-controls input[type='number']::-webkit-outer-spin-button,
-  .trajectory-controls input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  button {
+    &:hover:not(:disabled) {
+      background: var(--border-color);
+    }
+    &:disabled {
+      background: var(--btn-disabled-bg);
+      color: var(--text-color-muted);
+      cursor: not-allowed;
+    }
   }
   /* Responsive design */
   @media (orientation: portrait) {
-    /* Fallback class for browsers without :has() support */
-    .trajectory.show-both-views {
-      min-height: calc(var(--min-height) * 2);
-    }
-    /* Modern browsers: use :has() for same effect */
-    @supports selector(:has(.content-area)) {
-      .trajectory:has(.content-area.show-both:not(.hide-plot):not(.hide-structure)) {
+    .trajectory {
+      /* Fallback class for browsers without :has() support */
+      &.show-both-views {
         min-height: calc(var(--min-height) * 2);
       }
-    }
-    .trajectory .content-area.show-both:not(.hide-plot):not(.hide-structure) {
-      grid-template-columns: 1fr !important;
-      grid-template-rows: 1fr 1fr !important;
+      /* Modern browsers: use :has() for same effect */
+      @supports selector(:has(.content-area)) {
+        &:has(.content-area.show-both:not(.hide-plot):not(.hide-structure)) {
+          min-height: calc(var(--min-height) * 2);
+        }
+      }
+      .content-area.show-both:not(.hide-plot):not(.hide-structure) {
+        grid-template-columns: 1fr !important;
+        grid-template-rows: 1fr 1fr !important;
+      }
     }
   }
   .view-mode-dropdown-wrapper {
@@ -1297,19 +1299,19 @@ let fullscreen = $state(false);
     border-radius: 0;
     text-align: left;
     transition: background-color 0.15s ease;
-  }
-  .view-mode-option:first-child {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-  }
-  .view-mode-option.selected {
-    color: var(--accent-color);
-  }
-  .view-mode-option span {
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
+    &:first-child {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+    &.selected {
+      color: var(--accent-color);
+    }
+    span {
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+    }
   }
 </style>

package/dist/trajectory/TrajectoryExportPane.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import SettingsSection from '../layout/SettingsSection.svelte';
+<script lang="ts">import { export_trajectory_video, get_ffmpeg_conversion_command, } from '../io/export';
+import SettingsSection from '../layout/SettingsSection.svelte';
 import DraggablePane from '../overlays/DraggablePane.svelte';
-import { export_trajectory_video, get_ffmpeg_conversion_command, } from '../io/export';
 import { tooltip } from 'svelte-multiselect/attachments';
 let { export_pane_open = $bindable(false), trajectory = undefined, wrapper = undefined, filename = `trajectory`, video_fps = $bindable(30), resolution_multiplier = $bindable(1), on_step_change = undefined, pane_props = {}, toggle_props = {}, ...rest } = $props();
 let is_exporting = $state(false);
@@ -242,8 +242,9 @@ $effect(() => {
 <style>
   .field-label {
     display: flex;
-    flex-direction: column;
-    gap: 2pt;
+    align-items: center;
+    gap: 6pt;
+    white-space: nowrap;
   }
   .warning, .error-message {
     padding: 1ex;
@@ -275,13 +276,16 @@ $effect(() => {
     color: var(--text-color-muted);
   }
   .resolution-buttons {
-    display: flex;
-    gap: 6pt;
-    margin: 4pt;
+    display: inline-flex;
+    gap: 3pt;
+    margin: 0;
+    margin-left: auto;
+    white-space: nowrap;
   }
   .resolution-buttons button {
-    flex: 1;
-    padding: 1pt 4pt;
+    flex: 0 0 auto;
+    min-width: 2.8em;
+    padding: 1pt 3pt;
     border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
     background: var(--btn-bg, rgba(255, 255, 255, 0.1));
     color: var(--text-color);

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

@@ -12,6 +12,6 @@ type $$ComponentProps = {
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
 };
-declare const TrajectoryExportPane: import("svelte").Component<$$ComponentProps, {}, "resolution_multiplier" | "export_pane_open" | "video_fps">;
+declare const TrajectoryExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "resolution_multiplier" | "video_fps">;
 type TrajectoryExportPane = ReturnType<typeof TrajectoryExportPane>;
 export default TrajectoryExportPane;

package/dist/trajectory/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_SAFE_STRING_LENGTH: number;
+export declare const MAX_METADATA_SIZE: number;
+export declare const LARGE_FILE_THRESHOLD: number;
+export declare const INDEX_SAMPLE_RATE = 100;
+export declare const MAX_BIN_FILE_SIZE: number;
+export declare const MAX_TEXT_FILE_SIZE: number;

package/dist/trajectory/constants.js

@@ -0,0 +1,7 @@
+// Constants for trajectory parsing and large file handling
+export const MAX_SAFE_STRING_LENGTH = 0x1fffffe8 * 0.5; // 50% of JS max string length as safety
+export const MAX_METADATA_SIZE = 50 * 1024 * 1024; // 50MB limit for metadata
+export const LARGE_FILE_THRESHOLD = 400 * 1024 * 1024; // 400MB
+export const INDEX_SAMPLE_RATE = 100; // Default sample rate for frame indexing
+export const MAX_BIN_FILE_SIZE = 100 * 1024 * 1024; // 100MB default for ArrayBuffer files
+export const MAX_TEXT_FILE_SIZE = 50 * 1024 * 1024; // 50MB default for string files

package/dist/trajectory/extract.js

@@ -136,11 +136,9 @@ function property_varies(trajectory, property_key, tolerance = 1e-10) {
         // Check both direct structure properties and metadata
         let value;
         if (`lattice` in frame.structure) {
-            const lattice = frame.structure.lattice;
-            if (property_key in lattice &&
-                typeof lattice[property_key] === `number`) {
-                value = lattice[property_key];
-            }
+            const lattice_value = frame.structure.lattice[property_key];
+            if (typeof lattice_value === `number`)
+                value = lattice_value;
         }
         if (value === undefined &&
             frame.metadata &&

package/dist/trajectory/format-detect.d.ts

@@ -0,0 +1,9 @@
+export declare function strip_compression_extensions(filename: string): string;
+export declare const FORMAT_PATTERNS: {
+    readonly ase: (data: unknown, filename?: string) => boolean;
+    readonly hdf5: (data: unknown, filename?: string) => boolean;
+    readonly vasp: (data: string, filename?: string) => boolean;
+    readonly xyz_multi: (data: string, filename?: string) => boolean;
+    readonly lammpstrj: (data: string, filename?: string) => boolean;
+};
+export declare function is_trajectory_file(filename: string, content?: string): boolean;

package/dist/trajectory/format-detect.js

@@ -0,0 +1,76 @@
+// Format detection for trajectory files
+import { COMPRESSION_EXTENSIONS_REGEX, CONFIG_DIRS_REGEX, MD_SIM_EXCLUDE_REGEX, TRAJ_EXTENSIONS_REGEX, TRAJ_FALLBACK_EXTENSIONS_REGEX, TRAJ_KEYWORDS_SIMPLE_REGEX, XDATCAR_REGEX, } from '../constants';
+import { count_xyz_frames } from './helpers';
+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;
+}
+// Unified format detection
+export const FORMAT_PATTERNS = {
+    ase: (data, filename) => {
+        const base_name = filename ? strip_compression_extensions(filename) : undefined;
+        if (!base_name?.endsWith(`.traj`) || !(data instanceof ArrayBuffer)) {
+            return false;
+        }
+        const view = new Uint8Array(data.slice(0, 24));
+        return [0x2d, 0x20, 0x6f, 0x66, 0x20, 0x55, 0x6c, 0x6d].every((byte, idx) => view[idx] === byte);
+    },
+    hdf5: (data, filename) => {
+        const base_name = filename ? strip_compression_extensions(filename) : undefined;
+        const has_ext = base_name?.match(/\.(h5|hdf5)$/);
+        if (!has_ext || !(data instanceof ArrayBuffer) || data.byteLength < 8)
+            return false;
+        const signature = new Uint8Array(data.slice(0, 8));
+        return [0x89, 0x48, 0x44, 0x46, 0x0d, 0x0a, 0x1a, 0x0a].every((b, idx) => signature[idx] === b);
+    },
+    vasp: (data, filename) => {
+        const basename = filename?.toLowerCase().split(`/`).pop() || ``;
+        if (basename === `xdatcar` || basename.startsWith(`xdatcar`))
+            return true;
+        const lines = data.trim().split(/\r?\n/);
+        return lines.length >= 10 &&
+            lines.some((line) => line.includes(`Direct configuration=`)) &&
+            !isNaN(parseFloat(lines[1])) &&
+            lines.slice(2, 5).every((line) => line.trim().split(/\s+/).length === 3);
+    },
+    xyz_multi: (data, filename) => {
+        const base = filename ? strip_compression_extensions(filename) : ``;
+        if (!/\.(xyz|extxyz)$/.test(base))
+            return false;
+        return count_xyz_frames(data) >= 2;
+    },
+    lammpstrj: (data, filename) => {
+        const base = filename ? strip_compression_extensions(filename) : ``;
+        if (!/\.lammpstrj$/.test(base))
+            return false;
+        return data.includes(`ITEM: TIMESTEP`) && data.includes(`ITEM: ATOMS`);
+    },
+};
+// Check if file is a trajectory (supports both filename-only and content-based detection)
+export function is_trajectory_file(filename, content) {
+    if (CONFIG_DIRS_REGEX.test(filename))
+        return false;
+    const base_name = strip_compression_extensions(filename);
+    // For xyz/extxyz files, use content-based detection if available
+    if (/\.(xyz|extxyz)$/i.test(base_name)) {
+        if (content)
+            return count_xyz_frames(content) >= 2;
+        return TRAJ_KEYWORDS_SIMPLE_REGEX.test(base_name);
+    }
+    // Always detect these specific trajectory formats
+    if (TRAJ_EXTENSIONS_REGEX.test(base_name) || XDATCAR_REGEX.test(base_name))
+        return true;
+    // Special exclusion for generic md_simulation pattern with certain extensions
+    if (MD_SIM_EXCLUDE_REGEX.test(base_name))
+        return false;
+    // For .h5/.hdf5 files, require trajectory keywords
+    if (/\.(h5|hdf5)$/i.test(base_name)) {
+        return TRAJ_KEYWORDS_SIMPLE_REGEX.test(base_name);
+    }
+    // For other extensions, require both keywords and specific extensions
+    return TRAJ_KEYWORDS_SIMPLE_REGEX.test(base_name) &&
+        TRAJ_FALLBACK_EXTENSIONS_REGEX.test(base_name);
+}

package/dist/trajectory/frame-reader.d.ts

@@ -0,0 +1,17 @@
+import type { FrameIndex, FrameLoader, ParseProgress, TrajectoryFrame, TrajectoryMetadata } from './index';
+export declare class TrajFrameReader implements FrameLoader {
+    private format;
+    private global_numbers?;
+    constructor(filename: string);
+    get_total_frames(data: string | ArrayBuffer): Promise<number>;
+    build_frame_index(data: string | ArrayBuffer, sample_rate: number, on_progress?: (progress: ParseProgress) => void): Promise<FrameIndex[]>;
+    load_frame(data: string | ArrayBuffer, frame_number: number): Promise<TrajectoryFrame | null>;
+    extract_plot_metadata(data: string | ArrayBuffer, options?: {
+        sample_rate?: number;
+        properties?: string[];
+    }, on_progress?: (progress: ParseProgress) => void): Promise<TrajectoryMetadata[]>;
+    private load_xyz_frame;
+    private load_ase_frame;
+    private parse_xyz_metadata;
+    private parse_ase_metadata;
+}