matterviz 0.2.0 → 0.2.1

package/dist/EmptyState.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">let { message, children, ...rest } = $props();
+export {};
+</script>
+
+<div {...rest} class="empty-state {rest.class ?? ``}">
+  {#if children}
+    {@render children()}
+  {:else if message}
+    <span class="message">{message}</span>
+  {/if}
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-align: center;
+    box-sizing: border-box;
+  }
+  .empty-state :global(.status-message) {
+    --status-message-border: none; /* Remove inner border from StatusMessage */
+  }
+  .empty-state > :global(:is(p, h3, ul, strong)), .empty-state > .message {
+    max-width: var(--empty-state-max-width, 500px);
+  }
+  .empty-state :global(p), .empty-state > .message {
+    color: var(--text-color-muted);
+    margin: 0;
+  }
+  .empty-state :global(h3) {
+    margin: 0 0 0.5em;
+  }
+</style>

package/dist/EmptyState.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    message?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/FilePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { tooltip } from 'svelte-multiselect';
-let { files = [], active_files = [], show_category_filters = false, on_drag_start, on_drag_end, type_mapper, file_type_colors = {
+let { files = [], active_files = [], show_category_filters = false, on_drag_start, on_drag_end, on_click, type_mapper, file_type_colors = {
     cif: `rgba(100, 149, 237, 0.8)`,
     xyz: `rgba(50, 205, 50, 0.8)`,
     extxyz: `rgba(50, 205, 50, 0.8)`,
@@ -11,6 +11,7 @@ let { files = [], active_files = [], show_category_filters = false, on_drag_star
     md: `rgba(255, 215, 0, 0.8)`,
     yaml: `rgba(255, 0, 255, 0.8)`,
     xdatcar: `rgba(255, 215, 0, 0.8)`,
+    tdb: `rgba(0, 188, 212, 0.8)`, // Cyan for thermodynamic database files
 }, ...rest } = $props();
 let active_category_filter = $state(null);
 let active_type_filter = $state(null);
@@ -134,9 +135,18 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
       draggable="true"
       ondragstart={handle_drag_start(file)}
       ondragend={() => on_drag_end?.()}
+      onclick={(event) => on_click?.(file, event)}
+      onkeydown={(event) => {
+        if ([`Enter`, ` `].includes(event.key)) {
+          event.preventDefault()
+          on_click?.(file, event)
+        }
+      }}
       role="button"
       tabindex="0"
-      title="Drag this {base_type.toUpperCase()} file"
+      title={on_click
+      ? `Click to load or drag this ${base_type.toUpperCase()} file`
+      : `Drag this ${base_type.toUpperCase()} file`}
     >
       <div class="file-name">
         {file.category ? `${file.category_icon} ` : ``}{file.name}
@@ -157,8 +167,9 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
   .legend {
     width: 100%;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 0.8em;
+    gap: 2pt 5pt;
     font-size: 0.6em;
     opacity: 0.8;
     margin: 0 0 0.5em;

package/dist/FilePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FileInfo } from './';
+import type { FileInfo } from './io';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     files?: FileInfo[];
@@ -6,6 +6,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     show_category_filters?: boolean;
     on_drag_start?: (file: FileInfo, event: DragEvent) => void;
     on_drag_end?: () => void;
+    on_click?: (file: FileInfo, event: MouseEvent | KeyboardEvent) => void;
     type_mapper?: (file: FileInfo) => string;
     file_type_colors?: Record<string, string>;
 };

package/dist/api/mp.js

@@ -1,5 +1,5 @@
 import { fetch_zipped } from '../io/fetch';
-// TODO update to get MP details pages working again
+// Materials Project S3 bucket for pre-computed data (may be outdated)
 export const mp_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28`;
 // Fetch all material data in parallel
 export async function fetch_material_data(material_id, bucket = mp_bucket) {

package/dist/app.css

@@ -10,6 +10,7 @@
   /* Svelte MultiSelect */
   --sms-options-bg: var(--page-bg);
   --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
+  --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
   --border-radius: 3pt;
 }
 

package/dist/brillouin/BrillouinZone.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">import { Icon, Spinner, toggle_fullscreen } from '..';
+<script lang="ts">import { toggle_fullscreen } from '../layout';
+import EmptyState from '../EmptyState.svelte';
+import Spinner from '../feedback/Spinner.svelte';
+import Icon from '../Icon.svelte';
 import { decompress_file, handle_url_drop, load_from_url } from '../io';
 import { set_fullscreen_bg } from '../layout';
 import { DEFAULTS } from '../settings';
@@ -257,12 +260,10 @@ $effect(() => {
   {:else if structure}
     <p class="warn">Structure must have a lattice to compute Brillouin zone</p>
   {:else}
-    <div class="empty-state">
+    <EmptyState>
       <h3>Drop Structure File</h3>
-      <p>
-        Supports CIF, POSCAR, JSON, (ext)XYZ, (+ .gz)
-      </p>
-    </div>
+      <p>Supports CIF, POSCAR, JSON, (ext)XYZ, (+ .gz)</p>
+    </EmptyState>
   {/if}
 </div>
 
@@ -362,20 +363,4 @@ $effect(() => {
   .error-state button:hover {
     background: var(--error-color-hover, #ff5252);
   }
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    text-align: center;
-  }
-  .empty-state h3 {
-    margin: 0 0 0.5em;
-    font-size: 1.5em;
-  }
-  .empty-state p {
-    color: var(--text-color-muted);
-    margin: 0;
-  }
 </style>

package/dist/brillouin/BrillouinZone.svelte.d.ts

@@ -1,12 +1,12 @@
-import { Spinner } from '..';
+import Spinner from '../feedback/Spinner.svelte';
 import type { Vec3 } from '../math';
 import { type CameraProjection } from '../settings';
-import type { PymatgenStructure } from '../structure';
+import type { Crystal } from '../structure';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { BrillouinZoneData } from './types';
 type BZHandlerData = {
-    structure?: PymatgenStructure;
+    structure?: Crystal;
     bz_data?: BrillouinZoneData;
     bz_order?: number;
     filename?: string;
@@ -15,7 +15,7 @@ type BZHandlerData = {
     fullscreen?: boolean;
 };
 type $$ComponentProps = {
-    structure?: PymatgenStructure;
+    structure?: Crystal;
     bz_order?: number;
     bz_data?: BrillouinZoneData;
     controls_open?: boolean;
@@ -47,14 +47,14 @@ type $$ComponentProps = {
     structure_string?: string;
     k_path_points?: Vec3[];
     k_path_labels?: {
-        position: [number, number, number];
+        position: Vec3;
         label: string | null;
     }[];
-    hovered_k_point?: [number, number, number] | null;
+    hovered_k_point?: Vec3 | null;
     hovered_qpoint_index?: number | null;
     children?: Snippet<[
         {
-            structure?: PymatgenStructure;
+            structure?: Crystal;
             bz_data?: BrillouinZoneData;
         }
     ]>;
@@ -62,6 +62,6 @@ type $$ComponentProps = {
     on_error?: (data: BZHandlerData) => void;
     on_fullscreen_change?: (data: BZHandlerData) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "dragover" | "height" | "width" | "fullscreen" | "structure" | "camera_projection" | "info_pane_open" | "controls_open" | "wrapper" | "hovered" | "png_dpi" | "loading" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "hovered" | "controls_open" | "structure" | "camera_projection" | "info_pane_open" | "loading" | "error_msg" | "wrapper" | "png_dpi" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;

package/dist/brillouin/BrillouinZoneControls.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { DraggablePane, SettingsSection } from '..';
+<script lang="ts">import SettingsSection from '../layout/SettingsSection.svelte';
+import DraggablePane from '../overlays/DraggablePane.svelte';
 let { controls_open = $bindable(false), bz_order = $bindable(1), surface_color = $bindable(`#4488ff`), surface_opacity = $bindable(0.3), edge_color = $bindable(`#000000`), edge_width = $bindable(0.05), show_vectors = $bindable(true), camera_projection = $bindable(`perspective`), } = $props();
 </script>
 

package/dist/brillouin/BrillouinZoneControls.svelte.d.ts

@@ -9,6 +9,6 @@ type $$ComponentProps = {
     show_vectors?: boolean;
     camera_projection?: CameraProjection;
 };
-declare const BrillouinZoneControls: import("svelte").Component<$$ComponentProps, {}, "camera_projection" | "controls_open" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors">;
+declare const BrillouinZoneControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "camera_projection" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors">;
 type BrillouinZoneControls = ReturnType<typeof BrillouinZoneControls>;
 export default BrillouinZoneControls;

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { DraggablePane } from '..';
+<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
 import { export_canvas_as_png } from '../io/export';
 import { tooltip } from 'svelte-multiselect/attachments';
 let { export_pane_open = $bindable(false), bz_data, wrapper, scene, camera, filename = `brillouin-zone`, png_dpi = $bindable(150), ...rest } = $props();

package/dist/brillouin/BrillouinZoneExportPane.svelte.d.ts

@@ -10,6 +10,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     filename?: string;
     png_dpi?: number;
 };
-declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type BrillouinZoneExportPane = ReturnType<typeof BrillouinZoneExportPane>;
 export default BrillouinZoneExportPane;

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { DraggablePane } from '..';
+<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
 import { format_num } from '../labels';
 import { analyze_structure_symmetry } from '../symmetry';
 let { pane_open = $bindable(false), structure, bz_data, pane_props = {}, } = $props();

package/dist/brillouin/BrillouinZoneInfoPane.svelte.d.ts

@@ -1,10 +1,10 @@
-import { DraggablePane } from '..';
-import type { PymatgenStructure } from '../structure';
+import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { Crystal } from '../structure';
 import type { ComponentProps } from 'svelte';
 import type { BrillouinZoneData } from './types';
 type $$ComponentProps = {
     pane_open?: boolean;
-    structure?: PymatgenStructure;
+    structure?: Crystal;
     bz_data?: BrillouinZoneData;
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
 };

package/dist/brillouin/BrillouinZoneScene.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { AXIS_COLORS, NEG_AXIS_COLORS } from '..';
+<script lang="ts">import { AXIS_COLORS, NEG_AXIS_COLORS } from '../colors';
 import * as math from '../math';
 import { DEFAULTS } from '../settings';
-import { Arrow, Cylinder } from '../structure';
+import Arrow from '../structure/Arrow.svelte';
+import Cylinder from '../structure/Cylinder.svelte';
 import { T, useThrelte } from '@threlte/core';
 import * as extras from '@threlte/extras';
 import { BufferAttribute, BufferGeometry } from 'three';

package/dist/brillouin/compute.d.ts

@@ -1,4 +1,4 @@
-import type { Matrix3x3, Vec3 } from '..';
+import type { Matrix3x3, Vec3 } from '../math';
 import type { BrillouinZoneData, ConvexHullData } from './types';
 export declare function reciprocal_lattice(real_lattice: Matrix3x3): Matrix3x3;
 export declare function generate_bz_vertices(k_lattice: Matrix3x3, order?: 1 | 2 | 3, max_planes_by_order?: Record<1 | 2 | 3, number>): Vec3[];

package/dist/brillouin/types.d.ts

@@ -1,4 +1,5 @@
-import type { Matrix3x3, PymatgenStructure, Vec3 } from '..';
+import type { Matrix3x3, Vec3 } from '../math';
+import type { Crystal } from '../structure';
 export type BrillouinZoneData = {
     order: number;
     vertices: Vec3[];
@@ -8,7 +9,7 @@ export type BrillouinZoneData = {
     volume: number;
 };
 export type BrillouinZoneProps = {
-    structure: PymatgenStructure;
+    structure: Crystal;
     bz_order?: number;
     surface_color?: string;
     surface_opacity?: number;

package/dist/colors/index.d.ts

@@ -41,3 +41,5 @@ export declare const contrast_color: (options?: ContrastOptions) => (node: HTMLE
 export declare function get_page_background(fallback_dark?: string, fallback_light?: string): string;
 export declare function is_dark_mode(): boolean;
 export declare function watch_dark_mode(on_change: (dark: boolean) => void): () => void;
+export declare function css_color_to_hex(color: string | undefined, fallback: string): string;
+export declare function add_alpha(color: string, alpha: number): string;

package/dist/colors/index.js

@@ -129,7 +129,7 @@ export function is_dark_mode() {
         if (stored === `dark` || stored === `light`)
             return stored === `dark`;
     }
-    catch { /* localStorage may throw in private browsing */ }
+    catch { /* localStorage throws in private browsing mode */ }
     return globalThis.matchMedia?.(`(prefers-color-scheme: dark)`).matches ?? false;
 }
 // Watch for dark mode changes and call callback on each change. Returns cleanup function.
@@ -155,3 +155,43 @@ export function watch_dark_mode(on_change) {
         media_query?.removeEventListener(`change`, notify);
     };
 }
+// Convert a CSS color string to hex format for use with <input type="color">.
+// Returns fallback for CSS variables, transparent, invalid colors, or undefined.
+// Uses d3-color for robust parsing of named colors, rgb(), hsl(), etc.
+export function css_color_to_hex(color, fallback) {
+    if (!color || color.startsWith(`var(`))
+        return fallback;
+    if (color === `transparent`)
+        return `#ffffff`;
+    const parsed = rgb(color);
+    return Number.isNaN(parsed.r) ? fallback : parsed.formatHex();
+}
+// Add or modify the alpha channel of a color.
+// Supports hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb(), and rgba() formats.
+// Returns the color in rgba() format, or the original color if format is unsupported.
+export function add_alpha(color, alpha) {
+    // Clamp alpha to valid CSS range [0, 1]
+    const clamped_alpha = Math.max(0, Math.min(1, alpha));
+    // Handle hex colors (#rgb, #rgba, #rrggbb, #rrggbbaa)
+    if (color.startsWith(`#`)) {
+        const hex = color.slice(1);
+        // Guard against malformed hex (only 3, 4, 6, or 8 chars are valid)
+        if (![3, 4, 6, 8].includes(hex.length))
+            return color;
+        // Extract RGB, ignoring any existing alpha channel
+        const is_short = hex.length === 3 || hex.length === 4;
+        const r = parseInt(is_short ? hex[0] + hex[0] : hex.slice(0, 2), 16);
+        const g = parseInt(is_short ? hex[1] + hex[1] : hex.slice(2, 4), 16);
+        const b = parseInt(is_short ? hex[2] + hex[2] : hex.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${clamped_alpha})`;
+    }
+    // Handle rgb() colors
+    if (color.startsWith(`rgb(`)) {
+        return color.replace(`rgb(`, `rgba(`).replace(`)`, `, ${clamped_alpha})`);
+    }
+    // Handle rgba() - replace existing alpha (supports scientific notation like 1e-5)
+    if (color.startsWith(`rgba(`)) {
+        return color.replace(/,\s*[\d.eE\-+]+\)$/, `, ${clamped_alpha})`);
+    }
+    return color;
+}

package/dist/composition/BarChart.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { format_num } from '..';
-import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
+<script lang="ts">import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
+import { format_num } from '../labels';
 import { get_chart_font_scale } from './index';
 import { fractional_composition } from './parse';
 let { composition, size = 200, bar_height = 30, label_height = 20, gap = 2, min_segment_size_for_label = 15, thin_segment_threshold = 0.2, external_label_size_threshold = 5, outer_corners_only = true, show_labels = true, show_percentages = false, show_amounts = true, color_scheme = `Vesta`, segment_content, interactive = true, svg_node = $bindable(null), children, ...rest } = $props();

package/dist/composition/BarChart.svelte.d.ts

@@ -1,5 +1,6 @@
-import { type CompositionType, type ElementSymbol } from '..';
 import type { ColorSchemeName } from '../colors';
+import type { CompositionType } from './';
+import type { ElementSymbol } from '../element';
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 import { type ChartSegmentData } from './index';

package/dist/composition/BubbleChart.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { CompositionType, ElementSymbol } from '..';
 import type { ColorSchemeName } from '../colors';
+import type { CompositionType } from './';
+import type { ElementSymbol } from '../element';
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 import { type ChartSegmentData } from './index';

package/dist/composition/Composition.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { ContextMenu } from '..';
+<script lang="ts">import { ContextMenu } from '../overlays';
 import { export_svg_as_png, export_svg_as_svg } from '../io/export';
 import { get_electro_neg_formula } from './format';
 import { BarChart, BubbleChart, PieChart } from './index';

package/dist/composition/Composition.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { ColorSchemeName, CompositionType } from '..';
+import type { ColorSchemeName } from '../colors';
+import type { CompositionType } from './';
 import type { SVGAttributes } from 'svelte/elements';
 type CompositionChartMode = `pie` | `bubble` | `bar`;
 type $$ComponentProps = SVGAttributes<SVGSVGElement> & {

package/dist/composition/Formula.svelte

@@ -3,7 +3,7 @@ import { element_data } from '../element';
 import ElementTile from '../element/ElementTile.svelte';
 import { format_num } from '../labels';
 import { format_oxi_state, sort_by_electronegativity, sort_by_hill_notation, } from './format';
-import { oxi_composition_to_elements, parse_formula_with_oxidation, } from './parse';
+import { oxi_composition_to_elements, parse_formula_with_oxidation } from './parse';
 let { formula, color_scheme = `Vesta`, ordering = `original`, as = `span`, amount_format = `.3~s`, tooltip_side = `bottom`, tooltip_offset = 5, on_click, ...rest } = $props();
 const parsed_elements = $derived.by(() => {
     try {

package/dist/composition/Formula.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { ColorSchemeName, ElementSymbol } from '..';
+import type { ColorSchemeName } from '../colors';
+import type { ElementSymbol } from '../element';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type OxiComposition } from './parse';
+import type { OxiComposition } from './parse';
 type FormulaOrdering = `electronegativity` | `alphabetical` | `original` | `hill`;
 type TooltipSide = `top` | `bottom` | `left` | `right`;
 type $$ComponentProps = HTMLAttributes<HTMLElement> & {

package/dist/composition/FormulaFilter.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">import Icon from '../Icon.svelte';
 import { tooltip } from 'svelte-multiselect';
-import { extract_formula_elements, normalize_element_symbols } from './parse';
+import { extract_formula_elements, has_wildcards, normalize_element_symbols, parse_formula_with_wildcards, } from './parse';
 const SEARCH_EXAMPLES = [
     {
         label: `Contains elements`,
-        description: `Materials containing at least these elements (may have others)`,
-        examples: [`Li,Fe`, `Si,O`, `Mn,Co,Ni`],
+        description: `Materials containing at least these elements (may have others). Use * for any element.`,
+        examples: [`Li,Fe`, `Si,O`, `Li,*,*`],
     },
     {
         label: `Chemical system`,
-        description: `Materials with only these elements (no others)`,
-        examples: [`Li-Fe-O`, `Si-O`, `Na-Cl`],
+        description: `Materials with only these elements (no others). Use * for any element.`,
+        examples: [`Li-Fe-O`, `Li-Fe-*-*`, `*-*-O`],
     },
     {
         label: `Exact formula`,
-        description: `Materials with this exact stoichiometry`,
-        examples: [`LiFePO4`, `SiO2`, `NaCl`],
+        description: `Materials with this exact stoichiometry. Use * for any element.`,
+        examples: [`LiFePO4`, `LiFe*2*`, `*2O3`],
     },
 ];
 let { value = $bindable(``), search_mode = $bindable(`elements`), input_element = $bindable(null), show_clear_button = true, show_examples = true, disabled = false, onchange, onclear, ...rest } = $props();
@@ -83,7 +83,7 @@ function infer_mode(input) {
 // Cycle through modes: elements → chemsys → exact → elements
 const MODE_CYCLE = [`elements`, `chemsys`, `exact`];
 // Extract elements from any input format (formula, comma-separated, dash-separated)
-// Always returns elements in alphabetical order for consistency
+// Always returns elements in alphabetical order for consistency, preserving wildcards (*)
 function extract_elements(input) {
     const trimmed = input.trim();
     if (!trimmed)
@@ -91,10 +91,23 @@ function extract_elements(input) {
     // If contains commas or dashes, split by those and sort alphabetically
     if (trimmed.includes(`,`) || trimmed.includes(`-`)) {
         const parts = trimmed.split(/[-,]/).map((str) => str.trim()).filter(Boolean);
-        // Filter valid elements and sort alphabetically
-        return normalize_element_symbols(parts.join(`,`)).sort();
+        // Separate wildcards from regular elements
+        const wildcards = parts.filter((part) => part === `*`);
+        const regular_parts = parts.filter((part) => part !== `*`);
+        // Filter valid elements and sort alphabetically, then append wildcards
+        const valid_elements = normalize_element_symbols(regular_parts.join(`,`)).sort();
+        return [...valid_elements, ...wildcards];
     }
     // 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 elements = [
+            ...new Set(tokens.filter((token) => token.element !== null).map((token) => token.element)),
+        ].sort();
+        const wildcards = tokens.filter((token) => token.element === null).map(() => `*`);
+        return [...elements, ...wildcards];
+    }
     try {
         return extract_formula_elements(trimmed, { sorted: true });
     }
@@ -137,9 +150,18 @@ function sync_value() {
     const mode = infer_mode(trimmed);
     if (mode === `exact`)
         return set_value(trimmed);
-    // Normalize element symbols for elements/chemsys modes
+    // Normalize element symbols for elements/chemsys modes, preserving wildcards
     const separator = mode === `chemsys` ? `-` : `,`;
-    const normalized = normalize_element_symbols(trimmed.replace(/[-,]/g, `,`));
+    const parts = trimmed.replace(/[-,]/g, `,`).split(`,`).map((str) => str.trim())
+        .filter(Boolean);
+    // Separate wildcards from regular elements
+    const wildcards = parts.filter((part) => part === `*`);
+    const regular_parts = parts.filter((part) => part !== `*`);
+    // Normalize regular elements, sort alphabetically, and append wildcards
+    const normalized = [
+        ...normalize_element_symbols(regular_parts.join(`,`)).sort(),
+        ...wildcards,
+    ];
     set_value(normalized.join(separator));
 }
 function onkeydown(event) {
@@ -197,10 +219,10 @@ $effect(() => {
     items?.[focused_item_idx]?.focus({ preventScroll: true });
 });
 let placeholder = $derived(search_mode === `chemsys`
-    ? `Li-Fe-O`
+    ? `Li-Fe-O or Li-*-*`
     : search_mode === `exact`
-        ? `LiFePO4`
-        : `Li,Fe,O`);
+        ? `LiFePO4 or LiFe*2*`
+        : `Li,Fe,O or Li,*,*`);
 const MODE_LABELS = {
     elements: `contains elements`,
     chemsys: `chemical system`,

package/dist/composition/PieChart.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { format_num } from '..';
+<script lang="ts">import { format_num } from '../labels';
 import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
 import { get_chart_font_scale } from './index';
 import { count_atoms_in_composition, fractional_composition } from './parse';

package/dist/composition/PieChart.svelte.d.ts

@@ -1,4 +1,5 @@
-import { type CompositionType, type ElementSymbol } from '..';
+import type { CompositionType } from './';
+import type { ElementSymbol } from '../element';
 import type { ColorSchemeName } from '../colors';
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';

package/dist/composition/format.d.ts

@@ -1,4 +1,5 @@
-import type { AnyStructure, ElementSymbol } from '..';
+import type { ElementSymbol } from '../element';
+import type { AnyStructure } from '../structure';
 import type { CompositionType } from './';
 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;

package/dist/composition/index.d.ts

@@ -1,4 +1,4 @@
-import type { ElementSymbol } from '..';
+import type { ElementSymbol } from '../element';
 export { default as BarChart } from './BarChart.svelte';
 export { default as BubbleChart } from './BubbleChart.svelte';
 export { default as Composition } from './Composition.svelte';

package/dist/composition/parse.d.ts

@@ -1,11 +1,11 @@
-import type { ElementSymbol } from '..';
+import type { ElementSymbol } from '../element';
 import type { CompositionType } from './';
 export declare const ATOMIC_NUMBER_TO_SYMBOL: Record<number, ElementSymbol>;
 export declare const SYMBOL_TO_ATOMIC_NUMBER: Partial<CompositionType>;
 export declare const ATOMIC_WEIGHTS: Map<"S" | "K" | "B" | "H" | "He" | "Li" | "Be" | "C" | "N" | "O" | "F" | "Ne" | "Na" | "Mg" | "Al" | "Si" | "P" | "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<"S" | "K" | "B" | "H" | "He" | "Li" | "Be" | "C" | "N" | "O" | "F" | "Ne" | "Na" | "Mg" | "Al" | "Si" | "P" | "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 ELEM_NAME_TO_SYMBOL: Record<string, ElementSymbol>;
-export declare const ELEM_SYMBOL_TO_NAME: Record<ElementSymbol, string>;
+export declare const ELEM_SYMBOL_TO_NAME: Partial<Record<ElementSymbol, string>>;
 export declare const is_valid_element: (sym: string) => sym is ElementSymbol;
 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>;
@@ -35,3 +35,21 @@ export declare function extract_formula_elements(formula: string, { unique, sort
 }): ElementSymbol[];
 export declare function generate_chem_sys_subspaces(input: string | CompositionType | ElementSymbol[]): string[];
 export declare const normalize_element_symbols: <T extends string>(csv: string, all_symbols?: T[]) => T[];
+export type WildcardFormulaToken = {
+    element: ElementSymbol | null;
+    count: number;
+};
+export type ChemsysWithWildcards = {
+    elements: ElementSymbol[];
+    wildcard_count: number;
+};
+export declare const has_wildcards: (input: string) => boolean;
+export declare function parse_chemsys_with_wildcards(input: string): ChemsysWithWildcards;
+export declare const ELEM_WILDCARD: {
+    readonly placeholder: "Zz";
+    readonly to_placeholder: RegExp;
+    readonly from_placeholder: RegExp;
+};
+export declare function parse_formula_with_wildcards(formula: string): WildcardFormulaToken[];
+export declare function matches_chemsys_wildcard(formula: string, explicit_elements: string[], wildcard_count: number): boolean;
+export declare function matches_formula_wildcard(formula: string, pattern: WildcardFormulaToken[]): boolean;