matterviz 0.1.12 → 0.1.13

package/dist/index.js

@@ -1,6 +1,9 @@
+export * from './bands';
+export * from './brillouin';
 export * from './colors';
 export * from './composition';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export * from './coordination';
 export { default as DraggablePane } from './DraggablePane.svelte';
 export * from './element';
 export { default as FilePicker } from './FilePicker.svelte';
@@ -9,18 +12,19 @@ export { icon_data } from './icons';
 export { default as InfoCard } from './InfoCard.svelte';
 export * from './io';
 export * from './labels';
-export * from './material';
 export * from './math';
 export { default as Nav } from './Nav.svelte';
 export * from './periodic-table';
 export * from './phase-diagram';
 export * from './plot';
+export * from './rdf';
 export * from './settings';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export * from './structure';
 export * from './theme';
 export { default as Trajectory } from './trajectory/Trajectory.svelte';
+export * from './utils';
 export * from './xrd';
 export const crystal_systems = [
     `triclinic`,

package/dist/io/export.d.ts

@@ -4,15 +4,10 @@ import { WebGLRenderer } from 'three';
 export interface CanvasWithRenderer extends HTMLCanvasElement {
     __customRenderer?: WebGLRenderer;
 }
-export declare function export_canvas_as_png(canvas: HTMLCanvasElement | null, structure: AnyStructure | undefined, png_dpi?: number, scene?: THREE.Scene | null, camera?: THREE.Camera | null): void;
+export declare function export_canvas_as_png(canvas: HTMLCanvasElement | null, structure_or_filename: AnyStructure | string | undefined, png_dpi?: number, scene?: THREE.Scene | null, camera?: THREE.Camera | null): void;
 export declare function export_svg_as_svg(svg_element: SVGElement | null, filename: string): void;
 export declare function export_svg_as_png(svg_element: SVGElement | null, filename: string, png_dpi?: number): void;
-/** Generate FFmpeg command for WebM to MP4 conversion */
 export declare function get_ffmpeg_conversion_command(input_filename: string): string;
-/**
- * Export trajectory video as WebM with frame-by-frame rendering (prevents dropped frames).
- * Note: Browsers only support WebM natively. Use FFmpeg for MP4 conversion (see get_ffmpeg_conversion_command).
- */
 export declare function export_trajectory_video(canvas: HTMLCanvasElement | null, filename: string, options?: {
     fps?: number;
     total_frames?: number;

package/dist/io/export.js

@@ -2,7 +2,7 @@ import { download } from './fetch';
 import { create_structure_filename } from '../structure/export';
 import { Vector2, WebGLRenderer } from 'three';
 // Export structure as PNG image from canvas
-export function export_canvas_as_png(canvas, structure, png_dpi = 150, scene = null, camera = null) {
+export function export_canvas_as_png(canvas, structure_or_filename, png_dpi = 150, scene = null, camera = null) {
     try {
         if (!canvas) {
             if (typeof window !== `undefined`) {
@@ -10,6 +10,10 @@ export function export_canvas_as_png(canvas, structure, png_dpi = 150, scene = n
             }
             return;
         }
+        // Determine filename from either structure or direct filename
+        const filename = typeof structure_or_filename === `string`
+            ? structure_or_filename
+            : create_structure_filename(structure_or_filename, `png`);
         // Convert DPI to multiplier (72 DPI is baseline web resolution)
         // Cap to a reasonable upper bound to avoid excessive memory use
         const resolution_multiplier = Math.min(png_dpi / 72, 10);
@@ -19,7 +23,6 @@ export function export_canvas_as_png(canvas, structure, png_dpi = 150, scene = n
             try {
                 canvas.toBlob((blob) => {
                     if (blob) {
-                        const filename = create_structure_filename(structure, `png`);
                         download(blob, filename, `image/png`);
                     }
                     else {
@@ -51,7 +54,6 @@ export function export_canvas_as_png(canvas, structure, png_dpi = 150, scene = n
                 renderer.setPixelRatio(original_pixel_ratio);
                 renderer.setSize(original_size.width, original_size.height, false);
                 if (blob) {
-                    const filename = create_structure_filename(structure, `png`);
                     download(blob, filename, `image/png`);
                 }
                 else {
@@ -182,15 +184,13 @@ export function export_svg_as_png(svg_element, filename, png_dpi = 150) {
         console.error(`Error exporting PNG:`, error);
     }
 }
-/** Generate FFmpeg command for WebM to MP4 conversion */
+// Generate FFmpeg command for WebM to MP4 conversion
 export function get_ffmpeg_conversion_command(input_filename) {
     const output = input_filename.replace(/\.webm$/i, `.mp4`);
     return `ffmpeg -i "${input_filename}" -c:v libx264 -preset medium -crf 18 -pix_fmt yuv420p -movflags faststart "${output}"`;
 }
-/**
- * Export trajectory video as WebM with frame-by-frame rendering (prevents dropped frames).
- * Note: Browsers only support WebM natively. Use FFmpeg for MP4 conversion (see get_ffmpeg_conversion_command).
- */
+// Export trajectory video as WebM with frame-by-frame rendering to prevent dropped frames.
+// Note: Browsers only support WebM natively. Use FFmpeg for MP4 conversion (see get_ffmpeg_conversion_command).
 export async function export_trajectory_video(canvas, filename, options = {}) {
     const { fps = 30, total_frames = 100, on_progress, on_step, resolution_multiplier = 1, } = options;
     if (!canvas ||
@@ -211,9 +211,8 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
     }
     // Calculate bitrate based on actual video dimensions
     // VP9 typically needs 0.08-0.12 bits per pixel per frame for good quality
-    const target_width = canvas.width * resolution_multiplier;
-    const target_height = canvas.height * resolution_multiplier;
-    const pixels_per_frame = target_width * target_height;
+    // canvas dimensions include device pixel ratio and any resolution_multiplier
+    const pixels_per_frame = canvas.width * canvas.height;
     const bits_per_pixel_per_frame = 0.1; // Good quality for VP9
     // Clamp bitrate to reasonable bounds (1 Mbps min, 200 Mbps max)
     const calculated_bitrate = pixels_per_frame * fps * bits_per_pixel_per_frame;
@@ -281,7 +280,8 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
             if (is_resolved)
                 return;
             is_resolved = true;
-            reject(new Error(`MediaRecorder error: ${event}`));
+            // Extract error details from MediaRecorderErrorEvent or ErrorEvent
+            reject(new Error(`MediaRecorder error: ${event.error}`));
         };
         // Stop recording with safety timeout
         try {

package/dist/labels.d.ts

@@ -1,4 +1,11 @@
 import type { ChemicalElement, ElementCategory } from './';
+import type { SymbolType } from 'd3-shape';
+import * as d3_symbols from 'd3-shape';
+export type D3Symbol = keyof typeof d3_symbols & `symbol${Capitalize<string>}`;
+export type D3SymbolName = Exclude<D3Symbol extends `symbol${infer Name}` ? Name : never, ``>;
+export declare const symbol_names: D3SymbolName[];
+export declare const symbol_map: Record<D3SymbolName, SymbolType>;
+export declare function format_value(value: number, formatter?: string): string;
 export declare const property_labels: Partial<Record<keyof ChemicalElement, [string, string | null]>>;
 export declare const heatmap_keys: (keyof ChemicalElement)[];
 export declare const heatmap_labels: Partial<Record<string, keyof ChemicalElement>>;
@@ -24,6 +31,18 @@ export declare const superscript_map: {
     readonly '+': "⁺";
     readonly '-': "⁻";
 };
+export declare const subscript_map: {
+    readonly '0': "₀";
+    readonly '1': "₁";
+    readonly '2': "₂";
+    readonly '3': "₃";
+    readonly '4': "₄";
+    readonly '5': "₅";
+    readonly '6': "₆";
+    readonly '7': "₇";
+    readonly '8': "₈";
+    readonly '9': "₉";
+};
 export declare function superscript_digits(input: string): string;
 export declare const trajectory_property_config: Record<string, {
     label: string;

package/dist/labels.js

@@ -1,4 +1,51 @@
 import { format } from 'd3-format';
+import * as d3_symbols from 'd3-shape';
+import { timeFormat } from 'd3-time-format';
+function name_for_symbol(sym) {
+    for (const key in d3_symbols) {
+        if (Object.prototype.hasOwnProperty.call(d3_symbols, key) &&
+            d3_symbols[key] === sym &&
+            /^symbol[A-Z]/.test(key))
+            return key.substring(6);
+    }
+    return null;
+}
+export const symbol_names = ([...new Set([...d3_symbols.symbolsFill, ...d3_symbols.symbolsStroke])]
+    .map((sym) => name_for_symbol(sym))
+    .filter((n) => n !== null));
+const symbols_index = d3_symbols;
+export const symbol_map = Object.fromEntries(symbol_names.map((name) => [name, symbols_index[`symbol${name}`]]));
+// Format a value for display with optional time formatting
+export function format_value(value, formatter) {
+    if (!formatter)
+        return `${value}`;
+    if (formatter.startsWith(`%`))
+        return timeFormat(formatter)(new Date(value));
+    // Handle special values consistently
+    if (value === -Infinity)
+        return `-Infinity`;
+    if (value === Infinity)
+        return `Infinity`;
+    if (Number.isNaN(value))
+        return `NaN`;
+    // Format and normalize unicode minus
+    const formatted = format(formatter)(value).replace(/−/g, `-`);
+    // Handle percentage formatting - remove trailing zeros
+    if (formatter.includes(`%`)) {
+        return formatted.includes(`.`)
+            ? formatted.replace(/(\.\d*?)0+%$/, `$1%`).replace(/\.%$/, `%`)
+            : formatted;
+    }
+    // Handle currency formatting - preserve precision if specified
+    if (formatter.includes(`$`) && formatter.includes(`.`) && /\.\d+f/.test(formatter)) {
+        return formatted;
+    }
+    // Remove trailing zeros after decimal point
+    const out = formatted.includes(`.`)
+        ? formatted.replace(/(\.\d*?)0+$/, `$1`).replace(/\.$/, ``)
+        : formatted;
+    return out === `-0` ? `0` : out;
+}
 // TODO add labels and units for all elemental properties
 export const property_labels = {
     atomic_mass: [`Atomic Mass`, `u`],
@@ -152,6 +199,18 @@ export const superscript_map = {
     '+': `⁺`,
     '-': `⁻`,
 };
+export const subscript_map = {
+    '0': `₀`,
+    '1': `₁`,
+    '2': `₂`,
+    '3': `₃`,
+    '4': `₄`,
+    '5': `₅`,
+    '6': `₆`,
+    '7': `₇`,
+    '8': `₈`,
+    '9': `₉`,
+};
 export function superscript_digits(input) {
     // use replace all signs and digits with their unicode superscript equivalent
     return input.replace(/[\d+-]/g, (match) => superscript_map[match] ?? match);

package/dist/math.d.ts

@@ -1,5 +1,6 @@
-import type { LatticeParams } from './structure/index';
+import type { LatticeParams, Pbc } from './structure/index';
 export type Vec3 = [number, number, number];
+export type Vec4 = [number, number, number, number];
 export type Vec9 = [
     number,
     number,
@@ -12,6 +13,7 @@ export type Vec9 = [
     number
 ];
 export type Matrix3x3 = [Vec3, Vec3, Vec3];
+export type Matrix4x4 = [Vec4, Vec4, Vec4, Vec4];
 export type NdVector = number[];
 export declare const LOG_EPS = 1e-9;
 export declare const EPS = 1e-10;
@@ -27,10 +29,12 @@ export declare const euclidean_dist: (vec1: NdVector, vec2: NdVector) => number;
 export declare function pbc_dist(pos1: Vec3, // First position vector (Cartesian coordinates)
 pos2: Vec3, // Second position vector (Cartesian coordinates)
 lattice_matrix: Matrix3x3, // 3x3 lattice matrix where each row is a lattice vector
-lattice_inv?: Matrix3x3): number;
+lattice_inv?: Matrix3x3, // Optional pre-computed inverse matrix for optimization (since lattice is usually constant and repeatedly inverting matrix is expensive)
+pbc?: Pbc): number;
 export declare function matrix_inverse_3x3(matrix: Matrix3x3): Matrix3x3;
 export declare function mat3x3_vec3_multiply(matrix: Matrix3x3, vector: Vec3): Vec3;
 export declare function add<T extends NdVector>(...vecs: T[]): T;
+export declare function subtract<T extends NdVector>(vec1: T, vec2: T): T;
 export declare function dot(vec1: NdVector, vec2: NdVector): number | number[] | number[][];
 export declare function to_voigt(tensor: number[][]): number[];
 export declare function from_voigt(voigt: number[]): number[][];
@@ -42,3 +46,4 @@ export declare function det_3x3(matrix: Matrix3x3): number;
 export declare function get_coefficient_of_variation(values: number[]): number;
 export declare function det_4x4(matrix: number[][]): number;
 export declare function cross_3d(a: Vec3, b: Vec3): Vec3;
+export declare function is_square_matrix(matrix: unknown, dim: number): boolean;

package/dist/math.js

@@ -38,20 +38,19 @@ export const euclidean_dist = (vec1, vec2) => {
 export function pbc_dist(pos1, // First position vector (Cartesian coordinates)
 pos2, // Second position vector (Cartesian coordinates)
 lattice_matrix, // 3x3 lattice matrix where each row is a lattice vector
-lattice_inv) {
-    // Use provided inverse or compute it
+lattice_inv, // Optional pre-computed inverse matrix for optimization (since lattice is usually constant and repeatedly inverting matrix is expensive)
+pbc = [true, true, true]) {
     const inv_matrix = lattice_inv ?? matrix_inverse_3x3(lattice_matrix);
     // Convert Cartesian coordinates to fractional coordinates
     const [fx1, fy1, fz1] = mat3x3_vec3_multiply(inv_matrix, pos1);
     const [fx2, fy2, fz2] = mat3x3_vec3_multiply(inv_matrix, pos2);
-    // Apply minimum image convention: wrap to [-0.5, 0.5)
-    const wrapped_frac_diff = [fx1 - fx2, fy1 - fy2, fz1 - fz2].map((x) => x - Math.round(x));
+    // Apply minimum image convention only for periodic axes
+    const wrapped_frac_diff = [fx1 - fx2, fy1 - fy2, fz1 - fz2].map((diff, idx) => pbc[idx] ? diff - Math.round(diff) : diff);
     // Convert back to Cartesian coordinates
     const cart_diff = mat3x3_vec3_multiply(lattice_matrix, wrapped_frac_diff);
     return Math.hypot(...cart_diff);
 }
 export function matrix_inverse_3x3(matrix) {
-    /** Calculate the inverse of a 3x3 matrix */
     const [[m11, m12, m13], [m21, m22, m23], [m31, m32, m33]] = matrix;
     const det = det_3x3(matrix);
     if (!Number.isFinite(det) || Math.abs(det) < EPS) {
@@ -87,9 +86,8 @@ export function mat3x3_vec3_multiply(matrix, vector) {
 }
 export function add(...vecs) {
     // add up any number of same-length vectors
-    if (vecs.length === 0) {
+    if (vecs.length === 0)
         throw new Error(`Cannot add zero vectors`);
-    }
     const first_vec = vecs[0];
     const length = first_vec.length;
     // Validate all vectors have the same length
@@ -106,6 +104,12 @@ export function add(...vecs) {
     }
     return result;
 }
+export function subtract(vec1, vec2) {
+    if (vec1.length !== vec2.length) {
+        throw new Error(`Vectors must be of same length`);
+    }
+    return vec1.map((val, idx) => val - vec2[idx]);
+}
 export function dot(vec1, vec2) {
     // Handle the case where both inputs are scalars
     if (typeof vec1 === `number` && typeof vec2 === `number`) {
@@ -236,11 +240,11 @@ export function get_coefficient_of_variation(values) {
 }
 // Compute 4x4 determinant (used for 4D barycentric coordinates)
 export function det_4x4(matrix) {
-    const [a, b, c, d] = matrix;
-    const [a0, a1, a2, a3] = a;
-    const [b0, b1, b2, b3] = b;
-    const [c0, c1, c2, c3] = c;
-    const [d0, d1, d2, d3] = d;
+    const [a_row, b_row, c_row, d_row] = matrix;
+    const [a0, a1, a2, a3] = a_row;
+    const [b0, b1, b2, b3] = b_row;
+    const [c0, c1, c2, c3] = c_row;
+    const [d0, d1, d2, d3] = d_row;
     return (a0 *
         (b1 * (c2 * d3 - c3 * d2) - b2 * (c1 * d3 - c3 * d1) + b3 * (c1 * d2 - c2 * d1)) -
         a1 *
@@ -253,3 +257,11 @@ export function det_4x4(matrix) {
 export function cross_3d(a, b) {
     return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
 }
+// Check if a matrix is square with dimension NxN
+export function is_square_matrix(matrix, dim) {
+    if (!Array.isArray(matrix))
+        return false;
+    if (matrix.length !== dim)
+        return false;
+    return matrix.every((row) => Array.isArray(row) && row.length === dim);
+}

package/dist/periodic-table/PeriodicTable.svelte.d.ts

@@ -5,7 +5,7 @@ import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { D3InterpolateName } from '../colors';
 import type { ScaleContext } from './index';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     tile_props?: Partial<ComponentProps<typeof ElementTile>>;
     show_photo?: boolean;
     disabled?: boolean;
@@ -49,7 +49,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     ]> | boolean;
     children?: Snippet;
     onenter?: (element: ChemicalElement) => void;
-}
-declare const PeriodicTable: import("svelte").Component<Props, {}, "color_scale" | "active_element" | "active_category" | "active_elements">;
+};
+declare const PeriodicTable: import("svelte").Component<$$ComponentProps, {}, "color_scale" | "active_element" | "active_category" | "active_elements">;
 type PeriodicTable = ReturnType<typeof PeriodicTable>;
 export default PeriodicTable;

package/dist/periodic-table/PeriodicTableControls.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     tile_gap?: string;
     symbol_font_size?: number;
     number_font_size?: number;
@@ -18,7 +18,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     tooltip_padding?: string;
     tooltip_line_height?: number;
     tooltip_text_align?: string;
-}
-declare const PeriodicTableControls: import("svelte").Component<Props, {}, "tile_gap" | "symbol_font_size" | "number_font_size" | "name_font_size" | "value_font_size" | "tooltip_font_size" | "tooltip_bg_color" | "tile_border_radius" | "inner_transition_offset" | "tile_font_color" | "tile_transition_duration" | "hover_border_width" | "symbol_font_weight" | "number_font_weight" | "tooltip_border_radius" | "tooltip_padding" | "tooltip_line_height" | "tooltip_text_align">;
+};
+declare const PeriodicTableControls: import("svelte").Component<$$ComponentProps, {}, "tile_gap" | "symbol_font_size" | "number_font_size" | "name_font_size" | "value_font_size" | "tooltip_font_size" | "tooltip_bg_color" | "tile_border_radius" | "inner_transition_offset" | "tile_font_color" | "tile_transition_duration" | "hover_border_width" | "symbol_font_weight" | "number_font_weight" | "tooltip_border_radius" | "tooltip_padding" | "tooltip_line_height" | "tooltip_text_align">;
 type PeriodicTableControls = ReturnType<typeof PeriodicTableControls>;
 export default PeriodicTableControls;

package/dist/periodic-table/PropertySelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { heatmap_labels } from '../labels';
 import Select from 'svelte-multiselect';
 const options = Object.keys(heatmap_labels);
-let { value = $bindable(null), empty = false, selected = empty ? [] : [options[1]], minSelect = 0, key = $bindable(``), ...rest } = $props();
+let { value = $bindable(null), empty = false, selected = empty ? [] : [options[1]], minSelect = 0, key = $bindable(null), ...rest } = $props();
 $effect.pre(() => {
     key = heatmap_labels[value ?? ``] ?? null;
 });

package/dist/periodic-table/PropertySelect.svelte.d.ts

@@ -1,12 +1,13 @@
 import type { ChemicalElement } from '..';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+import type { ComponentProps } from 'svelte';
+import Select from 'svelte-multiselect';
+type $$ComponentProps = Omit<ComponentProps<typeof Select>, `options`> & {
     value?: keyof ChemicalElement | null;
     empty?: boolean;
     selected?: string[];
     minSelect?: number;
     key?: string | null;
-}
-declare const PropertySelect: import("svelte").Component<Props, {}, "key" | "value">;
+};
+declare const PropertySelect: import("svelte").Component<$$ComponentProps, {}, "key" | "value">;
 type PropertySelect = ReturnType<typeof PropertySelect>;
 export default PropertySelect;

package/dist/periodic-table/TableInset.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLElementTagNameMap[`aside`]> {
+type $$ComponentProps = HTMLAttributes<HTMLElementTagNameMap[`aside`]> & {
     as?: keyof HTMLElementTagNameMap;
     children?: Snippet;
-}
-declare const TableInset: import("svelte").Component<Props, {}, "">;
+};
+declare const TableInset: import("svelte").Component<$$ComponentProps, {}, "">;
 type TableInset = ReturnType<typeof TableInset>;
 export default TableInset;