matterviz 0.4.0 → 0.4.2

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

@@ -1,5 +1,7 @@
-import type { ShowControlsProp } from '../controls';
+import { type ShowControlsProp } from '../controls';
 import Spinner from '../feedback/Spinner.svelte';
+import type { Vec2 } from '../math';
+import { type FullscreenToggleProp } from '../layout';
 import type { Orientation } from '../plot';
 import { Histogram, ScatterPlot } from '../plot';
 import Structure from '../structure/Structure.svelte';
@@ -42,37 +44,23 @@ type $$ComponentProps = EventHandlers & HTMLAttributes<HTMLDivElement> & {
         on_dismiss: () => void;
     }]>;
     show_controls?: ShowControlsProp;
-    fullscreen_toggle?: Snippet<[{
-        fullscreen: boolean;
-    }]> | boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
     auto_play?: boolean;
     display_mode?: `structure+scatter` | `structure` | `scatter` | `histogram` | `structure+histogram`;
     step_labels?: number | number[];
     visible_properties?: string[];
     ELEM_PROPERTY_LABELS?: Record<string, string>;
-    units?: {
-        energy?: string;
-        energy_per_atom?: string;
-        force_max?: string;
-        force_norm?: string;
-        stress_max?: string;
-        volume?: string;
-        density?: string;
-        temperature?: string;
-        pressure?: string;
-        length?: string;
-        a?: string;
-        b?: string;
-        c?: string;
-        [key: string]: string | undefined;
-    };
-    fps_range?: [number, number];
+    fps_range?: Vec2;
     fps?: number;
     loading_options?: LoadingOptions;
     atom_type_mapping?: AtomTypeMapping;
     plot_skimming?: boolean;
     hovered?: boolean;
+    controls_open?: boolean;
+    info_pane_open?: boolean;
+    wrapper?: HTMLDivElement;
+    fullscreen?: boolean;
 };
-declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "trajectory" | "hovered" | "fps" | "display_mode" | "current_step_idx" | "visible_properties">;
+declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "wrapper" | "hovered" | "controls_open" | "trajectory" | "fps" | "info_pane_open" | "display_mode" | "current_step_idx" | "visible_properties">;
 type Trajectory = ReturnType<typeof Trajectory>;
 export default Trajectory;

package/dist/trajectory/TrajectoryError.svelte

@@ -3,14 +3,17 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { error_msg, on_dismiss, error_snippet, ...rest }:
-    & HTMLAttributes<HTMLDivElement>
-    & {
-      error_msg: string
-      on_dismiss: () => void
-      // Custom error snippet for advanced error handling
-      error_snippet?: Snippet<[{ error_msg: string; on_dismiss: () => void }]>
-    } = $props()
+  let {
+    error_msg,
+    on_dismiss,
+    error_snippet,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    error_msg: string
+    on_dismiss: () => void
+    // Custom error snippet for advanced error handling
+    error_snippet?: Snippet<[{ error_msg: string; on_dismiss: () => void }]>
+  } = $props()
 </script>
 
 <div {...rest}>

package/dist/trajectory/TrajectoryExportPane.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import {
+    estimate_video_bitrate,
     export_trajectory_video,
     get_ffmpeg_conversion_command,
+    observe_canvas_presence,
   } from '../io/export'
+  import ExportPane from '../io/ExportPane.svelte'
   import SettingsSection from '../layout/SettingsSection.svelte'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
   import type { TrajectoryType } from './'
   import type { ComponentProps } from 'svelte'
   import { tooltip } from 'svelte-multiselect/attachments'
@@ -36,8 +39,8 @@
     // Function to change trajectory step during export
     on_step_change?: (step_idx: number) => Promise<void> | void
     // Pane customization
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
   } = $props()
 
   let is_exporting = $state(false)
@@ -58,8 +61,8 @@
   let file_size_mb = $derived.by(() => {
     if (!canvas) return 0
     const pixels = canvas.width * canvas.height * resolution_multiplier ** 2
-    const bitrate = Math.max(1e6, Math.min(pixels * video_fps * 0.1, 2e8))
-    return (bitrate * export_frame_count / video_fps) / 8 / 1024 / 1024
+    const bitrate = estimate_video_bitrate(pixels, video_fps)
+    return (bitrate * export_frame_count) / video_fps / 8 / 1024 / 1024
   })
 
   // Initialize end_frame when trajectory changes
