matterviz 0.4.1 → 0.4.3

package/dist/structure/AtomLegend.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { contrast_color, default_element_colors } from '../colors'
   import type { CompositionType } from '../composition'
-  import type { ElementSymbol } from '../element'
-  import { element_data } from '../element'
+  import { element_by_symbol, is_elem_symbol, type ElementSymbol } from '../element'
   import Icon from '../Icon.svelte'
   import { ELEM_SYMBOLS, format_num } from '../labels'
   import { ColorBar } from '../plot'
@@ -10,10 +9,7 @@
   import { colors } from '../state.svelte'
   import type { AnyStructure } from './'
   import { atomic_radii } from './'
-  import type {
-    AtomColorConfig,
-    AtomPropertyColors,
-  } from './atom-properties'
+  import type { AtomColorConfig, AtomPropertyColors } from './atom-properties'
   import type { MoyoDataset } from '@spglib/moyo-wasm'
   import type { Snippet } from 'svelte'
   import { click_outside, tooltip } from 'svelte-multiselect/attachments'
@@ -29,7 +25,6 @@
     property_colors = null,
     elements,
     elem_color_picker_title = `Double click to reset color`,
-    labels = $bindable([]),
     amount_format = `.3~f`,
     show_amounts = true,
     get_element_label,
@@ -52,7 +47,6 @@
     property_colors?: AtomPropertyColors | null
     elements?: CompositionType
     elem_color_picker_title?: string
-    labels?: HTMLLabelElement[]
     amount_format?: string // Float formatting for element amounts (default: 3 significant digits)
     show_amounts?: boolean // Whether to show element amounts
     get_element_label?: (element: string, amount: number) => string // Custom label function
@@ -77,8 +71,7 @@
   }
 
   let show_element_legend = $derived(
-    atom_color_config.mode === `element` && elements &&
-      Object.keys(elements).length > 0,
+    atom_color_config.mode === `element` && elements && Object.keys(elements).length > 0,
   )
   let show_property_legend = $derived(
     atom_color_config.mode !== `element` && property_colors?.colors.length,
@@ -111,33 +104,43 @@
   let format_value = (val: number | string): string => {
     if (typeof val === `number`) return format_num(val, `.3~f`)
 
-    if (typeof val === `string` && val.includes(`|`)) { // Format Wyckoff orbit IDs
+    if (typeof val === `string` && val.includes(`|`)) {
+      // Format Wyckoff orbit IDs
       const [wyckoff, element] = val.split(`|`, 2)
       // Count how many sites have this wyckoff+element combination
-      const count = property_colors?.values.filter((property_value) =>
-        property_value === val
-      ).length ?? 0
+      const count =
+        property_colors?.values.filter((property_value) => property_value === val).length ?? 0
       return `${element}:${count}${wyckoff}`
     }
     return String(val)
   }
 
-  // Map from property value to color (computed once, reused in categorical legend)
-  let color_map = $derived(
-    new Map(
-      // Use unique_values instead of values to avoid undefined colors from duplicates
-      property_colors?.unique_values?.flatMap((val) => {
-        const idx = property_colors.values.indexOf(val)
-        return idx !== -1 ? [[val, property_colors.colors[idx]]] : []
-      }),
-    ),
-  )
+  // Map each property value to its first color in a single O(n) pass (reused in
+  // categorical and discrete legends). Skips undefined colors if arrays ever drift.
+  let color_map = $derived.by(() => {
+    const map = new Map<number | string, string>()
+    const { values = [], colors: value_colors = [] } = property_colors ?? {}
+    for (const [idx, val] of values.entries()) {
+      const color = value_colors[idx]
+      if (color !== undefined && !map.has(val)) map.set(val, color)
+    }
+    return map
+  })
+
+  // Continuous integer properties (e.g. coordination numbers) render as a discrete
+  // segmented bar with one labeled block per integer value instead of a smooth gradient.
+  // Cap segment count so high-cardinality numeric properties keep the gradient bar.
+  const MAX_DISCRETE_SEGMENTS = 20
+  let is_discrete_numeric = $derived.by(() => {
+    const uniq = property_colors?.unique_values
+    // Number.isInteger is false for strings/non-numbers (no coercion), so it also
+    // excludes categorical (e.g. Wyckoff) data without a separate type check
+    return Boolean(
+      uniq?.length && uniq.length <= MAX_DISCRETE_SEGMENTS && uniq.every(Number.isInteger),
+    )
+  })
 
-  function toggle_visibility<T>(
-    set: Set<T>,
-    value: T,
-    event: MouseEvent,
-  ): Set<T> {
+  function toggle_visibility<T>(set: Set<T>, value: T, event: MouseEvent): Set<T> {
     event.preventDefault()
     event.stopPropagation()
     const new_set = new SvelteSet(set)
@@ -155,25 +158,20 @@
     if (!remap_search) return ELEM_SYMBOLS
     const query = remap_search.toLowerCase()
     return ELEM_SYMBOLS.filter((elem) => {
-      const data = element_data?.find((el) => el.symbol === elem)
-      return elem.toLowerCase().includes(query) ||
-        data?.name?.toLowerCase().includes(query)
+      const data = element_by_symbol.get(elem)
+      return elem.toLowerCase().includes(query) || data?.name?.toLowerCase().includes(query)
     })
   })
 
-  const known_element_symbols = new Set(ELEM_SYMBOLS)
   let sorted_element_entries = $derived.by(() => {
     if (!elements) return []
     const element_amounts = elements as Record<string, number>
-    const ordered_known_entries = ELEM_SYMBOLS
-      .flatMap((element_symbol) => {
-        const amount = element_amounts[element_symbol]
-        return amount === undefined ? [] : [[element_symbol, amount] as const]
-      })
+    const ordered_known_entries = ELEM_SYMBOLS.flatMap((element_symbol) => {
+      const amount = element_amounts[element_symbol]
+      return amount === undefined ? [] : [[element_symbol, amount] as const]
+    })
     const unknown_entries = Object.entries(element_amounts)
-      .filter(([element_symbol]) =>
-        !known_element_symbols.has(element_symbol as ElementSymbol)
-      )
+      .filter(([element_symbol]) => !is_elem_symbol(element_symbol))
       .sort(([element_a], [element_b]) => element_a.localeCompare(element_b))
     return [...ordered_known_entries, ...unknown_entries]
   })
@@ -195,7 +193,7 @@
   const MAX_RADIUS = 5
 
   const parse_radius = (value: string): number | null => {
-    const num = parseFloat(value)
+    const num = Number(value)
     return !isNaN(num) && num >= MIN_RADIUS && num <= MAX_RADIUS ? num : null
   }
 
@@ -238,7 +236,7 @@
 {#snippet mode_selector_snippet()}
   <div
     class="mode-selector"
-    {@attach click_outside({ callback: () => mode_menu_open = false })}
+    {@attach click_outside({ callback: () => (mode_menu_open = false) })}
   >
     <button
       class="mode-toggle"
@@ -254,10 +252,7 @@
     </button>
     {#if mode_menu_open}
       <div class="mode-dropdown">
-        {#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)}
           <button
             class="mode-option"
             class:selected={atom_color_config.mode === value}
@@ -323,15 +318,15 @@
 {/snippet}
 
 {#if show_element_legend}
-  <div {...rest} class="atom-legend element-legend {rest.class ?? ``}">
+  <div {...rest} class={[`atom-legend element-legend`, rest.class]}>
     {@render mode_selector_snippet()}
-    {#each sorted_element_entries as [elem, amt], idx (elem)}
+    {#each sorted_element_entries as [elem, amt] (elem)}
       {@const is_hidden = hidden_elements.has(elem as ElementSymbol)}
       {@const displayed_elem = element_mapping?.[elem as ElementSymbol] || elem}
       <div class="legend-item">
         <label
-          bind:this={labels[idx]}
-          title="{element_data?.find((el) => el.symbol === displayed_elem)?.name ?? ``}{displayed_elem !== elem ? ` (remapped from ${elem})` : ``}"
+          title="{element_by_symbol.get(displayed_elem as ElementSymbol)?.name ??
+            ``}{displayed_elem !== elem ? ` (remapped from ${elem})` : ``}"
           {@attach tooltip()}
           style:background-color={colors.element[displayed_elem]}
           class:hidden={is_hidden}
@@ -364,13 +359,12 @@
         <button
           class="toggle-visibility"
           class:element-hidden={is_hidden}
-          onclick={(
-            event,
-          ) => (hidden_elements = toggle_visibility(
-            hidden_elements,
-            elem as ElementSymbol,
-            event,
-          ))}
+          onclick={(event) =>
+            (hidden_elements = toggle_visibility(
+              hidden_elements,
+              elem as ElementSymbol,
+              event,
+            ))}
           title={is_hidden ? `Show ${elem} atoms` : `Hide ${elem} atoms`}
           {@attach tooltip({ placement: `top` })}
           type="button"
@@ -390,8 +384,8 @@
             <div class="radius-control">
               <label
                 title={displayed_elem !== elem
-                ? `Radius for ${elem} atoms (displayed as ${displayed_elem})`
-                : `Radius for ${elem} atoms`}
+                  ? `Radius for ${elem} atoms (displayed as ${displayed_elem})`
+                  : `Radius for ${elem} atoms`}
                 {@attach tooltip({ placement: `top` })}
               >
                 <span>Radius ({elem})</span>
@@ -403,10 +397,7 @@
                   value={get_element_radius(elem as ElementSymbol)}
                   oninput={(event) => {
                     if (event.target instanceof HTMLInputElement) {
-                      update_element_radius(
-                        elem as ElementSymbol,
-                        event.target.value,
-                      )
+                      update_element_radius(elem as ElementSymbol, event.target.value)
                     }
                   }}
                 />
@@ -447,7 +438,7 @@
                 </button>
               {/if}
               {#each filtered_elements as target_elem (target_elem)}
-                {@const elem_info = element_data?.find((el) => el.symbol === target_elem)}
+                {@const elem_info = element_by_symbol.get(target_elem)}
                 <button
                   class="remap-option"
                   class:selected={displayed_elem === target_elem}
@@ -480,11 +471,29 @@
         <h4>{legend_title}</h4>
       </div>
     {/if}
-    {#if atom_color_config.scale_type === `continuous` && property_colors}
-      <div
-        title={legend_title}
-        {@attach tooltip({ placement: `top` })}
-      >
+    {#if atom_color_config.scale_type === `continuous` && property_colors && is_discrete_numeric}
+      <div class="discrete-colorbar">
+        {#each property_colors.unique_values ?? [] as value (value)}
+          {@const color = color_map.get(value)}
+          {@const is_hidden = hidden_prop_vals.has(value)}
+          <button
+            type="button"
+            class="discrete-segment"
+            class:hidden={is_hidden}
+            style:background-color={color}
+            aria-pressed={is_hidden}
+            onclick={(event) =>
+              (hidden_prop_vals = toggle_visibility(hidden_prop_vals, value, event))}
+            title={is_hidden ? `Show ${format_value(value)}` : `Hide ${format_value(value)}`}
+            {@attach tooltip({ placement: `top` })}
+            {@attach contrast_color()}
+          >
+            {format_value(value)}
+          </button>
+        {/each}
+      </div>
+    {:else if atom_color_config.scale_type === `continuous` && property_colors}
+      <div title={legend_title} {@attach tooltip({ placement: `top` })}>
         <ColorBar
           color_scale={atom_color_config.scale}
           range={[property_colors.min_value ?? 0, property_colors.max_value ?? 0]}
@@ -499,10 +508,7 @@
         />
       </div>
     {:else if atom_color_config.scale_type === `categorical` && property_colors}
-      {#each property_colors.unique_values || [] as
-        value
-        (`${atom_color_config.mode}-${value}`)
-      }
+      {#each property_colors.unique_values || [] as value (`${atom_color_config.mode}-${value}`)}
         {@const color = color_map.get(value)}
         {@const is_hidden = hidden_prop_vals.has(value)}
         <div class="legend-item">
@@ -517,13 +523,8 @@
           <button
             class="toggle-visibility"
             class:element-hidden={is_hidden}
-            onclick={(
-              event,
-            ) => (hidden_prop_vals = toggle_visibility(
-              hidden_prop_vals,
-              value,
-              event,
-            ))}
+            onclick={(event) =>
+              (hidden_prop_vals = toggle_visibility(hidden_prop_vals, value, event))}
             title={is_hidden ? `Show ${format_value(value)}` : `Hide ${format_value(value)}`}
             {@attach tooltip({ placement: `top` })}
             type="button"
@@ -542,6 +543,8 @@
   .atom-legend {
     position: absolute;
     z-index: var(--legend-z-index, 1);
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     pointer-events: auto;
     visibility: visible;
     filter: var(--legend-filter, grayscale(10%) brightness(0.95) saturate(0.8));
@@ -552,7 +555,9 @@
     gap: var(--struct-legend-gap, clamp(3pt, 2cqmin, 7pt));
   }
   .element-legend {
-    font-size: var(--struct-legend-font, clamp(7pt, 2.5cqmin, 12pt));
+    /* 9pt floor keeps chips legible in small embeds (carousel cards) where
+      the cqmin term collapses */
+    font-size: var(--struct-legend-font, clamp(9pt, 2.5cqmin, 12pt));
   }
   .atom-legend .legend-item {
     position: relative;
@@ -598,7 +603,10 @@
     display: grid;
     place-items: center;
     opacity: 0;
-    transition: opacity 0.2s ease, background 0.2s ease, transform 0.1s ease;
+    transition:
+      opacity 0.2s ease,
+      background 0.2s ease,
+      transform 0.1s ease;
     z-index: 2;
     pointer-events: auto;
   }
@@ -717,7 +725,7 @@
 
   /* Property Legend Styles */
   .property-legend {
-    font-size: var(--struct-legend-font, clamp(8pt, 3cqmin, 14pt));
+    font-size: var(--struct-legend-font, clamp(9pt, 3cqmin, 14pt));
   }
   .mode-selector {
     position: relative;
@@ -753,7 +761,9 @@
     margin-bottom: 0.25rem;
     background: var(--surface-bg);
     border-radius: var(--border-radius, 3pt);
-    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 8px 16px -4px rgba(0, 0, 0, 0.3),
+      0 4px 8px -2px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     z-index: 10;
@@ -795,6 +805,31 @@
   .mode-option span {
     white-space: nowrap;
   }
+  /* Discrete color bar: contiguous integer-labeled segments (e.g. coordination numbers) */
+  .discrete-colorbar {
+    display: flex;
+    height: var(--struct-discrete-bar-height, 16px);
+    border-radius: var(--border-radius, 3pt);
+    overflow: hidden;
+  }
+  .discrete-segment {
+    flex: 1 1 0;
+    min-width: 1.7em;
+    margin: 0;
+    padding: 0 4pt;
+    border: none;
+    border-radius: 0;
+    font-size: 0.85em;
+    line-height: 1;
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    transition: opacity 0.2s ease;
+  }
+  .discrete-segment.hidden {
+    opacity: 0.35;
+    text-decoration: line-through;
+  }
   .category-label {
     padding: var(--struct-legend-padding, 0 4pt);
     border-radius: var(--struct-legend-radius, var(--border-radius, 3pt));

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

@@ -1,5 +1,5 @@
 import type { CompositionType } from '../composition';
-import type { ElementSymbol } from '../element';
+import { type ElementSymbol } from '../element';
 import type { AnyStructure } from './';
 import type { AtomColorConfig, AtomPropertyColors } from './atom-properties';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
@@ -11,7 +11,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
     property_colors?: AtomPropertyColors | null;
     elements?: CompositionType;
     elem_color_picker_title?: string;
-    labels?: HTMLLabelElement[];
     amount_format?: string;
     show_amounts?: boolean;
     get_element_label?: (element: string, amount: number) => string;
@@ -30,6 +29,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
         structure?: AnyStructure | null;
     }]>;
 };
-declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides">;
+declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "atom_color_config" | "element_mapping">;
 type AtomLegend = ReturnType<typeof AtomLegend>;
 export default AtomLegend;

package/dist/structure/Bond.svelte

@@ -4,7 +4,11 @@
   import type { InstancedMesh } from 'three'
   import { Color, InstancedBufferAttribute, Matrix4, ShaderMaterial } from 'three'
 
-  let { group, saturation = 0.5, brightness = 0.7 }: {
+  let {
+    group,
+    saturation = 0.5,
+    brightness = 0.7,
+  }: {
     group: BondGroupWithGradients
     saturation?: number
     brightness?: number
@@ -104,12 +108,10 @@
 
     // Update geometry color attributes
     const { geometry } = mesh
-    for (
-      const [name, buffer] of [
-        [`instanceColorStart`, colors_start],
-        [`instanceColorEnd`, colors_end],
-      ] as const
-    ) {
+    for (const [name, buffer] of [
+      [`instanceColorStart`, colors_start],
+      [`instanceColorEnd`, colors_end],
+    ] as const) {
       const existing = geometry.getAttribute(name)
       if (existing?.array === buffer) existing.needsUpdate = true
       else geometry.setAttribute(name, new InstancedBufferAttribute(buffer, 3))
@@ -118,23 +120,29 @@
     mesh.count = count
   })
 
-  let shader_material = $derived(
-    new ShaderMaterial({
-      vertexShader: vertex_shader,
-      fragmentShader: fragment_shader,
-      uniforms: {
-        ambientIntensity: { value: group.ambient_light ?? 0.7 },
-        directionalIntensity: { value: group.directional_light ?? 0.3 },
-        saturation: { value: saturation },
-        brightness: { value: brightness },
-      },
-    }),
-  )
+  // Create the GPU material once + mutate uniforms reactively (a $derived would leak a new
+  // ShaderMaterial per lighting tweak). The $effect sets real uniform values before paint.
+  const shader_material = new ShaderMaterial({
+    vertexShader: vertex_shader,
+    fragmentShader: fragment_shader,
+    uniforms: {
+      ambientIntensity: { value: 0.7 },
+      directionalIntensity: { value: 0.3 },
+      saturation: { value: 0.5 },
+      brightness: { value: 0.7 },
+    },
+  })
+
+  $effect(() => {
+    shader_material.uniforms.ambientIntensity.value = group.ambient_light ?? 0.7
+    shader_material.uniforms.directionalIntensity.value = group.directional_light ?? 0.3
+    shader_material.uniforms.saturation.value = saturation
+    shader_material.uniforms.brightness.value = brightness
+  })
+
+  $effect(() => () => shader_material.dispose())
 </script>
 
-<T.InstancedMesh
-  args={[undefined, shader_material, group.instances.length]}
-  bind:ref={mesh}
->
+<T.InstancedMesh args={[undefined, shader_material, group.instances.length]} bind:ref={mesh}>
   <T.CylinderGeometry args={[group.thickness, group.thickness, 1, 8]} />
 </T.InstancedMesh>

package/dist/structure/CanvasTooltip.svelte

@@ -4,13 +4,22 @@
   import type { HTMLAttributes } from 'svelte/elements'
   import type { Vec3 } from '../math'
 
-  let { position, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+  let {
+    position,
+    children,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
     position: Vec3
     children: Snippet<[{ position: Vec3 }]>
   } = $props()
 </script>
 
-<HTML {position} pointerEvents="none">
+<!-- Constant zIndexRange: threlte's default [16777271, 0] maps camera distance
+  over [near, far], which extrapolates to a NEGATIVE z-index for sites beyond
+  camera.far (common in zoomed-out carousel cards) — painting the tooltip
+  behind the canvas. A degenerate range pins z-index at 1000, always above the
+  canvas and sibling overlays. -->
+<HTML {position} pointerEvents="none" zIndexRange={[1000, 1000]}>
   <div {...rest} role="tooltip">
     {@render children({ position })}
   </div>
@@ -23,7 +32,10 @@
     box-sizing: border-box;
     text-align: var(--canvas-tooltip-text-align, left);
     border-radius: var(--canvas-tooltip-border-radius, var(--border-radius, 3pt));
-    background: var(--canvas-tooltip-bg, light-dark(rgba(226, 232, 240, 0.96), rgba(15, 23, 42, 0.96)));
+    background: var(
+      --canvas-tooltip-bg,
+      light-dark(rgba(226, 232, 240, 0.96), rgba(15, 23, 42, 0.96))
+    );
     padding: var(--canvas-tooltip-padding, 1pt 5pt);
     color: var(--canvas-tooltip-text-color, light-dark(#0f172a, #f8fafc));
     font-family: var(--canvas-tooltip-font-family);

package/dist/structure/CellSelect.svelte

@@ -29,6 +29,26 @@
   let input_value = $state(supercell_scaling)
   let input_valid = $derived(is_valid_supercell_input(input_value))
 
+  // Hover-intent gate: opening instantly on mouseenter made the menu pop open
+  // when merely scrubbing the pointer across compact embeds (carousel cards).
+  // Deliberate hovers still open it; keyboard focus and clicks open instantly.
+  const hover_open_delay_ms = 200
+  let hover_timer: ReturnType<typeof setTimeout> | undefined
+
+  const schedule_hover_open = () => {
+    if (suppress_hover) return
+    clearTimeout(hover_timer)
+    // re-check suppression at fire time: a sibling popover may have opened meanwhile
+    hover_timer = setTimeout(() => (menu_open = !suppress_hover), hover_open_delay_ms)
+  }
+
+  const close_menu = () => {
+    clearTimeout(hover_timer)
+    menu_open = false
+  }
+
+  $effect(() => () => clearTimeout(hover_timer))
+
   const supercell_presets = [`1x1x1`, `2x2x2`, `3x3x3`, `2x2x1`, `3x3x1`, `2x1x1`]
 
   // Always show all 3 cell types - Prim/Conv disabled without sym_data
@@ -51,13 +71,13 @@
   function apply_preset(preset: string) {
     supercell_scaling = preset
     input_value = preset
-    menu_open = false
+    close_menu()
   }
 
   function handle_input_submit() {
     if (input_valid && input_value !== supercell_scaling) {
       supercell_scaling = input_value
-      menu_open = false
+      close_menu()
     }
   }
 
@@ -68,11 +88,12 @@
       !(current_target instanceof Node) ||
       !(next_target instanceof Node) ||
       !current_target.contains(next_target)
-    ) menu_open = false
+    )
+      close_menu()
   }
 
   function handle_key_down(event: KeyboardEvent, submit_on_enter: boolean = false) {
-    if (event.key === `Escape`) menu_open = false
+    if (event.key === `Escape`) close_menu()
     if (submit_on_enter && event.key === `Enter`) handle_input_submit()
   }
 
@@ -86,22 +107,25 @@
   // Close + keep closed while suppressed so the menu can't obscure a sibling popover
   // (e.g. the atom color-mode dropdown) the user is actively interacting with
   $effect(() => {
-    if (suppress_hover) menu_open = false
+    if (suppress_hover) close_menu()
   })
 </script>
 
 <div
   class="cell-select"
   role="group"
-  {@attach click_outside({ callback: () => (menu_open = false) })}
-  onmouseenter={() => (menu_open = !suppress_hover)}
-  onmouseleave={() => (menu_open = false)}
+  {@attach click_outside({ callback: close_menu })}
+  onmouseenter={schedule_hover_open}
+  onmouseleave={close_menu}
   onfocusin={() => (menu_open = !suppress_hover)}
   onfocusout={handle_focus_out}
 >
   <button
     type="button"
-    onclick={() => (menu_open = !suppress_hover && !menu_open)}
+    onclick={() => {
+      clearTimeout(hover_timer)
+      menu_open = !suppress_hover && !menu_open
+    }}
     onkeydown={handle_key_down}
     class="toggle-btn"
     class:active={menu_open}
@@ -113,9 +137,9 @@
         style="--spinner-border-width: 2px; --spinner-size: 1em; --spinner-margin: 0; display: inline-block; vertical-align: middle"
       />
     {:else}
-      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{
-        format_supercell_label(supercell_scaling)
-      }
+      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{format_supercell_label(
+        supercell_scaling,
+      )}
     {/if}
   </button>
 
@@ -131,8 +155,8 @@
           {@const disabled = type !== `original` && !sym_data}
           {@const label = cell_labels[type]}
           {@const tooltip_text = disabled
-          ? `${cell_tooltips[type]} - requires symmetry data`
-          : cell_tooltips[type]}
+            ? `${cell_tooltips[type]} - requires symmetry data`
+            : cell_tooltips[type]}
           <button
             class="cell-type-btn"
             class:selected={cell_type === type}
@@ -223,7 +247,9 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
-    z-index: 100;
+    z-index: var(--z-index-viewer-dropdown, 100);
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     font-size: var(--struct-cell-select-dropdown-font, max(10px, 1em));
     min-width: 118px;
   }
@@ -282,16 +308,8 @@
   }
   .cell-type-btn.selected {
     color: var(--cell-select-accent);
-    background: color-mix(
-      in srgb,
-      var(--cell-select-accent) 18%,
-      var(--cell-select-surface)
-    );
-    border-color: color-mix(
-      in srgb,
-      var(--cell-select-accent) 45%,
-      var(--cell-select-border)
-    );
+    background: color-mix(in srgb, var(--cell-select-accent) 18%, var(--cell-select-surface));
+    border-color: color-mix(in srgb, var(--cell-select-accent) 45%, var(--cell-select-border));
   }
   .cell-type-btn.disabled {
     opacity: 0.4;
@@ -319,16 +337,8 @@
   }
   .preset-btn.selected {
     color: var(--cell-select-accent);
-    background: color-mix(
-      in srgb,
-      var(--cell-select-accent) 18%,
-      var(--cell-select-surface)
-    );
-    border-color: color-mix(
-      in srgb,
-      var(--cell-select-accent) 45%,
-      var(--cell-select-border)
-    );
+    background: color-mix(in srgb, var(--cell-select-accent) 18%, var(--cell-select-surface));
+    border-color: color-mix(in srgb, var(--cell-select-accent) 45%, var(--cell-select-border));
   }
 
   .custom-input-row {