matterviz 0.4.0 → 0.4.2

package/dist/structure/StructureControls.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   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 { NumberRangeInput, SettingsSection } from '../layout'
   import { to_degrees, to_radians } from '../math'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { ColorScaleSelect } from '../plot'
@@ -19,6 +20,7 @@
     VECTOR_PALETTE,
   } from './'
   import type { AtomColorConfig } from './atom-properties'
+  import { get_majority_element } from './bonding'
   import { is_valid_supercell_input } from './supercell'
   import type { CellType } from '../symmetry'
   import type { MoyoDataset } from '@spglib/moyo-wasm'
@@ -54,6 +56,7 @@
     volumetric_data = $bindable<VolumetricData[]>(),
     isosurface_settings = $bindable<IsosurfaceSettings>(),
     active_volume_idx = $bindable(0),
+    polyhedra_rendered_elements = [],
     pane_props = {},
     toggle_props = {},
     ...rest
@@ -74,8 +77,9 @@
     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`]
+    polyhedra_rendered_elements?: string[] // elements currently anchoring polyhedra
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
   } = $props()
 
   // Color scheme selection state
@@ -93,15 +97,13 @@
 
   // 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]
+    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]
+    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(() => {
@@ -112,9 +114,47 @@
     }
   })
 
-  const hex_color_pattern = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i
+  // Unique majority elements in the structure, for polyhedra center toggles.
+  // Majority (not all) species so the list matches what compute_polyhedra can
+  // actually use as centers - minority occupancies of disordered sites never are.
+  let structure_elements = $derived(
+    [
+      ...new Set((structure?.sites ?? []).flatMap((site) => get_majority_element(site) ?? [])),
+    ].sort(),
+  )
+
+  // An element counts as an enabled polyhedra center if it isn't excluded and is
+  // either force-included or currently rendered. Using configured intent (not just
+  // the transient render state) keeps the checkbox reversible: a force-included
+  // element that the CN/geometry filters can't render still shows checked, so the
+  // user can toggle it back off.
+  const is_polyhedra_center_enabled = (element: string): boolean => {
+    const excluded = scene_props.polyhedra_excluded_elements ?? []
+    const included = scene_props.polyhedra_included_elements ?? []
+    return (
+      !excluded.includes(element) &&
+      (included.includes(element) || polyhedra_rendered_elements.includes(element))
+    )
+  }
+
+  // Toggle an element as polyhedra center. Enabled elements get excluded; disabled
+  // ones get force-included (which also bypasses the automatic hiding of spectator
+  // cations like Li/Na/Ba).
+  function toggle_polyhedra_element(element: string) {
+    const excluded = scene_props.polyhedra_excluded_elements ?? []
+    const included = scene_props.polyhedra_included_elements ?? []
+    if (is_polyhedra_center_enabled(element)) {
+      scene_props.polyhedra_excluded_elements = [...new Set([...excluded, element])]
+      scene_props.polyhedra_included_elements = included.filter((el) => el !== element)
+    } else {
+      scene_props.polyhedra_excluded_elements = excluded.filter((el) => el !== element)
+      scene_props.polyhedra_included_elements = [...new Set([...included, element])]
+    }
+  }
+
+  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
+    /^color-mix\(in srgb,\s*(?<hex>#[0-9a-f]{3}(?:[0-9a-f]{3})?)\s+(?<pct>\d+(?:\.\d+)?)%,\s*transparent\)$/i
 
   const as_hex_color = (color: string | undefined, fallback: string): string =>
     color?.match(hex_color_pattern)?.[0] ?? fallback
@@ -141,10 +181,7 @@
       : { hex_color, opacity: 1 }
   }
 
-  const default_site_label_color = as_hex_color(
-    DEFAULTS.structure.site_label_color,
-    `#111111`,
-  )
+  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`,
@@ -189,10 +226,10 @@
 
     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)`
+      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
@@ -203,9 +240,7 @@
   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) : [],
-  )
+  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
 
