matterviz 0.4.0 → 0.4.1

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

@@ -1,7 +1,8 @@
-import type { ShowControlsProp } from '../controls';
-import type { ElementSymbol } from '../element';
+import { type ShowControlsProp } from '../controls';
+import { type ElementSymbol } from '../element';
 import Spinner from '../feedback/Spinner.svelte';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
+import { type FullscreenToggleProp } from '../layout';
 import type { AnyStructure, BondEditMode, BondOrder, MeasureMode, StructureBond } from './';
 import type { CellType, SymmetrySettings } from '../symmetry';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
@@ -17,15 +18,6 @@ type $$ComponentProps = {
     structure?: AnyStructure;
     bonds?: StructureBond[];
     scene_props?: ComponentProps<typeof StructureScene>;
-    /**
-     * 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: 'reset-camera', 'fullscreen', 'measure-mode', 'info-pane', 'export-pane', 'controls'
-     */
     show_controls?: ShowControlsProp;
     fullscreen?: boolean;
     width?: number;
@@ -42,9 +34,7 @@ type $$ComponentProps = {
     bond_edit_mode?: BondEditMode;
     bond_edit_order?: BondOrder;
     info_pane_open?: boolean;
-    fullscreen_toggle?: Snippet<[{
-        fullscreen: boolean;
-    }]> | boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
     bottom_left?: Snippet<[{
         structure?: AnyStructure;
     }]>;
@@ -84,6 +74,6 @@ type $$ComponentProps = {
     on_camera_reset?: EventHandler;
     on_bonds_change?: (bonds: StructureBond[] | undefined) => void;
 } & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
-declare const Structure: import("svelte").Component<$$ComponentProps, {}, "structure" | "dragover" | "height" | "width" | "fullscreen" | "hovered" | "controls_open" | "loading" | "png_dpi" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "wrapper" | "sym_data" | "error_msg" | "site_radius_overrides" | "atom_color_config" | "lattice_props" | "measure_mode" | "selected_sites" | "measured_sites" | "bond_edit_mode" | "bond_edit_order" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "volumetric_data" | "isosurface_settings" | "element_mapping" | "bonds" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "highlighted_sites" | "hovered_site_idx" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
+declare const Structure: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "color_scheme" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "bonds" | "sym_data" | "background_color" | "background_opacity" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "supercell_scaling" | "cell_type" | "loading" | "active_volume_idx" | "measured_sites" | "bond_edit_mode" | "scene_props" | "lattice_props" | "show_image_atoms" | "volumetric_data" | "isosurface_settings" | "png_dpi" | "highlighted_sites" | "hovered_site_idx" | "measure_mode" | "bond_edit_order" | "info_pane_open" | "enable_measure_mode" | "error_msg" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;

package/dist/structure/StructureControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import type { ColorSchemeName, D3InterpolateName } from '../colors'
   import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors'
   import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte'
@@ -19,6 +20,7 @@
     VECTOR_PALETTE,
   } from './'
   import type { AtomColorConfig } from './atom-properties'
+  import { get_majority_element } from './bonding'
   import { is_valid_supercell_input } from './supercell'
   import type { CellType } from '../symmetry'
   import type { MoyoDataset } from '@spglib/moyo-wasm'
@@ -54,6 +56,7 @@
     volumetric_data = $bindable<VolumetricData[]>(),
     isosurface_settings = $bindable<IsosurfaceSettings>(),
     active_volume_idx = $bindable(0),
+    polyhedra_rendered_elements = [],
     pane_props = {},
     toggle_props = {},
     ...rest
@@ -74,8 +77,9 @@
     volumetric_data?: VolumetricData[] // Volumetric data volumes for isosurface controls
     isosurface_settings?: IsosurfaceSettings // Isosurface rendering settings
     active_volume_idx?: number // Active volume index
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    polyhedra_rendered_elements?: string[] // elements currently anchoring polyhedra
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
   } = $props()
 
   // Color scheme selection state
@@ -112,6 +116,44 @@
     }
   })
 
