matterviz 0.1.4 → 0.1.5

package/dist/DraggablePanel.svelte

@@ -174,10 +174,11 @@ $effect(() => {
     box-sizing: border-box;
     display: flex;
     place-items: center;
-    padding: 4pt;
+    padding: var(--panel-toggle-padding, 2pt);
     border-radius: var(--panel-toggle-border-radius, 3pt);
     background-color: transparent;
     transition: background-color 0.2s;
+    font-size: clamp(1em, 2cqw, 1.6em);
   }
   button.panel-toggle:hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
@@ -208,6 +209,10 @@ $effect(() => {
     left: auto !important;
   }
   /* Panel content styling */
+  .draggable-panel :global(h4) {
+    margin: 8pt 0 2pt;
+    font-size: 0.9em;
+  }
   .draggable-panel :global(hr) {
     border: none;
     background: var(--panel-hr-bg, rgba(255, 255, 255, 0.1));
@@ -219,13 +224,26 @@ $effect(() => {
     align-items: center;
     gap: 2pt;
   }
+  .draggable-panel :global(input[type='text']) {
+    flex: 1;
+    padding: 4px 6px;
+  }
+  .draggable-panel :global(input[type='text'].invalid) {
+    border-color: var(--error-color, #ff6b6b);
+    background: rgba(255, 107, 107, 0.1);
+  }
+  .draggable-panel :global(input[type='text'].invalid):focus {
+    outline-color: var(--error-color, #ff6b6b);
+    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
+  }
   .draggable-panel :global(input[type='range']) {
     margin-left: auto;
     width: 100px;
     flex-shrink: 0;
   }
-  .draggable-panel :global(.slider-control input[type='range']) {
-    margin-left: 0;
+  .draggable-panel :global(input[type='range']) {
+    flex: 1;
+    min-width: 60px;
   }
   .draggable-panel :global(input[type='number']) {
     box-sizing: border-box;
@@ -247,6 +265,10 @@ $effect(() => {
   }
   .draggable-panel :global(select) {
     margin: 0 0 0 5pt;
+    flex: 1;
+    border-radius: 3px;
+    padding: 2px 4px;
+    font-size: 0.8em;
   }
   .draggable-panel :global(input[type='color']) {
     width: 40px;
@@ -257,15 +279,8 @@ $effect(() => {
   }
   .draggable-panel :global(.panel-row) {
     display: flex;
-    gap: 4pt;
-    align-items: flex-start;
-  }
-  .draggable-panel :global(.panel-row label) {
-    min-width: 0;
-  }
-  .draggable-panel :global(.panel-row label.compact) {
-    flex: 0 0 auto;
-    margin-right: 8pt;
+    gap: 8pt;
+    align-items: center;
   }
   .draggable-panel :global(.panel-row label.slider-control) {
     flex: 1;

package/dist/app.css

@@ -118,7 +118,7 @@ input {
   border-radius: 3pt;
 }
 input[type='number'] {
-  min-width: 60px;
+  min-width: 40px;
   width: auto;
 }
 input[type='color'] {

package/dist/colors/index.js

@@ -21,18 +21,9 @@ export const default_category_colors = {
     lanthanide: `#58748e`,
     actinide: `#6495ed`, // cornflowerblue
 };
-function rgb_scheme_to_hex(obj) {
-    const result = {};
-    for (const key in obj) {
-        if (Object.hasOwn(obj, key)) {
-            const val = obj[key];
-            if (val.length >= 3) {
-                result[key] = rgb(val[0], val[1], val[2]).formatHex();
-            }
-        }
-    }
-    return result;
-}
+const rgb_scheme_to_hex = (obj) => Object.fromEntries(Object.entries(obj)
+    .filter(([, val]) => val.length >= 3)
+    .map(([key, val]) => [key, rgb(val[0], val[1], val[2]).formatHex()]));
 export const vesta_hex = rgb_scheme_to_hex(vesta_colors);
 export const jmol_hex = rgb_scheme_to_hex(jmol_colors);
 export const alloy_hex = rgb_scheme_to_hex(alloy_colors);

package/dist/icons.d.ts

@@ -125,7 +125,7 @@ export declare const icon_data: {
     };
     readonly Database: {
         readonly viewBox: "0 0 24 24";
-        readonly path: "M12 5a9 3 0 0 1 9 3M21 12c0 1.66-4 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5";
+        readonly path: "M12 11q3.75 0 6.375-1.175T21 7t-2.625-2.825T12 3T5.625 4.175T3 7t2.625 2.825T12 11m0 2.5q1.025 0 2.563-.213t2.962-.687t2.45-1.237T21 9.5V12q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 16t-2.562-.213t-2.963-.687t-2.45-1.237T3 12V9.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 13.5m0 5q1.025 0 2.563-.213t2.962-.687t2.45-1.237T21 14.5V17q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 21t-2.562-.213t-2.963-.687t-2.45-1.237T3 17v-2.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 18.5";
     };
     readonly ORCID: {
         readonly viewBox: "0 0 24 24";
@@ -212,8 +212,8 @@ export declare const icon_data: {
         readonly path: "M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8L3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2c.65 0 1.2.55 1.2 1.2c0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2c0-.65.55-1.2 1.2-1.2c.65 0 1.2.55 1.2 1.2c0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2c0-.65.55-1.2 1.2-1.2c.65 0 1.2.55 1.2 1.2c0 .65-.55 1.2-1.2 1.2z";
     };
     readonly Fullscreen: {
-        readonly viewBox: "0 0 16 16";
-        readonly path: "M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5";
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z";
     };
     readonly ExitFullscreen: {
         readonly viewBox: "0 0 24 24";

package/dist/icons.js

@@ -126,7 +126,7 @@ export const icon_data = {
     },
     Database: {
         viewBox: `0 0 24 24`,
-        path: `M12 5a9 3 0 0 1 9 3M21 12c0 1.66-4 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5`,
+        path: `M12 11q3.75 0 6.375-1.175T21 7t-2.625-2.825T12 3T5.625 4.175T3 7t2.625 2.825T12 11m0 2.5q1.025 0 2.563-.213t2.962-.687t2.45-1.237T21 9.5V12q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 16t-2.562-.213t-2.963-.687t-2.45-1.237T3 12V9.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 13.5m0 5q1.025 0 2.563-.213t2.962-.687t2.45-1.237T21 14.5V17q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 21t-2.562-.213t-2.963-.687t-2.45-1.237T3 17v-2.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 18.5`,
     },
     ORCID: {
         viewBox: `0 0 24 24`,
@@ -213,8 +213,8 @@ export const icon_data = {
         path: `M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8L3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2c.65 0 1.2.55 1.2 1.2c0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2c0-.65.55-1.2 1.2-1.2c.65 0 1.2.55 1.2 1.2c0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2c0-.65.55-1.2 1.2-1.2c.65 0 1.2.55 1.2 1.2c0 .65-.55 1.2-1.2 1.2z`,
     },
     Fullscreen: {
-        viewBox: `0 0 16 16`,
-        path: `M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5`,
+        viewBox: `0 0 24 24`,
+        path: `M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z`,
     },
     ExitFullscreen: {
         viewBox: `0 0 24 24`,

package/dist/io/parse.d.ts

@@ -53,3 +53,4 @@ export type CellType = `primitive_cell` | `unit_cell` | `supercell` | `phonon_pr
 export declare function parse_phonopy_yaml(content: string, cell_type?: CellType): ParsedStructure | null;
 export declare function parse_structure_file(content: string, filename?: string): ParsedStructure | null;
 export declare function parse_any_structure(content: string, filename: string): AnyStructure | null;
+export declare function is_structure_file(filename: string): boolean;

package/dist/io/parse.js

@@ -1,5 +1,6 @@
 import { elem_symbols } from '..';
 import * as math from '../math';
+import { is_trajectory_file } from '../trajectory/parse';
 import { load as yaml_load } from 'js-yaml';
 // Normalize scientific notation in coordinate strings
 // Handles eEdD and *^ notation variants
@@ -884,3 +885,16 @@ export function parse_any_structure(content, filename) {
             : null;
     }
 }
+// Check if filename indicates a structure file
+export function is_structure_file(filename) {
+    const name = filename.toLowerCase();
+    // First check if this is a trajectory file and so not a structure file
+    if (is_trajectory_file(filename))
+        return false;
+    const structure_extensions = /\.(cif|poscar|vasp|xyz|extxyz|json|yaml|yml|xml|lmp|data|dump|pdb|mol|mol2|sdf|mmcif)$/;
+    const structure_keywords = /(poscar|contcar|potcar|incar|kpoints|outcar)/;
+    return (structure_extensions.test(name) ||
+        structure_keywords.test(name) || // Files with structure-related keywords
+        (name.endsWith(`.gz`) && // Compressed structure files
+            (structure_extensions.test(name.slice(0, -3)) || structure_keywords.test(name))));
+}

package/dist/plot/Histogram.svelte

@@ -182,7 +182,7 @@ function toggle_series_visibility(series_idx) {
           x2={width - padding.r}
           y1={height - padding.b}
           y2={height - padding.b}
-          stroke="var(--histogram-axis-color)"
+          stroke="var(--border-color, gray)"
           stroke-width="1"
         />
 
@@ -193,23 +193,23 @@ function toggle_series_visibility(series_idx) {
               <line
                 y1={-(height - padding.b - padding.t)}
                 y2="0"
-                stroke="var(--histogram-grid-stroke, gray)"
-                stroke-dasharray="var(--histogram-grid-dash, 4)"
-                stroke-width="var(--histogram-grid-width, 0.4)"
+                stroke="var(--border-color, gray)"
+                stroke-dasharray="4"
+                stroke-width="0.4"
                 {...typeof x_grid === `object` ? x_grid : {}}
               />
             {/if}
             <line
               y1="0"
               y2="5"
-              stroke="var(--histogram-axis-color)"
+              stroke="var(--border-color, gray)"
               stroke-width="1"
             />
             <text
               y="18"
               text-anchor="middle"
-              font-size="12"
-              fill="var(--histogram-text-color)"
+              font-size="14"
+              fill="var(--text-color)"
             >
               {format_value(tick, x_format)}
             </text>
@@ -221,8 +221,8 @@ function toggle_series_visibility(series_idx) {
           x={padding.l + chart_width / 2}
           y={height - 10}
           text-anchor="middle"
-          font-size="14"
-          fill="var(--histogram-text-color)"
+          font-size="16"
+          fill="var(--text-color)"
         >
           {x_label}
         </text>
@@ -234,7 +234,7 @@ function toggle_series_visibility(series_idx) {
           x2={padding.l}
           y1={padding.t}
           y2={height - padding.b}
-          stroke="var(--histogram-axis-color)"
+          stroke="var(--border-color, gray)"
           stroke-width="1"
         />
 
@@ -245,24 +245,24 @@ function toggle_series_visibility(series_idx) {
               <line
                 x1="0"
                 x2={width - padding.l - padding.r}
-                stroke="var(--histogram-grid-stroke, gray)"
-                stroke-dasharray="var(--histogram-grid-dash, 4)"
-                stroke-width="var(--histogram-grid-width, 0.4)"
+                stroke="var(--border-color, gray)"
+                stroke-dasharray="4"
+                stroke-width="0.4"
                 {...typeof y_grid === `object` ? y_grid : {}}
               />
             {/if}
             <line
               x1="-5"
               x2="0"
-              stroke="var(--histogram-axis-color)"
+              stroke="var(--border-color, gray)"
               stroke-width="1"
             />
             <text
               x="-10"
               text-anchor="end"
               dominant-baseline="central"
-              font-size="12"
-              fill="var(--histogram-text-color)"
+              font-size="14"
+              fill="var(--text-color)"
             >
               {format_value(tick, y_format)}
             </text>
@@ -274,8 +274,8 @@ function toggle_series_visibility(series_idx) {
           x={15}
           y={padding.t + chart_height / 2}
           text-anchor="middle"
-          font-size="14"
-          fill="var(--histogram-text-color)"
+          font-size="16"
+          fill="var(--text-color)"
           transform="rotate(-90, 15, {padding.t + chart_height / 2})"
         >
           {y_label}
@@ -284,7 +284,6 @@ function toggle_series_visibility(series_idx) {
     </svg>
   {/if}
 
-  <!-- Control Panel -->
   {#if show_controls}
     <HistogramControls
       toggle_props={controls_toggle_props}
@@ -309,7 +308,6 @@ function toggle_series_visibility(series_idx) {
     />
   {/if}
 
-  <!-- Legend -->
   {#if show_legend && legend && series.length > 1}
     <PlotLegend
       {...legend}
@@ -332,14 +330,14 @@ function toggle_series_visibility(series_idx) {
     height: 100%;
   }
   .tooltip {
-    background: var(--histogram-tooltip-bg);
-    color: var(--histogram-tooltip-color);
+    background: var(--tooltip-bg);
+    color: var(--text-color);
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 12px;
     pointer-events: none;
     white-space: nowrap;
-    border: 1px solid var(--histogram-tooltip-border);
+    border: var(--tooltip-border);
   }
   .histogram-series rect {
     transition: opacity 0.2s ease;

package/dist/plot/Histogram.svelte.d.ts

@@ -41,6 +41,6 @@ interface Props {
     controls_toggle_props?: ComponentProps<typeof DraggablePanel>[`toggle_props`];
     [key: string]: unknown;
 }
-declare const Histogram: import("svelte").Component<Props, {}, "mode" | "controls_open" | "show_controls" | "y_format" | "x_format" | "bins" | "x_scale_type" | "y_scale_type" | "show_legend" | "bar_opacity" | "bar_stroke_width" | "selected_property" | "x_grid" | "y_grid" | "x_ticks" | "y_ticks">;
+declare const Histogram: import("svelte").Component<Props, {}, "mode" | "controls_open" | "x_format" | "y_format" | "bins" | "x_scale_type" | "y_scale_type" | "show_legend" | "bar_opacity" | "bar_stroke_width" | "selected_property" | "x_grid" | "y_grid" | "x_ticks" | "y_ticks" | "show_controls">;
 type Histogram = ReturnType<typeof Histogram>;
 export default Histogram;