matterviz 0.3.1 → 0.3.3

package/dist/structure/AtomLegend.svelte

@@ -1,137 +1,233 @@
-<script lang="ts">import { contrast_color, default_element_colors } from '../colors';
-import { element_data } from '../element';
-import Icon from '../Icon.svelte';
-import { ELEM_SYMBOLS, format_num } from '../labels';
-import { ColorBar } from '../plot';
-import { SETTINGS_CONFIG } from '../settings';
-import { colors } from '../state.svelte';
-import { atomic_radii } from './';
-import { click_outside, tooltip } from 'svelte-multiselect/attachments';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-let { atom_color_config = $bindable({
-    mode: `element`,
-    scale: undefined,
-    scale_type: `continuous`,
-}), property_colors = null, elements, elem_color_picker_title = `Double click to reset color`, labels = $bindable([]), amount_format = `.3~f`, show_amounts = true, get_element_label, hidden_elements = $bindable(new SvelteSet()), hidden_prop_vals = $bindable(new SvelteSet()), 
-// Element remapping: maps original element symbols to new ones
-element_mapping = $bindable(), 
-// Per-element and per-site radius overrides
-element_radius_overrides = $bindable({}), site_radius_overrides = $bindable(new SvelteMap()), selected_sites = [], title = ``, sym_data = null, structure = undefined, children, ...rest } = $props();
-const titles = {
+<script lang="ts">
+  import { contrast_color, default_element_colors } from '../colors'
+  import type { CompositionType } from '../composition'
+  import type { ElementSymbol } from '../element'
+  import { element_data } from '../element'
+  import Icon from '../Icon.svelte'
+  import { ELEM_SYMBOLS, format_num } from '../labels'
+  import { ColorBar } from '../plot'
+  import { SETTINGS_CONFIG } from '../settings'
+  import { colors } from '../state.svelte'
+  import type { AnyStructure } from './'
+  import { atomic_radii } from './'
+  import type {
+    AtomColorConfig,
+    AtomPropertyColors,
+  } from './atom-properties'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import type { Snippet } from 'svelte'
+  import { click_outside, tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+
+  let {
+    atom_color_config = $bindable({
+      mode: `element`,
+      scale: undefined,
+      scale_type: `continuous`,
+    }),
+    property_colors = null,
+    elements,
+    elem_color_picker_title = `Double click to reset color`,
+    labels = $bindable([]),
+    amount_format = `.3~f`,
+    show_amounts = true,
+    get_element_label,
+    hidden_elements = $bindable(new SvelteSet()),
+    hidden_prop_vals = $bindable(new SvelteSet<number | string>()),
+    // Element remapping: maps original element symbols to new ones
+    element_mapping = $bindable(),
+    // Per-element and per-site radius overrides
+    element_radius_overrides = $bindable<Partial<Record<ElementSymbol, number>>>({}),
+    site_radius_overrides = $bindable<SvelteMap<number, number>>(new SvelteMap()),
+    selected_sites = [] as number[],
+    title = ``,
+    sym_data = null,
+    structure = undefined,
+    children,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
+    atom_color_config?: Partial<AtomColorConfig>
+    property_colors?: AtomPropertyColors | null
+    elements?: CompositionType
+    elem_color_picker_title?: string
+    labels?: HTMLLabelElement[]
+    amount_format?: string // Float formatting for element amounts (default: 3 significant digits)
+    show_amounts?: boolean // Whether to show element amounts
+    get_element_label?: (element: string, amount: number) => string // Custom label function
+    hidden_elements?: Set<ElementSymbol>
+    hidden_prop_vals?: Set<number | string> // Track hidden property values (e.g. Wyckoff positions, coordination numbers)
+    // Element remapping: maps original element symbols to new ones (e.g. {'H': 'Na', 'He': 'Cl'})
+    element_mapping?: Partial<Record<ElementSymbol, ElementSymbol>>
+    // Per-element and per-site radius overrides (absolute values in Angstroms)
+    element_radius_overrides?: Partial<Record<ElementSymbol, number>>
+    site_radius_overrides?: Map<number, number> | SvelteMap<number, number>
+    selected_sites?: number[] // Currently selected site indices
+    title?: string
+    sym_data?: MoyoDataset | null
+    structure?: AnyStructure | null
+    children?: Snippet<[{ mode_menu_open: boolean; structure?: AnyStructure | null }]>
+  } = $props()
+
+  const titles = {
     coordination: `Coordination`,
     wyckoff: `Wyckoff Position`,
-};
-let show_element_legend = $derived(atom_color_config.mode === `element` && elements &&
-    Object.keys(elements).length > 0);
-let show_property_legend = $derived(atom_color_config.mode !== `element` && property_colors?.colors.length);
-let legend_title = $derived(title || titles[atom_color_config.mode] || ``);
-// Dropdown state
-let mode_menu_open = $state(false);
-// Clear hidden property values when switching modes (since they may not be valid)
-let previous_mode = $state(atom_color_config.mode);
-$effect(() => {
+  }
+
+  let show_element_legend = $derived(
+    atom_color_config.mode === `element` && elements &&
+      Object.keys(elements).length > 0,
+  )
+  let show_property_legend = $derived(
+    atom_color_config.mode !== `element` && property_colors?.colors.length,
+  )
+  let legend_title = $derived(
+    title || titles[atom_color_config.mode as keyof typeof titles] || ``,
+  )
+
+  // Dropdown state
+  let mode_menu_open = $state(false)
+
+  // Clear hidden property values when switching modes (since they may not be valid)
+  let previous_mode = $state(atom_color_config.mode)
+  $effect(() => {
     if (atom_color_config.mode !== previous_mode) {
-        hidden_prop_vals.clear();
-        previous_mode = atom_color_config.mode;
+      hidden_prop_vals.clear()
+      previous_mode = atom_color_config.mode
     }
-});
-// Normalize incoming Map to SvelteMap at boundary for reactivity
-// This preserves identity for bindings while ensuring SvelteMap methods work
-$effect(() => {
+  })
+
+  // Normalize incoming Map to SvelteMap at boundary for reactivity
+  // This preserves identity for bindings while ensuring SvelteMap methods work
+  $effect(() => {
     if (site_radius_overrides && !(site_radius_overrides instanceof SvelteMap)) {
-        site_radius_overrides = new SvelteMap(site_radius_overrides);
+      site_radius_overrides = new SvelteMap(site_radius_overrides)
     }
-});
-// Format display values based on mode
-let format_value = (val) => {
-    if (typeof val === `number`)
-        return format_num(val, `.3~f`);
+  })
+  // Format display values based on mode
+  let format_value = (val: number | string): string => {
+    if (typeof val === `number`) return format_num(val, `.3~f`)
+
     if (typeof val === `string` && val.includes(`|`)) { // Format Wyckoff orbit IDs
-        const [wyckoff, element] = val.split(`|`, 2);
-        // Count how many sites have this wyckoff+element combination
-        const count = property_colors?.values.filter((v) => v === val).length ?? 0;
-        return `${element}:${count}${wyckoff}`;
+      const [wyckoff, element] = val.split(`|`, 2)
+      // Count how many sites have this wyckoff+element combination
+      const count = property_colors?.values.filter((v) => v === val).length ?? 0
+      return `${element}:${count}${wyckoff}`
     }
-    return String(val);
-};
-// Map from property value to color (computed once, reused in categorical legend)
-let color_map = $derived(new Map(
-// Use unique_values instead of values to avoid undefined colors from duplicates
-property_colors?.unique_values?.flatMap((val) => {
-    const idx = property_colors.values.indexOf(val);
-    return idx >= 0 ? [[val, property_colors.colors[idx]]] : [];
-}) ?? []));
-function toggle_visibility(set, value, event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const new_set = new SvelteSet(set);
-    if (new_set.has(value))
-        new_set.delete(value);
-    else
-        new_set.add(value);
-    return new_set;
-}
-// Element remapping state
-let remap_menu_open = $state(null);
-let remap_search = $state(``);
-// Filtered elements based on search
-let filtered_elements = $derived.by(() => {
-    if (!remap_search)
-        return ELEM_SYMBOLS;
-    const query = remap_search.toLowerCase();
+    return String(val)
+  }
+
+  // Map from property value to color (computed once, reused in categorical legend)
+  let color_map = $derived(
+    new Map(
+      // Use unique_values instead of values to avoid undefined colors from duplicates
+      property_colors?.unique_values?.flatMap((val) => {
+        const idx = property_colors.values.indexOf(val)
+        return idx >= 0 ? [[val, property_colors.colors[idx]]] : []
+      }) ?? [],
+    ),
+  )
+
+  function toggle_visibility<T>(
+    set: Set<T>,
+    value: T,
+    event: MouseEvent,
+  ): Set<T> {
+    event.preventDefault()
+    event.stopPropagation()
+    const new_set = new SvelteSet(set)
+    if (new_set.has(value)) new_set.delete(value)
+    else new_set.add(value)
+    return new_set
+  }
+
+  // Element remapping state
+  let remap_menu_open = $state<ElementSymbol | null>(null)
+  let remap_search = $state(``)
+
+  // Filtered elements based on search
+  let filtered_elements = $derived.by(() => {
+    if (!remap_search) return ELEM_SYMBOLS
+    const query = remap_search.toLowerCase()
     return ELEM_SYMBOLS.filter((elem) => {
-        const data = element_data?.find((el) => el.symbol === elem);
-        return elem.toLowerCase().includes(query) ||
-            data?.name?.toLowerCase().includes(query);
-    });
-});
-function remap_element(from, to) {
+      const data = element_data?.find((el) => el.symbol === elem)
+      return elem.toLowerCase().includes(query) ||
+        data?.name?.toLowerCase().includes(query)
+    })
+  })
+
+  const known_element_symbols = new Set(ELEM_SYMBOLS)
+  let sorted_element_entries = $derived.by(() => {
+    if (!elements) return []
+    const element_amounts = elements as Record<string, number>
+    const ordered_known_entries = ELEM_SYMBOLS
+      .flatMap((element_symbol) => {
+        const amount = element_amounts[element_symbol]
+        return amount === undefined ? [] : [[element_symbol, amount] as const]
+      })
+    const unknown_entries = Object.entries(element_amounts)
+      .filter(([element_symbol]) =>
+        !known_element_symbols.has(element_symbol as ElementSymbol)
+      )
+      .sort(([element_a], [element_b]) => element_a.localeCompare(element_b))
+    return [...ordered_known_entries, ...unknown_entries]
+  })
+
+  function remap_element(from: ElementSymbol, to: ElementSymbol) {
     if (from === to && element_mapping?.[from]) {
-        // Remove mapping if mapping back to original element
-        const { [from]: _, ...rest } = element_mapping;
-        element_mapping = Object.keys(rest).length > 0 ? rest : undefined;
-    }
-    else if (from !== to) {
-        element_mapping = { ...element_mapping, [from]: to };
+      // Remove mapping if mapping back to original element
+      const { [from]: _, ...rest } = element_mapping
+      element_mapping = Object.keys(rest).length > 0 ? rest : undefined
+    } else if (from !== to) {
+      element_mapping = { ...element_mapping, [from]: to }
     }
-    remap_menu_open = null;
-    remap_search = ``;
-}
-// Radius bounds (Angstroms) - max accommodates largest atomic radii (~2.6Å for Cs)
-const MIN_RADIUS = 0.1;
-const MAX_RADIUS = 5;
-const parse_radius = (value) => {
-    const num = parseFloat(value);
-    return !isNaN(num) && num >= MIN_RADIUS && num <= MAX_RADIUS ? num : null;
-};
-function update_element_radius(elem, value) {
-    const radius = parse_radius(value);
+    remap_menu_open = null
+    remap_search = ``
+  }
+
+  // Radius bounds (Angstroms) - max accommodates largest atomic radii (~2.6Å for Cs)
+  const MIN_RADIUS = 0.1
+  const MAX_RADIUS = 5
+
+  const parse_radius = (value: string): number | null => {
+    const num = parseFloat(value)
+    return !isNaN(num) && num >= MIN_RADIUS && num <= MAX_RADIUS ? num : null
+  }
+
+  function update_element_radius(elem: ElementSymbol, value: string) {
+    const radius = parse_radius(value)
     if (radius !== null) {
-        element_radius_overrides = { ...element_radius_overrides, [elem]: radius };
+      element_radius_overrides = { ...element_radius_overrides, [elem]: radius }
     }
-}
-function clear_element_radius(elem) {
-    const { [elem]: _, ...rest } = element_radius_overrides ?? {};
-    element_radius_overrides = rest;
-}
-const get_element_radius = (elem) => element_radius_overrides?.[elem] ?? atomic_radii[elem] ?? 1;
-// Mutate in-place to preserve map identity for bindings (aligns with Structure.svelte pattern)
-function update_site_radius(site_idx, value) {
-    const radius = parse_radius(value);
-    if (radius === null)
-        return;
-    site_radius_overrides?.set(site_idx, radius);
-}
-function clear_site_radius(site_idx) {
-    site_radius_overrides?.delete(site_idx);
-}
-const get_site_radius = (site_idx) => {
-    const override = site_radius_overrides?.get(site_idx);
-    if (override !== undefined)
-        return override;
-    const element = structure?.sites?.[site_idx]?.species[0]?.element;
-    return element ? get_element_radius(element) : 1;
-};
+  }
+
+  function clear_element_radius(elem: ElementSymbol) {
+    const { [elem]: _, ...rest } = element_radius_overrides ?? {}
+    element_radius_overrides = rest
+  }
+
+  const get_element_radius = (elem: ElementSymbol): number =>
+    element_radius_overrides?.[elem] ?? atomic_radii[elem] ?? 1
+
+  // Mutate in-place to preserve map identity for bindings (aligns with Structure.svelte pattern)
+  function update_site_radius(site_idx: number, value: string) {
+    const radius = parse_radius(value)
+    if (radius === null) return
+    site_radius_overrides?.set(site_idx, radius)
+  }
+
+  function clear_site_radius(site_idx: number) {
+    site_radius_overrides?.delete(site_idx)
+  }
+
+  const get_site_radius = (site_idx: number): number => {
+    const override = site_radius_overrides?.get(site_idx)
+    if (override !== undefined) return override
+    const element = structure?.sites?.[site_idx]?.species[0]?.element as
+      | ElementSymbol
+      | undefined
+    return element ? get_element_radius(element) : 1
+  }
 </script>
 
 {#snippet mode_selector_snippet()}
@@ -195,8 +291,11 @@ const get_site_radius = (site_idx) => {
             max={MAX_RADIUS}
             step={0.05}
             value={get_site_radius(site_idx)}
-            oninput={(event) =>
-            update_site_radius(site_idx, (event.target as HTMLInputElement).value)}
+            oninput={(event) => {
+              if (event.target instanceof HTMLInputElement) {
+                update_site_radius(site_idx, event.target.value)
+              }
+            }}
           />
           <span class="unit">Å</span>
         </label>
@@ -217,7 +316,7 @@ const get_site_radius = (site_idx) => {
 
 {#if show_element_legend}
   <div {...rest} class="atom-legend element-legend {rest.class ?? ``}">
-    {#each Object.entries(elements!) as [elem, amt], idx (elem + amt)}
+    {#each sorted_element_entries as [elem, amt], idx (elem)}
       {@const is_hidden = hidden_elements.has(elem as ElementSymbol)}
       {@const displayed_elem = element_mapping?.[elem as ElementSymbol] || elem}
       <div class="legend-item">
@@ -293,11 +392,14 @@ const get_site_radius = (site_idx) => {
                   max={MAX_RADIUS}
                   step={0.05}
                   value={get_element_radius(elem as ElementSymbol)}
-                  oninput={(event) =>
-                  update_element_radius(
-                    elem as ElementSymbol,
-                    (event.target as HTMLInputElement).value,
-                  )}
+                  oninput={(event) => {
+                    if (event.target instanceof HTMLInputElement) {
+                      update_element_radius(
+                        elem as ElementSymbol,
+                        event.target.value,
+                      )
+                    }
+                  }}
                 />
                 <span class="unit">Å</span>
               </label>

package/dist/structure/AtomLegend.svelte.d.ts

@@ -29,6 +29,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
         structure?: AnyStructure | null;
     }]>;
 };
-declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "atom_color_config" | "labels" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides">;
+declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides">;
 type AtomLegend = ReturnType<typeof AtomLegend>;
 export default AtomLegend;

package/dist/structure/Bond.svelte

@@ -1,11 +1,21 @@
-<script lang="ts">import { T } from '@threlte/core';
-import { Color, InstancedBufferAttribute, Matrix4, ShaderMaterial } from 'three';
-let { group, saturation = 0.5, brightness = 0.7 } = $props();
-let mesh = $state();
-// Reusable buffers to avoid reallocation on every update
-let colors_start = new Float32Array(0);
-let colors_end = new Float32Array(0);
-const vertex_shader = `
+<script lang="ts">
+  import type { BondGroupWithGradients } from './'
+  import { T } from '@threlte/core'
+  import type { InstancedMesh } from 'three'
+  import { Color, InstancedBufferAttribute, Matrix4, ShaderMaterial } from 'three'
+
+  let { group, saturation = 0.5, brightness = 0.7 }: {
+    group: BondGroupWithGradients
+    saturation?: number
+    brightness?: number
+  } = $props()
+
+  let mesh: InstancedMesh | undefined = $state()
+  // Reusable buffers to avoid reallocation on every update
+  let colors_start = new Float32Array(0)
+  let colors_end = new Float32Array(0)
+
+  const vertex_shader = `
     attribute vec3 instanceColorStart;
     attribute vec3 instanceColorEnd;
     varying vec3 vColorStart;
@@ -20,8 +30,9 @@ const vertex_shader = `
       vNormal = normalize(normalMatrix * normal);
       gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
     }
-  `;
-const fragment_shader = `
+  `
+
+  const fragment_shader = `
     uniform float ambientIntensity;
     uniform float directionalIntensity;
     uniform float saturation;
@@ -53,57 +64,72 @@ const fragment_shader = `
 
       gl_FragColor = vec4(linearTosRGB(final_color), 1.0);
     }
-  `;
-function set_color_buffer(buffer, idx, color, temp_color) {
-    temp_color.set(color).convertSRGBToLinear();
-    buffer[idx * 3] = temp_color.r;
-    buffer[idx * 3 + 1] = temp_color.g;
-    buffer[idx * 3 + 2] = temp_color.b;
-}
-$effect(() => {
-    if (!mesh)
-        return;
-    const count = group.instances.length;
-    const matrix = new Matrix4();
-    const temp_color = new Color();
+  `
+
+  function set_color_buffer(
+    buffer: Float32Array,
+    idx: number,
+    color: string,
+    temp_color: Color,
+  ) {
+    temp_color.set(color).convertSRGBToLinear()
+    buffer[idx * 3] = temp_color.r
+    buffer[idx * 3 + 1] = temp_color.g
+    buffer[idx * 3 + 2] = temp_color.b
+  }
+
+  $effect(() => {
+    if (!mesh) return
+
+    const count = group.instances.length
+    const matrix = new Matrix4()
+    const temp_color = new Color()
+
     // Reallocate buffers if instance count changed
     if (colors_start.length !== count * 3) {
-        colors_start = new Float32Array(count * 3);
-        colors_end = new Float32Array(count * 3);
+      colors_start = new Float32Array(count * 3)
+      colors_end = new Float32Array(count * 3)
     }
+
     // Update instance matrices and colors
     for (let idx = 0; idx < count; idx++) {
-        const instance = group.instances[idx];
-        matrix.fromArray(instance.matrix);
-        mesh.setMatrixAt(idx, matrix);
-        set_color_buffer(colors_start, idx, instance.color_start, temp_color);
-        set_color_buffer(colors_end, idx, instance.color_end, temp_color);
+      const instance = group.instances[idx]
+      matrix.fromArray(instance.matrix)
+      mesh.setMatrixAt(idx, matrix)
+      set_color_buffer(colors_start, idx, instance.color_start, temp_color)
+      set_color_buffer(colors_end, idx, instance.color_end, temp_color)
     }
-    mesh.instanceMatrix.needsUpdate = true;
+
+    mesh.instanceMatrix.needsUpdate = true
+
     // Update geometry color attributes
-    const { geometry } = mesh;
-    for (const [name, buffer] of [
+    const { geometry } = mesh
+    for (
+      const [name, buffer] of [
         [`instanceColorStart`, colors_start],
         [`instanceColorEnd`, colors_end],
-    ]) {
-        const existing = geometry.getAttribute(name);
-        if (existing?.array === buffer)
-            existing.needsUpdate = true;
-        else
-            geometry.setAttribute(name, new InstancedBufferAttribute(buffer, 3));
+      ] as const
+    ) {
+      const existing = geometry.getAttribute(name)
+      if (existing?.array === buffer) existing.needsUpdate = true
+      else geometry.setAttribute(name, new InstancedBufferAttribute(buffer, 3))
     }
-    mesh.count = count;
-});
-let shader_material = $derived(new ShaderMaterial({
-    vertexShader: vertex_shader,
-    fragmentShader: fragment_shader,
-    uniforms: {
+
+    mesh.count = count
+  })
+
+  let shader_material = $derived(
+    new ShaderMaterial({
+      vertexShader: vertex_shader,
+      fragmentShader: fragment_shader,
+      uniforms: {
         ambientIntensity: { value: group.ambient_light ?? 0.7 },
         directionalIntensity: { value: group.directional_light ?? 0.3 },
         saturation: { value: saturation },
         brightness: { value: brightness },
-    },
-}));
+      },
+    }),
+  )
 </script>
 
 <T.InstancedMesh

package/dist/structure/CanvasTooltip.svelte

@@ -1,5 +1,13 @@
-<script lang="ts">import { HTML } from '@threlte/extras';
-let { position, children, ...rest } = $props();
+<script lang="ts">
+  import type { Vec3 } from '../math'
+    import { HTML } from '@threlte/extras'
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+
+    let { position, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+      position: Vec3
+      children: Snippet<[{ position: Vec3 }]>
+    } = $props()
 </script>
 
 <HTML {position} pointerEvents="none">