matterviz 0.3.6 → 0.4.0

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

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FormulaSearchMode } from './index';
+type SearchExampleCategory = {
+    label: string;
+    description: string;
+    examples: string[];
+};
+export type FormulaFilterToken = {
+    raw: string;
+    element: string;
+    operator: `include` | `exclude`;
+    constraint: string | null;
+    is_wildcard: boolean;
+    is_valid: boolean;
+};
+export type FormulaFilterParseResult = {
+    value: string;
+    normalized_value: string;
+    search_mode: FormulaSearchMode;
+    tokens: FormulaFilterToken[];
+    has_wildcards: boolean;
+    is_valid: boolean;
+    error_message: string | null;
+};
+export type FormulaFilterValidation = {
+    state: `valid` | `warning` | `invalid`;
+    message: string | null;
+};
+type $$ComponentProps = {
+    value: string;
+    search_mode?: FormulaSearchMode;
+    input_element?: HTMLInputElement | null;
+    show_clear_button?: boolean;
+    show_examples?: boolean;
+    show_mode_lock?: boolean;
+    show_chip_editor?: boolean;
+    normalize_exact?: boolean;
+    examples?: SearchExampleCategory[];
+    disabled?: boolean;
+    mode_locked?: boolean;
+    max_history?: number;
+    history_key?: string;
+    validate?: (value: string, search_mode: FormulaSearchMode, parsed: FormulaFilterParseResult) => FormulaFilterValidation | null;
+    onparse?: (parsed: FormulaFilterParseResult) => void;
+    on_validation?: (validation: FormulaFilterValidation) => void;
+    onchange?: (value: string, search_mode: FormulaSearchMode) => void;
+    onclear?: () => void;
+} & HTMLAttributes<HTMLDivElement>;
+declare const FormulaFilter: import("svelte").Component<$$ComponentProps, {}, "value" | "search_mode" | "input_element" | "mode_locked">;
+type FormulaFilter = ReturnType<typeof FormulaFilter>;
+export default FormulaFilter;

