matterviz 0.1.0

package/dist/composition/PieChart.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">import { format_num } from '..';
+import { element_color_schemes } from '../colors';
+import { choose_bw_for_contrast } from '../labels';
+import { composition_to_percentages, get_total_atoms } from './parse';
+// Constants for pie chart calculations
+const VERY_THIN_SLICE_THRESHOLD = 20; // degrees
+const MEDIUM_SLICE_THRESHOLD = 90; // degrees - increased to move more slices toward outer edge
+const MIN_FONT_SCALE = 0.4;
+const MAX_FONT_SCALE = 1.0;
+const MAX_ANGLE_FOR_FULL_SCALE = 120; // degrees
+let { composition, size = 200, stroke_width = 0.5, inner_radius = 0, show_labels = true, show_percentages = false, show_amounts = true, color_scheme = `Vesta`, center_content, segment_content, style = ``, class: class_name = ``, interactive = true, ...rest } = $props();
+let element_colors = $derived(element_color_schemes[color_scheme] || element_color_schemes.Vesta);
+let percentages = $derived(composition_to_percentages(composition));
+let total_atoms = $derived(get_total_atoms(composition));
+let outer_radius = $derived(size / 2 - stroke_width);
+let inner_radius_adjusted = $derived(Math.min(inner_radius, outer_radius - 10));
+let center = $derived(size / 2);
+// Function to determine text color based on background
+function get_text_color(background_color, is_inside_slice) {
+    if (is_inside_slice) {
+        // For text inside slices, use the background color of the slice
+        return choose_bw_for_contrast(null, background_color);
+    }
+    else {
+        // For text outside slices, use default text color (black/dark)
+        return `var(--text-color, #333)`;
+    }
+}
+// Calculate pie segments
+let segments = $derived.by(() => {
+    let current_angle = -90; // Start from top
+    return Object.entries(composition)
+        .filter(([_, amount]) => amount && amount > 0)
+        .map(([element, amount]) => {
+        const percentage = percentages[element] || 0;
+        const angle_span = (percentage / 100) * 360;
+        const start_angle = current_angle;
+        const end_angle = current_angle + angle_span;
+        current_angle = end_angle;
+        // Convert to radians for calculations
+        const start_rad = (start_angle * Math.PI) / 180;
+        const end_rad = (end_angle * Math.PI) / 180;
+        const mid_rad = (((start_angle + end_angle) / 2) * Math.PI) / 180;
+        // Arc coordinates for outer radius
+        const x1_outer = center + outer_radius * Math.cos(start_rad);
+        const y1_outer = center + outer_radius * Math.sin(start_rad);
+        const x2_outer = center + outer_radius * Math.cos(end_rad);
+        const y2_outer = center + outer_radius * Math.sin(end_rad);
+        // Arc coordinates for inner radius
+        const x1_inner = center + inner_radius_adjusted * Math.cos(start_rad);
+        const y1_inner = center + inner_radius_adjusted * Math.sin(start_rad);
+        const x2_inner = center + inner_radius_adjusted * Math.cos(end_rad);
+        const y2_inner = center + inner_radius_adjusted * Math.sin(end_rad);
+        const large_arc = angle_span > 180 ? 1 : 0;
+        // Create donut path if inner radius > 0, otherwise regular pie slice
+        const path = inner_radius_adjusted > 0
+            ? `M ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} L ${x2_inner} ${y2_inner} A ${inner_radius_adjusted} ${inner_radius_adjusted} 0 ${large_arc} 0 ${x1_inner} ${y1_inner} Z`
+            : `M ${center} ${center} L ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} Z`;
+        // Position labels with three-tier strategy
+        const is_very_thin_slice = angle_span < VERY_THIN_SLICE_THRESHOLD; // Place outside
+        const is_medium_slice = angle_span >= VERY_THIN_SLICE_THRESHOLD &&
+            angle_span < MEDIUM_SLICE_THRESHOLD; // Near outer edge
+        let label_radius;
+        let is_outside_slice = false;
+        if (is_very_thin_slice) {
+            // Very thin slices: place outside with distance proportional to chart size
+            label_radius = outer_radius + outer_radius * 0.2;
+            is_outside_slice = true;
+        }
+        else if (is_medium_slice) {
+            // Medium slices: place closer to outer edge, proportional to chart size
+            label_radius = outer_radius - outer_radius * 0.3;
+            is_outside_slice = false;
+        }
+        else {
+            // Large slices: place in middle of ring
+            label_radius = (outer_radius + inner_radius_adjusted) / 2;
+            is_outside_slice = false;
+        }
+        // Calculate font scale based on slice size
+        // Scale from MIN_FONT_SCALE (for very thin slices) to MAX_FONT_SCALE (for large slices)
+        const font_scale = Math.min(MAX_FONT_SCALE, MIN_FONT_SCALE +
+            (angle_span / MAX_ANGLE_FOR_FULL_SCALE) *
+                (MAX_FONT_SCALE - MIN_FONT_SCALE));
+        const color = element_colors[element] || `#cccccc`;
+        return {
+            element: element,
+            amount: amount,
+            percentage,
+            color,
+            start_angle,
+            end_angle,
+            path,
+            label_x: center + label_radius * Math.cos(mid_rad),
+            label_y: center + label_radius * Math.sin(mid_rad),
+            is_outside_slice,
+            font_scale,
+            text_color: get_text_color(color, !is_outside_slice),
+        };
+    });
+});
+let hovered_element = $state(null);
+</script>
+
+<div class="pie-chart-container {class_name}" {style} {...rest}>
+  <svg viewBox="0 0 {size} {size}" class="pie-chart">
+    {#each segments as segment (segment.element)}
+      <path
+        d={segment.path}
+        fill={segment.color}
+        stroke="white"
+        stroke-width={hovered_element === segment.element ? stroke_width + 1 : stroke_width}
+        class="pie-segment"
+        class:interactive
+        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`
+          } (${segment.percentage.toFixed(1)}%)`,
+        }}
+      >
+        <title>
+          {segment.element}: {segment.amount}
+          {segment.amount === 1 ? `atom` : `atoms`} ({segment.percentage.toFixed(1)}%)
+        </title>
+      </path>
+
+      {#if segment_content}
+        {@render segment_content(segment)}
+      {/if}
+    {/each}
+
+    {#if show_labels}
+      {#each segments as segment (segment.element)}
+        <foreignObject
+          x={segment.label_x - (size * 0.15 * segment.font_scale) / 2}
+          y={segment.label_y - (size * 0.075 * segment.font_scale) / 2}
+          width={size * 0.15 * segment.font_scale}
+          height={size * 0.075 * segment.font_scale}
+          class="pie-label-container"
+          class:hovered={hovered_element === segment.element}
+        >
+          <div
+            class="pie-label"
+            class:inside-slice={!segment.is_outside_slice}
+            class:outside-slice={segment.is_outside_slice}
+            style:color={segment.text_color}
+          >
+            <span class="element-symbol" style:font-size="{14 * segment.font_scale}px">{
+              segment.element
+            }</span>
+            {#if show_amounts}
+              <sub class="amount" style:font-size="{10 * segment.font_scale}px">
+                {segment.amount}
+              </sub>{/if}
+            {#if show_percentages}
+              <sub class="percentage" style:font-size="{11 * segment.font_scale}px">
+                {format_num(segment.percentage, 1)}%
+              </sub>
+            {/if}
+          </div>
+        </foreignObject>
+      {/each}
+    {/if}
+
+    {#if center_content}
+      <g class="center-content">
+        {@render center_content({ composition, total_atoms })}
+      </g>
+    {/if}
+  </svg>
+</div>
+
+<style>
+  .pie-chart-container {
+    display: inline-block;
+  }
+  .pie-chart {
+    overflow: visible;
+    width: 100%;
+    height: auto;
+  }
+  .pie-segment {
+    transition: all 0.2s ease;
+  }
+  .pie-segment.interactive {
+    cursor: pointer;
+  }
+  .pie-segment.interactive:hover,
+  .pie-segment.hovered {
+    filter: brightness(1.1);
+  }
+  .pie-segment.interactive:focus {
+    outline: none;
+  }
+  .pie-label-container {
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+  .pie-label-container.hovered {
+    font-weight: 700;
+  }
+  .pie-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+  foreignobject {
+    overflow: visible;
+  }
+  .pie-label.hovered {
+    font-weight: 700;
+  }
+  .element-symbol {
+    font-weight: 700;
+  }
+  .amount {
+    font-weight: 500;
+    margin-left: 1px;
+    transform: translateY(5px);
+  }
+  .percentage {
+    font-weight: 400;
+    transform: translateY(4px);
+  }
+</style>

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

@@ -0,0 +1,36 @@
+import { type CompositionType, type ElementSymbol } from '..';
+import { element_color_schemes } from '../colors';
+import type { Snippet } from 'svelte';
+interface Props {
+    composition: CompositionType;
+    size?: number;
+    stroke_width?: number;
+    inner_radius?: number;
+    show_labels?: boolean;
+    show_percentages?: boolean;
+    show_amounts?: boolean;
+    color_scheme?: keyof typeof element_color_schemes;
+    center_content?: Snippet<[{
+        composition: CompositionType;
+        total_atoms: number;
+    }]>;
+    segment_content?: Snippet<[
+        {
+            element: ElementSymbol;
+            amount: number;
+            percentage: number;
+            color: string;
+            start_angle: number;
+            end_angle: number;
+            font_scale: number;
+            text_color: string;
+        }
+    ]>;
+    style?: string;
+    class?: string;
+    interactive?: boolean;
+    [key: string]: unknown;
+}
+declare const PieChart: import("svelte").Component<Props, {}, "">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

package/dist/composition/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as BubbleChart } from './BubbleChart.svelte';
+export { default as Composition } from './Composition.svelte';
+export * from './parse';
+export { default as PieChart } from './PieChart.svelte';

package/dist/composition/index.js

@@ -0,0 +1,5 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as BubbleChart } from './BubbleChart.svelte';
+export { default as Composition } from './Composition.svelte';
+export * from './parse';
+export { default as PieChart } from './PieChart.svelte';

package/dist/composition/parse.d.ts

@@ -0,0 +1,14 @@
+import type { CompositionType, ElementSymbol } from '..';
+export declare function atomic_number_to_element_symbol(atomic_number: number): ElementSymbol | null;
+export declare function element_symbol_to_atomic_number(symbol: ElementSymbol): number | null;
+export declare function convert_atomic_numbers_to_symbols(atomic_composition: Record<number, number>): CompositionType;
+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 function get_total_atoms(composition: CompositionType): number;
+export declare function is_empty_composition(composition: CompositionType): boolean;
+export declare function parse_composition_input(input: string | CompositionType | Record<number, number> | Record<string | number, number>): CompositionType;
+export declare function format_composition_formula(composition: CompositionType, sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[]): string;
+export declare function get_alphabetical_formula(input: string | CompositionType | Record<string, unknown>): string;
+export declare function get_electro_neg_formula(input: string | CompositionType | Record<string, unknown>): string;

package/dist/composition/parse.js

@@ -0,0 +1,307 @@
+import { elem_symbols } from '..';
+import element_data from '../element/data';
+// Create a mapping from atomic numbers to element symbols
+const atomic_number_to_symbol = {};
+const symbol_to_atomic_number = {};
+// Create mass/electronegativity maps for O(1) lookups in loops below
+const element_atomic_mass_map = new Map();
+const element_electronegativity_map = new Map();
+// Populate maps at module load time
+for (const element of element_data) {
+    atomic_number_to_symbol[element.number] = element.symbol;
+    symbol_to_atomic_number[element.symbol] = element.number;
+    element_atomic_mass_map.set(element.symbol, element.atomic_mass);
+    element_electronegativity_map.set(element.symbol, element.electronegativity ?? 0);
+}
+// Convert atomic number to element symbol
+// Example: 26 -> "Fe", 8 -> "O"
+export function atomic_number_to_element_symbol(atomic_number) {
+    return atomic_number_to_symbol[atomic_number] || null;
+}
+// Convert element symbol to atomic number
+// Example: "Fe" -> 26, "O" -> 8
+export function element_symbol_to_atomic_number(symbol) {
+    return symbol_to_atomic_number[symbol] || null;
+}
+// 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) {
+    const keys = Object.keys(obj);
+    return (keys.length > 0 &&
+        keys.every((key) => {
+            const num = Number(key);
+            return (Number.isInteger(num) &&
+                num >= 1 &&
+                num <= 118 &&
+                atomic_number_to_symbol[num]);
+        }));
+}
+// 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) {
+    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_element_symbol(atomic_number);
+        if (!symbol)
+            throw new Error(`Invalid atomic number: ${atomic_number}`);
+        if (typeof amount === `number` && 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) {
+    const atomic_composition = {};
+    for (const [symbol, amount] of Object.entries(symbol_composition)) {
+        const atomic_number = element_symbol_to_atomic_number(symbol);
+        if (!atomic_number)
+            throw new Error(`Invalid element symbol: ${symbol}`);
+        if (typeof amount === `number` && amount > 0) {
+            atomic_composition[atomic_number] = (atomic_composition[atomic_number] || 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) {
+    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) {
+        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
+    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);
+    }
+    const normalized = {};
+    for (const [element, amount] of Object.entries(composition)) {
+        if (typeof amount === `number` && amount > 0) {
+            normalized[element] = amount;
+        }
+    }
+    return normalized;
+}
+// Convert composition to percentages by weight or by count
+export function 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 = element_atomic_mass_map.get(element);
+                if (atomic_mass === undefined) {
+                    throw new Error(`Unknown element: ${element}`);
+                }
+                const weight = amount * atomic_mass;
+                element_weights[element] = weight;
+                total_weight += weight;
+            }
+        }
+        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;
+    }
+    // Calculate count-based percentages (original implementation)
+    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
+export function get_total_atoms(composition) {
+    return Object.values(composition).reduce((sum, count) => sum + (count || 0), 0);
+}
+// Check if a composition is empty (no elements with positive amounts)
+export function is_empty_composition(composition) {
+    return get_total_atoms(composition) === 0;
+}
+// Convert composition input (string, symbol object, or atomic number object) to normalized composition object
+export function parse_composition_input(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);
+            }
+            catch {
+                // If JSON parsing fails, 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
+// @returns Formatted chemical formula with subscripts
+export function format_composition_formula(composition, sort_fn) {
+    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(`${el}<sub>${amount}</sub>`);
+        }
+    }
+    return formula.join(` `);
+}
+// Versatile function to create an alphabetical formula from any input type
+// @param input - String formula, composition object, or structure
+// @returns Alphabetically sorted chemical formula
+export function get_alphabetical_formula(input) {
+    if (typeof input === `string`) {
+        // If it's already a string, parse it and reformat alphabetically
+        try {
+            const composition = parse_composition_input(input);
+            return format_composition_formula(composition, (symbols) => symbols.sort());
+        }
+        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 = extract_composition_from_structure(input);
+            return format_composition_formula(composition, (symbols) => symbols.sort());
+        }
+        catch {
+            return `Unknown`;
+        }
+    }
+    else {
+        // It's a composition object
+        return format_composition_formula(input, (symbols) => symbols.sort());
+    }
+}
+// Versatile function to create an electronegativity-sorted formula from any input type
+// @param input - String formula, composition object, or structure
+// @returns Electronegativity-sorted chemical formula
+export function get_electro_neg_formula(input) {
+    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(input);
+            return format_composition_formula(composition, sort_by_electronegativity);
+        }
+        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 = extract_composition_from_structure(input);
+            return format_composition_formula(composition, sort_by_electronegativity);
+        }
+        catch {
+            return `Unknown`;
+        }
+    }
+    else {
+        // It's a composition object
+        return format_composition_formula(input, sort_by_electronegativity);
+    }
+}
+// Extract composition from a structure object
+// @param structure - Structure object with sites property
+// @returns Composition object
+function extract_composition_from_structure(structure) {
+    const composition = {};
+    if (!structure.sites || !Array.isArray(structure.sites)) {
+        throw new Error(`Invalid structure object`);
+    }
+    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;
+                }
+            }
+        }
+    }
+    return composition;
+}

package/dist/element/ElementHeading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let { element, style = `` } = $props();
+export {};
+</script>
+
+<h2 {style}>
+  {element.number} - {element.name} <small>{element.category}</small>
+</h2>
+
+<style>
+  h2 {
+    font-size: min(7vw, 3em);
+    white-space: nowrap;
+    text-align: center;
+    margin: 0 0 1em;
+  }
+  h2 > small {
+    margin-left: min(1vw, 10pt);
+    font-weight: 100;
+    opacity: 0.7;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { ChemicalElement } from '..';
+interface Props {
+    element: ChemicalElement;
+    style?: string;
+}
+declare const ElementHeading: import("svelte").Component<Props, {}, "">;
+type ElementHeading = ReturnType<typeof ElementHeading>;
+export default ElementHeading;