matterviz 0.3.1 → 0.3.3

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

@@ -78,6 +78,6 @@ type $$ComponentProps = {
     on_camera_move?: EventHandler;
     on_camera_reset?: EventHandler;
 } & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
-declare const Structure: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "structure" | "hovered" | "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "loading" | "error_msg" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "sym_data" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "measured_sites" | "scene_props" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "wrapper" | "png_dpi" | "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" | "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">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;

package/dist/structure/StructureControls.svelte

@@ -1,109 +1,209 @@
-<script lang="ts">import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors';
-import { format_num } from '../labels';
-import { SettingsSection } from '../layout';
-import { to_degrees, to_radians } from '../math';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { ColorScaleSelect } from '../plot';
-import { DEFAULTS, SETTINGS_CONFIG } from '../settings';
-import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte';
-import { Lattice, StructureScene } from './';
-import { is_valid_supercell_input } from './supercell';
-import Select from 'svelte-multiselect';
-import { tooltip } from 'svelte-multiselect/attachments';
-let { controls_open = $bindable(false), scene_props = $bindable({}), lattice_props = $bindable({
-    show_cell_vectors: DEFAULTS.structure.show_cell_vectors,
-    cell_edge_color: DEFAULTS.structure.cell_edge_color,
-    cell_edge_opacity: DEFAULTS.structure.cell_edge_opacity,
-    cell_surface_color: DEFAULTS.structure.cell_surface_color,
-    cell_surface_opacity: DEFAULTS.structure.cell_surface_opacity,
-    cell_edge_width: DEFAULTS.structure.cell_edge_width,
-}), show_image_atoms = $bindable(DEFAULTS.structure.show_image_atoms), supercell_scaling = $bindable(`1x1x1`), background_color = $bindable(), background_opacity = $bindable(DEFAULTS.background_opacity), color_scheme = $bindable(DEFAULTS.color_scheme), atom_color_config = $bindable({
-    mode: DEFAULTS.structure.atom_color_mode,
-    scale: DEFAULTS.structure.atom_color_scale,
-    scale_type: DEFAULTS.structure.atom_color_scale_type,
-}), structure = undefined, supercell_loading = $bindable(false), sym_data = null, cell_type = $bindable(`original`), volumetric_data = $bindable(), isosurface_settings = $bindable(), active_volume_idx = $bindable(0), pane_props = {}, toggle_props = {}, ...rest } = $props();
-// Color scheme selection state
-let color_scheme_selected = $state([color_scheme]);
-$effect(() => {
+<script lang="ts">
+  import type { ColorSchemeName, D3InterpolateName } from '../colors'
+  import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors'
+  import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte'
+  import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types'
+  import { format_num } from '../labels'
+  import { SettingsSection } from '../layout'
+  import { to_degrees, to_radians } from '../math'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { ColorScaleSelect } from '../plot'
+  import type { VectorLayerConfig } from '../settings'
+  import { DEFAULTS, SETTINGS_CONFIG, VECTOR_COLOR_MODES } from '../settings'
+  import type { AnyStructure } from './'
+  import {
+    default_vector_configs,
+    get_structure_vector_keys,
+    Lattice,
+    StructureScene,
+    VECTOR_PALETTE,
+  } from './'
+  import type { AtomColorConfig } from './atom-properties'
+  import { is_valid_supercell_input } from './supercell'
+  import type { CellType } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import type { ComponentProps } from 'svelte'
+  import Select from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
+
+  let {
+    controls_open = $bindable(false),
+    scene_props = $bindable({}),
+    lattice_props = $bindable({
+      show_cell_vectors: DEFAULTS.structure.show_cell_vectors,
+      cell_edge_color: DEFAULTS.structure.cell_edge_color,
+      cell_edge_opacity: DEFAULTS.structure.cell_edge_opacity,
+      cell_surface_color: DEFAULTS.structure.cell_surface_color,
+      cell_surface_opacity: DEFAULTS.structure.cell_surface_opacity,
+      cell_edge_width: DEFAULTS.structure.cell_edge_width,
+    }),
+    show_image_atoms = $bindable(DEFAULTS.structure.show_image_atoms),
+    supercell_scaling = $bindable(`1x1x1`),
+    background_color = $bindable(),
+    background_opacity = $bindable(DEFAULTS.background_opacity),
+    color_scheme = $bindable(DEFAULTS.color_scheme),
+    atom_color_config = $bindable({
+      mode: DEFAULTS.structure.atom_color_mode,
+      scale: DEFAULTS.structure.atom_color_scale,
+      scale_type: DEFAULTS.structure.atom_color_scale_type,
+    }),
+    structure = undefined,
+    supercell_loading = $bindable(false),
+    sym_data = null,
+    cell_type = $bindable(`original`),
+    volumetric_data = $bindable<VolumetricData[]>(),
+    isosurface_settings = $bindable<IsosurfaceSettings>(),
+    active_volume_idx = $bindable(0),
+    pane_props = {},
+    toggle_props = {},
+    ...rest
+  }: Omit<ComponentProps<typeof DraggablePane>, `children`> & {
+    controls_open?: boolean // Control pane state
+    scene_props?: ComponentProps<typeof StructureScene>
+    lattice_props?: ComponentProps<typeof Lattice>
+    show_image_atoms?: boolean
+    supercell_scaling?: string
+    background_color?: string
+    background_opacity?: number
+    color_scheme?: string
+    atom_color_config?: Partial<AtomColorConfig>
+    structure?: AnyStructure
+    supercell_loading?: boolean
+    sym_data?: MoyoDataset | null
+    cell_type?: CellType // Cell type: original, conventional, or primitive
+    volumetric_data?: VolumetricData[] // Volumetric data volumes for isosurface controls
+    isosurface_settings?: IsosurfaceSettings // Isosurface rendering settings
+    active_volume_idx?: number // Active volume index
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+  } = $props()
+
+  // Color scheme selection state
+  let color_scheme_selected = $state([color_scheme])
+  $effect(() => {
     if (color_scheme_selected.length > 0) {
-        color_scheme = color_scheme_selected[0];
+      color_scheme = color_scheme_selected[0] as string
     }
-});
-// Atom color config selection state
-let color_scale_selected = $state([
+  })
+
+  // Atom color config selection state
+  let color_scale_selected = $state<D3InterpolateName[]>([
     atom_color_config.scale || DEFAULTS.structure.atom_color_scale,
-]);
-// Sync local selection to config
-$effect(() => {
-    if (color_scale_selected[0] && color_scale_selected[0] !== atom_color_config.scale)
-        atom_color_config.scale = color_scale_selected[0];
-});
-// Sync config to local selection (for external updates)
-$effect(() => {
-    if (atom_color_config.scale && atom_color_config.scale !== color_scale_selected[0])
-        color_scale_selected = [atom_color_config.scale];
-});
-// Auto-set scale_type based on mode
-$effect(() => {
+  ])
+
+  // Sync local selection to config
+  $effect(() => {
+    if (
+      color_scale_selected[0] && color_scale_selected[0] !== atom_color_config.scale
+    ) atom_color_config.scale = color_scale_selected[0]
+  })
+  // Sync config to local selection (for external updates)
+  $effect(() => {
+    if (
+      atom_color_config.scale && atom_color_config.scale !== color_scale_selected[0]
+    ) color_scale_selected = [atom_color_config.scale]
+  })
+  // Auto-set scale_type based on mode
+  $effect(() => {
     if (atom_color_config.mode === `wyckoff`) {
-        atom_color_config.scale_type = `categorical`;
+      atom_color_config.scale_type = `categorical`
+    } else if (atom_color_config.mode === `coordination`) {
+      atom_color_config.scale_type = `continuous`
     }
-    else if (atom_color_config.mode === `coordination`) {
-        atom_color_config.scale_type = `continuous`;
-    }
-});
-// 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);
-let site_label_background_opacity = $state(0);
-$effect(() => {
-    scene_props.site_label_color = site_label_hex_color;
+  })
+
+  // 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,
+  )
+  let site_label_background_opacity = $state(0)
+
+  $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)`;
-});
-// Ensure site_label_offset is always available
-scene_props.site_label_offset ??= [...DEFAULTS.structure.site_label_offset];
-// Detect if structure has force data
-let has_forces = $derived(structure?.sites?.some((site) => site.properties?.force && Array.isArray(site.properties.force)) ?? false);
-// Detect if structure has lattice (can create supercells)
-let has_lattice = $derived(structure && `lattice` in structure && structure.lattice !== undefined);
-// Validate supercell input
-let supercell_input_valid = $derived(is_valid_supercell_input(supercell_scaling));
-// Ensure rotation is always an array
-$effect(() => {
-    scene_props.rotation ??= [...DEFAULTS.structure.rotation];
-});
-let rotation_degrees = $derived(scene_props.rotation?.map((rad) => {
-    const deg = to_degrees(rad);
-    // Convert to [0, 360] range for UI display
-    return ((deg % 360) + 360) % 360;
-}) ?? [0, 0, 0]);
-function update_rotation(axis, degrees) {
-    scene_props.rotation ??= [0, 0, 0];
-    const axis_index = { x: 0, y: 1, z: 2 }[axis];
-    const clamped = Math.max(0, Math.min(360, degrees));
-    const norm = ((clamped % 360) + 360) % 360;
-    scene_props.rotation[axis_index] = to_radians(norm);
+      `color-mix(in srgb, ${site_label_bg_hex_color} ${
+        format_num(site_label_background_opacity, `.1~%`)
+      }, transparent)`
+  })
+
+  // Ensure site_label_offset is always available
+  scene_props.site_label_offset ??= [...DEFAULTS.structure.site_label_offset]
+
+  // Collect available vector property keys from the structure
+  let available_vector_keys = $derived(
+    structure ? get_structure_vector_keys(structure) : [],
+  )
+  function is_key_visible(key: string): boolean {
+    return scene_props.vector_configs?.[key]?.visible !== false
+  }
+
+  let any_vectors_visible = $derived(available_vector_keys.some(is_key_visible))
+
+  function update_vector_config(key: string, patch: Partial<VectorLayerConfig>) {
+    const configs = { ...scene_props.vector_configs }
+    configs[key] = {
+      ...(configs[key] ?? { visible: true, color: null, scale: null }),
+      ...patch,
+    }
+    scene_props.vector_configs = configs
+  }
+
+  // Detect if structure has lattice (can create supercells)
+  let has_lattice = $derived(
+    structure && `lattice` in structure && structure.lattice !== undefined,
+  )
+
+  // Validate supercell input
+  let supercell_input_valid = $derived(is_valid_supercell_input(supercell_scaling))
+
+  // Ensure rotation is always an array
+  $effect(() => {
+    scene_props.rotation ??= [...DEFAULTS.structure.rotation]
+  })
+
+  let rotation_degrees = $derived(
+    scene_props.rotation?.map((rad) => {
+      const deg = to_degrees(rad)
+      // Convert to [0, 360] range for UI display
+      return ((deg % 360) + 360) % 360
+    }) ?? [0, 0, 0],
+  )
+
+  function update_rotation(axis: `x` | `y` | `z`, degrees: number) {
+    scene_props.rotation ??= [0, 0, 0]
+    const axis_index = { x: 0, y: 1, z: 2 }[axis]
+    const clamped = Math.max(0, Math.min(360, degrees))
+    const norm = ((clamped % 360) + 360) % 360
+    scene_props.rotation[axis_index] = to_radians(norm)
     // Trigger reactivity by creating new array
-    scene_props.rotation = [...scene_props.rotation];
-}
-// Helper function to get example set of colors from an element color scheme
-function get_representative_colors(scheme_name) {
-    const scheme = ELEMENT_COLOR_SCHEMES[scheme_name];
-    if (!scheme)
-        return [];
+    scene_props.rotation = [...scene_props.rotation]
+  }
+
+  // Helper function to get example set of colors from an element color scheme
+  function get_representative_colors(scheme_name: string): string[] {
+    const scheme = ELEMENT_COLOR_SCHEMES[scheme_name as ColorSchemeName]
+    if (!scheme) return []
+
     // Get colors for common elements: H, C, N, O, Fe, Ca, Si, Al
-    const sample_elements = [`H`, `C`, `N`, `O`, `Fe`, `Ca`, `Si`, `Al`];
+    const sample_elements = [`H`, `C`, `N`, `O`, `Fe`, `Ca`, `Si`, `Al`]
     return sample_elements
-        .slice(0, 4) // Take first 4
-        .map((el) => scheme[el] || scheme.H || `#cccccc`)
-        .filter(Boolean);
-}
+      .slice(0, 4) // Take first 4
+      .map((el) => scheme[el] || scheme.H || `#cccccc`)
+      .filter(Boolean)
+  }
 </script>
 
 <DraggablePane
   bind:show={controls_open}
