matterviz 0.4.1 → 0.4.3

package/dist/structure/StructureControls.svelte

@@ -2,10 +2,11 @@
   import type { PaneProps, PaneToggleProps } from '../overlays'
   import type { ColorSchemeName, D3InterpolateName } from '../colors'
   import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors'
+  import Spinner from '../feedback/Spinner.svelte'
   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'
@@ -97,15 +98,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(() => {
@@ -121,9 +120,7 @@
   // 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) ?? []),
-      ),
+      ...new Set((structure?.sites ?? []).flatMap((site) => get_majority_element(site) ?? [])),
     ].sort(),
   )
 
@@ -135,8 +132,10 @@
   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) &&
+    return (
+      !excluded.includes(element) &&
       (included.includes(element) || polyhedra_rendered_elements.includes(element))
+    )
   }
 
   // Toggle an element as polyhedra center. Enabled elements get excluded; disabled
@@ -154,9 +153,9 @@
     }
   }
 
-  const hex_color_pattern = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i
+  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
@@ -183,10 +182,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`,
@@ -231,10 +227,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
@@ -245,9 +241,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,17 +287,11 @@
     scene_props.rotation = [...scene_props.rotation]
   }
 
-  // Helper function to get example set of colors from an element color scheme
+  // Sample colors for common elements, used to preview 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)
+    return [`H`, `C`, `N`, `O`].map((elem) => scheme[elem] || scheme.H || `#cccccc`)
   }
 </script>
 
@@ -325,7 +313,7 @@
   {#if volumetric_data?.length && isosurface_settings}
     <IsosurfaceControls
       bind:settings={isosurface_settings}
-      volumes={volumetric_data}
+      bind:volumes={volumetric_data}
       bind:active_volume_idx
     />
   {/if}
@@ -384,6 +372,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`,
@@ -392,18 +381,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}
@@ -430,10 +419,7 @@
     >
       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>
@@ -444,10 +430,7 @@
     >
       Polyhedra:
       <select bind:value={scene_props.show_polyhedra}>
-        {#each Object.entries(SETTINGS_CONFIG.structure.show_polyhedra.enum ?? {}) as
-          [value, label]
-          (value)
-        }
+        {#each Object.entries(SETTINGS_CONFIG.structure.show_polyhedra.enum ?? {}) as [value, label] (value)}
           <option {value}>{label}</option>
         {/each}
       </select>
@@ -484,127 +467,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"
@@ -612,8 +528,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"
             />
@@ -653,34 +568,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)}
@@ -695,14 +597,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>
@@ -715,10 +615,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>
@@ -866,31 +763,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"
@@ -899,7 +781,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} />
@@ -931,35 +815,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
@@ -1021,7 +894,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>
@@ -1038,20 +913,15 @@
           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}
-        <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>
+        <Spinner
+          text="Generating supercell..."
+          style="--spinner-size: 12px; --spinner-border-width: 2px; --spinner-margin: 4pt 0 0; font-size: 0.85em; color: var(--accent-color)"
+        />
       {/if}
 
       {#if !supercell_input_valid}
@@ -1063,48 +933,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>
@@ -1133,17 +970,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>
 
@@ -1158,44 +987,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`}
@@ -1218,12 +1025,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>
@@ -1237,15 +1039,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>
@@ -1254,23 +1053,14 @@
       <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}
-        />
-      </label>
+      </NumberRangeInput>
     </SettingsSection>
   {/if}
 
@@ -1305,39 +1095,21 @@
           DEFAULTS.structure.polyhedra_included_elements
       }}
     >
-      <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.polyhedra_opacity.description,
-        })}
+      <NumberRangeInput
+        min={0}
+        max={1}
+        step={0.05}
+        bind:value={scene_props.polyhedra_opacity}
+        title={SETTINGS_CONFIG.structure.polyhedra_opacity.description}
+        >Opacity</NumberRangeInput
       >
-        Opacity
-        <input
-          type="number"
-          min={0}
-          max={1}
-          step={0.05}
-          bind:value={scene_props.polyhedra_opacity}
-        />
-        <input
-          type="range"
-          min={0}
-          max={1}
-          step={0.05}
-          bind:value={scene_props.polyhedra_opacity}
-        />
-      </label>
       <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)
-          }
+          {#each Object.entries(SETTINGS_CONFIG.structure.polyhedra_color_mode.enum ?? {}) as [value, label] (value)}
             <option {value}>{label}</option>
           {/each}
         </select>
@@ -1366,53 +1138,29 @@
         <input type="checkbox" bind:checked={scene_props.polyhedra_hide_center_atoms} />
         Hide center atoms
       </label>
-      <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.polyhedra_min_neighbors.description,
-        })}
+      <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
       >
-        Min neighbors
-        <input
-          type="number"
-          min={4}
-          max={12}
-          step={1}
-          bind:value={scene_props.polyhedra_min_neighbors}
-        />
-        <input
-          type="range"
-          min={4}
-          max={12}
-          step={1}
-          bind:value={scene_props.polyhedra_min_neighbors}
-        />
-      </label>
-      <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.polyhedra_max_neighbors.description,
-        })}
+      <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
       >
-        Max neighbors
-        <input
-          type="number"
-          min={4}
-          max={16}
-          step={1}
-          bind:value={scene_props.polyhedra_max_neighbors}
-        />
-        <input
-          type="range"
-          min={4}
-          max={16}
-          step={1}
-          bind:value={scene_props.polyhedra_max_neighbors}
-        />
-      </label>
       {#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,
+            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:
@@ -1477,12 +1225,4 @@
     flex: 1;
     min-width: 40px;
   }
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
 </style>