matterviz 0.4.0 → 0.4.1

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'
@@ -90,6 +88,7 @@
     on_file_load,
     on_error,
     on_fullscreen_change,
+    on_point_hover,
     on_hover,
     ...rest
   }:
@@ -111,15 +110,13 @@
       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'
-       */
+      // 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
@@ -129,7 +126,7 @@
       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>
@@ -155,6 +152,8 @@
       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()
@@ -165,9 +164,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
@@ -311,23 +317,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,15 +338,7 @@
   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 ?? ``}"
@@ -358,65 +349,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 +423,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 +470,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>;
@@ -77,8 +67,9 @@ type $$ComponentProps = {
     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, {}, "structure" | "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "loading" | "camera_projection" | "vector_scale" | "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/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>;