matterviz 0.3.7 → 0.4.1

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
   import { export_canvas_as_png } from '../io/export'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
-  import type { ComponentProps } from 'svelte'
-  import { CopyButton } from 'svelte-multiselect'
-  import { tooltip } from 'svelte-multiselect/attachments'
+  import { download } from '../io/fetch'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { Camera, Scene } from 'three'
   import type { BrillouinZoneData } from './types'
@@ -27,30 +26,11 @@
     png_dpi?: number
   } = $props()
 
-  let json_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-
   function export_as_png() {
     const canvas = wrapper?.querySelector(`canvas`)
     if (!canvas || !scene || !camera) return
-
-    const dpi = Math.max(50, Math.min(600, Math.trunc(png_dpi)))
     const png_name = `${filename}-${bz_data?.order ?? `1`}.png`
-    export_canvas_as_png(canvas, png_name, dpi, scene, camera)
-  }
-
-  function export_as_json() {
-    const json_data = get_json_data()
-    if (!json_data || !bz_data) return
-
-    const blob = new Blob([JSON.stringify(json_data, null, 2)], {
-      type: `application/json`,
-    })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement(`a`)
-    link.href = url
-    link.download = `${filename}-bz-order-${bz_data.order}.json`
-    link.click()
-    URL.revokeObjectURL(url)
+    export_canvas_as_png(canvas, png_name, png_dpi, scene, camera)
   }
 
   function get_json_data() {
@@ -65,82 +45,49 @@
     }
   }
 
