matterviz 0.1.1 → 0.1.3

package/dist/DraggablePanel.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">import { Icon } from './';
+import { draggable } from './attachments';
+let { show = $bindable(false), show_panel = true, children, toggle_props = {}, open_icon = `Cross`, closed_icon = `Settings`, icon_style = ``, offset = { x: 5, y: 5 }, max_width = `450px`, panel_props = {}, onclose = () => { }, on_drag_start = () => { }, custom_toggle = undefined, toggle_panel_btn, panel_div, has_been_dragged = $bindable(false), currently_dragging = $bindable(false), } = $props();
+let initial_position = $state({ left: `50px`, top: `50px` });
+let show_control_buttons = $state(false);
+// Keyboard shortcuts
+function on_keydown(event) {
+    if (event.key === `Escape`) {
+        event.preventDefault();
+        close_panel();
+    }
+}
+// Panel actions
+function toggle_panel() {
+    show = !show;
+    if (!show)
+        onclose();
+}
+function close_panel() {
+    show = false;
+    onclose();
+}
+function reset_position() {
+    if (toggle_panel_btn) {
+        const pos = calculate_position();
+        initial_position = pos;
+        if (panel_div) {
+            Object.assign(panel_div.style, {
+                left: pos.left,
+                top: pos.top,
+                right: `auto`,
+                bottom: `auto`,
+                width: ``,
+            });
+        }
+    }
+    // Hide the control buttons after reset
+    show_control_buttons = false;
+    has_been_dragged = false;
+}
+// Drag handlers
+function handle_drag_start() {
+    has_been_dragged = true;
+    show_control_buttons = true;
+    currently_dragging = true;
+    on_drag_start();
+}
+function handle_drag_end() {
+    currently_dragging = false;
+}
+// Position calculation
+function calculate_position() {
+    if (!toggle_panel_btn)
+        return { left: `50px`, top: `50px` };
+    const toggle_rect = toggle_panel_btn.getBoundingClientRect();
+    const panel_width = panel_div?.getBoundingClientRect().width || 450;
+    const positioned_ancestor = toggle_panel_btn.offsetParent;
+    const ancestor_rect = positioned_ancestor?.getBoundingClientRect();
+    if (!ancestor_rect) {
+        // Fallback to document positioning
+        const scroll_x = window.scrollX || document.documentElement.scrollLeft;
+        const scroll_y = window.scrollY || document.documentElement.scrollTop;
+        return {
+            left: `${toggle_rect.right - panel_width + (offset.x ?? 5) + scroll_x}px`,
+            top: `${toggle_rect.bottom + (offset.y ?? 5) + scroll_y}px`,
+        };
+    }
+    // Position relative to positioned ancestor
+    return {
+        left: `${toggle_rect.right - ancestor_rect.left - panel_width + (offset.x ?? 5)}px`,
+        top: `${toggle_rect.bottom - ancestor_rect.top + (offset.y ?? 5)}px`,
+    };
+}
+// Click outside handler
+function handle_click_outside(event) {
+    if (!show)
+        return;
+    const target = event.target;
+    const is_toggle_button = toggle_panel_btn &&
+        (target === toggle_panel_btn || toggle_panel_btn.contains(target));
+    const is_inside_panel = panel_div &&
+        (target === panel_div || panel_div.contains(target));
+    if (!is_toggle_button && !is_inside_panel && !has_been_dragged &&
+        !currently_dragging) {
+        close_panel();
+    }
+}
+// Button click handler
+function handle_button_click(event, action) {
+    event.stopPropagation();
+    action();
+}
+// Position panel when shown
+$effect(() => {
+    if (show && toggle_panel_btn && !has_been_dragged) {
+        const pos = calculate_position();
+        initial_position = pos;
+        if (panel_div) {
+            Object.assign(panel_div.style, {
+                left: pos.left,
+                top: pos.top,
+                right: `auto`,
+                bottom: `auto`,
+            });
+        }
+    }
+});
+</script>
+
+<svelte:window onkeydown={on_keydown} />
+<svelte:document onclick={handle_click_outside} />
+
+{#if show_panel}
+  <button
+    bind:this={toggle_panel_btn}
+    onclick={(event) => handle_button_click(event, custom_toggle || toggle_panel)}
+    aria-expanded={show}
+    aria-controls="draggable-panel"
+    title={toggle_props.title ?? (show ? `Close panel` : `Open panel`)}
+    {...toggle_props}
+    class="panel-toggle {toggle_props.class ?? ``}"
+  >
+    <Icon icon={show ? open_icon : closed_icon} style={icon_style} />
+  </button>
+
+  <div
+    {@attach draggable({
+      handle_selector: `.drag-handle`,
+      on_drag_start: handle_drag_start,
+      on_drag_end: handle_drag_end,
+    })}
+    bind:this={panel_div}
+    role="dialog"
+    aria-label="Draggable panel"
+    aria-modal="false"
+    style:max-width={max_width}
+    style:top={initial_position.top}
+    style:left={initial_position.left}
+    style:display={show ? `grid` : `none`}
+    {...panel_props}
+    class="draggable-panel {show ? `panel-open` : ``} {panel_props.class ?? ``}"
+  >
+    <div class="panel-header">
+      <div class="control-buttons">
+        {#if show_control_buttons}
+          <button
+            class="reset-button"
+            onclick={(event) => handle_button_click(event, reset_position)}
+            title="Reset panel position"
+            aria-label="Reset panel position"
+          >
+            <Icon icon="Reset" style="width: 1.25em; height: 1.25em" />
+          </button>
+          <button
+            class="close-button"
+            onclick={(event) => handle_button_click(event, close_panel)}
+            title="Close panel"
+            aria-label="Close panel"
+          >
+            <Icon icon="Cross" style="width: 1.25em; height: 1.25em" />
+          </button>
+        {/if}
+        <Icon
+          icon="DragIndicator"
+          class="drag-handle"
+          style="width: 1.25em; height: 1.25em"
+        />
+      </div>
+    </div>
+
+    {@render children()}
+  </div>
+{/if}
+
+<style>
+  .panel-toggle {
+    box-sizing: border-box;
+    display: flex;
+    place-items: center;
+    padding: 4pt;
+    border-radius: var(--panel-toggle-border-radius, 3pt);
+    background-color: transparent;
+    transition: background-color 0.2s;
+  }
+  .panel-toggle:hover {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+  .draggable-panel {
+    position: absolute; /* Use absolute so panel scrolls with page content */
+    background: var(--panel-bg, rgba(15, 23, 42, 0.95));
+    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.15));
+    border-radius: 6px;
+    padding: 5px 15px 15px;
+    box-sizing: border-box;
+    z-index: 10;
+    display: grid;
+    gap: 4pt;
+    text-align: left;
+    /* Exclude position from being transitioned to prevent sluggish dragging */
+    transition: opacity 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    width: 28em;
+    max-width: 90cqw;
+    overflow: auto;
+    max-height: calc(100vh - 3em);
+    pointer-events: auto;
+  }
+  :global(body.fullscreen) .draggable-panel {
+    position: fixed !important; /* In fullscreen, we want viewport-relative positioning */
+    top: 3.3em !important;
+    right: 1em !important;
+    left: auto !important;
+  }
+  /* Panel content styling */
+  .draggable-panel :global(hr) {
+    border: none;
+    background: var(--panel-hr-bg, rgba(255, 255, 255, 0.1));
+    margin: 0;
+    height: 0.5px;
+  }
+  .draggable-panel :global(label) {
+    display: flex;
+    align-items: center;
+    gap: 2pt;
+  }
+  .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='number']) {
+    box-sizing: border-box;
+    text-align: center;
+    border-radius: 3pt;
+    width: 2.2em;
+    margin: 0 3pt 0 6pt;
+    flex-shrink: 0;
+  }
+  .draggable-panel :global(input::-webkit-inner-spin-button) {
+    display: none;
+  }
+  .draggable-panel :global(button) {
+    width: max-content;
+    background-color: var(--panel-btn-bg, rgba(255, 255, 255, 0.1));
+  }
+  .draggable-panel :global(button:hover) {
+    background-color: var(--panel-btn-hover-bg, rgba(255, 255, 255, 0.2));
+  }
+  .draggable-panel :global(select) {
+    margin: 0 0 0 5pt;
+  }
+  .draggable-panel :global(input[type='color']) {
+    width: 40px;
+    height: 16px;
+    margin: 0 0 0 5pt;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-sizing: border-box;
+  }
+  .draggable-panel :global(.section-heading) {
+    margin: 8pt 0 2pt;
+    font-size: 0.9em;
+  }
+  .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;
+  }
+  .draggable-panel :global(.panel-row label.slider-control) {
+    flex: 1;
+  }
+  /* Panel header styling */
+  .draggable-panel .panel-header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    height: 1.3em;
+    z-index: 10;
+    pointer-events: none; /* Allow events to pass through to children */
+  }
+  .draggable-panel .control-buttons {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    pointer-events: auto; /* Re-enable pointer events for buttons */
+  }
+  .draggable-panel :global(.drag-handle) {
+    width: 1.3em;
+    height: 1.3em;
+    cursor: grab;
+    border-radius: 3px;
+    padding: 2px;
+    box-sizing: border-box;
+    opacity: 0.6;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    pointer-events: auto; /* Re-enable pointer events for drag handle */
+  }
+  .draggable-panel :global(.drag-handle:hover) {
+    opacity: 0.8;
+    background-color: color-mix(in srgb, currentColor 20%, transparent);
+  }
+  /* Ensure drag handle cursor changes properly */
+  .draggable-panel :global(.drag-handle:active) {
+    cursor: grabbing;
+  }
+  /* Reset and close button styling */
+  .draggable-panel .reset-button,
+  .draggable-panel .close-button {
+    background: none;
+    border: none;
+    padding: 2px;
+    border-radius: 3px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    width: 1.3em;
+    height: 1.3em;
+    opacity: 0.6;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+  .draggable-panel :where(.reset-button:hover, .close-button:hover) {
+    opacity: 0.8;
+    background-color: color-mix(in srgb, currentColor 20%, transparent);
+  }
+</style>

package/dist/DraggablePanel.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { IconName } from './icons';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    show?: boolean;
+    show_panel?: boolean;
+    children: Snippet<[]>;
+    toggle_props?: HTMLAttributes<HTMLButtonElement>;
+    open_icon?: IconName;
+    closed_icon?: IconName;
+    icon_style?: string;
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    max_width?: string;
+    panel_props?: HTMLAttributes<HTMLDivElement>;
+    onclose?: () => void;
+    on_drag_start?: () => void;
+    custom_toggle?: () => void;
+    toggle_panel_btn?: HTMLButtonElement;
+    panel_div?: HTMLDivElement;
+    has_been_dragged?: boolean;
+    currently_dragging?: boolean;
+}
+declare const DraggablePanel: import("svelte").Component<Props, {}, "show" | "has_been_dragged" | "currently_dragging">;
+type DraggablePanel = ReturnType<typeof DraggablePanel>;
+export default DraggablePanel;

