matterviz 0.3.1 → 0.3.3

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

@@ -1,17 +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">;
+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

@@ -1,107 +1,208 @@
-<script lang="ts">import { format_num } from '../labels';
-import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
-import { get_chart_font_scale } from './index';
-import { count_atoms_in_composition, fractional_composition } from './parse';
-// 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;
-        // use 359.99° to avoid 360° for single-element compositions which cause SVG arc issues
-        const angle_span = fraction === 1 ? 359.99 : fraction * 360;
-        const start_angle = current_angle;
-        const end_angle = current_angle + angle_span;
-        current_angle = end_angle;
+      .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;
+        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);
-        const color = element_colors[element] || `#cccccc`;
+          ? 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
   viewBox="0 0 {size} {size}"
+  style:max-width="{size}px"
   {...rest}
   class="pie-chart {rest.class ?? ``}"
   bind:this={svg_node}
@@ -111,7 +212,11 @@ let hovered_element = $state(null);
       d={segment.path}
       fill={segment.color}
       stroke="white"
-      stroke-width={hovered_element === segment.element ? stroke_width + 1 : stroke_width}
+      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}
@@ -154,14 +259,12 @@ let hovered_element = $state(null);
           <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.fraction, `.1~%`)}
-            </sub>
+          {#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>
@@ -215,9 +318,6 @@ let hovered_element = $state(null);
   }
   .amount {
     margin-left: 1px;
-    transform: translateY(9pt);
-  }
-  .percentage {
-    transform: translateY(4px);
+    transform: translateY(5pt);
   }
 </style>

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

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

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) {