-  let json_string = $derived.by(() => {
+  function export_as_json() {
     const json_data = get_json_data()
-    return json_data ? JSON.stringify(json_data, null, 2) : null
-  })
+    if (!json_data || !bz_data) return
+    download(
+      JSON.stringify(json_data, null, 2),
+      `${filename}-bz-order-${bz_data.order}.json`,
+      `application/json`,
+    )
+  }
+
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Export as image`,
+      items: [{
+        label: `PNG`,
+        disabled: !scene || !camera,
+        show_dpi: true,
+        on_download: export_as_png,
+      }],
+    },
+    {
+      title: `Export as data`,
+      tooltip: `Includes vertices, faces, edges, and reciprocal lattice vectors`,
+      items: [{
+        label: `JSON`,
+        disabled: !bz_data,
+        on_download: export_as_json,
+        copy_text: () => {
+          const json_data = get_json_data()
+          return json_data ? JSON.stringify(json_data, null, 2) : null
+        },
+      }],
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
   toggle_props={{
     class: `bz-export-toggle`,
     title: export_pane_open ? `` : `Export Brillouin zone`,
   }}
->
-  <h4 id="export-as-image">Export as image</h4>
-  <label>
-    PNG
-    <button
-      type="button"
-      onclick={export_as_png}
-      disabled={!scene || !camera}
-      title="PNG ({png_dpi} DPI)"
-    >
-      ⬇
-    </button>
-    &nbsp;(DPI: <input
-      type="number"
-      min={72}
-      max={600}
-      bind:value={png_dpi}
-      title="Export resolution in dots per inch"
-    />)
-  </label>
-
-  <h4 id="export-as-data"
-    {@attach tooltip({ content: `Includes vertices, faces, edges, and reciprocal lattice vectors` })}
-  >
-    Export as data
-  </h4>
-  <label>
-    JSON
-    <button
-      type="button"
-      onclick={export_as_json}
-      disabled={!bz_data}
-      title="Download JSON"
-    >
-      ⬇
-    </button>
-    <CopyButton
-      content={json_string ?? ``}
-      bind:state={json_copy_state}
-      disabled={!json_string}
-      title="Copy JSON to clipboard"
-    />
-  </label>
-</DraggablePane>
-
-<style>
-  label {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4pt;
-    font-size: 0.95em;
-  }
-  button {
-    width: 1.9em;
-    height: 1.6em;
-    padding: 0 6pt;
-    margin: 0 0 0 4pt;
-    box-sizing: border-box;
-  }
-  input {
-    margin: 0 0 0 2pt;
-  }
-</style>
+  {...rest}
+/>

package/dist/brillouin/BrillouinZoneExportPane.svelte.d.ts

@@ -10,6 +10,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     filename?: string;
     png_dpi?: number;
 };
-declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type BrillouinZoneExportPane = ReturnType<typeof BrillouinZoneExportPane>;
 export default BrillouinZoneExportPane;

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import type { PaneProps } from '../overlays'
   import type { InfoItem } from '../layout'
   import DraggablePane from '../overlays/DraggablePane.svelte'
+  import InfoPaneCards from '../overlays/InfoPaneCards.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'
@@ -18,7 +19,7 @@
     pane_open?: boolean
     structure?: Crystal
     bz_data?: BrillouinZoneData
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    pane_props?: PaneProps
   } = $props()
 
   let sym_data = $state<MoyoDataset | null>(null)
@@ -112,35 +113,11 @@
     toggle_props={{ class: `bz-info-toggle`, title: `Brillouin zone info` }}
     pane_props={{ ...pane_props, class: `bz-info-pane ${pane_props?.class ?? ``}` }}
   >
-    {#each pane_data as section, sec_idx (section.title)}
-      {#if sec_idx > 0}<hr />{/if}
-      <section>
-        <h4>{section.title}</h4>
-        {#each section.items as item (item.key ?? item.label)}
-          <div class="info-item">
-            <span>{item.label}</span>
-            <span>{@html sanitize_html(item.value)}</span>
-          </div>
-        {/each}
-      </section>
-    {/each}
+    <InfoPaneCards
+      cards={pane_data.map(({ title, items }) => ({ title, rows: items }))}
+      show_filter={false}
+      filter_placeholder="Filter Brillouin zone info"
+      empty_label="Brillouin zone info"
+    />
   </DraggablePane>
 {/if}
-
-<style>
-  section div.info-item {
-    display: flex;
-    justify-content: space-between;
-    gap: 6pt;
-    padding: 1pt;
-    line-height: 1.5;
-  }
-  h4 {
-    margin: 0.5em 0;
-  }
-  hr {
-    border: none;
-    border-top: 1px solid var(--divider-color, rgba(128, 128, 128, 0.2));
-    margin: 0.5em 0;
-  }
-</style>

package/dist/brillouin/BrillouinZoneInfoPane.svelte.d.ts

@@ -1,12 +1,11 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { PaneProps } from '../overlays';
 import type { Crystal } from '../structure';
-import type { ComponentProps } from 'svelte';
 import type { BrillouinZoneData } from './types';
 type $$ComponentProps = {
     pane_open?: boolean;
     structure?: Crystal;
     bz_data?: BrillouinZoneData;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    pane_props?: PaneProps;
 };
 declare const BrillouinZoneInfoPane: import("svelte").Component<$$ComponentProps, {}, "pane_open">;
 type BrillouinZoneInfoPane = ReturnType<typeof BrillouinZoneInfoPane>;

package/dist/brillouin/BrillouinZoneScene.svelte

@@ -1,20 +1,23 @@
 <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 { bind_renderer, build_orbit_props, SceneCamera } from '../scene'
+  import type { SceneControlProps, ThreltePointerEvent } from '../scene'
+  import { DEFAULTS } from '../settings'
   import Cylinder from '../structure/Cylinder.svelte'
-  import { T, useThrelte } from '@threlte/core'
+  import { T } 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 {
+    cartesian_to_fractional,
+    default_camera_position,
+    k_lattice_inverse,
+    k_space_size,
+    polyhedron_centroid,
+    polyhedron_geometry,
+  } from './geometry'
+  import ReciprocalVectors from './ReciprocalVectors.svelte'
   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(),
@@ -43,7 +46,6 @@
     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 = [],
@@ -51,10 +53,10 @@
     hovered_k_point = null,
     hovered_qpoint_index = null,
     hover_data = $bindable<BZHoverData | null>(null),
-  }: {
+    on_kpath_hover,
+  }: SceneControlProps & {
     bz_data?: BrillouinZoneData
     camera_position?: Vec3 | undefined
-    camera_projection?: CameraProjection
     surface_color?: string
     surface_opacity?: number
     edge_color?: string
@@ -66,150 +68,64 @@
     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
+    on_kpath_hover?: (qpoint_index: number | null) => void
   } = $props()
 
-  const threlte = useThrelte()
-  $effect(() => {
-    scene = threlte.scene
-    camera = threlte.camera.current
-    if (threlte.renderer) {
-      Object.assign(threlte.renderer.domElement, { __renderer: threlte.renderer })
-    }
+  bind_renderer((threlte_scene, threlte_camera) => {
+    scene = threlte_scene
+    camera = threlte_camera
   })
 
   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((coord) => coord * Math.max(1, bz_size)) as Vec3)
+  // BZ centroid as rotation center; mean k-vector magnitude for camera positioning
+  const rotation_target = $derived(polyhedron_centroid(bz_data?.vertices))
+  const bz_size = $derived(k_space_size(bz_data?.k_lattice))
+  const computed_camera_position = $derived(
+    camera_position || default_camera_position(bz_size),
   )
 
-  const gizmo_props = $derived({
-    background: { enabled: false },
-    className: `responsive-gizmo`,
-    ...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,
-          },
-        },
-      ]),
-    ),
-    ...(typeof gizmo === `object` ? gizmo : {}),
-    offset: { left: 5, bottom: 5 },
-  })
-
-  const is_ortho = $derived(camera_projection === `orthographic`)
-  const orbit_controls_props = $derived({
-    position: [0, 0, 0],
+  const orbit_controls_props = $derived(build_orbit_props({
+    camera_projection,
     target: rotation_target,
-    enableRotate: rotate_speed > 0,
-    rotateSpeed: rotate_speed,
-    enableZoom: zoom_speed > 0,
-    zoomSpeed: is_ortho ? zoom_speed * 2 : zoom_speed,
-    zoomToCursor: zoom_to_cursor,
-    enablePan: pan_speed > 0,
-    panSpeed: pan_speed,
-    maxZoom: max_zoom,
-    minZoom: min_zoom,
-    autoRotate: Boolean(auto_rotate),
-    autoRotateSpeed: auto_rotate,
-    enableDamping: Boolean(rotation_damping),
-    dampingFactor: rotation_damping,
-    onstart: () => (camera_is_moving = true),
-    onend: () => (camera_is_moving = false),
+    rotate_speed,
+    zoom_speed,
+    zoom_to_cursor,
+    pan_speed,
+    max_zoom,
+    min_zoom,
+    auto_rotate,
+    rotation_damping,
+  }))
+
+  // K-path styling. The invisible hover proxy is twice the visible thickness so the cursor
+  // snaps to the path even when it isn't directly over the thin visible segment.
+  const KPATH_THICKNESS = 0.12
+  const KPATH_HOVER_THICKNESS = KPATH_THICKNESS * 2
+
+  // Threshold for skipping k-path segments that bridge a path discontinuity (e.g. `U|K`).
+  // Band paths are densely sampled, so legit segments are tiny; a discontinuity jumps by
+  // a fraction of the zone. Skip segments far longer than the median sampling step.
+  const k_path_seg_cutoff = $derived.by(() => {
+    if (!k_path_points || k_path_points.length < 3) return Infinity
+    const lens = k_path_points
+      .slice(1)
+      .map((pt, idx) => Math.hypot(...math.subtract(pt as Vec3, k_path_points[idx] as Vec3)))
+      .sort((len_a, len_b) => len_a - len_b)
+    return lens[Math.floor(lens.length / 2)] * 10
   })
 
-  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: 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((coord) => coord / 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,
+    bz_data ? polyhedron_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)
+      ? polyhedron_geometry(ibz_data.vertices, ibz_data.faces)
       : null,
   )
 
@@ -223,21 +139,8 @@
     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
-    }
-  })
-
-  // 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)
-  }
+  // Inverse of k_lattice for Cartesian->fractional conversion
+  const k_lattice_inv = $derived(k_lattice_inverse(bz_data?.k_lattice))
 
   // Throttle state for pointer move events
   let last_hover_time = 0
@@ -270,7 +173,7 @@
     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 position_fractional = cartesian_to_fractional(k_lattice_inv, position_cartesian)
 
     const { clientX, clientY } = event.nativeEvent
     const ibz_vol = ibz_data?.volume ?? null
@@ -311,26 +214,26 @@
     if (is_ibz) ibz_hovered = false
     if (is_ibz || !ibz_hovered) hover_data = null
   }
+
+  // K-path hover: report the nearer endpoint's q-point index of the hovered segment
+  function handle_kpath_hover(event: ThreltePointerEvent, seg_idx: number): void {
+    const { point } = event
+    const [from, to] = [k_path_points[seg_idx], k_path_points[seg_idx + 1]]
+    if (!from || !to) return
+    const dist_sq = (pt: Vec3) =>
+      (point.x - pt[0]) ** 2 + (point.y - pt[1]) ** 2 + (point.z - pt[2]) ** 2
+    on_kpath_hover?.(dist_sq(from) <= dist_sq(to) ? seg_idx : seg_idx + 1)
+  }
 </script>
 
-{#if camera_projection === `perspective`}
-  <T.PerspectiveCamera makeDefault position={computed_camera_position} {fov}>
-    <extras.OrbitControls {...orbit_controls_props}>
-      {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
-    </extras.OrbitControls>
-  </T.PerspectiveCamera>
-{:else}
-  <T.OrthographicCamera
-    makeDefault
-    position={computed_camera_position}
-    zoom={initial_zoom}
-    near={-100}
-  >
-    <extras.OrbitControls {...orbit_controls_props}>
-      {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
-    </extras.OrbitControls>
-  </T.OrthographicCamera>
-{/if}
+<SceneCamera
+  {camera_projection}
+  position={computed_camera_position}
+  {fov}
+  zoom={initial_zoom}
+  orbit_props={orbit_controls_props}
+  {gizmo}
+/>
 
 <T.DirectionalLight position={[3, 10, 10]} intensity={directional_light} />
 <T.AmbientLight intensity={ambient_light} />
@@ -341,7 +244,7 @@
     {#if bz_geometry}
       <T.Mesh
         geometry={bz_geometry}
-        onpointermove={(e: ThreltePointerEvent) => handle_hover(e, false)}
+        onpointermove={(event: ThreltePointerEvent) => handle_hover(event, false)}
         onpointerleave={() => handle_leave(false)}
       >
         <T.MeshStandardMaterial
@@ -364,7 +267,7 @@
     {#if show_ibz && ibz_geometry}
       <T.Mesh
         geometry={ibz_geometry}
-        onpointermove={(e: ThreltePointerEvent) => handle_hover(e, true)}
+        onpointermove={(event: ThreltePointerEvent) => handle_hover(event, true)}
         onpointerleave={() => handle_leave(true)}
       >
         <T.MeshStandardMaterial
@@ -387,25 +290,7 @@
 
     <!-- Reciprocal lattice vectors -->
     {#if show_vectors && bz_data.k_lattice}
-      {#each bz_data.k_lattice as vec, idx (idx)}
-        {@const scaled_vec = vec.map((coord) => coord * vector_scale) as Vec3}
-        {@const label_position = scaled_vec.map((coord) => coord * 1.15) as Vec3}
-        <Arrow
-          position={[0, 0, 0]}
-          vector={scaled_vec}
-          color={vector_colors[idx]}
-          scale={1}
-        />
-        <!-- Vector label beyond tip -->
-        <extras.HTML center position={label_position}>
-          <span
-            style:color={vector_colors[idx]}
-            style:font-size="1.2em"
-          >
-            {vector_labels[idx]}
-          </span>
-        </extras.HTML>
-      {/each}
+      <ReciprocalVectors k_lattice={bz_data.k_lattice} {vector_scale} size={bz_size} />
     {/if}
 
     <!-- K-path visualization -->
@@ -416,14 +301,28 @@
         (`${from_point}-${k_path_points[idx + 1]}#${idx}`)
       }
         {@const to_point = k_path_points[idx + 1]}