package/dist/api.js

@@ -15,8 +15,8 @@ export async function fetch_zipped(url, { unzip = true } = {}) {
         return (await response.blob());
     return JSON.parse(await decompress(response.body));
 }
-// Function to download data to a file
-export function download(data, filename, type) {
+// Original download implementation
+function default_download(data, filename, type) {
     const file = new Blob([data], { type });
     const link = document.createElement(`a`);
     const url = URL.createObjectURL(file);
@@ -28,3 +28,13 @@ export function download(data, filename, type) {
     link.remove();
     URL.revokeObjectURL(url);
 }
+// Function to download data to a file - checks for global override first
+export function download(data, filename, type) {
+    // Check if there's a global download override (used by VSCode extension)
+    const global_download = globalThis.download;
+    if (typeof global_download === `function` && global_download !== download) {
+        return global_download(data, filename, type);
+    }
+    // Use default browser download
+    return default_download(data, filename, type);
+}

package/dist/attachments.d.ts

@@ -0,0 +1,8 @@
+import type { Attachment } from 'svelte/attachments';
+export interface DraggableOptions {
+    handle_selector?: string;
+    on_drag_start?: (event: MouseEvent) => void;
+    on_drag?: (event: MouseEvent) => void;
+    on_drag_end?: (event: MouseEvent) => void;
+}
+export declare function draggable(options?: DraggableOptions): Attachment;

package/dist/attachments.js

@@ -0,0 +1,87 @@
+// Svelte 5 attachment factory to make an element draggable
+// @param options - Configuration options for dragging behavior
+// @returns Attachment function that sets up dragging on an element
+export function draggable(options = {}) {
+    return (element) => {
+        const node = element;
+        // Use simple variables for maximum performance
+        let dragging = false;
+        let start = { x: 0, y: 0 };
+        const initial = { left: 0, top: 0, width: 0 };
+        const handle = options.handle_selector
+            ? node.querySelector(options.handle_selector)
+            : node;
+        if (!handle) {
+            console.warn(`Draggable: handle not found with selector "${options.handle_selector}"`);
+            return;
+        }
+        function handle_mousedown(event) {
+            // Only drag if mousedown is on the handle or its children
+            if (!handle?.contains?.(event.target))
+                return;
+            dragging = true;
+            // For position: fixed elements, use getBoundingClientRect for viewport-relative position
+            const computed_style = getComputedStyle(node);
+            if (computed_style.position === `fixed`) {
+                const rect = node.getBoundingClientRect();
+                initial.left = rect.left;
+                initial.top = rect.top;
+                initial.width = rect.width;
+            }
+            else {
+                // For other positioning, use offset values
+                initial.left = node.offsetLeft;
+                initial.top = node.offsetTop;
+                initial.width = node.offsetWidth;
+            }
+            node.style.left = `${initial.left}px`;
+            node.style.top = `${initial.top}px`;
+            node.style.width = `${initial.width}px`;
+            node.style.right = `auto`; // Prevent conflict with left
+            start = { x: event.clientX, y: event.clientY };
+            document.body.style.userSelect = `none`; // Prevent text selection during drag
+            if (handle)
+                handle.style.cursor = `grabbing`;
+            globalThis.addEventListener(`mousemove`, handle_mousemove);
+            globalThis.addEventListener(`mouseup`, handle_mouseup);
+            options.on_drag_start?.(event); // Call optional callback
+        }
+        function handle_mousemove(event) {
+            if (!dragging)
+                return;
+            // Use the exact same calculation as the fast old implementation
+            const dx = event.clientX - start.x;
+            const dy = event.clientY - start.y;
+            node.style.left = `${initial.left + dx}px`;
+            node.style.top = `${initial.top + dy}px`;
+            // Only call callback if it exists (minimize overhead)
+            if (options.on_drag)
+                options.on_drag(event);
+        }
+        function handle_mouseup(event) {
+            if (!dragging)
+                return;
+            dragging = false;
+            event.stopPropagation();
+            document.body.style.userSelect = ``;
+            if (handle)
+                handle.style.cursor = `grab`;
+            globalThis.removeEventListener(`mousemove`, handle_mousemove);
+            globalThis.removeEventListener(`mouseup`, handle_mouseup);
+            options.on_drag_end?.(event); // Call optional callback
+        }
+        if (handle) {
+            handle.addEventListener(`mousedown`, handle_mousedown);
+            handle.style.cursor = `grab`;
+        }
+        // Return cleanup function (this is the attachment pattern)
+        return () => {
+            globalThis.removeEventListener(`mousemove`, handle_mousemove);
+            globalThis.removeEventListener(`mouseup`, handle_mouseup);
+            if (handle) {
+                handle.removeEventListener(`mousedown`, handle_mousedown);
+                handle.style.cursor = ``; // Reset cursor
+            }
+        };
+    };
+}

package/dist/colors/index.js

@@ -1,11 +1,11 @@
 import { rgb } from 'd3-color';
 import * as d3_sc from 'd3-scale-chromatic';
-import alloy_colors from './alloy-colors.json';
-import dark_mode_colors from './dark-mode-colors.json';
-import jmol_colors from './jmol-colors.json';
-import muted_colors from './muted-colors.json';
-import pastel_colors from './pastel-colors.json';
-import vesta_colors from './vesta-colors.json';
+import alloy_colors from './alloy-colors.json' with { type: 'json' };
+import dark_mode_colors from './dark-mode-colors.json' with { type: 'json' };
+import jmol_colors from './jmol-colors.json' with { type: 'json' };
+import muted_colors from './muted-colors.json' with { type: 'json' };
+import pastel_colors from './pastel-colors.json' with { type: 'json' };
+import vesta_colors from './vesta-colors.json' with { type: 'json' };
 // color values have to be in hex format since that's the only format
 // <input type="color"> supports
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#value

package/dist/composition/parse.d.ts

@@ -1,4 +1,8 @@
 import type { CompositionType, ElementSymbol } from '..';
+export declare const atomic_number_to_symbol: Partial<Record<number, ElementSymbol>>;
+export declare const symbol_to_atomic_number: Partial<Record<ElementSymbol, number>>;
+export declare const atomic_weights: Map<"K" | "H" | "He" | "Li" | "Be" | "B" | "C" | "N" | "O" | "F" | "Ne" | "Na" | "Mg" | "Al" | "Si" | "P" | "S" | "Cl" | "Ar" | "Ca" | "Sc" | "Ti" | "V" | "Cr" | "Mn" | "Fe" | "Co" | "Ni" | "Cu" | "Zn" | "Ga" | "Ge" | "As" | "Se" | "Br" | "Kr" | "Rb" | "Sr" | "Y" | "Zr" | "Nb" | "Mo" | "Tc" | "Ru" | "Rh" | "Pd" | "Ag" | "Cd" | "In" | "Sn" | "Sb" | "Te" | "I" | "Xe" | "Cs" | "Ba" | "La" | "Ce" | "Pr" | "Nd" | "Pm" | "Sm" | "Eu" | "Gd" | "Tb" | "Dy" | "Ho" | "Er" | "Tm" | "Yb" | "Lu" | "Hf" | "Ta" | "W" | "Re" | "Os" | "Ir" | "Pt" | "Au" | "Hg" | "Tl" | "Pb" | "Bi" | "Po" | "At" | "Rn" | "Fr" | "Ra" | "Ac" | "Th" | "Pa" | "U" | "Np" | "Pu" | "Am" | "Cm" | "Bk" | "Cf" | "Es" | "Fm" | "Md" | "No" | "Lr" | "Rf" | "Db" | "Sg" | "Bh" | "Hs" | "Mt" | "Ds" | "Rg" | "Cn" | "Nh" | "Fl" | "Mc" | "Lv" | "Ts" | "Og", number>;
+export declare const element_electronegativity_map: Map<"K" | "H" | "He" | "Li" | "Be" | "B" | "C" | "N" | "O" | "F" | "Ne" | "Na" | "Mg" | "Al" | "Si" | "P" | "S" | "Cl" | "Ar" | "Ca" | "Sc" | "Ti" | "V" | "Cr" | "Mn" | "Fe" | "Co" | "Ni" | "Cu" | "Zn" | "Ga" | "Ge" | "As" | "Se" | "Br" | "Kr" | "Rb" | "Sr" | "Y" | "Zr" | "Nb" | "Mo" | "Tc" | "Ru" | "Rh" | "Pd" | "Ag" | "Cd" | "In" | "Sn" | "Sb" | "Te" | "I" | "Xe" | "Cs" | "Ba" | "La" | "Ce" | "Pr" | "Nd" | "Pm" | "Sm" | "Eu" | "Gd" | "Tb" | "Dy" | "Ho" | "Er" | "Tm" | "Yb" | "Lu" | "Hf" | "Ta" | "W" | "Re" | "Os" | "Ir" | "Pt" | "Au" | "Hg" | "Tl" | "Pb" | "Bi" | "Po" | "At" | "Rn" | "Fr" | "Ra" | "Ac" | "Th" | "Pa" | "U" | "Np" | "Pu" | "Am" | "Cm" | "Bk" | "Cf" | "Es" | "Fm" | "Md" | "No" | "Lr" | "Rf" | "Db" | "Sg" | "Bh" | "Hs" | "Mt" | "Ds" | "Rg" | "Cn" | "Nh" | "Fl" | "Mc" | "Lv" | "Ts" | "Og", number>;
 export declare function atomic_number_to_element_symbol(atomic_number: number): ElementSymbol | null;
 export declare function element_symbol_to_atomic_number(symbol: ElementSymbol): number | null;
 export declare function convert_atomic_numbers_to_symbols(atomic_composition: Record<number, number>): CompositionType;

package/dist/composition/parse.js

@@ -1,16 +1,16 @@
 import { elem_symbols } from '..';
 import element_data from '../element/data';
 // Create a mapping from atomic numbers to element symbols
-const atomic_number_to_symbol = {};
-const symbol_to_atomic_number = {};
+export const atomic_number_to_symbol = {};
+export const symbol_to_atomic_number = {};
 // Create mass/electronegativity maps for O(1) lookups in loops below
-const element_atomic_mass_map = new Map();
-const element_electronegativity_map = new Map();
+export const atomic_weights = new Map();
+export const element_electronegativity_map = new Map();
 // Populate maps at module load time
 for (const element of element_data) {
     atomic_number_to_symbol[element.number] = element.symbol;
     symbol_to_atomic_number[element.symbol] = element.number;
-    element_atomic_mass_map.set(element.symbol, element.atomic_mass);
+    atomic_weights.set(element.symbol, element.atomic_mass);
     element_electronegativity_map.set(element.symbol, element.electronegativity ?? 0);
 }
 // Convert atomic number to element symbol
@@ -134,7 +134,7 @@ export function composition_to_percentages(composition, by_weight = false) {
         // Calculate weight for each element
         for (const [element, amount] of Object.entries(composition)) {
             if (typeof amount === `number` && amount > 0) {
-                const atomic_mass = element_atomic_mass_map.get(element);
+                const atomic_mass = atomic_weights.get(element);
                 if (atomic_mass === undefined) {
                     throw new Error(`Unknown element: ${element}`);
                 }