matterviz 0.3.2 → 0.3.3

package/dist/composition/PieChart.svelte

@@ -1,128 +1,203 @@
-<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 { 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
-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 } = $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
+<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;
-        const fraction = fractions[element] || 0;
-        const color = element_colors[element] || `#cccccc`;
+      .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 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;
+
+        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;
+        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);
+        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;
+        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`;
+          ? `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_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;
+          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;
-            is_outside_slice = false;
-        }
-        else {
-            // Large slices: place in middle of ring
-            label_radius = (outer_radius + inner_radius_adjusted) / 2;
-            is_outside_slice = false;
+          // 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 and smart text fitting
-        const [min_font_scale, max_font_scale] = [1.4, 2];
-        const scale_factor = angle_span / MAX_ANGLE_FOR_FULL_SCALE;
+        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~%`)}` : ``);
+          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);
-        const font_scale = get_chart_font_scale(base_scale, label_text, available_space);
+          ? 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 = $state(null);
+          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

package/dist/composition/format.d.ts

@@ -6,5 +6,10 @@ export declare const get_alphabetical_formula: (input: string | CompositionType
 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

@@ -27,9 +27,7 @@ export const format_composition_formula = (composition, sort_fn, plain_text = fa
         if (amount === 1)
             return el;
         const formatted_amount = format_num(Number(amount), amount_format);
-        return plain_text
-            ? `${el}${formatted_amount}`
-            : `${el}<sub>${formatted_amount}</sub>`;
+        return plain_text ? `${el}${formatted_amount}` : `${el}<sub>${formatted_amount}</sub>`;
     })
         .join(delim);
 };
@@ -82,6 +80,25 @@ export const sort_by_hill_notation = (symbols) => {
 };
 // 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) {

package/dist/composition/parse.js