+        {@const seg_len = Math.hypot(
+      ...math.subtract(to_point as Vec3, from_point as Vec3),
+    )}
         {@const is_hovered = hovered_qpoint_index !== null &&
       (idx === hovered_qpoint_index || idx === hovered_qpoint_index - 1)}
-        <Cylinder
-          from={from_point as Vec3}
-          to={to_point as Vec3}
-          thickness={0.08}
-          color={is_hovered ? `#ff6b35` : `#ffcc00`}
-        />
+        {#if seg_len <= k_path_seg_cutoff}
+          <Cylinder
+            from={from_point as Vec3}
+            to={to_point as Vec3}
+            thickness={KPATH_THICKNESS}
+            color={is_hovered ? `#ff6b35` : `#ffcc00`}
+          />
+          <!-- Invisible wider proxy: lets the cursor snap to the path within ~2× its radius -->
+          <Cylinder
+            from={from_point as Vec3}
+            to={to_point as Vec3}
+            thickness={KPATH_HOVER_THICKNESS}
+            opacity={0}
+            onpointermove={(event: ThreltePointerEvent) => handle_kpath_hover(event, idx)}
+            onpointerleave={() => on_kpath_hover?.(null)}
+          />
+        {/if}
       {/each}
     {/if}
 
@@ -467,10 +366,3 @@
     {/if}
   {/if}
 </T.Group>
-
-<style>
-  :global(.brillouin-zone .responsive-gizmo) {
-    width: clamp(70px, 18cqmin, 100px) !important;
-    height: clamp(70px, 18cqmin, 100px) !important;
-  }
-</style>