matterviz 0.3.1 → 0.3.3

package/dist/structure/CellSelect.svelte

@@ -1,42 +1,85 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import Spinner from '../feedback/Spinner.svelte';
-import { is_valid_supercell_input } from './supercell';
-import { click_outside, tooltip } from 'svelte-multiselect/attachments';
-import { fade } from 'svelte/transition';
-let { supercell_scaling = $bindable(`1x1x1`), cell_type = $bindable(`original`), sym_data = null, loading = $bindable(false), direction = `down`, align = `right`, } = $props();
-let menu_open = $state(false);
-let input_value = $state(supercell_scaling);
-let input_valid = $derived(is_valid_supercell_input(input_value));
-const supercell_presets = [`1x1x1`, `2x2x2`, `3x3x3`, `2x2x1`, `3x3x1`, `2x1x1`];
-// Always show all 3 cell types - Prim/Conv disabled without sym_data
-const cell_types = [`original`, `primitive`, `conventional`];
-const cell_labels = {
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import Spinner from '../feedback/Spinner.svelte'
+  import { is_valid_supercell_input } from './supercell'
+  import type { CellType } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import { click_outside, tooltip } from 'svelte-multiselect/attachments'
+  import { fade } from 'svelte/transition'
+
+  let {
+    supercell_scaling = $bindable(`1x1x1`),
+    cell_type = $bindable(`original`),
+    sym_data = null,
+    loading = $bindable(false),
+    direction = `down`,
+    align = `right`,
+  }: {
+    supercell_scaling: string
+    cell_type?: CellType
+    sym_data?: MoyoDataset | null
+    loading?: boolean
+    direction?: `up` | `down`
+    align?: `left` | `right`
+  } = $props()
+
+  let menu_open = $state(false)
+  let input_value = $state(supercell_scaling)
+  let input_valid = $derived(is_valid_supercell_input(input_value))
+
+  const supercell_presets = [`1x1x1`, `2x2x2`, `3x3x3`, `2x2x1`, `3x3x1`, `2x1x1`]
+
+  // Always show all 3 cell types - Prim/Conv disabled without sym_data
+  const cell_types: CellType[] = [`original`, `primitive`, `conventional`]
+  const cell_labels: Record<CellType, string> = {
     original: `Orig`,
     primitive: `Prim`,
     conventional: `Conv`,
-};
-const cell_tooltips = {
+  }
+  const cell_tooltips: Record<CellType, string> = {
     original: `Original unit cell (as provided)`,
     primitive: `Primitive cell (smallest repeating unit)`,
     conventional: `Conventional cell (standardized representation)`,
-};
-function apply_preset(preset) {
-    supercell_scaling = preset;
-    input_value = preset;
-    menu_open = false;
-}
-function handle_input_submit() {
+  }
+  const hair_space = `\u200A`
+
+  const format_supercell_label = (supercell_value: string): string =>
+    supercell_value.replaceAll(`x`, `${hair_space}x${hair_space}`)
+
+  function apply_preset(preset: string) {
+    supercell_scaling = preset
+    input_value = preset
+    menu_open = false
+  }
+
+  function handle_input_submit() {
     if (input_valid && input_value !== supercell_scaling) {
-        supercell_scaling = input_value;
-        menu_open = false;
+      supercell_scaling = input_value
+      menu_open = false
     }
-}
-// Sync input value when external prop changes
-$effect(() => {
+  }
+
+  function handle_focus_out(event: FocusEvent) {
+    const next_target = event.relatedTarget
+    const current_target = event.currentTarget
+    if (
+      !(current_target instanceof Node) ||
+      !(next_target instanceof Node) ||
+      !current_target.contains(next_target)
+    ) menu_open = false
+  }
+
+  function handle_key_down(event: KeyboardEvent, submit_on_enter: boolean = false) {
+    if (event.key === `Escape`) menu_open = false
+    if (submit_on_enter && event.key === `Enter`) handle_input_submit()
+  }
+
+  // Sync input value when external prop changes
+  $effect(() => {
     if (!menu_open && supercell_scaling && supercell_scaling !== input_value) {
-        input_value = supercell_scaling;
+      input_value = supercell_scaling
     }
-});
+  })
 </script>
 
 <div
