matterviz 0.1.12 → 0.1.13

package/dist/trajectory/Trajectory.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Icon, Spinner, Structure, toggle_fullscreen } from '..';
+<script lang="ts">import { Icon, Spinner, Structure, toggle_fullscreen, } from '..';
 import { handle_url_drop, load_from_url } from '../io';
 import { format_num, trajectory_property_config } from '../labels';
 import { Histogram, ScatterPlot } from '../plot';
@@ -9,7 +9,7 @@ import { tooltip } from 'svelte-multiselect/attachments';
 import { full_data_extractor } from './extract';
 import { TrajectoryError, TrajectoryExportPane, TrajectoryInfoPane } from './index';
 import { create_frame_loader, get_unsupported_format_message, MAX_BIN_FILE_SIZE, MAX_TEXT_FILE_SIZE, parse_trajectory_async, } from './parse';
-import { generate_axis_labels, generate_plot_series, generate_streaming_plot_series, should_hide_plot, toggle_series_visibility, } from './plotting';
+import { generate_axis_labels, generate_plot_series, generate_streaming_plot_series, should_hide_plot, } from './plotting';
 let { trajectory = $bindable(undefined), data_url, current_step_idx = $bindable(0), data_extractor = full_data_extractor, allow_file_drop = true, layout = `auto`, structure_props = {}, scatter_props = {}, histogram_props = {}, spinner_props = {}, trajectory_controls, error_snippet, show_controls = true, fullscreen_toggle = DEFAULTS.trajectory.fullscreen_toggle, auto_play = false, display_mode = $bindable(`structure+scatter`), step_labels = 5, on_play, on_pause, on_step_change, on_end, on_loop, on_frame_rate_change, on_display_mode_change, on_fullscreen_change, on_file_load, on_error, fps_range = DEFAULTS.trajectory.fps_range, fps = $bindable(5), loading_options = {}, plot_skimming = true, ...rest } = $props();
 let dragover = $state(false);
 let loading = $state(false);
@@ -96,20 +96,8 @@ async function load_frame_on_demand(frame_idx) {
 }
 // Current frame structure for display
 let current_structure = $derived(current_frame?.structure);
-// Dynamically hide bonds during playback to improve FPS - bond computation is expensive
-// Maybe revisit this in future if we find much more efficient bonding algo
-let final_structure_props = $derived.by(() => {
-    if (is_playing) { // Hide bonds during playback
-        const { scene_props = {} } = structure_props;
-        if (scene_props.show_bonds !== `never`) {
-            const show_bonds = `never`;
-            return { ...structure_props, scene_props: { ...scene_props, show_bonds } };
-        }
-    }
-    // default show_image_atoms to false since usually undesired if new image atoms
-    // pup-up/disappear when moving near cell edge during the trajectory
-    return { show_image_atoms: false, ...structure_props };
-});
+// Track hidden elements (persists across frame changes)
+let hidden_elements = $state(new Set());
 let step_label_positions = $derived.by(() => {
     if (!step_labels || total_frames <= 1)
         return [];
@@ -149,6 +137,23 @@ let plot_series = $derived.by(() => {
         })
         : [];
 });
