matterviz 0.1.12 → 0.1.13

package/dist/structure/StructureControls.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">import { DraggablePane, format_num, Lattice, SettingsSection } from '..';
 import { axis_colors, element_color_schemes } from '../colors';
-import { export_canvas_as_png } from '../io/export';
 import { to_degrees, to_radians } from '../math';
 import { DEFAULTS, SETTINGS_CONFIG } from '../settings';
 import { StructureScene } from './';
-import * as exports from './export';
 import { is_valid_supercell_input } from './supercell';
 import Select from 'svelte-multiselect';
 import { tooltip } from 'svelte-multiselect/attachments';
@@ -15,7 +13,7 @@ let { controls_open = $bindable(false), scene_props = $bindable({}), lattice_pro
     cell_surface_color: DEFAULTS.structure.cell_surface_color,
     cell_surface_opacity: DEFAULTS.structure.cell_surface_opacity,
     cell_edge_width: DEFAULTS.structure.cell_edge_width,
-}), show_image_atoms = $bindable(DEFAULTS.structure.show_image_atoms), supercell_scaling = $bindable(`1x1x1`), background_color = $bindable(undefined), background_opacity = $bindable(DEFAULTS.background_opacity), color_scheme = $bindable(DEFAULTS.color_scheme), structure = undefined, wrapper = undefined, png_dpi = $bindable(150), scene = undefined, camera = undefined, pane_props = $bindable({}), toggle_props = $bindable({}), ...rest } = $props();
+}), show_image_atoms = $bindable(DEFAULTS.structure.show_image_atoms), supercell_scaling = $bindable(`1x1x1`), background_color = $bindable(undefined), background_opacity = $bindable(DEFAULTS.background_opacity), color_scheme = $bindable(DEFAULTS.color_scheme), structure = undefined, pane_props = $bindable({}), toggle_props = $bindable({}), ...rest } = $props();
 // Color scheme selection state
 let color_scheme_selected = $state([color_scheme]);
 $effect(() => {
@@ -34,16 +32,6 @@ $effect(() => {
 });
 // Ensure site_label_offset is always available
 scene_props.site_label_offset ??= [...DEFAULTS.structure.site_label_offset];
-// Copy button feedback state
-let copy_status = $state({ json: false, xyz: false, cif: false, poscar: false });
-// Dynamic button text based on copy status
-const copy_confirm = `✅`;
-const export_formats = [
-    { label: `JSON`, format: `json` },
-    { label: `XYZ`, format: `xyz` },
-    { label: `CIF`, format: `cif` },
-    { label: `POSCAR`, format: `poscar` },
-];
 // Detect if structure has force data
 let has_forces = $derived(structure?.sites?.some((site) => site.properties?.force && Array.isArray(site.properties.force)) ?? false);
 // Detect if structure has lattice (can create supercells)
@@ -80,55 +68,13 @@ function get_representative_colors(scheme_name) {
         .map((el) => scheme[el] || scheme.H || `#cccccc`)
         .filter(Boolean);
 }
-// Helper function to export structure to file
-function export_structure(format) {
-    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,
-    };
-    export_fns[format](structure);
-}
-// Handle clipboard copy with user feedback
-async function handle_copy(format) {
-    if (!structure) {
-        console.warn(`No structure available for copying`);
-        return;
-    }
-    try {
-        let content;
-        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);
-    }
-    catch (error) {
-        console.error(`Failed to copy ${format.toUpperCase()} to clipboard`, error);
-    }
-}
 </script>
 
 <DraggablePane
   bind:show={controls_open}
   pane_props={{ ...pane_props, class: `controls-pane ${pane_props?.class ?? ``}` }}
   toggle_props={{
-    title: `${controls_open ? `Close` : `Open`} structure controls`,
+    title: controls_open ? `` : `Structure controls`,
     ...toggle_props,
     class: `structure-controls-toggle ${toggle_props?.class ?? ``}`,
   }}
