matterviz 0.4.2 → 0.4.3

package/dist/chempot-diagram/color.js

@@ -1,12 +1,24 @@
 import { get_d3_interpolator } from '../colors';
+import { extract_formula_elements } from '../composition/parse';
+import { group } from 'd3-array';
 import { scaleSequential } from 'd3-scale';
+import { best_form_energy_for_formula as best_form_energy, formula_key_from_composition, } from './compute';
+// Categorical palette for arity mode (element count)
+export const ARITY_COLORS = [`#3498db`, `#2ecc71`, `#e67e22`, `#9b59b6`];
+// Exhaustively typed over the numeric color modes so adding a new mode
+// fails compilation here instead of rendering an undefined colorbar title
+const COLOR_MODE_LABELS = {
+    energy: `Energy per atom (eV)`,
+    formation_energy: `Formation energy (eV/atom)`,
+    entries: `Entry count`,
+};
 // Resolve D3 interpolator with optional reverse for chempot color scales.
 function get_chempot_interpolator(name, reverse) {
     const raw = get_d3_interpolator(name);
     return reverse ? (frac) => raw(1 - frac) : raw;
 }
 // Build sequential color scale from values and D3 interpolator name.
-export function make_chempot_color_scale(values, interpolator_name, reverse) {
+function make_chempot_color_scale(values, interpolator_name, reverse) {
     const finite_values = values.filter(Number.isFinite);
     if (finite_values.length === 0)
         return null;
@@ -30,3 +42,60 @@ export function get_chempot_color_bar_config(color_scale, reverse) {
         color_scale_domain: [0, 1],
     };
 }
+// Per-formula domain colors plus color-bar range for the active color mode.
+// Shared by ChemPotDiagram2D and ChemPotDiagram3D.
+export function get_domain_color_data(opts) {
+    const { formulas, color_mode, entries, el_refs, energy_stats } = opts;
+    const colors = new Map();
+    if (color_mode === `none`)
+        return { colors, color_range: null };
+    if (color_mode === `arity`) {
+        for (const formula of formulas) {
+            const n_elements = extract_formula_elements(formula).length;
+            const color_idx = Math.min(n_elements, ARITY_COLORS.length) - 1;
+            colors.set(formula, ARITY_COLORS[Math.max(0, color_idx)]);
+        }
+        return { colors, color_range: null };
+    }
+    const entries_by_formula = color_mode === `formation_energy`
+        ? group(entries, (entry) => formula_key_from_composition(entry.composition))
+        : new Map();
+    const get_value = (formula) => {
+        if (color_mode === `energy`)
+            return energy_stats.get(formula)?.min_energy_per_atom ?? null;
+        if (color_mode === `formation_energy`) {
+            return best_form_energy(entries_by_formula.get(formula) ?? [], formula, el_refs) ?? null;
+        }
+        return energy_stats.get(formula)?.matching_entry_count ?? 0;
+    };
+    const value_by_formula = new Map();
+    for (const formula of formulas) {
+        const value = get_value(formula);
+        if (value == null || !Number.isFinite(value))
+            continue;
+        value_by_formula.set(formula, value);
+    }
+    const values = [...value_by_formula.values()];
+    const scale = make_chempot_color_scale(values, opts.color_scale, opts.reverse_color_scale);
+    for (const formula of formulas) {
+        const value = value_by_formula.get(formula);
+        colors.set(formula, value != null && scale ? scale(value) : `#999`);
+    }
+    if (values.length === 0)
+        return { colors, color_range: null };
+    let [min_val, max_val] = [values[0], values[0]];
+    for (const value of values) {
+        if (value < min_val)
+            min_val = value;
+        if (value > max_val)
+            max_val = value;
+    }
+    return {
+        colors,
+        color_range: {
+            min: min_val,
+            max: Math.max(max_val, min_val + 1e-6),
+            label: COLOR_MODE_LABELS[color_mode],
+        },
+    };
+}

package/dist/chempot-diagram/compute.d.ts

@@ -8,6 +8,12 @@ export declare function get_min_entries_and_el_refs(entries: PhaseData[]): {
     el_refs: Record<string, PhaseData>;
 };
 export declare function best_form_energy_for_formula(entries: PhaseData[], formula: string, el_refs: Record<string, PhaseData>): number | undefined;
+export interface FormulaEnergyStats {
+    matching_entry_count: number;
+    min_energy_per_atom: number | null;
+    max_energy_per_atom: number | null;
+}
+export declare function get_energy_stats_by_formula(entries: PhaseData[]): Map<string, FormulaEnergyStats>;
 export declare const renormalize_entries: (entries: PhaseData[], el_refs: Record<string, PhaseData>, elements: string[]) => PhaseData[];
 export declare function build_hyperplanes(min_entries: PhaseData[], el_refs: Record<string, PhaseData>, elements: string[]): {
     hyperplanes: number[][];
@@ -44,5 +50,6 @@ export interface VisibleDomainLabel {
 }
 export declare function get_visible_domain_labels(face_positions: ArrayLike<number>, face_domain_map: string[], label_font_size_by_formula: ReadonlyMap<string, number>, pinned_labels?: VisibleDomainLabel[]): VisibleDomainLabel[];
 export declare function get_ternary_combinations(elements: string[]): string[][];
+export declare function entry_fingerprint(entry: PhaseData): string;
 export declare function make_nd_cache_key(entries: PhaseData[], formal_chempots: boolean, default_min_limit: number, limits: ChemPotDiagramConfig[`limits`]): string;
 export declare function compute_chempot_diagram(entries: PhaseData[], config?: ChemPotDiagramConfig): ChemPotDiagramData;

package/dist/chempot-diagram/compute.js

@@ -34,16 +34,28 @@ const get_reduced_formula = (composition) => {
         .map(([elem, amt]) => [elem, Math.round(amt * factor)]));
 };
 // === Entry Helpers ===
-// Get energy per atom for a PhaseData entry
+// Energy per atom; NaN for invalid/non-finite so UI can skip without throwing.
 export function get_energy_per_atom(entry) {
-    if (typeof entry.energy_per_atom === `number`)
-        return entry.energy_per_atom;
-    const atoms = count_atoms_in_composition(entry.composition);
-    if (atoms <= 0) {
-        throw new Error(`Invalid composition with non-positive atom count: ${JSON.stringify(entry.composition)}`);
+    if (typeof entry.energy_per_atom === `number`) {
+        return Number.isFinite(entry.energy_per_atom) ? entry.energy_per_atom : Number.NaN;
     }
+    const atoms = count_atoms_in_composition(entry.composition);
+    if (atoms <= 0 || !Number.isFinite(entry.energy))
+        return Number.NaN;
     return entry.energy / atoms;
 }
+// Same-formula EPA total order (keep aligned with make_nd_cache_key / entry_fingerprint).
+function prefer_min_entry(candidate, candidate_epa, existing, existing_epa) {
+    if (candidate_epa !== existing_epa)
+        return candidate_epa < existing_epa;
+    if (Boolean(candidate.exclude_from_hull) !== Boolean(existing.exclude_from_hull)) {
+        return !candidate.exclude_from_hull;
+    }
+    if ((candidate.is_stable === true) !== (existing.is_stable === true)) {
+        return candidate.is_stable === true;
+    }
+    return (candidate.e_above_hull ?? Infinity) < (existing.e_above_hull ?? Infinity);
+}
 // Cache for reduced formula strings -- avoids recomputing get_reduced_formula
 // in hot loops. Key is object identity (WeakMap), value is the formula string.
 const formula_cache = new WeakMap();
@@ -69,8 +81,10 @@ export function get_min_entries_and_el_refs(entries) {
     for (const entry of entries) {
         const key = formula_key_from_composition(entry.composition);
         const epa = get_energy_per_atom(entry);
+        if (!Number.isFinite(epa))
+            continue;
         const existing = by_formula.get(key);
-        if (!existing || epa < existing.epa) {
+        if (!existing || prefer_min_entry(entry, epa, existing.entry, existing.epa)) {
             by_formula.set(key, { entry, epa });
         }
     }
@@ -89,14 +103,20 @@ export function get_min_entries_and_el_refs(entries) {
 function compute_form_energy_per_atom(entry, el_refs) {
     const atom_count = count_atoms_in_composition(entry.composition);
     const energy_per_atom = get_energy_per_atom(entry);
+    if (!(atom_count > 0) || !Number.isFinite(energy_per_atom))
+        return Number.NaN;
     let ref_energy = 0;
     for (const [element, amount] of Object.entries(entry.composition)) {
         if (amount <= 0)
             continue;
         const fraction = amount / atom_count;
         const ref_entry = el_refs[element];
-        if (ref_entry)
-            ref_energy += fraction * get_energy_per_atom(ref_entry);
+        if (ref_entry) {
+            const ref_epa = get_energy_per_atom(ref_entry);
+            if (!Number.isFinite(ref_epa))
+                return Number.NaN;
+            ref_energy += fraction * ref_epa;
+        }
     }
     return energy_per_atom - ref_energy;
 }
@@ -107,23 +127,57 @@ export function best_form_energy_for_formula(entries, formula, el_refs) {
         if (formula_key_from_composition(entry.composition) !== formula)
             continue;
         const e_form = entry.e_form_per_atom ?? compute_form_energy_per_atom(entry, el_refs);
+        if (!Number.isFinite(e_form))
+            continue;
         if (best_value === undefined || e_form < best_value)
             best_value = e_form;
     }
     return best_value;
 }
+// Aggregate per-formula entry count and min/max energy per atom (used for
+// region coloring and hover tooltips in the 2D/3D diagram components).
+export function get_energy_stats_by_formula(entries) {
+    const stats = new Map();
+    for (const entry of entries) {
+        const energy_per_atom = get_energy_per_atom(entry);
+        if (!Number.isFinite(energy_per_atom))
+            continue;
+        const formula_key = formula_key_from_composition(entry.composition);
+        const existing = stats.get(formula_key);
+        if (existing) {
+            existing.matching_entry_count += 1;
+            existing.min_energy_per_atom = Math.min(existing.min_energy_per_atom ?? energy_per_atom, energy_per_atom);
+            existing.max_energy_per_atom = Math.max(existing.max_energy_per_atom ?? energy_per_atom, energy_per_atom);
+        }
+        else {
+            stats.set(formula_key, {
+                matching_entry_count: 1,
+                min_energy_per_atom: energy_per_atom,
+                max_energy_per_atom: energy_per_atom,
+            });
+        }
+    }
+    return stats;
+}
 // Renormalize entry energies to be relative to elemental references (formal chemical potentials).
 // For each entry, subtracts sum(x_i * E_ref_i) from its energy per atom.
 export const renormalize_entries = (entries, el_refs, elements) => entries.map((entry) => {
     const atoms = count_atoms_in_composition(entry.composition);
+    const base_epa = get_energy_per_atom(entry);
+    if (!(atoms > 0) || !Number.isFinite(base_epa))
+        return entry;
     let renorm_energy = 0;
     for (const el of elements) {
-        const frac = atoms > 0 ? (entry.composition[el] ?? 0) / atoms : 0;
+        const frac = (entry.composition[el] ?? 0) / atoms;
         const ref = el_refs[el];
-        if (ref)
-            renorm_energy += frac * get_energy_per_atom(ref);
+        if (!ref)
+            continue;
+        const ref_epa = get_energy_per_atom(ref);
+        if (!Number.isFinite(ref_epa))
+            return entry;
+        renorm_energy += frac * ref_epa;
     }
-    const new_energy_per_atom = get_energy_per_atom(entry) - renorm_energy;
+    const new_energy_per_atom = base_epa - renorm_energy;
     return {
         ...entry,
         energy: new_energy_per_atom * atoms,
@@ -137,7 +191,10 @@ export function build_hyperplanes(min_entries, el_refs, elements) {
     const n_elems = elements.length;
     const element_ref_energies = elements.map((element) => {
         const ref_entry = el_refs[element];
-        return ref_entry ? get_energy_per_atom(ref_entry) : 0;
+        if (!ref_entry)
+            return 0;
+        const epa = get_energy_per_atom(ref_entry);
+        return Number.isFinite(epa) ? epa : 0;
     });
     const always_include = new Set(Object.values(el_refs));
     const tol = 1e-6; // PhaseDiagram.formation_energy_tol
@@ -148,6 +205,8 @@ export function build_hyperplanes(min_entries, el_refs, elements) {
         const atom_count = count_atoms_in_composition(entry.composition);
         const composition = entry.composition;
         const energy_per_atom = get_energy_per_atom(entry);
+        if (!(atom_count > 0) || !Number.isFinite(energy_per_atom))
+            continue;
         const row = Array(n_elems + 1).fill(0);
         let ref_energy = 0;
         for (let elem_idx = 0; elem_idx < n_elems; elem_idx++) {
@@ -670,19 +729,19 @@ export function get_ternary_combinations(elements) {
     return combos;
 }
 let nd_cache = null;
-// Content-based fingerprint for N-D result caching. Uses sorted formula keys
-// so deserialized Web Worker copies match and different compositions never collide.
-export function make_nd_cache_key(entries, formal_chempots, default_min_limit, limits) {
-    const keyed = entries
-        .map((entry) => [
+// Fingerprint for N-D / async-compute cache keys (computed EPA; NaN → null).
+export function entry_fingerprint(entry) {
+    const epa = get_energy_per_atom(entry);
+    return JSON.stringify([
         formula_key_from_composition(entry.composition),
-        entry.energy,
-        entry.is_stable ?? ``,
-        entry.e_above_hull ?? ``,
-        entry.exclude_from_hull ?? ``,
-    ].join(`:`))
-        .sort();
-    return `${keyed.join(`,`)}|${formal_chempots}|${default_min_limit}|${JSON.stringify(limits ?? {})}`;
+        Number.isFinite(epa) ? epa : null,
+        entry.is_stable ?? null,
+        entry.e_above_hull ?? null,
+        entry.exclude_from_hull ?? null,
+    ]);
+}
+export function make_nd_cache_key(entries, formal_chempots, default_min_limit, limits) {
+    return `${entries.map(entry_fingerprint).sort().join(`,`)}|${formal_chempots}|${default_min_limit}|${JSON.stringify(limits ?? {})}`;
 }
 // === Main Pipeline ===
 // Compute the full chemical potential diagram from entries and config.

package/dist/chempot-diagram/export.js

@@ -1,6 +1,7 @@
 // Export helpers for chemical potential diagrams (shared between 2D and 3D views).
 import { dpi_to_scale } from '../io/export';
 import { download } from '../io/fetch';
+import { escape_html as xml_escape } from '../utils';
 import * as THREE from 'three';
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 export const get_json_string = (payload) => JSON.stringify(payload, null, 2);
@@ -77,12 +78,6 @@ export function export_png_file(wrapper, basename, png_dpi) {
         download(blob, `${basename}.png`, `image/png`);
     }, `image/png`);
 }
-const xml_escape = (text) => text
-    .replaceAll(`&`, `&`)
-    .replaceAll(`<`, `&lt;`)
-    .replaceAll(`>`, `&gt;`)
-    .replaceAll(`"`, `&quot;`)
-    .replaceAll(`'`, `&#39;`);
 // SVG snapshot: rasterized canvas as embedded image + overlay labels as real text nodes
 export function export_svg_file(wrapper, basename, view_settings) {
     const gl_canvas = get_gl_canvas(wrapper);

package/dist/chempot-diagram/temperature.js

@@ -1,21 +1,20 @@
 import { analyze_temperature_data, filter_entries_at_temperature, } from '../convex-hull/helpers';
 import { CHEMPOT_DEFAULTS } from './types';
 export const get_projection_source_entries = (entries, temp_filtered_entries) => (temp_filtered_entries.length > 0 ? temp_filtered_entries : entries);
-const resolve_temp_filter_options = (config, props) => ({
-    interpolate: config.interpolate_temperature ??
-        props.interpolate_temperature ??
-        CHEMPOT_DEFAULTS.interpolate_temperature,
-    max_interpolation_gap: config.max_interpolation_gap ??
-        props.max_interpolation_gap ??
-        CHEMPOT_DEFAULTS.max_interpolation_gap,
-});
 export function get_temp_filter_payload(entries, temperature, config, props) {
     const { has_temp_data, available_temperatures } = analyze_temperature_data(entries);
     if (!has_temp_data || temperature === undefined) {
         return { has_temp_data, available_temperatures, temp_filtered_entries: entries };
     }
-    const filter_options = resolve_temp_filter_options(config, props);
-    const temp_filtered_entries = filter_entries_at_temperature(entries, temperature, filter_options);
+    // Option resolution order: config beats props beats defaults
+    const temp_filtered_entries = filter_entries_at_temperature(entries, temperature, {
+        interpolate: config.interpolate_temperature ??
+            props.interpolate_temperature ??
+            CHEMPOT_DEFAULTS.interpolate_temperature,
+        max_interpolation_gap: config.max_interpolation_gap ??
+            props.max_interpolation_gap ??
+            CHEMPOT_DEFAULTS.max_interpolation_gap,
+    });
     return { has_temp_data, available_temperatures, temp_filtered_entries };
 }
 export function get_valid_temperature(temperature, has_temp_data, available_temperatures) {

package/dist/composition/BarChart.svelte

@@ -210,15 +210,13 @@
         class:hovered={hovered_element === segment.element}
         onmouseenter={() => interactive && (hovered_element = segment.element)}
         onmouseleave={() => interactive && (hovered_element = null)}
-        {...interactive
-          ? {
-              role: `button`,
-              tabindex: 0,
-              'aria-label': `${segment.element}: ${segment.amount} ${
-                segment.amount === 1 ? `atom` : `atoms`
-              } (${format_num(segment.fraction, `.1~%`)})`,
-            }
-          : {}}
+        {...interactive && {
+          role: `button`,
+          tabindex: 0,
+          'aria-label': `${segment.element}: ${segment.amount} ${
+            segment.amount === 1 ? `atom` : `atoms`
+          } (${format_num(segment.fraction, `.1~%`)})`,
+        }}
       >
         <title>
           {segment.element}: {segment.amount}

package/dist/composition/Composition.svelte

@@ -60,14 +60,9 @@
     { value: `bar`, icon: `Graph`, label: `Bar Chart` },
   ] as const
 
-  const color_scheme_options = [
-    { value: `Vesta`, icon: `ColorPalette`, label: `Vesta` },
-    { value: `Jmol`, icon: `ColorPalette`, label: `Jmol` },
-    { value: `Alloy`, icon: `ColorPalette`, label: `Alloy` },
-    { value: `Pastel`, icon: `ColorPalette`, label: `Pastel` },
-    { value: `Muted`, icon: `ColorPalette`, label: `Muted` },
-    { value: `Dark Mode`, icon: `ColorPalette`, label: `Dark Mode` },
-  ] as const
+  const color_scheme_options = (
+    [`Vesta`, `Jmol`, `Alloy`, `Pastel`, `Muted`, `Dark Mode`] as const
+  ).map((value) => ({ value, icon: `ColorPalette`, label: value }))
 
   const export_options = [
     { value: `copy_formula`, icon: `Copy`, label: `Copy Formula` },

package/dist/composition/Formula.svelte

@@ -2,7 +2,7 @@
   import type { ColorSchemeName } from '../colors'
   import { ELEMENT_COLOR_SCHEMES, luminance } from '../colors'
   import type { ElementSymbol } from '../element'
-  import { element_data } from '../element'
+  import { element_by_symbol } from '../element'
   import ElementTile from '../element/ElementTile.svelte'
   import { format_num } from '../labels'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -65,7 +65,7 @@
   let tooltip_pos = $state({ x: 0, y: 0 })
 
   const hovered_elem_data = $derived(
-    hovered_element ? element_data.find((el) => el.symbol === hovered_element) : null,
+    hovered_element ? (element_by_symbol.get(hovered_element) ?? null) : null,
   )
 
   // Format formula as plain text for clipboard: "Li2 O" or "Fe(+3)2 O(-2)3"

package/dist/composition/FormulaFilter.svelte

@@ -61,32 +61,12 @@
     },
   ]
 
-  const SUBSCRIPT_TO_ASCII: Record<string, string> = {
-    [`\u2080`]: `0`,
-    [`\u2081`]: `1`,
-    [`\u2082`]: `2`,
-    [`\u2083`]: `3`,
-    [`\u2084`]: `4`,
-    [`\u2085`]: `5`,
-    [`\u2086`]: `6`,
-    [`\u2087`]: `7`,
-    [`\u2088`]: `8`,
-    [`\u2089`]: `9`,
-  }
-
-  const SUPERSCRIPT_TO_ASCII: Record<string, string> = {
-    [`\u2070`]: `0`,
-    [`\u00B9`]: `1`,
-    [`\u00B2`]: `2`,
-    [`\u00B3`]: `3`,
-    [`\u2074`]: `4`,
-    [`\u2075`]: `5`,
-    [`\u2076`]: `6`,
-    [`\u2077`]: `7`,
-    [`\u2078`]: `8`,
-    [`\u2079`]: `9`,
-    [`\u207A`]: `+`,
-    [`\u207B`]: `-`,
+  // Unicode subscript/superscript digits and signs -> ASCII equivalents
+  const UNICODE_TO_ASCII: Record<string, string> = {
+    ...Object.fromEntries([...`₀₁₂₃₄₅₆₇₈₉`].map((char, digit) => [char, `${digit}`])),
+    ...Object.fromEntries([...`⁰¹²³⁴⁵⁶⁷⁸⁹`].map((char, digit) => [char, `${digit}`])),
+    [`⁺`]: `+`,
+    [`⁻`]: `-`,
   }
 
   let {
@@ -152,51 +132,31 @@
   const has_storage = typeof localStorage !== `undefined`
   const history_pins_key = $derived(`${history_key}-pins`)
 
-  function load_history(): string[] {
+  function load_entries(key: string): string[] {
     if (max_history <= 0 || !has_storage) return []
     try {
-      const raw = localStorage.getItem(history_key)
-      if (!raw) return []
-      const parsed: unknown = JSON.parse(raw)
+      const parsed: unknown = JSON.parse(localStorage.getItem(key) ?? `null`)
       if (!Array.isArray(parsed)) return []
-      return parsed
-        .filter((item): item is string => typeof item === `string`)
-        .slice(0, max_history)
+      return parsed.filter((item): item is string => typeof item === `string`)
     } catch {
       return []
     }
   }
 
-  function save_history(entries: string[]): void {
+  function save_entries(key: string, entries: string[]): void {
     if (max_history <= 0 || !has_storage) return
     try {
-      localStorage.setItem(history_key, JSON.stringify(entries.slice(0, max_history)))
+      localStorage.setItem(key, JSON.stringify(entries))
     } catch {
       // localStorage may be unavailable (e.g. private browsing)
     }
   }
 
-  function load_pinned(): string[] {
-    if (max_history <= 0 || !has_storage) return []
-    try {
-      const raw = localStorage.getItem(history_pins_key)
-      if (!raw) return []
-      const parsed: unknown = JSON.parse(raw)
-      if (!Array.isArray(parsed)) return []
-      return parsed.filter((item): item is string => typeof item === `string`)
-    } catch {
-      return []
-    }
-  }
-
-  function save_pinned(entries: string[]): void {
-    if (max_history <= 0 || !has_storage) return
-    try {
-      localStorage.setItem(history_pins_key, JSON.stringify(entries))
-    } catch {
-      // localStorage may be unavailable
-    }
-  }
+  const load_history = () => load_entries(history_key).slice(0, max_history)
+  const load_pinned = () => load_entries(history_pins_key)
+  const save_history = (entries: string[]) =>
+    save_entries(history_key, entries.slice(0, max_history))
+  const save_pinned = (entries: string[]) => save_entries(history_pins_key, entries)
 
   let history = $state<string[]>(load_history())
   let pinned_history = $state<string[]>(load_pinned())
@@ -325,11 +285,8 @@
 
   function normalize_unicode_formula(input: string): string {
     let normalized = input
-    for (const [subscript, ascii] of Object.entries(SUBSCRIPT_TO_ASCII)) {
-      normalized = normalized.replaceAll(subscript, ascii)
-    }
-    for (const [superscript, ascii] of Object.entries(SUPERSCRIPT_TO_ASCII)) {
-      normalized = normalized.replaceAll(superscript, ascii)
+    for (const [unicode_char, ascii] of Object.entries(UNICODE_TO_ASCII)) {
+      normalized = normalized.replaceAll(unicode_char, ascii)
     }
     return (
       normalized
@@ -410,13 +367,10 @@
     return `${prefix}${token.element}${suffix}`
   }
 
-  function token_chip_label(
+  // Chip labels show an explicit + prefix for include tokens; serialized values omit it
+  const token_chip_label = (
     token: Pick<FormulaFilterToken, `operator` | `element` | `constraint`>,
-  ): string {
-    const prefix = token.operator === `exclude` ? `-` : `+`
-    const suffix = token.constraint ? `:${token.constraint}` : ``
-    return `${prefix}${token.element}${suffix}`
-  }
+  ): string => (token.operator === `include` ? `+` : ``) + serialize_token(token)
 
   function parse_token(raw_token: string): FormulaFilterToken {
     const token = raw_token.trim()
@@ -571,15 +525,8 @@
     // Otherwise parse as formula (already returns sorted by default)
     // For formulas with wildcards, we can't parse them normally
     if (has_wildcards(trimmed)) {
-      // Use shared utility and extract unique elements
       const tokens = parse_formula_with_wildcards(trimmed)
-      const unique_elements: string[] = []
-      for (const token of tokens) {
-        if (token.element !== null && !unique_elements.includes(token.element)) {
-          unique_elements.push(token.element)
-        }
-      }
-      const elements = unique_elements.sort()
+      const elements = [...new Set(tokens.flatMap((token) => token.element ?? []))].sort()
       const wildcards = tokens.filter((token) => token.element === null).map(() => `*`)
       return [...elements, ...wildcards]
     }
@@ -1124,24 +1071,7 @@
     font-size: 0.88em;
     color: inherit;
   }
-  .history-remove {
-    min-width: 24px;
-    min-height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 3pt;
-    border-radius: 50%;
-    opacity: 0.3;
-    color: inherit;
-    &:hover {
-      opacity: 0.8;
-      background: rgba(128, 128, 128, 0.15);
-    }
-  }
+  .history-remove,
   .history-pin {
     display: flex;
     align-items: center;
@@ -1158,6 +1088,10 @@
       background: rgba(128, 128, 128, 0.15);
     }
   }
+  .history-remove {
+    min-width: 24px;
+    min-height: 24px;
+  }
   .examples-wrapper {
     position: relative;
   }

package/dist/composition/format.js

@@ -3,17 +3,15 @@ import { is_elem_symbol } from '../element';
 import { ELEMENT_ELECTRONEGATIVITY_MAP, parse_composition } from './parse';
 // Extract composition from structure object
 const structure_to_composition = (structure) => {
-    if (!structure.sites || !Array.isArray(structure.sites)) {
-        throw new Error(`Invalid structure object`);
+    if (!Array.isArray(structure.sites)) {
+        throw new TypeError(`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;
-                composition[element] = (composition[element] ?? 0) + occu;
-            }
+        if (!Array.isArray(site.species))
+            continue;
+        for (const species of site.species) {
+            composition[species.element] = (composition[species.element] ?? 0) + (species.occu ?? 1);
         }
     }
     return composition;