matterviz 0.1.12 → 0.1.13

package/dist/structure/StructureScene.svelte

@@ -3,18 +3,17 @@ import { format_num } from '../labels';
 import * as math from '../math';
 import { DEFAULTS } from '../settings';
 import { colors } from '../state.svelte';
-import { Bond, get_center_of_mass, Lattice, Vector } from './';
+import { Cylinder, get_center_of_mass, Lattice, Vector } from './';
 import { angle_between_vectors, displacement_pbc, distance_pbc, MAX_SELECTED_SITES, } from './measure';
-import { T } from '@threlte/core';
-import * as Extras from '@threlte/extras';
+import { T, useThrelte } from '@threlte/core';
+import * as extras from '@threlte/extras';
 import { untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
+import Bond from './Bond.svelte';
 import { BONDING_STRATEGIES } from './bonding';
 import { CanvasTooltip } from './index';
-// Add pulsating animation for selected sites
 let pulse_time = $state(0);
 let pulse_opacity = $derived(0.15 + 0.25 * Math.sin(pulse_time * 5));
-// Update pulse time for animation
 $effect(() => {
     if (!selected_sites?.length && !active_sites?.length)
         return;
@@ -31,15 +30,18 @@ $effect(() => {
     frame_id = requestAnimationFrame(animate);
     return () => cancelAnimationFrame(frame_id);
 });
-let { structure = undefined, atom_radius = DEFAULTS.structure.atom_radius, same_size_atoms = false, camera_position = DEFAULTS.structure.camera_position, camera_projection = DEFAULTS.structure.camera_projection, rotation_damping = DEFAULTS.structure.rotation_damping, max_zoom = DEFAULTS.structure.max_zoom, min_zoom = DEFAULTS.structure.min_zoom, zoom_speed = DEFAULTS.structure.zoom_speed, pan_speed = DEFAULTS.structure.pan_speed, show_atoms = DEFAULTS.structure.show_atoms, show_bonds = DEFAULTS.structure.show_bonds, show_site_labels = DEFAULTS.structure.show_site_labels, show_site_indices = DEFAULTS.structure.show_site_indices, site_label_size = DEFAULTS.structure.site_label_size, site_label_offset = $bindable(DEFAULTS.structure.site_label_offset), site_label_bg_color = `color-mix(in srgb, #000000 0%, transparent)`, site_label_color = `#ffffff`, site_label_padding = 3, show_force_vectors = DEFAULTS.structure.show_force_vectors, force_scale = DEFAULTS.structure.force_scale, force_color = DEFAULTS.structure.force_color, gizmo = DEFAULTS.structure.show_gizmo, hovered_idx = $bindable(null), hovered_site = $bindable(null), float_fmt = `.3~f`, auto_rotate = DEFAULTS.structure.auto_rotate, bond_thickness = DEFAULTS.structure.bond_thickness, bond_color = DEFAULTS.structure.bond_color, bonding_strategy = DEFAULTS.structure.bonding_strategy, bonding_options = {}, fov = DEFAULTS.structure.fov, initial_zoom = DEFAULTS.structure.initial_zoom, ambient_light = DEFAULTS.structure.ambient_light, directional_light = DEFAULTS.structure.directional_light, sphere_segments = DEFAULTS.structure.sphere_segments, lattice_props = {}, atom_label, camera_is_moving = $bindable(false), orbit_controls = $bindable(undefined), width = 0, height = 0, measure_mode = `distance`, selected_sites = $bindable([]), measured_sites = $bindable([]), selection_highlight_color = `#6cf0ff`, 
+let { structure = undefined, atom_radius = DEFAULTS.structure.atom_radius, same_size_atoms = false, camera_position = DEFAULTS.structure.camera_position, camera_projection = DEFAULTS.structure.camera_projection, rotation_damping = DEFAULTS.structure.rotation_damping, max_zoom = DEFAULTS.structure.max_zoom, min_zoom = DEFAULTS.structure.min_zoom, zoom_speed = DEFAULTS.structure.zoom_speed, pan_speed = DEFAULTS.structure.pan_speed, show_atoms = DEFAULTS.structure.show_atoms, show_bonds = DEFAULTS.structure.show_bonds, show_site_labels = DEFAULTS.structure.show_site_labels, show_site_indices = DEFAULTS.structure.show_site_indices, site_label_size = DEFAULTS.structure.site_label_size, site_label_offset = $bindable(DEFAULTS.structure.site_label_offset), site_label_bg_color = `color-mix(in srgb, #000000 0%, transparent)`, site_label_color = `#ffffff`, site_label_padding = 3, show_force_vectors = DEFAULTS.structure.show_force_vectors, force_scale = DEFAULTS.structure.force_scale, force_color = DEFAULTS.structure.force_color, gizmo = DEFAULTS.structure.show_gizmo, hovered_idx = $bindable(null), hovered_site = $bindable(null), float_fmt = `.3~f`, auto_rotate = DEFAULTS.structure.auto_rotate, bond_thickness = DEFAULTS.structure.bond_thickness, bond_color = DEFAULTS.structure.bond_color, bonding_strategy = DEFAULTS.structure.bonding_strategy, bonding_options = {}, fov = DEFAULTS.structure.fov, initial_zoom = DEFAULTS.structure.initial_zoom, ambient_light = DEFAULTS.structure.ambient_light, directional_light = DEFAULTS.structure.directional_light, sphere_segments = DEFAULTS.structure.sphere_segments, lattice_props = {}, atom_label, camera_is_moving = $bindable(false), width = 0, height = 0, measure_mode = `distance`, selected_sites = $bindable([]), measured_sites = $bindable([]), selection_highlight_color = `#6cf0ff`, 
 // Active highlight group with different color
-active_sites = $bindable([]), active_highlight_color = `var(--struct-active-highlight-color, #2563eb)`, rotation = DEFAULTS.structure.rotation, } = $props();
+active_sites = $bindable([]), active_highlight_color = `var(--struct-active-highlight-color, #2563eb)`, rotation = DEFAULTS.structure.rotation, scene = $bindable(undefined), camera = $bindable(undefined), hidden_elements = $bindable(new Set()), } = $props();
+const threlte = useThrelte();
+$effect(() => {
+    scene = threlte.scene;
+    camera = threlte.camera.current;
+});
 let bond_pairs = $state([]);
 let active_tooltip = $state(null);
-let hovered_bond_data = $state(null);
 function toggle_selection(site_index, evt) {
     evt?.stopPropagation?.();
-    // Check if adding this site would exceed the soft cap
     if (!measured_sites.includes(site_index) &&
         measured_sites.length >= MAX_SELECTED_SITES) {
         console.warn(`Selection size limit reached (${MAX_SELECTED_SITES}). Deselect some sites first.`);
@@ -48,12 +50,10 @@ function toggle_selection(site_index, evt) {
     measured_sites = measured_sites.includes(site_index)
         ? measured_sites.filter((idx) => idx !== site_index)
         : [...measured_sites, site_index];
-    // keep selected_sites in sync with user clicks
     selected_sites = selected_sites.includes(site_index)
         ? selected_sites.filter((idx) => idx !== site_index)
         : [...selected_sites, site_index];
 }
-// Keep measured site selection valid across structure changes (new structure might have fewer sites)
 $effect(() => {
     const count = structure?.sites?.length ?? 0;
     if (count <= 0) {
@@ -64,25 +64,21 @@ $effect(() => {
         measured_sites = measured_sites.filter((idx) => idx >= 0 && idx < count);
     });
 });
-Extras.interactivity();
+extras.interactivity();
 $effect.pre(() => {
     hovered_site = structure?.sites?.[hovered_idx ?? -1] ?? null;
 });
 let lattice = $derived(structure && `lattice` in structure ? structure.lattice : null);
-// Get rotation target: cell center for crystalline structures, center of mass for molecular systems
 let rotation_target = $derived(lattice
     ? math.scale(math.add(...lattice.matrix), 0.5)
     : structure
         ? get_center_of_mass(structure)
         : [0, 0, 0]);
-// Calculate structure size for camera setup
 let structure_size = $derived(lattice ? (lattice.a + lattice.b + lattice.c) / 2 : 10);
-// Persisted zoom; recompute only on viewport changes
 let computed_zoom = $state(initial_zoom);
 $effect(() => {
     if (!(width > 0) || !(height > 0))
         return;
-    // Avoid depending on structure/structure_size so trajectories don't retrigger zoom
     const structure_max_dim = Math.max(1, untrack(() => structure_size));
     const viewer_min_dim = Math.min(width, height);
     const scale_factor = viewer_min_dim / (structure_max_dim * 50); // 50px per unit
@@ -94,13 +90,12 @@ $effect(() => {
     computed_zoom = new_zoom;
 });
 $effect.pre(() => {
-    // Simple initial camera auto-position: proportional to structure size and fov
     if (camera_position.every((v) => v === 0) && structure) {
         const distance = Math.max(1, structure_size) * (60 / fov);
         camera_position = [distance, distance * 0.3, distance * 0.8];
     }
 });
-$effect.pre(() => {
+$effect(() => {
     if (structure && show_bonds !== `never`) {
         // Determine if we should show bonds based on the setting and structure type
         const should_show_bonds = show_bonds === `always` ||
@@ -115,23 +110,15 @@ $effect.pre(() => {
     else
         bond_pairs = [];
 });
-// Update orbit controls when switching between camera projections to ensure proper centering
-$effect(() => {
-    if (orbit_controls && camera_projection) {
-        queueMicrotask(() => {
-            orbit_controls.target.set(...rotation_target); // Structure is positioned with rotation_target as the center
-            orbit_controls.update();
-        });
-    }
-});
 let atom_data = $derived.by(() => {
     if (!show_atoms || !structure?.sites)
         return [];
-    // Build atom data with partial occupancy handling
     return structure.sites.flatMap((site, site_idx) => {
         const radius = same_size_atoms ? atom_radius : site.species.reduce((sum, spec) => sum + spec.occu * (atomic_radii[spec.element] ?? 1), 0) * atom_radius;
         let start_angle = 0;
-        return site.species.map(({ element, occu }) => ({
+        return site.species
+            .filter(({ element }) => !hidden_elements?.has(element))
+            .map(({ element, occu }) => ({
             site_idx,
             element,
             occupancy: occu,
@@ -144,6 +131,42 @@ let atom_data = $derived.by(() => {
         }));
     });
 });
+let filtered_bond_pairs = $derived.by(() => {
+    if (!structure?.sites || hidden_elements.size === 0)
+        return bond_pairs;
+    return bond_pairs.filter((bond) => {
+        const site_1 = structure.sites[bond.site_idx_1];
+        const site_2 = structure.sites[bond.site_idx_2];
+        const site_1_visible = site_1?.species.some(({ element }) => !hidden_elements.has(element));
+        const site_2_visible = site_2?.species.some(({ element }) => !hidden_elements.has(element));
+        return site_1_visible && site_2_visible;
+    });
+});
+let instanced_bond_groups = $derived.by(() => {
+    if (!structure?.sites || filtered_bond_pairs.length === 0)
+        return [];
+    const group = {
+        thickness: bond_thickness,
+        ambient_light,
+        directional_light,
+        instances: [],
+    };
+    for (const bond_data of filtered_bond_pairs) {
+        const site_a = structure.sites[bond_data.site_idx_1];
+        const site_b = structure.sites[bond_data.site_idx_2];
+        const get_majority_color = (site) => {
+            if (!site?.species || site.species.length === 0)
+                return bond_color;
+            const majority_species = site.species.reduce((max, spec) => spec.occu > max.occu ? spec : max);
+            return colors.element?.[majority_species.element] || bond_color;
+        };
+        const color_start = get_majority_color(site_a);
+        const color_end = get_majority_color(site_b);
+        const instance = { matrix: bond_data.transform_matrix, color_start, color_end };
+        group.instances.push(instance);
+    }
+    return group.instances.length > 0 ? [group] : [];
+});
 let radius_by_site_idx = $derived.by(() => {
     const map = new SvelteMap();
     for (const atom of atom_data) {
@@ -179,7 +202,6 @@ let instanced_atom_groups = $derived(Object.values(atom_data
     bucket.atoms.push(atom);
     return groups;
 }, {})));
-// Pre-calculate unique site atoms for labeling
 let unique_instanced_atoms = $derived(Object.values(instanced_atom_groups
     .flatMap((group) => group.atoms)
     .reduce((acc, atom) => {
@@ -209,7 +231,6 @@ let gizmo_props = $derived.by(() => {
     };
 });
 let orbit_controls_props = $derived({
-    'bind:ref': orbit_controls,
     position: [0, 0, 0],
     enableZoom: zoom_speed > 0,
     zoomSpeed: camera_projection === `orthographic` ? zoom_speed * 2 : zoom_speed,
@@ -230,7 +251,6 @@ let orbit_controls_props = $derived({
         camera_is_moving = false;
     },
 });
-// Theme-aware measurement line color from CSS variable
 let measure_line_color = $derived.by(() => {
     if (typeof window === `undefined`)
         return;
@@ -240,10 +260,18 @@ let measure_line_color = $derived.by(() => {
 });
 </script>
 
+{#snippet bond_instanced_mesh_snippet(
+  group: ComponentProps<typeof Bond>[`group`],
+)}
+  {#key group.instances.length}
+    <Bond {group} />
+  {/key}
+{/snippet}
+
 {#snippet site_label_snippet(position: Vec3, site_idx: number)}
   {@const site = structure!.sites[site_idx]}
   {@const pos = math.add(position, site_label_offset)}
-  <Extras.HTML center position={pos}>
+  <extras.HTML center position={pos}>
     {#if atom_label}
       {@render atom_label(site, site_idx)}
     {:else}
@@ -281,14 +309,14 @@ let measure_line_color = $derived.by(() => {
         {/if}
       </span>
     {/if}
-  </Extras.HTML>
+  </extras.HTML>
 {/snippet}
 
 {#if camera_projection === `perspective`}
   <T.PerspectiveCamera makeDefault position={camera_position} {fov}>
-    <Extras.OrbitControls {...orbit_controls_props}>
-      {#if gizmo}<Extras.Gizmo {...gizmo_props} />{/if}
-    </Extras.OrbitControls>
+    <extras.OrbitControls {...orbit_controls_props}>
+      {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
+    </extras.OrbitControls>
   </T.PerspectiveCamera>
 {:else}
   <T.OrthographicCamera
@@ -297,9 +325,9 @@ let measure_line_color = $derived.by(() => {
     zoom={computed_zoom}
     near={-100}
   >
-    <Extras.OrbitControls {...orbit_controls_props}>
-      {#if gizmo}<Extras.Gizmo {...gizmo_props} />{/if}
-    </Extras.OrbitControls>
+    <extras.OrbitControls {...orbit_controls_props}>
+      {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
+    </extras.OrbitControls>
   </T.OrthographicCamera>
 {/if}
 
@@ -313,20 +341,19 @@ let measure_line_color = $derived.by(() => {
       {#if show_atoms}
         <!-- Instanced rendering for full occupancy atoms -->
         {#each instanced_atom_groups as group (group.element + group.radius)}
-          <Extras.InstancedMesh
+          <extras.InstancedMesh
             key="{group.element}-{group.radius}-{group.atoms.length}"
             range={group.atoms.length}
           >
             <T.SphereGeometry args={[0.5, sphere_segments, sphere_segments]} />
             <T.MeshStandardMaterial color={group.color} />
             {#each group.atoms as atom (atom.site_idx)}
-              <Extras.Instance
+              <extras.Instance
                 position={atom.position}
                 scale={atom.radius}
                 onpointerenter={() => {
                   hovered_idx = atom.site_idx
                   active_tooltip = `atom`
-                  hovered_bond_data = null
                 }}
                 onpointerleave={() => {
                   hovered_idx = null
@@ -338,7 +365,7 @@ let measure_line_color = $derived.by(() => {
                 }}
               />
             {/each}
-          </Extras.InstancedMesh>
+          </extras.InstancedMesh>
         {/each}
 
         <!-- Regular rendering for partial occupancy atoms -->
@@ -352,7 +379,6 @@ let measure_line_color = $derived.by(() => {
             onpointerenter={() => {
               hovered_idx = atom.site_idx
               active_tooltip = `atom`
-              hovered_bond_data = null
             }}
             onpointerleave={() => {
               hovered_idx = null
@@ -409,34 +435,10 @@ let measure_line_color = $derived.by(() => {
         {/each}
       {/if}
 
-      {#if bond_pairs.length > 0}
-        {#each bond_pairs as bond_data (JSON.stringify(bond_data))}
-          {@const site_a = structure?.sites[bond_data.site_idx_1]}
-          {@const site_b = structure?.sites[bond_data.site_idx_2]}
-          {@const get_majority_color = (site: typeof site_a) => {
-          if (!site?.species || site.species.length === 0) return bond_color
-          // Find species with highest occupancy
-          const majority_species = site.species.reduce((max, spec) =>
-            spec.occu > max.occu ? spec : max
-          )
-          return colors.element?.[majority_species.element] || bond_color
-        }}
-          {@const from_color = get_majority_color(site_a)}
-          {@const to_color = get_majority_color(site_b)}
-          <Bond
-            from={bond_data.pos_1}
-            to={bond_data.pos_2}
-            thickness={bond_thickness}
-            {from_color}
-            {to_color}
-            color={bond_color}
-            {bond_data}
-            {bonding_strategy}
-            {active_tooltip}
-            {hovered_bond_data}
-            onbondhover={(data: BondPair | null) => hovered_bond_data = data}
-            ontooltipchange={(type: `atom` | `bond` | null) => active_tooltip = type}
-          />
+      <!-- Instanced bond rendering with gradient colors -->
+      {#if instanced_bond_groups.length > 0}
+        {#each instanced_bond_groups as group (group.thickness + group.instances.length)}
+          {@render bond_instanced_mesh_snippet(group)}
         {/each}
       {/if}
 
@@ -504,9 +506,9 @@ let measure_line_color = $derived.by(() => {
             <!-- shift selected site labels down to avoid overlapping regular site labels-->
             {@const selection_offset = math.add(site_label_offset, [0, -0.5, 0])}
             {@const pos = math.add(site.xyz, selection_offset) as Vec3}
-            <Extras.HTML center position={pos}>
+            <extras.HTML center position={pos}>
               <span class="selection-label">{loop_idx + 1}</span>
-            </Extras.HTML>
+            </extras.HTML>
           {/if}
         {/each}
       {/if}
@@ -558,7 +560,12 @@ let measure_line_color = $derived.by(() => {
               {@const site_j = structure.sites[idx_j]}
               {@const pos_i = site_i.xyz}
               {@const pos_j = site_j.xyz}
-              <Bond from={pos_i} to={pos_j} thickness={0.12} color={measure_line_color} />
+              <Cylinder
+                from={pos_i}
+                to={pos_j}
+                thickness={0.12}
+                color={measure_line_color}
+              />
               {@const midpoint = [
           (pos_i[0] + pos_j[0]) / 2,
           (pos_i[1] + pos_j[1]) / 2,
@@ -567,7 +574,7 @@ let measure_line_color = $derived.by(() => {
               {@const direct = math.euclidean_dist(pos_i, pos_j)}
               {@const pbc = lattice ? distance_pbc(pos_i, pos_j, lattice.matrix) : direct}
               {@const differ = lattice ? Math.abs(pbc - direct) > 1e-6 : false}
-              <Extras.HTML center position={midpoint}>
+              <extras.HTML center position={midpoint}>
                 <span class="measure-label">
                   {#if differ}
                     PBC: {format_num(pbc, float_fmt)} Å<br /><small>
@@ -576,7 +583,7 @@ let measure_line_color = $derived.by(() => {
                     {format_num(pbc, float_fmt)} Å
                   {/if}
                 </span>
-              </Extras.HTML>
+              </extras.HTML>
             {/each}
           {/each}
         {:else if measure_mode === `angle` && measured_sites.length >= 3}
@@ -600,39 +607,25 @@ let measure_line_color = $derived.by(() => {
                 {@const angle_deg = angle_between_vectors(v1, v2, `degrees`)}
                 {#if n1 > math.EPS && n2 > math.EPS}
                   <!-- draw rays from center to the two sites -->
-                  <Bond
+                  <Cylinder
                     from={center.xyz}
                     to={site_a.xyz}
                     thickness={0.05}
                     color={measure_line_color}
                   />
-                  <Bond
+                  <Cylinder
                     from={center.xyz}
                     to={site_b.xyz}
                     thickness={0.05}
                     color={measure_line_color}
                   />
-                  {@const bisector = [
-          v1[0] / n1 + v2[0] / n2,
-          v1[1] / n1 + v2[1] / n2,
-          v1[2] / n1 + v2[2] / n2,
-        ] as Vec3}
-                  {@const bis_norm =
-          Math.sqrt(bisector[0] ** 2 + bisector[1] ** 2 + bisector[2] ** 2) ||
-          1}
-                  {@const offset_dir = [
-          bisector[0] / bis_norm,
-          bisector[1] / bis_norm,
-          bisector[2] / bis_norm,
-        ] as Vec3}
-                  {@const label_pos = [
-          center.xyz[0] + offset_dir[0] * 0.6,
-          center.xyz[1] + offset_dir[1] * 0.6,
-          center.xyz[2] + offset_dir[2] * 0.6,
-        ] as Vec3}
-                  <Extras.HTML center position={label_pos}>
+                  {@const bisector = math.add(math.scale(v1, 1 / n1), math.scale(v2, 1 / n2))}
+                  {@const bis_norm = Math.hypot(...bisector) || 1}
+                  {@const offset_dir = math.scale(bisector, 1 / bis_norm)}
+                  {@const label_pos = math.add(center.xyz, math.scale(offset_dir, 0.6))}
+                  <extras.HTML center position={label_pos}>
                     <span class="measure-label">{format_num(angle_deg, float_fmt)}°</span>
-                  </Extras.HTML>
+                  </extras.HTML>
                 {/if}
               {/each}
             {/each}

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

@@ -1,19 +1,20 @@
-import type { AnyStructure, Site, Vec3 } from '..';
-import { type ShowBonds } from '../settings';
+import type { AnyStructure, ElementSymbol, Site, Vec3 } from '..';
+import { type CameraProjection, type ShowBonds } from '../settings';
 import { Lattice } from './';
-import * as Extras from '@threlte/extras';
+import * as extras from '@threlte/extras';
 import type { ComponentProps } from 'svelte';
 import { type Snippet } from 'svelte';
+import type { Camera, Scene } from 'three';
 import { type BondingStrategy } from './bonding';
-interface Props {
-    structure?: AnyStructure | undefined;
+type $$ComponentProps = {
+    structure?: AnyStructure;
     atom_radius?: number;
     same_size_atoms?: boolean;
     camera_position?: [x: number, y: number, z: number];
-    camera_projection?: `perspective` | `orthographic`;
+    camera_projection?: CameraProjection;
     rotation_damping?: number;
-    max_zoom?: number | undefined;
-    min_zoom?: number | undefined;
+    max_zoom?: number;
+    min_zoom?: number;
     zoom_speed?: number;
     pan_speed?: number;
     show_atoms?: boolean;
@@ -23,7 +24,7 @@ interface Props {
     show_force_vectors?: boolean;
     force_scale?: number;
     force_color?: string;
-    gizmo?: boolean | ComponentProps<typeof Extras.Gizmo>;
+    gizmo?: boolean | ComponentProps<typeof extras.Gizmo>;
     hovered_idx?: number | null;
     hovered_site?: Site | null;
     float_fmt?: string;
@@ -45,7 +46,6 @@ interface Props {
     site_label_color?: string;
     site_label_padding?: number;
     camera_is_moving?: boolean;
-    orbit_controls?: ComponentProps<typeof Extras.OrbitControls>[`ref`];
     width?: number;
     height?: number;
     measure_mode?: `distance` | `angle`;
@@ -55,7 +55,10 @@ interface Props {
     active_sites?: number[];
     active_highlight_color?: string;
     rotation?: Vec3;
-}
-declare const StructureScene: import("svelte").Component<Props, {}, "site_label_offset" | "selected_sites" | "measured_sites" | "hovered_idx" | "hovered_site" | "camera_is_moving" | "orbit_controls" | "active_sites">;
+    scene?: Scene;
+    camera?: Camera;
+    hidden_elements?: Set<ElementSymbol>;
+};
+declare const StructureScene: import("svelte").Component<$$ComponentProps, {}, "camera" | "site_label_offset" | "scene" | "selected_sites" | "measured_sites" | "hidden_elements" | "hovered_idx" | "hovered_site" | "camera_is_moving" | "active_sites">;
 type StructureScene = ReturnType<typeof StructureScene>;
 export default StructureScene;

package/dist/structure/Vector.svelte

@@ -3,37 +3,31 @@ import { DEFAULTS } from '../settings';
 import { T } from '@threlte/core';
 import { Euler, Quaternion, Vector3 } from 'three';
 let { position, vector, scale = DEFAULTS.structure.force_scale, color = DEFAULTS.structure.force_color, shaft_radius = DEFAULTS.structure.force_shaft_radius, arrow_head_radius = DEFAULTS.structure.force_arrow_head_radius, arrow_head_length = DEFAULTS.structure.force_arrow_head_length, ...rest } = $props();
-// Calculate vector magnitude and normalized direction
-let vector_magnitude = $derived(Math.hypot(...vector));
-let vector_direction = $derived(vector_magnitude > math.EPS
-    ? math.scale(vector, 1 / vector_magnitude)
-    : [0, 1, 0]);
-// Scaled vector length
-let vector_length = $derived(vector_magnitude * scale);
-let shaft_length = $derived(Math.max(0, vector_length - arrow_head_length * 0.5));
-// Calculate positions using math helpers
-let shaft_center = $derived(math.add(position, math.scale(vector_direction, shaft_length * 0.5)));
-let arrow_head_position = $derived(math.add(position, math.scale(vector_direction, shaft_length + arrow_head_length * 0.5)));
-// Calculate rotation to align Y-axis with vector direction
-let rotation = $derived.by(() => {
-    if (vector_magnitude < math.EPS)
-        return [0, 0, 0]; // Handle zero vector
-    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), new Vector3(...vector_direction).normalize());
-    const euler = new Euler().setFromQuaternion(quaternion);
-    return euler.toArray().slice(0, 3);
+const mag = $derived(Math.hypot(...vector));
+const dir = $derived(mag > math.EPS ? math.scale(vector, 1 / mag) : [0, 1, 0]);
+const vec_len = $derived(mag * scale);
+const head_len = $derived(arrow_head_length < 0 ? vec_len * -arrow_head_length : arrow_head_length);
+const shaft_len = $derived(Math.max(0, vec_len - head_len * 0.5));
+const shaft_r = $derived(shaft_radius < 0 ? shaft_len * -shaft_radius : shaft_radius);
+const head_r = $derived(arrow_head_radius < 0 ? shaft_len * -arrow_head_radius : arrow_head_radius);
+const shaft_pos = $derived(math.add(position, math.scale(dir, shaft_len * 0.5)));
+const head_pos = $derived(math.add(position, math.scale(dir, shaft_len + head_len * 0.5)));
+const rotation = $derived.by(() => {
+    if (mag < math.EPS)
+        return [0, 0, 0];
+    const quat = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), new Vector3(...dir));
+    return new Euler().setFromQuaternion(quat).toArray().slice(0, 3);
 });
 </script>
 
-<!-- Vector shaft (cylinder) -->
-{#if shaft_length > 0.01}
-  <T.Mesh {...rest} position={shaft_center} {rotation}>
-    <T.CylinderGeometry args={[shaft_radius, shaft_radius, shaft_length, 12]} />
+{#if shaft_len > 0.01}
+  <T.Mesh {...rest} position={shaft_pos} {rotation}>
+    <T.CylinderGeometry args={[shaft_r, shaft_r, shaft_len, 12]} />
     <T.MeshStandardMaterial {color} />
   </T.Mesh>
 {/if}
 
-<!-- Arrow head (cone) -->
-<T.Mesh {...rest} position={arrow_head_position} {rotation}>
-  <T.ConeGeometry args={[arrow_head_radius, arrow_head_length, 12]} />
+<T.Mesh {...rest} position={head_pos} {rotation}>
+  <T.ConeGeometry args={[head_r, head_len, 12]} />
   <T.MeshStandardMaterial {color} />
 </T.Mesh>

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

@@ -1,7 +1,7 @@
 import type { Vec3 } from '..';
 import { T } from '@threlte/core';
 import type { ComponentProps } from 'svelte';
-interface Props extends ComponentProps<typeof T.Mesh> {
+type $$ComponentProps = ComponentProps<typeof T.Mesh> & {
     position: Vec3;
     vector: Vec3;
     scale?: number;
@@ -9,7 +9,7 @@ interface Props extends ComponentProps<typeof T.Mesh> {
     shaft_radius?: number;
     arrow_head_radius?: number;
     arrow_head_length?: number;
-}
-declare const Vector: import("svelte").Component<Props, {}, "">;
+};
+declare const Vector: import("svelte").Component<$$ComponentProps, {}, "">;
 type Vector = ReturnType<typeof Vector>;
 export default Vector;

package/dist/structure/bonding.d.ts

@@ -1,23 +1,18 @@
 import type { AnyStructure, BondPair } from '..';
 export declare const BONDING_STRATEGIES: {
-    readonly max_dist: typeof max_dist;
-    readonly nearest_neighbor: typeof nearest_neighbor;
     readonly electroneg_ratio: typeof electroneg_ratio;
+    readonly solid_angle: typeof solid_angle;
 };
 export type BondingStrategy = keyof typeof BONDING_STRATEGIES;
 export type BondingAlgo = (typeof BONDING_STRATEGIES)[BondingStrategy];
-export declare function max_dist(structure: AnyStructure, { max_distance_ratio, min_bond_dist, same_species_penalty }?: {
-    max_distance_ratio?: number | undefined;
-    min_bond_dist?: number | undefined;
-    same_species_penalty?: number | undefined;
-}): BondPair[];
-export declare function nearest_neighbor(structure: AnyStructure, { max_neighbors, tolerance_factor, min_bond_dist, same_species_penalty, }?: {
-    max_neighbors?: number | undefined;
-    tolerance_factor?: number | undefined;
-    min_bond_dist?: number | undefined;
-    same_species_penalty?: number | undefined;
-}): BondPair[];
-export declare function electroneg_ratio(structure: AnyStructure, { electronegativity_threshold, max_distance_ratio, min_bond_dist, metal_metal_penalty, metal_nonmetal_bonus, similar_electronegativity_bonus, same_species_penalty, strength_threshold, }?: {
+export declare function electroneg_ratio(structure: AnyStructure, { electronegativity_threshold, // Max electronegativity difference for bonding
+max_distance_ratio, // Max distance as multiple of sum of covalent radii
+min_bond_dist, // Minimum bond distance in Angstroms
+metal_metal_penalty, // Strength penalty for metal-metal bonds
+metal_nonmetal_bonus, // Strength bonus for metal-nonmetal bonds
+similar_electronegativity_bonus, // Bonus for similar electronegativity
+same_species_penalty, // Penalty for bonds between same element
+strength_threshold, }?: {
     electronegativity_threshold?: number | undefined;
     max_distance_ratio?: number | undefined;
     min_bond_dist?: number | undefined;
@@ -27,3 +22,10 @@ export declare function electroneg_ratio(structure: AnyStructure, { electronegat
     same_species_penalty?: number | undefined;
     strength_threshold?: number | undefined;
 }): BondPair[];
+export declare function solid_angle(structure: AnyStructure, { min_solid_angle, min_face_area, max_distance, min_bond_dist, strength_threshold, }?: {
+    min_solid_angle?: number | undefined;
+    min_face_area?: number | undefined;
+    max_distance?: number | undefined;
+    min_bond_dist?: number | undefined;
+    strength_threshold?: number | undefined;
+}): BondPair[];