-  pane_props={{ ...pane_props, class: `controls-pane ${pane_props?.class ?? ``}` }}
+  resizable="both"
+  pane_props={{
+    ...pane_props,
+    class: `controls-pane ${pane_props?.class ?? ``}`,
+    style: `--pane-max-height: 70vh; ${pane_props?.style ?? ``}`,
+  }}
   toggle_props={{
     title: controls_open ? `` : `Structure controls`,
     ...toggle_props,
@@ -111,6 +211,14 @@ function get_representative_colors(scheme_name) {
   }}
   {...rest}
 >
+  {#if volumetric_data?.length && isosurface_settings}
+    <IsosurfaceControls
+      bind:settings={isosurface_settings}
+      volumes={volumetric_data}
+      bind:active_volume_idx
+    />
+  {/if}
+
   <SettingsSection
     title="Visibility"
     current_values={{
@@ -119,7 +227,7 @@ function get_representative_colors(scheme_name) {
       show_image_atoms,
       show_site_labels: scene_props.show_site_labels,
       show_site_indices: scene_props.show_site_indices,
-      show_force_vectors: scene_props.show_force_vectors,
+      vector_configs: scene_props.vector_configs,
       show_cell_vectors: lattice_props.show_cell_vectors,
     }}
     on_reset={() => {
@@ -127,7 +235,7 @@ function get_representative_colors(scheme_name) {
       scene_props.show_bonds = DEFAULTS.structure.show_bonds
       scene_props.show_site_labels = DEFAULTS.structure.show_site_labels
       scene_props.show_site_indices = DEFAULTS.structure.show_site_indices
-      scene_props.show_force_vectors = DEFAULTS.structure.show_force_vectors
+      scene_props.vector_configs = default_vector_configs(available_vector_keys)
       show_image_atoms = DEFAULTS.structure.show_image_atoms
       lattice_props.show_cell_vectors = DEFAULTS.structure.show_cell_vectors
     }}
@@ -167,16 +275,43 @@ function get_representative_colors(scheme_name) {
       <input type="checkbox" bind:checked={scene_props.show_site_indices} />
       Site Indices
     </label>
-    {#if has_forces}
-      <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.show_force_vectors.description,
-        })}
-        style="gap: 6pt"
-      >
-        <input type="checkbox" bind:checked={scene_props.show_force_vectors} />
-        Force Vectors
-      </label>
+    {#if available_vector_keys.length > 0}
+      {#each available_vector_keys as key, idx (key)}
+        <label
+          {@attach tooltip({
+            content: `Toggle ${key} vectors`,
+          })}
+          style="gap: 4pt"
+        >
+          <input
+            type="checkbox"
+            checked={is_key_visible(key)}
+            onchange={() => update_vector_config(key, { visible: !is_key_visible(key) })}
+          />
+          <input
+            type="color"
+            aria-label={`${key} vector color`}
+            value={scene_props.vector_configs?.[key]?.color ??
+            VECTOR_PALETTE[idx % VECTOR_PALETTE.length]}
+            onchange={(evt) =>
+            update_vector_config(key, {
+              color: (evt.target as HTMLInputElement).value,
+            })}
+            style="width: 22px; height: 22px; padding: 0; border: none; cursor: pointer"
+          />
+          {key}
+          {#if scene_props.vector_configs?.[key]?.color != null}
+            <button
+              type="button"
+              aria-label={`Reset ${key} color to default`}
+              onclick={() => update_vector_config(key, { color: null })}
+              style="padding: 0 3pt; font-size: 0.8em; line-height: 1; cursor: pointer"
+            >
+              ×
+            </button>
+          {/if}
+        </label>
+      {/each}
     {/if}
     <label style="gap: 6pt">
       <input type="checkbox" bind:checked={lattice_props.show_cell_vectors} />
@@ -424,9 +559,7 @@ function get_representative_colors(scheme_name) {
       Same size atoms
       <input type="checkbox" bind:checked={scene_props.same_size_atoms} />
     </label>
-    <span
-      class="label"
-      style="align-items: start"
+    <label
       {@attach tooltip({ content: SETTINGS_CONFIG.color_scheme.description })}
     >
       Color scheme
@@ -436,7 +569,10 @@ function get_representative_colors(scheme_name) {
         minSelect={1}
         bind:selected={color_scheme_selected}
         liOptionStyle="padding: 3pt 6pt;"
-        style="width: 10em; border: none"
+        liSelectedStyle="background-color: transparent;"
+        ulSelectedStyle="display: contents;"
+        inputStyle="flex: none; min-width: 0; width: 0; opacity: 0;"
+        style="flex: 1; min-width: 0; border: none; margin-left: 4pt"
         aria-label="Color scheme"
       >
         {#snippet children({ option })}
@@ -454,13 +590,12 @@ function get_representative_colors(scheme_name) {
           </div>
         {/snippet}
       </Select>
-    </span>
+    </label>
     <label
-      style="align-items: start"
       {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_mode.description })}
     >
       Atom coloring
-      <select bind:value={atom_color_config.mode} style="font-size: 0.95em">
+      <select bind:value={atom_color_config.mode}>
         {#each Object.entries(SETTINGS_CONFIG.structure.atom_color_mode.enum || {}) as
           [value, label]
           (value)
@@ -470,9 +605,7 @@ function get_representative_colors(scheme_name) {
       </select>
     </label>
     {#if atom_color_config.mode !== `element`}
-      <span
-        class="label"
-        style="align-items: start; white-space: nowrap"
+      <label
         {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_scale.description })}
       >
         Color scale
@@ -482,12 +615,11 @@ function get_representative_colors(scheme_name) {
           colorbar={{
             tick_labels: 0,
             wrapper_style: `width: 100%;`,
-            title_style: `font-size: 0.95em;`,
           }}
-          style="width: 100%; border: none"
+          style="flex: 1; min-width: 0; border: none"
           aria-label="Color scale"
         />
-      </span>
+      </label>
     {/if}
   </SettingsSection>
 
@@ -587,39 +719,149 @@ function get_representative_colors(scheme_name) {
     </SettingsSection>
   {/if}
 
-  {#if has_forces && scene_props.show_force_vectors}
+  {#if available_vector_keys.length > 0 && any_vectors_visible}
     <SettingsSection
-      title="Force Vectors"
+      title="Site Vectors"
       current_values={{
-        force_scale: scene_props.force_scale,
-        force_color: scene_props.force_color,
+        vector_scale: scene_props.vector_scale,
+        vector_color: scene_props.vector_color,
+        vector_normalize: scene_props.vector_normalize,
+        vector_uniform_thickness: scene_props.vector_uniform_thickness,
+        vector_color_mode: scene_props.vector_color_mode,
+        vector_color_scale: scene_props.vector_color_scale,
+        vector_origin_gap: scene_props.vector_origin_gap,
       }}
       on_reset={() => {
-        scene_props.force_scale = DEFAULTS.structure.force_scale
-        scene_props.force_color = DEFAULTS.structure.force_color
+        scene_props.vector_scale = DEFAULTS.structure.vector_scale
+        scene_props.vector_color = DEFAULTS.structure.vector_color
+        scene_props.vector_color_mode = DEFAULTS.structure.vector_color_mode
+        scene_props.vector_color_scale = DEFAULTS.structure.vector_color_scale
+        scene_props.vector_normalize = DEFAULTS.structure.vector_normalize
+        scene_props.vector_uniform_thickness =
+          DEFAULTS.structure.vector_uniform_thickness
+        scene_props.vector_origin_gap = DEFAULTS.structure.vector_origin_gap
+        for (const key of available_vector_keys) {
+          update_vector_config(key, { scale: null })
+        }
       }}
     >
       <label>
-        Scale
+        Global Scale
         <input
           type="number"
           min={0.001}
           max={5}
           step={0.001}
-          bind:value={scene_props.force_scale}
+          bind:value={scene_props.vector_scale}
         />
         <input
           type="range"
           min={0.001}
           max={5}
           step={0.001}
-          bind:value={scene_props.force_scale}
+          bind:value={scene_props.vector_scale}
         />
       </label>
-      <label>
-        Color
-        <input type="color" bind:value={scene_props.force_color} />
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.vector_normalize.description,
+        })}
+        style="gap: 6pt"
+      >
+        <input type="checkbox" bind:checked={scene_props.vector_normalize} />
+        Normalize
+      </label>
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.vector_uniform_thickness.description,
+        })}
+        style="gap: 6pt"
+      >
+        <input type="checkbox" bind:checked={scene_props.vector_uniform_thickness} />
+        Uniform Thickness
       </label>
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.vector_color_mode.description,
+        })}
+      >
+        Color Mode
+        <select bind:value={scene_props.vector_color_mode}>
+          {#each VECTOR_COLOR_MODES as mode (mode)}
+            <option value={mode}>{mode.replaceAll(`_`, ` `)}</option>
+          {/each}
+        </select>
+      </label>
+      {#if scene_props.vector_color_mode === `magnitude`}
+        <label>
+          Scale
+          <ColorScaleSelect
+            bind:value={scene_props.vector_color_scale}
+            style="max-width: 180px"
+          />
+        </label>
+      {/if}
+      {#if scene_props.vector_color_mode === `uniform`}
+        <label>
+          Color
+          <input type="color" bind:value={scene_props.vector_color} />
+        </label>
+      {/if}
+      {#if available_vector_keys.length > 1}
+        <label
+          {@attach tooltip({
+            content: SETTINGS_CONFIG.structure.vector_origin_gap.description,
+          })}
+        >
+          Origin Gap
+          <input
+            type="number"
+            min={0}
+            max={0.5}
+            step={0.02}
+            bind:value={scene_props.vector_origin_gap}
+          />
+          <input
+            type="range"
+            min={0}
+            max={0.5}
+            step={0.02}
+            bind:value={scene_props.vector_origin_gap}
+          />
+        </label>
+        {#each available_vector_keys as key (key)}
+          {#if is_key_visible(key)}
+            {@const on_scale = (evt: Event) => {
+        const parsed = parseFloat((evt.target as HTMLInputElement).value)
+        update_vector_config(key, { scale: Number.isNaN(parsed) ? 1.0 : parsed })
+      }}
+            <label
+              {@attach tooltip({
+                content:
+                  `Scale multiplier for ${key} arrows (applied on top of global scale)`,
+              })}
+            >
+              {key} scale
+              <input
+                type="number"
+                min={0.1}
+                max={5}
+                step={0.1}
+                value={scene_props.vector_configs?.[key]?.scale ?? 1.0}
+                onchange={on_scale}
+              />
+              <input
+                type="range"
+                min={0.1}
+                max={5}
+                step={0.1}
+                value={scene_props.vector_configs?.[key]?.scale ?? 1.0}
+                oninput={on_scale}
+              />
+            </label>
+          {/if}
+        {/each}
+      {/if}
     </SettingsSection>
   {/if}
 
@@ -884,14 +1126,6 @@ function get_representative_colors(scheme_name) {
       </label>
     </SettingsSection>
   {/if}
-
-  {#if volumetric_data?.length && isosurface_settings}
-    <IsosurfaceControls
-      bind:settings={isosurface_settings}
-      volumes={volumetric_data}
-      bind:active_volume_idx
-    />
-  {/if}
 </DraggablePane>
 
 <style>
@@ -925,7 +1159,7 @@ function get_representative_colors(scheme_name) {
     justify-content: space-between;
     width: 100%;
   }
-  label, .label {
+  label {
     display: flex;
     align-items: center;
     gap: 10pt;

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

@@ -1,5 +1,5 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
+import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AnyStructure } from './';
 import { Lattice, StructureScene } from './';
 import type { AtomColorConfig } from './atom-properties';