matterviz 0.3.0 → 0.3.1

package/dist/MillerIndexInput.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">let { value = $bindable([0, 0, 1]) } = $props();
+// Format: compact "001" for single-digit, spaced "10 0 1" for multi-digit
+let hkl_text = $derived(value.every((v) => Math.abs(v) < 10) ? value.join(``) : value.join(` `));
+// Parse hkl string: supports compact "001"/"-101" and spaced/comma "10, 0, 1"
+function parse_hkl(input) {
+    // Try spaced/comma format first (handles multi-digit)
+    const spaced = input.trim().split(/[,\s]+/);
+    if (spaced.length === 3) {
+        const nums = spaced.map(Number);
+        if (nums.every((n) => !isNaN(n)))
+            return nums;
+    }
+    // Fall back to compact single-digit format: "001", "-101"
+    const compact = input.replace(/\s+/g, ``);
+    const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/);
+    if (match)
+        return [Number(match[1]), Number(match[2]), Number(match[3])];
+    return null;
+}
+function handle_input(event) {
+    const parsed = parse_hkl(event.target.value);
+    if (parsed)
+        value = parsed;
+}
+export {};
+</script>
+
+<label class="miller-input">
+  <span>hkl</span>
+  <input
+    type="text"
+    value={hkl_text}
+    oninput={handle_input}
+    placeholder="001"
+    maxlength="12"
+    title="Miller indices (e.g. 001, -101, or 10 0 1)"
+  />
+</label>
+
+<style>
+  .miller-input {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    span {
+      font-weight: 600;
+      font-size: 0.85em;
+    }
+    input {
+      width: 4em;
+      padding: 0.15em 0.3em;
+      border: 1px solid var(--border-color, #ccc);
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 0.9em;
+      text-align: center;
+      box-sizing: border-box;
+    }
+  }
+</style>

package/dist/MillerIndexInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Vec3 } from './math';
+type $$ComponentProps = {
+    value?: Vec3;
+};
+declare const MillerIndexInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MillerIndexInput = ReturnType<typeof MillerIndexInput>;
+export default MillerIndexInput;

package/dist/app.css

@@ -8,12 +8,14 @@
   --max-text-width: 50em;
 
   --sms-max-width: 20em;
+  --sms-min-height: 19pt;
   --sms-text-color: var(--text-color);
 
   /* Svelte MultiSelect */
   --sms-options-bg: var(--page-bg);
   --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
   --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
+  --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
   --border-radius: 3pt;
 }
 
