matterviz 0.4.2 → 0.4.3

package/dist/FilePicker.svelte

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

package/dist/api/optimade.js

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

package/dist/app.css

@@ -25,6 +25,21 @@
      Override per viewer by setting this on its wrapper. */
   --ctrl-btn-icon-size: clamp(0.7rem, 2cqmin, 0.85rem);
 
+  /* In-viewer overlay stack (inside one viewer container, above its WebGL
+     canvas): 1 viewport labels · 2 glass chips · 4–6 carousel chrome
+     (legend/resize-handle/pager) · 10 draggable panes · 100 dropdowns +
+     toasts · 1000 canvas tooltips + error banners. Components fall back to
+     these tiers; override per instance via their dedicated --*-z-index vars.
+     NOTE (WKWebView/Tauri): overlays that can overlap a WebGL canvas also
+     need their own compositing layer (will-change: transform) — after hiding
+     and re-showing the window, WebKit reattaches canvas layers above
+     non-composited overlays regardless of z-index. */
+  --z-index-viewer-label: 1;
+  --z-index-viewer-chip: 2;
+  --z-index-viewer-pane: 10;
+  --z-index-viewer-dropdown: 100;
+  --z-index-viewer-tooltip: 1000;
+
   /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
      These must exceed Threlte HTML overlays, which use very high z-index values. */
   --z-index-overlay-controls: 100000000;

package/dist/brillouin/BrillouinZone.svelte

@@ -3,7 +3,7 @@
   import EmptyState from '../EmptyState.svelte'
   import { StatusMessage } from '../feedback'
   import Spinner from '../feedback/Spinner.svelte'
-  import { create_file_drop_handler, drag_over_handlers, load_from_url } from '../io'
+  import * as io from '../io'
   import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
   import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import type { Vec3 } from '../math'
@@ -248,20 +248,29 @@
   })
 
   // Load structure from URL or string
