matterviz 0.1.15 → 0.2.0

package/dist/FilePicker.svelte

@@ -172,13 +172,13 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
   }
   .legend-item:hover {
     opacity: 1;
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.3);
+    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
+    border-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3));
   }
   .legend-item.active {
     opacity: 1;
-    background: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.5);
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
+    border-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.5));
     font-weight: bold;
   }
   .clear-filter {
@@ -205,24 +205,24 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     display: flex;
     align-items: center;
     padding: 4pt 8pt;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2));
     border-radius: 20px;
     cursor: grab;
-    background: rgba(255, 255, 255, 0.1);
+    background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
     transition: all 0.2s ease;
     gap: 0.5em;
   }
   .file-item.active {
     border-color: var(--success-color, #00ff00);
-    background: rgba(0, 255, 0, 0.15);
-    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
+    background: light-dark(rgba(0, 255, 0, 0.12), rgba(0, 255, 0, 0.2));
+    box-shadow: 0 0 8px light-dark(rgba(0, 255, 0, 0.25), rgba(0, 255, 0, 0.35));
   }
   .file-item:active {
     cursor: grabbing;
   }
   .file-item:hover {
     border-color: var(--accent-color, #007acc);
-    background: rgba(0, 122, 204, 0.2);
+    background: light-dark(rgba(0, 122, 204, 0.15), rgba(0, 122, 204, 0.25));
     filter: brightness(1.1);
   }
   .file-name {

package/dist/brillouin/BrillouinZone.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon, Spinner, toggle_fullscreen } from '..';
 import { decompress_file, handle_url_drop, load_from_url } from '../io';
-import { set_fullscreen_bg } from '../phase-diagram/helpers';
+import { set_fullscreen_bg } from '../layout';
 import { DEFAULTS } from '../settings';
 import { parse_any_structure } from '../structure/parse';
 import { Canvas } from '@threlte/core';
@@ -197,7 +197,6 @@ $effect(() => {
             title="{fullscreen ? `Exit` : `Enter`} fullscreen"
             aria-pressed={fullscreen}
             class="fullscreen-toggle"
-            style="padding: 0"
             {@attach tooltip()}
           >
             {#if typeof fullscreen_toggle === `function`}
@@ -316,11 +315,12 @@ $effect(() => {
   section.control-buttons > :global(button) {
     background-color: transparent;
     display: flex;
-    padding: 0;
+    padding: 4px;
+    border-radius: var(--border-radius, 3pt);
     font-size: clamp(0.85em, 2cqmin, 2.5em);
   }
   section.control-buttons :global(button:hover) {
-    background-color: var(--pane-btn-bg-hover);
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
   }
   .filename {
     font-family: monospace;

package/dist/brillouin/BrillouinZone.svelte.d.ts

@@ -62,6 +62,6 @@ type $$ComponentProps = {
     on_error?: (data: BZHandlerData) => void;
     on_fullscreen_change?: (data: BZHandlerData) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "loading" | "dragover" | "structure" | "fullscreen" | "controls_open" | "camera_projection" | "info_pane_open" | "hovered" | "wrapper" | "png_dpi" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "dragover" | "height" | "width" | "fullscreen" | "structure" | "camera_projection" | "info_pane_open" | "controls_open" | "wrapper" | "hovered" | "png_dpi" | "loading" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;

package/dist/brillouin/BrillouinZoneControls.svelte.d.ts

@@ -9,6 +9,6 @@ type $$ComponentProps = {
     show_vectors?: boolean;
     camera_projection?: CameraProjection;
 };
-declare const BrillouinZoneControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "camera_projection" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors">;
+declare const BrillouinZoneControls: import("svelte").Component<$$ComponentProps, {}, "camera_projection" | "controls_open" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors">;
 type BrillouinZoneControls = ReturnType<typeof BrillouinZoneControls>;
 export default BrillouinZoneControls;

package/dist/brillouin/BrillouinZoneScene.svelte.d.ts

@@ -38,6 +38,6 @@ type $$ComponentProps = {
     hovered_k_point?: Vec3 | null;
     hovered_qpoint_index?: number | null;
 };
-declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera" | "camera_position" | "camera_projection" | "scene" | "camera_is_moving" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
+declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera_position" | "camera_projection" | "camera_is_moving" | "scene" | "camera" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
 type BrillouinZoneScene = ReturnType<typeof BrillouinZoneScene>;
 export default BrillouinZoneScene;

package/dist/composition/Composition.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { ContextMenu } from '..';
 import { export_svg_as_png, export_svg_as_svg } from '../io/export';
-import { BarChart, BubbleChart, PieChart } from './index';
 import { get_electro_neg_formula } from './format';
+import { BarChart, BubbleChart, PieChart } from './index';
 import { parse_composition } from './parse';
 let { composition, mode = `pie`, on_composition_change, color_scheme = `Vesta`, ...rest } = $props();
 // Make these reactive so context menu changes propagate

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

@@ -6,6 +6,8 @@ type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
     mode?: CompositionChartMode;
     on_composition_change?: (composition: CompositionType) => void;
     color_scheme?: ColorSchemeName;
+    size?: number;
+    interactive?: boolean;
 };
 declare const Composition: import("svelte").Component<$$ComponentProps, {}, "">;
 type Composition = ReturnType<typeof Composition>;

package/dist/composition/Formula.svelte

@@ -145,9 +145,16 @@ function show_tooltip(element, event) {
     align-items: center;
     gap: var(--formula-tooltip-gap, 5pt);
     padding: var(--formula-tooltip-padding, 3pt 4pt);
-    background: var(--formula-tooltip-bg, rgba(0, 0, 0, 0.9));
+    background: var(
+      --formula-tooltip-bg,
+      light-dark(rgba(255, 255, 255, 0.95), rgba(30, 30, 30, 0.95))
+    );
+    color: var(--formula-tooltip-color, light-dark(#222, #eee));
     border-radius: var(--formula-tooltip-border-radius, var(--border-radius, 3pt));
-    box-shadow: var(--formula-tooltip-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.3));
+    box-shadow: var(
+      --formula-tooltip-box-shadow,
+      0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))
+    );
     z-index: var(--tooltip-z-index, 2);
   }
   .script-wrapper {

package/dist/composition/FormulaFilter.svelte

@@ -0,0 +1,429 @@
+<script lang="ts">import Icon from '../Icon.svelte';
+import { tooltip } from 'svelte-multiselect';
+import { extract_formula_elements, normalize_element_symbols } from './parse';
+const SEARCH_EXAMPLES = [
+    {
+        label: `Contains elements`,
+        description: `Materials containing at least these elements (may have others)`,
+        examples: [`Li,Fe`, `Si,O`, `Mn,Co,Ni`],
+    },
+    {
+        label: `Chemical system`,
+        description: `Materials with only these elements (no others)`,
+        examples: [`Li-Fe-O`, `Si-O`, `Na-Cl`],
+    },
+    {
+        label: `Exact formula`,
+        description: `Materials with this exact stoichiometry`,
+        examples: [`LiFePO4`, `SiO2`, `NaCl`],
+    },
+];
+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 input_value = $state(value);
+let examples_open = $state(false);
+let wrapper = $state(null);
+let examples_wrapper = $state(null);
+let focused_item_idx = $state(-1);
+let anchor_left = $state(false);
+// Flatten examples for keyboard navigation
+const all_examples = SEARCH_EXAMPLES.flatMap((cat) => cat.examples);
+function handle_document_click(event) {
+    if (!wrapper || !examples_open)
+        return;
+    const target = event.target;
+    if (!(target instanceof Node))
+        return;
+    if (!wrapper.contains(target))
+        close_examples();
+}
+function close_examples(restore_focus = true) {
+    examples_open = false;
+    focused_item_idx = -1;
+    if (restore_focus)
+        input_element?.focus({ preventScroll: true });
+}
+// Track last synced value to detect external changes (e.g. from URL params)
+// and re-infer mode accordingly. Without this, mode would only be set on first render.
+let last_synced = $state(null);
+$effect(() => {
+    input_value = value;
+    if (value !== last_synced) {
+        last_synced = value;
+        if (value) {
+            const inferred = infer_mode(value);
+            if (inferred !== search_mode)
+                search_mode = inferred;
+        }
+    }
+});
+// Detect if dropdown would exit viewport on the right and adjust anchor
+$effect(() => {
+    if (!examples_open || !examples_wrapper)
+        return;
+    requestAnimationFrame(() => {
+        const dropdown = examples_wrapper?.querySelector(`.examples-dropdown`);
+        if (!dropdown)
+            return;
+        const rect = dropdown.getBoundingClientRect();
+        if (rect.right > window.innerWidth && !anchor_left)
+            anchor_left = true;
+    });
+});
+// Infer search mode from input format
+function infer_mode(input) {
+    const trimmed = input.trim();
+    if (!trimmed)
+        return `elements`;
+    if (trimmed.includes(`,`))
+        return `elements`; // Li,Fe,O → contains elements
+    if (trimmed.includes(`-`))
+        return `chemsys`; // Li-Fe-O → chemical system
+    return `exact`; // LiFePO4 → exact formula
+}
+// Cycle through modes: elements → chemsys → exact → elements
+const MODE_CYCLE = [`elements`, `chemsys`, `exact`];
+// Extract elements from any input format (formula, comma-separated, dash-separated)
+// Always returns elements in alphabetical order for consistency
+function extract_elements(input) {
+    const trimmed = input.trim();
+    if (!trimmed)
+        return [];
+    // If contains commas or dashes, split by those and sort alphabetically
+    if (trimmed.includes(`,`) || trimmed.includes(`-`)) {
+        const parts = trimmed.split(/[-,]/).map((str) => str.trim()).filter(Boolean);
+        // Filter valid elements and sort alphabetically
+        return normalize_element_symbols(parts.join(`,`)).sort();
+    }
+    // Otherwise parse as formula (already returns sorted by default)
+    try {
+        return extract_formula_elements(trimmed, { sorted: true });
+    }
+    catch {
+        return [];
+    }
+}
+// Format elements for the given mode
+function format_for_mode(elements, mode) {
+    if (elements.length === 0)
+        return ``;
+    if (mode === `elements`)
+        return elements.join(`,`);
+    if (mode === `chemsys`)
+        return elements.join(`-`);
+    // For exact mode, just join without separator (user will need to add counts)
+    return elements.join(``);
+}
+function cycle_mode() {
+    const current_idx = MODE_CYCLE.indexOf(search_mode);
+    const next_idx = (current_idx + 1) % MODE_CYCLE.length;
+    const next_mode = MODE_CYCLE[next_idx];
+    // Extract elements from current value and reformat for new mode
+    const elements = extract_elements(value);
+    const reformatted = format_for_mode(elements, next_mode);
+    search_mode = next_mode;
+    last_synced = value = input_value = reformatted; // update last_synced to prevent effect re-inference
+    onchange?.(reformatted, next_mode);
+}
+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;
+    onchange?.(value, mode);
+}
+function sync_value() {
+    const trimmed = input_value.trim();
+    if (!trimmed)
+        return set_value(``);
+    const mode = infer_mode(trimmed);
+    if (mode === `exact`)
+        return set_value(trimmed);
+    // Normalize element symbols for elements/chemsys modes
+    const separator = mode === `chemsys` ? `-` : `,`;
+    const normalized = normalize_element_symbols(trimmed.replace(/[-,]/g, `,`));
+    set_value(normalized.join(separator));
+}
+function onkeydown(event) {
+    if (event.key === `Enter`) {
+        event.preventDefault();
+        sync_value();
+    }
+    else if (event.key === `Escape`) {
+        if (examples_open)
+            examples_open = false;
+        else if (input_value)
+            clear_filter();
+    }
+}
+function clear_filter() {
+    onclear?.();
+    set_value(``);
+}
+function apply_example(example) {
+    set_value(example);
+    close_examples();
+}
+function toggle_examples(event) {
+    event.stopPropagation();
+    examples_open = !examples_open;
+    focused_item_idx = examples_open ? 0 : -1;
+    if (examples_open)
+        anchor_left = false;
+}
+function handle_menu_keydown(event) {
+    const len = all_examples.length;
+    if (!len)
+        return;
+    const is_button_activation = (event.key === `Enter` || event.key === ` `) &&
+        event.target instanceof HTMLButtonElement;
+    if (is_button_activation)
+        return;
+    const key_actions = {
+        ArrowDown: () => (focused_item_idx = (focused_item_idx + 1) % len),
+        ArrowUp: () => (focused_item_idx = (focused_item_idx - 1 + len) % len),
+        Home: () => (focused_item_idx = 0),
+        End: () => (focused_item_idx = len - 1),
+        Escape: close_examples,
+    };
+    if (event.key in key_actions) {
+        event.preventDefault();
+        key_actions[event.key]();
+    }
+}
+// Focus the active menu item when index changes
+$effect(() => {
+    if (!examples_open || focused_item_idx < 0)
+        return;
+    const items = wrapper?.querySelectorAll(`[data-example-item]`);
+    items?.[focused_item_idx]?.focus({ preventScroll: true });
+});
+let placeholder = $derived(search_mode === `chemsys`
+    ? `Li-Fe-O`
+    : search_mode === `exact`
+        ? `LiFePO4`
+        : `Li,Fe,O`);
+const MODE_LABELS = {
+    elements: `contains elements`,
+    chemsys: `chemical system`,
+    exact: `exact formula`,
+};
+let mode_hint = $derived(MODE_LABELS[search_mode]);
+// Preview of next mode cycle step for tooltip
+let next_mode = $derived.by(() => {
+    const next = MODE_CYCLE[(MODE_CYCLE.indexOf(search_mode) + 1) % MODE_CYCLE.length];
+    const mode = MODE_LABELS[next];
+    const next_value = format_for_mode(extract_elements(value), next);
+    return { mode, value: next_value };
+});
+</script>
+
+<svelte:document onclick={handle_document_click} />
+
+<div class="formula-filter" bind:this={wrapper} class:disabled {...rest}>
+  <input
+    bind:this={input_element}
+    bind:value={input_value}
+    onblur={sync_value}
+    {onkeydown}
+    {placeholder}
+    {disabled}
+    aria-label="Formula filter"
+  />
+  {#if input_value}
+    <button
+      type="button"
+      class="mode-hint clickable"
+      onclick={cycle_mode}
+      title="Click to switch to '{next_mode.mode}' → {next_mode.value}"
+      {@attach tooltip({ style: `font-size: 0.6em; padding: 1pt 5pt;` })}
+      aria-label="Change search mode"
+    >
+      {mode_hint}
+    </button>
+  {/if}
+  {#if show_clear_button && value && !disabled}
+    <button
+      type="button"
+      class="icon-btn clear-btn"
+      onclick={clear_filter}
+      title="Clear (Escape)"
+      aria-label="Clear filter"
+    >
+      <Icon icon="Close" style="width: 1em; height: 1em" />
+    </button>
+  {/if}
+  {#if show_examples && !disabled}
+    <div class="examples-wrapper" bind:this={examples_wrapper}>
+      <button
+        type="button"
+        class="icon-btn help-btn"
+        class:active={examples_open}
+        onclick={toggle_examples}
+        title="Show search examples"
+        aria-label="Show search examples"
+        aria-expanded={examples_open}
+        aria-haspopup="menu"
+      >
+        <Icon icon="Info" style="width: 1.1em; height: 1.1em" />
+      </button>
+      {#if examples_open}
+        <div
+          class="examples-dropdown"
+          class:anchor-left={anchor_left}
+          role="menu"
+          tabindex="-1"
+          onkeydown={handle_menu_keydown}
+        >
+          {#each SEARCH_EXAMPLES as category (category.label)}
+            <div class="example-category">
+              <div class="category-label">{category.label}:</div>
+              <div class="example-tags">
+                {#each category.examples as example (example)}
+                  <button
+                    type="button"
+                    class="example-tag"
+                    data-example-item
+                    onclick={() => apply_example(example)}
+                    title={category.description}
+                    role="menuitem"
+                    tabindex="-1"
+                  >
+                    {example}
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .formula-filter {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 6pt;
+    padding: 4pt 8pt;
+    border-radius: 6px;
+    background: var(--filter-bg, rgba(128, 128, 128, 0.05));
+    transition: background 0.15s;
+  }
+  .formula-filter:focus-within {
+    background: rgba(77, 182, 255, 0.08);
+  }
+  .formula-filter.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    padding: 2pt 0;
+    outline: none;
+    font-family: var(--mono-font, monospace);
+  }
+  input::placeholder {
+    opacity: 0.4;
+  }
+  .mode-hint {
+    opacity: 0.5;
+    white-space: nowrap;
+  }
+  .mode-hint.clickable {
+    display: inline-flex;
+    align-items: center;
+    gap: 2pt;
+    background: rgba(77, 182, 255, 0.1);
+    border: 1px solid rgba(77, 182, 255, 0.25);
+    border-radius: 4px;
+    padding: 1pt 5pt;
+    cursor: pointer;
+    color: var(--highlight, #4db6ff);
+    opacity: 0.8;
+    transition: opacity 0.15s, background 0.15s;
+  }
+  .mode-hint.clickable:hover {
+    opacity: 1;
+    background: rgba(77, 182, 255, 0.2);
+    border-color: rgba(77, 182, 255, 0.4);
+  }
+  .icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 3pt;
+    border-radius: 50%;
+    color: inherit;
+    opacity: 0.4;
+  }
+  .icon-btn:hover {
+    opacity: 1;
+    background: rgba(128, 128, 128, 0.15);
+  }
+  .icon-btn.active {
+    opacity: 1;
+    color: var(--highlight, #4db6ff);
+  }
+  .examples-wrapper {
+    position: relative;
+  }
+  .examples-dropdown {
+    position: absolute;
+    top: calc(100% + 4pt);
+    right: 0;
+    z-index: 100;
+    width: max-content;
+    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: 8pt;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 6pt;
+  }
+  .examples-dropdown.anchor-left {
+    right: auto;
+    left: 0;
+  }
+  .example-category {
+    display: flex;
+    align-items: center;
+    gap: 6pt;
+    flex-wrap: wrap;
+  }
+  .category-label {
+    font-size: 0.75em;
+    font-weight: 600;
+    opacity: 0.6;
+    min-width: 115px;
+  }
+  .example-tags {
+    display: flex;
+    gap: 4pt;
+    flex-wrap: wrap;
+  }
+  .example-tag {
+    background: rgba(77, 182, 255, 0.1);
+    border: 1px solid rgba(77, 182, 255, 0.3);
+    border-radius: 4px;
+    padding: 3pt 7pt;
+    font-size: 0.82em;
+    font-family: var(--mono-font, monospace);
+    color: var(--highlight, #4db6ff);
+    cursor: pointer;
+  }
+  .example-tag:hover {
+    background: rgba(77, 182, 255, 0.2);
+    border-color: rgba(77, 182, 255, 0.5);
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FormulaSearchMode } from './index';
+type $$ComponentProps = {
+    value: string;
+    search_mode?: FormulaSearchMode;
+    input_element?: HTMLInputElement | null;
+    show_clear_button?: boolean;
+    show_examples?: boolean;
+    disabled?: boolean;
+    onchange?: (value: string, search_mode: FormulaSearchMode) => void;
+    onclear?: () => void;
+} & HTMLAttributes<HTMLDivElement>;
+declare const FormulaFilter: import("svelte").Component<$$ComponentProps, {}, "value" | "search_mode" | "input_element">;
+type FormulaFilter = ReturnType<typeof FormulaFilter>;
+export default FormulaFilter;

package/dist/composition/index.d.ts

@@ -2,11 +2,13 @@ import type { ElementSymbol } from '..';
 export { default as BarChart } from './BarChart.svelte';
 export { default as BubbleChart } from './BubbleChart.svelte';
 export { default as Composition } from './Composition.svelte';
-export { default as Formula } from './Formula.svelte';
 export * from './format';
+export { default as Formula } from './Formula.svelte';
+export { default as FormulaFilter } from './FormulaFilter.svelte';
 export * from './parse';
 export { default as PieChart } from './PieChart.svelte';
 export type CompositionType = Partial<Record<ElementSymbol, number>>;
+export type FormulaSearchMode = `elements` | `chemsys` | `exact`;
 export type ChartSegmentData = {
     element: ElementSymbol;
     amount: number;

package/dist/composition/index.js

@@ -1,8 +1,9 @@
 export { default as BarChart } from './BarChart.svelte';
 export { default as BubbleChart } from './BubbleChart.svelte';
 export { default as Composition } from './Composition.svelte';
-export { default as Formula } from './Formula.svelte';
 export * from './format';
+export { default as Formula } from './Formula.svelte';
+export { default as FormulaFilter } from './FormulaFilter.svelte';
 export * from './parse';
 export { default as PieChart } from './PieChart.svelte';
 export function get_chart_font_scale(base_scale, label_text, available_space, min_scale_factor = 0.7, base_font_size = 16) {

package/dist/constants.js

@@ -64,7 +64,11 @@ export const STRUCT_KEYWORDS_REGEX = new RegExp(`(${STRUCT_KEYWORDS.join(`|`)})`
 export const STRUCT_KEYWORDS_STRICT_REGEX = new RegExp(`(${STRUCT_KEYWORDS_STRICT.join(`|`)})`, `i`);
 export const TRAJ_KEYWORDS_SIMPLE_REGEX = new RegExp(`(${TRAJ_KEYWORDS.join(`|`)})`, `i`);
 // File extensions for different file types
-export const TRAJ_EXTENSIONS = Object.freeze([`.traj`, `.xtc`]);
+export const TRAJ_EXTENSIONS = Object.freeze([
+    `.traj`,
+    `.xtc`,
+    `.lammpstrj`,
+]);
 export const TRAJ_EXTENSIONS_REGEX = new RegExp(`\\.(${TRAJ_EXTENSIONS.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
 export const STRUCTURE_EXTENSIONS = Object.freeze([
     `.cif`,