@@ -46,10 +89,12 @@ $effect(() => {
   onmouseenter={() => (menu_open = true)}
   onmouseleave={() => (menu_open = false)}
   onfocusin={() => (menu_open = true)}
+  onfocusout={handle_focus_out}
 >
   <button
     type="button"
     onclick={() => (menu_open = !menu_open)}
+    onkeydown={handle_key_down}
     class="toggle-btn"
     class:active={menu_open}
     aria-expanded={menu_open}
@@ -60,7 +105,9 @@ $effect(() => {
         style="--spinner-border-width: 2px; --spinner-size: 1em; --spinner-margin: 0; display: inline-block; vertical-align: middle"
       />
     {:else}
-      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{supercell_scaling}
+      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{
+        format_supercell_label(supercell_scaling)
+      }
     {/if}
   </button>
 
@@ -101,7 +148,7 @@ $effect(() => {
             class:selected={supercell_scaling === preset}
             onclick={() => apply_preset(preset)}
           >
-            {preset}
+            {format_supercell_label(preset)}
           </button>
         {/each}
       </div>
@@ -113,7 +160,7 @@ $effect(() => {
           bind:value={input_value}
           placeholder="e.g. 2x2x2"
           class:invalid={!input_valid}
-          onkeydown={(event) => event.key === `Enter` && handle_input_submit()}
+          onkeydown={(event) => handle_key_down(event, true)}
         />
         <button
           class="apply-btn"
@@ -131,27 +178,47 @@ $effect(() => {
 <style>
   .cell-select {
     position: relative;
-    font-size: var(--struct-legend-font, clamp(9pt, 3.5cqmin, 12pt));
+    font-size: inherit;
+    align-self: center;
+    --cell-select-accent: var(--accent-color, light-dark(#2563eb, #60a5fa));
+    --cell-select-surface: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
+    --cell-select-border: var(
+      --border-color,
+      light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.25))
+    );
   }
   .toggle-btn {
     padding: var(--struct-legend-padding, 0 4pt);
     line-height: var(--struct-legend-line-height, 1.3);
     vertical-align: middle;
+    color: var(--text-color);
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius, 3pt);
+    transition: background 0.15s ease;
+  }
+  @media (hover: hover) {
+    .toggle-btn:hover {
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
+    }
   }
   .dropdown {
     position: absolute;
     top: 100%;
     right: 0;
     margin-top: 2px;
-    background: var(--surface-bg, #222);
-    padding: 5px;
+    background: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
+    padding: 6px;
     border-radius: var(--struct-border-radius, var(--border-radius, 3pt));
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 5px;
     z-index: 100;
-    min-width: 95px;
+    min-width: 118px;
   }
   /* Invisible bridge to prevent menu closing when moving mouse from toggle to dropdown */
   .dropdown::before {
@@ -180,26 +247,41 @@ $effect(() => {
   /* Cell type row - compact buttons with minimal padding */
   .cell-type-row {
     display: flex;
-    gap: 1px;
-    padding-bottom: 3px;
-    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+    gap: 3px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.3));
   }
   .cell-type-btn {
     flex: 1;
-    padding: 1px 0;
+    padding: 2px 6px;
     font-size: 0.9em;
+    color: var(--text-color);
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
     transition: background 0.15s ease;
     white-space: nowrap;
   }
   @media (hover: hover) {
     .cell-type-btn:hover:not(.disabled) {
-      background: rgba(255, 255, 255, 0.15);
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
     }
   }
   .cell-type-btn.selected {
-    background: rgba(0, 255, 255, 0.4);
-    border-color: rgba(0, 255, 255, 0.5);
+    color: var(--cell-select-accent);
+    background: color-mix(
+      in srgb,
+      var(--cell-select-accent) 18%,
+      var(--cell-select-surface)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--cell-select-accent) 45%,
+      var(--cell-select-border)
+    );
   }
   .cell-type-btn.disabled {
     opacity: 0.4;
@@ -215,16 +297,31 @@ $effect(() => {
   .preset-btn {
     padding: 2px 4px;
     font-size: 0.9em;
+    color: var(--text-color);
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
   }
   @media (hover: hover) {
     .preset-btn:hover {
-      background: rgba(255, 255, 255, 0.15);
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
     }
   }
   .preset-btn.selected {
-    border-color: rgba(0, 255, 255, 0.5);
-    background: rgba(0, 255, 255, 0.4);
+    color: var(--cell-select-accent);
+    background: color-mix(
+      in srgb,
+      var(--cell-select-accent) 18%,
+      var(--cell-select-surface)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--cell-select-accent) 45%,
+      var(--cell-select-border)
+    );
   }
 
   /* Custom input row */
@@ -234,10 +331,10 @@ $effect(() => {
     gap: 4px;
   }
   .custom-input-row input {
-    max-width: 50px;
-    padding: 2px 4px;
-    margin-inline: 6px 0;
-    font-size: 0.9em;
+    max-width: 60px;
+    min-height: 0;
+    padding: 1px 4px;
+    font-size: 0.85em;
   }
   .custom-input-row input.invalid {
     border-color: rgba(255, 100, 100, 0.6);

package/dist/structure/Cylinder.svelte

@@ -1,26 +1,42 @@
-<script lang="ts">import { T } from '@threlte/core';
-import { Euler, Quaternion, Vector3 } from 'three';
-let { from, to, color = `#808080`, thickness = 0.1 } = $props();
-let from_vec = $derived(new Vector3(...from));
-let to_vec = $derived(new Vector3(...to));
-let { position, rotation, height } = $derived(calc_bond(from_vec, to_vec));
-function calc_bond(from_vec, to_vec) {
+<script lang="ts">
+  import type { Vec3 } from '../math'
+  import { T } from '@threlte/core'
+  import { Euler, Quaternion, Vector3 } from 'three'
+
+  let { from, to, color = `#808080`, thickness = 0.1 }: {
+    from: Vec3
+    to: Vec3
+    color?: string
+    thickness?: number
+  } = $props()
+
+  let from_vec = $derived(new Vector3(...from))
+  let to_vec = $derived(new Vector3(...to))
+  let { position, rotation, height } = $derived(calc_bond(from_vec, to_vec))
+
+  function calc_bond(
+    from_vec: Vector3,
+    to_vec: Vector3,
+  ): { position: Vec3; rotation: Vec3; height: number } {
     // find the axis of the cylinder
-    const delta_vec = to_vec.clone().sub(from_vec);
+    const delta_vec = to_vec.clone().sub(from_vec)
     // length of the cylinder
-    const height = delta_vec.length();
+    const height = delta_vec.length()
     // calculate position (midpoint between from and to)
     const position = from_vec
-        .clone()
-        .add(delta_vec.multiplyScalar(0.5))
-        .toArray();
+      .clone()
+      .add(delta_vec.multiplyScalar(0.5))
+      .toArray() as Vec3
     // calculate rotation
-    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), delta_vec.normalize());
-    const euler = new Euler().setFromQuaternion(quaternion);
-    const rotation = [euler.x, euler.y, euler.z];
+    const quaternion = new Quaternion().setFromUnitVectors(
+      new Vector3(0, 1, 0),
+      delta_vec.normalize(),
+    )
+    const euler = new Euler().setFromQuaternion(quaternion)
+    const rotation: Vec3 = [euler.x, euler.y, euler.z]
     // return results
-    return { height, position, rotation };
-}
+    return { height, position, rotation }
+  }
 </script>
 
 <T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>

package/dist/structure/Lattice.svelte

@@ -1,43 +1,98 @@
 <!-- Export default values for use in other components -->
-<script lang="ts">import { format_num } from '../labels';
-import * as math from '../math';
-import { DEFAULTS } from '../settings';
-import { CanvasTooltip } from './';
-import { T } from '@threlte/core';
-import { BoxGeometry, EdgesGeometry, Euler, Matrix4, Quaternion, Vector3, } from 'three';
-let { matrix = undefined, cell_edge_color = DEFAULTS.structure.cell_edge_color, cell_surface_color = DEFAULTS.structure.cell_surface_color, cell_edge_width = DEFAULTS.structure.cell_edge_width, cell_edge_opacity = DEFAULTS.structure.cell_edge_opacity, cell_surface_opacity = DEFAULTS.structure.cell_surface_opacity, show_cell_vectors = true, vector_colors = [`red`, `green`, `blue`], vector_origin = [-1, -1, -1], float_fmt = `.2f`, } = $props();
-let hovered_idx = $state(null); // track hovered vector
-let lattice_center = $derived(matrix
-    ? math.scale(math.add(...matrix), 0.5)
-    : [0, 0, 0]);
-// Extract line segments from EdgesGeometry for cylinder-based thick lines
-function get_edge_segments(edges_geometry) {
-    const positions = edges_geometry.getAttribute(`position`).array;
-    const segments = [];
+<script lang="ts">
+  import { format_num } from '../labels'
+  import type { Vec3 } from '../math'
+  import * as math from '../math'
+  import { DEFAULTS } from '../settings'
+  import { CanvasTooltip } from './'
+  import { T } from '@threlte/core'
+  import {
+    BoxGeometry,
+    EdgesGeometry,
+    Euler,
+    Matrix4,
+    Quaternion,
+    Vector3,
+  } from 'three'
+
+  let {
+    matrix = undefined,
+    cell_edge_color = DEFAULTS.structure.cell_edge_color,
+    cell_surface_color = DEFAULTS.structure.cell_surface_color,
+    cell_edge_width = DEFAULTS.structure.cell_edge_width,
+    cell_edge_opacity = DEFAULTS.structure.cell_edge_opacity,
+    cell_surface_opacity = DEFAULTS.structure.cell_surface_opacity,
+    show_cell_vectors = true,
+    vector_colors = [`red`, `green`, `blue`],
+    vector_origin = [-1, -1, -1] satisfies Vec3,
+    float_fmt = `.2f`,
+  }: {
+    matrix?: math.Matrix3x3
+    cell_edge_color?: string
+    cell_surface_color?: string
+    cell_edge_width?: number // thickness of the cell edges
+    cell_edge_opacity?: number // opacity of the cell edges
+    cell_surface_opacity?: number // opacity of the cell surfaces
+    show_cell_vectors?: boolean // whether to show the lattice vectors
+    vector_colors?: readonly [string, string, string] // lattice vector colors
+    vector_origin?: Vec3 // lattice vector origin (all arrows start from this point)
+    float_fmt?: string
+  } = $props()
+
+  let hovered_idx = $state<number | null>(null) // track hovered vector
+  let lattice_center = $derived(
+    matrix
+      ? (math.scale(math.add(...matrix), 0.5) satisfies Vec3)
+      : ([0, 0, 0] satisfies Vec3),
+  )
+
+  // Extract line segments from EdgesGeometry for cylinder-based thick lines
+  function get_edge_segments(edges_geometry: EdgesGeometry): [Vector3, Vector3][] {
+    const positions = edges_geometry.getAttribute(`position`).array as Float32Array
+    const segments: [Vector3, Vector3][] = []
+
     for (let idx = 0; idx < positions.length; idx += 6) {
-        const start = new Vector3(positions[idx + 0], positions[idx + 1], positions[idx + 2]);
-        const end = new Vector3(positions[idx + 3], positions[idx + 4], positions[idx + 5]);
-        segments.push([start, end]);
+      const start = new Vector3(
+        positions[idx + 0],
+        positions[idx + 1],
+        positions[idx + 2],
+      )
+      const end = new Vector3(
+        positions[idx + 3],
+        positions[idx + 4],
+        positions[idx + 5],
+      )
+      segments.push([start, end])
     }
-    return segments;
-}
-// Calculate cylinder transform for a line segment
-function get_cylinder_transform(start, end) {
-    const direction = end.clone().sub(start);
-    const length = direction.length();
-    const center = start.clone().add(end).multiplyScalar(0.5);
+
+    return segments
+  }
+
+  // Calculate cylinder transform for a line segment
+  function get_cylinder_transform(
+    start: Vector3,
+    end: Vector3,
+  ): { position: Vec3; rotation: Vec3; length: number } {
+    const direction = end.clone().sub(start)
+    const length = direction.length()
+    const center = start.clone().add(end).multiplyScalar(0.5)
+
     if (length === 0) { // Zero-length: no rotation; render a degenerate cylinder
-        return { position: center.toArray(), rotation: [0, 0, 0], length };
+      return { position: center.toArray(), rotation: [0, 0, 0], length }
     }
     // Calculate rotation to align cylinder with the line (zero-length guarded above)
-    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), direction.normalize());
-    const euler = new Euler().setFromQuaternion(quaternion);
+    const quaternion = new Quaternion().setFromUnitVectors(
+      new Vector3(0, 1, 0),
+      direction.normalize(),
+    )
+    const euler = new Euler().setFromQuaternion(quaternion)
+
     return {
-        position: center.toArray(),
-        rotation: euler.toArray().slice(0, 3),
-        length,
-    };
-}
+      position: center.toArray(),
+      rotation: euler.toArray().slice(0, 3) as Vec3,
+      length,
+    }
+  }
 </script>
 
 {#if matrix}