matterviz 0.4.0 → 0.4.1

package/dist/chempot-diagram/ChemPotDiagram3D.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { PhaseData } from '../convex-hull/types';
+import { type FullscreenToggleProp } from '../layout';
 import type { ChemPotDiagramConfig, ChemPotHoverInfo } from './types';
 type $$ComponentProps = {
     entries: PhaseData[];
@@ -10,7 +11,12 @@ type $$ComponentProps = {
     max_interpolation_gap?: number;
     hover_info?: ChemPotHoverInfo | null;
     render_local_tooltip?: boolean;
+    wrapper?: HTMLDivElement;
+    fullscreen?: boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
+    controls_open?: boolean;
+    export_pane_open?: boolean;
 };
-declare const ChemPotDiagram3D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "height" | "width" | "hover_info">;
+declare const ChemPotDiagram3D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "temperature" | "fullscreen" | "wrapper" | "controls_open" | "export_pane_open" | "hover_info">;
 type ChemPotDiagram3D = ReturnType<typeof ChemPotDiagram3D>;
 export default ChemPotDiagram3D;

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

@@ -1,10 +1,7 @@
 import { type D3InterpolateName } from '../colors';
-/** Resolve D3 interpolator with optional reverse for chempot color scales. */
-export declare function get_chempot_interpolator(name: D3InterpolateName, reverse: boolean): (t: number) => string;
-/** Build sequential color scale from values and D3 interpolator name. */
+import type { Vec2 } from '../math';
 export declare function make_chempot_color_scale(values: number[], interpolator_name: D3InterpolateName, reverse: boolean): ((val: number) => string) | null;
-/** Resolve color bar props for chempot diagrams (interpolator + domain). */
 export declare function get_chempot_color_bar_config(color_scale: D3InterpolateName, reverse: boolean): {
-    color_scale_fn: (t: number) => string;
-    color_scale_domain: [number, number];
+    color_scale_fn: (frac: number) => string;
+    color_scale_domain: Vec2;
 };

package/dist/chempot-diagram/color.js

@@ -1,11 +1,11 @@
 import { get_d3_interpolator } from '../colors';
 import { scaleSequential } from 'd3-scale';
-/** Resolve D3 interpolator with optional reverse for chempot color scales. */
-export function get_chempot_interpolator(name, reverse) {
+// Resolve D3 interpolator with optional reverse for chempot color scales.
+function get_chempot_interpolator(name, reverse) {
     const raw = get_d3_interpolator(name);
-    return reverse ? (t) => raw(1 - t) : raw;
+    return reverse ? (frac) => raw(1 - frac) : raw;
 }
-/** Build sequential color scale from values and D3 interpolator name. */
+// Build sequential color scale from values and D3 interpolator name.
 export function make_chempot_color_scale(values, interpolator_name, reverse) {
     const finite_values = values.filter(Number.isFinite);
     if (finite_values.length === 0)
@@ -23,7 +23,7 @@ export function make_chempot_color_scale(values, interpolator_name, reverse) {
         max_value,
     ]);
 }
-/** Resolve color bar props for chempot diagrams (interpolator + domain). */
+// Resolve color bar props for chempot diagrams (interpolator + domain).
 export function get_chempot_color_bar_config(color_scale, reverse) {
     return {
         color_scale_fn: get_chempot_interpolator(color_scale, reverse),

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

@@ -1,4 +1,5 @@
 import type { PhaseData } from '../convex-hull/types';
+import type { Vec2 } from '../math';
 import { type ChemPotDiagramConfig, type ChemPotDiagramData } from './types';
 export declare function get_energy_per_atom(entry: PhaseData): number;
 export declare function formula_key_from_composition(composition: Record<string, number>): string;
@@ -6,14 +7,13 @@ export declare function get_min_entries_and_el_refs(entries: PhaseData[]): {
     min_entries: PhaseData[];
     el_refs: Record<string, PhaseData>;
 };
-export declare function compute_form_energy_per_atom(entry: PhaseData, el_refs: Record<string, PhaseData>): number;
 export declare function best_form_energy_for_formula(entries: PhaseData[], formula: string, el_refs: Record<string, PhaseData>): number | undefined;
 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[][];
     hyperplane_entries: PhaseData[];
 };
-export declare function build_border_hyperplanes(lims: [number, number][]): number[][];
+export declare function build_border_hyperplanes(lims: Vec2[]): number[][];
 export declare function compute_domains(hyperplanes: number[][], border_hyperplanes: number[][], hyperplane_entries: PhaseData[], dim: number): Record<string, number[][]>;
 export declare function apply_element_padding(domains: Record<string, number[][]>, elem_indices: number[], padding: number, default_min_limit: number): number[];
 export declare function pad_domain_points(pts: number[][], elem_indices: number[], new_lims: number[], default_min_limit: number, padding: number): number[][];
@@ -26,7 +26,7 @@ export declare function simple_pca(data: number[][], k?: number): {
     scores: number[][];
     eigenvectors: number[][];
 };
-export declare function orthonormal_2d(line_pts: number[][]): [number, number];
+export declare function orthonormal_2d(line_pts: number[][]): Vec2;
 export declare function dedup_points(pts: number[][], tol?: number): {
     unique: number[][];
     orig_indices: number[];

package/dist/chempot-diagram/compute.js

@@ -84,7 +84,9 @@ export function get_min_entries_and_el_refs(entries) {
     return { min_entries, el_refs };
 }
 // Compute formation energy per atom against elemental references.
-export function compute_form_energy_per_atom(entry, el_refs) {
+// NOTE: diverges from convex-hull's compute_e_form_per_atom (which returns null on
+// missing refs); kept module-private so the divergent variant can't leak into public API.
+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);
     let ref_energy = 0;

package/dist/chempot-diagram/controls-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ChemPotDiagramConfig } from './types';
+export declare function create_chempot_overrides<Key extends keyof ChemPotDiagramConfig>(config: () => ChemPotDiagramConfig, keys: readonly Key[], custom_defaults?: {
+    [P in Key]?: NonNullable<ChemPotDiagramConfig[P]>;
+}): {
+    resolve: <P extends Key>(key: P) => NonNullable<ChemPotDiagramConfig[P]>;
+    set: <P extends Key>(key: P, value: NonNullable<ChemPotDiagramConfig[P]>) => void;
+    reset: () => void;
+};
+export declare const CHEMPOT_COLOR_MODE_OPTIONS: readonly [readonly ["none", "None"], readonly ["energy", "Energy/atom"], readonly ["formation_energy", "Formation energy"], readonly ["arity", "Element count"], readonly ["entries", "Entry count"]];
+export declare const CHEMPOT_COLOR_SCALE_OPTIONS: readonly [readonly ["interpolateViridis", "Viridis"], readonly ["interpolatePlasma", "Plasma"], readonly ["interpolateInferno", "Inferno"], readonly ["interpolateMagma", "Magma"], readonly ["interpolateCividis", "Cividis"], readonly ["interpolateTurbo", "Turbo"], readonly ["interpolateRdYlBu", "RdYlBu"], readonly ["interpolateSpectral", "Spectral"]];

package/dist/chempot-diagram/controls-state.svelte.js

@@ -0,0 +1,42 @@
+// Override state + shared <option> lists for the ChemPotDiagram2D/3D control panes
+import { CHEMPOT_DEFAULTS } from './types';
+// Per-key user overrides with `override ?? config ?? default` resolution; `reset()`
+// clears all overrides (the panes' "Reset defaults" buttons). Defaults come from
+// CHEMPOT_DEFAULTS unless overridden via custom_defaults; keys without either throw upfront.
+export function create_chempot_overrides(config, keys, custom_defaults = {}) {
+    const defaults = Object.fromEntries(keys.map((key) => {
+        const fallback = custom_defaults[key] ?? CHEMPOT_DEFAULTS[key];
+        if (fallback === undefined) {
+            throw new Error(`create_chempot_overrides: key '${key}' is missing from both custom_defaults and CHEMPOT_DEFAULTS`);
+        }
+        return [key, fallback];
+    }));
+    let overrides = $state({});
+    return {
+        resolve: (key) => (overrides[key] ?? config()[key] ?? defaults[key]),
+        set: (key, value) => {
+            overrides[key] = value;
+        },
+        reset: () => {
+            overrides = {};
+        },
+    };
+}
+// [value, label] pairs for the color-mode and color-scale <select>s in both panes
+export const CHEMPOT_COLOR_MODE_OPTIONS = [
+    [`none`, `None`],
+    [`energy`, `Energy/atom`],
+    [`formation_energy`, `Formation energy`],
+    [`arity`, `Element count`],
+    [`entries`, `Entry count`],
+];
+export const CHEMPOT_COLOR_SCALE_OPTIONS = [
+    [`interpolateViridis`, `Viridis`],
+    [`interpolatePlasma`, `Plasma`],
+    [`interpolateInferno`, `Inferno`],
+    [`interpolateMagma`, `Magma`],
+    [`interpolateCividis`, `Cividis`],
+    [`interpolateTurbo`, `Turbo`],
+    [`interpolateRdYlBu`, `RdYlBu`],
+    [`interpolateSpectral`, `Spectral`],
+];

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

@@ -0,0 +1,47 @@
+import * as THREE from 'three';
+export declare const get_json_string: (payload: unknown) => string;
+export declare const export_json_file: (payload: unknown, basename: string) => void;
+interface XYZ {
+    x: number;
+    y: number;
+    z: number;
+}
+export declare function get_view_settings(opts: {
+    elements: string[];
+    camera_projection: string;
+    auto_rotate: number;
+    color_mode: string;
+    color_scale: string;
+    reverse_color_scale: boolean;
+    camera_position?: XYZ | null;
+    camera_target?: XYZ | null;
+}): Record<string, unknown>;
+export declare const export_view_json_file: (view_settings: Record<string, unknown>, basename: string) => void;
+export interface OverlayTextItem {
+    x: number;
+    y: number;
+    text: string;
+    font: string;
+    font_size: string;
+    font_family: string;
+    font_weight: string;
+    color: string;
+}
+export declare function get_overlay_text_items(wrapper: HTMLElement, canvas_rect: DOMRect): OverlayTextItem[];
+export declare function export_png_file(wrapper: HTMLElement | undefined, basename: string, png_dpi: number): void;
+export declare function export_svg_file(wrapper: HTMLElement | undefined, basename: string, view_settings: Record<string, unknown>): void;
+export interface ChemPotGlbParts {
+    hull_geometry?: THREE.BufferGeometry | null;
+    hull_opacity?: number;
+    edge_geometry: THREE.BufferGeometry;
+    formula_meshes?: {
+        geometry: THREE.BufferGeometry;
+        color: string;
+    }[];
+    formula_edges?: {
+        geometry: THREE.BufferGeometry;
+        color: string;
+    }[];
+}
+export declare function export_glb_file(parts: ChemPotGlbParts, basename: string): void;
+export {};

package/dist/chempot-diagram/export.js

@@ -0,0 +1,133 @@
+// 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 * as THREE from 'three';
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
+export const get_json_string = (payload) => JSON.stringify(payload, null, 2);
+const download_json = (payload, filename) => download(get_json_string(payload), filename, `application/json`);
+export const export_json_file = (payload, basename) => download_json(payload, `${basename}.json`);
+const xyz_tuple = (point) => point ? [point.x, point.y, point.z] : null;
+const get_gl_canvas = (wrapper) => {
+    const canvas = wrapper?.querySelector(`canvas`);
+    return canvas instanceof HTMLCanvasElement ? canvas : null;
+};
+// Serializable snapshot of the current 3D view (embedded in SVG/JSON exports)
+export function get_view_settings(opts) {
+    const { camera_position, camera_target, ...settings } = opts;
+    return {
+        ...settings,
+        camera_position: xyz_tuple(camera_position),
+        camera_target: xyz_tuple(camera_target),
+    };
+}
+export const export_view_json_file = (view_settings, basename) => download_json(view_settings, `${basename}-view.json`);
+// Collect HTML overlay text (tick/axis/domain labels) positioned relative to the canvas
+export function get_overlay_text_items(wrapper, canvas_rect) {
+    const text_items = [];
+    for (const element of wrapper.querySelectorAll(`.tick-label, .axis-label, .domain-label`)) {
+        const html_element = element;
+        const style = getComputedStyle(html_element);
+        if (style.display === `none` || style.visibility === `hidden`)
+            continue;
+        const element_rect = html_element.getBoundingClientRect();
+        text_items.push({
+            x: element_rect.left + element_rect.width / 2 - canvas_rect.left,
+            y: element_rect.top + element_rect.height / 2 - canvas_rect.top,
+            text: html_element.textContent ?? ``,
+            font: style.font || `${style.fontSize} ${style.fontFamily}`,
+            font_size: style.fontSize || `11px`,
+            font_family: style.fontFamily || `sans-serif`,
+            font_weight: style.fontWeight || `400`,
+            color: style.color || `#333`,
+        });
+    }
+    return text_items;
+}
+// Composite the WebGL canvas + HTML overlay labels into a single PNG download
+export function export_png_file(wrapper, basename, png_dpi) {
+    const gl_canvas = get_gl_canvas(wrapper);
+    if (!gl_canvas || !wrapper)
+        return;
+    const rect = gl_canvas.getBoundingClientRect();
+    // A degenerate rect means the canvas is hidden/unrendered: nothing to capture
+    if (!(rect.width > 0) || !(rect.height > 0)) {
+        console.error(`Cannot export PNG: canvas has zero size (width=${rect.width}, height=${rect.height})`);
+        return;
+    }
+    const scale = dpi_to_scale(png_dpi);
+    const out = document.createElement(`canvas`);
+    // Floor at 1px so tiny rect x min-DPI rounding can't yield an invalid 0x0 canvas
+    out.width = Math.max(1, Math.round(rect.width * scale));
+    out.height = Math.max(1, Math.round(rect.height * scale));
+    const ctx = out.getContext(`2d`);
+    if (!ctx)
+        return;
+    ctx.scale(scale, scale);
+    ctx.drawImage(gl_canvas, 0, 0, rect.width, rect.height);
+    for (const text_item of get_overlay_text_items(wrapper, rect)) {
+        ctx.font = text_item.font;
+        ctx.fillStyle = text_item.color;
+        ctx.textAlign = `center`;
+        ctx.textBaseline = `middle`;
+        ctx.fillText(text_item.text, text_item.x, text_item.y);
+    }
+    out.toBlob((blob) => {
+        if (!blob)
+            return;
+        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);
+    if (!gl_canvas || !wrapper)
+        return;
+    const canvas_rect = gl_canvas.getBoundingClientRect();
+    if (canvas_rect.width === 0 || canvas_rect.height === 0)
+        return;
+    const png_data_url = gl_canvas.toDataURL(`image/png`);
+    const text_nodes = get_overlay_text_items(wrapper, canvas_rect).map((text_item) => `<text x="${text_item.x.toFixed(2)}" y="${text_item.y.toFixed(2)}" text-anchor="middle" dominant-baseline="central" fill="${xml_escape(text_item.color)}" font-size="${xml_escape(text_item.font_size)}" font-family="${xml_escape(text_item.font_family)}" font-weight="${xml_escape(text_item.font_weight)}">${xml_escape(text_item.text)}</text>`);
+    const metadata = xml_escape(JSON.stringify(view_settings));
+    const svg = [
+        `<?xml version="1.0" encoding="UTF-8"?>`,
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas_rect.width}" height="${canvas_rect.height}" viewBox="0 0 ${canvas_rect.width} ${canvas_rect.height}">`,
+        `<metadata>${metadata}</metadata>`,
+        `<image href="${png_data_url}" x="0" y="0" width="${canvas_rect.width}" height="${canvas_rect.height}" />`,
+        ...text_nodes,
+        `</svg>`,
+    ].join(``);
+    download(svg, `${basename}.svg`, `image/svg+xml`);
+}
+// Rebuild the scene from its geometries and export as binary GLTF
+export function export_glb_file(parts, basename) {
+    const { hull_geometry, hull_opacity = 0.25, edge_geometry, formula_meshes = [], formula_edges = [], } = parts;
+    const gltf_exporter = new GLTFExporter();
+    const export_root = new THREE.Group();
+    const add_mesh = (geometry, material) => {
+        const opts = { transparent: true, side: THREE.DoubleSide, ...material };
+        export_root.add(new THREE.Mesh(geometry.clone(), new THREE.MeshBasicMaterial(opts)));
+    };
+    const add_lines = (geometry, color) => {
+        export_root.add(new THREE.LineSegments(geometry.clone(), new THREE.LineBasicMaterial({ color })));
+    };
+    if (hull_geometry)
+        add_mesh(hull_geometry, { vertexColors: true, opacity: hull_opacity });
+    add_lines(edge_geometry, 0x333333);
+    for (const { geometry, color } of formula_meshes) {
+        add_mesh(geometry, { color: new THREE.Color(color), opacity: 0.13 });
+    }
+    for (const { geometry, color } of formula_edges) {
+        add_lines(geometry, new THREE.Color(color));
+    }
+    gltf_exporter.parse(export_root, (result) => {
+        if (!(result instanceof ArrayBuffer))
+            return;
+        download(result, `${basename}.glb`, `model/gltf-binary`);
+    }, (err) => console.error(`Failed to export GLB:`, err), { binary: true, onlyVisible: false });
+}

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

@@ -3,4 +3,5 @@ export { default as ChemPotDiagram2D } from './ChemPotDiagram2D.svelte';
 export { default as ChemPotDiagram3D } from './ChemPotDiagram3D.svelte';
 export { compute_chempot_async } from './async-compute.svelte';
 export { compute_chempot_diagram, get_ternary_combinations } from './compute';
+export * from './export';
 export * from './types';

package/dist/chempot-diagram/index.js

@@ -3,4 +3,5 @@ export { default as ChemPotDiagram2D } from './ChemPotDiagram2D.svelte';
 export { default as ChemPotDiagram3D } from './ChemPotDiagram3D.svelte';
 export { compute_chempot_async } from './async-compute.svelte';
 export { compute_chempot_diagram, get_ternary_combinations } from './compute';
+export * from './export';
 export * from './types';

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

@@ -1,13 +1,3 @@
-export declare function get_pointer_coords(raw_event: unknown): {
-    clientX: number;
-    clientY: number;
-} | null;
-/** Convert pointer event to container-relative coords for tooltip placement. */
-export declare function get_hover_pointer(raw_event: unknown, container_rect: DOMRect | null | undefined): {
-    x: number;
-    y: number;
-} | null;
-/** Add hover pointer to an info object for tooltip placement. */
 export declare function with_hover_pointer<T extends {
     pointer?: {
         x: number;

package/dist/chempot-diagram/pointer.js

@@ -2,7 +2,7 @@
 // Handles DOM events and Threlte/Three.js event wrappers (nativeEvent, srcEvent).
 const is_pointer_like_event = (event_val) => (typeof PointerEvent !== `undefined` && event_val instanceof PointerEvent) ||
     (typeof MouseEvent !== `undefined` && event_val instanceof MouseEvent);
-export function get_pointer_coords(raw_event) {
+function get_pointer_coords(raw_event) {
     if (is_pointer_like_event(raw_event)) {
         return raw_event;
     }
@@ -22,8 +22,8 @@ export function get_pointer_coords(raw_event) {
     }
     return null;
 }
-/** Convert pointer event to container-relative coords for tooltip placement. */
-export function get_hover_pointer(raw_event, container_rect) {
+// Convert pointer event to container-relative coords for tooltip placement.
+function get_hover_pointer(raw_event, container_rect) {
     const pointer_event = get_pointer_coords(raw_event);
     if (!pointer_event)
         return null;
@@ -33,7 +33,7 @@ export function get_hover_pointer(raw_event, container_rect) {
     const y = pointer_event.clientY - offset_y + 4;
     return { x, y };
 }
-/** Add hover pointer to an info object for tooltip placement. */
+// Add hover pointer to an info object for tooltip placement.
 export function with_hover_pointer(info, raw_event, container_rect) {
     const pointer = get_hover_pointer(raw_event, container_rect);
     return { ...info, pointer: pointer ?? undefined };

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

@@ -1,7 +1,7 @@
 import type { D3InterpolateName } from '../colors';
 import type { PhaseData } from '../convex-hull/types';
-import type { Point2D } from '../math';
-export type ChemPotLimits = Partial<Record<string, [number, number]>>;
+import type { Point2D, Vec2 } from '../math';
+export type ChemPotLimits = Partial<Record<string, Vec2>>;
 export type ChemPotColorMode = `none` | `energy` | `formation_energy` | `arity` | `entries`;
 export type ChemPotProjectionMode = `single` | `grid`;
 export interface ChemPotDiagramConfig {
@@ -31,7 +31,7 @@ export interface ChemPotDiagramData {
     min_entries: PhaseData[];
     hyperplanes: number[][];
     hyperplane_entries: PhaseData[];
-    lims: [number, number][];
+    lims: Vec2[];
 }
 export interface ChemPotHoverInfoBase {
     formula: string;

package/dist/colors/index.js

@@ -79,8 +79,8 @@ export const PLOT_COLORS = [
 ];
 // calculate human-perceived brightness from RGB color
 export function luminance(clr) {
-    const { r, g, b } = rgb(clr);
-    return (0.299 * r + 0.587 * g + 0.114 * b) / 255; // https://stackoverflow.com/a/596243
+    const { r: red, g: green, b: blue } = rgb(clr);
+    return (0.299 * red + 0.587 * green + 0.114 * blue) / 255; // https://stackoverflow.com/a/596243
 }
 // get background color of passed DOM node, or recurse up the DOM tree if current node is transparent
 export function get_bg_color(elem, bg_color = null) {

package/dist/composition/FormulaFilter.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Icon from '../Icon.svelte'
   import { get_alphabetical_formula } from './format'
-  import { ELEM_SYMBOLS } from '../labels'
+  import { is_elem_symbol, type ElementSymbol } from '../element'
   import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { FormulaSearchMode } from './index'
@@ -356,8 +356,10 @@
     try {
       const tokens = parse_formula_with_wildcards(sanitized_input)
       const explicit = tokens
-        .filter((token) => token.element !== null)
-        .map((token) => ({ element: token.element as string, count: token.count }))
+        .filter((token): token is { element: ElementSymbol; count: number } =>
+          token.element !== null
+        )
+        .map((token) => ({ element: token.element, count: token.count }))
       const wildcard_tokens = tokens.filter((token) => token.element === null)
 
       // Merge explicit element counts before sorting.
@@ -425,8 +427,7 @@
     const [element_part, constraint] = without_operator.split(`:`)
     const element = element_part.trim()
     const is_wildcard = element === `*`
-    const is_valid_element = is_wildcard ||
-      ELEM_SYMBOLS.includes(element as (typeof ELEM_SYMBOLS)[number])
+    const is_valid_element = is_wildcard || is_elem_symbol(element)
     const normalized_constraint = constraint?.trim() || null
     const is_valid = is_valid_element && (normalized_constraint === null ||
       is_valid_constraint(normalized_constraint))

package/dist/composition/PieChart.svelte

@@ -75,12 +75,12 @@
 
         // Single element: full circle with no radial stroke line, label at center
         if (fraction === 1) {
-          const r = outer_radius
+          const radius = outer_radius
           const ir = inner_radius_adjusted
           // Two semicircular arcs to form a full circle (avoids SVG 360° arc bug)
-          const outer_arc = `M ${center} ${center - r} A ${r} ${r} 0 1 1 ${center} ${
-            center + r
-          } A ${r} ${r} 0 1 1 ${center} ${center - r} Z`
+          const outer_arc = `M ${center} ${center - radius} A ${radius} ${radius} 0 1 1 ${center} ${
+            center + radius
+          } A ${radius} ${radius} 0 1 1 ${center} ${center - radius} Z`
           const path = ir > 0
             ? `${outer_arc} M ${center} ${
               center - ir
@@ -101,7 +101,7 @@
             label_x: center,
             label_y: center,
             is_outside_slice: false,
-            font_scale: get_chart_font_scale(2.6, label_text, r * 2),
+            font_scale: get_chart_font_scale(2.6, label_text, radius * 2),
             text_color: pick_contrast_color({ bg_color: color }),
           }
         }

package/dist/composition/chem-sys.js

@@ -1,6 +1,7 @@
 // Build arity -> chemical-system hierarchy data for the Sunburst component
 // (counterpart to pymatviz's chem_sys_sunburst).
-import { is_valid_element, parse_formula } from './parse';
+import { is_elem_symbol } from '../element';
+import { parse_formula } from './parse';
 const ARITY_NAMES = [
     ``,
     `unary`,
@@ -29,7 +30,7 @@ export function chem_sys_sunburst_data(entries) {
         let elements;
         if (entry.includes(`-`)) {
             elements = entry.split(`-`).map((el) => el.trim());
-            if (!elements.every(is_valid_element))
+            if (!elements.every(is_elem_symbol))
                 return null;
         }
         else {

package/dist/composition/format.js

@@ -1,5 +1,6 @@
 import { format_num } from '../labels';
-import { ELEMENT_ELECTRONEGATIVITY_MAP, is_valid_element, parse_composition } from './parse';
+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)) {
@@ -20,7 +21,7 @@ const structure_to_composition = (structure) => {
 const is_structure_like = (input) => `sites` in input || `lattice` in input;
 // 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).filter(is_valid_element);
+    const symbols = Object.keys(composition).filter(is_elem_symbol);
     return sort_fn(symbols)
         .filter((el) => composition[el] && composition[el] > 0)
         .map((el) => {

package/dist/composition/parse.d.ts

@@ -6,7 +6,6 @@ export declare const ATOMIC_WEIGHTS: Map<"S" | "K" | "B" | "H" | "He" | "Li" | "
 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: 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>;
 export declare const parse_formula: (formula: string) => CompositionType;