matterviz 0.3.1 → 0.3.3

package/dist/EmptyState.svelte

@@ -1,5 +1,13 @@
-<script lang="ts">let { message, children, ...rest } = $props();
-export {};
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { message, children, ...rest }: {
+    // Simple text message to display. Ignored if children snippet is provided.
+    message?: string
+    // Custom content to render. Takes precedence over message prop.
+    children?: Snippet
+  } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
 <div {...rest} class="empty-state {rest.class ?? ``}">

package/dist/FilePicker.svelte

@@ -1,86 +1,131 @@
-<script lang="ts">import { tooltip } from 'svelte-multiselect';
-// Delay for distinguishing click from double-click (ms)
-const CLICK_DELAY = 250;
-let { files = [], active_files = [], show_category_filters = false, layout = `wrap`, on_drag_start, on_drag_end, on_click, on_dblclick, type_mapper, file_type_colors = {
-    cif: `rgba(100, 149, 237, 0.8)`,
-    xyz: `rgba(50, 205, 50, 0.8)`,
-    extxyz: `rgba(50, 205, 50, 0.8)`,
-    poscar: `rgba(255, 140, 0, 0.8)`,
-    json: `rgba(138, 43, 226, 0.8)`,
-    traj: `rgba(255, 192, 203, 0.8)`,
-    hdf5: `rgba(255, 69, 0, 0.8)`,
-    gz: `rgba(169, 169, 169, 0.8)`,
-    md: `rgba(255, 215, 0, 0.8)`,
-    yaml: `rgba(255, 0, 255, 0.8)`,
-    xdatcar: `rgba(255, 215, 0, 0.8)`,
-    tdb: `rgba(0, 188, 212, 0.8)`,
-}, ...rest } = $props();
-let active_category_filter = $state(null);
-let active_type_filter = $state(null);
-// Timer for distinguishing click from double-click (per-component state)
-let click_timer = null;
-let click_timer_file = null;
-const clear_click_timer = () => {
-    if (click_timer)
-        clearTimeout(click_timer);
-    click_timer = null;
-    click_timer_file = null;
-};
-// Helper function to get the base file type (removing .gz extension)
-const get_base_file_type = (file) => {
-    // Use custom type mapper if provided
-    if (type_mapper)
-        return type_mapper(file);
-    let base_name = file.name.toLowerCase();
-    // Remove .gz extension if present
-    if (base_name.endsWith(`.gz`))
-        base_name = base_name.slice(0, -3);
-    return base_name.split(`.`).pop() || `file`;
-};
-// Helper function to create normalized category identifier for filtering
-const get_category_id = (file) => {
-    if (!file.category)
-        return `(uncategorized)`;
-    return `${file.category_icon ?? ``} ${file.category}`.trim();
-};
-// Filter files based on active filters
-let filtered_files = $derived(files.filter((file) => {
-    if (active_category_filter) {
-        return get_category_id(file) === active_category_filter;
-    }
-    if (active_type_filter) {
-        const normalized_type = get_base_file_type(file);
-        return normalized_type === active_type_filter;
-    }
-    return true;
-}));
-const toggle_filter = (kind, filter) => {
+<script lang="ts">
+  import type { FileInfo } from './io'
+  import { tooltip } from 'svelte-multiselect'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  // Delay for distinguishing click from double-click (ms)
+  const CLICK_DELAY = 250
+
+  let {
+    files = [],
+    active_files = [],
+    show_category_filters = false,
+    layout = `wrap`,
+    on_drag_start,
+    on_drag_end,
+    on_click,
+    on_dblclick,
+    type_mapper,
+    file_type_colors = {
+      cif: `rgba(100, 149, 237, 0.8)`,
+      xyz: `rgba(50, 205, 50, 0.8)`,
+      extxyz: `rgba(50, 205, 50, 0.8)`,
+      poscar: `rgba(255, 140, 0, 0.8)`,
+      json: `rgba(138, 43, 226, 0.8)`,
+      traj: `rgba(255, 192, 203, 0.8)`,
+      hdf5: `rgba(255, 69, 0, 0.8)`,
+      gz: `rgba(169, 169, 169, 0.8)`,
+      md: `rgba(255, 215, 0, 0.8)`,
+      yaml: `rgba(255, 0, 255, 0.8)`,
+      xdatcar: `rgba(255, 215, 0, 0.8)`,
+      tdb: `rgba(0, 188, 212, 0.8)`,
+      chgcar: `rgba(59, 130, 246, 0.8)`,
+      parchg: `rgba(99, 102, 241, 0.8)`,
+      locpot: `rgba(245, 158, 11, 0.8)`,
+      elfcar: `rgba(16, 185, 129, 0.8)`,
+      cube: `rgba(168, 85, 247, 0.8)`,
+    },
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    files?: FileInfo[]
+    active_files?: string[]
+    show_category_filters?: boolean
+    layout?: `wrap` | `vertical`
+    on_drag_start?: (file: FileInfo, event: DragEvent) => void
+    on_drag_end?: () => void
+    on_click?: (file: FileInfo, event: MouseEvent | KeyboardEvent) => void
+    on_dblclick?: (file: FileInfo, event: MouseEvent) => void
+    type_mapper?: (file: FileInfo) => string
+    file_type_colors?: Record<string, string>
+  } = $props()
+
+  let active_category_filter = $state<string | null>(null)
+  let active_type_filter = $state<string | null>(null)
+  type FilterKind = `category` | `type`
+
+  // 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 clear_click_timer = () => {
+    if (click_timer) clearTimeout(click_timer)
+    click_timer = null
+    click_timer_file = null
+  }
+
+  // Helper function to get the base file type (removing .gz extension)
+  const get_base_file_type = (file: FileInfo): string => {
+    if (type_mapper) return type_mapper(file)
+    if (file.type) return file.type.toLowerCase()
+
+    let base_name = file.name.toLowerCase()
+    if (base_name.endsWith(`.gz`)) base_name = base_name.slice(0, -3)
+    return base_name.split(`.`).pop() || `file`
+  }
+
+  // Helper function to create normalized category identifier for filtering
+  const get_category_id = (file: FileInfo): string => {
+    if (!file.category) return `(uncategorized)`
+    return `${file.category_icon ?? ``} ${file.category}`.trim()
+  }
+
+  // Filter files based on active filters
+  let filtered_files = $derived(
+    files.filter((file) => {
+      if (active_category_filter) {
+        return get_category_id(file) === active_category_filter
+      }
+      if (active_type_filter) {
+        const normalized_type = get_base_file_type(file)
+        return normalized_type === active_type_filter
+      }
+      return true
+    }),
+  )
+
+  const toggle_filter = (kind: FilterKind, filter: string) => {
     if (kind === `category`) {
-        active_category_filter = active_category_filter === filter ? null : filter;
-        active_type_filter = null;
+      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
     }
-    else {
-        active_type_filter = active_type_filter === filter ? null : filter;
-        active_category_filter = null;
-    }
-};
-const handle_drag_start = (file) => (event) => {
-    const file_url = file.url || file.name; // Get the URL to drag (falling back to name)
+  }
+
+  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,
-    });
+      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);
+    event.dataTransfer?.setData(`application/json`, payload)
+
     // Also set plain text as fallback for external applications