@@ -81,9 +84,7 @@
     }
   })
 
-  let export_frame_count = $derived(
-    end_frame >= start_frame ? end_frame - start_frame + 1 : 0,
-  )
+  let export_frame_count = $derived(end_frame >= start_frame ? end_frame - start_frame + 1 : 0)
 
   async function handle_video_export(format: `webm` | `mp4` = `webm`) {
     export_error = null
@@ -93,8 +94,8 @@
       export_error = !trajectory
         ? `No trajectory`
         : !canvas
-        ? `Canvas not ready`
-        : `Invalid frame range`
+          ? `Canvas not ready`
+          : `Invalid frame range`
       return
     }
 
@@ -138,24 +139,12 @@
 
   let has_canvas = $state(false)
 
-  $effect(() => {
-    if (!wrapper) {
-      has_canvas = false
-      return
-    }
-    const check = () => (has_canvas = Boolean(wrapper.querySelector(`canvas`)))
-    check()
-    const observer = new MutationObserver(check)
-    observer.observe(wrapper, { childList: true, subtree: true })
-    return () => observer.disconnect()
-  })
+  $effect(() => observe_canvas_presence(wrapper, (val) => (has_canvas = val)))
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...pane_props, class: `export-pane ${pane_props?.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  {pane_props}
   toggle_props={{
     title: export_pane_open ? `` : `Export Trajectory`,
     ...toggle_props,
@@ -181,27 +170,23 @@
       <label>
         Frame Rate (FPS)
         <input type="number" min={10} max={60} bind:value={video_fps} />
-        <input
-          type="range"
-          min={10}
-          max={60}
-          bind:value={video_fps}
-          style="accent-color: var(--accent-color)"
-        />
+        <input type="range" min={10} max={60} bind:value={video_fps} />
       </label>
 
       <span class="field-label">
         Resolution
         <div class="resolution-buttons">
           {#each [0.5, 1, 2, 4, 8] as multiplier (multiplier)}
-            {@const w = canvas ? Math.round(canvas.width * multiplier) : 0}
-            {@const h = canvas ? Math.round(canvas.height * multiplier) : 0}
+            {@const width_px = canvas ? Math.round(canvas.width * multiplier) : 0}
+            {@const height_px = canvas ? Math.round(canvas.height * multiplier) : 0}
             <button
               type="button"
               class:active={resolution_multiplier === multiplier}
               onclick={() => (resolution_multiplier = multiplier)}
               {@attach tooltip({
-                content: canvas ? `${multiplier}x (${w}×${h})` : `${multiplier}x`,
+                content: canvas
+                  ? `${multiplier}x (${width_px}×${height_px})`
+                  : `${multiplier}x`,
               })}
             >
               {multiplier}x
@@ -223,7 +208,6 @@
           min={0}
           max={Math.max(0, total_frames_available - 1)}
           bind:value={start_frame}
-          style="accent-color: var(--accent-color)"
         />
       </label>
 
@@ -240,7 +224,6 @@
           min={start_frame}
           max={Math.max(0, total_frames_available - 1)}
           bind:value={end_frame}
-          style="accent-color: var(--accent-color)"
         />
       </label>
     </SettingsSection>
@@ -252,13 +235,7 @@
     {/if}
 
     <div class="export-buttons">
-      {#each [
-        { label: `WebM`, format: `webm`, hint: `Export as WebM video` },
-        { label: `MP4`, format: `mp4`, hint: `WebM + ffmpeg command` },
-      ] as const as
-        { label, format, hint }
-        (format)
-      }
+      {#each [{ label: `WebM`, format: `webm`, hint: `Export as WebM video` }, { label: `MP4`, format: `mp4`, hint: `WebM + ffmpeg command` }] as const as { label, format, hint } (format)}
         <div style="display: flex; align-items: center; gap: 4pt">
           {label}
           <button
@@ -276,15 +253,11 @@
     </div>
 
     <div class="export-info">
-      {(export_frame_count / video_fps).toFixed(1)}s ({export_frame_count} frames: {
-        start_frame
-      }–{end_frame})
+      {(export_frame_count / video_fps).toFixed(1)}s ({export_frame_count} frames: {start_frame}–{end_frame})
       {#if file_size_mb > 0}
-        • ~{
-          file_size_mb < 1
+        • ~{file_size_mb < 1
           ? `${(file_size_mb * 1024).toFixed(0)} KB`
-          : `${file_size_mb.toFixed(1)} MB`
-        }
+          : `${file_size_mb.toFixed(1)} MB`}
       {/if}
     </div>
 
@@ -292,7 +265,7 @@
       <div class="warning">Waiting for canvas...</div>
     {/if}
   {/if}
-</DraggablePane>
+</ExportPane>
 
 <style>
   .field-label {
@@ -301,7 +274,8 @@
     gap: 6pt;
     white-space: nowrap;
   }
-  .warning, .error-message {
+  .warning,
+  .error-message {
     padding: 1ex;
     border-radius: var(--traj-border-radius, var(--border-radius, 3pt));
     font-size: 0.9em;

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

@@ -1,6 +1,5 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { TrajectoryType } from './';
-import type { ComponentProps } from 'svelte';
 type $$ComponentProps = {
     export_pane_open?: boolean;
     trajectory?: TrajectoryType;
@@ -9,9 +8,9 @@ type $$ComponentProps = {
     video_fps?: number;
     resolution_multiplier?: number;
     on_step_change?: (step_idx: number) => Promise<void> | void;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
 };
-declare const TrajectoryExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "resolution_multiplier" | "video_fps">;
+declare const TrajectoryExportPane: import("svelte").Component<$$ComponentProps, {}, "resolution_multiplier" | "export_pane_open" | "video_fps">;
 type TrajectoryExportPane = ReturnType<typeof TrajectoryExportPane>;
 export default TrajectoryExportPane;

package/dist/trajectory/TrajectoryInfoPane.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import type { InfoItem } from '../layout'
   import InfoPaneCards from '../overlays/InfoPaneCards.svelte'
-  import { format_num } from '../labels'
+  import { format_bytes, format_num } from '../labels'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { get_electro_neg_formula } from '../composition'
   import { SETTINGS_CONFIG } from '../settings'
@@ -28,16 +29,11 @@
     file_size?: number | null
     file_object?: File | null
     pane_open?: boolean
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
   } = $props()
 
   // Helper functions
-  const format_size = (bytes: number) =>
-    bytes > 1024 * 1024
-      ? `${format_num(bytes / (1024 * 1024), `.2~f`)} MB`
-      : `${format_num(bytes / 1024, `.2~f`)} KB`
-
   const is_valid_number = (val: unknown): val is number =>
     typeof val === `number` && isFinite(val)
 
@@ -50,8 +46,7 @@
       return `${format_num(values[0], decimals)} ${unit}`.trim()
     }
     const [min, max] = [Math.min(...values), Math.max(...values)]
-    return `${format_num(min, decimals)} - ${format_num(max, decimals)} ${unit}`
-      .trim()
+    return `${format_num(min, decimals)} - ${format_num(max, decimals)} ${unit}`.trim()
   }
 
   const safe_item = (
@@ -59,7 +54,7 @@
     value: string | null,
     key?: string,
     tooltip?: string,
-  ): InfoItem | null => value ? { label, value, key, tooltip } : null
+  ): InfoItem | null => (value ? { label, value, key, tooltip } : null)
 
   // oxlint-disable-next-line eslint-plugin-unicorn/prefer-native-coercion-functions -- type predicate needed for narrowing
   const is_info_item = (item: unknown): item is InfoItem => Boolean(item)
@@ -78,7 +73,8 @@
       (!trajectory?.frames?.length && !trajectory?.total_frames) ||
       current_step_idx < 0 ||
       current_step_idx >= (trajectory.total_frames ?? trajectory.frames?.length ?? 0)
-    ) return []
+    )
+      return []
 
     // For indexed trajectories, we might not have the current frame loaded
     const current_frame = trajectory.frames?.[current_step_idx]
@@ -89,22 +85,18 @@
     // File info section
     const file_items = [
       current_filename &&
-      safe_item(
-        `Name`,
-        current_filename,
-        `file-name`,
-        current_file_path || undefined,
-      ),
-      file_size && file_size > 0 &&
-      safe_item(`File Size`, format_size(file_size), `file-size`),
+        safe_item(`Name`, current_filename, `file-name`, current_file_path || undefined),
+      file_size &&
+        file_size > 0 &&
+        safe_item(`File Size`, format_bytes(file_size), `file-size`),
       file_object?.lastModified &&
-      safe_item(
-        `Modified`,
-        new Date(file_object.lastModified).toLocaleString(),
-        `file-modified`,
-      ),
+        safe_item(
+          `Modified`,
+          new Date(file_object.lastModified).toLocaleString(),
+          `file-modified`,
+        ),
       trajectory.metadata?.source_format &&
-      safe_item(`Format`, String(trajectory.metadata.source_format), `file-format`),
+        safe_item(`Format`, String(trajectory.metadata.source_format), `file-format`),
     ].filter(is_info_item)
 
     if (file_items.length > 0) {
@@ -115,32 +107,33 @@
     const traj_items = [
       safe_item(
         `Total Frames`,
-        `${format_num(total_frames, `.3~s`)} (current: ${
-          format_num(current_step_idx + 1, `.3~s`)
-        })`,
+        `${format_num(total_frames, `.3~s`)} (current: ${format_num(
+          current_step_idx + 1,
+          `.3~s`,
+        )})`,
         `total-frames`,
       ),
       trajectory.is_indexed &&
-      safe_item(
-        `Indexed`,
-        `Yes`,
-        `indexed-mode`,
-        SETTINGS_CONFIG.trajectory.use_indexing.description,
-      ),
+        safe_item(
+          `Indexed`,
+          `Yes`,
+          `indexed-mode`,
+          SETTINGS_CONFIG.trajectory.use_indexing.description,
+        ),
       trajectory.indexed_frames &&
-      safe_item(
-        `Index Points`,
-        `${trajectory.indexed_frames.length}`,
-        `index-points`,
-        `Number of frames indexed for fast seeking`,
-      ),
+        safe_item(
+          `Index Points`,
+          `${trajectory.indexed_frames.length}`,
+          `index-points`,
+          `Number of frames indexed for fast seeking`,
+        ),
       trajectory.plot_metadata &&
-      safe_item(
-        `Plot Metadata`,
-        `${trajectory.plot_metadata.length} frames`,
-        `plot-metadata`,
-        `Pre-extracted metadata for plotting`,
-      ),
+        safe_item(
+          `Plot Metadata`,
+          `${trajectory.plot_metadata.length} frames`,
+          `plot-metadata`,
+          `Pre-extracted metadata for plotting`,
+        ),
     ].filter(is_info_item)
 
     if (traj_items.length > 0) {
@@ -157,30 +150,35 @@
       const structure_items = [
         safe_item(`Atoms`, `${structure.sites.length}`, `atoms`),
         formula && safe_item(`Formula`, String(formula), `formula`),
-        is_valid_number(volume) && volume > 0 &&
-        safe_item(`Volume`, `${format_num(volume, `.3~s`)} ų`, `volume`),
-        is_valid_number(volume) && volume > 0 && structure.sites.length > 0 &&
-        safe_item(
-          `Density`,
-          `${format_num(structure.sites.length / volume, `.4~s`)} atoms/ų`,
-          `density`,
-        ),
+        is_valid_number(volume) &&
+          volume > 0 &&
+          safe_item(`Volume`, `${format_num(volume, `.3~s`)} ų`, `volume`),
+        is_valid_number(volume) &&
+          volume > 0 &&
+          structure.sites.length > 0 &&
+          safe_item(
+            `Density`,
+            `${format_num(structure.sites.length / volume, `.4~s`)} atoms/ų`,
+            `density`,
+          ),
         [a, b, c].every(is_valid_number) &&
-        safe_item(
-          `Cell Lengths`,
-          `${format_num(a as number, `.3~f`)}, ${format_num(b as number, `.3~f`)}, ${
-            format_num(c as number, `.3~f`)
-          } Å`,
-          `cell-lengths`,
-        ),
+          safe_item(
+            `Cell Lengths`,
+            `${format_num(a as number, `.3~f`)}, ${format_num(b as number, `.3~f`)}, ${format_num(
+              c as number,
+              `.3~f`,
+            )} Å`,
+            `cell-lengths`,
+          ),
         [alpha, beta, gamma].every(is_valid_number) &&
-        safe_item(
-          `Cell Angles`,
-          `${format_num(alpha as number, `.2~f`)}°, ${
-            format_num(beta as number, `.2~f`)
-          }°, ${format_num(gamma as number, `.2~f`)}°`,
-          `cell-angles`,
-        ),
+          safe_item(
+            `Cell Angles`,
+            `${format_num(alpha as number, `.2~f`)}°, ${format_num(
+              beta as number,
+              `.2~f`,
+            )}°, ${format_num(gamma as number, `.2~f`)}°`,
+            `cell-angles`,
+          ),
       ].filter(is_info_item)
 
       if (structure_items.length > 0) {
@@ -211,11 +209,11 @@
 
         const energy_items = [
           is_valid_number(current_energy) &&
-          safe_item(
-            `Current Energy`,
-            `${format_num(current_energy, `.3~s`)} eV`,
-            `energy-current`,
-          ),
+            safe_item(
+              `Current Energy`,
+              `${format_num(current_energy, `.3~s`)} eV`,
+              `energy-current`,
+            ),
           energy_range && safe_item(`Energy Range`, energy_range, `energy-range`),
         ].filter(is_info_item)
 
@@ -234,11 +232,11 @@
 
         const force_items = [
           is_valid_number(current_force) &&
-          safe_item(
-            `Max Force`,
-            `${format_num(current_force, `.3~s`)} eV/Å`,
-            `force-current`,
-          ),
+            safe_item(
+              `Max Force`,
+              `${format_num(current_force, `.3~s`)} eV/Å`,
+              `force-current`,
+            ),
           force_range && safe_item(`Force Range`, force_range, `force-range`),
         ].filter(is_info_item)
 
@@ -249,29 +247,22 @@
     }
 
     // Volume change section (only for regular trajectories)
-    if (
-      !trajectory.is_indexed && current_frame?.structure &&
-      trajectory.frames.length > 1
-    ) {
-      const lattice = `lattice` in current_frame.structure
-        ? current_frame.structure.lattice
-        : null
+    if (!trajectory.is_indexed && current_frame?.structure && trajectory.frames.length > 1) {
+      const lattice =
+        `lattice` in current_frame.structure ? current_frame.structure.lattice : null
       if (lattice) {
-        const volumes = trajectory.frames.map((
-          { structure },
-        ) => (`lattice` in structure && structure.lattice?.volume))
+        const volumes = trajectory.frames
+          .map(({ structure }) => `lattice` in structure && structure.lattice?.volume)
           .filter(is_valid_number)
           .filter((volume) => volume > 0)
 
         if (volumes.length > 1) {
-          const vol_change = (Math.max(...volumes) - Math.min(...volumes)) /
-            Math.min(...volumes)
+          const vol_change =
+            (Math.max(...volumes) - Math.min(...volumes)) / Math.min(...volumes)
           if (Math.abs(vol_change) > 0.1 && is_valid_number(vol_change)) {
-            const vol_items = [safe_item(
-              `Volume Change`,
-              `${format_num(vol_change, `.2~%`)}`,
-              `vol-change`,
-            )].filter(is_info_item)
+            const vol_items = [
+              safe_item(`Volume Change`, `${format_num(vol_change, `.2~%`)}`, `vol-change`),
+            ].filter(is_info_item)
 
             if (vol_items.length > 0) {
               sections.push({ title: `Volume`, items: vol_items })
@@ -283,9 +274,7 @@
     return sections
   })
 
-  let info_cards = $derived(
-    info_pane_data.map(({ title, items }) => ({ title, rows: items })),
-  )
+  let info_cards = $derived(info_pane_data.map(({ title, items }) => ({ title, rows: items })))
   let n_info_items = $derived(
     info_pane_data.reduce((count, { items }) => count + items.length, 0),
   )

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

@@ -1,3 +1,4 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { ComponentProps } from 'svelte';
 import type { TrajectoryType } from './index';
@@ -9,8 +10,8 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     file_size?: number | null;
     file_object?: File | null;
     pane_open?: boolean;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    toggle_props?: PaneToggleProps;
+    pane_props?: PaneProps;
 };
 declare const TrajectoryInfoPane: import("svelte").Component<$$ComponentProps, {}, "pane_open">;
 type TrajectoryInfoPane = ReturnType<typeof TrajectoryInfoPane>;

package/dist/trajectory/constants.js

@@ -1,7 +1,11 @@
 // Constants for trajectory parsing and large file handling
+import { DEFAULTS } from '../settings';
 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
+// Fallback thresholds for component usage without loading_options, derived from the
+// settings schema so settings-driven contexts (e.g. the VSCode extension) and direct
+// component use agree on when large-file/indexed loading kicks in.
+export const MAX_BIN_FILE_SIZE = DEFAULTS.trajectory.bin_file_threshold; // 50MB
+export const MAX_TEXT_FILE_SIZE = DEFAULTS.trajectory.text_file_threshold; // 25MB