package/dist/composition/PieChart.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors'
+  import type { CompositionType } from './'
+  import type { ElementSymbol } from '../element'
+  import { format_num } from '../labels'
+  import type { Snippet } from 'svelte'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { type ChartSegmentData, get_chart_font_scale } from './index'
+  import { count_atoms_in_composition, fractional_composition } 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 MAX_ANGLE_FOR_FULL_SCALE = 120 // degrees
+
+  type PieSegmentData = ChartSegmentData & {
+    start_angle: number
+    end_angle: number
+    path: string
+    label_x: number
+    label_y: number
+    is_outside_slice: boolean
+  }
+  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,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    stroke_width?: number
+    inner_radius?: number
+    show_labels?: boolean
+    show_percentages?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    center_content?: Snippet<[{ composition: CompositionType; total_atoms: number }]>
+    segment_content?: Snippet<[PieSegmentData]>
+    interactive?: boolean
+    svg_node?: SVGSVGElement | null
+    children?: Snippet<[{ hovered_element: ElementSymbol | null }]>
+  } = $props()
+
+  let element_colors = $derived(
+    ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta,
+  )
+  let fractions = $derived(fractional_composition(composition))
+  let total_atoms = $derived(count_atoms_in_composition(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)
+
+  // 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_key, amount]) => {
+        const element = element_key as ElementSymbol
+        const fraction = fractions[element] || 0
+        const color = element_colors[element] || `#cccccc`
+
+        // Single element: full circle with no radial stroke line, label at center
+        if (fraction === 1) {
+          const r = 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 path = ir > 0
+            ? `${outer_arc} M ${center} ${
+              center - ir
+            } A ${ir} ${ir} 0 1 0 ${center} ${
+              center + ir
+            } A ${ir} ${ir} 0 1 0 ${center} ${center - ir} Z`
+            : outer_arc
+          const label_text = element + (show_amounts ? String(amount) : ``) +
+            (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+          return {
+            element,
+            amount,
+            fraction,
+            color,
+            start_angle: -90,
+            end_angle: 270,
+            path,
+            label_x: center,
+            label_y: center,
+            is_outside_slice: false,
+            font_scale: get_chart_font_scale(2.6, label_text, r * 2),
+            text_color: pick_contrast_color({ bg_color: color }),
+          }
+        }
+
+        const angle_span = fraction * 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: number
+        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
+        } else {
+          // Large slices: place in middle of ring
+          label_radius = (outer_radius + inner_radius_adjusted) / 2
+        }
+
+        // Calculate font scale based on slice size and smart text fitting
+        const [min_font_scale, max_font_scale] = [1.4, 2] as const
+        const scale_factor = angle_span / MAX_ANGLE_FOR_FULL_SCALE
+        const base_scale = min_font_scale +
+          scale_factor * (max_font_scale - min_font_scale)
+        const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
+          (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+        const available_space = is_very_thin_slice
+          ? outer_radius * 0.8 // More space outside the slice
+          : Math.min(
+            outer_radius - inner_radius_adjusted, // Radial space
+            (angle_span * Math.PI / 180) * label_radius * 0.8, // Arc space at label radius
+          )
+
+        const font_scale = get_chart_font_scale(
+          base_scale,
+          label_text,
+          available_space,
+        )
+
+        return {
+          element,
+          amount,
+          fraction,
+          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: is_outside_slice
+            ? `var(--text-color, #333)`
+            : pick_contrast_color({ bg_color: color }),
+        }
+      })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
+</script>
+
+<svg
+  viewBox="0 0 {size} {size}"
+  style:max-width="{size}px"
+  {...rest}
+  class="pie-chart {rest.class ?? ``}"
+  bind:this={svg_node}
+>
+  {#each segments as segment (segment.element)}
+    <path
+      d={segment.path}
+      fill={segment.color}
+      stroke="white"
+      stroke-width={segments.length === 1
+      ? 0
+      : 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`
+        } (${format_num(segment.fraction, `.1~%`)})`,
+      }}
+    >
+      <title>
+        {segment.element}: {segment.amount}
+        {segment.amount === 1 ? `atom` : `atoms`} ({format_num(segment.fraction, `.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: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 || show_percentages}
+            <sub class="amount" style:font-size="{8 * segment.font_scale}px">{
+              show_amounts ? segment.amount : ``
+            }{show_amounts && show_percentages ? `=` : ``}{
+              show_percentages ? format_num(segment.fraction, `.1~%`) : ``
+            }</sub>
+          {/if}
+        </div>
+      </foreignObject>
+    {/each}
+  {/if}
+
+  {#if center_content}
+    <g class="center-content">
+      {@render center_content({ composition, total_atoms })}
+    </g>
+  {/if}
+
+  {@render children?.({ hovered_element })}
+</svg>
+
+<style>
+  .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;
+  }
+  svg {
+    /* very thin slices place their labels outside the pie at 1.2x the outer radius,
+    past the square viewBox - the default svg overflow: hidden would clip them */
+    overflow: visible;
+  }
+  foreignobject {
+    pointer-events: none;
+    transition: all 0.2s ease;
+    overflow: visible;
+  }
+  foreignobject.hovered {
+    font-weight: 700;
+  }
+  .pie-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+  .pie-label.hovered {
+    font-weight: 700;
+  }
+  .amount {
+    margin-left: 1px;
+    transform: translateY(5pt);
+  }
+</style>

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

@@ -0,0 +1,37 @@
+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';
+type PieSegmentData = ChartSegmentData & {
+    start_angle: number;
+    end_angle: number;
+    path: string;
+    label_x: number;
+    label_y: number;
+    is_outside_slice: boolean;
+};
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType;
+    size?: number;
+    stroke_width?: number;
+    inner_radius?: number;
+    show_labels?: boolean;
+    show_percentages?: boolean;
+    show_amounts?: boolean;
+    color_scheme?: ColorSchemeName;
+    center_content?: Snippet<[{
+        composition: CompositionType;
+        total_atoms: number;
+    }]>;
+    segment_content?: Snippet<[PieSegmentData]>;
+    interactive?: boolean;
+    svg_node?: SVGSVGElement | null;
+    children?: Snippet<[{
+        hovered_element: ElementSymbol | null;
+    }]>;
+};
+declare const PieChart: import("svelte").Component<$$ComponentProps, {}, "svg_node">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

package/dist/composition/chem-sys.d.ts

@@ -0,0 +1,8 @@
+import type { SunburstNode } from '../plot/core/types';
+export interface ChemSysSunburstMetadata {
+    chem_sys: string;
+    arity: number;
+    [key: string]: unknown;
+}
+export declare const arity_name: (arity: number) => string;
+export declare function chem_sys_sunburst_data(entries: readonly string[]): SunburstNode<ChemSysSunburstMetadata>[];

package/dist/composition/chem-sys.js

@@ -0,0 +1,85 @@
+// 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';
+const ARITY_NAMES = [
+    ``,
+    `unary`,
+    `binary`,
+    `ternary`,
+    `quaternary`,
+    `quinary`,
+    `senary`,
+    `septenary`,
+    `octonary`,
+    `nonary`,
+    `denary`,
+];
+// || (not ??) so the empty index-0 placeholder also falls through to "0-ary"
+export const arity_name = (arity) => ARITY_NAMES[arity] || `${arity}-ary`;
+// Build arity -> chemical-system sunburst data from a list of chemical systems
+// ("Li-Fe-O") and/or formulas ("LiFePO4"), one entry per occurrence (counts become
+// leaf values). Systems are normalized to alphabetical element order, so "O-Li" and
+// "Li2O" both count toward "Li-O". Ids follow the "<arity>/<system>" scheme.
+export function chem_sys_sunburst_data(entries) {
+    // Inputs are one entry per occurrence, so the same formula typically repeats many
+    // times - memoize raw entry -> normalized system (null = invalid) to parse each
+    // distinct string only once
+    const normalized = new Map();
+    const normalize = (entry) => {
+        let elements;
+        if (entry.includes(`-`)) {
+            elements = entry.split(`-`).map((el) => el.trim());
+            if (!elements.every(is_valid_element))
+                return null;
+        }
+        else {
+            try {
+                elements = Object.keys(parse_formula(entry));
+            }
+            catch {
+                return null;
+            }
+        }
+        if (elements.length === 0)
+            return null;
+        return [...new Set(elements)].sort().join(`-`);
+    };
+    const counts = new Map();
+    let n_invalid = 0;
+    for (const entry of entries) {
+        let chem_sys = normalized.get(entry);
+        if (chem_sys === undefined) {
+            chem_sys = normalize(entry);
+            normalized.set(entry, chem_sys);
+        }
+        if (chem_sys === null) {
+            n_invalid += 1;
+            continue;
+        }
+        counts.set(chem_sys, (counts.get(chem_sys) ?? 0) + 1);
+    }
+    if (n_invalid > 0) {
+        console.warn(`chem_sys_sunburst_data: skipped ${n_invalid} invalid entr${n_invalid === 1 ? `y` : `ies`} (expected chemical systems like "Li-Fe-O" or formulas like "LiFePO4")`);
+    }
+    // One composite sort (arity ascending, then count descending) puts systems in
+    // final order; consecutive same-arity runs then collapse into one branch each
+    const sorted = [...counts]
+        .map(([chem_sys, count]) => ({ chem_sys, count, arity: chem_sys.split(`-`).length }))
+        .sort((sys_a, sys_b) => sys_a.arity - sys_b.arity || sys_b.count - sys_a.count);
+    const roots = [];
+    let branch;
+    for (const { chem_sys, count, arity } of sorted) {
+        const name = arity_name(arity);
+        if (branch?.id !== name) {
+            branch = { id: name, label: name, children: [] };
+            roots.push(branch);
+        }
+        branch.children?.push({
+            id: `${name}/${chem_sys}`,
+            label: chem_sys,
+            value: count,
+            metadata: { chem_sys, arity },
+        });
+    }
+    return roots;
+}

package/dist/composition/format.d.ts

@@ -0,0 +1,15 @@
+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;
+export declare const sort_by_electronegativity: (symbols: ElementSymbol[]) => ElementSymbol[];
+export declare const sort_by_hill_notation: (symbols: ElementSymbol[]) => ElementSymbol[];
+export declare const get_electro_neg_formula: (input: string | CompositionType | AnyStructure, plain_text?: boolean, delim?: string, amount_format?: string) => string;
+export interface FormulaLabelSegment {
+    text: string;
+    subscript: boolean;
+}
+export declare function get_formula_label_segments(formula: string): FormulaLabelSegment[];
+export declare const get_hill_formula: (input: string | CompositionType | AnyStructure, plain_text?: boolean, delim?: string, amount_format?: string) => string;
+export declare function format_oxi_state(oxidation?: number): string;

package/dist/composition/format.js

@@ -0,0 +1,111 @@
+import { format_num } from '../labels';
+import { ELEMENT_ELECTRONEGATIVITY_MAP, is_valid_element, 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`);
+    }
+    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;
+            }
+        }
+    }
+    return composition;
+};
+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);
+    return sort_fn(symbols)
+        .filter((el) => composition[el] && composition[el] > 0)
+        .map((el) => {
+        const amount = Number(composition[el]);
+        if (amount === 1)
+            return el;
+        // avoid d3 SI prefixes for sub-1 amounts (`s` formats render 0.5 as 500m)
+        const fmt = amount_format.endsWith(`s`) && Math.abs(amount) < 1 ? `.3~g` : amount_format;
+        const formatted_amount = format_num(amount, fmt);
+        return plain_text ? `${el}${formatted_amount}` : `${el}<sub>${formatted_amount}</sub>`;
+    })
+        .join(delim);
+};
+// Generic formula formatter with error handling
+const format_formula_generic = (input, sort_fn, plain_text = false, delim = ` `, amount_format = `.3~s`) => {
+    try {
+        let composition;
+        if (typeof input === `string`)
+            composition = parse_composition(input);
+        else if (is_structure_like(input))
+            composition = structure_to_composition(input);
+        else
+            composition = input;
+        return format_composition_formula(composition, sort_fn, plain_text, delim, amount_format);
+    }
+    catch {
+        return ``;
+    }
+};
+// Create alphabetical formula
+export const get_alphabetical_formula = (input, plain_text = false, delim = ` `, amount_format = `.3~s`) => format_formula_generic(input, (symbols) => symbols.sort(), plain_text, delim, amount_format);
+export const sort_by_electronegativity = (symbols) => symbols.sort((el_1, el_2) => {
+    const elec_neg_1 = ELEMENT_ELECTRONEGATIVITY_MAP.get(el_1) ?? 0;
+    const elec_neg_2 = ELEMENT_ELECTRONEGATIVITY_MAP.get(el_2) ?? 0;
+    return elec_neg_1 !== elec_neg_2 ? elec_neg_1 - elec_neg_2 : el_1.localeCompare(el_2);
+});
+// Sort element symbols according to Hill notation (C first, H second, then alphabetical).
+// This is the standard notation for organic compounds in chemistry.
+export const sort_by_hill_notation = (symbols) => {
+    const has_carbon = symbols.includes(`C`);
+    return symbols.sort((el_a, el_b) => {
+        // Equal elements must return 0 (sort invariant)
+        if (el_a === el_b)
+            return 0;
+        // Carbon always comes first
+        if (el_a === `C`)
+            return -1;
+        if (el_b === `C`)
+            return 1;
+        // If carbon present, hydrogen comes second
+        if (has_carbon) {
+            if (el_a === `H`)
+                return -1;
+            if (el_b === `H`)
+                return 1;
+        }
+        return el_a.localeCompare(el_b); // All other elements alphabetically
+    });
+};
+// Create electronegativity-sorted formula
+export const get_electro_neg_formula = (input, plain_text = false, delim = ` `, amount_format = `.3~f`) => format_formula_generic(input, sort_by_electronegativity, plain_text, delim, amount_format);
+export function get_formula_label_segments(formula) {
+    const segments = [];
+    let cursor = 0;
+    for (const match of formula.matchAll(/([A-Za-z])(\d+(?:\.\d+)?)/g)) {
+        const match_idx = match.index ?? 0;
+        const prefix = match[1];
+        const amount = match[2];
+        const amount_idx = match_idx + prefix.length;
+        if (amount_idx > cursor) {
+            segments.push({ text: formula.slice(cursor, amount_idx), subscript: false });
+        }
+        segments.push({ text: amount, subscript: true });
+        cursor = amount_idx + amount.length;
+    }
+    if (cursor < formula.length) {
+        segments.push({ text: formula.slice(cursor), subscript: false });
+    }
+    return segments.length > 0 ? segments : [{ text: formula, subscript: false }];
+}
+// Create Hill notation formula (C first, H second, then alphabetical)
+export const get_hill_formula = (input, plain_text = false, delim = ` `, amount_format = `.3~s`) => format_formula_generic(input, sort_by_hill_notation, plain_text, delim, amount_format);
+export function format_oxi_state(oxidation) {
+    if (oxidation === undefined || oxidation === 0)
+        return ``;
+    const sign = oxidation > 0 ? `+` : `-`;
+    return `${sign}${Math.abs(oxidation)}`;
+}

