matterviz 0.3.7 → 0.4.1

package/dist/Icon.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements'
   import { ICON_DATA, type IconName } from './icons'
-  import { sanitize_icon_svg } from './sanitize'
 
   type IconData = { path: string; viewBox: string; stroke?: string }
   let { icon, path, viewBox = `0 0 24 24`, stroke, ...rest }:
@@ -10,11 +9,15 @@
     & SVGAttributes<SVGSVGElement> = $props()
 
   const data: IconData = $derived.by(() => {
-    if (path) return { path, viewBox: viewBox ?? `0 0 24 24`, stroke }
+    if (path) return { path, viewBox, stroke }
     if (icon && icon in ICON_DATA) return ICON_DATA[icon]
     if (icon) console.error(`Icon '${icon}' not found`)
     return ICON_DATA.Alert
   })
+
+  // {@html} only ever gets trusted ICON_DATA, never the user `path` prop (which renders as an
+  // escaped <path d> below) — so no XSS via path and identical SSR/CSR output (no hydration mismatch)
+  const icon_markup = $derived(!path && data.path.trim().startsWith(`<`) ? data.path : null)
 </script>
 
 <svg
@@ -24,8 +27,8 @@
   viewBox={data.viewBox}
   {...rest}
 >
-  {#if data.path.trim().startsWith(`<`)}
-    {@html sanitize_icon_svg(data.path)}
+  {#if icon_markup != null}
+    {@html icon_markup}
   {:else}
     <path d={data.path} />
   {/if}

package/dist/MillerIndexInput.svelte

@@ -19,7 +19,7 @@
       if (nums.every((num) => !isNaN(num))) return nums as Vec3
     }
     // Fall back to compact single-digit format: "001", "-101"
-    const compact = input.replace(/\s+/g, ``)
+    const compact = input.replaceAll(/\s+/g, ``)
     const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/)
     if (match) return [Number(match[1]), Number(match[2]), Number(match[3])] as Vec3
     return null

package/dist/api/optimade.js

@@ -1,34 +1,41 @@
 // OPTIMADE API utilities for fetching structure data
 // Based on OPTIMADE 1.2.0 specification
-// Multiple CORS proxies for fallback reliability
+// CORS proxies for fallback reliability. Query-style proxies need the target URL
+// percent-encoded; path-suffix proxies need it verbatim (encoded can never succeed).
 const CORS_PROXIES = [
-    `https://corsproxy.io/?`,
-    `https://api.allorigins.win/raw?url=`,
-    `https://cors-anywhere.herokuapp.com/`,
-    `https://thingproxy.freeboard.io/fetch/`,
-    `https://cors.bridged.cc/`,
+    { prefix: `https://corsproxy.io/?`, encode: true },
+    { prefix: `https://api.allorigins.win/raw?url=`, encode: true },
+    { prefix: `https://cors-anywhere.herokuapp.com/`, encode: false },
+    { prefix: `https://thingproxy.freeboard.io/fetch/`, encode: false },
+    { prefix: `https://cors.bridged.cc/`, encode: false },
 ];
 let cached_providers = null;
 let providers_cache_time = 0;
 const CACHE_DURATION = 5 * 60 * 1000;
+// Per-key timestamps: a shared one would let any resolution refresh every entry's TTL
 const resolved_provider_urls = {};
