matterviz 0.3.4 → 0.3.5

package/dist/structure/Structure.svelte

@@ -22,7 +22,12 @@
   import { DEFAULTS } from '../settings'
   import { sanitize_html } from '../sanitize'
   import { colors } from '../state.svelte'
-  import type { AnyStructure, Crystal, MeasureMode } from './'
+  import type {
+    AnyStructure,
+    Crystal,
+    MeasureMode,
+    StructureBond,
+  } from './'
   import {
     default_vector_configs,
     get_element_counts,
@@ -42,7 +47,7 @@
   import { Canvas } from '@threlte/core'
   import type { ComponentProps, Snippet } from 'svelte'
   import { untrack } from 'svelte'
-  import { click_outside, tooltip } from 'svelte-multiselect'
+  import { click_outside, tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteMap, SvelteSet } from 'svelte/reactivity'
   import type { Camera, OrthographicCamera, Scene } from 'three'
@@ -50,6 +55,7 @@
   import { get_property_colors } from './atom-properties'
   import AtomLegend from './AtomLegend.svelte'
   import CellSelect from './CellSelect.svelte'
+  import { merge_bond_edits } from './bonding'
   import type { StructureHandlerData } from './index'
   import { MAX_SELECTED_SITES } from './measure'
   import { normalize_fractional_coords, parse_any_structure } from './parse'
@@ -60,11 +66,22 @@
 
   // Type alias for event handlers to reduce verbosity
   type EventHandler = (data: StructureHandlerData) => void
+  type BondEditContext = {
+    structure?: AnyStructure
+    cell_type: CellType
+    supercell_scaling: string
+    show_image_atoms: boolean
+  }
+  type BondEditSnapshot = {
+    bonds: StructureBond[] | undefined
+    context: BondEditContext
+  }
 
   // Local reactive state for scene and lattice props. Deeply reactive so nested mutations propagate.
   // Deep-clone to prevent mutations from leaking to global defaults across component instances.
   let scene_props = $state(
     structuredClone(DEFAULTS.structure) as typeof DEFAULTS.structure & {
+      active_sites?: number[]
       camera_target?: Vec3
     },
   )
@@ -79,6 +96,7 @@
 
   let {
     structure = $bindable(),
+    bonds = $bindable(),
     scene_props: scene_props_in = $bindable(),
     lattice_props: lattice_props_in = $bindable(),
     controls_open = $bindable(false),
@@ -117,6 +135,8 @@
     performance_mode = $bindable(`quality`),
     // expose selected site indices for external control/highlighting
     selected_sites = $bindable([]),
+    highlighted_sites = $bindable([]),
+    hovered_site_idx = $bindable(null),
     // expose measured site indices for overlays/labels
     measured_sites = $bindable([]),
     // expose the displayed structure (with image atoms and supercell) for external use
@@ -153,10 +173,12 @@
     on_fullscreen_change,
     on_camera_move,
     on_camera_reset,
+    on_bonds_change,
     ...rest
   }:
     & {
       structure?: AnyStructure
+      bonds?: StructureBond[]
       scene_props?: ComponentProps<typeof StructureScene>
       /**
        * Controls visibility configuration.
@@ -199,6 +221,8 @@
       performance_mode?: `quality` | `speed`
       // allow parent components to control highlighted/selected site indices
       selected_sites?: number[]
+      highlighted_sites?: number[]
+      hovered_site_idx?: number | null
       // explicit measured sites for distance/angle overlays
       measured_sites?: number[]
       // expose the displayed structure (with image atoms and/or supercell) for external use
@@ -236,6 +260,7 @@
       on_fullscreen_change?: EventHandler
       on_camera_move?: EventHandler
       on_camera_reset?: EventHandler
+      on_bonds_change?: (bonds: StructureBond[] | undefined) => void
     }
     & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`>
     & Omit<HTMLAttributes<HTMLDivElement>, `children`> = $props()
@@ -427,8 +452,85 @@
   let export_pane_open = $state(false)
 
   // Bond customization state
-  let added_bonds = $state<[number, number][]>([])
-  let removed_bonds = $state<[number, number][]>([])
+  let added_bonds = $state<StructureBond[]>([])
+  let removed_bonds = $state<StructureBond[]>([])
+  let bond_order_overrides = $state<StructureBond[]>([])
+  let last_emitted_bond_signature = $state<string>()
+  let bond_edit_snapshot = $state<BondEditSnapshot>()
+  let has_bond_edits = $derived(
+    added_bonds.length > 0 || removed_bonds.length > 0 ||
+      bond_order_overrides.length > 0,
+  )
+
+  function clear_bond_edits() {
+    added_bonds = []
+    removed_bonds = []
+    bond_order_overrides = []
+  }
+
+  function emit_bonds(next_bonds: StructureBond[] | undefined) {
+    const signature = next_bonds === undefined ? `undefined` : JSON.stringify(next_bonds)
+    if (signature === last_emitted_bond_signature) return
+    last_emitted_bond_signature = signature
+    bonds = next_bonds
+    on_bonds_change?.(next_bonds)
+  }
+
+  const current_source_bonds = (): StructureBond[] | undefined =>
+    bonds ?? structure?.properties?.bonds
+
+  const current_bond_edit_context = (): BondEditContext => ({
+    structure,
+    cell_type,
+    supercell_scaling,
+    show_image_atoms,
+  })
+
+  const bond_edit_context_changed = (
+    previous: BondEditContext,
+    current: BondEditContext,
+  ): boolean =>
+    previous.structure !== current.structure ||
+    previous.cell_type !== current.cell_type ||
+    previous.supercell_scaling !== current.supercell_scaling ||
+    previous.show_image_atoms !== current.show_image_atoms
+
+  const resolve_bond_edit_reset_bonds = (
+    snapshot: BondEditSnapshot,
+  ): StructureBond[] | undefined =>
+    snapshot.context.structure === structure ? snapshot.bonds : structure?.properties?.bonds
+
+  $effect(() => {
+    const snapshot = bond_edit_snapshot
+    if (snapshot === undefined) return
+    const context = current_bond_edit_context()
+    if (!bond_edit_context_changed(snapshot.context, context)) return
+    untrack(() => {
+      emit_bonds(resolve_bond_edit_reset_bonds(snapshot))
+      clear_bond_edits()
+      bond_edit_snapshot = undefined
+    })
+  })
+
+  $effect(() => {
+    if (!has_bond_edits) {
+      if (bond_edit_snapshot === undefined) return
+      emit_bonds(resolve_bond_edit_reset_bonds(bond_edit_snapshot))
+      bond_edit_snapshot = undefined
+      return
+    }
+    bond_edit_snapshot ??= {
+      bonds: current_source_bonds(),
+      context: current_bond_edit_context(),
+    }
+    const edited_bonds = merge_bond_edits(
+      bond_edit_snapshot.bonds ?? [],
+      added_bonds,
+      removed_bonds,
+      bond_order_overrides,
+    )
+    emit_bonds(edited_bonds)
+  })
 
   // === Edit-atoms mode state ===
   let dragging_atoms = $state(false)
@@ -530,10 +632,7 @@
     if (measure_mode !== `edit-atoms`) return
     untrack(() => {
       // Clear bond edits from edit-bonds mode to avoid stale state
-      if (added_bonds.length > 0 || removed_bonds.length > 0) {
-        added_bonds = []
-        removed_bonds = []
-      }
+      if (has_bond_edits) clear_bond_edits()
       if (cell_type !== `original` && cell_transformed_structure && structure) {
         // Bake the transformed cell: push original to undo, replace structure
         is_internal_edit = true
@@ -545,6 +644,9 @@
   })
 
   let controls_config = $derived(normalize_show_controls(show_controls))
+  let active_scene_sites = $derived([
+    ...new SvelteSet([...(scene_props.active_sites ?? []), ...highlighted_sites]),
+  ])
 
   // Normalize structure coordinates: wrap fractional coords to [0,1) and recompute Cartesian
   // This ensures atoms are rendered inside the unit cell regardless of data source
@@ -553,24 +655,32 @@
     return normalize_fractional_coords(structure) as AnyStructure
   })
 
+  let structure_with_bonds = $derived.by(() => {
+    if (!normalized_structure || bonds === undefined) return normalized_structure
+    return {
+      ...normalized_structure,
+      properties: { ...normalized_structure.properties, bonds },
+    } as AnyStructure
+  })
+
   // Apply cell type transformation (original, conventional, or primitive)
   // This must happen BEFORE supercell transformation
   let cell_transformed_structure = $derived.by(() => {
     if (
-      !normalized_structure || !(`lattice` in normalized_structure) ||
+      !structure_with_bonds || !(`lattice` in structure_with_bonds) ||
       cell_type === `original`
     ) {
-      return normalized_structure
+      return structure_with_bonds
     }
     // Cell type transformation requires symmetry data
     if (!sym_data) {
-      return normalized_structure
+      return structure_with_bonds
     }
     try {
-      return transform_cell(normalized_structure as Crystal, cell_type, sym_data)
+      return transform_cell(structure_with_bonds as Crystal, cell_type, sym_data)
     } catch (error) {
       console.error(`Failed to transform cell to ${cell_type}:`, error)
-      return normalized_structure
+      return structure_with_bonds
     }
   })
 
@@ -580,6 +690,19 @@
   let has_supercell = $derived(
     !!supercell_scaling && ![``, `1x1x1`, `1`].includes(supercell_scaling),
   )
+  let bond_edits_enabled = $derived(
+    cell_type === `original` && !has_supercell && !supercell_loading,
+  )
+
+  $effect(() => {
+    if (measure_mode !== `edit-bonds` || bond_edits_enabled) return
+    untrack(() => {
+      clear_selection()
+      clear_bond_edits()
+      measure_mode = `distance`
+      show_toast(`Bond editing is only available for the original 1x1x1 cell`)
+    })
+  })
 
   // Tile volumetric data to match supercell when active.
   // Gate on !supercell_loading so the tiled volume and supercell structure update
@@ -806,17 +929,17 @@
   }
 
   const emit_file_load_event = (
-    structure: AnyStructure,
+    loaded_structure: AnyStructure,
     filename: string,
     content: string | ArrayBuffer,
   ) =>
     on_file_load?.({
-      structure: structure,
+      structure: loaded_structure,
       filename,
       file_size: typeof content === `string`
         ? new Blob([content]).size
         : content.byteLength,
-      total_atoms: structure.sites?.length || 0,
+      total_atoms: loaded_structure.sites?.length || 0,
     })
 
   // Try to parse content as a volumetric file, setting both structure and volumetric data.
@@ -930,8 +1053,7 @@
           }
           // Clear per-site overrides since indices shifted after deletion
           if (site_radius_overrides?.size > 0) site_radius_overrides.clear()
-          added_bonds = []
-          removed_bonds = []
+          clear_bond_edits()
           show_toast(`Deleted ${n_deleted} site${n_deleted > 1 ? `s` : ``}`)
         }
         return
@@ -1295,15 +1417,13 @@
                 style="margin-left: -2px"
               />
             </button>
-            {#if (measured_sites?.length ?? 0) > 0 || added_bonds.length > 0 ||
-          removed_bonds.length > 0}
+            {#if (measured_sites?.length ?? 0) > 0 || has_bond_edits}
               <button
                 type="button"
                 aria-label="Reset selection and bond edits"
                 onclick={() => {
                   clear_selection()
-                  added_bonds = []
-                  removed_bonds = []
+                  clear_bond_edits()
                 }}
               >
                 <Icon icon="Reset" style="margin-left: -4px" />
@@ -1333,7 +1453,14 @@
                   <button
                     class="view-mode-option"
                     class:selected={measure_mode === mode}
-                    onclick={() => [measure_mode, measure_menu_open] = [mode, false]}
+                    disabled={mode === `edit-bonds` && !bond_edits_enabled}
+                    title={mode === `edit-bonds` && !bond_edits_enabled
+                      ? `Bond editing is only available for the original 1x1x1 cell`
+                      : label}
+                    onclick={() => {
+                      if (mode === `edit-bonds` && !bond_edits_enabled) return
+                      ;[measure_mode, measure_menu_open] = [mode, false]
+                    }}
                   >
                     <Icon {icon} style="transform: scale({scale})" />
                     <span>{@html sanitize_html(label)}</span>
@@ -1427,7 +1554,9 @@
           <StructureInfoPane
             structure={normalized_structure}
             bind:pane_open={info_pane_open}
-            {selected_sites}
+            bind:highlighted_sites
+            bind:hovered_site_idx
+            bind:selected_sites
             {sym_data}
             {@attach tooltip({ content: `Structure info pane` })}
           />
@@ -1508,6 +1637,8 @@
             {isosurface_settings}
             bind:camera_is_moving
             bind:selected_sites
+            active_sites={active_scene_sites}
+            bind:hovered_idx={hovered_site_idx}
             bind:measured_sites
             bind:scene
             bind:camera
@@ -1520,6 +1651,8 @@
             bind:site_radius_overrides
             bind:added_bonds
             bind:removed_bonds
+            bind:bond_order_overrides
+            {bond_edits_enabled}
             {measure_mode}
             {width}
             {height}
@@ -1545,8 +1678,7 @@
       <div class="edit-toast">{toast_msg}</div>
     {/if}
 
-    {#if measure_mode === `edit-bonds` &&
-      (added_bonds.length > 0 || removed_bonds.length > 0)}
+    {#if measure_mode === `edit-bonds` && has_bond_edits}
       <div class="bond-edit-status">
         {#if added_bonds.length > 0}
           <span class="added">+{added_bonds.length} added</span>
@@ -1554,6 +1686,9 @@
         {#if removed_bonds.length > 0}
           <span class="removed">-{removed_bonds.length} removed</span>
         {/if}
+        {#if bond_order_overrides.length > 0}
+          <span class="changed">{bond_order_overrides.length} ordered</span>
+        {/if}
       </div>
     {/if}
 
@@ -1626,7 +1761,10 @@
     gap: 4pt;
     /* buttons need higher z-index than AtomLegend to make info/controls panes occlude legend */
     /* we also need crazy high z-index to make info/control pane occlude threlte/extras' <HTML> elements for site labels */
-    z-index: var(--struct-buttons-z-index, 100000000);
+    z-index: var(
+      --struct-buttons-z-index,
+      var(--z-index-overlay-controls, 100000000)
+    );
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
@@ -1792,6 +1930,10 @@
     color: #f44336;
     font-weight: bold;
   }
+  .bond-edit-status .changed {
+    color: var(--accent-color, #007acc);
+    font-weight: bold;
+  }
   /* CellSelect: position at left of legend, show on hover */
   .structure :global(.cell-select) {
     order: -1; /* Move to left side of AtomLegend flex container */

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

@@ -2,7 +2,7 @@ import type { ShowControlsProp } from '../controls';
 import type { ElementSymbol } from '../element';
 import Spinner from '../feedback/Spinner.svelte';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
-import type { AnyStructure, MeasureMode } from './';
+import type { AnyStructure, MeasureMode, StructureBond } from './';
 import type { CellType, SymmetrySettings } from '../symmetry';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
 import type { ComponentProps, Snippet } from 'svelte';
@@ -15,6 +15,7 @@ import StructureScene from './StructureScene.svelte';
 type EventHandler = (data: StructureHandlerData) => void;
 type $$ComponentProps = {
     structure?: AnyStructure;
+    bonds?: StructureBond[];
     scene_props?: ComponentProps<typeof StructureScene>;
     /**
      * Controls visibility configuration.
@@ -53,6 +54,8 @@ type $$ComponentProps = {
     error_msg?: string;
     performance_mode?: `quality` | `speed`;
     selected_sites?: number[];
+    highlighted_sites?: number[];
+    hovered_site_idx?: number | null;
     measured_sites?: number[];
     displayed_structure?: AnyStructure;
     hidden_elements?: Set<ElementSymbol>;
@@ -77,7 +80,8 @@ type $$ComponentProps = {
     on_fullscreen_change?: EventHandler;
     on_camera_move?: EventHandler;
     on_camera_reset?: EventHandler;
+    on_bonds_change?: (bonds: StructureBond[] | undefined) => void;
 } & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
-declare const Structure: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "fullscreen" | "hovered" | "controls_open" | "loading" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "wrapper" | "sym_data" | "png_dpi" | "error_msg" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "measured_sites" | "scene_props" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "measure_mode" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
+declare const Structure: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "fullscreen" | "hovered" | "controls_open" | "loading" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "wrapper" | "sym_data" | "png_dpi" | "error_msg" | "site_radius_overrides" | "atom_color_config" | "lattice_props" | "measure_mode" | "selected_sites" | "measured_sites" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "volumetric_data" | "isosurface_settings" | "element_mapping" | "bonds" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "highlighted_sites" | "hovered_site_idx" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;

package/dist/structure/StructureControls.svelte

@@ -112,21 +112,91 @@
     }
   })
 
+  const hex_color_pattern = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i
+  const color_mix_pattern =
+    /^color-mix\(in srgb,\s*(#[0-9a-f]{3}(?:[0-9a-f]{3})?)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i
+
+  const as_hex_color = (color: string | undefined, fallback: string): string =>
+    color?.match(hex_color_pattern)?.[0] ?? fallback
+
+  const parse_label_bg_color = (
+    color: string | undefined,
+    fallback_hex_color: string,
+    fallback_opacity: number,
+  ): { hex_color: string; opacity: number } => {
+    if (color === `transparent`) {
+      return { hex_color: fallback_hex_color, opacity: 0 }
+    }
+    const color_mix = color?.match(color_mix_pattern)
+    if (color_mix) {
+      const percentage = Math.max(0, Math.min(100, Number(color_mix[2])))
+      return {
+        hex_color: color_mix[1],
+        opacity: percentage / 100,
+      }
+    }
+    const hex_color = color?.match(hex_color_pattern)?.[0]
+    return hex_color === undefined
+      ? { hex_color: fallback_hex_color, opacity: fallback_opacity }
+      : { hex_color, opacity: 1 }
+  }
+
+  const default_site_label_color = as_hex_color(
+    DEFAULTS.structure.site_label_color,
+    `#111111`,
+  )
+  const default_site_label_bg = parse_label_bg_color(
+    DEFAULTS.structure.site_label_bg_color,
+    `#000000`,
+    0,
+  )
+  const initial_site_label_bg = parse_label_bg_color(
+    scene_props.site_label_bg_color,
+    default_site_label_bg.hex_color,
+    default_site_label_bg.opacity,
+  )
+
   // Atom label color management
   let site_label_hex_color = $state(
-    scene_props.site_label_color || DEFAULTS.structure.site_label_color,
-  )
-  let site_label_bg_hex_color = $state(
-    scene_props.site_label_bg_color || DEFAULTS.structure.site_label_bg_color,
+    as_hex_color(scene_props.site_label_color, default_site_label_color),
   )
-  let site_label_background_opacity = $state(0)
+  let site_label_bg_hex_color = $state(initial_site_label_bg.hex_color)
+  let site_label_background_opacity = $state(initial_site_label_bg.opacity)
+  let last_synced_site_label_color = scene_props.site_label_color
+  let last_synced_site_label_bg_color = scene_props.site_label_bg_color
 
   $effect(() => {
-    scene_props.site_label_color = site_label_hex_color
-    scene_props.site_label_bg_color =
-      `color-mix(in srgb, ${site_label_bg_hex_color} ${
-        format_num(site_label_background_opacity, `.1~%`)
-      }, transparent)`
+    const external_color_changed =
+      scene_props.site_label_color !== last_synced_site_label_color
+    const external_bg_changed =
+      scene_props.site_label_bg_color !== last_synced_site_label_bg_color
+
+    if (external_color_changed) {
+      site_label_hex_color = as_hex_color(
+        scene_props.site_label_color,
+        default_site_label_color,
+      )
+    }
+    if (external_bg_changed) {
+      const next_bg = parse_label_bg_color(
+        scene_props.site_label_bg_color,
+        default_site_label_bg.hex_color,
+        default_site_label_bg.opacity,
+      )
+      site_label_bg_hex_color = next_bg.hex_color
+      site_label_background_opacity = next_bg.opacity
+    }
+
+    if (!external_color_changed) scene_props.site_label_color = site_label_hex_color
+    if (!external_bg_changed) {
+      scene_props.site_label_bg_color =
+        `color-mix(in srgb, ${site_label_bg_hex_color} ${
+          format_num(site_label_background_opacity, `.1~%`)
+        }, transparent)`
+    }
+
+    last_synced_site_label_color = scene_props.site_label_color
+    last_synced_site_label_bg_color = scene_props.site_label_bg_color
   })
 
   // Ensure site_label_offset is always available
@@ -638,15 +708,19 @@
         scene_props.site_label_size = DEFAULTS.structure.site_label_size
         scene_props.site_label_padding = DEFAULTS.structure.site_label_padding
         scene_props.site_label_offset = [...DEFAULTS.structure.site_label_offset]
-        site_label_hex_color = DEFAULTS.structure.site_label_color
-        site_label_bg_hex_color = DEFAULTS.structure.site_label_bg_color
-        site_label_background_opacity = 0
+        site_label_hex_color = default_site_label_color
+        site_label_bg_hex_color = default_site_label_bg.hex_color
+        site_label_background_opacity = default_site_label_bg.opacity
       }}
     >
       <div class="pane-row">
         <label>
           Color
-          <input type="color" bind:value={site_label_hex_color} />
+          <input
+            type="color"
+            aria-label="Site label color"
+            bind:value={site_label_hex_color}
+          />
         </label>
         <label>
           Size
@@ -662,7 +736,11 @@
       <div class="pane-row">
         <label>
           Background
-          <input type="color" bind:value={site_label_bg_hex_color} />
+          <input
+            type="color"
+            aria-label="Site label background color"
+            bind:value={site_label_bg_hex_color}
+          />
         </label>
         <label>
           Opacity
@@ -671,6 +749,7 @@
             min="0"
             max="1"
             step="0.01"
+            aria-label="Site label background opacity"
             bind:value={site_label_background_opacity}
           />
           <input
@@ -678,6 +757,7 @@
             min="0"
             max="1"
             step="0.01"
+            aria-label="Site label background opacity slider"
             bind:value={site_label_background_opacity}
           />
         </label>
@@ -938,7 +1018,10 @@
       {/if}
 
       {#if !supercell_input_valid}
-        <div style="color: red; font-size: 0.8em; margin-top: 4pt">
+        <div
+          data-testid="supercell-input-error"
+          style="color: red; font-size: 0.8em; margin-top: 4pt"
+        >
           Invalid format. Use patterns like "2x2x2", "3x1x2", or "2".
         </div>
       {/if}
@@ -1083,11 +1166,15 @@
       title="Bonds"
       current_values={{
         bonding_strategy: scene_props.bonding_strategy,
+        auto_bond_order: scene_props.auto_bond_order,
+        aromatic_display: scene_props.aromatic_display,
         bond_color: scene_props.bond_color,
         bond_thickness: scene_props.bond_thickness,
       }}
       on_reset={() => {
         scene_props.bonding_strategy = DEFAULTS.structure.bonding_strategy
+        scene_props.auto_bond_order = DEFAULTS.structure.auto_bond_order
+        scene_props.aromatic_display = DEFAULTS.structure.aromatic_display
         scene_props.bond_color = DEFAULTS.structure.bond_color
         scene_props.bond_thickness = DEFAULTS.structure.bond_thickness
       }}
@@ -1104,6 +1191,33 @@
           {/each}
         </select>
       </label>
+      <label
+        style="gap: 6pt"
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.auto_bond_order.description,
+        })}
+      >
+        <input type="checkbox" bind:checked={scene_props.auto_bond_order} />
+        Auto bond order (perceive double/triple/aromatic)
+      </label>
+      {#if scene_props.auto_bond_order}
+        <label
+          {@attach tooltip({
+            content: SETTINGS_CONFIG.structure.aromatic_display.description,
+          })}
+        >
+          Aromatic display <select bind:value={scene_props.aromatic_display}>
+            {#each Object.entries(
+              SETTINGS_CONFIG.structure.aromatic_display.enum ?? {},
+            ) as
+              [value, label]
+              (value)
+            }
+              <option {value}>{label}</option>
+            {/each}
+          </select>
+        </label>
+      {/if}
       <label>
         Color <input type="color" bind:value={scene_props.bond_color} />
       </label>

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

@@ -26,6 +26,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "lattice_props" | "supercell_loading" | "volumetric_data" | "isosurface_settings">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "supercell_loading">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;