+  let data_url_load_id = 0
   $effect(() => {
     const handle_error = (err: unknown, source: string) => {
       error_msg = to_error(err).message
       on_error?.({ error_msg, filename: source })
     }
 
-    if (data_url && !structure) {
+    const requested_url = data_url
+    if (requested_url && !structure) {
+      const load_id = ++data_url_load_id
       loading = true
       error_msg = undefined
-      load_from_url(data_url, (content, filename) =>
-        on_file_drop ? on_file_drop(content, filename) : safe_parse(content, filename),
-      )
-        .catch((err) => handle_error(err, data_url))
-        .finally(() => (loading = false))
+      io.load_from_url(requested_url, (content, filename) => {
+        if (load_id !== data_url_load_id) return
+        return on_file_drop ? on_file_drop(content, filename) : safe_parse(content, filename)
+      })
+        .catch((err) => {
+          if (load_id !== data_url_load_id) return
+          handle_error(err, io.basename_from_url(requested_url))
+        })
+        .finally(() => {
+          if (load_id === data_url_load_id) loading = false
+        })
     } else if (structure_string && !data_url) {
       loading = true
       error_msg = undefined
@@ -275,7 +284,7 @@
     }
   })
 
-  const handle_file_drop = create_file_drop_handler({
+  const handle_file_drop = io.create_file_drop_handler({
     allow: () => allow_file_drop,
     on_drop: (content, filename) => (on_file_drop || safe_parse)(content, filename),
     on_error: (msg) => {
@@ -325,7 +334,7 @@
   onmouseenter={() => (hovered = true)}
   onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
-  {...drag_over_handlers({
+  {...io.drag_over_handlers({
     allow: () => allow_file_drop,
     set_dragover: (over) => (dragover = over),
   })}

package/dist/brillouin/BrillouinZoneScene.svelte

@@ -48,7 +48,7 @@
     auto_rotate = DEFAULTS.structure.auto_rotate,
     scene = $bindable(),
     camera = $bindable(),
-    k_path_points = [],
+    k_path_points: input_k_path_points = [],
     k_path_labels = [],
     hovered_k_point = null,
     hovered_qpoint_index = null,
@@ -75,6 +75,7 @@
     hover_data?: BZHoverData | null
     on_kpath_hover?: (qpoint_index: number | null) => void
   } = $props()
+  const k_path_points = $derived(input_k_path_points ?? [])
 
   bind_renderer((threlte_scene, threlte_camera) => {
     scene = threlte_scene
@@ -114,7 +115,7 @@
   // Band paths are densely sampled, so legit segments are tiny; a discontinuity jumps by
   // a fraction of the zone. Skip segments far longer than the median sampling step.
   const k_path_seg_cutoff = $derived.by(() => {
-    if (!k_path_points || k_path_points.length < 3) return Infinity
+    if (k_path_points.length < 3) return Infinity
     const lens = k_path_points
       .slice(1)
       .map((pt, idx) => Math.hypot(...math.subtract(pt as Vec3, k_path_points[idx] as Vec3)))
@@ -290,7 +291,7 @@
     {/if}
 
     <!-- K-path visualization -->
-    {#if k_path_points && k_path_points.length > 1}
+    {#if k_path_points.length > 1}
       {#each k_path_points.slice(0, -1) as from_point, idx (`${from_point}-${k_path_points[idx + 1]}#${idx}`)}
         {@const to_point = k_path_points[idx + 1]}
         {@const seg_len = Math.hypot(...math.subtract(to_point as Vec3, from_point as Vec3))}
@@ -317,32 +318,22 @@
       {/each}
     {/if}
 
-    <!-- Symmetry point spheres at labeled k-path points -->
-    {#if k_path_labels}
-      {#each k_path_labels as { position, label }, idx (`sphere-${idx}`)}
-        {#if label}
-          <T.Mesh position={[position[0], position[1], position[2]]}>
-            <T.SphereGeometry args={[0.015, 16, 16]} />
-            <T.MeshStandardMaterial color="#ffcc00" metalness={0.3} roughness={0.7} />
-          </T.Mesh>
-        {/if}
-      {/each}
-    {/if}
-
-    <!-- Symmetry point labels on k-path -->
-    {#if k_path_labels}
-      {#each k_path_labels as { position, label }, idx (`${label}-${idx}`)}
-        {#if label}
-          <extras.HTML center position={position.map((coord) => coord * 1.1) as Vec3}>
-            <span
-              style="background: rgba(0, 0, 0, 0.3); padding: 0 3px; border-radius: 2px; color: white"
-            >
-              {label}
-            </span>
-          </extras.HTML>
-        {/if}
-      {/each}
-    {/if}
+    <!-- Symmetry point spheres + labels at labeled k-path points -->
+    {#each k_path_labels as { position, label }, idx (`${label}-${idx}`)}
+      {#if label}
+        <T.Mesh position={[position[0], position[1], position[2]]}>
+          <T.SphereGeometry args={[0.015, 16, 16]} />
+          <T.MeshStandardMaterial color="#ffcc00" metalness={0.3} roughness={0.7} />
+        </T.Mesh>
+        <extras.HTML center position={position.map((coord) => coord * 1.1) as Vec3}>
+          <span
+            style="background: rgba(0, 0, 0, 0.3); padding: 0 3px; border-radius: 2px; color: white"
+          >
+            {label}
+          </span>
+        </extras.HTML>
+      {/if}
+    {/each}
 
     <!-- Hovered k-point highlight -->
     {#if hovered_k_point}

package/dist/brillouin/compute.js

@@ -3,8 +3,6 @@ import * as math from '../math';
 import { Vector3 } from 'three';
 import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js';
 const TOL = 1e-8;
-// Check if rotation matrix is identity
-const is_identity_rotation = (rot) => rot.every((row, idx) => row.every((val, jdx) => Math.abs(val - (idx === jdx ? 1 : 0)) < TOL));
 // Extract unique point group rotation matrices from space group operations.
 // Returns fractional-coordinate rotations (W matrices from spglib convention).
 // These must be converted to Cartesian k-space before use in clipping.
@@ -111,12 +109,11 @@ export function generate_bz_vertices(k_lattice, order = 1,
 // Higher values give more accurate zones but increase computation time significantly.
 // Default values: 26 (1st order), 80 (2nd order), 150 (3rd+ order)
 max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
-    if (order > 3)
-        order = 3; // Performance limit
-    const k_points = generate_k_space_grid(k_lattice, order);
+    const clamped_order = Math.min(order, 3);
+    const k_points = generate_k_space_grid(k_lattice, clamped_order);
     const center_idx = Math.floor(k_points.length / 2);
-    // Determine max planes for this order (default to highest value for orders > 3)
-    const max_planes = max_planes_by_order[order] ?? 150;
+    // Fallback for partial records passed through compute_brillouin_zone
+    const max_planes = max_planes_by_order[clamped_order] ?? 150;
     // Create Bragg planes (perpendicular bisectors of k-points)
     const planes = k_points
         .map((pt, idx) => {
@@ -152,12 +149,12 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
                         vertex[2] * normals[p_idx][2];
                     if (dot > distances[p_idx] + TOL) {
                         beyond_count++;
-                        if (beyond_count >= order)
+                        if (beyond_count >= clamped_order)
                             break;
                     }
                 }
                 // Vertex belongs to nth BZ if it's beyond fewer than n planes
-                if (beyond_count < order && !dedup.has_duplicate(vertex)) {
+                if (beyond_count < clamped_order && !dedup.has_duplicate(vertex)) {
                     vertices.push(vertex);
                     dedup.add(vertex);
                 }
@@ -166,13 +163,10 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
     }
     return vertices;
 }
-// Compute polyhedron volume via divergence theorem (sum of signed tetrahedral volumes)
+// Compute polyhedron volume via divergence theorem (sum of signed tetrahedral volumes).
+// Faces always come from compute_convex_hull, so each is a valid triangle.
 function compute_hull_volume(vertices, faces) {
-    if (faces.length === 0)
-        return 0;
     return Math.abs(faces.reduce((sum, face) => {
-        if (face.length < 3)
-            return sum;
         const [v0, v1, v2] = face.slice(0, 3).map((idx) => vertices[idx]);
         const area_normal = math.scale(math.cross_3d(math.subtract(v1, v0), math.subtract(v2, v0)), 0.5);
         return sum + math.dot(v0, area_normal) / 3;
@@ -255,7 +249,7 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
     }
     const hull = compute_convex_hull(vertices, edge_sharp_angle_deg);
     return {
-        order,
+        order: Math.min(order, 3),
         vertices: hull.vertices,
         faces: hull.faces,
         edges: hull.edges.map(([i1, i2]) => [hull.vertices[i1], hull.vertices[i2]]),
@@ -305,7 +299,7 @@ export function find_ibz_reference_direction(non_identity_ops) {
 // of exactly volume(BZ)/|G|. (Using a different reference point per operation — or
 // flipping individual planes — does NOT yield a fundamental domain in general.)
 export function compute_ibz_clipping_planes(point_group_ops) {
-    const non_identity_ops = point_group_ops.filter((rot) => !is_identity_rotation(rot));
+    const non_identity_ops = point_group_ops.filter((rot) => !rot.every((row, idx) => row.every((val, jdx) => Math.abs(val - (idx === jdx ? 1 : 0)) < TOL)));
     if (non_identity_ops.length === 0)
         return [];
     const ref_dir = find_ibz_reference_direction(non_identity_ops);

package/dist/brillouin/geometry.js

@@ -32,12 +32,12 @@ export function polyhedron_geometry(vertices, faces) {
     geometry.computeBoundingSphere();
     return geometry;
 }
-// Inverse of the reciprocal lattice for Cartesian -> fractional conversion; null if the lattice is missing or singular
+// Cartesian → fractional via transposed row-vector inverse; null if missing/singular
 export function k_lattice_inverse(k_lattice) {
     if (!k_lattice)
         return null;
     try {
-        return math.matrix_inverse_3x3(k_lattice);
+        return math.create_cart_to_frac_matrix(k_lattice);
     }
     catch {
         return null;

package/dist/chempot-diagram/ChemPotDiagram.svelte

@@ -9,7 +9,12 @@
   import ChemPotDiagram2D from './ChemPotDiagram2D.svelte'
   import ChemPotDiagram3D from './ChemPotDiagram3D.svelte'
   import { get_ternary_combinations } from './compute'
-  import type { ChemPotDiagramConfig, ChemPotHoverInfo, ChemPotHoverInfo3D } from './types'
+  import type {
+    AxisRangeData,
+    ChemPotDiagramConfig,
+    ChemPotHoverInfo,
+    ChemPotHoverInfo3D,
+  } from './types'
   import { CHEMPOT_DEFAULTS } from './types'
   import { to_error } from '../utils'
 
@@ -106,6 +111,16 @@
   })
 </script>
 
+{#snippet axis_ranges_section(ranges: AxisRangeData[])}
+  <h5 id="axis-ranges">Axis ranges</h5>
+  {#each ranges as axis_range (axis_range.element)}
+    <p>
+      {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
+      {format_num(axis_range.max_val, `.4~g`)} eV
+    </p>
+  {/each}
+{/snippet}
+
 <div class="chempot-diagram-wrapper">
   {#if n_display < 2}
     <div
@@ -191,13 +206,7 @@
       {#if hover_info.view === `2d`}
         <p>2D domain · Points: {hover_info.n_points}</p>
         {#if tooltip_detail_level === `detailed`}
-          <h5 id="axis-ranges">Axis ranges</h5>
-          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
-            <p>
-              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
-              {format_num(axis_range.max_val, `.4~g`)} eV
-            </p>
-          {/each}
+          {@render axis_ranges_section(hover_info.axis_ranges)}
         {/if}
       {:else if is_hover_info_3d(hover_info)}
         <p>
@@ -218,13 +227,7 @@
           {/if}
         </p>
         {#if tooltip_detail_level === `detailed`}
-          <h5 id="axis-ranges-1">Axis ranges</h5>
-          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
-            <p>
-              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
-              {format_num(axis_range.max_val, `.4~g`)} eV
-            </p>
-          {/each}
+          {@render axis_ranges_section(hover_info.axis_ranges)}
           <p>
             Centroid: ({hover_info.ann_loc
               .map((value) => format_num(value, `.3~g`))