@@ -207,66 +153,16 @@ async function handle_copy(format) {
     >
       Bonds:
       <select bind:value={scene_props.show_bonds}>
-        {#each SETTINGS_CONFIG.structure.show_bonds.enum ?? [] as option (option)}
-          <option value={option}>{option}</option>
+        {#each Object.entries(SETTINGS_CONFIG.structure.show_bonds.enum ?? {}) as
+          [value, label]
+          (value)
+        }
+          <option {value}>{label}</option>
         {/each}
       </select>
     </label>
   </SettingsSection>
 
-  <h4>Export</h4>
-  <div class="export-buttons">
-    {#each export_formats as { label, format } (format)}
-      <div style="display: flex; align-items: center; gap: 4pt">
-        {label}
-        <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}
-    <label>
-      PNG
-      <button
-        type="button"
-        disabled={!wrapper?.querySelector(`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>
-
   <SettingsSection
     title="Camera"
     current_values={{
@@ -297,8 +193,13 @@ async function handle_copy(format) {
         Projection
       </span>
       <select bind:value={scene_props.camera_projection}>
-        {#each SETTINGS_CONFIG.structure.camera_projection.enum ?? [] as option (option)}
-          <option value={option}>{option}</option>
+        {#each Object.entries(
+            SETTINGS_CONFIG.structure.camera_projection.enum ?? {},
+          ) as
+          [value, label]
+          (value)
+        }
+          <option {value}>{label}</option>
         {/each}
       </select>
     </label>
@@ -830,19 +731,22 @@ async function handle_copy(format) {
       }}
     >
       <label>
-        Bonding strategy
-        <select bind:value={scene_props.bonding_strategy}>
-          <option value="electroneg_ratio">Electronegativity Ratio</option>
-          <option value="max_dist">Max Distance</option>
-          <option value="nearest_neighbor">Nearest Neighbor</option>
+        Strategy <select bind:value={scene_props.bonding_strategy}>
+          {#each Object.entries(
+            SETTINGS_CONFIG.structure.bonding_strategy.enum ?? {},
+          ) as
+            [value, label]
+            (value)
+          }
+            <option {value}>{label}</option>
+          {/each}
         </select>
       </label>
       <label>
-        Bond color
-        <input type="color" bind:value={scene_props.bond_color} />
+        Color <input type="color" bind:value={scene_props.bond_color} />
       </label>
       <label>
-        Bond thickness
+        Thickness
         <input
           type="number"
           min={0.05}
@@ -863,19 +767,6 @@ async function handle_copy(format) {
 </DraggablePane>
 
 <style>
-  .export-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1ex;
-    font-size: 0.95em;
-  }
-  .export-buttons button {
-    width: 1.6em;
-    height: 1.6em;
-    display: grid;
-    place-items: center;
-    padding: 0;
-  }
   .rotation-axes {
     display: flex;
     gap: 9pt;

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

@@ -2,8 +2,7 @@ import type { AnyStructure } from '..';
 import { DraggablePane, Lattice } from '..';
 import { StructureScene } from './';
 import type { ComponentProps } from 'svelte';
-import type { Camera, Scene } from 'three';
-export interface Props extends Omit<ComponentProps<typeof DraggablePane>, `children`> {
+type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     controls_open?: boolean;
     scene_props?: ComponentProps<typeof StructureScene>;
     lattice_props?: ComponentProps<typeof Lattice>;
@@ -12,14 +11,10 @@ export interface Props extends Omit<ComponentProps<typeof DraggablePane>, `child
     background_color?: string;
     background_opacity?: number;
     color_scheme?: string;
-    structure?: AnyStructure | undefined;
-    wrapper?: HTMLDivElement;
-    png_dpi?: number;
-    scene?: Scene;
-    camera?: Camera;
+    structure?: AnyStructure;
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-}
-declare const StructureControls: import("svelte").Component<Props, {}, "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "scene_props" | "lattice_props" | "controls_open" | "png_dpi" | "supercell_scaling" | "toggle_props" | "pane_props">;
+};
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "controls_open" | "toggle_props" | "pane_props" | "scene_props" | "lattice_props" | "supercell_scaling">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;

package/dist/structure/StructureExportPane.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">import { DraggablePane } from '..';
+import { export_canvas_as_png } from '../io/export';
+import * as exports from './export';
+import { tooltip } from 'svelte-multiselect/attachments';
+let { export_pane_open = $bindable(false), structure = undefined, wrapper = undefined, scene = undefined, camera = undefined, png_dpi = $bindable(150), pane_props = $bindable({}), toggle_props = $bindable({}), ...rest } = $props();
+// Copy button feedback state
+let copy_status = $state({ json: false, xyz: false, cif: false, poscar: false });
+// Dynamic button text based on copy status
+const copy_confirm = `✅`;
+const text_export_formats = [
+    { label: `JSON`, format: `json` },
+    { label: `XYZ`, format: `xyz` },
+    { label: `CIF`, format: `cif` },
+    { label: `POSCAR`, format: `poscar` },
+];
+const model_3d_formats = [
+    {
+        label: `GLB`,
+        format: `glb`,
+        hint: `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
+    },
+    {
+        label: `OBJ`,
+        format: `obj`,
+        hint: `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
+    },
+];
+// Helper function to export structure to file
+function export_structure(format) {
+    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,
+    };
+    export_fns[format](structure);
+}
+// Handle clipboard copy with user feedback
+async function handle_copy(format) {
+    if (!structure) {
+        console.warn(`No structure available for copying`);
+        return;
+    }
+    try {
+        let content;
+        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);
+    }
+    catch (error) {
+        console.error(`Failed to copy ${format.toUpperCase()} to clipboard`, error);
+    }
+}
+function handle_3d_export(format) {
+    if (!scene) {
+        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);
+    }
+    catch (error) {
+        console.error(`Failed to export ${format.toUpperCase()}:`, error);
+    }
+}
+</script>
+
+<DraggablePane
+  bind:show={export_pane_open}
+  open_icon="Cross"
+  closed_icon="Export"
+  pane_props={{ ...pane_props, class: `export-pane ${pane_props?.class ?? ``}` }}
+  toggle_props={{
+    title: export_pane_open ? `` : `Export Structure`,
+    ...toggle_props,
+    class: `structure-export-toggle ${toggle_props?.class ?? ``}`,
+  }}
+  {...rest}
+>
+  <h4>Export as text</h4>
+  <div class="export-buttons">
+    {#each text_export_formats as { label, format } (format)}
+      <div style="display: flex; align-items: center; gap: 4pt">
+        {label}
+        <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>Export as image</h4>
+  <div class="export-buttons">
+    <label>
+      PNG
+      <button
+        type="button"
+        disabled={!wrapper?.querySelector(`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>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">
+        {label}
+        <button
+          type="button"
+          onclick={() => handle_3d_export(format)}
+          disabled={!scene}
+          {@attach tooltip({ content: hint })}
+        >
+          ⬇
+        </button>
+      </div>
+    {/each}
+  </div>
+</DraggablePane>
+
+<style>
+  .export-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 9pt;
+    font-size: 0.95em;
+  }
+  .export-buttons button {
+    width: 1.9em;
+    height: 1.6em;
+    padding: 0;
+    margin: 0 0 0 4pt;
+    box-sizing: border-box;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { AnyStructure } from '..';
+import { DraggablePane } from '..';
+import type { ComponentProps } from 'svelte';
+import type { Camera, Scene } from 'three';
+type $$ComponentProps = {
+    export_pane_open?: boolean;
+    structure?: AnyStructure;
+    wrapper?: HTMLDivElement;
+    scene?: Scene;
+    camera?: Camera;
+    png_dpi?: number;
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+};
+declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "toggle_props" | "pane_props" | "png_dpi" | "export_pane_open">;
+type StructureExportPane = ReturnType<typeof StructureExportPane>;
+export default StructureExportPane;

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

@@ -2,7 +2,7 @@ import type { AnyStructure } from '..';
 import { DraggablePane } from '..';
 import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `onclose`> {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     structure: AnyStructure;
     pane_open?: boolean;
     atom_count_thresholds?: [number, number];
@@ -10,7 +10,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `onclose`> {
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     highlighted_sites?: number[];
     selected_sites?: number[];
-}
-declare const StructureInfoPane: import("svelte").Component<Props, {}, "selected_sites" | "toggle_props" | "pane_props" | "pane_open" | "highlighted_sites">;
+};
+declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "toggle_props" | "pane_props" | "selected_sites" | "pane_open" | "highlighted_sites">;
 type StructureInfoPane = ReturnType<typeof StructureInfoPane>;
 export default StructureInfoPane;

package/dist/structure/StructureLegend.svelte

@@ -2,36 +2,62 @@
 import { contrast_color, default_element_colors } from '../colors';
 import { colors } from '../state.svelte';
 import { tooltip } from 'svelte-multiselect/attachments';
-let { elements, elem_color_picker_title = `Double click to reset color`, labels = $bindable([]), amount_format = `.3~f`, show_amounts = true, get_element_label, ...rest } = $props();
+import { SvelteSet } from 'svelte/reactivity';
+let { elements, elem_color_picker_title = `Double click to reset color`, labels = $bindable([]), amount_format = `.3~f`, show_amounts = true, get_element_label, hidden_elements = $bindable(new Set()), ...rest } = $props();
+function toggle_element_visibility(element, event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    const new_hidden = new SvelteSet(hidden_elements);
+    if (new_hidden.has(element))
+        new_hidden.delete(element);
+    else
+        new_hidden.add(element);
+    hidden_elements = new_hidden;
+}
 </script>
 
 <div {...rest} class="structure-legend {rest.class ?? ``}">
   {#each Object.entries(elements) as [elem, amt], idx (elem + amt)}
-    <label
-      bind:this={labels[idx]}
-      title={element_data.find((el) => el.symbol == elem)?.name}
-      {@attach tooltip()}
-      style:background-color={colors.element[elem]}
-      ondblclick={(event) => {
-        event.preventDefault()
-        colors.element[elem] = default_element_colors[elem]
-      }}
-      {@attach contrast_color()}
-    >
-      {#if get_element_label}
-        {get_element_label(elem, amt)}
-      {:else}
-        {elem}
-        {#if show_amounts}
-          <sub>{format_num(amt, amount_format)}</sub>
+    {@const is_hidden = hidden_elements.has(elem as ElementSymbol)}
+    <div class="legend-item">
+      <label
+        bind:this={labels[idx]}
+        title={element_data.find((el) => el.symbol == elem)?.name}
+        {@attach tooltip()}
+        style:background-color={colors.element[elem]}
+        class:hidden={is_hidden}
+        ondblclick={(event) => {
+          event.preventDefault()
+          colors.element[elem] = default_element_colors[elem]
+        }}
+        {@attach contrast_color()}
+      >
+        {#if get_element_label}
+          {get_element_label(elem, amt)}
+        {:else}
+          {elem}
+          {#if show_amounts}
+            <sub>{format_num(amt, amount_format)}</sub>
+          {/if}
         {/if}
-      {/if}
-      <input
-        type="color"
-        bind:value={colors.element[elem]}
-        title={elem_color_picker_title}
-      />
-    </label>
+        <input
+          type="color"
+          bind:value={colors.element[elem]}
+          title={elem_color_picker_title}
+        />
+      </label>
+      <button
+        class="toggle-visibility"
+        class:visible={is_hidden}
+        onclick={(event) => toggle_element_visibility(elem as ElementSymbol, event)}
+        title={is_hidden ? `Show ${elem} atoms` : `Hide ${elem} atoms`}
+        {@attach tooltip({ placement: `top` })}
+        type="button"
+      >
+        ×
+      </button>
+    </div>
   {/each}
 </div>
 
@@ -41,22 +67,29 @@ let { elements, elem_color_picker_title = `Double click to reset color`, labels
     position: absolute;
     bottom: var(--struct-legend-bottom, clamp(4pt, 3cqmin, 8pt));
     right: var(--struct-legend-right, clamp(4pt, 3cqmin, 8pt));
-    gap: var(--struct-legend-gap, clamp(2pt, 2cqmin, 5pt));
+    gap: var(--struct-legend-gap, clamp(3pt, 2cqmin, 7pt));
     font-size: var(--struct-legend-font, clamp(8pt, 3cqmin, 14pt));
     filter: var(--legend-filter, grayscale(10%) brightness(0.95) saturate(0.9));
     z-index: var(--struct-legend-z-index, 1);
     pointer-events: auto;
     visibility: visible;
   }
+  .structure-legend .legend-item {
+    position: relative;
+    display: inline-block;
+  }
   .structure-legend label {
     padding: var(--struct-legend-padding, 0 4pt);
     border-radius: var(--struct-legend-radius, 3pt);
     line-height: var(--struct-legend-line-height, 1.3);
-    position: relative;
     display: inline-block;
     cursor: pointer;
     visibility: visible;
     white-space: nowrap;
+    transition: opacity 0.2s ease;
+  }
+  .structure-legend label.hidden {
+    opacity: 0.4;
   }
   .structure-legend label input[type='color'] {
     z-index: var(--struct-legend-input-z, 1);
@@ -66,6 +99,37 @@ let { elements, elem_color_picker_title = `Double click to reset color`, labels
     top: 7pt;
     left: 0;
   }
+  .structure-legend button.toggle-visibility {
+    position: absolute;
+    top: -3px;
+    right: -7px;
+    width: 1em;
+    height: 1em;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border-radius: 50%;
+    font-size: 0.9em;
+    line-height: 0.9;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease, background 0.2s ease, transform 0.1s ease;
+    z-index: 2;
+    pointer-events: auto;
+  }
+  .structure-legend button.toggle-visibility.visible,
+  .structure-legend .legend-item:hover button.toggle-visibility {
+    opacity: 1;
+  }
+  .structure-legend button.toggle-visibility:hover {
+    background: rgba(0, 0, 0, 0.8);
+    transform: scale(1.15);
+  }
   .structure-legend sub {
     font-size: 0.85em;
     margin: 0 0 0 -4px;

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

@@ -1,13 +1,14 @@
-import type { CompositionType } from '..';
+import type { CompositionType, ElementSymbol } from '..';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     elements: CompositionType;
     elem_color_picker_title?: string;
     labels?: HTMLLabelElement[];
     amount_format?: string;
     show_amounts?: boolean;
     get_element_label?: (element: string, amount: number) => string;
-}
-declare const StructureLegend: import("svelte").Component<Props, {}, "labels">;
+    hidden_elements?: Set<ElementSymbol>;
+};
+declare const StructureLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "hidden_elements">;
 type StructureLegend = ReturnType<typeof StructureLegend>;
 export default StructureLegend;