matterviz 0.3.6 → 0.4.0

package/dist/src/lib/structure/StructureControls.svelte

@@ -1,1273 +0,0 @@
-<script lang="ts">
-  import type { ColorSchemeName, D3InterpolateName } from '$lib/colors'
-  import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '$lib/colors'
-  import IsosurfaceControls from '$lib/isosurface/IsosurfaceControls.svelte'
-  import type { IsosurfaceSettings, VolumetricData } from '$lib/isosurface/types'
-  import { format_num } from '$lib/labels'
-  import { SettingsSection } from '$lib/layout'
-  import { to_degrees, to_radians } from '$lib/math'
-  import DraggablePane from '$lib/overlays/DraggablePane.svelte'
-  import { ColorScaleSelect } from '$lib/plot'
-  import type { VectorLayerConfig } from '$lib/settings'
-  import { DEFAULTS, SETTINGS_CONFIG, VECTOR_COLOR_MODES } from '$lib/settings'
-  import type { AnyStructure } from '$lib/structure'
-  import {
-    default_vector_configs,
-    get_structure_vector_keys,
-    Lattice,
-    StructureScene,
-    VECTOR_PALETTE,
-  } from '$lib/structure'
-  import type { AtomColorConfig } from '$lib/structure/atom-properties'
-  import { is_valid_supercell_input } from '$lib/structure/supercell'
-  import type { CellType } from '$lib/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] as string
-    }
-  })
-
-  // 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(() => {
-    if (atom_color_config.mode === `wyckoff`) {
-      atom_color_config.scale_type = `categorical`
-    } else if (atom_color_config.mode === `coordination`) {
-      atom_color_config.scale_type = `continuous`
-    }
-  })
-
-  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(
-    as_hex_color(scene_props.site_label_color, default_site_label_color),
-  )
-  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(() => {
-    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
-  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) : [],
-  )
-  const is_key_visible = (key: string): boolean =>
-    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: 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`]
-    return sample_elements
-      .slice(0, 4) // Take first 4
-      .map((el) => scheme[el] || scheme.H || `#cccccc`)
-      .filter(Boolean)
-  }
-</script>
-
-<DraggablePane
-  bind:show={controls_open}
-  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,
-    class: `structure-controls-toggle ${toggle_props?.class ?? ``}`,
-  }}
-  {...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={{
-      show_atoms: scene_props.show_atoms,
-      show_bonds: scene_props.show_bonds,
-      show_image_atoms,
-      show_site_labels: scene_props.show_site_labels,
-      show_site_indices: scene_props.show_site_indices,
-      vector_configs: scene_props.vector_configs,
-      show_cell_vectors: lattice_props.show_cell_vectors,
-    }}
-    on_reset={() => {
-      scene_props.show_atoms = DEFAULTS.structure.show_atoms
-      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.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
-    }}
-    style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 12pt"
-  >
-    Show <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_atoms.description })}
-      style="gap: 6pt"
-    >
-      <input type="checkbox" bind:checked={scene_props.show_atoms} />
-      Atoms
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_image_atoms.description })}
-      style="gap: 6pt"
-    >
-      <input type="checkbox" bind:checked={show_image_atoms} />
-      Image Atoms
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_site_labels.description })}
-      style="gap: 6pt"
-    >
-      <input type="checkbox" bind:checked={scene_props.show_site_labels} />
-      Site Labels
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_site_indices.description })}
-      style="gap: 6pt"
-    >
-      <input type="checkbox" bind:checked={scene_props.show_site_indices} />
-      Site Indices
-    </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.currentTarget.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} />
-      Lattice Vectors
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_bonds.description })}
-      style="gap: 6pt"
-    >
-      Bonds:
-      <select bind:value={scene_props.show_bonds}>
-        {#each Object.entries(SETTINGS_CONFIG.structure.show_bonds.enum ?? {}) as
-          [value, label]
-          (value)
-        }
-          <option {value}>{label}</option>
-        {/each}
-      </select>
-    </label>
-  </SettingsSection>
-
-  <SettingsSection
-    title="Camera"
-    current_values={{
-      camera_projection: scene_props.camera_projection,
-      auto_rotate: scene_props.auto_rotate,
-      rotate_speed: scene_props.rotate_speed,
-      zoom_speed: scene_props.zoom_speed,
-      pan_speed: scene_props.pan_speed,
-      zoom_to_cursor: scene_props.zoom_to_cursor,
-      rotation_damping: scene_props.rotation_damping,
-      rotation: scene_props.rotation,
-    }}
-    on_reset={() => {
-      scene_props.camera_projection = DEFAULTS.structure.camera_projection
-      scene_props.auto_rotate = DEFAULTS.structure.auto_rotate
-      scene_props.rotate_speed = DEFAULTS.structure.rotate_speed
-      scene_props.zoom_speed = DEFAULTS.structure.zoom_speed
-      scene_props.pan_speed = DEFAULTS.structure.pan_speed
-      scene_props.zoom_to_cursor = DEFAULTS.structure.zoom_to_cursor
-      scene_props.rotation_damping = DEFAULTS.structure.rotation_damping
-      scene_props.rotation = [...DEFAULTS.structure.rotation]
-    }}
-  >
-    <label>
-      <span
-        {@attach tooltip({ content: SETTINGS_CONFIG.structure.camera_projection.description })}
-      >
-        Projection
-      </span>
-      <select bind:value={scene_props.camera_projection}>
-        {#each Object.entries(
-            SETTINGS_CONFIG.structure.camera_projection.enum ?? {},
-          ) as
-          [value, label]
-          (value)
-        }
-          <option {value}>{label}</option>
-        {/each}
-      </select>
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.auto_rotate.description })}
-    >
-      Auto-rotate speed
-      <input
-        type="number"
-        min={0}
-        max={2}
-        step={0.01}
-        bind:value={scene_props.auto_rotate}
-      />
-      <input
-        type="range"
-        min={0}
-        max={2}
-        step={0.01}
-        bind:value={scene_props.auto_rotate}
-      />
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.rotate_speed.description })}
-    >
-      Rotate speed
-      <input
-        type="number"
-        min={0}
-        max={2}
-        step={0.05}
-        bind:value={scene_props.rotate_speed}
-      />
-      <input
-        type="range"
-        min={0}
-        max={2}
-        step={0.05}
-        bind:value={scene_props.rotate_speed}
-      />
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.zoom_speed.description })}
-    >
-      Zoom speed
-      <input
-        type="number"
-        min={0.1}
-        max={0.8}
-        step={0.02}
-        bind:value={scene_props.zoom_speed}
-      />
-      <input
-        type="range"
-        min={0.1}
-        max={0.8}
-        step={0.02}
-        bind:value={scene_props.zoom_speed}
-      />
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.pan_speed.description })}
-    >
-      Pan speed
-      <input
-        type="number"
-        min={0}
-        max={2}
-        step={0.01}
-        bind:value={scene_props.pan_speed}
-      />
-      <input
-        type="range"
-        min={0}
-        max={2}
-        step={0.01}
-        bind:value={scene_props.pan_speed}
-      />
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.zoom_to_cursor.description })}
-    >
-      <input type="checkbox" bind:checked={scene_props.zoom_to_cursor} />
-      <span>Zoom to cursor</span>
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.rotation_damping.description })}
-    >
-      Rotation damping
-      <input
-        type="number"
-        min={0.01}
-        max={0.3}
-        step={0.01}
-        bind:value={scene_props.rotation_damping}
-      />
-      <input
-        type="range"
-        min={0.01}
-        max={0.3}
-        step={0.01}
-        bind:value={scene_props.rotation_damping}
-      />
-    </label>
-
-    Axis Rotation
-    <div class="rotation-axes">
-      {#each AXIS_COLORS as [axis, color], idx (axis)}
-        <div>
-          <div
-            {@attach tooltip()}
-            title="{axis}-axis rotation in degrees"
-            style:color
-          >
-            <span>{axis.toUpperCase()} = </span>
-            <input
-              type="number"
-              min={0}
-              max={360}
-              step={1}
-              value={rotation_degrees[idx].toFixed(0)}
-              oninput={(event) =>
-              update_rotation(axis, Number(event.currentTarget.value))}
-              style:color
-              style="margin: 0"
-            />
-            °
-          </div>
-          <input
-            type="range"
-            min={0}
-            max={360}
-            step={1}
-            value={rotation_degrees[idx].toFixed(0)}
-            oninput={(event) => update_rotation(axis, Number(event.currentTarget.value))}
-            style:--thumb-color={color}
-            style="width: 100%"
-          />
-        </div>
-      {/each}
-    </div>
-  </SettingsSection>
-
-  <SettingsSection
-    title="Atoms"
-    current_values={{
-      atom_radius: scene_props.atom_radius,
-      same_size_atoms: scene_props.same_size_atoms,
-      color_scheme,
-      ...atom_color_config,
-    }}
-    on_reset={() => {
-      scene_props.atom_radius = DEFAULTS.structure.atom_radius
-      scene_props.same_size_atoms = DEFAULTS.structure.same_size_atoms
-      color_scheme = DEFAULTS.color_scheme
-      color_scheme_selected = [DEFAULTS.color_scheme]
-      atom_color_config.mode = DEFAULTS.structure.atom_color_mode
-      atom_color_config.scale = DEFAULTS.structure.atom_color_scale
-      atom_color_config.scale_type = DEFAULTS.structure.atom_color_scale_type
-      color_scale_selected = [DEFAULTS.structure.atom_color_scale]
-    }}
-  >
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_radius.description })}
-    >
-      Radius <small>(Å)</small>
-      <input
-        type="number"
-        min={0.2}
-        max={2}
-        step={0.05}
-        bind:value={scene_props.atom_radius}
-      />
-      <input
-        type="range"
-        min={0.2}
-        max={2}
-        step={0.05}
-        bind:value={scene_props.atom_radius}
-      />
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.same_size_atoms.description })}
-    >
-      Same size atoms
-      <input type="checkbox" bind:checked={scene_props.same_size_atoms} />
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.color_scheme.description })}
-    >
-      Color scheme
-      <Select
-        options={Object.keys(ELEMENT_COLOR_SCHEMES)}
-        maxSelect={1}
-        minSelect={1}
-        bind:selected={color_scheme_selected}
-        liOptionStyle="padding: 3pt 6pt;"
-        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 })}
-          {@const option_style =
-            `display: flex; align-items: center; gap: 6pt; justify-content: space-between;`}
-          <div style={option_style}>
-            {option}
-            <div style="display: flex; gap: 3pt">
-              {#each get_representative_colors(String(option)) as color (color)}
-                {@const color_style =
-                `width: 15px; height: 15px; border-radius: 2px; background: ${color};`}
-                <div style={color_style}></div>
-              {/each}
-            </div>
-          </div>
-        {/snippet}
-      </Select>
-    </label>
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_mode.description })}
-    >
-      Atom coloring
-      <select bind:value={atom_color_config.mode}>
-        {#each Object.entries(SETTINGS_CONFIG.structure.atom_color_mode.enum || {}) as
-          [value, label]
-          (value)
-        }
-          <option {value} disabled={!sym_data && value === `wyckoff`}>{label}</option>
-        {/each}
-      </select>
-    </label>
-    {#if atom_color_config.mode !== `element`}
-      <label
-        {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_scale.description })}
-      >
-        Color scale
-        <ColorScaleSelect
-          bind:value={atom_color_config.scale}
-          bind:selected={color_scale_selected}
-          colorbar={{
-            tick_labels: 0,
-            wrapper_style: `width: 100%;`,
-          }}
-          style="flex: 1; min-width: 0; border: none"
-          aria-label="Color scale"
-        />
-      </label>
-    {/if}
-  </SettingsSection>
-
-  {#if scene_props.show_site_labels || scene_props.show_site_indices}
-    <SettingsSection
-      title="Labels"
-      current_values={{
-        site_label_size: scene_props.site_label_size,
-        site_label_hex_color,
-        site_label_bg_hex_color,
-        site_label_background_opacity,
-        site_label_padding: scene_props.site_label_padding,
-        site_label_offset: scene_props.site_label_offset,
-      }}
-      on_reset={() => {
-        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 = 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"
-            aria-label="Site label color"
-            bind:value={site_label_hex_color}
-          />
-        </label>
-        <label>
-          Size
-          <input
-            type="range"
-            min="0.5"
-            max="2"
-            step="0.1"
-            bind:value={scene_props.site_label_size}
-          />
-        </label>
-      </div>
-      <div class="pane-row">
-        <label>
-          Background
-          <input
-            type="color"
-            aria-label="Site label background color"
-            bind:value={site_label_bg_hex_color}
-          />
-        </label>
-        <label>
-          Opacity
-          <input
-            type="number"
-            min="0"
-            max="1"
-            step="0.01"
-            aria-label="Site label background opacity"
-            bind:value={site_label_background_opacity}
-          />
-          <input
-            type="range"
-            min="0"
-            max="1"
-            step="0.01"
-            aria-label="Site label background opacity slider"
-            bind:value={site_label_background_opacity}
-          />
-        </label>
-      </div>
-      <div class="pane-row">
-        <label>
-          Padding
-          <input
-            type="number"
-            min="0"
-            max="10"
-            step="1"
-            bind:value={scene_props.site_label_padding}
-          />
-          <input
-            type="range"
-            min="0"
-            max="10"
-            step="1"
-            bind:value={scene_props.site_label_padding}
-          />
-        </label>
-      </div>
-      <div class="pane-row">
-        Offset
-        {#each [`X`, `Y`, `Z`] as axis, idx (axis)}
-          <label>
-            {axis}
-            <input
-              type="number"
-              min="-1"
-              max="1"
-              step="0.1"
-              bind:value={scene_props.site_label_offset![idx]}
-            />
-          </label>
-        {/each}
-      </div>
-    </SettingsSection>
-  {/if}
-
-  {#if available_vector_keys.length > 0 && any_vectors_visible}
-    <SettingsSection
-      title="Site Vectors"
-      current_values={{
-        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.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>
-        Global Scale
-        <input
-          type="number"
-          min={0.001}
-          max={5}
-          step={0.001}
-          bind:value={scene_props.vector_scale}
-        />
-        <input
-          type="range"
-          min={0.001}
-          max={5}
-          step={0.001}
-          bind:value={scene_props.vector_scale}
-        />
-      </label>
-      <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 & { currentTarget: HTMLInputElement },
-      ) => {
-        const parsed = parseFloat(evt.currentTarget.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}
-
-  {#if has_lattice}
-    <SettingsSection
-      title="Cell"
-      current_values={{
-        cell_edge_color: lattice_props.cell_edge_color,
-        cell_edge_opacity: lattice_props.cell_edge_opacity,
-        cell_surface_color: lattice_props.cell_surface_color,
-        cell_surface_opacity: lattice_props.cell_surface_opacity,
-        supercell_scaling,
-        cell_type,
-      }}
-      on_reset={() => {
-        lattice_props.cell_edge_color = DEFAULTS.structure.cell_edge_color
-        lattice_props.cell_edge_opacity = DEFAULTS.structure.cell_edge_opacity
-        lattice_props.cell_surface_color = DEFAULTS.structure.cell_surface_color
-        lattice_props.cell_surface_opacity = DEFAULTS.structure.cell_surface_opacity
-        supercell_scaling = `1x1x1`
-        cell_type = `original`
-      }}
-    >
-      <label
-        {@attach tooltip({
-          content: sym_data
-            ? `Transform to conventional or primitive cell using crystallographic symmetry`
-            : `Symmetry analysis required. Wait for analysis to complete.`,
-        })}
-      >
-        <span>Cell Type</span>
-        <select bind:value={cell_type} disabled={!sym_data}>
-          <option value="original">Original</option>
-          <option value="conventional">Conventional</option>
-          <option value="primitive">Primitive</option>
-        </select>
-      </label>
-      <label>
-        <span
-          {@attach tooltip({ content: `Create supercells by repeating the unit cell. Examples: "2x2x2", "3x1x2", or "2"` })}
-        >
-          Supercell Scaling
-        </span>
-        <input
-          type="text"
-          bind:value={supercell_scaling}
-          placeholder="1x1x1"
-          style:border={supercell_input_valid ? undefined : `1px dashed red`}
-          style:opacity={supercell_loading ? 0.5 : 1}
-          disabled={supercell_loading}
-          inputmode="text"
-          autocomplete="off"
-          spellcheck="false"
-          pattern="^(\d+|\d+x\d+x\d+)$"
-          aria-invalid={!supercell_input_valid}
-          title={supercell_input_valid
-          ? `Valid supercell scaling: ${supercell_scaling}`
-          : `Invalid format. Use "2x2x2", "3x1x2", or "2"`}
-        />
-      </label>
-      {#if supercell_loading}
-        <div
-          style="display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: var(--accent-color); margin-top: 4pt"
-        >
-          <span
-            class="spinner-icon"
-            style="display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite"
-          ></span>
-          <span>Generating supercell...</span>
-        </div>
-      {/if}
-
-      {#if !supercell_input_valid}
-        <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}
-
-      {#each [
-        {
-          label: `Edge color`,
-          color_prop: `cell_edge_color`,
-          opacity_prop: `cell_edge_opacity`,
-          step: 0.05,
-        },
-        {
-          label: `Surface color`,
-          color_prop: `cell_surface_color`,
-          opacity_prop: `cell_surface_opacity`,
-          step: 0.01,
-        },
-      ] as const as
-        { label, color_prop, opacity_prop, step }
-        (label)
-      }
-        <div class="pane-row">
-          <label>
-            {label}
-            <input
-              type="color"
-              bind:value={lattice_props[color_prop]}
-            />
-          </label>
-          <label>
-            opacity
-            <input
-              type="number"
-              min={0}
-              max={1}
-              {step}
-              bind:value={lattice_props[opacity_prop]}
-            />
-            <input
-              type="range"
-              min={0}
-              max={1}
-              {step}
-              bind:value={lattice_props[opacity_prop]}
-            />
-          </label>
-        </div>
-      {/each}
-    </SettingsSection>
-  {/if}
-
-  <SettingsSection
-    title="Background"
-    current_values={{
-      background_color,
-      background_opacity,
-    }}
-    on_reset={() => {
-      background_color = undefined
-      background_opacity = DEFAULTS.background_opacity
-    }}
-  >
-    <div class="pane-row">
-      <label>
-        Color
-        <!-- not using bind:value to not give a default value of #000000 to background_color, needs to stay undefined to not override --struct-bg theme color -->
-        <input
-          type="color"
-          value={background_color}
-          oninput={(event) => {
-            background_color = event.currentTarget.value
-          }}
-        />
-      </label>
-      <label>
-        Opacity
-        <input
-          type="number"
-          min={0}
-          max={1}
-          step={0.02}
-          bind:value={background_opacity}
-        />
-        <input type="range" min={0} max={1} step={0.02} bind:value={background_opacity} />
-      </label>
-    </div>
-  </SettingsSection>
-
-  <SettingsSection
-    title="Lighting"
-    current_values={{
-      directional_light: scene_props.directional_light,
-      ambient_light: scene_props.ambient_light,
-    }}
-    on_reset={() => {
-      scene_props.directional_light = DEFAULTS.structure.directional_light
-      scene_props.ambient_light = DEFAULTS.structure.ambient_light
-    }}
-  >
-    <label>
-      <span title="Intensity of the directional light" {@attach tooltip()}>
-        Directional light
-      </span>
-      <input
-        type="number"
-        min={0}
-        max={4}
-        step={0.01}
-        bind:value={scene_props.directional_light}
-      />
-      <input
-        type="range"
-        min={0}
-        max={4}
-        step={0.01}
-        bind:value={scene_props.directional_light}
-      />
-    </label>
-    <label>
-      <span title="Intensity of the ambient light" {@attach tooltip()}>
-        Ambient light
-      </span>
-      <input
-        type="number"
-        min={0.5}
-        max={3}
-        step={0.05}
-        bind:value={scene_props.ambient_light}
-      />
-      <input
-        type="range"
-        min={0.5}
-        max={3}
-        step={0.05}
-        bind:value={scene_props.ambient_light}
-      />
-    </label>
-  </SettingsSection>
-
-  {#if scene_props.show_bonds && scene_props.show_bonds !== `never`}
-    <SettingsSection
-      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
-      }}
-    >
-      <label>
-        Strategy <select bind:value={scene_props.bonding_strategy}>
-          {#each Object.entries(
-            SETTINGS_CONFIG.structure.bonding_strategy.enum ?? {},
-          ) as
-            [value, label]
-            (value)
-          }
-            <option {value}>{label}</option>
-          {/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>
-      <label>
-        Thickness
-        <input
-          type="number"
-          min={0.05}
-          max={0.5}
-          step={0.05}
-          bind:value={scene_props.bond_thickness}
-        />
-        <input
-          type="range"
-          min={0.05}
-          max={0.5}
-          step={0.05}
-          bind:value={scene_props.bond_thickness}
-        />
-      </label>
-    </SettingsSection>
-  {/if}
-</DraggablePane>
-
-<style>
-  .rotation-axes {
-    display: flex;
-    gap: 10pt;
-  }
-  .rotation-axes > div {
-    display: grid;
-    gap: 0.4em;
-    place-items: center;
-  }
-  :global(.controls-pane) {
-    font-size: 0.85em;
-  }
-
-  :global(.controls-pane section) {
-    display: flex;
-    flex-direction: column;
-    gap: 6pt;
-  }
-  :global(.controls-pane h4) {
-    margin: 10pt 0 4pt !important;
-  }
-  :global(.controls-pane h4:first-of-type) {
-    margin-top: 0 !important;
-  }
-  .pane-row {
-    display: flex;
-    gap: 12pt;
-    justify-content: space-between;
-    width: 100%;
-  }
-  label {
-    display: flex;
-    align-items: center;
-    gap: 10pt;
-  }
-  input,
-  select {
-    font-size: inherit;
-    font-family: inherit;
-  }
-  input[type='range'] {
-    flex: 1;
-    min-width: 40px;
-  }
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>