@@ -293,6 +328,7 @@
     current_values={{
       show_atoms: scene_props.show_atoms,
       show_bonds: scene_props.show_bonds,
+      show_polyhedra: scene_props.show_polyhedra,
       show_image_atoms,
       show_site_labels: scene_props.show_site_labels,
       show_site_indices: scene_props.show_site_indices,
@@ -302,6 +338,7 @@
     on_reset={() => {
       scene_props.show_atoms = DEFAULTS.structure.show_atoms
       scene_props.show_bonds = DEFAULTS.structure.show_bonds
+      scene_props.show_polyhedra = DEFAULTS.structure.show_polyhedra
       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)
@@ -340,6 +377,7 @@
     </label>
     {#if available_vector_keys.length > 0}
       {#each available_vector_keys as key, idx (key)}
+        {@const key_visible = is_key_visible(key)}
         <label
           {@attach tooltip({
             content: `Toggle ${key} vectors`,
@@ -348,18 +386,18 @@
         >
           <input
             type="checkbox"
-            checked={is_key_visible(key)}
-            onchange={() => update_vector_config(key, { visible: !is_key_visible(key) })}
+            checked={key_visible}
+            onchange={() => update_vector_config(key, { visible: !key_visible })}
           />
           <input
             type="color"
             aria-label={`${key} vector color`}
             value={scene_props.vector_configs?.[key]?.color ??
-            VECTOR_PALETTE[idx % VECTOR_PALETTE.length]}
+              VECTOR_PALETTE[idx % VECTOR_PALETTE.length]}
             onchange={(evt) =>
-            update_vector_config(key, {
-              color: evt.currentTarget.value,
-            })}
+              update_vector_config(key, {
+                color: evt.currentTarget.value,
+              })}
             style="width: 22px; height: 22px; padding: 0; border: none; cursor: pointer"
           />
           {key}
@@ -386,10 +424,18 @@
     >
       Bonds:
       <select bind:value={scene_props.show_bonds}>
-        {#each Object.entries(SETTINGS_CONFIG.structure.show_bonds.enum ?? {}) as
-          [value, label]
-          (value)
-        }
+        {#each Object.entries(SETTINGS_CONFIG.structure.show_bonds.enum ?? {}) as [value, label] (value)}
+          <option {value}>{label}</option>
+        {/each}
+      </select>
+    </label>
+    <label
+      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_polyhedra.description })}
+      style="gap: 6pt"
+    >
+      Polyhedra:
+      <select bind:value={scene_props.show_polyhedra}>
+        {#each Object.entries(SETTINGS_CONFIG.structure.show_polyhedra.enum ?? {}) as [value, label] (value)}
           <option {value}>{label}</option>
         {/each}
       </select>
@@ -426,127 +472,60 @@
         Projection
       </span>
       <select bind:value={scene_props.camera_projection}>
-        {#each Object.entries(
-            SETTINGS_CONFIG.structure.camera_projection.enum ?? {},
-          ) as
-          [value, label]
-          (value)
-        }
+        {#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 })}
+    <NumberRangeInput
+      min={0}
+      max={2}
+      step={0.01}
+      bind:value={scene_props.auto_rotate}
+      title={SETTINGS_CONFIG.structure.auto_rotate.description}
+      >Auto-rotate speed</NumberRangeInput
     >
-      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 })}
+    <NumberRangeInput
+      min={0}
+      max={2}
+      step={0.05}
+      bind:value={scene_props.rotate_speed}
+      title={SETTINGS_CONFIG.structure.rotate_speed.description}>Rotate speed</NumberRangeInput
     >
-      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 })}
+    <NumberRangeInput
+      min={0.1}
+      max={0.8}
+      step={0.02}
+      bind:value={scene_props.zoom_speed}
+      title={SETTINGS_CONFIG.structure.zoom_speed.description}>Zoom speed</NumberRangeInput
     >