+let x_axis = $derived({
+    label: `Step`,
+    format: `.3~s`,
+    ticks: step_label_positions,
+});
+// Generate axis labels based on first visible series on each axis
+let y_axis_labels = $derived(generate_axis_labels(plot_series));
+let y_axis = $derived({
+    label: y_axis_labels.y1,
+    format: `.2~s`,
+    label_shift: { y: 20 },
+});
+let y2_axis = $derived({
+    label: y_axis_labels.y2,
+    format: `.2~s`,
+    label_shift: { y: 80 },
+});
 // Helper function to get current frame data for callbacks
 function get_current_frame_data() {
     return {
@@ -161,8 +166,6 @@ let show_plot = $derived(display_mode !== `structure` && !should_hide_plot(traje
 // Determine what to show based on display mode
 let show_structure = $derived(![`scatter`, `histogram`].includes(display_mode));
 let actual_show_plot = $derived(display_mode !== `structure` && show_plot);
-// Generate axis labels based on first visible series on each axis
-let y_axis_labels = $derived(generate_axis_labels(plot_series));
 // Check if there are any Y2 series to determine padding
 let has_y2_series = $derived(plot_series.some((s) => s.y_axis === `y2` && s.visible));
 // Step navigation functions
@@ -218,10 +221,6 @@ function handle_plot_change(data) {
         go_to_step(Math.round(data.x));
     }
 }
-// Handle legend toggling
-function handle_legend_toggle(series_idx) {
-    plot_series = toggle_series_visibility(plot_series, series_idx);
-}
 // Helper function to read file content
 async function read_file_content(file) {
     return new Promise((resolve, reject) => {
@@ -236,16 +235,6 @@ async function read_file_content(file) {
             reader.readAsArrayBuffer(file);
     });
 }
-// Legend configuration
-let legend_config = $derived({
-    responsive: true,
-    layout: `horizontal`,
-    layout_tracks: 3,
-    item_gap: 0,
-    padding: { t: 5, b: 5, l: 5, r: 5 },
-    ...scatter_props?.legend,
-    on_toggle: scatter_props?.legend?.on_toggle ?? handle_legend_toggle,
-});
 // Play/pause functionality
 function toggle_play() {
     if (is_playing)
@@ -490,7 +479,6 @@ async function load_with_indexing(data, filename) {
         original_data = data;
         // @ts-expect-error - dynamically adding frame_loader for indexed trajectories
         trajectory.frame_loader = create_frame_loader(filename);
-        console.log(`Loaded trajectory with indexing: ${trajectory.total_frames || trajectory.frames.length} frames`);
     }
     catch (error) {
         console.error(`Indexed loading failed:`, error);
@@ -596,12 +584,11 @@ function onkeydown(event) {
         go_to_step(Math.floor((parseInt(event.key, 10) / 10) * (total_frames - 1)));
     }
 }
-let panes_open = $state({
-    structure_info: false,
-    structure_controls: false,
-    plot_controls: false,
-    export_pane: false,
-});
+// Separate state variables for each pane to match component prop types
+let structure_info_open = $state(false);
+let structure_controls_open = $state(false);
+let scatter_controls = $state({ open: false });
+let trajectory_export_open = $state(false);
 let fullscreen = $state(false);
 </script>
 
@@ -614,8 +601,8 @@ let fullscreen = $state(false);
 
 <div
   class:dragover
-  class:active={is_playing || panes_open.structure_info || panes_open.structure_controls ||
-  panes_open.plot_controls || panes_open.export_pane || info_pane_open}
+  class:active={is_playing || structure_info_open || structure_controls_open ||
+  scatter_controls.open || trajectory_export_open || info_pane_open}
   bind:this={wrapper}
   bind:clientWidth={viewport.width}
   bind:clientHeight={viewport.height}
@@ -791,7 +778,7 @@ let fullscreen = $state(false);
             {/if}
             <!-- Trajectory Export Pane -->
             <TrajectoryExportPane
-              bind:export_pane_open={panes_open.export_pane}
+              bind:export_pane_open={trajectory_export_open}
               {trajectory}
               {wrapper}
               filename={current_filename || `trajectory`}
@@ -895,10 +882,13 @@ let fullscreen = $state(false);
           structure={current_structure}
           allow_file_drop={false}
           style="height: 100%; min-height: 0; z-index: 3; border-radius: 0"
-          enable_tips={false}
-          {...final_structure_props}
-          bind:controls_open={panes_open.structure_controls}
-          bind:info_pane_open={panes_open.structure_info}
+          {...{
+            show_image_atoms: false, // Default to false to avoid atoms popping in/out at cell edges
+            ...structure_props,
+          }}
+          bind:controls_open={structure_controls_open}
+          bind:info_pane_open={structure_info_open}
+          bind:hidden_elements
         />
       {/if}
 
@@ -906,23 +896,16 @@ let fullscreen = $state(false);
         {#if display_mode === `scatter` || display_mode === `structure+scatter`}
           <ScatterPlot
             series={plot_series}
-            x_label="Step"
-            y_label={y_axis_labels.y1}
-            y_label_shift={{ y: 20 }}
-            y_format=".2~s"
-            y2_format=".2~s"
-            y2_label={y_axis_labels.y2}
-            y2_label_shift={{ y: 80 }}
+            bind:x_axis
+            bind:y_axis
+            bind:y2_axis
             current_x_value={current_step_idx}
             change={plot_skimming ? handle_plot_change : undefined}
-            markers="line"
-            x_format=".3~s"
-            x_ticks={step_label_positions}
-            bind:controls_open={panes_open.plot_controls}
+            bind:controls={scatter_controls}
             padding={{ t: 20, b: 60, l: 100, r: has_y2_series ? 100 : 20 }}
             range_padding={0}
             style="height: 100%"
-            legend={legend_config}
+            legend={scatter_props?.legend}
             {...scatter_props}
             class="plot {scatter_props.class ?? ``}"
           >
@@ -939,26 +922,14 @@ let fullscreen = $state(false);
         {:else if display_mode === `histogram` || display_mode === `structure+histogram`}
           <Histogram
             series={plot_series}
-            x_label={String(histogram_props.x_label ?? y_axis_labels.y1)}
-            y_label={(`y_label` in histogram_props) ? histogram_props.y_label as string : `Count`}
-            x_format=".3~s"
-            y_format=".3~s"
-            mode={(`mode` in histogram_props)
-            ? histogram_props.mode as `overlay` | `single`
-            : `overlay`}
-            show_legend={(`show_legend` in histogram_props)
-            ? histogram_props.show_legend as boolean
-            : (plot_series.length > 1)}
-            legend={{
-              responsive: true,
-              layout: `horizontal`,
-              layout_tracks: 3,
-              item_gap: 0,
-              padding: { t: 5, b: 5, l: 5, r: 5 },
-              on_toggle: handle_legend_toggle,
-              series_data: [],
-              ...(histogram_props.legend || {}),
+            x_axis={{
+              label: String(histogram_props.x_axis?.label ?? y_axis_labels.y1),
+              format: `.3~s`,
             }}
+            y_axis={{ label: histogram_props.y_axis?.label ?? `Count`, format: `.3~s` }}
+            mode={histogram_props.mode ?? `overlay`}
+            show_legend={histogram_props.show_legend ?? plot_series.length > 1}
+            legend={histogram_props.legend}
             style="height: 100%"
             {...histogram_props}
             class="plot {histogram_props.class ?? ``}"
@@ -1139,13 +1110,16 @@ let fullscreen = $state(false);
   button.filename {
     align-items: center;
     white-space: nowrap;
-    padding: var(--trajectory-filename-padding, 2pt 4pt);
+    padding: var(--trajectory-filename-padding, 3pt 4pt);
     border-radius: var(--trajectory-filename-border-radius, 2px);
     max-width: clamp(150px, 20cqw, 250px);
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
     position: relative;
+    font-family: monospace;
+    font-size: 0.9em;
+    background: var(--code-bg, rgba(0, 0, 0, 0.1));
   }
   @keyframes fade-in {
     from {

package/dist/trajectory/Trajectory.svelte.d.ts

@@ -17,8 +17,8 @@ type EventHandlers = {
     on_file_load?: (data: TrajHandlerData) => void;
     on_error?: (data: TrajHandlerData) => void;
 };
-interface Props extends EventHandlers, HTMLAttributes<HTMLDivElement> {
-    trajectory?: TrajectoryType | undefined;
+type $$ComponentProps = EventHandlers & HTMLAttributes<HTMLDivElement> & {
+    trajectory?: TrajectoryType;
     data_url?: string;
     current_step_idx?: number;
     data_extractor?: TrajectoryDataExtractor;
@@ -44,7 +44,7 @@ interface Props extends EventHandlers, HTMLAttributes<HTMLDivElement> {
     fullscreen_toggle?: Snippet<[]> | boolean;
     auto_play?: boolean;
     display_mode?: `structure+scatter` | `structure` | `scatter` | `histogram` | `structure+histogram`;
-    step_labels?: number | number[] | undefined;
+    step_labels?: number | number[];
     property_labels?: Record<string, string>;
     units?: {
         energy?: string;
@@ -66,7 +66,7 @@ interface Props extends EventHandlers, HTMLAttributes<HTMLDivElement> {
     fps?: number;
     loading_options?: LoadingOptions;
     plot_skimming?: boolean;
-}
-declare const Trajectory: import("svelte").Component<Props, {}, "trajectory" | "fps" | "display_mode" | "current_step_idx">;
+};
+declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "trajectory" | "fps" | "display_mode" | "current_step_idx">;
 type Trajectory = ReturnType<typeof Trajectory>;
 export default Trajectory;

package/dist/trajectory/TrajectoryError.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     error_msg: string;
     on_dismiss: () => void;
     error_snippet?: Snippet<[{
         error_msg: string;
         on_dismiss: () => void;
     }]>;
-}
-declare const TrajectoryError: import("svelte").Component<Props, {}, "">;
+};
+declare const TrajectoryError: import("svelte").Component<$$ComponentProps, {}, "">;
 type TrajectoryError = ReturnType<typeof TrajectoryError>;
 export default TrajectoryError;

package/dist/trajectory/TrajectoryExportPane.svelte

@@ -101,7 +101,7 @@ $effect(() => {
   closed_icon="Export"
   pane_props={{ ...pane_props, class: `export-pane ${pane_props?.class ?? ``}` }}
   toggle_props={{
-    title: `${export_pane_open ? `Close` : `Open`} export controls`,
+    title: export_pane_open ? `` : `Export Trajectory`,
     ...toggle_props,
     class: `trajectory-export-toggle ${toggle_props?.class ?? ``}`,
   }}

package/dist/trajectory/TrajectoryExportPane.svelte.d.ts

@@ -1,17 +1,17 @@
 import { DraggablePane } from '..';
 import type { TrajectoryType } from './';
 import type { ComponentProps } from 'svelte';
-interface Props {
+type $$ComponentProps = {
     export_pane_open?: boolean;
-    trajectory?: TrajectoryType | undefined;
-    wrapper?: HTMLDivElement | undefined;
+    trajectory?: TrajectoryType;
+    wrapper?: HTMLDivElement;
     filename?: string;
     video_fps?: number;
     resolution_multiplier?: number;
     on_step_change?: (step_idx: number) => Promise<void> | void;
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-}
-declare const TrajectoryExportPane: import("svelte").Component<Props, {}, "toggle_props" | "pane_props" | "export_pane_open" | "video_fps" | "resolution_multiplier">;
+};
+declare const TrajectoryExportPane: import("svelte").Component<$$ComponentProps, {}, "toggle_props" | "pane_props" | "export_pane_open" | "video_fps" | "resolution_multiplier">;
 type TrajectoryExportPane = ReturnType<typeof TrajectoryExportPane>;
 export default TrajectoryExportPane;

package/dist/trajectory/TrajectoryInfoPane.svelte

@@ -174,7 +174,7 @@ let info_pane_data = $derived.by(() => {
   bind:show={pane_open}
   max_width="24em"
   toggle_props={{
-    title: `${pane_open ? `Close` : `Open`} trajectory info`,
+    title: pane_open ? `` : `Trajectory info`,
     ...toggle_props,
     class: `trajectory-info-toggle ${toggle_props?.class ?? ``}`,
   }}

package/dist/trajectory/TrajectoryInfoPane.svelte.d.ts

@@ -1,7 +1,7 @@
 import { DraggablePane } from '..';
 import type { ComponentProps } from 'svelte';
 import type { TrajectoryType } from './index';
-interface Props extends Omit<ComponentProps<typeof DraggablePane>, `children`> {
+type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     trajectory: TrajectoryType;
     current_step_idx: number;
     current_filename?: string | null;
@@ -11,7 +11,7 @@ interface Props extends Omit<ComponentProps<typeof DraggablePane>, `children`> {
     pane_open?: boolean;
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-}
-declare const TrajectoryInfoPane: import("svelte").Component<Props, {}, "pane_open">;
+};
+declare const TrajectoryInfoPane: import("svelte").Component<$$ComponentProps, {}, "pane_open">;
 type TrajectoryInfoPane = ReturnType<typeof TrajectoryInfoPane>;
 export default TrajectoryInfoPane;

package/dist/trajectory/extract.js

@@ -33,8 +33,9 @@ export const force_stress_data_extractor = (frame, _trajectory) => {
         if (frame.metadata.forces && Array.isArray(frame.metadata.forces)) {
             const forces = frame.metadata.forces;
             if (forces.length > 0) {
-                const force_magnitudes = forces.map((force) => Math.sqrt(force[0] ** 2 + force[1] ** 2 + force[2] ** 2));
+                const force_magnitudes = forces.map((force) => Math.hypot(...force));
                 data.force_max = Math.max(...force_magnitudes);
+                // Calculate RMS (root mean square) of force magnitudes
                 data.force_norm = Math.sqrt(force_magnitudes.reduce((sum, f) => sum + f ** 2, 0) /
                     force_magnitudes.length);
             }

package/dist/trajectory/index.d.ts

@@ -1,4 +1,4 @@
-import type { AnyStructure } from '..';
+import type { AnyStructure, Trajectory } from '..';
 import type { ComponentProps } from 'svelte';
 export { default as Trajectory } from './Trajectory.svelte';
 export { default as TrajectoryError } from './TrajectoryError.svelte';

package/dist/trajectory/index.js

@@ -76,7 +76,7 @@ export function get_trajectory_stats(trajectory) {
         is_indexed: trajectory.is_indexed || false,
     };
     if (frames.length > 0) {
-        const [first_frame, last_frame] = [frames[0], frames.at(-1)];
+        const [first_frame, last_frame] = [frames[0], frames.at(-1) ?? frames[0]];
         const max_sample = 100;
         const sampled = frames.length <= max_sample ? frames : (() => {
             const interval = Math.floor(frames.length / max_sample);

package/dist/trajectory/parse.js

@@ -411,9 +411,10 @@ const parse_xyz_trajectory = (content) => {
         }
         if (forces.length > 0) {
             metadata.forces = forces;
-            const magnitudes = forces.map((f) => Math.sqrt(f[0] ** 2 + f[1] ** 2 + f[2] ** 2));
+            const magnitudes = forces.map((force) => Math.hypot(...force));
             metadata.force_max = Math.max(...magnitudes);
-            metadata.force_norm = Math.sqrt(magnitudes.reduce((sum, f) => sum + f ** 2, 0) / magnitudes.length);
+            // Calculate RMS (root mean square) of force magnitudes
+            metadata.force_norm = Math.sqrt(magnitudes.reduce((sum, mag) => sum + mag ** 2, 0) / magnitudes.length);
         }
         frames.push(create_trajectory_frame(positions, elements, lattice_matrix, lattice_matrix ? [true, true, true] : undefined, step, metadata));
         line_idx++;
@@ -896,23 +897,29 @@ export async function parse_trajectory_data(data, filename) {
                     // Calculate force statistics for forces
                     if (key === `forces` && Array.isArray(array_obj.data)) {
                         const forces = array_obj.data;
-                        const force_magnitudes = forces.map((force) => Math.sqrt(force.reduce((sum, f) => sum + f * f, 0)));
+                        const force_magnitudes = forces.map((force) => Math.hypot(...force));
                         processed_properties.force_max = Math.max(...force_magnitudes);
-                        processed_properties.force_norm = Math.sqrt(force_magnitudes.reduce((sum, f) => sum + f * f, 0));
+                        processed_properties.force_norm = Math.sqrt(force_magnitudes.reduce((sum, f) => sum + f ** 2, 0) /
+                            force_magnitudes.length);
                     }
                     // Calculate stress statistics for stress tensor
                     if (key === `stress` && Array.isArray(array_obj.data)) {
                         const stress_tensor = array_obj.data;
-                        // Calculate stress components (diagonal elements represent normal stresses)
-                        const normal_stresses = [
-                            stress_tensor[0][0],
-                            stress_tensor[1][1],
-                            stress_tensor[2][2],
-                        ];
-                        processed_properties.stress_max = Math.max(...normal_stresses.map(Math.abs));
-                        // Calculate hydrostatic pressure (negative of mean normal stress)
-                        processed_properties.pressure =
-                            -(normal_stresses[0] + normal_stresses[1] + normal_stresses[2]) / 3;
+                        if (!math.is_square_matrix(stress_tensor, 3)) {
+                            console.warn(`Invalid stress tensor structure in frame ${idx}`);
+                        }
+                        else {
+                            // Calculate stress components (diagonal elements represent normal stresses)
+                            const normal_stresses = [
+                                stress_tensor[0][0],
+                                stress_tensor[1][1],
+                                stress_tensor[2][2],
+                            ];
+                            processed_properties.stress_max = Math.max(...normal_stresses.map(Math.abs));
+                            // Calculate hydrostatic pressure (negative of mean normal stress)
+                            processed_properties.pressure =
+                                -(normal_stresses[0] + normal_stresses[1] + normal_stresses[2]) / 3;
+                        }
                     }
                 }
                 else {

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare function merge_nested<T extends Record<string, unknown>>(obj1: T, obj2?: Partial<T>): T;

package/dist/utils.js

@@ -0,0 +1,17 @@
+// Merge nested objects (1 level deep).
+export function merge_nested(obj1, obj2) {
+    const result = { ...obj1, ...(obj2 || {}) };
+    for (const key in obj1) {
+        if (typeof obj1[key] === `object` &&
+            obj1[key] !== null &&
+            !Array.isArray(obj1[key])) {
+            // Only deep-merge if obj2 value is also a plain object
+            if (obj2?.[key] &&
+                typeof obj2[key] === `object` &&
+                !Array.isArray(obj2[key]))
+                result[key] = { ...obj1[key], ...obj2[key] };
+            // Otherwise keep the top-level override (already applied above)
+        }
+    }
+    return result;
+}

package/dist/xrd/XrdPlot.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { plot_colors } from '../colors';
 import { decompress_file, handle_url_drop } from '../io';
+import { format_value } from '../labels';
 import { BarPlot } from '../plot';
-import { format_value } from '../plot/formatting';
 import { parse_any_structure } from '../structure/parse';
 import { compute_xrd_pattern } from './calc-xrd';
 function format_hkl(hkl, format) {
@@ -20,7 +20,7 @@ function format_hkl(hkl, format) {
         return `(${hkl.join(`, `)})`;
     return ``;
 }
-let { patterns, peak_width = 0.5, annotate_peaks = 5, hkl_format = `compact`, show_angles = null, orientation = `vertical`, wavelength = null, x_label = `2θ (degrees)`, y_label = `Intensity (a.u.)`, allow_file_drop = true, on_file_drop, loading = $bindable(false), error_msg = $bindable(undefined), children, ...rest } = $props();
+let { patterns, peak_width = 0.5, annotate_peaks = 5, hkl_format = `compact`, show_angles = null, orientation = `vertical`, wavelength = null, x_axis = $bindable({ label: `2θ (degrees)` }), y_axis = $bindable({ label: `Intensity (a.u.)` }), allow_file_drop = true, on_file_drop, loading = $bindable(false), error_msg = $bindable(undefined), children, ...rest } = $props();
 let dragover = $state(false);
 // Patterns created from dropped structures
 let dropped_entries = $state([]);
@@ -191,9 +191,8 @@ async function handle_file_drop(event) {
     ? hkls.map((h) => format_hkl(h, hkl_format)).join(`, `)
     : ``}
   {@const d_text = d != null ? `${format_value(d, `.3f`)} Å` : ``}
-  {@const series_label = info.metadata?.label ? `${String(info.metadata.label)} — ` : ``}
-  {@html series_label}2θ: {angle_text}
-  <br />
+  {@html info.metadata?.label ?? ``}<br />
+  2θ: {angle_text}<br />
   Intensity: {intensity_text}
   {#if hkl_text}<br />hkl: {hkl_text}{/if}
   {#if d_text}<br />d: {d_text}{/if}
@@ -203,13 +202,17 @@ async function handle_file_drop(event) {
   {...rest}
   series={bar_series}
   bind:orientation
-  x_label={orientation === `horizontal` ? y_label : x_label}
-  y_label={orientation === `horizontal` ? x_label : y_label}
-  x_label_shift={{ y: 20 }}
-  y_label_shift={{ x: 2 }}
+  x_axis={{
+    label_shift: { y: 20 },
+    range: orientation === `horizontal` ? intensity_range : angle_range,
+    ...(orientation === `horizontal` ? y_axis : x_axis),
+  }}
+  y_axis={{
+    label_shift: { x: 2 },
+    range: orientation === `horizontal` ? angle_range : intensity_range,
+    ...(orientation === `horizontal` ? x_axis : y_axis),
+  }}
   {tooltip}
-  x_range={orientation === `horizontal` ? intensity_range : angle_range}
-  y_range={orientation === `horizontal` ? angle_range : intensity_range}
   ondrop={handle_file_drop}
   ondragover={(event) => {
     event.preventDefault()

package/dist/xrd/XrdPlot.svelte.d.ts

@@ -1,7 +1,8 @@
+import type { AxisConfig } from '../plot';
 import { BarPlot } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HklFormat, PatternEntry, XrdPattern } from './index';
-interface Props extends ComponentProps<typeof BarPlot> {
+type $$ComponentProps = ComponentProps<typeof BarPlot> & {
     patterns: XrdPattern | Record<string, XrdPattern | {
         pattern: XrdPattern;
         color?: string;
@@ -11,14 +12,14 @@ interface Props extends ComponentProps<typeof BarPlot> {
     hkl_format?: HklFormat;
     show_angles?: boolean | null;
     wavelength?: number | null;
-    x_label?: string;
-    y_label?: string;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
     allow_file_drop?: boolean;
     on_file_drop?: (content: string | ArrayBuffer, filename: string) => void;
     loading?: boolean;
     error_msg?: string;
     children?: Snippet<[]>;
-}
-declare const XrdPlot: import("svelte").Component<Props, {}, "loading" | "error_msg">;
+};
+declare const XrdPlot: import("svelte").Component<$$ComponentProps, {}, "loading" | "y_axis" | "x_axis" | "error_msg">;
 type XrdPlot = ReturnType<typeof XrdPlot>;
 export default XrdPlot;

package/package.json

@@ -5,15 +5,15 @@
   "homepage": "https://janosh.github.io/matterviz",
   "repository": "https://github.com/janosh/matterviz",
   "license": "MIT",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/matterviz/issues",
   "dependencies": {
     "@spglib/moyo-wasm": "^0.6.0",
-    "@sveltejs/kit": "^2.43.8",
-    "@threlte/core": "^8.1.5",
-    "@threlte/extras": "^9.5.4",
+    "@sveltejs/kit": "^2.47.0",
+    "@threlte/core": "^8.1.7",
+    "@threlte/extras": "^9.5.5",
     "@types/d3-force": "^3.0.10",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/js-yaml": "^4.0.9",
@@ -27,15 +27,15 @@
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
     "d3-shape": "^3.2.0",
-    "h5wasm": "^0.8.6",
+    "h5wasm": "^0.8.7",
     "highlight.js": "^11.11.1",
     "js-yaml": "^4.1.0",
-    "svelte": "^5.39.8",
+    "svelte": "^5.40.1",
     "svelte-multiselect": "11.2.4",
     "three": "^0.180.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.1",
+    "@playwright/test": "^1.56.0",
     "@rollup/plugin-yaml": "^4.1.2",
     "@stylistic/eslint-plugin": "^5.4.0",
     "@sveltejs/adapter-static": "3.0.10",
@@ -54,7 +54,7 @@
     "d3-time-format": "^4.1.0",
     "eslint": "^9.37.0",
     "eslint-plugin-svelte": "^3.12.4",
-    "happy-dom": "^19.0.2",
+    "happy-dom": "^20.0.2",
     "hastscript": "^9.0.1",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
@@ -62,12 +62,12 @@
     "rehype-katex": "^7.0.1",
     "rehype-slug": "^6.0.0",
     "remark-math": "3.0.1",
-    "svelte-check": "^4.3.2",
+    "svelte-check": "^4.3.3",
     "svelte-preprocess": "^6.0.3",
-    "svelte2tsx": "^0.7.44",
+    "svelte2tsx": "^0.7.45",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.9",
+    "typescript-eslint": "^8.46.1",
+    "vite": "^7.1.10",
     "vitest": "^3.2.4"
   },
   "keywords": [
@@ -95,6 +95,10 @@
       "types": "./dist/app.css.d.ts",
       "default": "./dist/app.css"
     },
+    "./bands": {
+      "types": "./dist/bands/index.d.ts",
+      "default": "./dist/bands/index.js"
+    },
     "./composition": {
       "types": "./dist/composition.d.ts",
       "default": "./dist/composition.js"
@@ -147,6 +151,10 @@
       "types": "./dist/trajectory/index.d.ts",
       "default": "./dist/trajectory/index.js"
     },
+    "./rdf": {
+      "types": "./dist/rdf/index.d.ts",
+      "default": "./dist/rdf/index.js"
+    },
     "./xrd": {
       "types": "./dist/xrd/index.d.ts",
       "default": "./dist/xrd/index.js"

package/readme.md

@@ -116,7 +116,7 @@ npm install --dev matterviz
 - Thanks to [Images of Elements](https://images-of-elements.com) for providing photos of elemental crystals and glowing excited gases.
 - Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.
 - Big thanks to all sources of element images. See [`fetch-elem-images.ts`](https://github.com/janosh/matterviz/blob/-/src/fetch-elem-images.ts) and [`static/elements`](https://github.com/janosh/matterviz/tree/main/static/elements).
-- Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for a lot of great suggestions, UX ideas, helping me learn [`threlte`](https://threlte.xyz) and contributing the [`Bond.svelte`](https://github.com/janosh/matterviz/blob/-/src/lib/structure/Bond.svelte) component.
+- Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for great suggestions.
 
 This project would not have been possible as a one-person side project without many fine open-source projects. 🙏 To name just a few: