matterviz 0.3.2 → 0.3.4

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -1,76 +1,107 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { format_num } from '../labels';
-import { analyze_structure_symmetry } from '../symmetry';
-let { pane_open = $bindable(false), structure, bz_data, pane_props = {}, } = $props();
-let sym_data = $state(null);
-$effect(() => {
-    sym_data = null;
-    if (!pane_open || !structure || !(`lattice` in structure))
-        return;
+<script lang="ts">
+  import type { InfoItem } from '../layout'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { format_num } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import type { Crystal } from '../structure'
+  import { analyze_structure_symmetry } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import type { ComponentProps } from 'svelte'
+  import type { BrillouinZoneData } from './types'
+
+  let {
+    pane_open = $bindable(false),
+    structure,
+    bz_data,
+    pane_props = {},
+  }: {
+    pane_open?: boolean
+    structure?: Crystal
+    bz_data?: BrillouinZoneData
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+  } = $props()
+
+  let sym_data = $state<MoyoDataset | null>(null)
+
+  $effect(() => {
+    sym_data = null
+    if (!pane_open || !structure || !(`lattice` in structure)) return
+
     analyze_structure_symmetry(structure, {})
-        .then((data) => (sym_data = data))
-        .catch(console.error);
-});
-let pane_data = $derived.by(() => {
-    if (!structure || !bz_data)
-        return [];
-    const sections = [];
+      .then((data) => (sym_data = data))
+      .catch(console.error)
+  })
+
+  let pane_data = $derived.by(() => {
+    if (!structure || !bz_data) return []
+    const sections: { title: string; items: InfoItem[] }[] = []
+
     // Brillouin Zone section
-    const bz_order_suffix = [`st`, `nd`, `rd`][bz_data.order - 1] ?? `th`;
+    const bz_order_suffix = [`st`, `nd`, `rd`][bz_data.order - 1] ?? `th`
     sections.push({
-        title: `Brillouin Zone`,
-        items: [
-            {
-                label: `Order`,
-                value: `${bz_data.order}${bz_order_suffix}`,
-                key: `bz-order`,
-            },
-            {
-                label: `Volume`,
-                value: `${format_num(bz_data.volume, `.3f`)} Å⁻³`,
-                key: `bz-volume`,
-            },
-            {
-                label: `Vertices / Faces`,
-                value: `${bz_data.vertices.length} / ${bz_data.faces.length}`,
-                key: `bz-vertices`,
-            },
-            {
-                label: `Space Group`,
-                value: `${sym_data?.number ?? ``} ${sym_data?.hm_symbol ? `(${sym_data.hm_symbol})` : ``}`.trim(),
-                key: `space-group`,
-            },
-        ],
-    });
+      title: `Brillouin Zone`,
+      items: [
+        {
+          label: `Order`,
+          value: `${bz_data.order}${bz_order_suffix}`,
+          key: `bz-order`,
+        },
+        {
+          label: `Volume`,
+          value: `${format_num(bz_data.volume, `.3f`)} Å⁻³`,
+          key: `bz-volume`,
+        },
+        {
+          label: `Vertices / Faces`,
+          value: `${bz_data.vertices.length} / ${bz_data.faces.length}`,
+          key: `bz-vertices`,
+        },
+        {
+          label: `Space Group`,
+          value: `${sym_data?.number ?? ``} ${
+            sym_data?.hm_symbol ? `(${sym_data.hm_symbol})` : ``
+          }`.trim(),
+          key: `space-group`,
+        },
+      ],
+    })
+
     // Real Lattice section
     sections.push({
-        title: `Real Lattice`,
-        items: [
-            {
-                label: `a, b, c`,
-                value: `${[structure.lattice.a, structure.lattice.b, structure.lattice.c]
-                    .map((val) => format_num(val, `.3~f`))
-                    .join(`, `)} Å`,
-                key: `real-lattice-abc`,
-            },
-            {
-                label: `α, β, γ`,
-                value: `${[structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
-                    .map((val) => format_num(val, `.2~f`))
-                    .join(`, `)}°`,
-                key: `real-lattice-angles`,
-            },
-        ],
-    });
+      title: `Real Lattice`,
+      items: [
+        {
+          label: `a, b, c`,
+          value: `${
+            [structure.lattice.a, structure.lattice.b, structure.lattice.c]
+              .map((val) => format_num(val, `.3~f`))
+              .join(`, `)
+          } Å`,
+          key: `real-lattice-abc`,
+        },
+        {
+          label: `α, β, γ`,
+          value: `${
+            [structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
+              .map((val) => format_num(val, `.2~f`))
+              .join(`, `)
+          }°`,
+          key: `real-lattice-angles`,
+        },
+      ],
+    })
+
     // Reciprocal Lattice section