-    event.dataTransfer?.setData(`text/plain`, file_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());
+    event.dataTransfer?.setData(`text/plain`, file_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(),
+  )
 </script>
 
 <div class="file-picker" class:vertical={layout === `vertical`} {...rest}>
@@ -103,7 +148,10 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
         {category}
       </span>
     {/each}
-    {#if uniq_categories.length > 0 && uniq_formats.length > 0}&emsp;{/if}
+    {#if show_category_filters && uniq_categories.length > 0 &&
+        uniq_formats.length > 0}
+      <span class="divider"></span>
+    {/if}
 
     {#each uniq_formats as format (format)}
       {@const is_active = active_type_filter === format}
@@ -137,11 +185,9 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
 
   {#each filtered_files as file (file.name)}
     {@const base_type = get_base_file_type(file)}
-    {@const is_compressed = file.name.toLowerCase().endsWith(`.gz`)}
     <div
       class="file-item"
       class:active={active_files.includes(file.name)}
-      class:compressed={is_compressed}
       style:background-color={file_type_colors[base_type]?.replace(`0.8`, `0.08`)}
       draggable="true"
       ondragstart={handle_drag_start(file)}
@@ -179,9 +225,14 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
       ? `Click to load or drag this ${base_type.toUpperCase()} file`
       : `Drag this ${base_type.toUpperCase()} file`}
     >
+      {#if file.label}
+        <span
+          class="file-type-badge"
+          style:background-color={file_type_colors[base_type] ?? `rgba(128,128,128,0.8)`}
+        >{base_type.toUpperCase()}</span>
+      {/if}
       <div class="file-name">
-        {file.category ? `${file.category_icon} ` : ``}{file.name}
-        {#if is_compressed}<span class="compression-indicator">📦</span>{/if}
+        {file.category ? `${file.category_icon} ` : ``}{file.label ?? file.name}
       </div>
     </div>
   {/each}
@@ -220,6 +271,12 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     opacity: 0.8;
     margin: 0 0 0.5em;
   }
+  .divider {
+    width: 1px;
+    align-self: stretch;
+    background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+    margin-inline: 0.3em;
+  }
   .legend-item {
     cursor: pointer;
     padding: 0.2em 0.4em;
@@ -267,7 +324,10 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     cursor: grab;
     background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.1));
     transition: all 0.2s ease;
-    gap: 0.5em;
+    gap: 4pt;
+    &:has(.file-type-badge) {
+      padding-left: 3pt;
+    }
   }
   .file-item.active {
     border-color: var(--success-color, #00ff00);
@@ -282,21 +342,19 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     background: light-dark(rgba(0, 122, 204, 0.15), rgba(0, 122, 204, 0.25));
     filter: brightness(1.1);
   }
+  .file-type-badge {
+    font-size: 0.5em;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: white;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
   .file-name {
     font-size: 0.7em;
     line-height: 1.1;
     white-space: pre-line;
   }
-  .compression-indicator {
-    opacity: 0.7;
-    font-size: 0.8em;
-    margin-left: 0.2em;
-  }
-  .file-item.compressed {
-    border-style: dashed;
-    opacity: 0.9;
-  }
-  .file-item.compressed:hover {
-    opacity: 1;
-  }
 </style>

package/dist/Icon.svelte

@@ -1,14 +1,20 @@
-<script lang="ts">import { ICON_DATA } from './icons';
-let { icon, path, viewBox = `0 0 24 24`, stroke, ...rest } = $props();
-const data = $derived.by(() => {
-    if (path)
-        return { path, viewBox: viewBox ?? `0 0 24 24`, stroke };
-    if (icon && icon in ICON_DATA)
-        return ICON_DATA[icon];
-    if (icon)
-        console.error(`Icon '${icon}' not found`);
-    return ICON_DATA.Alert;
-});
+<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 }:
+    & { icon?: IconName }
+    & Partial<IconData>
+    & SVGAttributes<SVGSVGElement> = $props()
+
+  const data: IconData = $derived.by(() => {
+    if (path) return { path, viewBox: viewBox ?? `0 0 24 24`, stroke }
+    if (icon && icon in ICON_DATA) return ICON_DATA[icon]
+    if (icon) console.error(`Icon '${icon}' not found`)
+    return ICON_DATA.Alert
+  })
 </script>
 
 <svg
@@ -19,7 +25,7 @@ const data = $derived.by(() => {
   {...rest}
 >
   {#if data.path.trim().startsWith(`<`)}
-    {@html data.path}
+    {@html sanitize_icon_svg(data.path)}
   {:else}
     <path d={data.path} />
   {/if}
@@ -27,8 +33,8 @@ const data = $derived.by(() => {
 
 <style>
   svg {
-    width: 1em;
-    height: auto;
+    width: var(--icon-size, 1em);
+    height: var(--icon-size, auto);
     display: inline-block;
     vertical-align: middle;
   }

package/dist/MillerIndexInput.svelte

@@ -1,28 +1,34 @@
-<script lang="ts">let { value = $bindable([0, 0, 1]) } = $props();
-// Format: compact "001" for single-digit, spaced "10 0 1" for multi-digit
-let hkl_text = $derived(value.every((v) => Math.abs(v) < 10) ? value.join(``) : value.join(` `));
-// Parse hkl string: supports compact "001"/"-101" and spaced/comma "10, 0, 1"
-function parse_hkl(input) {
+<script lang="ts">
+  // Compact single-field input for Miller indices (hkl).
+  // Accepts "001", "111", "-101", "1 0 1", "10, 0, 1" and emits a Vec3 tuple.
+  import type { Vec3 } from './math'
+
+  let { value = $bindable([0, 0, 1]) }: { value?: Vec3 } = $props()
+
+  // Format: compact "001" for single-digit, spaced "10 0 1" for multi-digit
+  let hkl_text = $derived(
+    value.every((v) => Math.abs(v) < 10) ? value.join(``) : value.join(` `),
+  )
+
+  // Parse hkl string: supports compact "001"/"-101" and spaced/comma "10, 0, 1"
+  function parse_hkl(input: string): Vec3 | null {
     // Try spaced/comma format first (handles multi-digit)
-    const spaced = input.trim().split(/[,\s]+/);
+    const spaced = input.trim().split(/[,\s]+/)
     if (spaced.length === 3) {
-        const nums = spaced.map(Number);
-        if (nums.every((n) => !isNaN(n)))
-            return nums;
+      const nums = spaced.map(Number)
+      if (nums.every((n) => !isNaN(n))) return nums as Vec3
     }
     // Fall back to compact single-digit format: "001", "-101"
-    const compact = input.replace(/\s+/g, ``);
-    const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/);
-    if (match)
-        return [Number(match[1]), Number(match[2]), Number(match[3])];
-    return null;
-}
-function handle_input(event) {
-    const parsed = parse_hkl(event.target.value);
-    if (parsed)
-        value = parsed;
-}
-export {};
+    const compact = input.replace(/\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
+  }
+
+  function handle_input(event: Event) {
+    const parsed = parse_hkl((event.target as HTMLInputElement).value)
+    if (parsed) value = parsed
+  }
 </script>
 
 <label class="miller-input">

package/dist/api/optimade.js

@@ -1,4 +1,3 @@
-// deno-lint-ignore-file no-await-in-loop
 // OPTIMADE API utilities for fetching structure data
 // Based on OPTIMADE 1.2.0 specification
 // Multiple CORS proxies for fallback reliability
@@ -18,7 +17,7 @@ const RESOLVED_URLS_CACHE_DURATION = 10 * 60 * 1000;
 async function fetch_with_cors_proxy(url) {
     try {
         const direct_response = await fetch(url, {
-            headers: { 'Accept': `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
+            headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
         });
         if (direct_response.ok)
             return direct_response;
@@ -29,7 +28,7 @@ async function fetch_with_cors_proxy(url) {
     for (const proxy of CORS_PROXIES) {
         try {
             const response = await fetch(`${proxy}${encodeURIComponent(url)}`, {
-                headers: { 'Accept': `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
+                headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
             });
             if (response.ok)
                 return response;
@@ -43,14 +42,15 @@ 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) {
+        now - resolved_urls_cache_time < RESOLVED_URLS_CACHE_DURATION) {
         return resolved_provider_urls[provider_base_url];
     }
     for (const endpoint of [`/links`, `/v1/links`]) {
         try {
             const response = await fetch_with_cors_proxy(`${provider_base_url}${endpoint}`);
             const data = await response.json();
-            const self_link = data.data?.find((link) => link.type === `links` && link.attributes?.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;
@@ -68,7 +68,7 @@ async function resolve_provider_url(provider_base_url) {
 }
 export async function fetch_optimade_providers() {
     const now = Date.now();
-    if (cached_providers && (now - providers_cache_time) < CACHE_DURATION) {
+    if (cached_providers && now - providers_cache_time < CACHE_DURATION) {
         return cached_providers;
     }
     try {