matterviz 0.3.6 → 0.4.0

package/dist/EmptyState.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    message?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/FilePicker.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+  import type { FileInfo } from './io'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  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
+    } else {
+      active_type_filter = active_type_filter === filter ? null : filter
+      active_category_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)
+
+    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}>
+  <div class="legend">
+    {#each show_category_filters ? uniq_categories : [] as category (category)}
+      {@const is_active = active_category_filter === category}
+      <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)}
+        role="button"
+        tabindex="0"
+        aria-pressed={is_active}
+        {@attach tooltip({ content: `Filter to show only ${category}` })}
+      >
+        {category}
+      </span>
+    {/each}
+    {#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}
+      <span
+        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)}
+        role="button"
+        tabindex="0"
+        {@attach tooltip({ content: `Filter to show only ${format.toUpperCase()} files` })}
+      >
+        <span
+          class="format-circle"
+          style:background-color={file_type_colors[format]}
+        ></span> {format.toUpperCase()}
+      </span>
+    {/each}
+
+    {#if active_category_filter || active_type_filter}
+      <button
+        {@attach tooltip({ content: `Clear all filters` })}
+        class="clear-filter"
+        onclick={() => [active_category_filter, active_type_filter] = [null, null]}
+      >
+        ✕
+      </button>
+    {/if}
+  </div>
+
+  {#each filtered_files as file (file.name)}
+    {@const base_type = get_base_file_type(file)}
+    <div
+      class="file-item"
+      class:active={active_files.includes(file.name)}
+      style:background-color={file_type_colors[base_type]?.replace(`0.8`, `0.08`)}
+      draggable="true"
+      ondragstart={handle_drag_start(file)}
+      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)
+        }
+      }}
+      ondblclick={(event) => {
+        clear_click_timer()
+        on_dblclick?.(file, event)
+      }}
+      onkeydown={(event) => {
+        if ([`Enter`, ` `].includes(event.key)) {
+          event.preventDefault()
+          clear_click_timer()
+          on_click?.(file, event)
+        }
+      }}
+      role="button"
+      tabindex="0"
+      title={on_click
+      ? `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.label ?? file.name}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .file-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    flex: 1;
+    align-content: start;
+  }
+  .file-picker.vertical {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 2px;
+    overflow-y: auto;
+  }
+  .file-picker.vertical .file-item {
+    border-radius: 4px;
+    padding: 3px 8px;
+  }
+  .file-picker.vertical .legend {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    margin-bottom: 0.3em;
+  }
+  .legend {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2pt 5pt;
+    font-size: 0.6em;
+    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;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+  }
+  .legend-item:hover {
+    opacity: 1;
+    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
+    border-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3));
+  }
+  .legend-item.active {
+    opacity: 1;
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
+    border-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.5));
+    font-weight: bold;
+  }
+  .clear-filter {
+    background-color: var(--btn-bg);
+    border-radius: 50%;
+    display: flex;
+    place-content: center;
+  }
+  .clear-filter:hover {
+    background-color: var(--btn-bg-hover);
+  }
+  .format-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+  }
+  .format-circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+  .file-item {
+    display: flex;
+    align-items: center;
+    padding: 4pt 8pt;
+    border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2));
+    border-radius: 20px;
+    cursor: grab;
+    background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.1));
+    transition: all 0.2s ease;
+    gap: 4pt;
+    &:has(.file-type-badge) {
+      padding-left: 3pt;
+    }
+  }
+  .file-item.active {
+    border-color: var(--success-color, #00ff00);
+    background: light-dark(rgba(0, 255, 0, 0.12), rgba(0, 255, 0, 0.2));
+    box-shadow: 0 0 8px light-dark(rgba(0, 255, 0, 0.25), rgba(0, 255, 0, 0.35));
+  }
+  .file-item:active {
+    cursor: grabbing;
+  }
+  .file-item:hover {
+    border-color: var(--accent-color, #007acc);
+    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;
+  }
+</style>

package/dist/FilePicker.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { FileInfo } from './io';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = 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>;
+};
+declare const FilePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type FilePicker = ReturnType<typeof FilePicker>;
+export default FilePicker;

package/dist/Icon.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements'
+  import { ICON_DATA, type IconName } from './icons'
+
+  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, 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
+  role="img"
+  fill={data.stroke ? `none` : `currentColor`}
+  stroke={data.stroke}
+  viewBox={data.viewBox}
+  {...rest}
+>
+  {#if icon_markup != null}
+    {@html icon_markup}
+  {:else}
+    <path d={data.path} />
+  {/if}
+</svg>
+
+<style>
+  svg {
+    width: var(--icon-size, 1em);
+    height: var(--icon-size, auto);
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SVGAttributes } from 'svelte/elements';
+import { type IconName } from './icons';
+type IconData = {
+    path: string;
+    viewBox: string;
+    stroke?: string;
+};
+type $$ComponentProps = {
+    icon?: IconName;
+} & Partial<IconData> & SVGAttributes<SVGSVGElement>;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/MillerIndexInput.svelte

@@ -0,0 +1,66 @@
+<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((component) => Math.abs(component) < 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]+/)
+    if (spaced.length === 3) {
+      const nums = spaced.map(Number)
+      if (nums.every((num) => !isNaN(num))) return nums as Vec3
+    }
+    // Fall back to compact single-digit format: "001", "-101"
+    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
+  }
+
+  function oninput(event: Event & { currentTarget: HTMLInputElement }) {
+    const parsed = parse_hkl(event.currentTarget.value)
+    if (parsed) value = parsed
+  }
+</script>
+
+<label class="miller-input">
+  <span>hkl</span>
+  <input
+    type="text"
+    value={hkl_text}
+    {oninput}
+    placeholder="001"
+    maxlength="12"
+    title="Miller indices (e.g. 001, -101, or 10 0 1)"
+  />
+</label>
+
+<style>
+  .miller-input {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    span {
+      font-weight: 600;
+      font-size: 0.85em;
+    }
+    input {
+      width: 4em;
+      padding: 0.15em 0.3em;
+      border: 1px solid var(--border-color, #ccc);
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 0.9em;
+      text-align: center;
+      box-sizing: border-box;
+    }
+  }
+</style>

package/dist/MillerIndexInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Vec3 } from './math';
+type $$ComponentProps = {
+    value?: Vec3;
+};
+declare const MillerIndexInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MillerIndexInput = ReturnType<typeof MillerIndexInput>;
+export default MillerIndexInput;

package/dist/api/mp.d.ts

@@ -0,0 +1,6 @@
+export declare const mp_bucket = "https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28";
+export declare function fetch_material_data<T extends Record<string, unknown>>(material_id: string, bucket?: string): Promise<{
+    summary: T | null;
+    similarity: T | null;
+    robocrys: T | null;
+}>;

package/dist/api/mp.js

@@ -0,0 +1,22 @@
+import { fetch_zipped } from '../io/fetch';
+// Materials Project S3 bucket for pre-computed data (may be outdated)
+export const mp_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28`;
+// Fetch all material data in parallel
+export async function fetch_material_data(material_id, bucket = mp_bucket) {
+    try {
+        const results = await Promise.allSettled([
+            fetch_zipped(`${bucket}/summary/${material_id}.json.gz`),
+            fetch_zipped(`${bucket}/similarity/${material_id}.json.gz`),
+            fetch_zipped(`${bucket}/robocrys/${material_id}.json.gz`),
+        ]);
+        return {
+            summary: results[0].status === `fulfilled` ? results[0].value : null,
+            similarity: results[1].status === `fulfilled` ? results[1].value : null,
+            robocrys: results[2].status === `fulfilled` ? results[2].value : null,
+        };
+    }
+    catch (err) {
+        console.error(`Failed to fetch material data:`, err);
+        return { summary: null, similarity: null, robocrys: null };
+    }
+}

package/dist/api/optimade.d.ts

@@ -0,0 +1,45 @@
+export interface OptimadeStructure {
+    id: string;
+    type: `structures`;
+    attributes: {
+        chemical_formula_descriptive?: string;
+        chemical_formula_reduced?: string;
+        chemical_formula_anonymous?: string;
+        dimension_types?: number[];
+        nperiodic_dimensions?: number;
+        lattice_vectors?: number[][];
+        cartesian_site_positions?: number[][];
+        species_at_sites?: string[];
+        species?: {
+            name: string;
+            chemical_symbols?: string[];
+            concentration?: number[];
+            mass?: number[];
+            original_name?: string;
+        }[];
+        n_sites?: number;
+        last_modified?: string;
+        immutable_id?: string;
+        [key: string]: unknown;
+    };
+    relationships?: Record<string, unknown>;
+    links?: Record<string, unknown>;
+}
+export interface OptimadeProvider {
+    id: string;
+    type: `links`;
+    attributes: {
+        name: string;
+        description?: string;
+        base_url: string;
+        homepage?: string;
+        version?: string;
+        [key: string]: unknown;
+    };
+}
+export declare function fetch_optimade_providers(): Promise<OptimadeProvider[]>;
+export declare const encode_structure_id: (id: string) => string;
+export declare const decode_structure_id: (encoded_id: string) => string;
+export declare function detect_provider_from_slug(slug: string, providers: OptimadeProvider[]): string;
+export declare function fetch_optimade_structure(structure_id: string, provider: string, providers: OptimadeProvider[]): Promise<OptimadeStructure | null>;
+export declare function fetch_suggested_structures(provider: string, providers: OptimadeProvider[], limit?: number): Promise<OptimadeStructure[]>;