-    const k_lattice_items = bz_data.k_lattice.map((vec, idx) => ({
-        label: [`b₁`, `b₂`, `b₃`][idx],
-        value: `(${vec.map((x) => format_num(x, `.3~f`)).join(`, `)})`,
-        key: `reciprocal-${[`b1`, `b2`, `b3`][idx]}`,
-    }));
-    sections.push({ title: `Reciprocal Lattice (Å⁻¹)`, items: k_lattice_items });
-    return sections;
-});
+    const k_lattice_items: InfoItem[] = bz_data.k_lattice.map((vec, idx) => ({
+      label: [`b₁`, `b₂`, `b₃`][idx],
+      value: `(${vec.map((x) => format_num(x, `.3~f`)).join(`, `)})`,
+      key: `reciprocal-${[`b1`, `b2`, `b3`][idx]}`,
+    }))
+
+    sections.push({ title: `Reciprocal Lattice (Å⁻¹)`, items: k_lattice_items })
+
+    return sections
+  })
 </script>
 
 {#if structure && bz_data}
@@ -88,7 +119,7 @@ let pane_data = $derived.by(() => {
         {#each section.items as item (item.key ?? item.label)}
           <div class="info-item">
             <span>{item.label}</span>
-            <span>{@html item.value}</span>
+            <span>{@html sanitize_html(item.value)}</span>
           </div>
         {/each}
       </section>

package/dist/brillouin/BrillouinZoneScene.svelte

@@ -1,59 +1,150 @@
-<script lang="ts">import { AXIS_COLORS, NEG_AXIS_COLORS } from '../colors';
-import * as math from '../math';
-import { DEFAULTS } from '../settings';
-import Arrow from '../structure/Arrow.svelte';
-import Cylinder from '../structure/Cylinder.svelte';
-import { T, useThrelte } from '@threlte/core';
-import * as extras from '@threlte/extras';
-import { BufferAttribute, BufferGeometry, Vector3 } from 'three';
-let { bz_data = $bindable(), camera_position = $bindable(), camera_projection = $bindable(`perspective`), surface_color = $bindable(`#4488ff`), surface_opacity = $bindable(0.3), edge_color = $bindable(`#000000`), edge_width = $bindable(0.05), show_vectors = $bindable(true), vector_scale = $bindable(1.0), 
-// Irreducible BZ options
-show_ibz = false, ibz_data = null, ibz_color = `#ff8844`, ibz_opacity = 0.5, rotation_damping = DEFAULTS.structure.rotation_damping, max_zoom = DEFAULTS.structure.max_zoom, min_zoom = DEFAULTS.structure.min_zoom, rotate_speed = DEFAULTS.structure.rotate_speed, zoom_speed = DEFAULTS.structure.zoom_speed, pan_speed = DEFAULTS.structure.pan_speed, zoom_to_cursor = DEFAULTS.structure.zoom_to_cursor, fov = DEFAULTS.structure.fov, initial_zoom = DEFAULTS.structure.initial_zoom, ambient_light = DEFAULTS.structure.ambient_light, directional_light = DEFAULTS.structure.directional_light, gizmo = DEFAULTS.structure.show_gizmo, auto_rotate = DEFAULTS.structure.auto_rotate, camera_is_moving = $bindable(false), scene = $bindable(), camera = $bindable(), k_path_points = [], k_path_labels = [], hovered_k_point = null, hovered_qpoint_index = null, hover_data = $bindable(null), } = $props();
-const threlte = useThrelte();
-$effect(() => {
-    scene = threlte.scene;
-    camera = threlte.camera.current;
+<script lang="ts">
+  import { AXIS_COLORS, NEG_AXIS_COLORS } from '../colors'
+  import type { Vec3 } from '../math'
+  import * as math from '../math'
+  import { type CameraProjection, DEFAULTS } from '../settings'
+  import Arrow from '../structure/Arrow.svelte'
+  import Cylinder from '../structure/Cylinder.svelte'
+  import { T, useThrelte } from '@threlte/core'
+  import * as extras from '@threlte/extras'
+  import type { ComponentProps } from 'svelte'
+  import type { Camera, Scene } from 'three'
+  import { BufferAttribute, BufferGeometry, Vector3 } from 'three'
+  import type { BrillouinZoneData, BZHoverData, IrreducibleBZData } from './types'
+
+  // Threlte pointer event type for mesh interactions
+  type ThreltePointerEvent = { point: Vector3; nativeEvent: PointerEvent }
+
+  let {
+    bz_data = $bindable(),
+    camera_position = $bindable(),
+    camera_projection = $bindable(`perspective`),
+    surface_color = $bindable(`#4488ff`),
+    surface_opacity = $bindable(0.3),
+    edge_color = $bindable(`#000000`),
+    edge_width = $bindable(0.05),
+    show_vectors = $bindable(true),
+    vector_scale = $bindable(1.0),
+    // Irreducible BZ options
+    show_ibz = false,
+    ibz_data = null as IrreducibleBZData | null,
+    ibz_color = `#ff8844`,
+    ibz_opacity = 0.5,
+    rotation_damping = DEFAULTS.structure.rotation_damping,
+    max_zoom = DEFAULTS.structure.max_zoom,
+    min_zoom = DEFAULTS.structure.min_zoom,
+    rotate_speed = DEFAULTS.structure.rotate_speed,
+    zoom_speed = DEFAULTS.structure.zoom_speed,
+    pan_speed = DEFAULTS.structure.pan_speed,
+    zoom_to_cursor = DEFAULTS.structure.zoom_to_cursor,
+    fov = DEFAULTS.structure.fov,
+    initial_zoom = DEFAULTS.structure.initial_zoom,
+    ambient_light = DEFAULTS.structure.ambient_light,
+    directional_light = DEFAULTS.structure.directional_light,
+    gizmo = DEFAULTS.structure.show_gizmo,
+    auto_rotate = DEFAULTS.structure.auto_rotate,
+    camera_is_moving = $bindable(false),
+    scene = $bindable(),
+    camera = $bindable(),
+    k_path_points = [],
+    k_path_labels = [],
+    hovered_k_point = null,
+    hovered_qpoint_index = null,
+    hover_data = $bindable<BZHoverData | null>(null),
+  }: {
+    bz_data?: BrillouinZoneData
+    camera_position?: Vec3 | undefined
+    camera_projection?: CameraProjection
+    surface_color?: string
+    surface_opacity?: number
+    edge_color?: string
+    edge_width?: number
+    show_vectors?: boolean
+    vector_scale?: number
+    // Irreducible BZ options
+    show_ibz?: boolean
+    ibz_data?: IrreducibleBZData | null
+    ibz_color?: string
+    ibz_opacity?: number
+    rotation_damping?: number
+    max_zoom?: number
+    min_zoom?: number
+    rotate_speed?: number
+    zoom_speed?: number
+    pan_speed?: number
+    zoom_to_cursor?: boolean
+    fov?: number
+    initial_zoom?: number
+    ambient_light?: number
+    directional_light?: number
+    gizmo?: boolean | ComponentProps<typeof extras.Gizmo>
+    auto_rotate?: number
+    camera_is_moving?: boolean
+    scene?: Scene
+    camera?: Camera
+    k_path_points?: Vec3[]
+    k_path_labels?: { position: Vec3; label: string | null }[]
+    hovered_k_point?: Vec3 | null
+    hovered_qpoint_index?: number | null
+    hover_data?: BZHoverData | null
+  } = $props()
+
+  const threlte = useThrelte()
+  $effect(() => {
+    scene = threlte.scene
+    camera = threlte.camera.current
     if (threlte.renderer) {
-        Object.assign(threlte.renderer.domElement, { __renderer: threlte.renderer });
+      Object.assign(threlte.renderer.domElement, { __renderer: threlte.renderer })
     }
-});
-extras.interactivity();
-// Compute centroid of BZ vertices for proper rotation center
-const rotation_target = $derived.by(() => {
-    if (!bz_data?.vertices || bz_data.vertices.length === 0)
-        return [0, 0, 0];
-    const sum = bz_data.vertices.reduce((acc, v) => math.add(acc, v), [0, 0, 0]);
-    return math.scale(sum, 1 / bz_data.vertices.length);
-});
-// BZ size for camera positioning: average magnitude of k-vectors
-const bz_size = $derived.by(() => {
-    if (!bz_data?.k_lattice)
-        return 10;
-    const mags = bz_data.k_lattice.map((vec) => Math.hypot(...vec));
-    return mags.reduce((sum, mag) => sum + mag, 0) / 3;
-});
-const computed_camera_position = $derived.by(() => camera_position || [10, 3, 8].map((x) => x * Math.max(1, bz_size)));
-const gizmo_props = $derived({
+  })
+
+  extras.interactivity()
+
+  // Compute centroid of BZ vertices for proper rotation center
+  const rotation_target = $derived.by((): Vec3 => {
+    if (!bz_data?.vertices || bz_data.vertices.length === 0) return [0, 0, 0]
+    const sum = bz_data.vertices.reduce(
+      (acc, v) => math.add(acc, v),
+      [0, 0, 0] as Vec3,
+    )
+    return math.scale(sum, 1 / bz_data.vertices.length)
+  })
+
+  // BZ size for camera positioning: average magnitude of k-vectors
+  const bz_size = $derived.by(() => {
+    if (!bz_data?.k_lattice) return 10
+    const mags = bz_data.k_lattice.map((vec) => Math.hypot(...vec))
+    return mags.reduce((sum, mag) => sum + mag, 0) / 3
+  })
+
+  const computed_camera_position = $derived.by(() =>
+    camera_position || ([10, 3, 8].map((x) => x * Math.max(1, bz_size)) as Vec3)
+  )
+
+  const gizmo_props = $derived({
     background: { enabled: false },
     className: `responsive-gizmo`,
-    ...Object.fromEntries([...AXIS_COLORS, ...NEG_AXIS_COLORS].map(([axis, color, hover]) => [
+    ...Object.fromEntries(
+      [...AXIS_COLORS, ...NEG_AXIS_COLORS].map(([axis, color, hover]) => [
         axis,
         {
-            color,
-            labelColor: `#111`,
-            opacity: axis.startsWith(`n`) ? 0.9 : 0.8,
-            hover: {
-                color: hover,
-                labelColor: `#222`,
-                opacity: axis.startsWith(`n`) ? 1 : 0.9,
-            },
+          color,
+          labelColor: `#111`,
+          opacity: axis.startsWith(`n`) ? 0.9 : 0.8,
+          hover: {
+            color: hover,
+            labelColor: `#222`,
+            opacity: axis.startsWith(`n`) ? 1 : 0.9,
+          },
         },
-    ])),
+      ]),
+    ),
     ...(typeof gizmo === `object` ? gizmo : {}),
     offset: { left: 5, bottom: 5 },
-});
-const is_ortho = $derived(camera_projection === `orthographic`);
-const orbit_controls_props = $derived({
+  })
+
+  const is_ortho = $derived(camera_projection === `orthographic`)
+  const orbit_controls_props = $derived({
     position: [0, 0, 0],
     target: rotation_target,
     enableRotate: rotate_speed > 0,
@@ -71,134 +162,155 @@ const orbit_controls_props = $derived({
     dampingFactor: rotation_damping,
     onstart: () => (camera_is_moving = true),
     onend: () => (camera_is_moving = false),
-});
-const vector_colors = [`red`, `green`, `blue`];
-const vector_labels = [`b₁`, `b₂`, `b₃`];
-// Create mesh geometry from faces with fan triangulation
-function create_mesh_geometry(vertices, faces) {
-    if (faces.length === 0)
-        return null;
-    const positions = [];
-    const normals = [];
+  })
+
+  const vector_colors = [`red`, `green`, `blue`]
+  const vector_labels = [`b₁`, `b₂`, `b₃`]
+
+  // Create mesh geometry from faces with fan triangulation
+  function create_mesh_geometry(
+    vertices: Vec3[],
+    faces: number[][],
+  ): BufferGeometry | null {
+    if (faces.length === 0) return null
+
+    const positions: number[] = []
+    const normals: number[] = []
+
     for (const face of faces) {
-        if (face.length < 3)
-            continue;
-        for (let face_idx = 1; face_idx < face.length - 1; face_idx++) {
-            const indices = [face[0], face[face_idx], face[face_idx + 1]];
-            if (indices.some((idx) => idx < 0 || idx >= vertices.length))
-                continue;
-            const [v0, v1, v2] = indices.map((idx) => vertices[idx]);
-            positions.push(...v0, ...v1, ...v2);
-            const e1 = math.subtract(v1, v0);
-            const e2 = math.subtract(v2, v0);
-            const normal_vec = math.cross_3d(e1, e2);
-            const len = Math.hypot(...normal_vec);
-            const norm = len > 1e-10 ? normal_vec.map((x) => x / len) : [0, 0, 0];
-            normals.push(...norm, ...norm, ...norm);
-        }
+      if (face.length < 3) continue
+      for (let face_idx = 1; face_idx < face.length - 1; face_idx++) {
+        const indices = [face[0], face[face_idx], face[face_idx + 1]]
+        if (indices.some((idx) => idx < 0 || idx >= vertices.length)) continue
+        const [v0, v1, v2] = indices.map((idx) => vertices[idx])
+        positions.push(...v0, ...v1, ...v2)
+
+        const e1: Vec3 = math.subtract(v1, v0)
+        const e2: Vec3 = math.subtract(v2, v0)
+        const normal_vec = math.cross_3d(e1, e2)
+        const len = Math.hypot(...normal_vec)
+        const norm = len > 1e-10 ? normal_vec.map((x) => x / len) : [0, 0, 0]
+        normals.push(...norm, ...norm, ...norm)
+      }
     }
-    const geometry = new BufferGeometry();
-    geometry.setAttribute(`position`, new BufferAttribute(new Float32Array(positions), 3));
-    geometry.setAttribute(`normal`, new BufferAttribute(new Float32Array(normals), 3));
-    geometry.computeBoundingSphere();
-    return geometry;
-}
-const bz_geometry = $derived(bz_data ? create_mesh_geometry(bz_data.vertices, bz_data.faces) : null);
-const ibz_geometry = $derived(show_ibz && ibz_data
-    ? create_mesh_geometry(ibz_data.vertices, ibz_data.faces)
-    : null);
-// Separate effects to avoid disposing one geometry when only the other changes
-$effect(() => {
-    const prev = bz_geometry;
-    return () => prev?.dispose();
-});
-$effect(() => {
-    const prev = ibz_geometry;
-    return () => prev?.dispose();
-});
-// Compute inverse of k_lattice for Cartesian->fractional conversion
-const k_lattice_inv = $derived.by(() => {
-    if (!bz_data?.k_lattice)
-        return null;
+
+    const geometry = new BufferGeometry()
+    geometry.setAttribute(
+      `position`,
+      new BufferAttribute(new Float32Array(positions), 3),
+    )
+    geometry.setAttribute(`normal`, new BufferAttribute(new Float32Array(normals), 3))
+    geometry.computeBoundingSphere()
+    return geometry
+  }
+
+  const bz_geometry = $derived(
+    bz_data ? create_mesh_geometry(bz_data.vertices, bz_data.faces) : null,
+  )
+  const ibz_geometry = $derived(
+    show_ibz && ibz_data
+      ? create_mesh_geometry(ibz_data.vertices, ibz_data.faces)
+      : null,
+  )
+
+  // Separate effects to avoid disposing one geometry when only the other changes
+  $effect(() => {
+    const prev = bz_geometry
+    return () => prev?.dispose()
+  })
+  $effect(() => {
+    const prev = ibz_geometry
+    return () => prev?.dispose()
+  })
+
+  // Compute inverse of k_lattice for Cartesian->fractional conversion
+  const k_lattice_inv = $derived.by(() => {
+    if (!bz_data?.k_lattice) return null
     try {
-        return math.matrix_inverse_3x3(bz_data.k_lattice);
-    }
-    catch {
-        return null;
+      return math.matrix_inverse_3x3(bz_data.k_lattice)
+    } catch {
+      return null
     }
-});
-// Convert Cartesian k-coordinates to fractional (reciprocal lattice units)
-function cartesian_to_fractional(cart) {
-    if (!k_lattice_inv)
-        return null;
-    return math.mat3x3_vec3_multiply(k_lattice_inv, cart);
-}
-// Throttle state for pointer move events
-let last_hover_time = 0;
-let last_hover_mesh = null;
-const HOVER_THROTTLE_MS = 16; // ~60fps
-// Reset throttle when bz_data changes to ensure immediate response
-$effect(() => {
+  })
+
+  // Convert Cartesian k-coordinates to fractional (reciprocal lattice units)
+  function cartesian_to_fractional(cart: Vec3): Vec3 | null {
+    if (!k_lattice_inv) return null
+    return math.mat3x3_vec3_multiply(k_lattice_inv, cart)
+  }
+
+  // Throttle state for pointer move events
+  let last_hover_time = 0
+  let last_hover_mesh: `bz` | `ibz` | null = null
+  const HOVER_THROTTLE_MS = 16 // ~60fps
+
+  // Reset throttle when bz_data changes to ensure immediate response
+  $effect(() => {
     if (bz_data) {
-        last_hover_time = 0;
-        last_hover_mesh = null;
+      last_hover_time = 0
+      last_hover_mesh = null
     }
-});
-// Track IBZ hover state - IBZ takes priority over BZ
-let ibz_hovered = false;
-$effect(() => {
+  })
+
+  // Track IBZ hover state - IBZ takes priority over BZ
+  let ibz_hovered = false
+  $effect(() => {
     if (!show_ibz) {
-        ibz_hovered = false;
-        // Clear hover tooltip if it was showing IBZ data
-        if (hover_data?.is_ibz)
-            hover_data = null;
+      ibz_hovered = false
+      // Clear hover tooltip if it was showing IBZ data
+      if (hover_data?.is_ibz) hover_data = null
     }
-});
-// Create hover data from pointer event
-function create_hover_data(event, is_ibz) {
-    if (!bz_data)
-        return null;
-    const position_cartesian = [event.point.x, event.point.y, event.point.z];
-    const position_fractional = cartesian_to_fractional(position_cartesian);
-    const { clientX, clientY } = event.nativeEvent;
-    const ibz_vol = ibz_data?.volume ?? null;
+  })
+
+  // Create hover data from pointer event
+  function create_hover_data(
+    event: ThreltePointerEvent,
+    is_ibz: boolean,
+  ): BZHoverData | null {
+    if (!bz_data) return null
+
+    const position_cartesian: Vec3 = [event.point.x, event.point.y, event.point.z]
+    const position_fractional = cartesian_to_fractional(position_cartesian)
+
+    const { clientX, clientY } = event.nativeEvent
+    const ibz_vol = ibz_data?.volume ?? null
     // Round to nearest integer since symmetry multiplicity is the point group order
     const symmetry_multiplicity = ibz_vol != null && ibz_vol > 0
-        ? Math.round(bz_data.volume / ibz_vol)
-        : null;
+      ? Math.round(bz_data.volume / ibz_vol)
+      : null
+
     return {
-        position_cartesian,
-        position_fractional,
-        screen_position: { x: clientX, y: clientY },
-        is_ibz,
-        bz_order: bz_data.order,
-        bz_volume: bz_data.volume,
-        ibz_volume: ibz_vol,
-        symmetry_multiplicity,
-    };
-}
-// Throttled hover handler - IBZ takes priority over BZ
-function handle_hover(event, is_ibz) {
-    if (is_ibz)
-        ibz_hovered = true;
-    else if (ibz_hovered)
-        return; // BZ defers to IBZ
-    const mesh = is_ibz ? `ibz` : `bz`;
-    const now = performance.now();
+      position_cartesian,
+      position_fractional,
+      screen_position: { x: clientX, y: clientY },
+      is_ibz,
+      bz_order: bz_data.order,
+      bz_volume: bz_data.volume,
+      ibz_volume: ibz_vol,
+      symmetry_multiplicity,
+    }
+  }
+
+  // Throttled hover handler - IBZ takes priority over BZ
+  function handle_hover(event: ThreltePointerEvent, is_ibz: boolean): void {
+    if (is_ibz) ibz_hovered = true
+    else if (ibz_hovered) return // BZ defers to IBZ
+
+    const mesh = is_ibz ? `ibz` : `bz`
+    const now = performance.now()
     // Bypass throttle when switching meshes for responsive transitions
-    if (last_hover_mesh === mesh && now - last_hover_time < HOVER_THROTTLE_MS)
-        return;
-    last_hover_time = now;
-    last_hover_mesh = mesh;
-    hover_data = create_hover_data(event, is_ibz);
-}
-// Leave handler - IBZ clears state, BZ only clears if IBZ not hovered
-function handle_leave(is_ibz) {
-    if (is_ibz)
-        ibz_hovered = false;
-    if (is_ibz || !ibz_hovered)
-        hover_data = null;
-}
+    if (last_hover_mesh === mesh && now - last_hover_time < HOVER_THROTTLE_MS) return
+
+    last_hover_time = now
+    last_hover_mesh = mesh
+    hover_data = create_hover_data(event, is_ibz)
+  }
+
+  // Leave handler - IBZ clears state, BZ only clears if IBZ not hovered
+  function handle_leave(is_ibz: boolean): void {
+    if (is_ibz) ibz_hovered = false
+    if (is_ibz || !ibz_hovered) hover_data = null
+  }
 </script>
 
 {#if camera_projection === `perspective`}