matterviz 0.4.0 → 0.4.2

package/dist/brillouin/BrillouinZone.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import type { ShowControlsProp } from '../controls'
-  import { normalize_show_controls } from '../controls'
+  import { normalize_show_controls, type ShowControlsProp } from '../controls'
   import EmptyState from '../EmptyState.svelte'
   import { StatusMessage } from '../feedback'
   import Spinner from '../feedback/Spinner.svelte'
-  import Icon from '../Icon.svelte'
-  import { create_file_drop_handler, load_from_url } from '../io'
-  import { set_fullscreen_bg, toggle_fullscreen } from '../layout'
+  import { create_file_drop_handler, drag_over_handlers, load_from_url } from '../io'
+  import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
+  import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import type { Vec3 } from '../math'
   import { PlotTooltip } from '../plot'
   import { type CameraProjection, DEFAULTS } from '../settings'
@@ -16,7 +15,6 @@
   import { Canvas } from '@threlte/core'
   import type { ComponentProps, Snippet } from 'svelte'
   import { untrack } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import BrillouinZoneControls from './BrillouinZoneControls.svelte'
   import BrillouinZoneExportPane from './BrillouinZoneExportPane.svelte'
@@ -55,7 +53,7 @@
     surface_color = $bindable(`#4488ff`),
     surface_opacity = $bindable(0.3),
     edge_color = $bindable(`#000000`),
-    edge_width = $bindable(0.05),
+    edge_width = $bindable(0.002),
     show_vectors = $bindable(true),
     vector_scale = $bindable(1.0),
     camera_projection = $bindable(`perspective`),
@@ -90,74 +88,71 @@
     on_file_load,
     on_error,
     on_fullscreen_change,
+    on_point_hover,
     on_hover,
     ...rest
