matterviz 0.1.8 → 0.1.10

package/dist/ContextMenu.svelte

@@ -52,7 +52,7 @@ function handle_option_click(section_title, option) {
 {#if visible}
   {@const { x, y } = get_smart_position()}
   {@const style = `position: absolute; left: ${x}px; top: ${y}px; ${rest.style ?? ``}`}
-  <div class="context-menu" {...rest} {style} bind:this={menu_element}>
+  <div {...rest} class="context-menu {rest.class ?? ``}" {style} bind:this={menu_element}>
     {#each sections as { title, options } (title)}
       <div class="section">
         <div class="header">{title}</div>

package/dist/ContextMenu.svelte.d.ts

@@ -1,10 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
 interface MenuOption {
     value: string;
     icon?: string;
     label?: string;
     disabled?: boolean;
 }
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
     sections: Readonly<{
         title: string;
         options: readonly MenuOption[];
@@ -17,8 +18,7 @@ interface Props {
     };
     visible: boolean;
     on_close?: () => void;
-    menu_element?: HTMLElement;
-    [key: string]: unknown;
+    menu_element?: HTMLDivElement;
 }
 declare const ContextMenu: import("svelte").Component<Props, {}, "menu_element">;
 type ContextMenu = ReturnType<typeof ContextMenu>;

package/dist/DraggablePane.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">import { Icon } from './';
 import { draggable, tooltip } from 'svelte-multiselect/attachments';
-let { show = $bindable(false), show_pane = true, children, toggle_props = {}, open_icon = `Cross`, closed_icon = `Settings`, icon_style = ``, offset = { x: 5, y: 5 }, max_width = `450px`, pane_props = {}, onclose = () => { }, on_drag_start = () => { }, custom_toggle = undefined, toggle_pane_btn = $bindable(undefined), pane_div = $bindable(undefined), has_been_dragged = $bindable(false), currently_dragging = $bindable(false), } = $props();
+let { show = $bindable(false), show_pane = true, children, toggle_props = {}, open_icon = `Cross`, closed_icon = `Settings`, icon_style = ``, offset = { x: 5, y: 5 }, max_width = `450px`, pane_props = {}, onclose = () => { }, on_drag_start = () => { }, toggle_pane_btn = $bindable(undefined), pane_div = $bindable(undefined), 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_pane();
-    }
-}
 function toggle_pane() {
     show = !show;
     if (!show)
@@ -52,8 +45,7 @@ function calculate_position() {
     const pane_width = pane_div?.getBoundingClientRect().width || 450;
     const positioned_ancestor = toggle_pane_btn.offsetParent;
     const ancestor_rect = positioned_ancestor?.getBoundingClientRect();
-    if (!ancestor_rect) {
-        // Fallback to document positioning
+    if (!ancestor_rect) { // Fallback to document positioning
         const scroll_x = window.scrollX || document.documentElement.scrollLeft;
         const scroll_y = window.scrollY || document.documentElement.scrollTop;
         return {
@@ -61,11 +53,9 @@ function calculate_position() {
             top: `${toggle_rect.bottom + (offset.y ?? 5) + scroll_y}px`,
         };
     }
-    // Position relative to positioned ancestor
-    return {
-        left: `${toggle_rect.right - ancestor_rect.left - pane_width + (offset.x ?? 5)}px`,
-        top: `${toggle_rect.bottom - ancestor_rect.top + (offset.y ?? 5)}px`,
-    };
+    const left = `${toggle_rect.right - ancestor_rect.left - pane_width + (offset.x ?? 5)}px`;
+    const top = `${toggle_rect.bottom - ancestor_rect.top + (offset.y ?? 5)}px`;
+    return { left, top }; // Position relative to positioned ancestor
 }
 // Click outside handler
 function handle_click_outside(event) {
@@ -79,11 +69,6 @@ function handle_click_outside(event) {
     if (!is_toggle_button && !is_inside_pane && !currently_dragging)
         close_pane();
 }
-// Button click handler
-const handle_button_click = (action) => (event) => {
-    event.stopPropagation();
-    action();
-};
 // Debounced resize handler for better performance
 let resize_timeout = $state(undefined);
 function handle_resize() {
@@ -121,16 +106,23 @@ $effect(() => {
 });
 </script>
 
-<svelte:window onkeydown={on_keydown} onresize={handle_resize} />
+<svelte:window
+  onkeydown={(event: KeyboardEvent) => {
+    if (event.key !== `Escape`) return
+    event.preventDefault()
+    close_pane()
+  }}
+  onresize={handle_resize}
+/>
 <svelte:document onclick={handle_click_outside} />
 
 {#if show_pane}
   <button
     type="button"
     bind:this={toggle_pane_btn}
-    onclick={handle_button_click(custom_toggle || toggle_pane)}
     aria-expanded={show}
     {...toggle_props}
+    onclick={toggle_pane}
     class="pane-toggle {toggle_props.class ?? ``}"
     {@attach tooltip({ content: toggle_props.title ?? (show ? `Close pane` : `Open pane`) })}
   >
@@ -159,7 +151,7 @@ $effect(() => {
         <button
           type="button"
           class="reset-button"
-          onclick={handle_button_click(reset_position)}
+          onclick={reset_position}
           title="Reset pane position"
           aria-label="Reset pane position"
         >
@@ -168,7 +160,7 @@ $effect(() => {
         <button
           type="button"
           class="close-button"
-          onclick={handle_button_click(close_pane)}
+          onclick={close_pane}
           title="Close pane"
           aria-label="Close pane"
         >
@@ -194,8 +186,8 @@ $effect(() => {
     padding: var(--pane-toggle-padding, 2pt);
     border-radius: var(--pane-toggle-border-radius, 3pt);
     background-color: transparent;
-    transition: background-color 0.2s;
-    font-size: var(--pane-toggle-font-size, clamp(1.1em, calc(1cqw + 1cqh), 1.4em));
+    transition: var(--pane-toggle-transition, background-color 0.2s);
+    font-size: var(--pane-toggle-font-size, clamp(0.9em, 2cqmin, 1.4em));
   }
   button.pane-toggle:hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
@@ -204,21 +196,25 @@ $effect(() => {
     position: absolute; /* Use absolute so pane scrolls with page content */
     background: var(--pane-bg, var(--page-bg, light-dark(white, black)));
     border: var(--pane-border, 1px solid rgba(255, 255, 255, 0.15));
-    border-radius: 6px;
+    border-radius: var(--pane-border-radius, 6px);
     padding: var(--pane-padding, 1ex);
     box-sizing: border-box;
     z-index: var(--pane-z-index, 10);
     display: grid;
-    gap: 4pt;
+    gap: var(--pane-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-x: hidden;
-    overflow-y: auto;
-    max-height: min(90vh, 800px);
-    pointer-events: auto;
+    max-width: var(--pane-max-width, 80cqw);
+    overflow-x: var(--pane-overflow-x, hidden);
+    overflow-y: var(--pane-overflow-y, auto);
+    min-height: min(
+      var(--pane-min-height, 400px),
+      calc(100cqh - var(--pane-bottom-margin, 40px))
+    ); /* Ensure pane never exceeds its query container, enabling internal scroll */
+    max-height: var(--pane-max-height, calc(100cqh - var(--pane-bottom-margin, 40px)));
+    overscroll-behavior: contain; /* Prevent scroll chaining to parent containers (e.g. Jupyter cells) */
   }
   :global(body.fullscreen) .draggable-pane {
     position: fixed !important; /* In fullscreen, we want viewport-relative positioning */
@@ -228,23 +224,26 @@ $effect(() => {
   }
   /* Pane content styling */
   .draggable-pane :global(h4) {
-    margin: 2pt 0;
-    font-size: 0.95em;
+    margin: var(--pane-h4-margin, 2pt 0);
+    font-size: var(--pane-h4-font-size, 0.95em);
   }
   .draggable-pane :global(hr) {
     border: none;
     background: var(--pane-hr-bg, rgba(255, 255, 255, 0.1));
-    margin: 4pt 0;
+    margin: var(--pane-hr-margin, 4pt 0);
     height: 1px;
   }
+  .draggable-pane :global(> section > div) {
+    text-align: right; /* right align long line-breaking trajectory file names */
+  }
   .draggable-pane :global(label) {
     display: flex;
     align-items: center;
-    gap: 2pt;
+    gap: var(--pane-label-gap, 2pt);
   }
   .draggable-pane :global(input[type='text']) {
     flex: 1;
-    padding: 4px 6px;
+    padding: var(--pane-input-padding, 4px 6px);
     margin: var(--pane-input-margin, 0 0 0 5pt);
   }
   .draggable-pane :global(input[type='text'].invalid) {
@@ -321,6 +320,7 @@ $effect(() => {
     margin-bottom: calc(-2 * 12pt);
     box-sizing: border-box;
     justify-self: end;
+    z-index: var(--pane-control-buttons-z-index, 1);
   }
   .draggable-pane :global(.drag-handle) {
     width: 1.3em;

package/dist/DraggablePane.svelte.d.ts

@@ -17,7 +17,6 @@ interface Props {
     pane_props?: HTMLAttributes<HTMLDivElement>;
     onclose?: () => void;
     on_drag_start?: () => void;
-    custom_toggle?: () => void;
     toggle_pane_btn?: HTMLButtonElement;
     pane_div?: HTMLDivElement;
     has_been_dragged?: boolean;

package/dist/FilePicker.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { files, active_files = [], show_category_filters = false, category_labels = {}, on_drag_start, on_drag_end, type_mapper, file_type_colors = {
+<script lang="ts">import { tooltip } from 'svelte-multiselect';
+let { files, active_files = [], show_category_filters = false, on_drag_start, on_drag_end, type_mapper, file_type_colors = {
     cif: `rgba(100, 149, 237, 0.8)`,
     xyz: `rgba(50, 205, 50, 0.8)`,
     extxyz: `rgba(50, 205, 50, 0.8)`,
@@ -14,23 +15,29 @@
 let active_category_filter = $state(null);
 let active_type_filter = $state(null);
 // Helper function to get the base file type (removing .gz extension)
-const get_base_file_type = (filename) => {
+const get_base_file_type = (file) => {
     // Use custom type mapper if provided
     if (type_mapper)
-        return type_mapper(filename);
-    let base_name = filename.toLowerCase();
+        return type_mapper(file);
+    let base_name = file.name.toLowerCase();
     // Remove .gz extension if present
     if (base_name.endsWith(`.gz`))
         base_name = base_name.slice(0, -3);
     return base_name.split(`.`).pop() || `file`;
 };
+// Helper function to create normalized category identifier for filtering
+const get_category_id = (file) => {
+    if (!file.category)
+        return `(uncategorized)`;
+    return `${file.category_icon ?? ``} ${file.category}`.trim();
+};
 // Filter files based on active filters
 let filtered_files = $derived(files.filter((file) => {
-    if (active_category_filter && file.category) {
-        return file.category === active_category_filter;
+    if (active_category_filter) {
+        return get_category_id(file) === active_category_filter;
     }
     if (active_type_filter) {
-        const normalized_type = get_base_file_type(file.name);
+        const normalized_type = get_base_file_type(file);
         return normalized_type === active_type_filter;
     }
     return true;
@@ -50,7 +57,7 @@ const handle_drag_start = (file) => (event) => {
     const payload = JSON.stringify({
         name: file.name,
         url: file_url,
-        type: file.type || get_base_file_type(file.name),
+        type: file.type || get_base_file_type(file),
         category: file.category,
     });
     // Set file data as JSON for applications that can handle it
@@ -59,37 +66,32 @@ const handle_drag_start = (file) => (event) => {
     event.dataTransfer?.setData(`text/plain`, file_url);
     on_drag_start?.(file, event);
 };
-// Get unique file types for format filters
-let uniq_formats = $derived([...new Set(files.map((file) => get_base_file_type(file.name)))].sort());
-// Get unique category types for category filters
-let uniq_categories = $derived(show_category_filters
-    ? [...new Set(files.map((file) => file.category))].sort().filter(Boolean)
-    : []);
-export {};
+// Get unique file types/categories for format/category filters
+let uniq_formats = $derived([...new Set(files.map(get_base_file_type))].sort());
+let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(Boolean).sort());
 </script>
 
 <div class="file-picker" {...rest}>
   <div class="legend">
-    {#if show_category_filters}
-      {#each uniq_categories as category (category)}
-        {@const is_active = active_category_filter === category}
-        <span
-          class="legend-item"
-          class:active={is_active}
-          onclick={() => category && toggle_filter(`category`, category)}
-          onkeydown={(evt) =>
-          (evt.key === `Enter` || evt.key === ` `) &&
-          category &&
-          toggle_filter(`category`, category)}
-          role="button"
-          tabindex="0"
-          title="Filter to show only {category}"
-        >
-          {(category && category_labels[category]) || category}
-        </span>
-      {/each}
-      {#if uniq_categories.length > 0 && uniq_formats.length > 0}&emsp;{/if}
-    {/if}
+    {#each show_category_filters ? uniq_categories : [] as category (category)}
+      {@const is_active = active_category_filter === category}
+      <span
+        class="legend-item"
+        class:active={is_active}
+        onclick={() => category && toggle_filter(`category`, category)}
+        onkeydown={(evt) =>
+        (evt.key === `Enter` || evt.key === ` `) &&
+        category &&
+        toggle_filter(`category`, category)}
+        role="button"
+        tabindex="0"
+        aria-pressed={is_active}
+        {@attach tooltip({ content: `Filter to show only ${category}` })}
+      >
+        {category}
+      </span>
+    {/each}
+    {#if uniq_categories.length > 0 && uniq_formats.length > 0}&emsp;{/if}
 
     {#each uniq_formats as format (format)}
       {@const is_active = active_type_filter === format}
@@ -101,7 +103,7 @@ export {};
         (evt.key === `Enter` || evt.key === ` `) && toggle_filter(`type`, format)}
         role="button"
         tabindex="0"
-        title="Filter to show only {format.toUpperCase()} files"
+        {@attach tooltip({ content: `Filter to show only ${format.toUpperCase()} files` })}
       >
         <span
           class="format-circle"
@@ -112,12 +114,9 @@ export {};
 
     {#if active_category_filter || active_type_filter}
       <button
-        title="Clear all filters"
+        {@attach tooltip({ content: `Clear all filters` })}
         class="clear-filter"
-        onclick={() => {
-          active_category_filter = null
-          active_type_filter = null
-        }}
+        onclick={() => [active_category_filter, active_type_filter] = [null, null]}
       >
         ✕
       </button>
@@ -125,7 +124,7 @@ export {};
   </div>
 
   {#each filtered_files as file (file.name)}
-    {@const base_type = get_base_file_type(file.name)}
+    {@const base_type = get_base_file_type(file)}
     {@const is_compressed = file.name.toLowerCase().endsWith(`.gz`)}
     <div
       class="file-item"
@@ -139,13 +138,8 @@ export {};
       tabindex="0"
       title="Drag this {base_type.toUpperCase()} file"
     >
-      <div class="drag-handle">
-        <div class="drag-bar"></div>
-        <div class="drag-bar"></div>
-        <div class="drag-bar"></div>
-      </div>
       <div class="file-name">
-        {file.name}{file.category ? `\u00A0${file.category}` : ``}
+        {file.category ? `${file.category_icon} ` : ``}{file.name}
         {#if is_compressed}<span class="compression-indicator">📦</span>{/if}
       </div>
     </div>
@@ -231,18 +225,6 @@ export {};
     background: rgba(0, 122, 204, 0.2);
     filter: brightness(1.1);
   }
-  .drag-handle {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    opacity: 0.6;
-  }
-  .drag-bar {
-    width: 12px;
-    height: 2px;
-    background: currentColor;
-    border-radius: 1px;
-  }
   .file-name {
     font-size: 0.7em;
     line-height: 1.1;

package/dist/FilePicker.svelte.d.ts

@@ -1,14 +1,13 @@
 import type { FileInfo } from './';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     files: FileInfo[];
     active_files?: string[];
     show_category_filters?: boolean;
-    category_labels?: Record<string, string>;
     on_drag_start?: (file: FileInfo, event: DragEvent) => void;
     on_drag_end?: () => void;
-    type_mapper?: (filename: string) => string;
+    type_mapper?: (file: FileInfo) => string;
     file_type_colors?: Record<string, string>;
-    [key: string]: unknown;
 }
 declare const FilePicker: import("svelte").Component<Props, {}, "">;
 type FilePicker = ReturnType<typeof FilePicker>;

package/dist/Icon.svelte

@@ -9,7 +9,7 @@ const { path, ...svg_props } = $derived.by(() => {
 });
 </script>
 
-<svg fill="currentColor" {...svg_props} {...rest}>
+<svg role="img" fill="currentColor" {...svg_props} {...rest}>
   {#if path.trim().startsWith(`<`)}
     {@html path}
   {:else}

package/dist/Icon.svelte.d.ts

@@ -1,7 +1,7 @@
+import type { SVGAttributes } from 'svelte/elements';
 import { type IconName } from './icons';
-interface Props {
+interface Props extends SVGAttributes<SVGSVGElement> {
     icon: IconName;
-    [key: string]: unknown;
 }
 declare const Icon: import("svelte").Component<Props, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/InfoCard.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { format_num } from './';
-let { data = [], title = ``, fallback = ``, fmt = `.2f`, as = `section`, style = null, title_snippet, fallback_snippet, ...rest } = $props();
+let { data = [], title = ``, fallback = ``, fmt = `.2f`, as = `section`, title_snippet, fallback_snippet, ...rest } = $props();
 // rename fmt as default_fmt internally
 let default_fmt = $derived(fmt);
 </script>
 
-<svelte:element this={as} class="info-card" {style} {...rest}>
+<svelte:element this={as} {...rest} class="info-card {rest.class ?? ``}">
   {#if title || title_snippet}
     <h2>
       {#if title_snippet}{@render title_snippet()}{:else}
@@ -13,8 +13,8 @@ let default_fmt = $derived(fmt);
     </h2>
   {/if}
   {#each data.filter((itm) =>
-      (!(`condition` in itm) || itm?.condition) &&
-      ![undefined, null].includes(itm.value)
+      (!(`condition` in itm) || itm?.condition) && itm.value !== undefined &&
+      itm.value !== null
     ) as
     { title, value, unit, fmt = default_fmt, tooltip }
     (title + value + unit + fmt)

package/dist/InfoCard.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props<T extends keyof HTMLElementTagNameMap = `section`> extends HTMLAttributes<HTMLElementTagNameMap[T]> {
     data?: {
         title: string;
         value?: string | number | number[] | null;
@@ -11,12 +12,10 @@ interface Props {
     title?: string;
     fallback?: string;
     fmt?: string;
-    as?: string;
-    style?: string | null;
+    as?: T;
     title_snippet?: Snippet;
     fallback_snippet?: Snippet;
-    [key: string]: unknown;
 }
-declare const InfoCard: import("svelte").Component<Props, {}, "">;
+declare const InfoCard: import("svelte").Component<Props<"section">, {}, "">;
 type InfoCard = ReturnType<typeof InfoCard>;
 export default InfoCard;

package/dist/SettingsSection.svelte

@@ -59,7 +59,7 @@ function handle_reset(event) {
 }
 </script>
 
-<h4>
+<h4 id="settings-section-title">
   {title}
 
   {#if has_changes}
@@ -74,7 +74,7 @@ function handle_reset(event) {
     </button>
   {/if}
 </h4>
-<section {...rest}>
+<section {...rest} aria-labelledby="settings-section-title">
   {@render children()}
 </section>
 

package/dist/SettingsSection.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElementTagNameMap[`section`]> {
     title: string;
     current_values: Record<string, unknown>;
     children: Snippet<[]>;
     on_reset?: () => void;
-    [key: string]: unknown;
 }
 declare const SettingsSection: import("svelte").Component<Props, {}, "">;
 type SettingsSection = ReturnType<typeof SettingsSection>;

package/dist/Spinner.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">"use strict";
-let { text = `Loading...`, ...rest } = $props();
+<script lang="ts">let { text = `Loading...`, ...rest } = $props();
+export {};
 </script>
 
-<div class="spinner-overlay" role="status" aria-live="polite" {...rest}>
+<div class="spinner-overlay" role="status" aria-live="polite" aria-busy="true" {...rest}>
   <div class="spinner" aria-hidden="true"></div>
   <p>{text}</p>
 </div>

package/dist/Spinner.svelte.d.ts

@@ -1,6 +1,6 @@
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     text?: string;
-    [key: string]: unknown;
 }
 declare const Spinner: import("svelte").Component<Props, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;

package/dist/api/optimade.d.ts

@@ -10,13 +10,13 @@ export interface OptimadeStructure {
         lattice_vectors?: number[][];
         cartesian_site_positions?: number[][];
         species_at_sites?: string[];
-        species?: Array<{
+        species?: {
             name: string;
             chemical_symbols?: string[];
             concentration?: number[];
             mass?: number[];
             original_name?: string;
-        }>;
+        }[];
         n_sites?: number;
         last_modified?: string;
         immutable_id?: string;

package/dist/app.css

@@ -4,9 +4,6 @@
   --page-bg: #090019;
   --max-text-width: 50em;
 
-  --github-corner-color: var(--page-bg);
-  --github-corner-bg: var(--text-color);
-
   --sms-max-width: 20em;
   --sms-text-color: var(--text-color);
 }
@@ -45,8 +42,7 @@ a {
   text-decoration: none;
 }
 
-button,
-a.btn {
+button, a.btn {
   color: var(--text-color);
   cursor: pointer;
   border: none;
@@ -56,8 +52,7 @@ a.btn {
 a:hover {
   color: var(--accent-hover-color, orange);
 }
-code,
-kbd {
+code, kbd {
   overflow-wrap: break-word;
   padding: 1pt 3pt;
   border-radius: 3pt;
@@ -155,7 +150,7 @@ table.roomy :is(td, th) {
   padding: 5pt 9pt;
 }
 tbody tr:nth-child(odd) {
-  background: var(--surface-bg, black);
+  background: color-mix(in hsl, var(--page-bg, black), var(--text-color) 2%);
 }
 
 :where(ul.selected > li button, button.remove-all) {
@@ -174,3 +169,11 @@ tbody tr:nth-child(odd) {
   margin-left: calc(-50vw + 50% + max(var(--margin), (100vw - 1400px) / 2));
   max-width: none !important;
 }
+
+.copy-btn {
+  position: absolute;
+  top: 9pt;
+  right: 9pt;
+  background: var(--btn-bg);
+  color: var(--btn-color);
+}

package/dist/colors/index.d.ts

@@ -3,6 +3,8 @@ import type { elem_symbols } from '../labels';
 export type D3InterpolateName = keyof typeof d3_sc & `interpolate${string}`;
 export type D3ColorSchemeName = D3InterpolateName extends `interpolate${infer Name}` ? Name : never;
 export declare const default_category_colors: Record<string, string>;
+export declare const axis_colors: readonly [readonly ["x", "#d75555", "#e66666"], readonly ["y", "#55b855", "#66c966"], readonly ["z", "#5555d7", "#6666e6"]];
+export declare const neg_axis_colors: readonly [readonly ["nx", "#b84444", "#cc5555"], readonly ["ny", "#44a044", "#55b155"], readonly ["nz", "#4444b8", "#5555c9"]];
 export type RGBColor = [number, number, number];
 export type ElementColorScheme = Record<(typeof elem_symbols)[number], RGBColor>;
 export declare const vesta_hex: Record<string, string>;
@@ -27,4 +29,10 @@ export declare const is_color: (val: unknown) => val is string;
 export declare const plot_colors: readonly ["#63b3ed", "#68d391", "#fbd38d", "#fc8181", "#d6bcfa", "#4fd1c7", "#f687b3", "#fed7d7", "#bee3f8", "#c6f6d5"];
 export declare function luminance(clr: string): number;
 export declare function get_bg_color(elem: HTMLElement | null, bg_color?: string | null): string;
-export declare function pick_color_for_contrast(node: HTMLElement | null, bg_color?: string | null, text_color_threshold?: number, choices?: [string, string]): string;
+export interface ContrastOptions {
+    bg_color?: string;
+    text_color_threshold?: number;
+    choices?: [string, string];
+}
+export declare function pick_contrast_color(options?: ContrastOptions): string;
+export declare const contrast_color: (options?: ContrastOptions) => (node: HTMLElement) => void;