+  // Unique majority elements in the structure, for polyhedra center toggles.
+  // Majority (not all) species so the list matches what compute_polyhedra can
+  // actually use as centers - minority occupancies of disordered sites never are.
+  let structure_elements = $derived(
+    [
+      ...new Set(
+        (structure?.sites ?? []).flatMap((site) => get_majority_element(site) ?? []),
+      ),
+    ].sort(),
+  )
+
+  // An element counts as an enabled polyhedra center if it isn't excluded and is
+  // either force-included or currently rendered. Using configured intent (not just
+  // the transient render state) keeps the checkbox reversible: a force-included
+  // element that the CN/geometry filters can't render still shows checked, so the
+  // user can toggle it back off.
+  const is_polyhedra_center_enabled = (element: string): boolean => {
+    const excluded = scene_props.polyhedra_excluded_elements ?? []
+    const included = scene_props.polyhedra_included_elements ?? []
+    return !excluded.includes(element) &&
+      (included.includes(element) || polyhedra_rendered_elements.includes(element))
+  }
+
+  // Toggle an element as polyhedra center. Enabled elements get excluded; disabled
+  // ones get force-included (which also bypasses the automatic hiding of spectator
+  // cations like Li/Na/Ba).
+  function toggle_polyhedra_element(element: string) {
+    const excluded = scene_props.polyhedra_excluded_elements ?? []
+    const included = scene_props.polyhedra_included_elements ?? []
+    if (is_polyhedra_center_enabled(element)) {
+      scene_props.polyhedra_excluded_elements = [...new Set([...excluded, element])]
+      scene_props.polyhedra_included_elements = included.filter((el) => el !== element)
+    } else {
+      scene_props.polyhedra_excluded_elements = excluded.filter((el) => el !== element)
+      scene_props.polyhedra_included_elements = [...new Set([...included, element])]
+    }
+  }
+
   const hex_color_pattern = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i
   const color_mix_pattern =
     /^color-mix\(in srgb,\s*(#[0-9a-f]{3}(?:[0-9a-f]{3})?)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i
@@ -293,6 +335,7 @@
     current_values={{
       show_atoms: scene_props.show_atoms,
       show_bonds: scene_props.show_bonds,
+      show_polyhedra: scene_props.show_polyhedra,
       show_image_atoms,
       show_site_labels: scene_props.show_site_labels,
       show_site_indices: scene_props.show_site_indices,
@@ -302,6 +345,7 @@
     on_reset={() => {
       scene_props.show_atoms = DEFAULTS.structure.show_atoms
       scene_props.show_bonds = DEFAULTS.structure.show_bonds
+      scene_props.show_polyhedra = DEFAULTS.structure.show_polyhedra
       scene_props.show_site_labels = DEFAULTS.structure.show_site_labels
       scene_props.show_site_indices = DEFAULTS.structure.show_site_indices
       scene_props.vector_configs = default_vector_configs(available_vector_keys)
@@ -394,6 +438,20 @@
         {/each}
       </select>
     </label>
+    <label
+      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_polyhedra.description })}
+      style="gap: 6pt"
+    >
+      Polyhedra:
+      <select bind:value={scene_props.show_polyhedra}>
+        {#each Object.entries(SETTINGS_CONFIG.structure.show_polyhedra.enum ?? {}) as
+          [value, label]
+          (value)
+        }
+          <option {value}>{label}</option>
+        {/each}
+      </select>
+    </label>
   </SettingsSection>
 
   <SettingsSection
@@ -1215,6 +1273,163 @@
       </label>
     </SettingsSection>
   {/if}
+
+  {#if scene_props.show_polyhedra && scene_props.show_polyhedra !== `never`}
+    <SettingsSection
+      title="Polyhedra"
+      current_values={{
+        polyhedra_opacity: scene_props.polyhedra_opacity,
+        polyhedra_show_edges: scene_props.polyhedra_show_edges,
+        polyhedra_edge_color: scene_props.polyhedra_edge_color,
+        polyhedra_color_mode: scene_props.polyhedra_color_mode,
+        polyhedra_color: scene_props.polyhedra_color,
+        polyhedra_hide_center_atoms: scene_props.polyhedra_hide_center_atoms,
+        polyhedra_min_neighbors: scene_props.polyhedra_min_neighbors,
+        polyhedra_max_neighbors: scene_props.polyhedra_max_neighbors,
+        polyhedra_excluded_elements: scene_props.polyhedra_excluded_elements,
+        polyhedra_included_elements: scene_props.polyhedra_included_elements,
+      }}
+      on_reset={() => {
+        scene_props.polyhedra_opacity = DEFAULTS.structure.polyhedra_opacity
+        scene_props.polyhedra_show_edges = DEFAULTS.structure.polyhedra_show_edges
+        scene_props.polyhedra_edge_color = DEFAULTS.structure.polyhedra_edge_color
+        scene_props.polyhedra_color_mode = DEFAULTS.structure.polyhedra_color_mode
+        scene_props.polyhedra_color = DEFAULTS.structure.polyhedra_color
+        scene_props.polyhedra_hide_center_atoms =
+          DEFAULTS.structure.polyhedra_hide_center_atoms
+        scene_props.polyhedra_min_neighbors = DEFAULTS.structure.polyhedra_min_neighbors
+        scene_props.polyhedra_max_neighbors = DEFAULTS.structure.polyhedra_max_neighbors
+        scene_props.polyhedra_excluded_elements =
+          DEFAULTS.structure.polyhedra_excluded_elements
+        scene_props.polyhedra_included_elements =
+          DEFAULTS.structure.polyhedra_included_elements
+      }}
+    >
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_opacity.description,
+        })}
+      >
+        Opacity
+        <input
+          type="number"
+          min={0}
+          max={1}
+          step={0.05}
+          bind:value={scene_props.polyhedra_opacity}
+        />
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.05}
+          bind:value={scene_props.polyhedra_opacity}
+        />
+      </label>
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_color_mode.description,
+        })}
+      >
+        Color <select bind:value={scene_props.polyhedra_color_mode}>
+          {#each Object.entries(
+            SETTINGS_CONFIG.structure.polyhedra_color_mode.enum ?? {},
+          ) as
+            [value, label]
+            (value)
+          }
+            <option {value}>{label}</option>
+          {/each}
+        </select>
+        {#if scene_props.polyhedra_color_mode === `uniform`}
+          <input type="color" bind:value={scene_props.polyhedra_color} />
+        {/if}
+      </label>
+      <label
+        style="gap: 6pt"
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_show_edges.description,
+        })}
+      >
+        <input type="checkbox" bind:checked={scene_props.polyhedra_show_edges} />
+        Edges
+        {#if scene_props.polyhedra_show_edges}
+          <input type="color" bind:value={scene_props.polyhedra_edge_color} />
+        {/if}
+      </label>
+      <label
+        style="gap: 6pt"
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_hide_center_atoms.description,
+        })}
+      >
+        <input type="checkbox" bind:checked={scene_props.polyhedra_hide_center_atoms} />
+        Hide center atoms
+      </label>
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_min_neighbors.description,
+        })}
+      >
+        Min neighbors
+        <input
+          type="number"
+          min={4}
+          max={12}
+          step={1}
+          bind:value={scene_props.polyhedra_min_neighbors}
+        />
+        <input
+          type="range"
+          min={4}
+          max={12}
+          step={1}
+          bind:value={scene_props.polyhedra_min_neighbors}
+        />
+      </label>
+      <label
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.polyhedra_max_neighbors.description,
+        })}
+      >
+        Max neighbors
+        <input
+          type="number"
+          min={4}
+          max={16}
+          step={1}
+          bind:value={scene_props.polyhedra_max_neighbors}
+        />
+        <input
+          type="range"
+          min={4}
+          max={16}
+          step={1}
+          bind:value={scene_props.polyhedra_max_neighbors}
+        />
+      </label>
+      {#if structure_elements.length > 0}
+        <div
+          style="display: flex; flex-wrap: wrap; gap: 8pt; align-items: center"
+          {@attach tooltip({
+            content: SETTINGS_CONFIG.structure.polyhedra_excluded_elements.description,
+          })}
+        >
+          Centers:
+          {#each structure_elements as element (element)}
+            <label style="gap: 4pt">
+              <input
+                type="checkbox"
+                checked={is_polyhedra_center_enabled(element)}
+                onchange={() => toggle_polyhedra_element(element)}
+              />
+              {element}
+            </label>
+          {/each}
+        </div>
+      {/if}
+    </SettingsSection>
+  {/if}
 </DraggablePane>
 
 <style>

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

@@ -1,3 +1,4 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AnyStructure } from './';
@@ -23,9 +24,10 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     volumetric_data?: VolumetricData[];
     isosurface_settings?: IsosurfaceSettings;
     active_volume_idx?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    polyhedra_rendered_elements?: string[];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "supercell_loading">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "background_color" | "background_opacity" | "atom_color_config" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "lattice_props" | "show_image_atoms" | "supercell_loading" | "volumetric_data" | "isosurface_settings">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;

package/dist/structure/StructureExportPane.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
+  import { export_canvas_as_png, observe_canvas_presence } from '../io/export'
   import type { AnyStructure } from './'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
-  import { export_canvas_as_png } from '../io/export'
-  import { sanitize_html } from '../sanitize'
   import * as exports from './export'
+  import type { StructTextFormat } from './export'
   import type { ComponentProps } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { Camera, Scene } from 'three'
 
   let {
@@ -25,18 +26,10 @@
     scene?: Scene
     camera?: Camera
     png_dpi?: number
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
   } = $props()
 
-  // Copy button feedback state
-  let copy_status = $state<
-    { json: boolean; xyz: boolean; cif: boolean; poscar: boolean }
-  >({ json: false, xyz: false, cif: false, poscar: false })
-
-  // Dynamic button text based on copy status
-  const copy_confirm = `✅`
-
   const text_export_formats = [
     {
       label: `JSON`,
@@ -79,43 +72,14 @@
     },
   ] as const
 
-  // Helper function to export structure to file
-  function export_structure(format: `json` | `xyz` | `cif` | `poscar`) {
-    if (!structure) return
-    const export_fns = {
-      json: exports.export_structure_as_json,
-      xyz: exports.export_structure_as_xyz,
-      cif: exports.export_structure_as_cif,
-      poscar: exports.export_structure_as_poscar,
-    } as const
-    export_fns[format](structure)
-  }
-
-  // Handle clipboard copy with user feedback
-  async function handle_copy(format: `json` | `xyz` | `cif` | `poscar`) {
-    if (!structure) {
-      console.warn(`No structure available for copying`)
-      return
-    }
-
+  // Clipboard content for a text format; must not throw (ExportPane evaluates on click)
+  function get_text_content(format: StructTextFormat): string | null {
+    if (!structure) return null
     try {
-      let content: string
-      if (format === `json`) content = exports.structure_to_json_str(structure)
-      else if (format === `xyz`) content = exports.structure_to_xyz_str(structure)
-      else if (format === `cif`) content = exports.structure_to_cif_str(structure)
-      else if (format === `poscar`) {
-        content = exports.structure_to_poscar_str(structure)
-      } else throw new Error(`Invalid format: ${format}`)
-
-      await navigator.clipboard.writeText(content)
-
-      // Show temporary feedback in button text
-      copy_status[format] = true
-      setTimeout(() => {
-        copy_status[format] = false
-      }, 1000)
+      return exports.STRUCT_TEXT_FORMATS[format].to_str(structure)
     } catch (error) {
       console.error(`Failed to copy ${format.toUpperCase()} to clipboard`, error)
+      return null
     }
   }
 
@@ -124,7 +88,6 @@
       console.warn(`No scene available for ${format.toUpperCase()} export`)
       return
     }
-
     try {
       if (format === `glb`) exports.export_structure_as_glb(scene, structure)
       else if (format === `obj`) exports.export_structure_as_obj(scene, structure)
@@ -135,118 +98,53 @@
 
   let has_canvas = $state(false)
 
-  $effect(() => {
-    if (!wrapper) {
-      has_canvas = false
-      return
-    }
-    const check = () => (has_canvas = Boolean(wrapper.querySelector(`canvas`)))
-    check()
-    const observer = new MutationObserver(check)
-    observer.observe(wrapper, { childList: true, subtree: true })
-    return () => observer.disconnect()
-  })
+  $effect(() => observe_canvas_presence(wrapper, (val) => (has_canvas = val)))
+
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Export as text`,
+      items: text_export_formats.map(({ label, format, hint }) => ({
+        label,
+        hint,
+        disabled: !structure,
+        on_download: () => structure && exports.export_structure_as(format, structure),
+        copy_text: () => get_text_content(format),
+      })),
+    },
+    {
+      title: `Export as image`,
+      items: [{
+        label: `PNG`,
+        disabled: !has_canvas,
+        show_dpi: true,
+        on_download: () => {
+          const canvas = wrapper?.querySelector(`canvas`)
+          if (canvas) export_canvas_as_png(canvas, structure, png_dpi, scene, camera)
+          else console.warn(`Canvas element not found for PNG export`)
+        },
+      }],
+    },
+    {
+      title: `Export as 3D model`,
+      items: model_3d_formats.map(({ label, format, hint }) => ({
+        label,
+        hint,
+        disabled: !scene,
+        on_download: () => handle_3d_export(format),
+      })),
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...pane_props, class: `export-pane ${pane_props?.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
+  {pane_props}
   toggle_props={{
     title: export_pane_open ? `` : `Export Structure`,
     ...toggle_props,
     class: `structure-export-toggle ${toggle_props?.class ?? ``}`,
   }}
   {...rest}
->
-  <h4 id="export-as-text">Export as text</h4>
-  <div class="export-buttons">
-    {#each text_export_formats as { label, format, hint } (format)}
-      <div style="display: flex; align-items: center; gap: 4pt">
-        <span {@attach tooltip({ allow_html: true, content: sanitize_html(hint) })}>{label}</span>
-        <button
-          type="button"
-          onclick={() => export_structure(format)}
-          title="Download {label}"
-        >
-          ⬇
-        </button>
-        <button
-          type="button"
-          onclick={() => handle_copy(format)}
-          title="Copy {label} to clipboard"
-        >
-          {copy_status[format] ? copy_confirm : `📋`}
-        </button>
-      </div>
-    {/each}
-  </div>
-
-  <h4 id="export-as-image">Export as image</h4>
-  <div class="export-buttons">
-    <label>
-      PNG
-      <button
-        type="button"
-        disabled={!has_canvas}
-        onclick={() => {
-          const canvas = wrapper?.querySelector(`canvas`) as HTMLCanvasElement
-          if (canvas) {
-            export_canvas_as_png(
-              canvas,
-              structure,
-              png_dpi,
-              scene,
-              camera,
-            )
-          } else console.warn(`Canvas element not found for PNG export`)
-        }}
-        title="PNG ({png_dpi} DPI)"
-      >
-        ⬇
-      </button>
-      &nbsp;(DPI: <input
-        type="number"
-        min={50}
-        max={500}
-        bind:value={png_dpi}
-        title="Export resolution in dots per inch"
-        style="margin: 0 0 0 2pt"
-      />)
-    </label>
-  </div>
-
-  <h4 id="export-as-3d-model">Export as 3D model</h4>
-  <div class="export-buttons">
-    {#each model_3d_formats as { label, format, hint } (format)}
-      <div style="display: flex; align-items: center; gap: 4pt">
-        <span {@attach tooltip({ content: hint })}>{label}</span>
-        <button
-          type="button"
-          onclick={() => handle_3d_export(format)}
-          disabled={!scene}
-          title="Download {label}"
-        >
-          ⬇
-        </button>
-      </div>
-    {/each}
-  </div>
-</DraggablePane>
-
-<style>
-  .export-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 9pt;
-    font-size: 0.95em;
-  }
-  .export-buttons button {
-    min-width: 1.9em;
-    height: 1.6em;
-    padding: 0 4pt;
-    margin: 0 0 0 4pt;
-    box-sizing: border-box;
-  }
-</style>
+/>

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

@@ -1,6 +1,5 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { AnyStructure } from './';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
 import type { Camera, Scene } from 'three';
 type $$ComponentProps = {
     export_pane_open?: boolean;
@@ -9,9 +8,9 @@ type $$ComponentProps = {
     scene?: Scene;
     camera?: Camera;
     png_dpi?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
 };
-declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type StructureExportPane = ReturnType<typeof StructureExportPane>;
 export default StructureExportPane;

package/dist/structure/StructureInfoPane.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import { get_electro_neg_formula } from '../composition'
   import { element_data, type ElementSymbol } from '../element'
   import Icon from '../Icon.svelte'
   import { format_num } from '../labels'
   import type { InfoItem } from '../layout'
+  import type { Vec2 } from '../math'
   import CopyButton from '../overlays/CopyButton.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { sanitize_html } from '../sanitize'
@@ -75,9 +77,9 @@
   }: Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     structure: AnyStructure
     pane_open?: boolean
-    atom_count_thresholds?: [number, number] // if atom count is less than min_threshold, show sites, if atom count is greater than max_threshold, hide sites. in between, show sites behind a toggle button.
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    atom_count_thresholds?: Vec2 // if atom count is less than min_threshold, show sites, if atom count is greater than max_threshold, hide sites. in between, show sites behind a toggle button.
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
     highlighted_sites?: number[] // Sites highlighted from Wyckoff table hover
     hovered_site_idx?: number | null // Site hovered in this pane or in the 3D scene
     selected_sites?: number[] // Sites selected from Wyckoff table click

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

@@ -1,14 +1,14 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { PaneProps, PaneToggleProps } from '../overlays';
+import type { Vec2 } from '../math';
 import type { AnyStructure } from './';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
-import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     structure: AnyStructure;
     pane_open?: boolean;
-    atom_count_thresholds?: [number, number];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    atom_count_thresholds?: Vec2;
+    toggle_props?: PaneToggleProps;
+    pane_props?: PaneProps;
     highlighted_sites?: number[];
     hovered_site_idx?: number | null;
     selected_sites?: number[];