-  }:
-    & {
-      structure?: Crystal
-      bz_order?: number
-      bz_data?: BrillouinZoneData
-      controls_open?: boolean
-      info_pane_open?: boolean
-      surface_color?: string
-      surface_opacity?: number
-      edge_color?: string
-      edge_width?: number
-      show_vectors?: boolean
-      vector_scale?: number
-      camera_projection?: CameraProjection
-      // Irreducible BZ options
-      show_ibz?: boolean
-      ibz_color?: string
-      ibz_opacity?: number
-      ibz_data?: IrreducibleBZData | null
-      /**
-       * Controls visibility configuration.
-       * - 'always': controls always visible
-       * - 'hover': controls visible on component hover (default)
-       * - 'never': controls never visible
-       * - object: { mode, hidden, style } for fine-grained control
-       *
-       * Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
-       */
-      show_controls?: ShowControlsProp
-      fullscreen?: boolean
-      width?: number
-      height?: number
-      wrapper?: HTMLDivElement
-      png_dpi?: number
-      hovered?: boolean
-      dragover?: boolean
-      allow_file_drop?: boolean
-      fullscreen_toggle?: Snippet<[{ fullscreen: boolean }]> | boolean
-      data_url?: string
-      on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
-      spinner_props?: ComponentProps<typeof Spinner>
-      loading?: boolean
-      error_msg?: string
-      structure_string?: string
-      // K-path points in Cartesian reciprocal space coordinates (not fractional coords)
-      // Should be computed using the reciprocal lattice matrix (includes 2π factor)
-      k_path_points?: Vec3[]
-      // K-path labels with positions in Cartesian reciprocal space coordinates
-      // Each position should match a corresponding point in k_path_points
-      k_path_labels?: { position: Vec3; label: string | null }[]
-      // Currently hovered k-point in Cartesian reciprocal space coordinates
-      hovered_k_point?: Vec3 | null
-      // Index of the currently hovered q-point in the band structure
-      hovered_qpoint_index?: number | null
-      // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
-      on_kpath_hover?: (qpoint_index: number | null) => void
-      children?: Snippet<
-        [{ structure?: Crystal; bz_data?: BrillouinZoneData }]
-      >
-      tooltip_config?: BZTooltipProp
-      on_file_load?: (data: BZHandlerData) => void
-      on_error?: (data: BZHandlerData) => void
-      on_fullscreen_change?: (data: BZHandlerData) => void
-      on_hover?: (data: BZHoverData | null) => void
-    }
-    & HTMLAttributes<HTMLDivElement> = $props()
+  }: {
+    structure?: Crystal
+    bz_order?: number
+    bz_data?: BrillouinZoneData
+    controls_open?: boolean
+    info_pane_open?: boolean
+    surface_color?: string
+    surface_opacity?: number
+    edge_color?: string
+    edge_width?: number
+    show_vectors?: boolean
+    vector_scale?: number
+    camera_projection?: CameraProjection
+    // Irreducible BZ options
+    show_ibz?: boolean
+    ibz_color?: string
+    ibz_opacity?: number
+    ibz_data?: IrreducibleBZData | null
+    // Controls visibility configuration.
+    // - 'always': controls always visible
+    // - 'hover': controls visible on component hover (default)
+    // - 'never': controls never visible
+    // - object: { mode, hidden, style } for fine-grained control
+    //
+    // Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
+    show_controls?: ShowControlsProp
+    fullscreen?: boolean
+    width?: number
+    height?: number
+    wrapper?: HTMLDivElement
+    png_dpi?: number
+    hovered?: boolean
+    dragover?: boolean
+    allow_file_drop?: boolean
+    fullscreen_toggle?: FullscreenToggleProp
+    data_url?: string
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+    spinner_props?: ComponentProps<typeof Spinner>
+    loading?: boolean
+    error_msg?: string
+    structure_string?: string
+    // K-path points in Cartesian reciprocal space coordinates (not fractional coords)
+    // Should be computed using the reciprocal lattice matrix (includes 2π factor)
+    k_path_points?: Vec3[]
+    // K-path labels with positions in Cartesian reciprocal space coordinates
+    // Each position should match a corresponding point in k_path_points
+    k_path_labels?: { position: Vec3; label: string | null }[]
+    // Currently hovered k-point in Cartesian reciprocal space coordinates
+    hovered_k_point?: Vec3 | null
+    // Index of the currently hovered q-point in the band structure
+    hovered_qpoint_index?: number | null
+    // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
+    on_kpath_hover?: (qpoint_index: number | null) => void
+    children?: Snippet<[{ structure?: Crystal; bz_data?: BrillouinZoneData }]>
+    tooltip_config?: BZTooltipProp
+    on_file_load?: (data: BZHandlerData) => void
+    on_error?: (data: BZHandlerData) => void
+    on_fullscreen_change?: (data: BZHandlerData) => void
+    on_point_hover?: (data: BZHoverData | null) => void
+    // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
+    on_hover?: (data: BZHoverData | null) => void
+  } & HTMLAttributes<HTMLDivElement> = $props()
 
   let scene = $state(undefined)
   let camera = $state(undefined)
@@ -165,9 +160,16 @@
   let current_filename = $state<string | undefined>(undefined)
   let hover_data = $state<BZHoverData | null>(null)
 
-  // Call on_hover callback when hover_data changes
+  // Call on_point_hover callback when hover_data changes (on_hover is a deprecated alias)
+  let warned_deprecated_on_hover = false
   $effect(() => {
-    on_hover?.(hover_data)
+    if (on_hover && !on_point_hover && !warned_deprecated_on_hover) {
+      warned_deprecated_on_hover = true
+      console.warn(
+        `BrillouinZone: the on_hover prop was renamed to on_point_hover; the alias will be removed in a future release`,
+      )
+    }
+    ;(on_point_hover ?? on_hover)?.(hover_data)
   })
 
   // Normalize show_controls prop into consistent config
@@ -175,9 +177,7 @@
 
   // Parse and load structure from content
   function parse_structure(content: string | ArrayBuffer, filename: string) {
-    const text = content instanceof ArrayBuffer
-      ? new TextDecoder().decode(content)
-      : content
+    const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
     const parsed = parse_any_structure(text, filename)
     if (!parsed) throw new Error(`Failed to parse structure from ${filename}`)
 
@@ -192,9 +192,7 @@
     try {
       parse_structure(content, filename)
     } catch (err) {
-      error_msg = `Failed to parse ${filename}: ${
-        to_error(err).message
-      }`
+      error_msg = `Failed to parse ${filename}: ${to_error(err).message}`
       on_error?.({ error_msg, filename })
     }
   }
