matterviz 0.3.5 → 0.3.6

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "ESNext",
+    "noEmit": true,
+    "rootDir": "../..",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "paths": {
+      "$lib": ["../../src/lib"],
+      "$lib/*": ["../../src/lib/*"]
+    }
+  },
+  "include": ["src/**/*", "tests/**/*"]
+}

package/vite-plugin-json-gz.ts

@@ -0,0 +1,29 @@
+import { readFileSync } from 'node:fs'
+import { gunzipSync } from 'node:zlib'
+import type { Plugin } from 'vite'
+
+// Vite plugin that transparently imports .json.gz files as ES modules
+export function vite_plugin_json_gz(): Plugin {
+  let is_build = false
+  return {
+    name: `vite-plugin-json-gz`,
+    enforce: `pre`,
+    configResolved(config) {
+      is_build = config.command === `build`
+    },
+    load(id) {
+      if (!id.endsWith(`.json.gz`)) return null
+      try {
+        const json_str = gunzipSync(readFileSync(id)).toString(`utf-8`)
+        JSON.parse(json_str) // validate before passing to bundler
+        // Rolldown (production) needs moduleType:'json' for import.meta.glob
+        // with import:'default' to properly unwrap the default export.
+        // Dev/test server doesn't support moduleType, needs JS module format.
+        if (is_build) return { code: json_str, moduleType: `json` }
+        return `export default ${json_str}`
+      } catch (error) {
+        this.error(`Failed to load ${id}: ${error}`)
+      }
+    },
+  }
+}

package/vite.config.ts

@@ -0,0 +1,34 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import { mock_vscode } from './tests/vscode-mock.ts'
+import { vite_plugin_json_gz } from './vite-plugin-json-gz.ts'
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    vite_plugin_json_gz(),
+    mode === `test`
+      ? {
+          // just ignore svelte files in test mode
+          name: `svelte-mock`,
+          resolveId: (id: string) => (id.endsWith(`.svelte`) ? id : null),
+          load: (id: string) => (id.endsWith(`.svelte`) ? `export default {}` : null),
+        }
+      : svelte(),
+    mode === `test` ? mock_vscode() : null,
+  ],
+  build: {
+    outDir: `dist`,
+    rollupOptions: {
+      input: resolve(import.meta.dirname, `src/webview/main.ts`),
+      output: { entryFileNames: `webview.js`, format: `es` },
+    },
+    emptyOutDir: false,
+    chunkSizeWarningLimit: 6000,
+  },
+  resolve: {
+    alias: {
+      $lib: resolve(import.meta.dirname, `../../src/lib`),
+    },
+  },
+}))

package/vite.extension.config.ts

@@ -0,0 +1,34 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import { vite_plugin_json_gz } from './vite-plugin-json-gz.ts'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(import.meta.dirname, `src/extension.ts`),
+      formats: [`es`],
+      fileName: () => `extension.js`,
+    },
+    rollupOptions: {
+      external: [
+        `vscode`,
+        `fs`,
+        `path`,
+        `node:buffer`,
+        `node:fs`,
+        `node:os`,
+        `node:path`,
+        `os`,
+      ],
+    },
+    minify: false,
+    emptyOutDir: false,
+  },
+  resolve: {
+    alias: {
+      $lib: resolve(import.meta.dirname, `../../src/lib`),
+    },
+  },
+  plugins: [vite_plugin_json_gz(), svelte()],
+})

package/dist/EmptyState.svelte.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,360 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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.d.ts

@@ -1,13 +0,0 @@
-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

@@ -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 './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]+/)
-    if (spaced.length === 3) {
-      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])] 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">
-  <span>hkl</span>
-  <input
-    type="text"
-    value={hkl_text}
-    oninput={handle_input}
-    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

@@ -1,7 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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[]>;