matterviz 0.4.1 → 0.4.2

package/dist/coordination/calc-coordination.d.ts

@@ -12,4 +12,4 @@ export interface CoordinationData {
     cn_histogram: Map<number, number>;
     cn_histogram_by_element: Map<string, Map<number, number>>;
 }
-export declare function calc_coordination_nums(structure: AnyStructure, strategy?: BondingStrategy): CoordinationData;
+export declare function calc_coordination_nums(structure: AnyStructure, strategy?: BondingStrategy, center_count?: number): CoordinationData;

package/dist/coordination/calc-coordination.js

@@ -1,4 +1,4 @@
-import { BONDING_STRATEGIES } from '../structure/bonding';
+import { BONDING_STRATEGIES, get_majority_element } from '../structure/bonding';
 // Calculate coordination numbers for all sites in a structure using the specified bonding strategy.
 //
 // Note: This function operates on the sites present in the structure. For structures with periodic
@@ -10,48 +10,51 @@ import { BONDING_STRATEGIES } from '../structure/bonding';
 // - Image atoms are appended after the original sites
 // - Bonds will be calculated between original and image atoms
 // - Caller should extract coordination numbers for only the first N sites (original atoms)
-export function calc_coordination_nums(structure, strategy = `electroneg_ratio`) {
+export function calc_coordination_nums(structure, strategy = `electroneg_ratio`, 
+// Limit bond centers to the first `center_count` sites (default: all). Callers that
+// appended PBC image atoms pass the original-atom count so images count as neighbors
+// but aren't iterated as centers — identical coordination for the originals, faster.
+center_count) {
     // Get bonds using the specified strategy
-    const bonds = BONDING_STRATEGIES[strategy](structure);
-    // Count neighbors for each site
-    const neighbor_counts = new Map();
+    const bonds = BONDING_STRATEGIES[strategy](structure, { center_count });
     const sites = structure.sites;
-    for (const bond of bonds) {
-        const { site_idx_1, site_idx_2 } = bond;
-        if (!neighbor_counts.has(site_idx_1)) {
-            neighbor_counts.set(site_idx_1, new Set());
-        }
-        if (!neighbor_counts.has(site_idx_2)) {
-            neighbor_counts.set(site_idx_2, new Set());
-        }
-        const neighbors_1 = neighbor_counts.get(site_idx_1);
-        const neighbors_2 = neighbor_counts.get(site_idx_2);
-        if (neighbors_1)
-            neighbors_1.add(site_idx_2);
-        if (neighbors_2)
-            neighbors_2.add(site_idx_1);
+    // Build adjacency sets: each bond adds both endpoints to the other's neighbor set
+    const neighbor_counts = new Map();
+    const add_neighbor = (site_idx, neighbor_idx) => {
+        const neighbors = neighbor_counts.get(site_idx) ?? new Set();
+        neighbors.add(neighbor_idx);
+        neighbor_counts.set(site_idx, neighbors);
+    };
+    for (const { site_idx_1, site_idx_2 } of bonds) {
+        add_neighbor(site_idx_1, site_idx_2);
+        add_neighbor(site_idx_2, site_idx_1);
     }
     // Build coordination site data
     const coordination_sites = [];
     const cn_by_element = new Map();
     const cn_histogram = new Map();
     const cn_histogram_by_element = new Map();
+    const inc = (map, key) => map.set(key, (map.get(key) ?? 0) + 1);
+    // PBC-expanded structures pass center_count: only the first center_count sites are real
+    // centers; image atoms still count as neighbors but aren't iterated as centers
+    const center_limit = center_count ?? sites.length;
     for (const [site_idx, site] of sites.entries()) {
-        const element = site.species[0]?.element ?? `Unknown`;
+        if (site_idx >= center_limit)
+            break;
+        const element = get_majority_element(site) ?? `Unknown`;
         const neighbors_set = neighbor_counts.get(site_idx) ?? new Set();
         const coordination_num = neighbors_set.size;
         // Get neighbor elements
-        const neighbor_elements = Array.from(neighbors_set).map((neighbor_idx) => sites[neighbor_idx].species[0]?.element ?? `Unknown`);
+        const neighbor_elements = Array.from(neighbors_set).map((neighbor_idx) => get_majority_element(sites[neighbor_idx]) ?? `Unknown`);
         coordination_sites.push({ site_idx, element, coordination_num, neighbor_elements });
         // Update cn_by_element
         const element_array = cn_by_element.get(element) ?? [];
         element_array.push(coordination_num);
         cn_by_element.set(element, element_array);
-        // Update overall cn_histogram
-        cn_histogram.set(coordination_num, (cn_histogram.get(coordination_num) ?? 0) + 1);
-        // Update cn_histogram_by_element
+        // Update overall + per-element histograms
+        inc(cn_histogram, coordination_num);
         const element_histogram = cn_histogram_by_element.get(element) ?? new Map();
-        element_histogram.set(coordination_num, (element_histogram.get(coordination_num) ?? 0) + 1);
+        inc(element_histogram, coordination_num);
         cn_histogram_by_element.set(element, element_histogram);
     }
     return {

package/dist/element/BohrAtom.svelte

@@ -33,11 +33,7 @@
     electron_props?: Record<string, string | number>
     highlight_shell?: number | null
     // if function, it'll be called with electron index and should return a string
-    number_electrons?:
-      | boolean
-      | `hierarchical`
-      | `sequential`
-      | ((idx: number) => string)
+    number_electrons?: boolean | `hierarchical` | `sequential` | ((idx: number) => string)
     electron_label_props?: Record<string, string | number>
   } = $props()
 
@@ -68,7 +64,7 @@
   fill={base_fill}
   {viewBox}
   role={name || symbol ? `img` : undefined}
-  aria-label={(name || symbol) || undefined}
+  aria-label={name || symbol || undefined}
   aria-hidden={name || symbol ? undefined : `true`}
   {...rest}
 >
@@ -116,8 +112,9 @@
               <!-- {:else if [`sequential`, true].includes(number_electrons)} -->
             {:else}
               {@const nth_electron =
-          shells.slice(0, shell_idx).reduce((sum, count) => sum + count, 0) +
-          elec_idx + 1}
+                shells.slice(0, shell_idx).reduce((sum, count) => sum + count, 0) +
+                elec_idx +
+                1}
               {nth_electron}
             {/if}
           </text>

package/dist/element/ElementHeading.svelte

@@ -2,7 +2,10 @@
   import type { ChemicalElement } from './'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { element, ...rest }: HTMLAttributes<HTMLHeadingElement> & {
+  let {
+    element,
+    ...rest
+  }: HTMLAttributes<HTMLHeadingElement> & {
     element: ChemicalElement
   } = $props()
 </script>

package/dist/element/ElementPhoto.svelte

@@ -3,9 +3,14 @@
   import Icon from '../Icon.svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { element, missing_msg = `No image for `, ...rest }:
-    & HTMLAttributes<HTMLImageElement | HTMLDivElement>
-    & { element: ChemicalElement; missing_msg?: string } = $props()
+  let {
+    element,
+    missing_msg = `No image for `,
+    ...rest
+  }: HTMLAttributes<HTMLImageElement | HTMLDivElement> & {
+    element: ChemicalElement
+    missing_msg?: string
+  } = $props()
 
   let { name, number } = $derived(element ?? {})
   let file = $derived(`elements/${number}-${name?.toLowerCase()}.avif`)
@@ -21,7 +26,8 @@
   {#if hidden && missing_msg}
     <div {...rest}>
       <span>
-        <Icon icon="NoImage" />&nbsp;{missing_msg} {name}
+        <Icon icon="NoImage" />&nbsp;{missing_msg}
+        {name}
       </span>
     </div>
   {/if}
@@ -41,11 +47,7 @@
     padding: var(--element-photo-padding, 3pt);
     box-sizing: border-box;
     place-items: center;
-    background-image: linear-gradient(
-      to top left,
-      rgba(0, 100, 0, 0.5),
-      rgba(0, 0, 100, 0.3)
-    );
+    background-image: linear-gradient(to top left, rgba(0, 100, 0, 0.5), rgba(0, 0, 100, 0.3));
     color: var(--text-color);
     border-radius: var(--element-photo-border-radius, var(--border-radius, 3pt));
     width: 100%;

package/dist/element/ElementStats.svelte

@@ -5,24 +5,25 @@
   import ElementHeading from './ElementHeading.svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { element, ...rest }: HTMLAttributes<HTMLDivElement> & {
+  let {
+    element,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
     element: ChemicalElement | null
   } = $props()
 </script>
 
 {#if element}
   <div {...rest}>
-    <ElementHeading
-      {element}
-      style="font-size: 6cqw; grid-column: 1/-1; margin: auto 0 0"
-    />
+    <ElementHeading {element} style="font-size: 6cqw; grid-column: 1/-1; margin: auto 0 0" />
     <section>
       <p>
         Atomic Mass
         <abbr title="Dalton aka atomic mass unit">(u)</abbr>
       </p>
       <strong>
-        <Icon icon="Weight" /> {format_num(element.atomic_mass)}
+        <Icon icon="Weight" />
+        {format_num(element.atomic_mass)}
       </strong>
     </section>
     <section>
@@ -31,18 +32,19 @@
         <abbr title="grams per cubic centimeter">(g/cm³)</abbr>
       </p>
       <strong>
-        <Icon icon="Scale" /> {format_num(element.density)}
+        <Icon icon="Scale" />
+        {format_num(element.density)}
       </strong>
     </section>
     <section>
       <p>Phase</p>
-      <strong>
-        <Icon icon={element.phase} /> {element.phase}</strong>
+      <strong> <Icon icon={element.phase} /> {element.phase}</strong>
     </section>
     <section>
       <p>Year of Discovery</p>
       <strong>
-        <Icon icon="CalendarBlank" /> {element.year}
+        <Icon icon="CalendarBlank" />
+        {element.year}
       </strong>
     </section>
   </div>

package/dist/element/ElementTile.svelte

@@ -5,12 +5,7 @@
   import { colors, selected } from '../state.svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  type SplitLayout =
-    | `diagonal`
-    | `horizontal`
-    | `vertical`
-    | `triangular`
-    | `quadrant`
+  type SplitLayout = `diagonal` | `horizontal` | `vertical` | `triangular` | `quadrant`
   let {
     element,
     bg_color = undefined,
@@ -56,9 +51,7 @@
   } = $props()
 
   // background color defaults to category color (initialized in colors/index.ts, user editable in PeriodicTableControls.svelte)
-  let fallback_bg_color = $derived(
-    bg_color ?? colors.category[element.category] ?? `#cccccc`,
-  )
+  let fallback_bg_color = $derived(bg_color ?? colors.category[element.category] ?? `#cccccc`)
 
   // Compute contrast text color from background when in heatmap mode (single bg_color)
   let computed_text_color = $derived(
@@ -85,7 +78,7 @@
 
     // Handle string values - check if it's a numeric string
     if (typeof val === `string`) {
-      const parsed_num = parseFloat(val)
+      const parsed_num = Number(val)
       if (isFinite(parsed_num)) return format_num(parsed_num, float_fmt)
       // If show_values is true, return the string as-is to preserve non-numeric strings
       return show_values === true ? val : ``
@@ -107,11 +100,13 @@
 
     const count = value.length
     // Use explicit split_layout or auto-determine based on count
-    const layout = split_layout ?? {
-      2: `diagonal`,
-      3: `horizontal`,
-      4: `quadrant`,
-    }[count] as SplitLayout | undefined
+    const layout =
+      split_layout ??
+      ({
+        2: `diagonal`,
+        3: `horizontal`,
+        4: `quadrant`,
+      }[count] as SplitLayout | undefined)
 
     if (!layout) return null
 
@@ -139,9 +134,7 @@
     if (layout === `triangular` && count === 4) {
       return {
         segments: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}`),
-        positions: [`top`, `right`, `bottom`, `left`].map((pos) =>
-          `triangle-${pos}-pos`
-        ),
+        positions: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}-pos`),
       }
     }
 
@@ -158,16 +151,18 @@
 <svelte:element
   this={href ? `a` : `div`}
   bind:this={node}
-  {...(href ? { href } : {})}
+  {...href ? { href } : {}}
   class="element-tile"
   data-category={element.category}
   class:active
   class:last-active={selected.last_element === element}
   class:clickable={Boolean(onclick)}
-  style:background-color={Array.isArray(value) && bg_colors?.length > 1 ? `transparent` : fallback_bg_color}
+  style:background-color={Array.isArray(value) && bg_colors?.length > 1
+    ? `transparent`
+    : fallback_bg_color}
   style:color={computed_text_color}
   {@attach computed_text_color ? null : contrast_color()}
-  {...(href ? { role: `link`, tabindex: 0 } : {})}
+  {...href ? { role: `link`, tabindex: 0 } : {}}
   onclick={(event: MouseEvent) => onclick?.({ element, event })}
   {...rest}
 >
@@ -189,11 +184,11 @@
           <span
             class="value multi-value {layout_config.positions[idx]}"
             style:color={bg_colors?.[idx]
-            ? pick_contrast_color({
-              bg_color: bg_colors[idx] ?? fallback_bg_color,
-              luminance_threshold,
-            })
-            : null}
+              ? pick_contrast_color({
+                  bg_color: bg_colors[idx] ?? fallback_bg_color,
+                  luminance_threshold,
+                })
+              : null}
           >
             {format_value(val)}
           </span>
@@ -219,8 +214,7 @@
         <div
           class="segment {layout_config.segments[idx]}"
           style:background-color={bg_color}
-        >
-        </div>
+        ></div>
       {/if}
     {/each}
   {/if}
@@ -247,7 +241,8 @@
   .element-tile span {
     line-height: 1em;
   }
-  .element-tile.active, .element-tile:hover {
+  .element-tile.active,
+  .element-tile:hover {
     border: var(--elem-tile-active-border, 1px solid currentColor);
   }
   .element-tile.clickable {

package/dist/element/Nucleus.svelte

@@ -64,7 +64,8 @@
     y={radius + (radius / 2) * Math.sin(Math.PI * -proton_frac)}
     {...text}
   >
-    {protons} {proton_label}
+    {protons}
+    {proton_label}
   </text>
 
   <text
@@ -72,7 +73,8 @@
     y={radius + (radius / 2) * Math.sin(Math.PI * neutron_frac)}
     {...text}
   >
-    {neutrons} {neutron_label}
+    {neutrons}
+    {neutron_label}
   </text>
 
   {#if symbol}

package/dist/element/data.d.ts

@@ -1,2 +1 @@
-import data from './data.json.gz';
-export default data;
+export { default } from './data.json.gz';

package/dist/element/helpers.d.ts

@@ -0,0 +1,4 @@
+import type { ElementSymbol } from './types';
+export declare const is_elem_symbol: (symbol: string) => symbol is ElementSymbol;
+export declare const coerce_elem_symbol: (symbol: string) => ElementSymbol | undefined;
+export declare const FALLBACK_ELEMENTS: readonly ["H", "He", "Li", "Be", "B", "C", "N", "O", "F", "Ne"];

package/dist/element/helpers.js

@@ -0,0 +1,18 @@
+import { ELEM_SYMBOLS } from '../labels';
+// Set-backed O(1) element-symbol guard shared by all parsers
+const ELEM_SYMBOL_SET = new Set(ELEM_SYMBOLS);
+export const is_elem_symbol = (symbol) => ELEM_SYMBOL_SET.has(symbol);
+export const coerce_elem_symbol = (symbol) => is_elem_symbol(symbol) ? symbol : undefined;
+// Default element symbols used when a file omits or mangles element info
+export const FALLBACK_ELEMENTS = [
+    `H`,
+    `He`,
+    `Li`,
+    `Be`,
+    `B`,
+    `C`,
+    `N`,
+    `O`,
+    `F`,
+    `Ne`,
+];

package/dist/element/index.d.ts

@@ -1,4 +1,3 @@
-import type { ElementSymbol } from './types';
 export type * from './types';
 export { default as BohrAtom } from './BohrAtom.svelte';
 export { default as element_data } from './data';
@@ -6,7 +5,5 @@ export { default as ElementHeading } from './ElementHeading.svelte';
 export { default as ElementPhoto } from './ElementPhoto.svelte';
 export { default as ElementStats } from './ElementStats.svelte';
 export { default as ElementTile } from './ElementTile.svelte';
+export * from './helpers';
 export { default as Nucleus } from './Nucleus.svelte';
-export declare const is_elem_symbol: (symbol: string) => symbol is ElementSymbol;
-export declare const coerce_elem_symbol: (symbol: string) => ElementSymbol | undefined;
-export declare const FALLBACK_ELEMENTS: readonly ["H", "He", "Li", "Be", "B", "C", "N", "O", "F", "Ne"];

package/dist/element/index.js

@@ -1,25 +1,10 @@
-import { ELEM_SYMBOLS } from '../labels';
 export { default as BohrAtom } from './BohrAtom.svelte';
 export { default as element_data } from './data';
 export { default as ElementHeading } from './ElementHeading.svelte';
 export { default as ElementPhoto } from './ElementPhoto.svelte';
 export { default as ElementStats } from './ElementStats.svelte';
 export { default as ElementTile } from './ElementTile.svelte';
+// Pure helpers live in ./helpers (no Svelte imports) so parser modules can use
+// them inside Web Workers; re-exported here for everyone else.
+export * from './helpers';
 export { default as Nucleus } from './Nucleus.svelte';
-// Set-backed O(1) element-symbol guard shared by all parsers
-const ELEM_SYMBOL_SET = new Set(ELEM_SYMBOLS);
-export const is_elem_symbol = (symbol) => ELEM_SYMBOL_SET.has(symbol);
-export const coerce_elem_symbol = (symbol) => is_elem_symbol(symbol) ? symbol : undefined;
-// Default element symbols used when a file omits or mangles element info
-export const FALLBACK_ELEMENTS = [
-    `H`,
-    `He`,
-    `Li`,
-    `Be`,
-    `B`,
-    `C`,
-    `N`,
-    `O`,
-    `F`,
-    `Ne`,
-];

package/dist/feedback/DragOverlay.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import Icon from '../Icon.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
   let {
     visible = false,
-    message = `Drop JSON file to load phase diagram data`,
-    style = undefined,
+    message = `Drop file to load`,
+    ...rest
   }: {
     visible?: boolean
     message?: string
-    style?: string
-  } = $props()
+  } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
 {#if visible}
-  <div class="drag-overlay" {style}>
+  <div {...rest} class={[`drag-overlay`, rest.class]}>
     <div class="drag-message">
       <Icon icon="Info" />
       <span>{message}</span>

package/dist/feedback/DragOverlay.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     visible?: boolean;
     message?: string;
-    style?: string;
-};
+} & HTMLAttributes<HTMLDivElement>;
 declare const DragOverlay: import("svelte").Component<$$ComponentProps, {}, "">;
 type DragOverlay = ReturnType<typeof DragOverlay>;
 export default DragOverlay;

package/dist/feedback/StatusMessage.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { message = $bindable(), type = `info`, dismissible = false, ...rest }: {
+  let {
+    message = $bindable(),
+    type = `info`,
+    dismissible = false,
+    ...rest
+  }: {
     message?: string
     type?: `info` | `error` | `warning`
     dismissible?: boolean
@@ -17,9 +22,7 @@
   >
     {message}
     {#if dismissible}
-      <button onclick={() => (message = undefined)} aria-label="Dismiss message">
-        ✕
-      </button>
+      <button onclick={() => (message = undefined)} aria-label="Dismiss message"> ✕ </button>
     {/if}
   </div>
 {/if}

package/dist/fermi-surface/FermiSlice.svelte

@@ -86,7 +86,10 @@
     const isolines = slice_data?.isolines
     if (!isolines?.length) return { min: [-1, -1], max: [1, 1] }
 
-    let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity
+    let xmin = Infinity,
+      xmax = -Infinity,
+      ymin = Infinity,
+      ymax = -Infinity
     for (const iso of isolines) {
       for (const pt of iso.points_2d) {
         if (pt[0] < xmin) xmin = pt[0]
@@ -97,13 +100,14 @@
     }
     if (!isFinite(xmin)) return { min: [-1, -1], max: [1, 1] }
 
-    const pad = 0.1, rx = xmax - xmin || 1, ry = ymax - ymin || 1
+    const pad = 0.1,
+      rx = xmax - xmin || 1,
+      ry = ymax - ymin || 1
     return {
       min: [xmin - rx * pad, ymin - ry * pad],
       max: [xmax + rx * pad, ymax + ry * pad],
     }
   })
-
   function toggle_band(series_idx: number) {
     const band = slice_data?.isolines[series_idx]?.band_index
     if (band === undefined) return
@@ -114,9 +118,7 @@
   function isolate_band(series_idx: number) {
     const band = slice_data?.isolines[series_idx]?.band_index
     if (band === undefined) return
-    const all_bands = [
-      ...new Set(slice_data?.isolines.map((iso) => iso.band_index)),
-    ]
+    const all_bands = [...new Set(slice_data?.isolines.map((iso) => iso.band_index))]
     const is_solo = all_bands.every((bid) => bid === band || hidden_bands.has(bid))
     hidden_bands.clear()
     if (!is_solo) {
@@ -127,8 +129,7 @@
   }
 
   // Returns null if SVG not found, making export failures explicit
-  const export_svg = (): string | null =>
-    wrapper?.querySelector(`svg`)?.outerHTML ?? null
+  const export_svg = (): string | null => wrapper?.querySelector(`svg`)?.outerHTML ?? null
 </script>
 
 <ScatterPlot
@@ -143,16 +144,16 @@
   controls={{ show: false }}
   fullscreen_toggle={false}
   legend={show_legend && series.length > 0
-  ? {
-    on_toggle: toggle_band,
-    on_double_click: isolate_band,
-    draggable: false,
-    // pin bottom-right so it clears the top-left title/controls overlay (e.g. in the demo)
-    style: `left: auto; top: auto; right: 8px; bottom: 8px`,
-  }
-  : null}
+    ? {
+        on_toggle: toggle_band,
+        on_double_click: isolate_band,
+        draggable: false,
+        // pin bottom-right so it clears the top-left title/controls overlay (e.g. in the demo)
+        style: `left: auto; top: auto; right: 8px; bottom: 8px`,
+      }
+    : null}
   padding={{ t: 5, b: 5, l: 5, r: 5 }}
-  class="fermi-slice {rest.class ?? ``}"
+  class={[`fermi-slice`, rest.class]}
   style={rest.style}
 >
   {#snippet user_content({ x_scale_fn, y_scale_fn, pad, width, height })}
@@ -192,6 +193,8 @@
   }
   .fermi-label {
     fill: var(--fermi-surface-axis-color, #888);
-    font: 12px system-ui, sans-serif;
+    font:
+      12px system-ui,
+      sans-serif;
   }
 </style>