@@ -21,8 +21,8 @@ export const is_valid_element = (sym) => ELEM_SYMBOLS.includes(sym);
 // Check if object has atomic numbers as keys (1-118)
 const is_atomic_number_composition = (obj) => {
     const keys = Object.keys(obj);
-    return keys.length > 0 &&
-        keys.map(Number).every((num) => Number.isInteger(num) && num >= 1 && num <= 118);
+    return (keys.length > 0 &&
+        keys.map(Number).every((num) => Number.isInteger(num) && num >= 1 && num <= 118));
 };
 // Convert atomic numbers to element symbols
 export const atomic_num_to_symbols = (atomic_composition) => {
@@ -148,7 +148,7 @@ export const parse_composition = (input) => {
     return normalize_composition(input);
 };
 // Calculate GCD of two numbers
-const gcd = (num_a, num_b) => (num_b === 0 ? num_a : gcd(num_b, num_a % num_b));
+const gcd = (num_a, num_b) => num_b === 0 ? num_a : gcd(num_b, num_a % num_b);
 // Get reduced formula by dividing all amounts by their GCD
 // Example: Fe2O4 -> FeO2, H4O2 -> H2O
 export const get_reduced_formula = (composition) => {
@@ -176,7 +176,7 @@ const parse_oxidation_state = (oxidation_str) => {
         return oxidation_str === `+` ? 1 : -1;
     }
     // Handle formats like "2+", "+2", "2-", "-2"
-    const ox_match = oxidation_str.match(/([+-]?)(\d+)([+-]?)/);
+    const ox_match = /([+-]?)(\d+)([+-]?)/.exec(oxidation_str);
     if (!ox_match)
         return 0;
     const [, sign_before, number, sign_after] = ox_match;
@@ -211,9 +211,7 @@ export const parse_formula_with_oxidation = (formula, strict = false) => {
         const count = count_str ? parseInt(count_str, 10) : 1;
         if (!is_valid_element(element))
             throw new Error(`Invalid element symbol: ${element}`);
-        const oxidation_state = oxidation_str
-            ? parse_oxidation_state(oxidation_str)
-            : undefined;
+        const oxidation_state = oxidation_str ? parse_oxidation_state(oxidation_str) : undefined;
         // Find or add element entry
         const existing = elements.find((el) => el.element === element);
         if (existing) {
@@ -304,7 +302,10 @@ export function generate_chem_sys_subspaces(input) {
 // Example: "Zr, Nb, InvalidElement, H" -> ["H", "Nb", "Zr"]
 // Note: Matching is case-sensitive. Use all_symbols to filter against a subset.
 export const normalize_element_symbols = (csv, all_symbols) => {
-    const input_set = new Set(csv.split(`,`).map((sym) => sym.trim()).filter(Boolean));
+    const input_set = new Set(csv
+        .split(`,`)
+        .map((sym) => sym.trim())
+        .filter(Boolean));
     // Cast needed: ELEM_SYMBOLS is readonly const tuple, T is generic string subtype
     return (all_symbols ?? ELEM_SYMBOLS).filter((sym) => input_set.has(sym));
 };
@@ -315,7 +316,11 @@ export const has_wildcards = (input) => input.includes(`*`);
 // Accepts both hyphen and comma separators.
 // Throws if any non-wildcard token is not a valid element symbol.
 export function parse_chemsys_with_wildcards(input) {
-    const tokens = input.replace(/-/g, `,`).split(`,`).map((tok) => tok.trim()).filter(Boolean);
+    const tokens = input
+        .replace(/-/g, `,`)
+        .split(`,`)
+        .map((tok) => tok.trim())
+        .filter(Boolean);
     const elements = [];
     let wildcard_count = 0;
     for (const token of tokens) {

package/dist/convex-hull/ConvexHull.svelte

@@ -1,46 +1,99 @@
-<script lang="ts">import { extract_formula_elements } from '../composition/parse';
-import { DEFAULTS } from '../settings';
-import { SvelteSet } from 'svelte/reactivity';
-import ConvexHull2D from './ConvexHull2D.svelte';
-import ConvexHull3D from './ConvexHull3D.svelte';
-import ConvexHull4D from './ConvexHull4D.svelte';
-let { entries = [], 
-// bindable props not part of rest because Svelte 5 doesn't support spreading bindable props.
-fullscreen = $bindable(false), wrapper = $bindable(), show_stable = $bindable(true), show_unstable = $bindable(true), show_hull_faces = $bindable(true), hull_face_opacity: hull_face_opacity_prop = $bindable(undefined), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), max_hull_dist_show_phases = $bindable(0.1), max_hull_dist_show_labels = $bindable(0.1), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), display = $bindable({ x_grid: false, y_grid: false }), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), selected_entry = $bindable(null), temperature = $bindable(), gas_pressures = $bindable({}), ...rest } = $props();
-// Lightweight element extraction - count unique elements, stripping oxidation states
-// (e.g. "V4+" -> "V") to avoid counting the same element multiple times
-function extract_unique_elements(entries) {
-    const elements = new SvelteSet();
+<script lang="ts">
+  import { extract_formula_elements } from '../composition/parse'
+  import type { AxisConfig } from '../plot'
+  import { DEFAULTS } from '../settings'
+  import type { Component } from 'svelte'
+  import { SvelteSet } from 'svelte/reactivity'
+  import ConvexHull2D from './ConvexHull2D.svelte'
+  import ConvexHull3D from './ConvexHull3D.svelte'
+  import ConvexHull4D from './ConvexHull4D.svelte'
+  import type { BaseConvexHullProps, Hull3DProps } from './index'
+  import type { GasSpecies, GasThermodynamicsConfig } from './types'
+
+  // Union type combining all possible props from 2D, 3D, and 4D components
+  // each specific component will only use its relevant props from this super set
+  type ConvexHullProps = BaseConvexHullProps & Hull3DProps & {
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    // Gas thermodynamics config - enables atmosphere-controlled phase diagrams
+    gas_config?: GasThermodynamicsConfig
+    // Gas pressure binding - enables two-way binding for atmosphere control
+    gas_pressures?: Partial<Record<GasSpecies, number>>
+  }
+
+  let {
+    entries = [],
+    // bindable props not part of rest because Svelte 5 doesn't support spreading bindable props.
+    fullscreen = $bindable(false),
+    wrapper = $bindable(),
+    show_stable = $bindable(true),
+    show_unstable = $bindable(true),
+    show_hull_faces = $bindable(true),
+    hull_face_opacity: hull_face_opacity_prop = $bindable(
+      undefined as number | undefined,
+    ),
+    color_mode = $bindable(`energy`),
+    color_scale = $bindable(`interpolateViridis`),
+    info_pane_open = $bindable(false),
+    legend_pane_open = $bindable(false),
+    max_hull_dist_show_phases = $bindable(0.1),
+    max_hull_dist_show_labels = $bindable(0.1),
+    show_stable_labels = $bindable(true),
+    show_unstable_labels = $bindable(false),
+    energy_source_mode = $bindable(`precomputed`),
+    phase_stats = $bindable(null),
+    display = $bindable({ x_grid: false, y_grid: false }),
+    stable_entries = $bindable([]),
+    unstable_entries = $bindable([]),
+    highlighted_entries = $bindable([]),
+    selected_entry = $bindable(null),
+    temperature = $bindable(),
+    gas_pressures = $bindable({}),
+    ...rest
+  }: ConvexHullProps = $props()
+
+  // Lightweight element extraction - count unique elements, stripping oxidation states
+  // (e.g. "V4+" -> "V") to avoid counting the same element multiple times
+  function extract_unique_elements(
+    entries: { composition: Record<string, number> }[],
+  ): string[] {
+    const elements = new SvelteSet<string>()
     for (const entry of entries) {
-        for (const key of Object.keys(entry.composition)) {
-            // Extract valid element symbols, stripping oxidation states
-            for (const elem of extract_formula_elements(key, { unique: false })) {
-                elements.add(elem);
-            }
+      for (const key of Object.keys(entry.composition)) {
+        // Extract valid element symbols, stripping oxidation states
+        for (const elem of extract_formula_elements(key, { unique: false })) {
+          elements.add(elem)
         }
+      }
     }
-    return Array.from(elements).sort();
-}
-// Detect dimensionality by counting unique elements (lightweight operation)
-const elements = $derived(extract_unique_elements(entries));
-const element_count = $derived(elements.length);
-// Resolve hull face opacity: use caller's value if provided,
-// otherwise pick the right default for the dimensionality (ternary=30%, quaternary=3%).
-// Use writable derived so child bind updates can sync back to parent.
-const default_opacity = $derived(element_count === 4
-    ? DEFAULTS.convex_hull.quaternary.hull_face_opacity
-    : DEFAULTS.convex_hull.ternary.hull_face_opacity);
-let hull_face_opacity = $derived(hull_face_opacity_prop ?? default_opacity);
-$effect(() => {
-    if (hull_face_opacity_prop === hull_face_opacity)
-        return;
-    hull_face_opacity_prop = hull_face_opacity;
-});
-// Map element count to corresponding component
-// Note: Type assertion needed because TypeScript can't infer that all components
-// accept a compatible superset of props (BaseConvexHullProps + dimension-specific)
-const ConvexHullComponent = $derived({ 2: ConvexHull2D, 3: ConvexHull3D, 4: ConvexHull4D }[element_count] ??
-    null);
+    return Array.from(elements).toSorted()
+  }
+
+  // Detect dimensionality by counting unique elements (lightweight operation)
+  const elements = $derived(extract_unique_elements(entries))
+  const element_count = $derived(elements.length)
+
+  // Resolve hull face opacity: use caller's value if provided,
+  // otherwise pick the right default for the dimensionality (ternary=30%, quaternary=3%).
+  // Use writable derived so child bind updates can sync back to parent.
+  const default_opacity = $derived(
+    element_count === 4
+      ? DEFAULTS.convex_hull.quaternary.hull_face_opacity
+      : DEFAULTS.convex_hull.ternary.hull_face_opacity,
+  )
+  let hull_face_opacity = $derived(hull_face_opacity_prop ?? default_opacity)
+  $effect(() => {
+    if (hull_face_opacity_prop === hull_face_opacity) return
+    hull_face_opacity_prop = hull_face_opacity
+  })
+
+  // Map element count to corresponding component
+  // Note: Type assertion needed because TypeScript can't infer that all components
+  // accept a compatible superset of props (BaseConvexHullProps + dimension-specific)
+  const ConvexHullComponent = $derived(
+    { 2: ConvexHull2D, 3: ConvexHull3D, 4: ConvexHull4D }[element_count] ??
+      null,
+  ) as Component<ConvexHullProps> | null
 </script>
 
 {#if ConvexHullComponent}

package/dist/convex-hull/ConvexHull.svelte.d.ts

@@ -8,6 +8,6 @@ type ConvexHullProps = BaseConvexHullProps & Hull3DProps & {
     gas_config?: GasThermodynamicsConfig;
     gas_pressures?: Partial<Record<GasSpecies, number>>;
 };
-declare const ConvexHull: Component<ConvexHullProps, {}, "temperature" | "display" | "color_scale" | "fullscreen" | "show_hull_faces" | "hull_face_opacity" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull: Component<ConvexHullProps, {}, "temperature" | "display" | "fullscreen" | "show_hull_faces" | "hull_face_opacity" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
 type ConvexHull = ReturnType<typeof ConvexHull>;
 export default ConvexHull;