-let resolved_urls_cache_time = 0;
 const RESOLVED_URLS_CACHE_DURATION = 10 * 60 * 1000;
 async function fetch_with_cors_proxy(url) {
+    const headers = { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` };
+    let direct;
     try {
-        const direct_response = await fetch(url, {
-            headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
-        });
-        if (direct_response.ok)
-            return direct_response;
+        direct = await fetch(url, { headers });
     }
     catch {
-        // Direct access failed, will try CORS proxies
+        // No response at all (network/CORS failure) — fall back to CORS proxies below
     }
-    for (const proxy of CORS_PROXIES) {
+    // A returned response means CORS succeeded. Surface a definitive HTTP error status
+    // directly (rather than masking a 404/500 behind callers' JSON.parse or the proxy
+    // fallback); only a thrown fetch (no response) warrants the proxies.
+    if (direct) {
+        if (direct.ok)
+            return direct;
+        throw new Error(`Request failed: ${direct.status} ${direct.statusText} for ${url}`);
+    }
+    for (const { prefix, encode } of CORS_PROXIES) {
         try {
-            const response = await fetch(`${proxy}${encodeURIComponent(url)}`, {
-                headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
+            const response = await fetch(`${prefix}${encode ? encodeURIComponent(url) : url}`, {
+                headers,
             });
             if (response.ok)
                 return response;
@@ -41,9 +48,9 @@ async function fetch_with_cors_proxy(url) {
 }
 async function resolve_provider_url(provider_base_url) {
     const now = Date.now();
-    if (resolved_provider_urls[provider_base_url] &&
-        now - resolved_urls_cache_time < RESOLVED_URLS_CACHE_DURATION) {
-        return resolved_provider_urls[provider_base_url];
+    const cached = resolved_provider_urls[provider_base_url];
+    if (cached && now - cached.time < RESOLVED_URLS_CACHE_DURATION) {
+        return cached.url;
     }
     for (const endpoint of [`/links`, `/v1/links`]) {
         try {
@@ -52,18 +59,17 @@ async function resolve_provider_url(provider_base_url) {
             const self_link = data.data?.find((link) => link.type === `links` &&
                 link.attributes?.base_url &&
                 link.attributes.link_type === `child`);
-            if (self_link?.attributes.base_url) {
-                resolved_provider_urls[provider_base_url] = self_link.attributes.base_url;
-                resolved_urls_cache_time = now;
-                return self_link.attributes.base_url;
+            const url = self_link?.attributes.base_url;
+            if (url) {
+                resolved_provider_urls[provider_base_url] = { url, time: now };
+                return url;
             }
         }
         catch {
             // Try next endpoint
         }
     }
-    resolved_provider_urls[provider_base_url] = provider_base_url;
-    resolved_urls_cache_time = now;
+    resolved_provider_urls[provider_base_url] = { url: provider_base_url, time: now };
     return provider_base_url;
 }
 export async function fetch_optimade_providers() {
@@ -97,7 +103,7 @@ export async function fetch_optimade_providers() {
     }
 }
 // URL encode/decode utilities for structure IDs with special characters
-export const encode_structure_id = (id) => encodeURIComponent(id).replace(/\./g, `%2E`).replace(/\//g, `%2F`);
+export const encode_structure_id = (id) => encodeURIComponent(id).replaceAll('.', `%2E`).replaceAll('/', `%2F`);
 export const decode_structure_id = (encoded_id) => decodeURIComponent(encoded_id);
 export function detect_provider_from_slug(slug, providers) {
     const decoded_slug = decode_structure_id(slug);

package/dist/app.css

@@ -1,6 +1,3 @@
-/* Starry-night syntax highlighting (GitHub-style, auto light/dark) */
-@import '@wooorm/starry-night/style/both';
-
 /* CSS variables are unlayered so they're available to both layers and to
    components that reference them via var(). Custom properties inherit
    naturally regardless of layer ordering. */

package/dist/brillouin/BrillouinZone.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import type { ShowControlsProp } from '../controls'
-  import { normalize_show_controls } from '../controls'
+  import { normalize_show_controls, type ShowControlsProp } from '../controls'
   import EmptyState from '../EmptyState.svelte'
   import { StatusMessage } from '../feedback'
   import Spinner from '../feedback/Spinner.svelte'
-  import Icon from '../Icon.svelte'
-  import { create_file_drop_handler, load_from_url } from '../io'
-  import { set_fullscreen_bg, toggle_fullscreen } from '../layout'
+  import { create_file_drop_handler, drag_over_handlers, load_from_url } from '../io'
+  import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
+  import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import type { Vec3 } from '../math'
   import { PlotTooltip } from '../plot'
   import { type CameraProjection, DEFAULTS } from '../settings'
@@ -16,7 +15,6 @@
   import { Canvas } from '@threlte/core'
   import type { ComponentProps, Snippet } from 'svelte'
   import { untrack } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import BrillouinZoneControls from './BrillouinZoneControls.svelte'
   import BrillouinZoneExportPane from './BrillouinZoneExportPane.svelte'
@@ -29,6 +27,7 @@
     extract_point_group_from_operations,
     reciprocal_lattice,
   } from './compute'
+  import { to_error } from '../utils'
   import type {
     BrillouinZoneData,
     BZHoverData,
@@ -83,11 +82,13 @@
     k_path_labels = [],
     hovered_k_point = null,
     hovered_qpoint_index = null,
+    on_kpath_hover,
     children,
     tooltip_config,
     on_file_load,
     on_error,
     on_fullscreen_change,
+    on_point_hover,
     on_hover,
     ...rest
   }:
@@ -109,15 +110,13 @@
       ibz_color?: string
       ibz_opacity?: number
       ibz_data?: IrreducibleBZData | null
-      /**
-       * Controls visibility configuration.
-       * - 'always': controls always visible
-       * - 'hover': controls visible on component hover (default)
-       * - 'never': controls never visible
-       * - object: { mode, hidden, style } for fine-grained control
-       *
-       * Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
-       */
+      // Controls visibility configuration.
+      // - 'always': controls always visible
+      // - 'hover': controls visible on component hover (default)
+      // - 'never': controls never visible
+      // - object: { mode, hidden, style } for fine-grained control
+      //
+      // Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
       show_controls?: ShowControlsProp
       fullscreen?: boolean
       width?: number
@@ -127,7 +126,7 @@
       hovered?: boolean
       dragover?: boolean
       allow_file_drop?: boolean
-      fullscreen_toggle?: Snippet<[{ fullscreen: boolean }]> | boolean
+      fullscreen_toggle?: FullscreenToggleProp
       data_url?: string
       on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
       spinner_props?: ComponentProps<typeof Spinner>
@@ -144,6 +143,8 @@
       hovered_k_point?: Vec3 | null
       // Index of the currently hovered q-point in the band structure
       hovered_qpoint_index?: number | null
+      // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
+      on_kpath_hover?: (qpoint_index: number | null) => void
       children?: Snippet<
         [{ structure?: Crystal; bz_data?: BrillouinZoneData }]
       >
@@ -151,6 +152,8 @@
       on_file_load?: (data: BZHandlerData) => void
       on_error?: (data: BZHandlerData) => void
       on_fullscreen_change?: (data: BZHandlerData) => void
+      on_point_hover?: (data: BZHoverData | null) => void
+      // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
       on_hover?: (data: BZHoverData | null) => void
     }
     & HTMLAttributes<HTMLDivElement> = $props()
@@ -161,9 +164,16 @@
   let current_filename = $state<string | undefined>(undefined)
   let hover_data = $state<BZHoverData | null>(null)
 
-  // Call on_hover callback when hover_data changes
+  // Call on_point_hover callback when hover_data changes (on_hover is a deprecated alias)
+  let warned_deprecated_on_hover = false
   $effect(() => {
-    on_hover?.(hover_data)
+    if (on_hover && !on_point_hover && !warned_deprecated_on_hover) {
+      warned_deprecated_on_hover = true
+      console.warn(
+        `BrillouinZone: the on_hover prop was renamed to on_point_hover; the alias will be removed in a future release`,
+      )
+    }
+    ;(on_point_hover ?? on_hover)?.(hover_data)
   })
 
   // Normalize show_controls prop into consistent config
@@ -189,7 +199,7 @@
       parse_structure(content, filename)
     } catch (err) {
       error_msg = `Failed to parse ${filename}: ${
-        err instanceof Error ? err.message : err
+        to_error(err).message
       }`
       on_error?.({ error_msg, filename })
     }
@@ -211,7 +221,7 @@
       const valid_order = Math.min(Math.max(1, bz_order), 3) as 1 | 2 | 3
       bz_data = compute_brillouin_zone(k_lattice, valid_order)
     } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err)
+      const msg = to_error(err).message
       error_msg = `BZ computation failed: ${msg}`
       bz_data = undefined
       untrack(() => on_error?.({ error_msg, structure, bz_order }))
@@ -250,7 +260,7 @@
   // Load structure from URL or string
   $effect(() => {
     const handle_error = (err: unknown, source: string) => {
-      error_msg = err instanceof Error ? err.message : String(err)
+      error_msg = to_error(err).message
       on_error?.({ error_msg, filename: source })
     }
 
@@ -307,23 +317,16 @@
     }
   }
 
-  $effect(() => { // fullscreen and background
-    if (typeof window === `undefined`) return
-    const fs_el = document.fullscreenElement
-    if (fullscreen && fs_el !== wrapper && wrapper) {
-      wrapper.requestFullscreen().catch(console.error)
-    } else if (!fullscreen && fs_el === wrapper) document.exitFullscreen()
-    set_fullscreen_bg(wrapper, fullscreen, `--bz-bg-fullscreen`)
+  sync_fullscreen({
+    get_wrapper: () => wrapper,
+    get_fullscreen: () => fullscreen,
+    set_fullscreen: (val) => (fullscreen = val),
+    bg_css_var: `--bz-bg-fullscreen`,
+    on_change: (val) =>
+      on_fullscreen_change?.({ structure, bz_data, bz_order, fullscreen: val }),
   })
 </script>
 
-<svelte:document
-  onfullscreenchange={() => {
-    fullscreen = Boolean(document.fullscreenElement)
-    on_fullscreen_change?.({ structure, bz_data, bz_order, fullscreen })
-  }}
-/>
-
 <div
   class:dragover
   class:active={info_pane_open || controls_open || export_pane_open}
@@ -335,15 +338,7 @@
   onmouseenter={() => (hovered = true)}
   onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
-  ondragover={(event) => {
-    event.preventDefault()
-    if (!allow_file_drop) return
-    dragover = true
-  }}
-  ondragleave={(event) => {
-    event.preventDefault()
-    dragover = false
-  }}
+  {...drag_over_handlers({ allow: () => allow_file_drop, set_dragover: (over) => dragover = over })}
   {onkeydown}
   {...rest}
   class="brillouin-zone {rest.class ?? ``}"
@@ -354,65 +349,45 @@
   {:else if error_msg}
     <StatusMessage bind:message={error_msg} type="error" dismissible />
   {:else if structure && `lattice` in structure}
-    <section
-      class="control-buttons {controls_config.class}"
-      style={controls_config.style}
+    <ViewerChrome
+      {controls_config}
+      filename={current_filename}
+      {fullscreen}
+      {fullscreen_toggle}
+      {wrapper}
     >
-      {#if controls_config.mode !== `never`}
-        {#if current_filename && controls_config.visible(`filename`)}
-          <span class="filename">{current_filename}</span>
-        {/if}
-
-        {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
-          <button
-            type="button"
-            onclick={() => fullscreen_toggle && toggle_fullscreen(wrapper)}
-            title="{fullscreen ? `Exit` : `Enter`} fullscreen"
-            aria-pressed={fullscreen}
-            class="fullscreen-toggle"
-            {@attach tooltip()}
-          >
-            {#if typeof fullscreen_toggle === `function`}
-              {@render fullscreen_toggle({ fullscreen })}
-            {:else}
-              <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
-            {/if}
-          </button>
-        {/if}
-
-        {#if controls_config.visible(`info-pane`)}
-          <BrillouinZoneInfoPane {structure} {bz_data} bind:pane_open={info_pane_open} />
-        {/if}
+      {#if controls_config.visible(`info-pane`)}
+        <BrillouinZoneInfoPane {structure} {bz_data} bind:pane_open={info_pane_open} />
+      {/if}
 
-        {#if controls_config.visible(`export-pane`)}
-          <BrillouinZoneExportPane
-            bind:export_pane_open
-            {bz_data}
-            {wrapper}
-            {scene}
-            {camera}
-            bind:png_dpi
-            filename={current_filename || `brillouin-zone`}
-          />
-        {/if}
+      {#if controls_config.visible(`export-pane`)}
+        <BrillouinZoneExportPane
+          bind:export_pane_open
+          {bz_data}
+          {wrapper}
+          {scene}
+          {camera}
+          bind:png_dpi
+          filename={current_filename || `brillouin-zone`}
+        />
+      {/if}
 
-        {#if controls_config.visible(`controls`)}
-          <BrillouinZoneControls
-            bind:controls_open
-            bind:bz_order
-            bind:surface_color
-            bind:surface_opacity
-            bind:edge_color
-            bind:edge_width
-            bind:show_vectors
-            bind:camera_projection
-            bind:show_ibz
-            bind:ibz_color
-            bind:ibz_opacity
-          />
-        {/if}
+      {#if controls_config.visible(`controls`)}
+        <BrillouinZoneControls
+          bind:controls_open
+          bind:bz_order
+          bind:surface_color
+          bind:surface_opacity
+          bind:edge_color
+          bind:edge_width
+          bind:show_vectors
+          bind:camera_projection
+          bind:show_ibz
+          bind:ibz_color
+          bind:ibz_opacity
+        />
       {/if}
-    </section>
+    </ViewerChrome>
 
     {#if typeof WebGLRenderingContext !== `undefined`}
       <div style="overflow: hidden; height: 100%">
@@ -430,6 +405,7 @@
             {k_path_labels}
             {hovered_k_point}
             {hovered_qpoint_index}
+            {on_kpath_hover}
             {show_ibz}
             {ibz_data}
             {ibz_color}
@@ -447,7 +423,7 @@
             y={hover_data.screen_position.y}
             bg_color={hover_data.is_ibz ? ibz_color : surface_color}
             fixed
-            style="z-index: calc(var(--bz-buttons-z-index, var(--z-index-overlay-controls, 100000000)) + 1); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)"
+            style="z-index: calc(var(--z-index-overlay-controls, 100000000) + 1); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)"
           >
             <BrillouinZoneTooltip {hover_data} tooltip={tooltip_config} />
           </PlotTooltip>
@@ -494,54 +470,6 @@
   .brillouin-zone :global(canvas) {
     user-select: none;
   }
-  section.control-buttons {
-    position: absolute;
-    display: flex;
-    top: var(--bz-buttons-top, var(--ctrl-btn-top, 1ex));
-    right: var(--bz-buttons-right, var(--ctrl-btn-right, 1ex));
-    gap: clamp(6pt, 1cqmin, 9pt);
-    z-index: var(
-      --bz-buttons-z-index,
-      var(--z-index-overlay-controls, 100000000)
-    );
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    align-items: center;
-  }
-  /* Mode: always - controls always visible */
-  section.control-buttons.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: hover - controls visible on component hover */
-  .brillouin-zone:hover section.control-buttons.hover-visible,
-  .brillouin-zone:focus-within section.control-buttons.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: never - stays hidden (default state, no additional CSS needed) */
-  section.control-buttons > :global(button) {
-    background-color: transparent;
-    display: flex;
-    padding: 4px;
-    border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
-  }
-  section.control-buttons :global(button:hover) {
-    background-color: color-mix(in srgb, currentColor 8%, transparent);
-  }
-  .filename {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: var(--code-bg, rgba(0, 0, 0, 0.1));
-    padding: 3pt 6pt;
-    border-radius: 3pt;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   p.warn {
     text-align: center;
     padding: 2rem;

package/dist/brillouin/BrillouinZone.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { ShowControlsProp } from '../controls';
+import { type ShowControlsProp } from '../controls';
 import Spinner from '../feedback/Spinner.svelte';
+import { type FullscreenToggleProp } from '../layout';
 import type { Vec3 } from '../math';
 import { type CameraProjection } from '../settings';
 import type { Crystal } from '../structure';
@@ -32,15 +33,6 @@ type $$ComponentProps = {
     ibz_color?: string;
     ibz_opacity?: number;
     ibz_data?: IrreducibleBZData | null;
-    /**
-     * Controls visibility configuration.
-     * - 'always': controls always visible
-     * - 'hover': controls visible on component hover (default)
-     * - 'never': controls never visible
-     * - object: { mode, hidden, style } for fine-grained control
-     *
-     * Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
-     */
     show_controls?: ShowControlsProp;
     fullscreen?: boolean;
     width?: number;
@@ -50,9 +42,7 @@ type $$ComponentProps = {
     hovered?: boolean;
     dragover?: boolean;
     allow_file_drop?: boolean;
-    fullscreen_toggle?: Snippet<[{
-        fullscreen: boolean;
-    }]> | boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
     data_url?: string;
     on_file_drop?: (content: string | ArrayBuffer, filename: string) => void;
     spinner_props?: ComponentProps<typeof Spinner>;
@@ -66,6 +56,7 @@ type $$ComponentProps = {
     }[];
     hovered_k_point?: Vec3 | null;
     hovered_qpoint_index?: number | null;
+    on_kpath_hover?: (qpoint_index: number | null) => void;
     children?: Snippet<[
         {
             structure?: Crystal;
@@ -76,8 +67,9 @@ type $$ComponentProps = {
     on_file_load?: (data: BZHandlerData) => void;
     on_error?: (data: BZHandlerData) => void;
     on_fullscreen_change?: (data: BZHandlerData) => void;
+    on_point_hover?: (data: BZHoverData | null) => void;
     on_hover?: (data: BZHoverData | null) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "loading" | "fullscreen" | "hovered" | "controls_open" | "camera_projection" | "vector_scale" | "info_pane_open" | "wrapper" | "png_dpi" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "loading" | "camera_projection" | "vector_scale" | "png_dpi" | "info_pane_open" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;