matterviz 0.4.1 → 0.4.2

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

@@ -17,6 +17,6 @@ type $$ComponentProps = {
     controls_open?: boolean;
     export_pane_open?: boolean;
 };
-declare const ChemPotDiagram3D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "temperature" | "fullscreen" | "wrapper" | "controls_open" | "export_pane_open" | "hover_info">;
+declare const ChemPotDiagram3D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "fullscreen" | "wrapper" | "controls_open" | "export_pane_open" | "temperature" | "hover_info">;
 type ChemPotDiagram3D = ReturnType<typeof ChemPotDiagram3D>;
 export default ChemPotDiagram3D;

package/dist/chempot-diagram/async-compute.svelte.js

@@ -68,7 +68,7 @@ export function compute_chempot_async(entries, config = {}) {
         pending.set(id, { resolve, reject });
         try {
             // $state.snapshot strips Svelte $state proxies (not structured-cloneable)
-            // eslint-disable-next-line unicorn/require-post-message-target-origin
+            // oxlint-disable-next-line unicorn/require-post-message-target-origin
             wkr.postMessage($state.snapshot({ id, entries, config }));
         }
         catch (err) {

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

@@ -13,7 +13,7 @@ export function create_chempot_overrides(config, keys, custom_defaults = {}) {
     }));
     let overrides = $state({});
     return {
-        resolve: (key) => (overrides[key] ?? config()[key] ?? defaults[key]),
+        resolve: (key) => overrides[key] ?? config()[key] ?? defaults[key],
         set: (key, value) => {
             overrides[key] = value;
         },

package/dist/colors/index.d.ts

@@ -1,6 +1,4 @@
 import * as d3_sc from 'd3-scale-chromatic';
-import type { Vec3 } from '../math';
-import type { ELEM_SYMBOLS } from '../labels';
 export type D3InterpolateName = keyof typeof d3_sc & `interpolate${string}`;
 export type D3ColorSchemeName = D3InterpolateName extends `interpolate${infer Name}` ? Name : never;
 export declare const get_d3_interpolator: (name: D3InterpolateName) => ((t: number) => string);
@@ -9,8 +7,6 @@ export type ColorScaleType = (typeof COLOR_SCALE_TYPES)[number];
 export declare const DEFAULT_CATEGORY_COLORS: Record<string, string>;
 export declare const AXIS_COLORS: readonly [readonly ["x", "#d75555", "#e66666"], readonly ["y", "#55b855", "#66c966"], readonly ["z", "#5555d7", "#6666e6"]];
 export declare const NEG_AXIS_COLORS: readonly [readonly ["nx", "#b84444", "#cc5555"], readonly ["ny", "#44a044", "#55b155"], readonly ["nz", "#4444b8", "#5555c9"]];
-export type RGBColor = Vec3;
-export type ElementColorScheme = Record<(typeof ELEM_SYMBOLS)[number], RGBColor>;
 export declare const vesta_hex: Record<string, string>;
 export declare const jmol_hex: Record<string, string>;
 export declare const alloy_hex: Record<string, string>;

package/dist/colors/index.js

@@ -1,5 +1,7 @@
 import { color as d3_color, rgb } from 'd3-color';
 import * as d3_sc from 'd3-scale-chromatic';
+import { COLOR_THEMES, get_system_mode, get_theme_preference, is_valid_theme_name, resolve_theme_mode, THEME_STORAGE_KEY, THEME_TYPE, } from '../theme';
+import { clamp01 } from '../utils';
 import alloy_colors from './alloy-colors.json' with { type: 'json' };
 import dark_mode_colors from './dark-mode-colors.json' with { type: 'json' };
 import jmol_colors from './jmol-colors.json' with { type: 'json' };
@@ -82,16 +84,17 @@ export function luminance(clr) {
     const { r: red, g: green, b: blue } = rgb(clr);
     return (0.299 * red + 0.587 * green + 0.114 * blue) / 255; // https://stackoverflow.com/a/596243
 }
+// CSS color string for a fully transparent background
+const NO_BG = `rgba(0, 0, 0, 0)`;
 // get background color of passed DOM node, or recurse up the DOM tree if current node is transparent
 export function get_bg_color(elem, bg_color = null) {
     if (bg_color)
         return bg_color;
     // recurse up the DOM tree to find the first non-transparent background color
-    const transparent = `rgba(0, 0, 0, 0)`;
     if (!elem)
-        return transparent; // if no DOM node, return transparent
+        return NO_BG; // if no DOM node, return transparent
     const bg = getComputedStyle(elem).backgroundColor; // get node background color
-    if (bg !== transparent)
+    if (bg !== NO_BG)
         return bg; // if not transparent, return it
     return get_bg_color(elem.parentElement); // otherwise recurse up the DOM tree
 }
@@ -104,7 +107,7 @@ export function pick_contrast_color(options = {}) {
 export const contrast_color = (options = {}) => (node) => {
     node.style.color = pick_contrast_color({ ...options, bg_color: get_bg_color(node) });
 };
-const is_valid_bg = (bg) => bg !== `` && bg !== `rgba(0, 0, 0, 0)` && bg !== `transparent`;
+const is_valid_bg = (bg) => bg !== `` && bg !== NO_BG && bg !== `transparent`;
 // Detect and return the page background color from html/body elements or user preferences
 export function get_page_background(fallback_dark = `#1a1a1a`, fallback_light = `#ffffff`) {
     if (typeof window === `undefined`)
@@ -119,25 +122,21 @@ export function get_page_background(fallback_dark = `#1a1a1a`, fallback_light =
     if (is_valid_bg(html_bg))
         return html_bg;
     // Fall back to prefers-color-scheme
-    const prefers_dark = globalThis.matchMedia(`(prefers-color-scheme: dark)`).matches;
+    const prefers_dark = globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)?.matches;
     return prefers_dark ? fallback_dark : fallback_light;
 }
-// Detect dark mode: checks data-theme attribute, localStorage, then OS preference
+// Detect dark mode: checks data-theme attribute, then the persisted theme
+// preference (resolving `auto` against the OS), then falls back to OS preference.
 export function is_dark_mode() {
     if (typeof document === `undefined`)
         return false;
+    // Prefer the resolved theme name on data-theme (light/dark/white/black), else
+    // fall back to the persisted preference (resolving `auto` against the OS)
     const data_theme = document.documentElement.dataset.theme;
-    if (data_theme === `dark` || data_theme === `light`)
-        return data_theme === `dark`;
-    try {
-        const stored = localStorage.getItem(`theme`);
-        if (stored === `dark` || stored === `light`)
-            return stored === `dark`;
-    }
-    catch {
-        /* localStorage throws in private browsing mode */
-    }
-    return globalThis.matchMedia?.(`(prefers-color-scheme: dark)`).matches ?? false;
+    const theme_name = data_theme && is_valid_theme_name(data_theme)
+        ? data_theme
+        : resolve_theme_mode(get_theme_preference(), get_system_mode());
+    return THEME_TYPE[theme_name] === COLOR_THEMES.dark;
 }
 // Watch for dark mode changes and call callback on each change. Returns cleanup function.
 export function watch_dark_mode(on_change) {
@@ -149,8 +148,8 @@ export function watch_dark_mode(on_change) {
         attributes: true,
         attributeFilter: [`data-theme`],
     });
-    const on_storage = (ev) => {
-        if (ev.key === `theme`)
+    const on_storage = (event) => {
+        if (event.key === THEME_STORAGE_KEY)
             notify();
     };
     globalThis.addEventListener(`storage`, on_storage);
@@ -178,7 +177,7 @@ export function css_color_to_hex(color, fallback) {
 // Returns the color in rgba() format, or the original color if format is unsupported.
 export function add_alpha(color, alpha) {
     // Clamp alpha to valid CSS range [0, 1]
-    const clamped_alpha = Math.max(0, Math.min(1, alpha));
+    const clamped_alpha = clamp01(alpha);
     // Handle hex colors (#rgb, #rgba, #rrggbb, #rrggbbaa)
     if (color.startsWith(`#`)) {
         const hex = color.slice(1);

package/dist/composition/BarChart.svelte

@@ -6,7 +6,12 @@
   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 {
+    chart_segment_label,
+    chart_segment_suffix,
+    type ChartSegmentData,
+    get_chart_font_scale,
+  } from './index'
   import { fractional_composition } from './parse'
 
   type BarSegmentData = ChartSegmentData & {
@@ -66,13 +71,11 @@
   let svg_height = $derived(label_height + gap + bar_height + gap + label_height)
   let bar_y = $derived(label_height + gap)
   let above_labels_y = $derived(label_height / 2)
-  let below_labels_y = $derived(
-    label_height + gap + bar_height + gap + label_height / 2,
-  )
+  let below_labels_y = $derived(label_height + gap + bar_height + gap + label_height / 2)
 
   let segments = $derived.by(() => {
-    const element_entries = Object.entries(composition).filter(([_, amount]) =>
-      amount && amount > 0
+    const element_entries = Object.entries(composition).filter(
+      ([_, amount]) => amount && amount > 0,
     ) as [ElementSymbol, number][]
     if (element_entries.length === 0) return []
 
@@ -87,8 +90,13 @@
 
       const segment_size = Math.min(width, size)
       const base_scale = Math.min(2, Math.max(1, segment_size / 40))
-      const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
-        (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+      const label_text = chart_segment_label(
+        element,
+        amount,
+        fraction,
+        show_amounts,
+        show_percentages,
+      )
       const font_scale = get_chart_font_scale(
         base_scale,
         label_text,
@@ -135,9 +143,7 @@
   </tspan>
   {#if show_amounts || show_percentages}
     <tspan class="amount" style:font-size="{6.5 * segment.font_scale}px" dx="1" dy="5">
-      {show_amounts ? segment.amount : ``}{show_amounts && show_percentages ? `=` : ``}{
-        show_percentages ? format_num(segment.fraction, `.1~%`) : ``
-      }
+      {chart_segment_suffix(segment.amount, segment.fraction, show_amounts, show_percentages)}
     </tspan>
   {/if}
 {/snippet}
@@ -145,7 +151,7 @@
 <svg
   viewBox="0 0 {size} {svg_height}"
   {...rest}
-  class="bar-chart {rest.class ?? ``}"
+  class={[`bar-chart`, rest.class]}
   style:max-width="{size}px"
   bind:this={svg_node}
 >
@@ -161,8 +167,7 @@
 
   <!-- External labels above -->
   {#each segments as segment (segment.element)}
-    {#if show_labels && segment.needs_external_label &&
-      segment.external_label_position === `above`}
+    {#if show_labels && segment.needs_external_label && segment.external_label_position === `above`}
       <text
         x={segment.label_x}
         y={above_labels_y}
@@ -205,20 +210,19 @@
         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~%`)})`,
-        }
-        : {})}
+        {...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~%`)
-          })
+          {segment.element}: {segment.amount}
+          {segment.amount === 1 ? `atom` : `atoms`} ({format_num(segment.fraction, `.1~%`)})
         </title>
       </rect>
       {#if segment_content}
@@ -245,8 +249,7 @@
 
   <!-- External labels below -->
   {#each segments as segment (segment.element)}
-    {#if show_labels && segment.needs_external_label &&
-      segment.external_label_position === `below`}
+    {#if show_labels && segment.needs_external_label && segment.external_label_position === `below`}
       <text
         x={segment.label_x}
         y={below_labels_y}
@@ -274,18 +277,21 @@
   .bar-segment.interactive {
     cursor: pointer;
   }
-  .bar-segment.interactive:hover, .bar-segment.hovered {
+  .bar-segment.interactive:hover,
+  .bar-segment.hovered {
     filter: brightness(1.1);
   }
   .bar-segment.interactive:focus {
     outline: 2px solid var(--focus-color, #0066cc);
     outline-offset: 2px;
   }
-  .external-label, .bar-label {
+  .external-label,
+  .bar-label {
     transition: all 0.2s ease;
     pointer-events: none;
   }
-  .external-label.hovered, .bar-label.hovered {
+  .external-label.hovered,
+  .bar-label.hovered {
     font-weight: 700;
   }
   .element-symbol {

package/dist/composition/BubbleChart.svelte

@@ -60,14 +60,13 @@
     }
 
     // Use D3's pack layout for proper circle packing
-    const pack_layout = pack<HierarchyData | Child>().size([
-      size - 2 * padding,
-      size - 2 * padding,
-    ]).padding(padding * 0.1) // Small padding between circles
+    const pack_layout = pack<HierarchyData | Child>()
+      .size([size - 2 * padding, size - 2 * padding])
+      .padding(padding * 0.1) // Small padding between circles
 
     const root = pack_layout(
-      hierarchy<HierarchyData | Child>(hierarchy_data).sum(
-        (data) => (`amount` in data ? data.amount : 0),
+      hierarchy<HierarchyData | Child>(hierarchy_data).sum((data) =>
+        `amount` in data ? data.amount : 0,
       ),
     )
 
@@ -82,8 +81,7 @@
       // Calculate font scale based on bubble size and smart text fitting
       const [min_font_scale, max_font_scale] = [0.6, 2] as const
       const scale_factor = radius / max_radius
-      const base_scale = min_font_scale +
-        scale_factor * (max_font_scale - min_font_scale)
+      const base_scale = min_font_scale + scale_factor * (max_font_scale - min_font_scale)
       const label_text = data.element + (show_amounts ? data.amount.toString() : ``)
       const available_space = radius * 2 * 0.8 // 80% of bubble diameter for text
       const font_scale = get_chart_font_scale(base_scale, label_text, available_space)
@@ -109,7 +107,7 @@
   viewBox="0 0 {size} {size}"
   style:max-width="{size}px"
   {...rest}
-  class="bubble-chart {rest.class ?? ``}"
+  class={[`bubble-chart`, rest.class]}
   bind:this={svg_node}
 >
   {#each bubbles as bubble (bubble.element)}
@@ -134,7 +132,8 @@
       }}
     >
       <title>
-        {bubble.element}: {bubble.amount} {bubble.amount === 1 ? `atom` : `atoms`}
+        {bubble.element}: {bubble.amount}
+        {bubble.amount === 1 ? `atom` : `atoms`}
       </title>
     </circle>
 
@@ -154,13 +153,13 @@
         class:hovered={hovered_element === bubble.element}
       >
         <div class="bubble-label" style:color={bubble.text_color}>
-          <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px">{
-            bubble.element
-          }</span>
+          <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px"
+            >{bubble.element}</span
+          >
           {#if show_amounts}
-            <sub class="amount" style:font-size="{8 * bubble.font_scale}px">{
-              bubble.amount
-            }</sub>
+            <sub class="amount" style:font-size="{8 * bubble.font_scale}px"
+              >{bubble.amount}</sub
+            >
           {/if}
         </div>
       </foreignObject>
@@ -177,7 +176,8 @@
   .bubble.interactive {
     cursor: pointer;
   }
-  .bubble.interactive:hover, .bubble.hovered {
+  .bubble.interactive:hover,
+  .bubble.hovered {
     filter: brightness(1.1);
   }
   .bubble.interactive:focus {

package/dist/composition/Composition.svelte

@@ -30,9 +30,7 @@
   let current_mode = $state(untrack(() => mode))
   let svg_node = $state<SVGSVGElement | null>(null)
 
-  let Component = $derived(
-    { pie: PieChart, bubble: BubbleChart, bar: BarChart }[current_mode],
-  )
+  let Component = $derived({ pie: PieChart, bubble: BubbleChart, bar: BarChart }[current_mode])
   let parsed: CompositionType = $derived.by(() => {
     try {
       return parse_composition(composition)
@@ -46,13 +44,14 @@
 
   let context_menu = $state({ open: false, x: 0, y: 0 })
 
-  function handle_right_click(event: MouseEvent) { // open context menu
+  function handle_right_click(event: MouseEvent) {
+    // open context menu
     event.preventDefault()
     context_menu.open = false // Close any existing context menu first
     context_menu.x = event.pageX
     context_menu.y = event.pageY
     // Use a small delay to ensure the prev context menu closes happens before opening new one
-    setTimeout(() => context_menu.open = true, 0)
+    setTimeout(() => (context_menu.open = true), 0)
   }
 
   const mode_options = [
@@ -89,10 +88,7 @@
     { title: sec_titles.export, options: export_options },
   ] as const
 
-  function handle_context_menu_select(
-    section_title: string,
-    option: { value: string },
-  ) {
+  function handle_context_menu_select(section_title: string, option: { value: string }) {
     if (section_title === sec_titles.display_mode) {
       current_mode = option.value as CompositionChartMode
     } else if (section_title === sec_titles.color_scheme) {
@@ -147,7 +143,7 @@
   aria-haspopup="menu"
   aria-expanded={context_menu.open}
   {...rest}
-  class="composition {rest.class ?? ``}"
+  class={[`composition`, rest.class]}
 />
 
 {#if context_menu.open}
@@ -160,6 +156,6 @@
     on_select={handle_context_menu_select}
     position={context_menu}
     visible={context_menu.open}
-    on_close={() => context_menu.open = false}
+    on_close={() => (context_menu.open = false)}
   />
 {/if}

package/dist/composition/Formula.svelte

@@ -6,11 +6,7 @@
   import ElementTile from '../element/ElementTile.svelte'
   import { format_num } from '../labels'
   import type { HTMLAttributes } from 'svelte/elements'
-  import {
-    format_oxi_state,
-    sort_by_electronegativity,
-    sort_by_hill_notation,
-  } from './format'
+  import { format_oxi_state, sort_by_electronegativity, sort_by_hill_notation } from './format'
   import type { ElementWithOxidation, OxiComposition } from './parse'
   import { oxi_composition_to_elements, parse_formula_with_oxidation } from './parse'
 
@@ -63,9 +59,7 @@
       return sorted[0] === el1.element ? -1 : 1
     },
   }
-  const sorted_elements = $derived(
-    [...parsed_elements].sort(COMPARATORS[ordering]),
-  )
+  const sorted_elements = $derived([...parsed_elements].sort(COMPARATORS[ordering]))
 
   let hovered_element = $state<ElementSymbol | null>(null)
   let tooltip_pos = $state({ x: 0, y: 0 })
@@ -97,7 +91,8 @@
     if (
       !formula_el.contains(selection.anchorNode) ||
       !formula_el.contains(selection.focusNode)
-    ) return // Selection extends outside formula, let browser handle normally
+    )
+      return // Selection extends outside formula, let browser handle normally
     event.preventDefault()
     event.clipboardData?.setData(`text/plain`, plain_text_formula)
   }
@@ -106,8 +101,8 @@
     element: ElementSymbol,
     event: MouseEvent & { currentTarget: HTMLElement },
   ) {
-    const { left, width, top, bottom, right, height } = event.currentTarget
-      .getBoundingClientRect()
+    const { left, width, top, bottom, right, height } =
+      event.currentTarget.getBoundingClientRect()
     hovered_element = element
 
     const positions = {
@@ -121,12 +116,7 @@
   }
 </script>
 
-<svelte:element
-  this={as}
-  {...rest}
-  class="formula {rest.class ?? ``}"
-  oncopy={handle_copy}
->
+<svelte:element this={as} {...rest} class={[`formula`, rest.class]} oncopy={handle_copy}>
   {#each sorted_elements as { element, amount, oxidation_state } (element)}
     {@const color = ELEMENT_COLOR_SCHEMES[color_scheme]?.[element] ?? `#666666`}
     {@const lum = luminance(color)}
@@ -151,14 +141,16 @@
         class:light-border={lum < 0.15}
         style:color
       >
-        {element}</span>
-      <span class="script-wrapper">{#if has_oxidation}
+        {element}</span
+      >
+      <span class="script-wrapper"
+        >{#if has_oxidation}
           <sup class="oxi">{format_oxi_state(oxidation_state)}</sup>
         {/if}
         {#if amount !== 1}
-          <sub class="amt" class:no-sup={!has_oxidation}>{
-            format_num(amount, amount_format)
-          }</sub>
+          <sub class="amt" class:no-sup={!has_oxidation}
+            >{format_num(amount, amount_format)}</sub
+          >
         {/if}
       </span>
     </span>
@@ -167,8 +159,8 @@
 
 {#if hovered_elem_data}
   {@const { x, y } = tooltip_pos}
-  {@const tile_color = ELEMENT_COLOR_SCHEMES[color_scheme]?.[hovered_elem_data.symbol] ??
-    `#666666`}
+  {@const tile_color =
+    ELEMENT_COLOR_SCHEMES[color_scheme]?.[hovered_elem_data.symbol] ?? `#666666`}
   {@const transforms = {
     top: `translate(-50%, -100%)`,
     bottom: `translateX(-50%)`,
@@ -250,7 +242,8 @@
   .script-wrapper:empty {
     display: none;
   }
-  .amt, .oxi {
+  .amt,
+  .oxi {
     font-size: var(--formula-script-font-size, 0.7em);
     line-height: var(--formula-script-inner-line-height, 1);
   }