@@ -235,9 +233,7 @@
     analyze_structure_symmetry(structure, {})
       .then((sym_data) => {
         if (stale) return
-        const point_group_ops = extract_point_group_from_operations(
-          sym_data.operations,
-        )
+        const point_group_ops = extract_point_group_from_operations(sym_data.operations)
         ibz_data = compute_irreducible_bz(captured_bz, point_group_ops)
       })
       .catch((err) => {
@@ -261,12 +257,8 @@
     if (data_url && !structure) {
       loading = true
       error_msg = undefined
-      load_from_url(
-        data_url,
-        (content, filename) =>
-          on_file_drop
-            ? on_file_drop(content, filename)
-            : safe_parse(content, filename),
+      load_from_url(data_url, (content, filename) =>
+        on_file_drop ? on_file_drop(content, filename) : safe_parse(content, filename),
       )
         .catch((err) => handle_error(err, data_url))
         .finally(() => (loading = false))
@@ -301,7 +293,8 @@
     if (
       target instanceof HTMLElement &&
       (target.tagName === `INPUT` || target.tagName === `TEXTAREA`)
-    ) return
+    )
+      return
 
     if (event.key === `f` && fullscreen_toggle) toggle_fullscreen(wrapper)
     else if (event.key === `i`) info_pane_open = !info_pane_open
@@ -311,23 +304,16 @@
     }
   }
 
-  $effect(() => { // fullscreen and background
-    if (typeof window === `undefined`) return
-    const fs_el = document.fullscreenElement
-    if (fullscreen && fs_el !== wrapper && wrapper) {
-      wrapper.requestFullscreen().catch(console.error)
-    } else if (!fullscreen && fs_el === wrapper) document.exitFullscreen()
-    set_fullscreen_bg(wrapper, fullscreen, `--bz-bg-fullscreen`)
+  sync_fullscreen({
+    get_wrapper: () => wrapper,
+    get_fullscreen: () => fullscreen,
+    set_fullscreen: (val) => (fullscreen = val),
+    bg_css_var: `--bz-bg-fullscreen`,
+    on_change: (val) =>
+      on_fullscreen_change?.({ structure, bz_data, bz_order, fullscreen: val }),
   })
 </script>
 
-<svelte:document
-  onfullscreenchange={() => {
-    fullscreen = Boolean(document.fullscreenElement)
-    on_fullscreen_change?.({ structure, bz_data, bz_order, fullscreen })
-  }}
-/>
-
 <div
   class:dragover
   class:active={info_pane_open || controls_open || export_pane_open}
@@ -339,18 +325,13 @@
   onmouseenter={() => (hovered = true)}
   onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
-  ondragover={(event) => {
-    event.preventDefault()
-    if (!allow_file_drop) return
-    dragover = true
-  }}
-  ondragleave={(event) => {
-    event.preventDefault()
-    dragover = false
-  }}
+  {...drag_over_handlers({
+    allow: () => allow_file_drop,
+    set_dragover: (over) => (dragover = over),
+  })}
   {onkeydown}
   {...rest}
-  class="brillouin-zone {rest.class ?? ``}"
+  class={[`brillouin-zone`, rest.class]}
 >
   {@render children?.({ structure, bz_data })}
   {#if loading}
@@ -358,65 +339,45 @@
   {:else if error_msg}
     <StatusMessage bind:message={error_msg} type="error" dismissible />
   {:else if structure && `lattice` in structure}
-    <section
-      class="control-buttons {controls_config.class}"
-      style={controls_config.style}
+    <ViewerChrome
+      {controls_config}
+      filename={current_filename}
+      {fullscreen}
+      {fullscreen_toggle}
+      {wrapper}
     >
-      {#if controls_config.mode !== `never`}
-        {#if current_filename && controls_config.visible(`filename`)}
-          <span class="filename">{current_filename}</span>
-        {/if}
-
-        {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
-          <button
-            type="button"
-            onclick={() => fullscreen_toggle && toggle_fullscreen(wrapper)}
-            title="{fullscreen ? `Exit` : `Enter`} fullscreen"
-            aria-pressed={fullscreen}
-            class="fullscreen-toggle"
-            {@attach tooltip()}
-          >
-            {#if typeof fullscreen_toggle === `function`}
-              {@render fullscreen_toggle({ fullscreen })}
-            {:else}
-              <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
-            {/if}
-          </button>
-        {/if}
-
-        {#if controls_config.visible(`info-pane`)}
-          <BrillouinZoneInfoPane {structure} {bz_data} bind:pane_open={info_pane_open} />
-        {/if}
+      {#if controls_config.visible(`info-pane`)}
+        <BrillouinZoneInfoPane {structure} {bz_data} bind:pane_open={info_pane_open} />
+      {/if}
 
-        {#if controls_config.visible(`export-pane`)}
-          <BrillouinZoneExportPane
-            bind:export_pane_open
-            {bz_data}
-            {wrapper}
-            {scene}
-            {camera}
-            bind:png_dpi
-            filename={current_filename || `brillouin-zone`}
-          />
-        {/if}
+      {#if controls_config.visible(`export-pane`)}
+        <BrillouinZoneExportPane
+          bind:export_pane_open
+          {bz_data}
+          {wrapper}
+          {scene}
+          {camera}
+          bind:png_dpi
+          filename={current_filename || `brillouin-zone`}
+        />
+      {/if}
 
-        {#if controls_config.visible(`controls`)}
-          <BrillouinZoneControls
-            bind:controls_open
-            bind:bz_order
-            bind:surface_color
-            bind:surface_opacity
-            bind:edge_color
-            bind:edge_width
-            bind:show_vectors
-            bind:camera_projection
-            bind:show_ibz
-            bind:ibz_color
-            bind:ibz_opacity
-          />
-        {/if}
+      {#if controls_config.visible(`controls`)}
+        <BrillouinZoneControls
+          bind:controls_open
+          bind:bz_order
+          bind:surface_color
+          bind:surface_opacity
+          bind:edge_color
+          bind:edge_width
+          bind:show_vectors
+          bind:camera_projection
+          bind:show_ibz
+          bind:ibz_color
+          bind:ibz_opacity
+        />
       {/if}
-    </section>
+    </ViewerChrome>
 
     {#if typeof WebGLRenderingContext !== `undefined`}
       <div style="overflow: hidden; height: 100%">
@@ -452,7 +413,7 @@
             y={hover_data.screen_position.y}
             bg_color={hover_data.is_ibz ? ibz_color : surface_color}
             fixed
-            style="z-index: calc(var(--bz-buttons-z-index, var(--z-index-overlay-controls, 100000000)) + 1); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)"
+            style="z-index: calc(var(--z-index-overlay-controls, 100000000) + 1); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)"
           >
             <BrillouinZoneTooltip {hover_data} tooltip={tooltip_config} />
           </PlotTooltip>
@@ -499,54 +460,6 @@
   .brillouin-zone :global(canvas) {
     user-select: none;
   }
-  section.control-buttons {
-    position: absolute;
-    display: flex;
-    top: var(--bz-buttons-top, var(--ctrl-btn-top, 1ex));
-    right: var(--bz-buttons-right, var(--ctrl-btn-right, 1ex));
-    gap: clamp(6pt, 1cqmin, 9pt);
-    z-index: var(
-      --bz-buttons-z-index,
-      var(--z-index-overlay-controls, 100000000)
-    );
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    align-items: center;
-  }
-  /* Mode: always - controls always visible */
-  section.control-buttons.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: hover - controls visible on component hover */
-  .brillouin-zone:hover section.control-buttons.hover-visible,
-  .brillouin-zone:focus-within section.control-buttons.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: never - stays hidden (default state, no additional CSS needed) */
-  section.control-buttons > :global(button) {
-    background-color: transparent;
-    display: flex;
-    padding: 4px;
-    border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
-  }
-  section.control-buttons :global(button:hover) {
-    background-color: color-mix(in srgb, currentColor 8%, transparent);
-  }
-  .filename {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: var(--code-bg, rgba(0, 0, 0, 0.1));
-    padding: 3pt 6pt;
-    border-radius: 3pt;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   p.warn {
     text-align: center;
     padding: 2rem;

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

@@ -1,5 +1,6 @@
-import type { ShowControlsProp } from '../controls';
+import { type ShowControlsProp } from '../controls';
 import Spinner from '../feedback/Spinner.svelte';
+import { type FullscreenToggleProp } from '../layout';
 import type { Vec3 } from '../math';
 import { type CameraProjection } from '../settings';
 import type { Crystal } from '../structure';
@@ -32,15 +33,6 @@ type $$ComponentProps = {
     ibz_color?: string;
     ibz_opacity?: number;
     ibz_data?: IrreducibleBZData | null;
-    /**
-     * Controls visibility configuration.
-     * - 'always': controls always visible
-     * - 'hover': controls visible on component hover (default)
-     * - 'never': controls never visible
-     * - object: { mode, hidden, style } for fine-grained control
-     *
-     * Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
-     */
     show_controls?: ShowControlsProp;
     fullscreen?: boolean;
     width?: number;
@@ -50,9 +42,7 @@ type $$ComponentProps = {
     hovered?: boolean;
     dragover?: boolean;
     allow_file_drop?: boolean;
-    fullscreen_toggle?: Snippet<[{
-        fullscreen: boolean;
-    }]> | boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
     data_url?: string;
     on_file_drop?: (content: string | ArrayBuffer, filename: string) => void;
     spinner_props?: ComponentProps<typeof Spinner>;
@@ -67,18 +57,17 @@ type $$ComponentProps = {
     hovered_k_point?: Vec3 | null;
     hovered_qpoint_index?: number | null;
     on_kpath_hover?: (qpoint_index: number | null) => void;
-    children?: Snippet<[
-        {
-            structure?: Crystal;
-            bz_data?: BrillouinZoneData;
-        }
-    ]>;
+    children?: Snippet<[{
+        structure?: Crystal;
+        bz_data?: BrillouinZoneData;
+    }]>;
     tooltip_config?: BZTooltipProp;
     on_file_load?: (data: BZHandlerData) => void;
     on_error?: (data: BZHandlerData) => void;
     on_fullscreen_change?: (data: BZHandlerData) => void;
+    on_point_hover?: (data: BZHoverData | null) => void;
     on_hover?: (data: BZHoverData | null) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "structure" | "dragover" | "height" | "width" | "fullscreen" | "hovered" | "controls_open" | "loading" | "png_dpi" | "camera_projection" | "vector_scale" | "info_pane_open" | "wrapper" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "structure" | "camera_projection" | "vector_scale" | "loading" | "png_dpi" | "info_pane_open" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;

package/dist/brillouin/BrillouinZoneControls.svelte

@@ -9,7 +9,7 @@
     surface_color = $bindable(`#4488ff`),
     surface_opacity = $bindable(0.3),
     edge_color = $bindable(`#000000`),
-    edge_width = $bindable(0.05),
+    edge_width = $bindable(0.002),
     show_vectors = $bindable(true),
     camera_projection = $bindable(`perspective`),
     // Irreducible BZ options
@@ -84,10 +84,7 @@
   <SettingsSection
     title="Edges"
     current_values={{ edge_color, edge_width }}
-    on_reset={() => {
-      edge_color = `#000000`
-      edge_width = 0.05
-    }}
+    on_reset={() => ([edge_color, edge_width] = [`#000000`, 0.002])}
   >
     <label>
       <span>Color:</span>
@@ -95,7 +92,7 @@
     </label>
     <label>
       <span>Width:</span>
-      <input type="range" min="0.01" max="0.2" step="0.01" bind:value={edge_width} />
+      <input type="range" min="0.002" max="0.02" step="0.001" bind:value={edge_width} />
       <span class="value">{edge_width.toFixed(2)}</span>
     </label>
   </SettingsSection>