matterviz 0.1.0 → 0.1.2

package/dist/ControlPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { Icon } from './';
-let { controls_open = $bindable(false), show_controls = true, controls_content, toggle_button = {}, panel_props = {}, show_toggle_button = true, open_icon = `Cross`, closed_icon = `Settings`, toggle_controls_btn, controls, } = $props();
+let { controls_open = $bindable(false), show_controls = true, controls_content, toggle_button = {}, panel_props = {}, show_toggle_button = true, open_icon = `Cross`, closed_icon = `Settings`, toggle_controls_btn, controls_div, icon_style = `width: 24px; height: 24px`, } = $props();
+const [panel_class, toggle_class] = [`controls-panel`, `controls-toggle`];
 function on_keydown(event) {
     if (event.key === `Escape`)
         controls_open = false;
@@ -7,9 +8,20 @@ function on_keydown(event) {
 function toggle_controls() {
     controls_open = !controls_open;
 }
+function handle_click_outside(event) {
+    if (!controls_open)
+        return;
+    const target = event.target;
+    const control_panel = target.closest(`.${panel_class}`);
+    const toggle_btn = target.closest(`.${toggle_class}`);
+    // Don't close if clicking inside panel or on toggle button
+    if (!control_panel && !toggle_btn)
+        controls_open = false;
+}
 </script>
 
 <svelte:window onkeydown={on_keydown} />
+<svelte:document onclick={handle_click_outside} />
 
 {#if show_controls}
   {#if show_toggle_button}
@@ -20,21 +32,18 @@ function toggle_controls() {
       aria-controls="controls-panel"
       title={toggle_button.title ?? (controls_open ? `Close controls` : `Open controls`)}
       {...toggle_button}
-      class="controls-toggle {toggle_button.class ?? ``}"
+      class="{toggle_class} {toggle_button.class ?? ``}"
     >
-      <Icon
-        icon={controls_open ? open_icon : closed_icon}
-        style="width: 24px; height: 24px"
-      />
+      <Icon icon={controls_open ? open_icon : closed_icon} style={icon_style} />
     </button>
   {/if}
 
   <div
     class:controls-open={controls_open}
-    bind:this={controls}
+    bind:this={controls_div}
     role="dialog"
     {...panel_props}
-    class="controls {panel_props.class ?? ``}"
+    class="{panel_class} {panel_props.class ?? ``}"
   >
     {#if controls_content}
       {@render controls_content()}
@@ -45,16 +54,18 @@ function toggle_controls() {
 <style>
   .controls-toggle {
     background-color: transparent;
-    min-width: 28px;
-    height: 28px;
-    padding: 0.125rem 0.25rem;
-    font-size: 0.8rem;
+    width: 30px;
+    height: 30px;
     box-sizing: border-box;
+    display: flex;
+    place-items: center;
+    padding: 4pt 4pt;
+    border-radius: 50%;
   }
   .controls-toggle:hover {
-    background-color: transparent !important;
+    background-color: rgba(255, 255, 255, 0.1);
   }
-  .controls {
+  .controls-panel {
     position: absolute;
     left: unset;
     background: transparent;
@@ -62,16 +73,14 @@ function toggle_controls() {
     display: grid;
     gap: var(--controls-gap, 4pt);
     text-align: var(--controls-text-align, left);
-    transition:
-      visibility var(--controls-transition-duration, 0.3s),
-      opacity var(--controls-transition-duration, 0.3s);
+    transition: var(--controls-transition, 0.3s);
     box-sizing: border-box;
-    top: var(--controls-top, 30pt);
+    top: var(--controls-top, 20pt);
     right: var(--controls-right, 6pt);
     background: var(--controls-bg, rgba(10, 10, 10, 0.95));
     padding: var(--controls-padding, 6pt 9pt);
     border-radius: var(--controls-border-radius, 3pt);
-    width: var(--controls-width, 20em);
+    width: var(--controls-width, 28em);
     max-width: var(--controls-max-width, 90cqw);
     color: var(--controls-text-color);
     overflow: auto;
@@ -81,31 +90,31 @@ function toggle_controls() {
     z-index: var(--controls-z-index, 1);
     pointer-events: none;
   }
-  .controls.controls-open {
+  .controls-panel.controls-open {
     visibility: visible !important;
     opacity: 1 !important;
     pointer-events: auto !important;
   }
-  .controls :global(hr) {
+  .controls-panel :global(hr) {
     border: none;
     background: var(--controls-hr-bg, gray);
     margin: var(--controls-hr-margin, 0);
     height: var(--controls-hr-height, 0.5px);
   }
-  .controls :global(label) {
+  .controls-panel :global(label) {
     display: flex;
     align-items: center;
     gap: var(--controls-label-gap, 2pt);
   }
-  .controls :global(input[type='range']) {
+  .controls-panel :global(input[type='range']) {
     margin-left: auto;
     width: var(--controls-input-range-width, 100px);
     flex-shrink: 0;
   }
-  .controls :global(.slider-control input[type='range']) {
+  .controls-panel :global(.slider-control input[type='range']) {
     margin-left: 0;
   }
-  .controls :global(input[type='number']) {
+  .controls-panel :global(input[type='number']) {
     box-sizing: border-box;
     text-align: center;
     border-radius: var(--controls-input-num-border-radius, 3pt);
@@ -116,43 +125,43 @@ function toggle_controls() {
     margin-left: var(--controls-input-num-margin-left, 6pt);
     flex-shrink: 0;
   }
-  .controls :global(input::-webkit-inner-spin-button) {
+  .controls-panel :global(input::-webkit-inner-spin-button) {
     display: none;
   }
-  .controls :global(button) {
+  .controls-panel :global(button) {
     width: max-content;
     background-color: var(--controls-btn-bg, rgba(255, 255, 255, 0.2));
   }
-  .controls :global(select) {
+  .controls-panel :global(select) {
     margin: var(--controls-select-margin, 0 0 0 5pt);
     color: var(--controls-select-color, white);
     background-color: var(--controls-select-bg, rgba(255, 255, 255, 0.1));
   }
-  .controls :global(input[type='color']) {
+  .controls-panel :global(input[type='color']) {
     width: var(--input-color-width, 40px);
     height: var(--input-color-height, 16px);
     margin: var(--input-color-margin, 0 0 0 5pt);
     border: var(--input-color-border, 1px solid rgba(255, 255, 255, 0.05));
     box-sizing: border-box;
   }
-  .controls :global(.section-heading) {
+  .controls-panel :global(.section-heading) {
     margin: 8pt 0 2pt;
     font-size: 0.9em;
     color: var(--text-muted, #ccc);
   }
-  .controls :global(.control-row) {
+  .controls-panel :global(.control-row) {
     display: flex;
     gap: 4pt;
     align-items: flex-start;
   }
-  .controls :global(.control-row label) {
+  .controls-panel :global(.control-row label) {
     min-width: 0;
   }
-  .controls :global(.control-row label.compact) {
+  .controls-panel :global(.control-row label.compact) {
     flex: 0 0 auto;
     margin-right: 8pt;
   }
-  .controls :global(.control-row label.slider-control) {
+  .controls-panel :global(.control-row label.slider-control) {
     flex: 1;
   }
 </style>

package/dist/ControlPanel.svelte.d.ts

@@ -11,7 +11,8 @@ interface Props {
     open_icon?: IconName;
     closed_icon?: IconName;
     toggle_controls_btn?: HTMLButtonElement;
-    controls?: HTMLDivElement;
+    controls_div?: HTMLDivElement;
+    icon_style?: string;
 }
 declare const ControlPanel: import("svelte").Component<Props, {}, "controls_open">;
 type ControlPanel = ReturnType<typeof ControlPanel>;

package/dist/api.js

@@ -15,8 +15,8 @@ export async function fetch_zipped(url, { unzip = true } = {}) {
         return (await response.blob());
     return JSON.parse(await decompress(response.body));
 }
-// Function to download data to a file
-export function download(data, filename, type) {
+// Original download implementation
+function default_download(data, filename, type) {
     const file = new Blob([data], { type });
     const link = document.createElement(`a`);
     const url = URL.createObjectURL(file);
@@ -28,3 +28,13 @@ export function download(data, filename, type) {
     link.remove();
     URL.revokeObjectURL(url);
 }
+// Function to download data to a file - checks for global override first
+export function download(data, filename, type) {
+    // Check if there's a global download override (used by VSCode extension)
+    const global_download = globalThis.download;
+    if (typeof global_download === `function` && global_download !== download) {
+        return global_download(data, filename, type);
+    }
+    // Use default browser download
+    return default_download(data, filename, type);
+}

package/dist/composition/parse.d.ts

@@ -1,4 +1,8 @@
 import type { CompositionType, ElementSymbol } from '..';
+export declare const atomic_number_to_symbol: Partial<Record<number, ElementSymbol>>;
+export declare const symbol_to_atomic_number: Partial<Record<ElementSymbol, number>>;
+export declare const atomic_weights: Map<"K" | "H" | "He" | "Li" | "Be" | "B" | "C" | "N" | "O" | "F" | "Ne" | "Na" | "Mg" | "Al" | "Si" | "P" | "S" | "Cl" | "Ar" | "Ca" | "Sc" | "Ti" | "V" | "Cr" | "Mn" | "Fe" | "Co" | "Ni" | "Cu" | "Zn" | "Ga" | "Ge" | "As" | "Se" | "Br" | "Kr" | "Rb" | "Sr" | "Y" | "Zr" | "Nb" | "Mo" | "Tc" | "Ru" | "Rh" | "Pd" | "Ag" | "Cd" | "In" | "Sn" | "Sb" | "Te" | "I" | "Xe" | "Cs" | "Ba" | "La" | "Ce" | "Pr" | "Nd" | "Pm" | "Sm" | "Eu" | "Gd" | "Tb" | "Dy" | "Ho" | "Er" | "Tm" | "Yb" | "Lu" | "Hf" | "Ta" | "W" | "Re" | "Os" | "Ir" | "Pt" | "Au" | "Hg" | "Tl" | "Pb" | "Bi" | "Po" | "At" | "Rn" | "Fr" | "Ra" | "Ac" | "Th" | "Pa" | "U" | "Np" | "Pu" | "Am" | "Cm" | "Bk" | "Cf" | "Es" | "Fm" | "Md" | "No" | "Lr" | "Rf" | "Db" | "Sg" | "Bh" | "Hs" | "Mt" | "Ds" | "Rg" | "Cn" | "Nh" | "Fl" | "Mc" | "Lv" | "Ts" | "Og", number>;
+export declare const element_electronegativity_map: Map<"K" | "H" | "He" | "Li" | "Be" | "B" | "C" | "N" | "O" | "F" | "Ne" | "Na" | "Mg" | "Al" | "Si" | "P" | "S" | "Cl" | "Ar" | "Ca" | "Sc" | "Ti" | "V" | "Cr" | "Mn" | "Fe" | "Co" | "Ni" | "Cu" | "Zn" | "Ga" | "Ge" | "As" | "Se" | "Br" | "Kr" | "Rb" | "Sr" | "Y" | "Zr" | "Nb" | "Mo" | "Tc" | "Ru" | "Rh" | "Pd" | "Ag" | "Cd" | "In" | "Sn" | "Sb" | "Te" | "I" | "Xe" | "Cs" | "Ba" | "La" | "Ce" | "Pr" | "Nd" | "Pm" | "Sm" | "Eu" | "Gd" | "Tb" | "Dy" | "Ho" | "Er" | "Tm" | "Yb" | "Lu" | "Hf" | "Ta" | "W" | "Re" | "Os" | "Ir" | "Pt" | "Au" | "Hg" | "Tl" | "Pb" | "Bi" | "Po" | "At" | "Rn" | "Fr" | "Ra" | "Ac" | "Th" | "Pa" | "U" | "Np" | "Pu" | "Am" | "Cm" | "Bk" | "Cf" | "Es" | "Fm" | "Md" | "No" | "Lr" | "Rf" | "Db" | "Sg" | "Bh" | "Hs" | "Mt" | "Ds" | "Rg" | "Cn" | "Nh" | "Fl" | "Mc" | "Lv" | "Ts" | "Og", number>;
 export declare function atomic_number_to_element_symbol(atomic_number: number): ElementSymbol | null;
 export declare function element_symbol_to_atomic_number(symbol: ElementSymbol): number | null;
 export declare function convert_atomic_numbers_to_symbols(atomic_composition: Record<number, number>): CompositionType;

package/dist/composition/parse.js

@@ -1,16 +1,16 @@
 import { elem_symbols } from '..';
 import element_data from '../element/data';
 // Create a mapping from atomic numbers to element symbols
-const atomic_number_to_symbol = {};
-const symbol_to_atomic_number = {};
+export const atomic_number_to_symbol = {};
+export const symbol_to_atomic_number = {};
 // Create mass/electronegativity maps for O(1) lookups in loops below
-const element_atomic_mass_map = new Map();
-const element_electronegativity_map = new Map();
+export const atomic_weights = new Map();
+export const element_electronegativity_map = new Map();
 // Populate maps at module load time
 for (const element of element_data) {
     atomic_number_to_symbol[element.number] = element.symbol;
     symbol_to_atomic_number[element.symbol] = element.number;
-    element_atomic_mass_map.set(element.symbol, element.atomic_mass);
+    atomic_weights.set(element.symbol, element.atomic_mass);
     element_electronegativity_map.set(element.symbol, element.electronegativity ?? 0);
 }
 // Convert atomic number to element symbol
@@ -134,7 +134,7 @@ export function composition_to_percentages(composition, by_weight = false) {
         // Calculate weight for each element
         for (const [element, amount] of Object.entries(composition)) {
             if (typeof amount === `number` && amount > 0) {
-                const atomic_mass = element_atomic_mass_map.get(element);
+                const atomic_mass = atomic_weights.get(element);
                 if (atomic_mass === undefined) {
                     throw new Error(`Unknown element: ${element}`);
                 }

package/dist/element/ElementTile.svelte

@@ -8,14 +8,14 @@ let category = $derived(element.category.replaceAll(` `, `-`));
 // background color defaults to category color (initialized in colors/index.ts, user editable in PeriodicTableControls.svelte)
 let fallback_bg_color = $derived(bg_color ?? default_category_colors[category] ?? `var(--${category}-bg-color)`);
 let contrast_bg_color = $derived(bg_color ?? default_category_colors[category]);
-// Determine if we should show the atomic number - default to false for multi-value splits to avoid overlap
+// Determine if we should show the atomic number
 const should_show_number = $derived.by(() => {
     if (show_number !== undefined)
         return show_number;
-    // Auto-hide number for multi-value splits to prevent overlap with value labels
+    // Hide number for multi-value splits to prevent overlap with value labels
     if (Array.isArray(value) && value.length > 1)
         return false;
-    return true; // default to true for single values
+    return true;
 });
 // Helper function to format values appropriately
 const format_value = (val) => {
@@ -40,84 +40,69 @@ const format_value = (val) => {
 const should_show_values = $derived.by(() => {
     if (show_values !== undefined)
         return show_values;
-    if (Array.isArray(value)) {
+    if (Array.isArray(value))
         return !value.some((v) => is_color(v));
-    }
     return !is_color(value);
 });
-// Determine the actual layout to use based on value count and split_layout prop
-const actual_layout = $derived.by(() => {
-    if (!Array.isArray(value))
-        return null;
-    if (split_layout)
-        return split_layout;
-    // Auto-determine layout based on value count (backwards compatibility)
-    const layout_map = { 2: `diagonal`, 3: `horizontal`, 4: `quadrant` };
-    if (value.length in layout_map) {
-        return layout_map[value.length];
-    }
-    console.error(`Only 2, 3, or 4 values are supported for split_layout`);
-    return null;
-});
 // Get the appropriate CSS classes for segments and positions based on layout
 const layout_config = $derived.by(() => {
-    if (!Array.isArray(value) || !actual_layout)
+    if (!Array.isArray(value))
         return null;
     const count = value.length;
-    switch (actual_layout) {
-        case `diagonal`:
-            return count === 2
-                ? {
-                    segments: [`diagonal-top`, `diagonal-bottom`],
-                    positions: [`top-left`, `bottom-right`],
-                }
-                : null;
-        case `horizontal`:
-            return count === 3
-                ? {
-                    segments: [`horizontal-top`, `horizontal-middle`, `horizontal-bottom`],
-                    positions: [`bar-top-left`, `bar-middle-right`, `bar-bottom-left`],
-                }
-                : null;
-        case `vertical`:
-            return count === 3
-                ? {
-                    segments: [`vertical-left`, `vertical-middle`, `vertical-right`],
-                    positions: [`bar-left-top`, `bar-middle-bottom`, `bar-right-top`],
-                }
-                : null;
-        case `triangular`:
-            return count === 4
-                ? {
-                    segments: [
-                        `triangle-top`,
-                        `triangle-right`,
-                        `triangle-bottom`,
-                        `triangle-left`,
-                    ],
-                    positions: [
-                        `triangle-top-pos`,
-                        `triangle-right-pos`,
-                        `triangle-bottom-pos`,
-                        `triangle-left-pos`,
-                    ],
-                }
-                : null;
-        case `quadrant`:
-            return count === 4
-                ? {
-                    segments: [`quadrant-tl`, `quadrant-tr`, `quadrant-bl`, `quadrant-br`],
-                    positions: [
-                        `value-quadrant-tl`,
-                        `value-quadrant-tr`,
-                        `value-quadrant-bl`,
-                        `value-quadrant-br`,
-                    ],
-                }
-                : null;
-        default:
-            return null;
+    // Use explicit split_layout or auto-determine based on count
+    const layout = split_layout ?? {
+        2: `diagonal`,
+        3: `horizontal`,
+        4: `quadrant`,
+    }[count];
+    if (!layout)
+        return null;
+    if (layout === `diagonal` && count === 2) {
+        return {
+            segments: [`diagonal-top`, `diagonal-bottom`],
+            positions: [`top-left`, `bottom-right`],
+        };
+    }
+    if (layout === `horizontal` && count === 3) {
+        return {
+            segments: [`horizontal-top`, `horizontal-middle`, `horizontal-bottom`],
+            positions: [`bar-top-left`, `bar-middle-right`, `bar-bottom-left`],
+        };
+    }
+    if (layout === `vertical` && count === 3) {
+        return {
+            segments: [`vertical-left`, `vertical-middle`, `vertical-right`],
+            positions: [`bar-left-top`, `bar-middle-bottom`, `bar-right-top`],
+        };
     }
+    if (layout === `triangular` && count === 4) {
+        return {
+            segments: [
+                `triangle-top`,
+                `triangle-right`,
+                `triangle-bottom`,
+                `triangle-left`,
+            ],
+            positions: [
+                `triangle-top-pos`,
+                `triangle-right-pos`,
+                `triangle-bottom-pos`,
+                `triangle-left-pos`,
+            ],
+        };
+    }
+    if (layout === `quadrant` && count === 4) {
+        return {
+            segments: [`quadrant-tl`, `quadrant-tr`, `quadrant-bl`, `quadrant-br`],
+            positions: [
+                `value-quadrant-tl`,
+                `value-quadrant-tr`,
+                `value-quadrant-bl`,
+                `value-quadrant-br`,
+            ],
+        };
+    }
+    return null;
 });
 </script>
 

package/dist/icons.d.ts

@@ -77,24 +77,12 @@ export declare const icon_data: {
         readonly height: "24";
         readonly path: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2";
     };
-    readonly Contact: {
-        readonly viewBox: "0 0 24 24";
-        readonly width: "24";
-        readonly height: "24";
-        readonly path: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7";
-    };
     readonly Changelog: {
         readonly viewBox: "0 0 24 24";
         readonly width: "24";
         readonly height: "24";
         readonly path: "M13 3a9 9 0 0 0-9 9H1l4 4l4-4H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.95 8.95 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.25 2.52l.77-1.28l-3.52-2.09V8z";
     };
-    readonly GitHubMark: {
-        readonly viewBox: "0 0 16 16";
-        readonly width: "24";
-        readonly height: "24";
-        readonly path: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z";
-    };
     readonly Info: {
         readonly viewBox: "0 0 24 24";
         readonly width: "24";
@@ -107,18 +95,6 @@ export declare const icon_data: {
         readonly height: "24";
         readonly path: "M14 21v-1.65q0-.2.075-.387t.225-.338l5.225-5.2q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.2 5.2q-.15.15-.337.225T16.65 22H15q-.425 0-.712-.287T14 21m7.5-5.575l-.925-.925zm-6 5.075h.95l3.025-3.05l-.925-.925l-3.05 3.025zM6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762v1.425q0 .425-.288.713T19 11.25t-.712-.288T18 10.25V9h-4q-.425 0-.712-.288T13 8V4H6v16h5q.425 0 .713.288T12 21t-.288.713T11 22zm0-2V4zm13.025-3.025l-.475-.45l.925.925z";
     };
-    readonly Mail: {
-        readonly viewBox: "0 0 24 24";
-        readonly width: "24";
-        readonly height: "24";
-        readonly path: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6";
-    };
-    readonly Globe: {
-        readonly viewBox: "0 0 24 24";
-        readonly width: "24";
-        readonly height: "24";
-        readonly path: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z";
-    };
     readonly CheckCircle: {
         readonly viewBox: "0 0 24 24";
         readonly width: "24";
@@ -431,5 +407,13 @@ export declare const icon_data: {
         readonly height: "24";
         readonly path: "M2 2h2v18h18v2H2zm7 8a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m4-8a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m5 10a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3";
     };
+    readonly Histogram: {
+        readonly viewBox: "0 0 48 48";
+        readonly width: "24";
+        readonly height: "24";
+        readonly stroke: "currentColor";
+        readonly fill: "currentColor";
+        readonly path: "M4 42h40z M4 42h40 M8 28h6v14H8zm13-10h6v24h-6zM34 6h6v36h-6z";
+    };
 };
 export type IconName = keyof typeof icon_data;

package/dist/icons.js

@@ -78,24 +78,12 @@ export const icon_data = {
         height: `24`,
         path: `M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2`,
     },
-    Contact: {
-        viewBox: `0 0 24 24`,
-        width: `24`,
-        height: `24`,
-        path: `M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7`,
-    },
     Changelog: {
         viewBox: `0 0 24 24`,
         width: `24`,
         height: `24`,
         path: `M13 3a9 9 0 0 0-9 9H1l4 4l4-4H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.95 8.95 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.25 2.52l.77-1.28l-3.52-2.09V8z`,
     },
-    GitHubMark: {
-        viewBox: `0 0 16 16`,
-        width: `24`,
-        height: `24`,
-        path: `M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z`,
-    },
     Info: {
         viewBox: `0 0 24 24`,
         width: `24`,
@@ -108,18 +96,6 @@ export const icon_data = {
         height: `24`,
         path: `M14 21v-1.65q0-.2.075-.387t.225-.338l5.225-5.2q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.2 5.2q-.15.15-.337.225T16.65 22H15q-.425 0-.712-.287T14 21m7.5-5.575l-.925-.925zm-6 5.075h.95l3.025-3.05l-.925-.925l-3.05 3.025zM6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762v1.425q0 .425-.288.713T19 11.25t-.712-.288T18 10.25V9h-4q-.425 0-.712-.288T13 8V4H6v16h5q.425 0 .713.288T12 21t-.288.713T11 22zm0-2V4zm13.025-3.025l-.475-.45l.925.925z`,
     },
-    Mail: {
-        viewBox: `0 0 24 24`,
-        width: `24`,
-        height: `24`,
-        path: `M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6`,
-    },
-    Globe: {
-        viewBox: `0 0 24 24`,
-        width: `24`,
-        height: `24`,
-        path: `M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z`,
-    },
     CheckCircle: {
         viewBox: `0 0 24 24`,
         width: `24`,
@@ -432,4 +408,12 @@ export const icon_data = {
         height: `24`,
         path: `M2 2h2v18h18v2H2zm7 8a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m4-8a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m5 10a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3`,
     },
+    Histogram: {
+        viewBox: `0 0 48 48`,
+        width: `24`,
+        height: `24`,
+        stroke: `currentColor`,
+        fill: `currentColor`,
+        path: `M4 42h40z M4 42h40 M8 28h6v14H8zm13-10h6v24h-6zM34 6h6v36h-6z`,
+    },
 };

package/dist/index.d.ts

@@ -13,9 +13,9 @@ export { default as Nucleus } from './Nucleus.svelte';
 export * from './periodic-table';
 export * from './plot';
 export { default as Spinner } from './Spinner.svelte';
+export * from './structure';
 export { default as Structure } from './structure/Structure.svelte';
 export { default as Trajectory } from './trajectory/Trajectory.svelte';
-export * from './structure';
 export type Category = (typeof categories)[number];
 export type ElementSymbol = (typeof elem_symbols)[number];
 export type CompositionType = Partial<Record<ElementSymbol, number>>;

package/dist/index.js

@@ -12,9 +12,9 @@ export { default as Nucleus } from './Nucleus.svelte';
 export * from './periodic-table';
 export * from './plot';
 export { default as Spinner } from './Spinner.svelte';
+export * from './structure';
 export { default as Structure } from './structure/Structure.svelte';
 export { default as Trajectory } from './trajectory/Trajectory.svelte';
-export * from './structure';
 export const crystal_systems = [
     `triclinic`,
     `monoclinic`,

package/dist/io/decompress.d.ts

@@ -8,7 +8,6 @@ export declare function is_compressed_file(filename: string): boolean;
 export declare function remove_compression_extension(filename: string): string;
 export declare function detect_compression_format(filename: string): CompressionFormat | null;
 export declare function decompress_data(data: ArrayBuffer, format: CompressionFormat): Promise<string>;
-export declare const decompress_gzip: (data: ArrayBuffer) => Promise<string>;
 export declare function decompress_file(file: File): Promise<{
     content: string;
     filename: string;

package/dist/io/decompress.js

@@ -40,8 +40,6 @@ export async function decompress_data(data, format) {
         throw `Failed to decompress ${format} file: ${error}`;
     }
 }
-// Legacy compatibility
-export const decompress_gzip = (data) => decompress_data(data, `gzip`);
 export function decompress_file(file) {
     const compressed = is_compressed_file(file.name);
     return new Promise((resolve, reject) => {
@@ -69,7 +67,7 @@ export function decompress_file(file) {
                 reject(error);
             }
         };
-        reader.onerror = () => reject(new Error(`Failed to read file`));
+        reader.onerror = () => reject(new Error(`Failed to read file ${file.name}`));
         if (compressed)
             reader.readAsArrayBuffer(file);
         else

package/dist/io/export.d.ts

@@ -1,9 +1,13 @@
 import type { AnyStructure } from '..';
+import type * as THREE from 'three';
 import { WebGLRenderer } from 'three';
 export interface CanvasWithRenderer extends HTMLCanvasElement {
     __customRenderer?: WebGLRenderer;
 }
 export declare function generate_structure_filename(structure: AnyStructure | undefined, extension: string): string;
+export declare function generate_xyz_content(structure?: AnyStructure): string;
+export declare function generate_json_content(structure?: AnyStructure): string;
+export declare function copy_to_clipboard(text: string): Promise<void>;
 export declare function export_xyz(structure?: AnyStructure): void;
 export declare function export_json(structure?: AnyStructure): void;
-export declare function export_png(canvas: HTMLCanvasElement | null, structure: AnyStructure | undefined, png_dpi?: number): void;
+export declare function export_png(canvas: HTMLCanvasElement | null, structure: AnyStructure | undefined, png_dpi?: number, scene?: THREE.Scene | null, camera?: THREE.Camera | null): void;