matterviz 0.3.4 → 0.3.5

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

@@ -10,9 +10,10 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     highlighted_sites?: number[];
+    hovered_site_idx?: number | null;
     selected_sites?: number[];
     sym_data?: MoyoDataset | null;
 };
-declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "selected_sites" | "pane_open" | "highlighted_sites">;
+declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "selected_sites" | "pane_open" | "highlighted_sites" | "hovered_site_idx">;
 type StructureInfoPane = ReturnType<typeof StructureInfoPane>;
 export default StructureInfoPane;

package/dist/structure/StructureScene.svelte

@@ -18,7 +18,14 @@
   import { DEFAULTS } from '../settings'
   import { sanitize_html } from '../sanitize'
   import { colors } from '../state.svelte'
-  import type { AnyStructure, BondPair, MeasureMode, Site } from './'
+  import type {
+    AnyStructure,
+    BondOrder,
+    BondPair,
+    MeasureMode,
+    Site,
+    StructureBond,
+  } from './'
   import {
     Arrow,
     atomic_radii,
@@ -48,8 +55,24 @@
   import { type Camera, Color, type Mesh, type Scene } from 'three'
   import Bond from './Bond.svelte'
   import type { BondingStrategy } from './bonding'
-  import { BONDING_STRATEGIES, compute_bond_transform } from './bonding'
-  import { CanvasTooltip } from './index'
+  import {
+    BONDING_STRATEGIES,
+    get_bond_key,
+    get_bond_render_matrices,
+    get_explicit_bond_metadata,
+    normalize_structure_bond,
+    structure_bond_to_bond_pair,
+  } from './bonding'
+  import {
+    CanvasTooltip,
+    compose_perceived_bonds,
+    perceive_bond_orders,
+  } from './index'
+  import {
+    choose_site_label_offset,
+    LABEL_OFFSET_EPS,
+    make_label_position_calculator,
+  } from './label-placement'
 
   type InstancedAtomGroup = {
     element: string
@@ -59,6 +82,14 @@
     atoms: (typeof atom_data)[number][]
   }
 
+  type BondContextMenu = {
+    site_idx_1: number
+    site_idx_2: number
+    cell_shift?: Vec3
+    position: Vec3
+  }
+  type BondKeyTarget = Pick<StructureBond, `site_idx_1` | `site_idx_2` | `cell_shift`>
+
   let pulse_time = $state(0)
   let pulse_opacity = $derived(0.15 + 0.25 * Math.sin(pulse_time * 5))
   $effect(() => {
@@ -96,9 +127,9 @@
     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,
+    site_label_bg_color = DEFAULTS.structure.site_label_bg_color,
+    site_label_color = DEFAULTS.structure.site_label_color,
+    site_label_padding = DEFAULTS.structure.site_label_padding,
     vector_configs = $bindable<Record<string, VectorLayerConfig>>({}),
     vector_scale = DEFAULTS.structure.vector_scale,
     vector_color = DEFAULTS.structure.vector_color,
@@ -118,6 +149,8 @@
     bond_thickness = DEFAULTS.structure.bond_thickness,
     bond_color = DEFAULTS.structure.bond_color,
     bonding_strategy = DEFAULTS.structure.bonding_strategy,
+    auto_bond_order = DEFAULTS.structure.auto_bond_order,
+    aromatic_display = DEFAULTS.structure.aromatic_display,
     bonding_options = {},
     fov = DEFAULTS.structure.fov,
     initial_zoom = DEFAULTS.structure.initial_zoom,
@@ -134,6 +167,8 @@
     measured_sites = $bindable([]),
     added_bonds = $bindable([]),
     removed_bonds = $bindable([]),
+    bond_order_overrides = $bindable([]),
+    bond_edits_enabled = true,
     selection_highlight_color = `#6cf0ff`,
     // Active highlight group with different color
     active_sites = $bindable([]),
@@ -205,6 +240,8 @@
     bond_thickness?: number
     bond_color?: string
     bonding_strategy?: BondingStrategy
+    auto_bond_order?: boolean
+    aromatic_display?: `aromatic` | `kekule`
     bonding_options?: Record<string, unknown>
     fov?: number
     ambient_light?: number
@@ -224,8 +261,10 @@
     measure_mode?: MeasureMode
     selected_sites?: number[]
     measured_sites?: number[]
-    added_bonds?: [number, number][]
-    removed_bonds?: [number, number][]
+    added_bonds?: StructureBond[]
+    removed_bonds?: StructureBond[]
+    bond_order_overrides?: StructureBond[]
+    bond_edits_enabled?: boolean
     selection_highlight_color?: string
     // Support for active highlight group with different color
     active_sites?: number[]
@@ -286,6 +325,11 @@
   let canvas_cursor = $derived.by(() => {
     if (measure_mode === `edit-atoms` && add_atom_mode) return `crosshair`
     if (hovered_idx != null) {
+      if (measure_mode === `edit-bonds`) {
+        return bond_edits_enabled && is_editable_bond_site(hovered_idx)
+          ? `pointer`
+          : `not-allowed`
+      }
       if (measure_mode === `edit-atoms`) {
         const site = structure?.sites?.[hovered_idx]
         if (site?.properties?.orig_site_idx != null) return `not-allowed`
@@ -312,36 +356,154 @@
   // snaps to the new wrapped centroid.
   let frozen_centroid = $state<Vec3 | null>(null)
 
-  const get_bond_key = (idx1: number, idx2: number): string =>
-    idx1 < idx2 ? `${idx1}-${idx2}` : `${idx2}-${idx1}`
+  const BOND_ORDER_OPTIONS: { order: BondOrder; label: string }[] = [
+    { order: 1, label: `Single` },
+    { order: 2, label: `Double` },
+    { order: 3, label: `Triple` },
+    { order: `aromatic`, label: `Aromatic` },
+  ]
+  let bond_context_menu = $state<BondContextMenu | null>(null)
+  // Threlte/HTML pointer events can close the visible menu before a button
+  // handler runs, so keep the target bond separately for menu actions.
+  let bond_context_target: BondContextMenu | null = null
+
+  function close_bond_context_menu() {
+    bond_context_menu = null
+    bond_context_target = null
+  }
+
+  const make_bond_record = (
+    site_idx_1: number,
+    site_idx_2: number,
+    order: BondOrder,
+    cell_shift?: Vec3,
+  ): StructureBond => normalize_structure_bond(site_idx_1, site_idx_2, order, cell_shift)
+
+  const bond_key_for = (bond: BondKeyTarget): string =>
+    get_bond_key(bond.site_idx_1, bond.site_idx_2, bond.cell_shift)
+
+  const matches_bond_key = (bond: BondKeyTarget, key: string): boolean =>
+    bond_key_for(bond) === key
+
+  function is_editable_bond_site(site_idx: number): boolean {
+    return structure?.sites?.[site_idx]?.properties?.orig_site_idx == null
+  }
+
+  const can_edit_bond = (bond: BondKeyTarget): boolean =>
+    bond_edits_enabled &&
+    is_editable_bond_site(bond.site_idx_1) &&
+    is_editable_bond_site(bond.site_idx_2)
+
+  const format_bond_order = (order: BondOrder | undefined): string =>
+    order === undefined ? `1` : `${order}`
+
+  function get_current_bond_order(
+    site_idx_1: number,
+    site_idx_2: number,
+    cell_shift?: Vec3,
+  ): BondOrder | undefined {
+    const key = get_bond_key(site_idx_1, site_idx_2, cell_shift)
+    return bond_order_overrides.find((bond) => matches_bond_key(bond, key))?.order ??
+      added_bonds.find((bond) => matches_bond_key(bond, key))?.order ??
+      filtered_bond_pairs.find((bond) => matches_bond_key(bond, key))?.bond_order
+  }
+
+  const midpoint = (pos_1: Vec3, pos_2: Vec3): Vec3 => [
+    (pos_1[0] + pos_2[0]) / 2,
+    (pos_1[1] + pos_2[1]) / 2,
+    (pos_1[2] + pos_2[2]) / 2,
+  ]
+
+  let label_screen_margin = $derived(site_label_size * 10 + site_label_padding)
+
+  function open_bond_context_menu(bond: BondPair) {
+    if (!can_edit_bond(bond)) return
+    bond_context_target = {
+      site_idx_1: bond.site_idx_1,
+      site_idx_2: bond.site_idx_2,
+      cell_shift: bond.cell_shift,
+      position: midpoint(bond.pos_1, bond.pos_2),
+    }
+    bond_context_menu = bond_context_target
+  }
 
   // Toggle a bond between two atoms: cycles through add → remove → restore states
-  function toggle_bond(site_1: number, site_2: number) {
-    const idx_i = Math.min(site_1, site_2)
-    const idx_j = Math.max(site_1, site_2)
-    // added/removed pairs are stored sorted, so direct comparison works
-    const match = ([a, b]: [number, number]) => a === idx_i && b === idx_j
-
-    const added_idx = added_bonds.findIndex(match)
-    if (added_idx >= 0) {
-      added_bonds = added_bonds.toSpliced(added_idx, 1)
+  function toggle_bond(site_1: number, site_2: number, cell_shift?: Vec3) {
+    if (!can_edit_bond({ site_idx_1: site_1, site_idx_2: site_2, cell_shift })) return
+    const record = make_bond_record(site_1, site_2, 1, cell_shift)
+    const key = bond_key_for(record)
+    if (added_bonds.some((bond) => matches_bond_key(bond, key))) {
+      added_bonds = added_bonds.filter((bond) => !matches_bond_key(bond, key))
       return
     }
-
-    const removed_idx = removed_bonds.findIndex(match)
-    if (removed_idx >= 0) {
-      removed_bonds = removed_bonds.toSpliced(removed_idx, 1)
+    if (removed_bonds.some((bond) => matches_bond_key(bond, key))) {
+      removed_bonds = removed_bonds.filter((bond) => !matches_bond_key(bond, key))
       return
     }
+    const has_calculated_bond = bond_pairs.some((bond) => matches_bond_key(bond, key))
+    if (bond_order_overrides.some((bond) => matches_bond_key(bond, key))) {
+      bond_order_overrides = bond_order_overrides.filter((bond) =>
+        !matches_bond_key(bond, key)
+      )
+      if (has_calculated_bond) removed_bonds = [...removed_bonds, record]
+      return
+    }
+    if (has_calculated_bond) removed_bonds = [...removed_bonds, record]
+    else added_bonds = [...added_bonds, record]
+  }
+
+  function set_bond_order(
+    site_idx_1: number,
+    site_idx_2: number,
+    order: BondOrder,
+    cell_shift?: Vec3,
+  ) {
+    if (!can_edit_bond({ site_idx_1, site_idx_2, cell_shift })) return
+    const key = get_bond_key(site_idx_1, site_idx_2, cell_shift)
+    const new_record = make_bond_record(site_idx_1, site_idx_2, order, cell_shift)
+    added_bonds = added_bonds.filter((bond) => !matches_bond_key(bond, key))
+    const has_calculated_bond = bond_pairs.some((bond) => matches_bond_key(bond, key))
+    if (has_calculated_bond) {
+      bond_order_overrides = [
+        ...bond_order_overrides.filter((bond) => !matches_bond_key(bond, key)),
+        new_record,
+      ]
+      removed_bonds = removed_bonds.filter((bond) => !matches_bond_key(bond, key))
+    } else {
+      added_bonds = [...added_bonds, new_record]
+    }
+    close_bond_context_menu()
+  }
+
+  function set_context_bond_order(order: BondOrder) {
+    const menu = bond_context_target ?? bond_context_menu
+    if (!menu) return
+    set_bond_order(menu.site_idx_1, menu.site_idx_2, order, menu.cell_shift)
+  }
 
-    // bond_pairs may not be sorted, so use get_bond_key for comparison
-    const key = `${idx_i}-${idx_j}`
+  function remove_bond(site_idx_1: number, site_idx_2: number, cell_shift?: Vec3) {
+    if (!can_edit_bond({ site_idx_1, site_idx_2, cell_shift })) return
+    const key = get_bond_key(site_idx_1, site_idx_2, cell_shift)
+    added_bonds = added_bonds.filter((bond) => !matches_bond_key(bond, key))
+    bond_order_overrides = bond_order_overrides.filter((bond) =>
+      !matches_bond_key(bond, key)
+    )
     if (
-      bond_pairs.some((bond) =>
-        get_bond_key(bond.site_idx_1, bond.site_idx_2) === key
-      )
-    ) removed_bonds = [...removed_bonds, [idx_i, idx_j]]
-    else added_bonds = [...added_bonds, [idx_i, idx_j]]
+      bond_pairs.some((bond) => matches_bond_key(bond, key)) &&
+      !removed_bonds.some((bond) => matches_bond_key(bond, key))
+    ) {
+      removed_bonds = [
+        ...removed_bonds,
+        make_bond_record(site_idx_1, site_idx_2, 1, cell_shift),
+      ]
+    }
+    close_bond_context_menu()
+  }
+
+  function remove_context_bond() {
+    const menu = bond_context_target ?? bond_context_menu
+    if (!menu) return
+    remove_bond(menu.site_idx_1, menu.site_idx_2, menu.cell_shift)
   }
 
   // Deduplicate clicks: when a highlight sphere and the underlying atom both
@@ -359,6 +521,7 @@
     }
 
     if (measure_mode === `edit-bonds`) {
+      if (!bond_edits_enabled || !is_editable_bond_site(site_index)) return
       // In edit-bonds mode, select atoms to add/remove bonds between them
       const new_sites = measured_sites.includes(site_index)
         ? measured_sites.filter((idx) => idx !== site_index)
@@ -417,6 +580,17 @@
       ? selected_sites.filter((idx) => idx !== site_index)
       : [...selected_sites, site_index]
   }
+
+  $effect(() => {
+    void structure
+    void measure_mode
+    void bond_edits_enabled
+    untrack(() => {
+      close_bond_context_menu()
+      hovered_bond_key = null
+    })
+  })
+
   $effect(() => {
     const count = structure?.sites?.length ?? 0
     if (count <= 0) {
@@ -604,45 +778,89 @@
     return has_visible_element && prop_visible
   }
 
+  // Perception layer: bond_pairs with optional bond-order perception applied.
+  // Off by default (pass-through). Manual overrides are applied downstream in
+  // filtered_bond_pairs, so they still win over perceived orders.
+  let perceived_bond_pairs: BondPair[] = $derived.by(() => {
+    if (!auto_bond_order || !structure?.sites || bond_pairs.length === 0) {
+      return bond_pairs
+    }
+    const total_charge = (`charge` in structure ? structure.charge : 0) ?? 0
+    const perceived = perceive_bond_orders(structure.sites, bond_pairs, {
+      total_charge,
+    })
+    // Explicit structure.properties.bonds are user-authoritative and must
+    // never be clobbered by perception. Composition + precedence is a pure,
+    // unit-tested helper (see compose_perceived_bonds).
+    return compose_perceived_bonds(
+      perceived,
+      get_explicit_bond_metadata(structure),
+      aromatic_display,
+    )
+  })
+
   let filtered_bond_pairs = $derived.by(() => {
-    if (!structure?.sites) return bond_pairs
+    if (!structure?.sites) return perceived_bond_pairs
 
     // Build set of removed bond keys for efficient lookup
     const removed_keys = new Set(
-      removed_bonds.map(([idx_i, idx_j]) => get_bond_key(idx_i, idx_j)),
+      removed_bonds.map(bond_key_for),
+    )
+    const order_overrides = new Map(
+      bond_order_overrides.map((bond) => [bond_key_for(bond), bond.order]),
     )
 
     // Filter calculated bonds: exclude removed and hidden
-    const calculated = bond_pairs.filter(({ site_idx_1, site_idx_2 }) => {
-      if (removed_keys.has(get_bond_key(site_idx_1, site_idx_2))) return false
-      return is_site_visible(site_idx_1) && is_site_visible(site_idx_2)
-    })
+    const calculated = perceived_bond_pairs
+      .filter((bond) => {
+        if (removed_keys.has(bond_key_for(bond))) return false
+        return is_site_visible(bond.site_idx_1) && is_site_visible(bond.site_idx_2)
+      })
+      .map((bond) => {
+        const override = order_overrides.get(bond_key_for(bond))
+        return override === undefined ? bond : { ...bond, bond_order: override }
+      })
 
     // Create BondPair objects for manually added bonds
-    const added: BondPair[] = added_bonds
-      .map(([idx_i, idx_j]) => {
-        if (!is_site_visible(idx_i) || !is_site_visible(idx_j)) return null
-        const site1 = structure.sites[idx_i]
-        const site2 = structure.sites[idx_j]
-        if (!site1 || !site2) return null
+    const added: BondPair[] = []
+    for (const added_bond of added_bonds) {
+      const { site_idx_1: idx_i, site_idx_2: idx_j } = added_bond
+      if (!is_site_visible(idx_i) || !is_site_visible(idx_j)) continue
+      added.push(structure_bond_to_bond_pair(structure, added_bond))
+    }
 
-        const pos_1 = site1.xyz
-        const pos_2 = site2.xyz
-        const dist = math.euclidean_dist(pos_1, pos_2)
+    return [...calculated, ...added]
+  })
 
-        return {
-          pos_1,
-          pos_2,
-          site_idx_1: idx_i,
-          site_idx_2: idx_j,
-          bond_length: dist,
-          strength: 1.0,
-          transform_matrix: compute_bond_transform(pos_1, pos_2),
-        }
-      })
-      .filter((bond): bond is BondPair => bond !== null)
+  let editable_bond_pairs = $derived(
+    bond_edits_enabled ? filtered_bond_pairs.filter(can_edit_bond) : [],
+  )
 
-    return [...calculated, ...added]
+  let smart_site_label_offsets = $derived.by(() => {
+    const offsets = new SvelteMap<number, Vec3>()
+    if (filtered_bond_pairs.length === 0) return offsets
+
+    const bond_directions_by_site = new SvelteMap<number, Vec3[]>()
+    const add_bond_direction = (site_idx: number, pos_1: Vec3, pos_2: Vec3) => {
+      const direction = math.normalize_vec3(
+        math.subtract(pos_2, pos_1),
+        [0, 0, 0],
+      )
+      if (Math.hypot(...direction) < LABEL_OFFSET_EPS) return
+      bond_directions_by_site.set(site_idx, [
+        ...(bond_directions_by_site.get(site_idx) ?? []),
+        direction,
+      ])
+    }
+
+    for (const { site_idx_1, site_idx_2, pos_1, pos_2 } of filtered_bond_pairs) {
+      add_bond_direction(site_idx_1, pos_1, pos_2)
+      add_bond_direction(site_idx_2, pos_2, pos_1)
+    }
+    for (const [site_idx, bond_directions] of bond_directions_by_site) {
+      offsets.set(site_idx, choose_site_label_offset(bond_directions, site_label_offset))
+    }
+    return offsets
   })
 
   let instanced_bond_groups = $derived.by(() => {
@@ -673,8 +891,9 @@
 
       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)
+      for (const matrix of get_bond_render_matrices(bond_data, bond_thickness)) {
+        group.instances.push({ matrix, color_start, color_end })
+      }
     }
 
     return group.instances.length > 0 ? [group] : []
@@ -920,6 +1139,7 @@
     onstart: () => {
       camera_is_moving = true
       hovered_idx = null
+      bond_context_menu = null
     },
     onend: () => {
       camera_is_moving = false
@@ -944,8 +1164,17 @@
 
 {#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}>
+  {@const visual_radius = (radius_by_site_idx.get(site_idx) ?? 1) * 0.5}
+  <extras.HTML
+    center
+    position={position}
+    calculatePosition={make_label_position_calculator(
+      position,
+      () => smart_site_label_offsets.get(site_idx) ?? site_label_offset,
+      visual_radius,
+      label_screen_margin,
+    )}
+  >
     {#if atom_label}
       {@render atom_label({ site, site_idx })}
     {:else}
@@ -1168,12 +1397,12 @@
       {/if}
 
       <!-- Clickable bond hit-test cylinders in edit-bonds mode -->
-      {#if measure_mode === `edit-bonds` && filtered_bond_pairs.length > 0}
-        {#each filtered_bond_pairs as
+      {#if measure_mode === `edit-bonds` && editable_bond_pairs.length > 0}
+        {#each editable_bond_pairs as
           bond
-          (`bond-hit-${bond.site_idx_1}-${bond.site_idx_2}`)
+          (`bond-hit-${bond_key_for(bond)}`)
         }
-          {@const bond_key = get_bond_key(bond.site_idx_1, bond.site_idx_2)}
+          {@const bond_key = bond_key_for(bond)}
           {@const is_hovered = hovered_bond_key === bond_key}
           <T.Mesh
             matrixAutoUpdate={false}
@@ -1181,13 +1410,19 @@
               ref.matrix.fromArray(bond.transform_matrix)
               ref.matrixWorldNeedsUpdate = true
             }}
-            onclick={(event: MouseEvent) => {
+            onpointerdown={(event: PointerEvent & { nativeEvent?: PointerEvent }) => {
+              if (event.nativeEvent?.button === 2) return
               event.stopPropagation()
-              toggle_bond(bond.site_idx_1, bond.site_idx_2)
+              toggle_bond(bond.site_idx_1, bond.site_idx_2, bond.cell_shift)
               measured_sites = []
               selected_sites = []
               hovered_bond_key = null
             }}
+            oncontextmenu={(event: MouseEvent & { nativeEvent?: MouseEvent }) => {
+              event.nativeEvent?.preventDefault()
+              event.stopPropagation?.()
+              open_bond_context_menu(bond)
+            }}
             onpointerenter={() => (hovered_bond_key = bond_key)}
             onpointerleave={() => (hovered_bond_key = null)}
           >
@@ -1202,6 +1437,70 @@
         {/each}
       {/if}
 
+      {#if measure_mode === `edit-bonds` && bond_context_menu}
+        {@const current_order = get_current_bond_order(
+          bond_context_menu.site_idx_1,
+          bond_context_menu.site_idx_2,
+          bond_context_menu.cell_shift,
+        )}
+        <extras.HTML center position={bond_context_menu.position}>
+          <div class="bond-context-menu">
+            <strong>Bond Order ({format_bond_order(current_order)})</strong>
+            {#each BOND_ORDER_OPTIONS as { order, label } (label)}
+              <button
+                type="button"
+                onpointerdown={(event: PointerEvent) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  set_context_bond_order(order)
+                }}
+                onkeydown={(event: KeyboardEvent) => {
+                  if (event.key !== `Enter` && event.key !== ` `) return
+                  event.preventDefault()
+                  event.stopPropagation()
+                  set_context_bond_order(order)
+                }}
+              >
+                {label}
+              </button>
+            {/each}
+            <button
+              type="button"
+              class="remove"
+              onpointerdown={(event: PointerEvent) => {
+                event.preventDefault()
+                event.stopPropagation()
+                remove_context_bond()
+              }}
+              onkeydown={(event: KeyboardEvent) => {
+                if (event.key !== `Enter` && event.key !== ` `) return
+                event.preventDefault()
+                event.stopPropagation()
+                remove_context_bond()
+              }}
+            >
+              Remove
+            </button>
+            <button
+              type="button"
+              onpointerdown={(event: PointerEvent) => {
+                event.preventDefault()
+                event.stopPropagation()
+                close_bond_context_menu()
+              }}
+              onkeydown={(event: KeyboardEvent) => {
+                if (event.key !== `Enter` && event.key !== ` `) return
+                event.preventDefault()
+                event.stopPropagation()
+                close_bond_context_menu()
+              }}
+            >
+              Close
+            </button>
+          </div>
+        </extras.HTML>
+      {/if}
+
       <!-- highlight hovered, active and selected sites -->
       {#each [
           {
@@ -1275,7 +1574,8 @@
       {/if}
 
       <!-- hovered site tooltip -->
-      {#if hovered_site && !camera_is_moving && active_tooltip === `atom`}
+      {#if hovered_site && !camera_is_moving &&
+        (active_tooltip === `atom` || active_sites.includes(hovered_idx ?? -1))}
         {@const abc = hovered_site.abc.map((val) => format_num(val, float_fmt)).join(
           `, `,
         )}
@@ -1557,6 +1857,37 @@
     font-size: var(--canvas-tooltip-font-size, clamp(8pt, 2cqmin, 18pt));
     box-shadow: var(--measure-label-shadow, 0 1px 6px rgba(0, 0, 0, 0.2));
   }
+  .bond-context-menu {
+    display: grid;
+    min-width: 8rem;
+    gap: 2pt;
+    padding: 5pt;
+    border-radius: var(--border-radius, 3pt);
+    background: var(--surface-bg, Canvas);
+    color: var(--text-color, currentColor);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    pointer-events: auto;
+    strong {
+      font-size: 0.85em;
+      padding: 0 2pt 2pt;
+      white-space: nowrap;
+    }
+    button {
+      border: none;
+      border-radius: var(--border-radius, 3pt);
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      padding: 2pt 5pt;
+      text-align: left;
+    }
+    button:hover {
+      background: color-mix(in srgb, currentColor 10%, transparent);
+    }
+    button.remove {
+      color: var(--error-color, #f44336);
+    }
+  }
   .selection-label {
     display: inline-flex;
     align-items: center;

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

@@ -3,7 +3,7 @@ import type { ElementSymbol } from '../element';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
 import type { Vec3 } from '../math';
 import type { CameraProjection, ShowBonds, VectorColorMode, VectorLayerConfig } from '../settings';
-import type { AnyStructure, MeasureMode, Site } from './';
+import type { AnyStructure, MeasureMode, Site, StructureBond } from './';
 import { Lattice } from './';
 import type { AtomColorConfig } from './atom-properties';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
@@ -51,6 +51,8 @@ type $$ComponentProps = {
     bond_thickness?: number;
     bond_color?: string;
     bonding_strategy?: BondingStrategy;
+    auto_bond_order?: boolean;
+    aromatic_display?: `aromatic` | `kekule`;
     bonding_options?: Record<string, unknown>;
     fov?: number;
     ambient_light?: number;
@@ -72,8 +74,10 @@ type $$ComponentProps = {
     measure_mode?: MeasureMode;
     selected_sites?: number[];
     measured_sites?: number[];
-    added_bonds?: [number, number][];
-    removed_bonds?: [number, number][];
+    added_bonds?: StructureBond[];
+    removed_bonds?: StructureBond[];
+    bond_order_overrides?: StructureBond[];
+    bond_edits_enabled?: boolean;
     selection_highlight_color?: string;
     active_sites?: number[];
     active_highlight_color?: string;
@@ -99,6 +103,6 @@ type $$ComponentProps = {
     volumetric_data?: VolumetricData;
     isosurface_settings?: IsosurfaceSettings;
 };
-declare const StructureScene: import("svelte").Component<$$ComponentProps, {}, "cursor" | "site_label_offset" | "vector_configs" | "camera" | "scene" | "orbit_controls" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "hovered_idx" | "hovered_site" | "camera_is_moving" | "measured_sites" | "added_bonds" | "removed_bonds" | "active_sites" | "rotation_target_ref" | "initial_computed_zoom" | "add_atom_mode" | "add_element" | "dragging_atoms">;
+declare const StructureScene: import("svelte").Component<$$ComponentProps, {}, "cursor" | "site_label_offset" | "vector_configs" | "camera" | "scene" | "orbit_controls" | "site_radius_overrides" | "hovered_idx" | "hovered_site" | "camera_is_moving" | "selected_sites" | "measured_sites" | "added_bonds" | "removed_bonds" | "bond_order_overrides" | "active_sites" | "rotation_target_ref" | "initial_computed_zoom" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "add_atom_mode" | "add_element" | "dragging_atoms">;
 type StructureScene = ReturnType<typeof StructureScene>;
 export default StructureScene;