package/dist/composition/index.d.ts

@@ -0,0 +1,21 @@
+import type { ElementSymbol } from '../element';
+export { default as BarChart } from './BarChart.svelte';
+export { default as BubbleChart } from './BubbleChart.svelte';
+export * from './chem-sys';
+export { default as Composition } from './Composition.svelte';
+export * from './format';
+export { default as Formula } from './Formula.svelte';
+export { default as FormulaFilter } from './FormulaFilter.svelte';
+export * from './parse';
+export { default as PieChart } from './PieChart.svelte';
+export type CompositionType = Partial<Record<ElementSymbol, number>>;
+export type FormulaSearchMode = `elements` | `chemsys` | `exact`;
+export type ChartSegmentData = {
+    element: ElementSymbol;
+    amount: number;
+    fraction: number;
+    color: string;
+    font_scale: number;
+    text_color: string;
+};
+export declare function get_chart_font_scale(base_scale: number, label_text: string, available_space: number, min_scale_factor?: number, base_font_size?: number): number;

package/dist/composition/index.js

@@ -0,0 +1,15 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as BubbleChart } from './BubbleChart.svelte';
+export * from './chem-sys';
+export { default as Composition } from './Composition.svelte';
+export * from './format';
+export { default as Formula } from './Formula.svelte';
+export { default as FormulaFilter } from './FormulaFilter.svelte';
+export * from './parse';
+export { default as PieChart } from './PieChart.svelte';
+export function get_chart_font_scale(base_scale, label_text, available_space, min_scale_factor = 0.7, base_font_size = 16) {
+    const text_width = label_text.length * 0.6 * base_font_size * base_scale;
+    return available_space > 0 && text_width > available_space
+        ? Math.max(base_scale * (available_space / text_width), base_scale * min_scale_factor)
+        : base_scale;
+}