matterviz 0.3.4 → 0.3.6

package/dist/api/optimade.js

@@ -1,135 +0,0 @@
-// OPTIMADE API utilities for fetching structure data
-// Based on OPTIMADE 1.2.0 specification
-// Multiple CORS proxies for fallback reliability
-const CORS_PROXIES = [
-    `https://corsproxy.io/?`,
-    `https://api.allorigins.win/raw?url=`,
-    `https://cors-anywhere.herokuapp.com/`,
-    `https://thingproxy.freeboard.io/fetch/`,
-    `https://cors.bridged.cc/`,
-];
-let cached_providers = null;
-let providers_cache_time = 0;
-const CACHE_DURATION = 5 * 60 * 1000;
-const resolved_provider_urls = {};
-let resolved_urls_cache_time = 0;
-const RESOLVED_URLS_CACHE_DURATION = 10 * 60 * 1000;
-async function fetch_with_cors_proxy(url) {
-    try {
-        const direct_response = await fetch(url, {
-            headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
-        });
-        if (direct_response.ok)
-            return direct_response;
-    }
-    catch {
-        // Direct access failed, will try CORS proxies
-    }
-    for (const proxy of CORS_PROXIES) {
-        try {
-            const response = await fetch(`${proxy}${encodeURIComponent(url)}`, {
-                headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
-            });
-            if (response.ok)
-                return response;
-        }
-        catch {
-            // Try next proxy
-        }
-    }
-    throw new Error(`All CORS proxies failed for ${url}`);
-}
-async function resolve_provider_url(provider_base_url) {
-    const now = Date.now();
-    if (resolved_provider_urls[provider_base_url] &&
-        now - resolved_urls_cache_time < RESOLVED_URLS_CACHE_DURATION) {
-        return resolved_provider_urls[provider_base_url];
-    }
-    for (const endpoint of [`/links`, `/v1/links`]) {
-        try {
-            const response = await fetch_with_cors_proxy(`${provider_base_url}${endpoint}`);
-            const data = await response.json();
-            const self_link = data.data?.find((link) => link.type === `links` &&
-                link.attributes?.base_url &&
-                link.attributes.link_type === `child`);
-            if (self_link?.attributes.base_url) {
-                resolved_provider_urls[provider_base_url] = self_link.attributes.base_url;
-                resolved_urls_cache_time = now;
-                return self_link.attributes.base_url;
-            }
-        }
-        catch {
-            // Try next endpoint
-        }
-    }
-    resolved_provider_urls[provider_base_url] = provider_base_url;
-    resolved_urls_cache_time = now;
-    return provider_base_url;
-}
-export async function fetch_optimade_providers() {
-    const now = Date.now();
-    if (cached_providers && now - providers_cache_time < CACHE_DURATION) {
-        return cached_providers;
-    }
-    try {
-        const response = await fetch_with_cors_proxy(`https://providers.optimade.org/v1/links`);
-        const data = await response.json();
-        const providers = data.data
-            .filter((provider) => provider.attributes.base_url)
-            .map((provider) => ({
-            id: provider.id,
-            type: `links`,
-            attributes: {
-                name: provider.attributes.name,
-                description: provider.attributes.description,
-                base_url: provider.attributes.base_url,
-                homepage: provider.attributes.homepage,
-                version: provider.attributes.version,
-            },
-        }));
-        cached_providers = providers;
-        providers_cache_time = now;
-        return providers;
-    }
-    catch (error) {
-        console.warn(`Failed to fetch OPTIMADE providers:`, error);
-        throw error;
-    }
-}
-// URL encode/decode utilities for structure IDs with special characters
-export const encode_structure_id = (id) => encodeURIComponent(id).replace(/\./g, `%2E`).replace(/\//g, `%2F`);
-export const decode_structure_id = (encoded_id) => decodeURIComponent(encoded_id);
-export function detect_provider_from_slug(slug, providers) {
-    const decoded_slug = decode_structure_id(slug);
-    const prefix = decoded_slug.split(`-`)[0].toLowerCase();
-    return providers.find((p) => p.id === prefix)?.id ?? ``;
-}
-export async function fetch_optimade_structure(structure_id, provider, providers) {
-    const provider_config = providers.find((p) => p.id === provider);
-    if (!provider_config)
-        throw new Error(`Unknown provider: ${provider}`);
-    const base_url = await resolve_provider_url(provider_config.attributes.base_url);
-    const api_base = base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
-    const encoded_id = encode_structure_id(structure_id);
-    const response = await fetch_with_cors_proxy(`${api_base}/structures/${encoded_id}`);
-    const data = await response.json();
-    if (!data.data)
-        throw new Error(`Structure ${structure_id} not found`);
-    return Array.isArray(data.data) ? data.data[0] : data.data;
-}
-export async function fetch_suggested_structures(provider, providers, limit = 12) {
-    const provider_config = providers.find((p) => p.id === provider);
-    if (!provider_config)
-        throw new Error(`Unknown provider: ${provider}`);
-    try {
-        const base_url = await resolve_provider_url(provider_config.attributes.base_url);
-        const api_base = base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
-        const response = await fetch_with_cors_proxy(`${api_base}/structures?page_limit=${limit}&page_offset=0`);
-        const data = await response.json();
-        return Array.isArray(data.data) ? data.data : [];
-    }
-    catch (error) {
-        console.warn(`Failed to fetch suggested structures for ${provider}:`, error);
-        return [];
-    }
-}

package/dist/app.css

@@ -1,240 +0,0 @@
-/* Starry-night syntax highlighting (GitHub-style, auto light/dark) */
-@import '@wooorm/starry-night/style/both';
-
-/* CSS variables are unlayered so they're available to both layers and to
-   components that reference them via var(). Custom properties inherit
-   naturally regardless of layer ordering. */
-:root {
-  --theme-transition-duration: 0.3s;
-  --text-color: #eee;
-  --page-bg: #090019;
-  --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;
-}
-
-/* App-shell styles: page layout, typography, headings, navigation.
-   These are only needed by the standalone matterviz demo site.
-   When embedded in a host framework (Dash/Mantine, React, etc.),
-   the host's unlayered CSS automatically takes precedence. */
-@layer matterviz-shell {
-  /* Targeted theme transitions for performance */
-  :where(body, main, button, a, code, kbd, pre, blockquote, textarea, table, input),
-  :where(select, label, .theme-control, .toc, svg, path, circle, rect, text),
-  :where(.info-pane, .pane-header, .pane-content, .close-button),
-  :where(nav > a),
-  :where(.theme-control, .theme-control label, .theme-control select) {
-    transition:
-      background-color var(--theme-transition-duration) ease,
-      color var(--theme-transition-duration) ease,
-      border-color var(--theme-transition-duration) ease,
-      fill var(--theme-transition-duration) ease,
-      stroke var(--theme-transition-duration) ease,
-      box-shadow var(--theme-transition-duration) ease;
-  }
-  body {
-    background: var(--page-bg);
-    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;
-    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);
-    text-decoration: none;
-  }
-  a:hover {
-    color: var(--accent-hover-color, orange);
-  }
-  blockquote {
-    border-left: 3pt solid var(--accent-color, cornflowerblue);
-    padding: 3pt 7pt;
-    background: rgba(255, 255, 255, 0.2);
-    margin: 1em 0;
-  }
-  blockquote p:first-child {
-    margin-top: 0;
-  }
-  blockquote p:last-child {
-    margin-bottom: 0;
-  }
-  :where(h1, h2, h3, h4, h5, h6) {
-    scroll-margin-top: 100px;
-  }
-  :where(h1, h2, h3, h4, h5, h6):target {
-    color: var(--accent-color, cornflowerblue);
-  }
-  body main > :where(h1, h2, h3, h4, h5, h6) {
-    text-align: center;
-  }
-  /* style heading anchors added by heading_anchors attachment from svelte-multiselect */
-  :where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
-    transition: 0.3s;
-    margin-left: 4pt;
-    opacity: 0;
-  }
-  :where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
-    opacity: 1;
-  }
-  .full-bleed {
-    --margin: 5vw;
-    width: calc(100vw - 2 * var(--margin)) !important;
-    margin-left: calc(-50vw + 50% + var(--margin));
-    max-width: none !important;
-  }
-  .bleed-1400 {
-    --margin: 5vw;
-    width: min(1400px, calc(100vw - 2 * var(--margin))) !important;
-    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);
-  }
-}
-
-/* Component base styles: form controls, tables, code blocks.
-   MatterViz components (Structure, ConvexHull, plots, etc.) depend on
-   these for consistent appearance. Also layered so host frameworks
-   can override if needed, but these target elements that typically
-   only appear inside MatterViz component trees. */
-@layer matterviz-components {
-  button,
-  a.btn {
-    color: var(--text-color);
-    cursor: pointer;
-    border: none;
-    border-radius: var(--border-radius);
-    padding: 2pt 4pt;
-  }
-  button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  code,
-  kbd {
-    overflow-wrap: break-word;
-    padding: 1pt 3pt;
-    border-radius: var(--border-radius);
-    background-color: var(--code-bg);
-  }
-  kbd {
-    font-size: larger;
-  }
-  pre code {
-    background-color: transparent;
-    display: inline-block;
-    padding: 0;
-    width: 100%;
-  }
-  pre {
-    position: relative;
-    border-radius: var(--border-radius);
-    font-size: 0.95em;
-    background-color: var(--pre-bg);
-    padding: 1ex 1em;
-    overflow-x: auto;
-  }
-  textarea {
-    display: block;
-    width: 100%;
-    min-height: 100px;
-    box-sizing: border-box;
-    margin: 1em auto;
-  }
-  /* Theme-aware form controls (works consistently in notebooks and VSCode/Cursor webviews) */
-  :is(
-    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
-    textarea,
-    select
-  ) {
-    background-color: var(--surface-bg);
-    color: var(--text-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius);
-    padding: 2px 6px;
-  }
-  :is(
-    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
-    textarea,
-    select
-  ):focus {
-    outline: none;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
-  }
-  :is(input, textarea)::placeholder {
-    color: var(--text-color-muted);
-  }
-  select option {
-    background-color: var(--surface-bg);
-    color: var(--text-color);
-  }
-  /* Modern flat input styling — only reset border for non-text inputs */
-  input:is([type='checkbox'], [type='radio'], [type='range'], [type='color']) {
-    border: none;
-  }
-  input[type='number'] {
-    min-width: 40px;
-    width: auto;
-  }
-  input[type='color'] {
-    border: none;
-    padding: 0;
-    outline: none;
-    border-radius: var(--border-radius);
-    overflow: hidden;
-    cursor: pointer;
-  }
-  input[type='color']::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  input[type='color']::-webkit-color-swatch {
-    border: none;
-  }
-  table {
-    display: block;
-    max-width: 100%;
-    overflow: auto;
-    border-collapse: collapse;
-  }
-  table :is(td, th) {
-    border: 1px solid var(--border-color, gray);
-    padding: 3pt 12pt;
-  }
-  table.roomy :is(td, th) {
-    padding: 5pt 9pt;
-  }
-  tbody tr:nth-child(odd) {
-    background: color-mix(in hsl, var(--page-bg, black), var(--text-color) 2%);
-  }
-  :where(ul.selected > li button, button.remove-all) {
-    background-color: transparent !important;
-  }
-}