-      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 })}
+    <NumberRangeInput
+      min={0}
+      max={2}
+      step={0.01}
+      bind:value={scene_props.pan_speed}
+      title={SETTINGS_CONFIG.structure.pan_speed.description}>Pan speed</NumberRangeInput
     >
-      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 })}
+    <NumberRangeInput
+      min={0.01}
+      max={0.3}
+      step={0.01}
+      bind:value={scene_props.rotation_damping}
+      title={SETTINGS_CONFIG.structure.rotation_damping.description}
+      >Rotation damping</NumberRangeInput
     >
-      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
-          >
+          <div {@attach tooltip()} title="{axis}-axis rotation in degrees" style:color>
             <span>{axis.toUpperCase()} = </span>
             <input
               type="number"
@@ -554,8 +533,7 @@
               max={360}
               step={1}
               value={rotation_degrees[idx].toFixed(0)}
-              oninput={(event) =>
-              update_rotation(axis, Number(event.currentTarget.value))}
+              oninput={(event) => update_rotation(axis, Number(event.currentTarget.value))}
               style:color
               style="margin: 0"
             />
@@ -595,34 +573,21 @@
       color_scale_selected = [DEFAULTS.structure.atom_color_scale]
     }}
   >
-    <label
-      {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_radius.description })}
+    <NumberRangeInput
+      min={0.2}
+      max={2}
+      step={0.05}
+      bind:value={scene_props.atom_radius}
+      title={SETTINGS_CONFIG.structure.atom_radius.description}
+      >Radius <small>(Å)</small></NumberRangeInput
     >
-      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 })}
-    >
+    <label {@attach tooltip({ content: SETTINGS_CONFIG.color_scheme.description })}>
       Color scheme
       <Select
         options={Object.keys(ELEMENT_COLOR_SCHEMES)}
@@ -637,14 +602,12 @@
         aria-label="Color scheme"
       >
         {#snippet children({ option })}
-          {@const option_style =
-            `display: flex; align-items: center; gap: 6pt; justify-content: space-between;`}
+          {@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};`}
+                {@const color_style = `width: 15px; height: 15px; border-radius: 2px; background: ${color};`}
                 <div style={color_style}></div>
               {/each}
             </div>
@@ -657,10 +620,7 @@
     >
       Atom coloring
       <select bind:value={atom_color_config.mode}>
-        {#each Object.entries(SETTINGS_CONFIG.structure.atom_color_mode.enum || {}) as
-          [value, label]
-          (value)
-        }
+        {#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>
@@ -808,31 +768,16 @@
         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_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>
+      <NumberRangeInput min={0.001} max={5} step={0.001} bind:value={scene_props.vector_scale}
+        >Global Scale</NumberRangeInput
+      >
       <label
         {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_normalize.description })}
         style="gap: 6pt"
@@ -841,7 +786,9 @@
         Normalize
       </label>
       <label
-        {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_uniform_thickness.description })}
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.vector_uniform_thickness.description,
+        })}
         style="gap: 6pt"
       >
         <input type="checkbox" bind:checked={scene_props.vector_uniform_thickness} />
@@ -873,35 +820,24 @@
         </label>
       {/if}
       {#if available_vector_keys.length > 1}
-        <label
-          {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_origin_gap.description })}
+        <NumberRangeInput
+          min={0}
+          max={0.5}
+          step={0.02}
+          bind:value={scene_props.vector_origin_gap}
+          title={SETTINGS_CONFIG.structure.vector_origin_gap.description}
+          >Origin Gap</NumberRangeInput
         >
-          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 })
-      }}
+            {@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)` })}
+              {@attach tooltip({
+                content: `Scale multiplier for ${key} arrows (applied on top of global scale)`,
+              })}
             >
               {key} scale
               <input
@@ -963,7 +899,9 @@
       </label>
       <label>
         <span
-          {@attach tooltip({ content: `Create supercells by repeating the unit cell. Examples: "2x2x2", "3x1x2", or "2"` })}
+          {@attach tooltip({
+            content: `Create supercells by repeating the unit cell. Examples: "2x2x2", "3x1x2", or "2"`,
+          })}
         >
           Supercell Scaling
         </span>