@@ -33,18 +35,23 @@
 }
 body {
   background: var(--page-bg);
-  padding: 6vh 3vw;
+  padding: 5vh 3vw 3vh;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
   color: var(--text-color);
   line-height: 1.5;
+  /* Sticky footer: footer stays at bottom when content is short */
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 main {
   margin: auto;
-  margin-bottom: 3em;
   width: 100%;
   max-width: var(--max-text-width);
   container-type: inline-size;
+  flex: 1; /* Grow to fill available space (sticky footer) */
 }
 a {
   color: var(--accent-color, cornflowerblue);

package/dist/brillouin/BrillouinZone.svelte

@@ -394,7 +394,7 @@ $effect(() => {
     display: flex;
     padding: 4px;
     border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 2.5em);
+    font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
   section.control-buttons :global(button:hover) {
     background-color: color-mix(in srgb, currentColor 8%, transparent);

package/dist/composition/FormulaFilter.svelte

@@ -3,7 +3,7 @@ import { tooltip } from 'svelte-multiselect';
 import { extract_formula_elements, has_wildcards, normalize_element_symbols, parse_formula_with_wildcards, } from './parse';
 const SEARCH_EXAMPLES = [
     {
-        label: `Contains elements`,
+        label: `Has elements`,
         description: `Materials containing at least these elements (may have others). Use * for any element.`,
         examples: [`Li,Fe`, `Si,O`, `Li,*,*`],
     },
@@ -18,23 +18,90 @@ const SEARCH_EXAMPLES = [
         examples: [`LiFePO4`, `LiFe*2*`, `*2O3`],
     },
 ];
-let { value = $bindable(``), search_mode = $bindable(`elements`), input_element = $bindable(null), show_clear_button = true, show_examples = true, disabled = false, onchange, onclear, ...rest } = $props();
+let { value = $bindable(``), search_mode = $bindable(`elements`), input_element = $bindable(null), show_clear_button = true, show_examples = true, disabled = false, max_history = 5, // Max recent inputs to remember; 0 disables history dropdown
+history_key = `formula-filter-history`, // localStorage key for persisting history
+onchange, onclear, ...rest } = $props();
 let input_value = $state(value);
 let examples_open = $state(false);
+let history_open = $state(false);
 let wrapper = $state(null);
 let examples_wrapper = $state(null);
 let focused_item_idx = $state(-1);
+let focused_history_idx = $state(-1);
 let anchor_left = $state(false);
 // Flatten examples for keyboard navigation
 const all_examples = SEARCH_EXAMPLES.flatMap((cat) => cat.examples);
+// === History Management ===
+const has_storage = typeof localStorage !== `undefined`;
+function load_history() {
+    if (max_history <= 0 || !has_storage)
+        return [];
+    try {
+        const raw = localStorage.getItem(history_key);
+        if (!raw)
+            return [];
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.filter((item) => typeof item === `string`).slice(0, max_history);
+    }
+    catch {
+        return [];
+    }
+}
+function save_history(entries) {
+    if (max_history <= 0 || !has_storage)
+        return;
+    try {
+        localStorage.setItem(history_key, JSON.stringify(entries.slice(0, max_history)));
+    }
+    catch {
+        // localStorage may be unavailable (e.g. private browsing)
+    }
+}
+let history = $state(load_history());
+function add_to_history(entry) {
+    if (max_history <= 0 || !entry.trim())
+        return;
+    // Remove duplicate if present, then prepend
+    const filtered = history.filter((item) => item !== entry);
+    history = [entry, ...filtered].slice(0, max_history);
+    save_history(history);
+}
+function remove_from_history(entry) {
+    history = history.filter((item) => item !== entry);
+    save_history(history);
+    // Clamp focused index to prevent out-of-bounds access on Enter
+    if (history.length === 0)
+        history_open = false;
+    else if (focused_history_idx >= visible_history.length) {
+        focused_history_idx = visible_history.length - 1;
+    }
+}
+// Filtered history: exclude current value to avoid redundant suggestion
+let visible_history = $derived(history.filter((item) => item !== value));
+function close_history() {
+    history_open = false;
+    focused_history_idx = -1;
+}
+function open_history() {
+    if (max_history <= 0 || visible_history.length === 0 || examples_open)
+        return;
+    history_open = true;
+    focused_history_idx = -1;
+}
 function handle_document_click(event) {
-    if (!wrapper || !examples_open)
+    if (!wrapper || (!examples_open && !history_open))
         return;
     const target = event.target;
     if (!(target instanceof Node))
         return;
-    if (!wrapper.contains(target))
-        close_examples();
+    if (!wrapper.contains(target)) {
+        if (examples_open)
+            close_examples();
+        if (history_open)
+            close_history();
+    }
 }
 function close_examples(restore_focus = true) {
     examples_open = false;
@@ -75,7 +142,7 @@ function infer_mode(input) {
     if (!trimmed)
         return `elements`;
     if (trimmed.includes(`,`))
-        return `elements`; // Li,Fe,O → contains elements
+        return `elements`; // Li,Fe,O → has elements
     if (trimmed.includes(`-`))
         return `chemsys`; // Li-Fe-O → chemical system
     return `exact`; // LiFePO4 → exact formula
@@ -141,6 +208,9 @@ function set_value(new_value) {
     const mode = infer_mode(new_value);
     last_synced = value = input_value = new_value; // update last_synced to prevent effect re-inference
     search_mode = mode;
+    if (new_value.trim())
+        add_to_history(new_value);
+    close_history();
     onchange?.(value, mode);
 }
 function sync_value() {
@@ -167,14 +237,34 @@ function sync_value() {
 function onkeydown(event) {
     if (event.key === `Enter`) {
         event.preventDefault();
-        sync_value();
+        if (history_open && focused_history_idx >= 0) {
+            set_value(visible_history[focused_history_idx]);
+        }
+        else {
+            sync_value();
+        }
     }
     else if (event.key === `Escape`) {
-        if (examples_open)
+        if (history_open)
+            close_history();
+        else if (examples_open)
             examples_open = false;
         else if (input_value)
             clear_filter();
     }
+    else if (history_open && visible_history.length > 0) {
+        const len = visible_history.length;
+        if (event.key === `ArrowDown`) {
+            event.preventDefault();
+            focused_history_idx = (focused_history_idx + 1) % len;
+        }
+        else if (event.key === `ArrowUp`) {
+            event.preventDefault();
+            focused_history_idx = focused_history_idx <= 0
+                ? len - 1
+                : focused_history_idx - 1;
+        }
+    }
 }
 function clear_filter() {
     onclear?.();
@@ -186,6 +276,7 @@ function apply_example(example) {
 }
 function toggle_examples(event) {
     event.stopPropagation();
+    close_history();
     examples_open = !examples_open;
     focused_item_idx = examples_open ? 0 : -1;
     if (examples_open)
@@ -224,7 +315,7 @@ let placeholder = $derived(search_mode === `chemsys`
         ? `LiFePO4 or LiFe*2*`
         : `Li,Fe,O or Li,*,*`);
 const MODE_LABELS = {
-    elements: `contains elements`,
+    elements: `has elements`,
     chemsys: `chemical system`,
     exact: `exact formula`,
 };
@@ -244,12 +335,51 @@ let next_mode = $derived.by(() => {
   <input
     bind:this={input_element}
     bind:value={input_value}
-    onblur={sync_value}
+    onblur={() => {
+      // mousedown preventDefault on history items prevents blur, so this only
+      // fires when focus genuinely leaves (tab out, click outside, etc.)
+      // sync_value → set_value → close_history, so no separate close needed
+      sync_value()
+    }}
+    onfocus={open_history}
     {onkeydown}
     {placeholder}
     {disabled}
     aria-label="Formula filter"
   />
+  {#if history_open && visible_history.length > 0}
+    <div class="history-dropdown" role="listbox" aria-label="Recent searches">
+      <span class="history-header">Recent</span>
+      {#each visible_history as entry, idx (entry)}
+        <div class="history-item" class:focused={idx === focused_history_idx}>
+          <button
+            type="button"
+            class="history-value"
+            role="option"
+            aria-selected={idx === focused_history_idx}
+            onmousedown={(event) => {
+              event.preventDefault()
+              set_value(entry)
+            }}
+          >
+            {entry}
+          </button>
+          <button
+            type="button"
+            class="history-remove"
+            title="Remove from history"
+            aria-label="Remove {entry} from history"
+            onmousedown={(event) => {
+              event.preventDefault()
+              remove_from_history(entry)
+            }}
+          >
+            <Icon icon="Close" style="width: 0.7em; height: 0.7em" />
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
   {#if input_value}
     <button
       type="button"
@@ -394,6 +524,64 @@ let next_mode = $derived.by(() => {
     opacity: 1;
     color: var(--highlight, #4db6ff);
   }
+  .history-dropdown {
+    position: absolute;
+    top: calc(100% + 2pt);
+    left: 0;
+    right: 0;
+    z-index: 101;
+    background: var(--dropdown-bg, var(--surface-bg, #fff));
+    border: 1px solid var(--dropdown-border, rgba(128, 128, 128, 0.2));
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 4pt 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .history-header {
+    font-size: 0.7em;
+    font-weight: 600;
+    opacity: 0.45;
+    padding: 2pt 10pt 4pt;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .history-item {
+    display: flex;
+    align-items: center;
+    padding: 0 4pt 0 0;
+  }
+  .history-item.focused,
+  .history-item:hover {
+    background: rgba(77, 182, 255, 0.08);
+  }
+  .history-value {
+    flex: 1;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4pt 10pt;
+    font-family: var(--mono-font, monospace);
+    font-size: 0.88em;
+    color: inherit;
+  }
+  .history-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 3pt;
+    border-radius: 50%;
+    opacity: 0.3;
+    color: inherit;
+  }
+  .history-remove:hover {
+    opacity: 0.8;
+    background: rgba(128, 128, 128, 0.15);
+  }
   .examples-wrapper {
     position: relative;
   }

package/dist/composition/FormulaFilter.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = {
     show_clear_button?: boolean;
     show_examples?: boolean;
     disabled?: boolean;
+    max_history?: number;
+    history_key?: string;
     onchange?: (value: string, search_mode: FormulaSearchMode) => void;
     onclear?: () => void;
 } & HTMLAttributes<HTMLDivElement>;

package/dist/constants.d.ts

@@ -21,6 +21,7 @@ export declare const STRUCTURE_EXTENSIONS_REGEX: RegExp;
 export declare const TRAJ_FALLBACK_EXTENSIONS: readonly string[];
 export declare const TRAJ_FALLBACK_EXTENSIONS_REGEX: RegExp;
 export declare const VASP_FILES_REGEX: RegExp;
+export declare const VASP_VOLUMETRIC_REGEX: RegExp;
 export declare const XDATCAR_REGEX: RegExp;
 export declare const CONFIG_DIRS_REGEX: RegExp;
 export declare const MD_SIM_EXCLUDE_REGEX: RegExp;

package/dist/constants.js

@@ -75,6 +75,7 @@ export const STRUCTURE_EXTENSIONS = Object.freeze([
     `.mcif`,
     `.poscar`,
     `.vasp`,
+    `.cube`,
     `.lmp`,
     `.data`,
     `.dump`,
@@ -95,6 +96,7 @@ export const TRAJ_FALLBACK_EXTENSIONS = Object.freeze([
 export const TRAJ_FALLBACK_EXTENSIONS_REGEX = new RegExp(`\\.(${TRAJ_FALLBACK_EXTENSIONS.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
 // Special regex patterns
 export const VASP_FILES_REGEX = /(?:^|[\\/_.-])(poscar|contcar|potcar|incar|kpoints|outcar)(?:[\\/_.-]|$)/i;
+export const VASP_VOLUMETRIC_REGEX = /(?:^|[\\/_.-])(chgcar|aeccar[012]?|elfcar|locpot|parchg)(?:[\\/_.-]|$)/i;
 export const XDATCAR_REGEX = /xdatcar/i;
 export const CONFIG_DIRS_REGEX = /(?:^|[\\/])(\.vscode|\.idea|\.nyc_output|\.cache|\.tmp|\.temp|node_modules|dist|build|coverage)(?:[\\/]|$)/i;
 export const MD_SIM_EXCLUDE_REGEX = /md_simulation\.(out|txt|yml|py|csv|html|css|md|js|ts)$/i;

package/dist/convex-hull/ConvexHull.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import { extract_formula_elements } from '../composition/parse';
+import { DEFAULTS } from '../settings';
 import { SvelteSet } from 'svelte/reactivity';
 import ConvexHull2D from './ConvexHull2D.svelte';
 import ConvexHull3D from './ConvexHull3D.svelte';
 import ConvexHull4D from './ConvexHull4D.svelte';
 let { entries = [], 
 // bindable props not part of rest because Svelte 5 doesn't support spreading bindable props.
-fullscreen = $bindable(false), wrapper = $bindable(), show_stable = $bindable(true), show_unstable = $bindable(true), show_hull_faces = $bindable(true), hull_face_opacity = $bindable(0.3), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), max_hull_dist_show_phases = $bindable(0.1), max_hull_dist_show_labels = $bindable(0.1), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), display = $bindable({ x_grid: false, y_grid: false }), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), selected_entry = $bindable(null), temperature = $bindable(), gas_pressures = $bindable({}), ...rest } = $props();
+fullscreen = $bindable(false), wrapper = $bindable(), show_stable = $bindable(true), show_unstable = $bindable(true), show_hull_faces = $bindable(true), hull_face_opacity: hull_face_opacity_prop = $bindable(undefined), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), max_hull_dist_show_phases = $bindable(0.1), max_hull_dist_show_labels = $bindable(0.1), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), display = $bindable({ x_grid: false, y_grid: false }), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), selected_entry = $bindable(null), temperature = $bindable(), gas_pressures = $bindable({}), ...rest } = $props();
 // Lightweight element extraction - count unique elements, stripping oxidation states
 // (e.g. "V4+" -> "V") to avoid counting the same element multiple times
 function extract_unique_elements(entries) {
@@ -23,6 +24,16 @@ function extract_unique_elements(entries) {
 // Detect dimensionality by counting unique elements (lightweight operation)
 const elements = $derived(extract_unique_elements(entries));
 const element_count = $derived(elements.length);
+// Resolve hull face opacity: use caller's value if provided,
+// otherwise pick the right default for the dimensionality (ternary=30%, quaternary=3%)
+// Writable $derived handles forward sync (prop→local), back-sync $effect handles local→prop
+const default_opacity = $derived(element_count === 4
+    ? DEFAULTS.convex_hull.quaternary.hull_face_opacity
+    : DEFAULTS.convex_hull.ternary.hull_face_opacity);
+let hull_face_opacity = $derived(hull_face_opacity_prop ?? default_opacity);
+$effect(() => {
+    hull_face_opacity_prop = hull_face_opacity;
+});
 // Map element count to corresponding component
 // Note: Type assertion needed because TypeScript can't infer that all components
 // accept a compatible superset of props (BaseConvexHullProps + dimension-specific)

package/dist/convex-hull/ConvexHull2D.svelte

@@ -647,7 +647,7 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
     color: var(--text-color, currentColor);
     transition: background-color 0.2s, opacity 0.2s;
     display: flex;
-    font-size: clamp(0.85em, 2cqmin, 2.5em);
+    font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
   :global(.convex-hull-2d .control-btn:hover) {
     background-color: color-mix(in srgb, currentColor 8%, transparent);