matterviz 0.3.6 → 0.4.0

package/dist/src/lib/FilePicker.svelte

@@ -1,360 +0,0 @@
-<script lang="ts">
-  import type { FileInfo } from '$lib/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/src/lib/Icon.svelte

@@ -1,41 +0,0 @@
-<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
-  role="img"
-  fill={data.stroke ? `none` : `currentColor`}
-  stroke={data.stroke}
-  viewBox={data.viewBox}
-  {...rest}
->
-  {#if data.path.trim().startsWith(`<`)}
-    {@html sanitize_icon_svg(data.path)}
-  {: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/src/lib/MillerIndexInput.svelte

@@ -1,66 +0,0 @@
-<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 '$lib/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.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 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/src/lib/api/mp.ts

@@ -1,26 +0,0 @@
-import { fetch_zipped } from '$lib/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<T extends Record<string, unknown>>(
-  material_id: string,
-  bucket: string = mp_bucket,
-): Promise<{ summary: T | null; similarity: T | null; robocrys: T | null }> {
-  try {
-    const results = await Promise.allSettled([
-      fetch_zipped<T>(`${bucket}/summary/${material_id}.json.gz`),
-      fetch_zipped<T>(`${bucket}/similarity/${material_id}.json.gz`),
-      fetch_zipped<T>(`${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/src/lib/api/optimade.ts

@@ -1,204 +0,0 @@
-// OPTIMADE API utilities for fetching structure data
-// Based on OPTIMADE 1.2.0 specification
-
-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
-  }
-}
-
-// Multiple CORS proxies for fallback reliability
-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/`,
-]
-
-let cached_providers: OptimadeProvider[] | null = null
-let providers_cache_time = 0
-const CACHE_DURATION = 5 * 60 * 1000
-
-const resolved_provider_urls: Record<string, string> = {}
-let resolved_urls_cache_time = 0
-const RESOLVED_URLS_CACHE_DURATION = 10 * 60 * 1000
-
-async function fetch_with_cors_proxy(url: string): Promise<Response> {
-  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
-  } catch {
-    // Direct access failed, will try CORS proxies
-  }
-
-  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` },
-      })
-      if (response.ok) return response
-    } catch {
-      // Try next proxy
-    }
-  }
-
-  throw new Error(`All CORS proxies failed for ${url}`)
-}
-
-async function resolve_provider_url(provider_base_url: string): Promise<string> {
-  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]
-  }
-
-  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: { type: string; attributes?: { base_url?: string; link_type?: string } }) =>
-          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
-      }
-    } catch {
-      // Try next endpoint
-    }
-  }
-
-  resolved_provider_urls[provider_base_url] = provider_base_url
-  resolved_urls_cache_time = now
-  return provider_base_url
-}
-
-export async function fetch_optimade_providers(): Promise<OptimadeProvider[]> {
-  const now = Date.now()
-  if (cached_providers && now - providers_cache_time < CACHE_DURATION) {
-    return cached_providers
-  }
-
-  try {
-    const response = await fetch_with_cors_proxy(`https://providers.optimade.org/v1/links`)
-    const data: { data: OptimadeProvider[] } = await response.json()
-    const providers = data.data
-      .filter((provider) => provider.attributes.base_url)
-      .map((provider) => ({
-        id: provider.id,
-        type: `links` as const,
-        attributes: {
-          name: provider.attributes.name,
-          description: provider.attributes.description,
-          base_url: provider.attributes.base_url,
-          homepage: provider.attributes.homepage,
-          version: provider.attributes.version,
-        },
-      }))
-
-    cached_providers = providers
-    providers_cache_time = now
-    return providers
-  } catch (error) {
-    console.warn(`Failed to fetch OPTIMADE providers:`, error)
-    throw error
-  }
-}
-
-// URL encode/decode utilities for structure IDs with special characters
-export const encode_structure_id = (id: string) =>
-  encodeURIComponent(id).replace(/\./g, `%2E`).replace(/\//g, `%2F`)
-
-export const decode_structure_id = (encoded_id: string) => decodeURIComponent(encoded_id)
-
-export function detect_provider_from_slug(slug: string, providers: OptimadeProvider[]) {
-  const decoded_slug = decode_structure_id(slug)
-  const prefix = decoded_slug.split(`-`)[0].toLowerCase()
-  return providers.find((provider) => provider.id === prefix)?.id ?? ``
-}
-
-export async function fetch_optimade_structure(
-  structure_id: string,
-  provider: string,
-  providers: OptimadeProvider[],
-): Promise<OptimadeStructure | null> {
-  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`
-  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()
-
-  if (!data.data) throw new Error(`Structure ${structure_id} not found`)
-  return Array.isArray(data.data) ? data.data[0] : data.data
-}
-
-export async function fetch_suggested_structures(
-  provider: string,
-  providers: OptimadeProvider[],
-  limit: number = 12,
-): Promise<OptimadeStructure[]> {
-  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`
-    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 : []
-  } catch (error) {
-    console.warn(`Failed to fetch suggested structures for ${provider}:`, error)
-    return []
-  }
-}