matterviz 0.1.4 → 0.1.6

package/dist/DraggablePanel.svelte

@@ -87,6 +87,25 @@ function handle_button_click(event, action) {
     event.stopPropagation();
     action();
 }
+// Debounced resize handler for better performance
+let resize_timeout = $state(undefined);
+function handle_resize() {
+    if (!show || has_been_dragged || currently_dragging)
+        return;
+    if (resize_timeout)
+        clearTimeout(resize_timeout);
+    const current_timeout = setTimeout(() => {
+        if (resize_timeout !== current_timeout)
+            return;
+        if (show && toggle_panel_btn && !has_been_dragged && panel_div) {
+            const pos = calculate_position();
+            initial_position = pos;
+            panel_div.style.left = pos.left;
+            panel_div.style.top = pos.top;
+        }
+    }, 50); // Debounce resize events
+    resize_timeout = current_timeout;
+}
 // Position panel when shown
 $effect(() => {
     if (show && toggle_panel_btn && !has_been_dragged) {
@@ -104,7 +123,7 @@ $effect(() => {
 });
 </script>
 
-<svelte:window onkeydown={on_keydown} />
+<svelte:window onkeydown={on_keydown} onresize={handle_resize} />
 <svelte:document onclick={handle_click_outside} />
 
 {#if show_panel}
@@ -174,10 +193,11 @@ $effect(() => {
     box-sizing: border-box;
     display: flex;
     place-items: center;
-    padding: 4pt;
+    padding: var(--panel-toggle-padding, 2pt);
     border-radius: var(--panel-toggle-border-radius, 3pt);
     background-color: transparent;
     transition: background-color 0.2s;
+    font-size: clamp(1em, 2cqw, 1.6em);
   }
   button.panel-toggle:hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
@@ -197,7 +217,8 @@ $effect(() => {
     transition: opacity 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
     width: 28em;
     max-width: 90cqw;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
     max-height: calc(100vh - 3em);
     pointer-events: auto;
   }
@@ -208,24 +229,41 @@ $effect(() => {
     left: auto !important;
   }
   /* Panel content styling */
+  .draggable-panel :global(h4) {
+    margin: 2pt 0;
+    font-size: 0.95em;
+  }
   .draggable-panel :global(hr) {
     border: none;
     background: var(--panel-hr-bg, rgba(255, 255, 255, 0.1));
-    margin: 0;
-    height: 0.5px;
+    margin: 4pt 0;
+    height: 1px;
   }
   .draggable-panel :global(label) {
     display: flex;
     align-items: center;
     gap: 2pt;
   }
+  .draggable-panel :global(input[type='text']) {
+    flex: 1;
+    padding: 4px 6px;
+  }
+  .draggable-panel :global(input[type='text'].invalid) {
+    border-color: var(--error-color, #ff6b6b);
+    background: rgba(255, 107, 107, 0.1);
+  }
+  .draggable-panel :global(input[type='text'].invalid):focus {
+    outline-color: var(--error-color, #ff6b6b);
+    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
+  }
   .draggable-panel :global(input[type='range']) {
-    margin-left: auto;
+    margin-left: 4pt;
     width: 100px;
     flex-shrink: 0;
   }
-  .draggable-panel :global(.slider-control input[type='range']) {
-    margin-left: 0;
+  .draggable-panel :global(input[type='range']) {
+    flex: 1;
+    min-width: 60px;
   }
   .draggable-panel :global(input[type='number']) {
     box-sizing: border-box;
@@ -247,6 +285,10 @@ $effect(() => {
   }
   .draggable-panel :global(select) {
     margin: 0 0 0 5pt;
+    flex: 1;
+    border-radius: 3px;
+    padding: 2px 4px;
+    font-size: 0.8em;
   }
   .draggable-panel :global(input[type='color']) {
     width: 40px;
@@ -257,15 +299,8 @@ $effect(() => {
   }
   .draggable-panel :global(.panel-row) {
     display: flex;
-    gap: 4pt;
-    align-items: flex-start;
-  }
-  .draggable-panel :global(.panel-row label) {
-    min-width: 0;
-  }
-  .draggable-panel :global(.panel-row label.compact) {
-    flex: 0 0 auto;
-    margin-right: 8pt;
+    gap: 8pt;
+    align-items: center;
   }
   .draggable-panel :global(.panel-row label.slider-control) {
     flex: 1;

package/dist/app.css

@@ -73,9 +73,9 @@ pre code {
 pre {
   position: relative;
   border-radius: 4pt;
-  font-size: 8pt;
+  font-size: 0.95em;
   background-color: var(--pre-bg);
-  padding: 1em;
+  padding: 1ex 1em;
   overflow-x: auto;
 }
 blockquote {
@@ -118,7 +118,7 @@ input {
   border-radius: 3pt;
 }
 input[type='number'] {
-  min-width: 60px;
+  min-width: 40px;
   width: auto;
 }
 input[type='color'] {

package/dist/colors/index.js

@@ -21,18 +21,9 @@ export const default_category_colors = {
     lanthanide: `#58748e`,
     actinide: `#6495ed`, // cornflowerblue
 };
-function rgb_scheme_to_hex(obj) {
-    const result = {};
-    for (const key in obj) {
-        if (Object.hasOwn(obj, key)) {
-            const val = obj[key];
-            if (val.length >= 3) {
-                result[key] = rgb(val[0], val[1], val[2]).formatHex();
-            }
-        }
-    }
-    return result;
-}
+const rgb_scheme_to_hex = (obj) => Object.fromEntries(Object.entries(obj)
+    .filter(([, val]) => val.length >= 3)
+    .map(([key, val]) => [key, rgb(val[0], val[1], val[2]).formatHex()]));
 export const vesta_hex = rgb_scheme_to_hex(vesta_colors);
 export const jmol_hex = rgb_scheme_to_hex(jmol_colors);
 export const alloy_hex = rgb_scheme_to_hex(alloy_colors);

package/dist/composition/BarChart.svelte

@@ -40,7 +40,7 @@ let segments = $derived.by(() => {
                 below_labels++;
         }
         return {
-            element: element,
+            element,
             amount: amount,
             percentage,
             color,

package/dist/composition/BubbleChart.svelte

@@ -11,7 +11,7 @@ let bubbles = $derived.by(() => {
     // Create hierarchy data structure for D3 pack
     const hierarchy_data = {
         children: element_entries.map(([element, amount]) => ({
-            element: element,
+            element,
             amount: amount,
             color: element_colors[element] || `#cccccc`,
         })),

package/dist/composition/PieChart.svelte

@@ -78,7 +78,7 @@ let segments = $derived.by(() => {
         const font_scale = get_chart_font_scale(base_scale, label_text, available_space);
         const color = element_colors[element] || `#cccccc`;
         return {
-            element: element,
+            element,
             amount: amount,
             percentage,
             color,

package/dist/composition/parse.d.ts

@@ -3,13 +3,13 @@ export declare const atomic_number_to_symbol: 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 convert_atomic_numbers_to_symbols(atomic_composition: Record<number, number>): CompositionType;
-export declare function convert_symbols_to_atomic_numbers(symbol_composition: CompositionType): Record<number, number>;
-export declare function parse_formula(formula: string): CompositionType;
-export declare function normalize_composition(composition: CompositionType | Record<number, number> | Record<string | number, number>): CompositionType;
-export declare function composition_to_percentages(composition: CompositionType, by_weight?: boolean): CompositionType;
+export declare const atomic_num_to_symbols: (atomic_composition: Record<number, number>) => CompositionType;
+export declare const atomic_symbol_to_num: (symbol_composition: CompositionType) => Record<number, number>;
+export declare const parse_formula: (formula: string) => CompositionType;
+export declare const normalize_composition: (composition: CompositionType | Record<number, number> | Record<string | number, number>) => CompositionType;
+export declare const composition_to_percentages: (composition: CompositionType, by_weight?: boolean) => CompositionType;
 export declare const get_total_atoms: (composition: CompositionType) => number;
-export declare function parse_composition(input: string | CompositionType | Record<number, number> | Record<string | number, number>): CompositionType;
-export declare function format_composition_formula(composition: CompositionType, sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[], plain_text?: boolean, delim?: string): string;
-export declare function get_alphabetical_formula(input: string | CompositionType | AnyStructure, plain_text?: boolean, delim?: string): string;
-export declare function get_electro_neg_formula(input: string | CompositionType | AnyStructure, plain_text?: boolean, delim?: string): string;
+export declare const parse_composition: (input: string | CompositionType | Record<number, number> | Record<string | number, number>) => CompositionType;
+export declare const format_composition_formula: (composition: CompositionType, sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[], plain_text?: boolean, delim?: string, amount_format?: string) => string;
+export declare const get_alphabetical_formula: (input: string | CompositionType | AnyStructure, plain_text?: boolean, delim?: string, amount_format?: string) => string;
+export declare const get_electro_neg_formula: (input: string | CompositionType | AnyStructure, plain_text?: boolean, delim?: string, amount_format?: string) => string;

package/dist/composition/parse.js

@@ -1,9 +1,8 @@
-import { elem_symbols } from '..';
+import { elem_symbols, format_num } from '..';
 import element_data from '../element/data';
-// Create a mapping from atomic numbers to element symbols
+// Create symbol/number/mass/electronegativity lookup maps for O(1) access
 export const atomic_number_to_symbol = {};
 export const symbol_to_atomic_number = {};
-// Create mass/electronegativity maps for O(1) lookups in loops below
 export const atomic_weights = new Map();
 export const element_electronegativity_map = new Map();
 // Populate maps at module load time
@@ -13,93 +12,68 @@ for (const element of element_data) {
     atomic_weights.set(element.symbol, element.atomic_mass);
     element_electronegativity_map.set(element.symbol, element.electronegativity ?? 0);
 }
-// Check if an object represents a composition with atomic numbers as keys
-// Returns true if ALL keys are valid atomic numbers (1-118) and at least one key exists
-function is_atomic_number_composition(obj) {
+// Check if object has atomic numbers as keys (1-118)
+const is_atomic_number_composition = (obj) => {
     const keys = Object.keys(obj);
-    return (keys.length > 0 &&
-        keys.map(Number).every((num) => Number.isInteger(num) && num >= 1 && num <= 118));
-}
-// Convert a composition with atomic numbers to element symbols
-// Example: {26: 2, 8: 3} -> {Fe: 2, O: 3}
-export function convert_atomic_numbers_to_symbols(atomic_composition) {
+    return keys.length > 0 &&
+        keys.map(Number).every((num) => Number.isInteger(num) && num >= 1 && num <= 118);
+};
+// Convert atomic numbers to element symbols
+export const atomic_num_to_symbols = (atomic_composition) => {
     const composition = {};
-    for (const [atomic_number_str, amount] of Object.entries(atomic_composition)) {
-        const atomic_number = Number(atomic_number_str);
-        const symbol = atomic_number_to_symbol[atomic_number] || null;
+    for (const [atomic_num_str, amount] of Object.entries(atomic_composition)) {
+        const symbol = atomic_number_to_symbol[Number(atomic_num_str)];
         if (!symbol)
-            throw new Error(`Invalid atomic number: ${atomic_number}`);
-        if (typeof amount === `number` && amount > 0) {
+            throw new Error(`Invalid atomic number: ${atomic_num_str}`);
+        if (amount > 0)
             composition[symbol] = (composition[symbol] || 0) + amount;
-        }
     }
     return composition;
-}
-// Convert a composition with element symbols to atomic numbers
-// Example: {Fe: 2, O: 3} -> {26: 2, 8: 3}
-export function convert_symbols_to_atomic_numbers(symbol_composition) {
+};
+// Convert element symbols to atomic numbers
+export const atomic_symbol_to_num = (symbol_composition) => {
     const atomic_composition = {};
     for (const [symbol, amount] of Object.entries(symbol_composition)) {
-        const atomic_number = symbol_to_atomic_number[symbol];
-        if (!atomic_number)
+        const atomic_num = symbol_to_atomic_number[symbol];
+        if (!atomic_num)
             throw new Error(`Invalid element symbol: ${symbol}`);
-        if (typeof amount === `number` && amount > 0) {
-            atomic_composition[atomic_number] = (atomic_composition[atomic_number] || 0) +
-                amount;
+        if (amount > 0) {
+            atomic_composition[atomic_num] = (atomic_composition[atomic_num] || 0) + amount;
         }
     }
     return atomic_composition;
-}
-// Parse a chemical formula string into a composition object
-// Examples: "Fe2O3" -> {Fe: 2, O: 3}, "CaCO3" -> {Ca: 1, C: 1, O: 3}
-export function parse_formula(formula) {
+};
+// Expand parentheses in chemical formulas
+const expand_parentheses = (formula) => {
+    while (formula.includes(`(`)) {
+        formula = formula.replace(/\(([^()]+)\)(\d*)/g, (_match, group, multiplier) => {
+            const mult = multiplier ? parseInt(multiplier, 10) : 1;
+            return group.replace(/([A-Z][a-z]?)(\d*)/g, (_m, element, count) => {
+                const num = (count ? parseInt(count, 10) : 1) * mult;
+                return element + (num > 1 ? num : ``);
+            });
+        });
+    }
+    return formula;
+};
+// Parse chemical formula string into composition object
+export const parse_formula = (formula) => {
     const composition = {};
-    // Remove whitespace and handle parentheses by expanding them
     const cleaned_formula = expand_parentheses(formula.replace(/\s/g, ``));
-    // Match element symbols followed by numbers
-    // This regex matches: Capital letter, optional lowercase letter, optional number
-    const pattern = /([A-Z][a-z]?)(\d*)/g;
-    let match;
-    while ((match = pattern.exec(cleaned_formula)) !== null) {
+    for (const match of cleaned_formula.matchAll(/([A-Z][a-z]?)(\d*)/g)) {
         const element = match[1];
         const count = match[2] ? parseInt(match[2], 10) : 1;
-        // Validate element symbol
         if (!elem_symbols.includes(element)) {
             throw new Error(`Invalid element symbol: ${element}`);
         }
         composition[element] = (composition[element] || 0) + count;
     }
     return composition;
-}
-// Expand parentheses in chemical formulas
-// Example: "Ca(OH)2" -> "CaO2H2"
-function expand_parentheses(formula) {
-    // Handle nested parentheses by expanding from innermost to outermost
-    while (formula.includes(`(`)) {
-        formula = formula.replace(/\(([^()]+)\)(\d*)/g, (_match, group, multiplier) => {
-            const mult = multiplier ? parseInt(multiplier, 10) : 1;
-            let expanded = ``;
-            // Parse elements within parentheses
-            const inner_pattern = /([A-Z][a-z]?)(\d*)/g;
-            let inner_match;
-            while ((inner_match = inner_pattern.exec(group)) !== null) {
-                const element = inner_match[1];
-                const count = inner_match[2] ? parseInt(inner_match[2], 10) : 1;
-                expanded += element + (count * mult > 1 ? count * mult : ``);
-            }
-            return expanded;
-        });
-    }
-    return formula;
-}
-// Normalize a composition by ensuring all values are positive numbers
-// Handles both element symbol and atomic number compositions
-export function normalize_composition(composition) {
-    // If it's an atomic number composition, convert to symbols first
+};
+// Normalize composition to positive numbers only
+export const normalize_composition = (composition) => {
     if (is_atomic_number_composition(composition)) {
-        const atomic_comp = composition;
-        const symbol_comp = convert_atomic_numbers_to_symbols(atomic_comp);
-        return normalize_composition(symbol_comp);
+        return normalize_composition(atomic_num_to_symbols(composition));
     }
     const normalized = {};
     for (const [element, amount] of Object.entries(composition)) {
@@ -108,178 +82,109 @@ export function normalize_composition(composition) {
         }
     }
     return normalized;
-}
-// Convert composition to percentages by weight or by count
-export function composition_to_percentages(composition, by_weight = false) {
+};
+// Convert composition to percentages
+export const composition_to_percentages = (composition, by_weight = false) => {
     if (by_weight) {
-        // Calculate weight-based percentages using atomic masses
-        let total_weight = 0;
-        const element_weights = {};
-        // Calculate weight for each element
-        for (const [element, amount] of Object.entries(composition)) {
-            if (typeof amount === `number` && amount > 0) {
-                const atomic_mass = atomic_weights.get(element);
-                if (atomic_mass === undefined)
-                    throw new Error(`Unknown element: ${element}`);
-                const weight = amount * atomic_mass;
-                element_weights[element] = weight;
-                total_weight += weight;
-            }
-        }
+        const element_weights = Object.fromEntries(Object.entries(composition)
+            .filter(([, amount]) => amount > 0)
+            .map(([element, amount]) => {
+            const atomic_mass = atomic_weights.get(element);
+            if (!atomic_mass)
+                throw new Error(`Unknown element: ${element}`);
+            return [element, amount * atomic_mass];
+        }));
+        const total_weight = Object.values(element_weights).reduce((sum, weight) => sum + weight, 0);
         if (total_weight === 0)
             return {};
-        // Convert to percentages
-        const percentages = {};
-        for (const [element, weight] of Object.entries(element_weights)) {
-            percentages[element] = (weight / total_weight) * 100;
-        }
-        return percentages;
+        return Object.fromEntries(Object.entries(element_weights).map(([element, weight]) => [
+            element,
+            (weight / total_weight) * 100,
+        ]));
     }
-    const total = get_total_atoms(composition);
+    const total = Object.values(composition).reduce((sum, count) => sum + (count ?? 0), 0);
     if (total === 0)
         return {};
-    const percentages = {};
-    for (const [element, amount] of Object.entries(composition)) {
-        if (typeof amount === `number`) {
-            percentages[element] = (amount / total) * 100;
-        }
-    }
-    return percentages;
-}
-// Get the total number of atoms in a composition
+    return Object.fromEntries(Object.entries(composition).map(([element, amount]) => [
+        element,
+        ((amount ?? 0) / total) * 100,
+    ]));
+};
+// Get total number of atoms
 export const get_total_atoms = (composition) => Object.values(composition).reduce((sum, count) => sum + (count ?? 0), 0);
-// Convert composition input (string, symbol object, or atomic number object) to normalized composition object
-export function parse_composition(input) {
+// Parse composition from various input types
+export const parse_composition = (input) => {
     if (typeof input === `string`) {
-        // First try to parse as JSON (for composition objects like {"Fe": 70, "Cr": 18})
         if (input.trim().startsWith(`{`) && input.trim().endsWith(`}`)) {
             try {
-                const parsed_json = JSON.parse(input);
-                return normalize_composition(parsed_json);
+                return normalize_composition(JSON.parse(input));
             }
             catch {
-                // If JSON parsing fails, fall through to formula parsing
+                // Fall through to formula parsing
             }
         }
-        // If not JSON or JSON parsing failed, treat as chemical formula
         return normalize_composition(parse_formula(input));
     }
-    else
-        return normalize_composition(input);
-}
-// Format a composition object into a chemical formula string
-// @param composition - Composition object like {Fe: 2, O: 3}
-// @param sort_fn - Function to sort element symbols
-// @param plain_text - If true, output plain text without HTML tags
-// @param delim - Delimiter between elements (default: space)
-// @returns Formatted chemical formula with or without subscripts
-export function format_composition_formula(composition, sort_fn, plain_text = false, delim = ` `) {
-    const formula = [];
-    const symbols = Object.keys(composition);
-    for (const el of sort_fn(symbols)) {
-        const amount = composition[el];
-        if (amount && amount > 0) {
-            if (amount === 1)
-                formula.push(el);
-            else
-                formula.push(plain_text ? `${el}${amount}` : `${el}<sub>${amount}</sub>`);
-        }
-    }
-    return formula.join(delim);
-}
-// Versatile function to create an alphabetical formula from any input type
-// @param input - String formula, composition object, or structure
-// @param plain_text - If true, output plain text without HTML tags
-// @param delim - Delimiter between elements (default: space)
-// @returns Alphabetically sorted chemical formula
-export function get_alphabetical_formula(input, plain_text = false, delim = ` `) {
-    if (typeof input === `string`) {
-        // If it's already a string, parse it and reformat alphabetically
-        try {
-            const composition = parse_composition(input);
-            return format_composition_formula(composition, (symbols) => symbols.sort(), plain_text, delim);
-        }
-        catch {
-            // If parsing fails, return the original string
-            return input;
-        }
-    }
-    else if (`sites` in input || `lattice` in input) {
-        // It's a structure object - need to extract composition
-        try {
-            const composition = structure_to_composition(input);
-            return format_composition_formula(composition, (symbols) => symbols.sort(), plain_text, delim);
-        }
-        catch {
-            return `Unknown`;
-        }
-    }
-    else { // It's a composition object
-        return format_composition_formula(input, (symbols) => symbols.sort(), plain_text, delim);
-    }
-}
-// Versatile function to create an electronegativity-sorted formula from any input type
-// @param input - String formula, composition object, or structure
-// @param plain_text - If true, output plain text without HTML tags
-// @param delim - Delimiter between elements (default: space)
-// @returns Electronegativity-sorted chemical formula
-export function get_electro_neg_formula(input, plain_text = false, delim = ` `) {
-    const sort_by_electronegativity = (symbols) => {
-        return symbols.sort((el1, el2) => {
-            const elec_neg1 = element_electronegativity_map.get(el1) ?? 0;
-            const elec_neg2 = element_electronegativity_map.get(el2) ?? 0;
-            // Sort by electronegativity (ascending), then alphabetically for ties
-            if (elec_neg1 !== elec_neg2)
-                return elec_neg1 - elec_neg2;
-            return el1.localeCompare(el2);
-        });
-    };
-    if (typeof input === `string`) {
-        // If it's already a string, parse it and reformat by electronegativity
-        try {
-            const composition = parse_composition(input);
-            return format_composition_formula(composition, sort_by_electronegativity, plain_text, delim);
-        }
-        catch {
-            return input; // If parsing fails, return the original string
-        }
-    }
-    else if (`sites` in input || `lattice` in input) {
-        try { // It's a structure object - need to extract composition
-            const composition = structure_to_composition(input);
-            return format_composition_formula(composition, sort_by_electronegativity, plain_text, delim);
-        }
-        catch {
-            return `Unknown`;
-        }
-    }
-    else { // It's a composition object
-        return format_composition_formula(input, sort_by_electronegativity, plain_text, delim);
-    }
-}
-// Extract composition from a structure object
-// @param structure - Structure object with sites property
-// @returns Composition object
-function structure_to_composition(structure) {
-    const composition = {};
+    return normalize_composition(input);
+};
+// Extract composition from structure object
+const structure_to_composition = (structure) => {
     if (!structure.sites || !Array.isArray(structure.sites)) {
         throw new Error(`Invalid structure object`);
     }
+    const composition = {};
     for (const site of structure.sites) {
         if (site.species && Array.isArray(site.species)) {
             for (const species of site.species) {
                 const element = species.element;
                 const occu = species.occu || 1;
-                if (composition[element] === undefined) {
-                    composition[element] = occu;
-                }
-                else {
-                    const current = composition[element];
-                    if (current !== undefined)
-                        composition[element] = current + occu;
-                }
+                composition[element] = (composition[element] || 0) + occu;
             }
         }
     }
     return composition;
-}
+};
+// Format composition into chemical formula string
+export const format_composition_formula = (composition, sort_fn, plain_text = false, delim = ` `, amount_format = `.3~s`) => {
+    const symbols = Object.keys(composition);
+    return sort_fn(symbols)
+        .filter((el) => composition[el] && composition[el] > 0)
+        .map((el) => {
+        const amount = composition[el];
+        if (amount === 1)
+            return el;
+        const formatted_amount = format_num(Number(amount), amount_format);
+        return plain_text
+            ? `${el}${formatted_amount}`
+            : `${el}<sub>${formatted_amount}</sub>`;
+    })
+        .join(delim);
+};
+// Generic formula formatter with error handling
+const format_formula_generic = (input, sort_fn, plain_text = false, delim = ` `, amount_format = `.3~s`) => {
+    try {
+        let composition;
+        if (typeof input === `string`)
+            composition = parse_composition(input);
+        else if (`sites` in input || `lattice` in input) {
+            composition = structure_to_composition(input);
+        }
+        else
+            composition = input;
+        return format_composition_formula(composition, sort_fn, plain_text, delim, amount_format);
+    }
+    catch {
+        return typeof input === `string` ? input : `Unknown`;
+    }
+};
+// Create alphabetical formula
+export const get_alphabetical_formula = (input, plain_text = false, delim = ` `, amount_format = `.3~s`) => format_formula_generic(input, (symbols) => symbols.sort(), plain_text, delim, amount_format);
+// Create electronegativity-sorted formula
+export const get_electro_neg_formula = (input, plain_text = false, delim = ` `, amount_format = `.3~s`) => {
+    const sort_by_electronegativity = (symbols) => symbols.sort((el1, el2) => {
+        const elec_neg1 = element_electronegativity_map.get(el1) ?? 0;
+        const elec_neg2 = element_electronegativity_map.get(el2) ?? 0;
+        return elec_neg1 !== elec_neg2 ? elec_neg1 - elec_neg2 : el1.localeCompare(el2);
+    });
+    return format_formula_generic(input, sort_by_electronegativity, plain_text, delim, amount_format);
+};

package/dist/element/ElementTile.svelte.d.ts

@@ -20,6 +20,6 @@ interface Props {
     split_layout?: SplitLayout;
     [key: string]: unknown;
 }
-declare const ElementTile: import("svelte").Component<Props, {}, "text_color" | "node">;
+declare const ElementTile: import("svelte").Component<Props, {}, "node" | "text_color">;
 type ElementTile = ReturnType<typeof ElementTile>;
 export default ElementTile;