@@ -980,8 +918,8 @@
           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"`}
+            ? `Valid supercell scaling: ${supercell_scaling}`
+            : `Invalid format. Use "2x2x2", "3x1x2", or "2"`}
         />
       </label>
       {#if supercell_loading}
@@ -1005,48 +943,15 @@
         </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)
-      }
+      {#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]}
-            />
+            <input type="color" bind:value={lattice_props[color_prop]} />
           </label>
-          <label>
+          <NumberRangeInput min={0} max={1} {step} bind:value={lattice_props[opacity_prop]}>
             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>
+          </NumberRangeInput>
         </div>
       {/each}
     </SettingsSection>
@@ -1075,17 +980,9 @@
           }}
         />
       </label>
-      <label>
+      <NumberRangeInput min={0} max={1} step={0.02} bind:value={background_opacity}>
         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>
+      </NumberRangeInput>
     </div>
   </SettingsSection>
 
@@ -1100,44 +997,22 @@
       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>
+    <NumberRangeInput
+      min={0}
+      max={4}
+      step={0.01}
+      bind:value={scene_props.directional_light}
+      title={SETTINGS_CONFIG.structure.directional_light.description}
+      >Directional light</NumberRangeInput
+    >
+    <NumberRangeInput
+      min={0.5}
+      max={3}
+      step={0.05}
+      bind:value={scene_props.ambient_light}
+      title={SETTINGS_CONFIG.structure.ambient_light.description}
+      >Ambient light</NumberRangeInput
+    >
   </SettingsSection>
 
   {#if scene_props.show_bonds && scene_props.show_bonds !== `never`}
@@ -1160,12 +1035,7 @@
     >
       <label>
         Strategy <select bind:value={scene_props.bonding_strategy}>
-          {#each Object.entries(
-            SETTINGS_CONFIG.structure.bonding_strategy.enum ?? {},
-          ) as
-            [value, label]
-            (value)
-          }
+          {#each Object.entries(SETTINGS_CONFIG.structure.bonding_strategy.enum ?? {}) as [value, label] (value)}
             <option {value}>{label}</option>
           {/each}
         </select>
@@ -1179,15 +1049,12 @@
       </label>
       {#if scene_props.auto_bond_order}
         <label
-          {@attach tooltip({ content: SETTINGS_CONFIG.structure.aromatic_display.description })}
+          {@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)
-            }
+            {#each Object.entries(SETTINGS_CONFIG.structure.aromatic_display.enum ?? {}) as [value, label] (value)}
               <option {value}>{label}</option>
             {/each}
           </select>
@@ -1196,23 +1063,129 @@
       <label>
         Color <input type="color" bind:value={scene_props.bond_color} />
       </label>
-      <label>
+      <NumberRangeInput
+        min={0.05}
+        max={0.5}
+        step={0.05}
+        bind:value={scene_props.bond_thickness}
+      >
         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}
-        />
+      </NumberRangeInput>
+    </SettingsSection>
+  {/if}
+
+  {#if scene_props.show_polyhedra && scene_props.show_polyhedra !== `never`}
+    <SettingsSection
+      title="Polyhedra"
+      current_values={{
+        polyhedra_opacity: scene_props.polyhedra_opacity,
+        polyhedra_show_edges: scene_props.polyhedra_show_edges,
+        polyhedra_edge_color: scene_props.polyhedra_edge_color,
+        polyhedra_color_mode: scene_props.polyhedra_color_mode,
+        polyhedra_color: scene_props.polyhedra_color,
+        polyhedra_hide_center_atoms: scene_props.polyhedra_hide_center_atoms,
+        polyhedra_min_neighbors: scene_props.polyhedra_min_neighbors,
+        polyhedra_max_neighbors: scene_props.polyhedra_max_neighbors,
+        polyhedra_excluded_elements: scene_props.polyhedra_excluded_elements,
+        polyhedra_included_elements: scene_props.polyhedra_included_elements,
+      }}
+      on_reset={() => {
+        scene_props.polyhedra_opacity = DEFAULTS.structure.polyhedra_opacity
+        scene_props.polyhedra_show_edges = DEFAULTS.structure.polyhedra_show_edges
+        scene_props.polyhedra_edge_color = DEFAULTS.structure.polyhedra_edge_color
+        scene_props.polyhedra_color_mode = DEFAULTS.structure.polyhedra_color_mode
+        scene_props.polyhedra_color = DEFAULTS.structure.polyhedra_color
+        scene_props.polyhedra_hide_center_atoms =
+          DEFAULTS.structure.polyhedra_hide_center_atoms
+        scene_props.polyhedra_min_neighbors = DEFAULTS.structure.polyhedra_min_neighbors
+        scene_props.polyhedra_max_neighbors = DEFAULTS.structure.polyhedra_max_neighbors
+        scene_props.polyhedra_excluded_elements =
+          DEFAULTS.structure.polyhedra_excluded_elements
+        scene_props.polyhedra_included_elements =
+          DEFAULTS.structure.polyhedra_included_elements
+      }}
+    >
+      <NumberRangeInput
+        min={0}
+        max={1}
+        step={0.05}
+        bind:value={scene_props.polyhedra_opacity}
+        title={SETTINGS_CONFIG.structure.polyhedra_opacity.description}
+        >Opacity</NumberRangeInput
+      >
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_color_mode.description,
+        })}
+      >
+        Color <select bind:value={scene_props.polyhedra_color_mode}>
+          {#each Object.entries(SETTINGS_CONFIG.structure.polyhedra_color_mode.enum ?? {}) as [value, label] (value)}
+            <option {value}>{label}</option>
+          {/each}
+        </select>
+        {#if scene_props.polyhedra_color_mode === `uniform`}
+          <input type="color" bind:value={scene_props.polyhedra_color} />
+        {/if}
+      </label>
+      <label
+        style="gap: 6pt"
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_show_edges.description,
+        })}
+      >
+        <input type="checkbox" bind:checked={scene_props.polyhedra_show_edges} />
+        Edges
+        {#if scene_props.polyhedra_show_edges}
+          <input type="color" bind:value={scene_props.polyhedra_edge_color} />
+        {/if}
+      </label>
+      <label
+        style="gap: 6pt"
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_hide_center_atoms.description,
+        })}
+      >
+        <input type="checkbox" bind:checked={scene_props.polyhedra_hide_center_atoms} />
+        Hide center atoms
       </label>
+      <NumberRangeInput
+        min={4}
+        max={12}
+        step={1}
+        bind:value={scene_props.polyhedra_min_neighbors}
+        title={SETTINGS_CONFIG.structure.polyhedra_min_neighbors.description}
+        >Min neighbors</NumberRangeInput
+      >
+      <NumberRangeInput
+        min={4}
+        max={16}
+        step={1}
+        bind:value={scene_props.polyhedra_max_neighbors}
+        title={SETTINGS_CONFIG.structure.polyhedra_max_neighbors.description}
+        >Max neighbors</NumberRangeInput
+      >
+      {#if structure_elements.length > 0}
+        <div
+          style="display: flex; flex-wrap: wrap; gap: 8pt; align-items: center"
+          {@attach tooltip({
+            content: `${
+              SETTINGS_CONFIG.structure.polyhedra_excluded_elements.description
+            }. Force-including a spectator center (alkali or heavy alkaline-earth, e.g. Li, Na, Ba) may render its polyhedra truncated at cell boundaries.`,
+          })}
+        >
+          Centers:
+          {#each structure_elements as element (element)}
+            <label style="gap: 4pt">
+              <input
+                type="checkbox"
+                checked={is_polyhedra_center_enabled(element)}
+                onchange={() => toggle_polyhedra_element(element)}
+              />
+              {element}
+            </label>
+          {/each}
+        </div>
+      {/if}
     </SettingsSection>
   {/if}
 </DraggablePane>