matterviz 0.3.4 → 0.3.6

package/dist/theme/index.js

@@ -1,79 +0,0 @@
-// Theme System for MatterViz
-const is_browser = typeof window !== `undefined`;
-const storage_key = `matterviz-theme`;
-// Core theme constants
-export const COLOR_THEMES = {
-    light: `light`,
-    dark: `dark`,
-    white: `white`,
-    black: `black`,
-};
-export const AUTO_THEME = `auto`;
-export const THEME_TYPE = {
-    [COLOR_THEMES.light]: `light`,
-    [COLOR_THEMES.dark]: `dark`,
-    [COLOR_THEMES.white]: `light`,
-    [COLOR_THEMES.black]: `dark`,
-};
-// Theme options for UI components
-export const THEME_OPTIONS = [
-    { value: COLOR_THEMES.light, label: `Light`, icon: `☀️` },
-    { value: COLOR_THEMES.dark, label: `Dark`, icon: `🌙` },
-    { value: COLOR_THEMES.white, label: `White`, icon: `⚪` },
-    { value: COLOR_THEMES.black, label: `Black`, icon: `⚫` },
-    { value: AUTO_THEME, label: `Auto`, icon: `🔄` },
-];
-// Type guards and utilities
-export const is_valid_theme_mode = (value) => Object.keys(COLOR_THEMES).includes(value) || value === AUTO_THEME;
-export const is_valid_theme_name = (value) => Object.keys(COLOR_THEMES).includes(value);
-export const resolve_theme_mode = (mode, system_preference = COLOR_THEMES.light) => (mode === AUTO_THEME ? system_preference : mode);
-// Theme preference management
-export const get_theme_preference = () => {
-    if (!is_browser)
-        return AUTO_THEME;
-    try {
-        const saved = localStorage[storage_key];
-        return is_valid_theme_mode(saved || ``) ? saved : AUTO_THEME;
-    }
-    catch {
-        return AUTO_THEME;
-    }
-};
-export const save_theme_preference = (mode) => {
-    try {
-        localStorage[storage_key] = mode;
-    }
-    catch {
-        // Silently fail if localStorage is unavailable
-    }
-};
-export const get_system_mode = () => is_browser && matchMedia(`(prefers-color-scheme: dark)`).matches
-    ? COLOR_THEMES.dark
-    : COLOR_THEMES.light;
-export const apply_theme_to_dom = (mode) => {
-    if (!is_browser)
-        return;
-    const resolved = resolve_theme_mode(mode, get_system_mode());
-    if (!resolved || !(resolved in THEME_TYPE)) {
-        throw new Error(`Invalid theme mode: ${resolved}`);
-    }
-    const theme = globalThis.MATTERVIZ_THEMES?.[resolved] || {};
-    const css_vars = globalThis.MATTERVIZ_CSS_MAP || {};
-    const root = document.documentElement;
-    Object.entries(theme).forEach(([key, value]) => {
-        const css_var = css_vars[key];
-        if (css_var && value && typeof value === `string`) {
-            root.style.setProperty(css_var, value);
-        }
-    });
-    root.setAttribute(`data-theme`, resolved);
-    // Set color-scheme to ensure form elements respect the theme
-    const color_scheme = THEME_TYPE[resolved];
-    root.style.setProperty(`color-scheme`, color_scheme);
-};
-// Theme getters
-export const light_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.light] || {};
-export const dark_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.dark] || {};
-export const white_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.white] || {};
-export const black_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.black] || {};
-export const get_theme_by_name = (name) => globalThis.MATTERVIZ_THEMES?.[name] || {};

package/dist/theme/themes.mjs

@@ -1,285 +0,0 @@
-// MatterViz color themes.
-// Note: This file needs to be symlinked into static/ to be importable by app.html before initial page render to prevent flashing colors before client-side JS kicks in. It also needs to be in src/lib so it gets packaged and shipped to NPM for use by the anywidgets in pymatviz.
-// Can't use exports in this file as would then require type="module" in app.html to import which would defer until after HTML is ready (module files are always deferred).
-
-// Text colors
-const txt_light = `#374151` // Dark gray
-const txt_dark = `#eee` // Light gray
-const txt_white = `#000000` // Black
-const txt_black = `#f5f5f5` // Off-white
-
-// Page backgrounds
-const page_bg_light = `#f1f3f5` // Light gray
-const page_bg_dark = `#18171c` // Very dark blue
-const page_bg_white = `#ffffff` // Pure white
-const page_bg_black = `#000000` // Pure black
-
-// Borders
-const border_light = `#d1d5db` // Gray border
-const border_dark = `#404040` // Dark gray border
-const border_white = `#d1d5db` // Light border
-const border_black = `#404040` // Dark border
-
-// Accents
-const acc_light = `#4f46e5` // Indigo
-const acc_dark = `cornflowerblue` // Light blue
-const acc_white = `#2563eb` // Blue
-const acc_black = `cornflowerblue`
-
-// Helper functions for common patterns
-const btn_bg = (dark_op, light_op) => ({
-  light: `rgba(0, 0, 0, ${light_op})`,
-  dark: `rgba(255, 255, 255, ${dark_op})`,
-  white: `rgba(0, 0, 0, ${light_op})`,
-  black: `rgba(255, 255, 255, ${dark_op})`,
-})
-
-const tooltip_bg = (light_bg, dark_bg, light_op = 0.95, dark_op = 0.95) => ({
-  light: `rgba(${light_bg}, ${light_op})`,
-  dark: `rgba(${dark_bg}, ${dark_op})`,
-  white: `rgba(255, 255, 255, 0.98)`,
-  black: `rgba(20, 20, 20, 0.98)`,
-})
-
-const themes = {
-  // Core colors
-  'page-bg': {
-    light: page_bg_light,
-    dark: page_bg_dark,
-    white: page_bg_white,
-    black: page_bg_black,
-  },
-  'text-color': { light: txt_light, dark: txt_dark, white: txt_white, black: txt_black },
-  'surface-bg': {
-    light: `rgb(237, 238, 239)`,
-    dark: `rgb(33, 36, 43)`,
-    white: `rgb(250, 250, 250)`,
-    black: `rgb(19, 19, 19)`,
-  },
-  'border-color': {
-    light: border_light,
-    dark: border_dark,
-    white: border_white,
-    black: border_black,
-  },
-  'accent-color': {
-    light: acc_light,
-    dark: acc_dark,
-    white: acc_white,
-    black: acc_black,
-  },
-
-  // Hover states
-  'surface-bg-hover': {
-    light: `#e5e7eb`,
-    dark: `#3a3a3a`,
-    white: `#f3f3f3`,
-    black: `#1f1f1f`,
-  },
-  'accent-hover-color': {
-    light: `#3730a3`,
-    dark: `#3b82f6`,
-    white: `#1d4ed8`,
-    black: `#0ea5e9`,
-  },
-
-  // Code/pre backgrounds
-  'code-bg': {
-    light: `rgba(0, 0, 0, 0.05)`,
-    dark: `rgba(255, 255, 255, 0.1)`,
-    white: `rgba(0, 0, 0, 0.02)`,
-    black: `rgba(255, 255, 255, 0.1)`,
-  },
-  'pre-bg': {
-    light: `rgba(0, 0, 0, 0.03)`,
-    dark: `rgba(255, 255, 255, 0.05)`,
-    white: `rgba(0, 0, 0, 0.02)`,
-    black: `rgba(255, 255, 255, 0.1)`,
-  },
-
-  // Semantic colors (same across themes)
-  'success-color': {
-    light: `#10b981`,
-    dark: `#10b981`,
-    white: `#059669`,
-    black: `#34d399`,
-  },
-  'warning-color': {
-    light: `#f59e0b`,
-    dark: `#f59e0b`,
-    white: `#d97706`,
-    black: `#fbbf24`,
-  },
-  'error-color': {
-    light: `#ef4444`,
-    dark: `#ef4444`,
-    white: `#dc2626`,
-    black: `#f87171`,
-  },
-  'error-btn-bg': {
-    light: `#dc2626`,
-    dark: `#7f1d1d`,
-    white: `#b91c1c`,
-    black: `#991b1b`,
-  },
-  'error-btn-bg-hover': {
-    light: `#b91c1c`,
-    dark: `#991b1b`,
-    white: `#991b1b`,
-    black: `#7f1d1d`,
-  },
-  'error-border': {
-    light: `1px solid #fca5a5`,
-    dark: `1px solid #dc2626`,
-    white: `1px solid #fecaca`,
-    black: `1px solid #991b1b`,
-  },
-  'text-color-muted': {
-    light: `#6b7280`,
-    dark: `#9ca3af`,
-    white: `#374151`,
-    black: `#d1d5db`,
-  },
-
-  // Interactive elements (buttons, etc.)
-  'btn-bg': btn_bg(0.3, 0.12),
-  'btn-bg-hover': btn_bg(0.2, 0.25),
-  'btn-disabled-bg': btn_bg(0.1, 0.05),
-
-  // Tooltips
-  'tooltip-bg': tooltip_bg(`243, 244, 246`, `0, 40, 60`),
-  'tooltip-border': {
-    light: `1px solid rgba(0, 0, 0, 0.15)`,
-    dark: `1px solid rgba(255, 255, 255, 0.15)`,
-    white: `1px solid rgba(0, 0, 0, 0.075)`,
-    black: `1px solid rgba(255, 255, 255, 0.075)`,
-  },
-
-  // Structure-specific
-  'struct-bg': {
-    light: `rgba(0, 0, 0, 0.02)`,
-    dark: `rgba(255, 255, 255, 0.07)`,
-    white: `rgba(0, 0, 0, 0.01)`,
-    black: `rgba(255, 255, 255, 0.1)`,
-  },
-  'struct-bg-fullscreen': {
-    light: page_bg_light,
-    dark: page_bg_dark,
-    white: page_bg_white,
-    black: page_bg_black,
-  },
-
-  // Pane backgrounds (DraggablePane, etc.)
-  'pane-bg': {
-    light: `rgb(229, 231, 235)`,
-    dark: `rgb(28 29 33)`,
-    white: `rgb(248, 250, 252)`,
-    black: `rgb(26, 26, 26)`,
-  },
-  'pane-border': {
-    light: `1px solid rgba(0, 0, 0, 0.15)`,
-    dark: `1px solid rgba(255, 255, 255, 0.15)`,
-    white: `1px solid rgba(0, 0, 0, 0.075)`,
-    black: `1px solid rgba(255, 255, 255, 0.075)`,
-  },
-  'pane-bg-hover': {
-    light: `rgba(0, 0, 0, 0.06)`,
-    dark: `rgba(255, 255, 255, 0.1)`,
-    white: `rgba(0, 0, 0, 0.03)`,
-    black: `rgba(255, 255, 255, 0.1)`,
-  },
-
-  // Dropzone states
-  'dropzone-border': {
-    light: `1px solid #9ca3af`,
-    dark: `1px solid #4a5568`,
-    white: `1px solid #e5e7eb`,
-    black: `1px solid #374151`,
-  },
-  'dropzone-bg': {
-    light: `rgba(0, 0, 0, 0.02)`,
-    dark: `rgba(45, 55, 72, 0.5)`,
-    white: `rgba(0, 0, 0, 0.01)`,
-    black: `rgba(15, 15, 15, 0.7)`,
-  },
-  'dragover-border': {
-    light: `1px solid ${acc_light}`,
-    dark: `1px solid #007acc`,
-    white: `1px solid ${acc_white}`,
-    black: `1px solid #0ea5e9`,
-  },
-  'dragover-bg': {
-    light: `rgba(79, 70, 229, 0.1)`,
-    dark: `rgba(0, 122, 204, 0.1)`,
-    white: `rgba(37, 99, 235, 0.05)`,
-    black: `rgba(14, 165, 233, 0.05)`,
-  },
-
-  // Navigation links
-  'nav-link-bg': btn_bg(0.15, 0.05),
-  'nav-link-bg-hover': btn_bg(0.2, 0.1),
-  'nav-link-active-color': {
-    light: `darkseagreen`,
-    dark: `mediumseagreen`,
-    white: `coral`,
-    black: `lightseagreen`,
-  },
-
-  // Plot legend
-  'plot-legend-bg-color': {
-    light: `rgba(255, 255, 255, 0.6)`,
-    dark: `rgba(0, 0, 0, 0.2)`,
-    white: `rgba(255, 255, 255, 0.9)`,
-    black: `rgba(0, 0, 0, 0.3)`,
-  },
-  'plot-legend-border': {
-    light: `1px solid rgba(0, 0, 0, 0.2)`,
-    dark: `1px solid rgba(255, 255, 255, 0.2)`,
-    white: `1px solid rgba(0, 0, 0, 0.1)`,
-    black: `1px solid rgba(255, 255, 255, 0.1)`,
-  },
-  'plot-legend-item-color': {
-    light: txt_light,
-    dark: txt_dark,
-    white: txt_white,
-    black: txt_black,
-  },
-  'plot-legend-item-hover-bg-color': btn_bg(0.1, 0.1),
-
-  'github-corner-color': {
-    light: page_bg_light,
-    dark: page_bg_dark,
-    white: page_bg_white,
-    black: page_bg_black,
-  },
-  'github-corner-bg': {
-    light: txt_light,
-    dark: txt_dark,
-    white: txt_white,
-    black: txt_black,
-  },
-  'github-corner-bg-hover': {
-    light: `#1e40af`, // Darker, more modest blue for light mode
-    dark: `#60a5fa`, // Lighter blue for dark mode
-    white: `#1e3a8a`, // Deep navy blue for white mode
-    black: `#38bdf8`, // Cyan-blue for black mode
-  },
-}
-
-// Generate flattened themes and export
-const light = {}
-const dark = {}
-const white = {}
-const black = {}
-for (const [key, values] of Object.entries(themes)) {
-  light[key] = values.light
-  dark[key] = values.dark
-  white[key] = values.white
-  black[key] = values.black
-}
-
-// Export for global access
-globalThis.MATTERVIZ_THEMES = { light, dark, white, black }
-globalThis.MATTERVIZ_CSS_MAP = Object.fromEntries(
-  Object.keys(themes).map((key) => [key, `--${key}`]),
-)

package/dist/time.d.ts

@@ -1,4 +0,0 @@
-export declare const parse_date: (date?: Date | string) => Date | null;
-export declare const format_relative_time: (date?: Date | string, reference_date?: Date | string) => string;
-export declare const format_utc_time: (date?: Date | string) => string;
-export declare const format_duration: (start?: Date | string, end?: Date | string) => string;

package/dist/time.js

@@ -1,70 +0,0 @@
-// Parse and validate date, returns null if invalid.
-// Strings without timezone are treated as UTC (append Z if missing).
-export const parse_date = (date) => {
-    if (!date)
-        return null;
-    if (typeof date === `string`) {
-        // If string lacks timezone indicator, treat as UTC by appending Z
-        // Matches ISO format without timezone: 2024-01-15T14:30:00 or 2024-01-15 14:30:00
-        const has_tz = /Z$|[+-]\d{2}:\d{2}$|[+-]\d{4}$/.test(date);
-        const normalized = has_tz ? date : `${date.replace(` `, `T`)}Z`;
-        const parsed = new Date(normalized);
-        return isNaN(parsed.getTime()) ? null : parsed;
-    }
-    return isNaN(date.getTime()) ? null : date;
-};
-// Format date as relative time: "5 hours ago", "2 days ago".
-// Dates treated as UTC to avoid timezone issues. Future dates return absolute UTC time.
-export const format_relative_time = (date, reference_date) => {
-    const timestamp = parse_date(date);
-    const now = reference_date ? parse_date(reference_date) : new Date();
-    if (!timestamp || !now)
-        return `N/A`;
-    const diff_ms = now.getTime() - timestamp.getTime();
-    if (diff_ms < 0)
-        return format_utc_time(timestamp);
-    const diff_mins = Math.max(1, Math.floor(diff_ms / (1000 * 60)));
-    const diff_hours = Math.floor(diff_ms / (1000 * 60 * 60));
-    const diff_days = Math.floor(diff_ms / (1000 * 60 * 60 * 24));
-    if (diff_mins < 60)
-        return `${diff_mins} minute${diff_mins === 1 ? `` : `s`} ago`;
-    if (diff_hours < 24)
-        return `${diff_hours} hour${diff_hours === 1 ? `` : `s`} ago`;
-    return `${diff_days} day${diff_days === 1 ? `` : `s`} ago`;
-};
-// Format date as UTC string: "2024-01-15 14:30:00 UTC".
-export const format_utc_time = (date) => {
-    if (!date)
-        return `N/A`;
-    const timestamp = typeof date === `string` ? new Date(date) : date;
-    if (isNaN(timestamp.getTime()))
-        return `N/A`;
-    return timestamp
-        .toISOString()
-        .replace(`T`, ` `)
-        .replace(/\.\d+Z$/, ` UTC`);
-};
-// Format duration between two dates: "5h 23m", "2d 3h", "45m".
-export const format_duration = (start, end) => {
-    if (!start || !end)
-        return `N/A`;
-    const start_time = typeof start === `string` ? new Date(start) : start;
-    const end_time = typeof end === `string` ? new Date(end) : end;
-    if (isNaN(start_time.getTime()) || isNaN(end_time.getTime()))
-        return `N/A`;
-    const diff_ms = Math.abs(end_time.getTime() - start_time.getTime());
-    const diff_mins = Math.floor(diff_ms / (1000 * 60));
-    const diff_hours = Math.floor(diff_ms / (1000 * 60 * 60));
-    const diff_days = Math.floor(diff_ms / (1000 * 60 * 60 * 24));
-    if (diff_days > 0) {
-        const remaining_hours = diff_hours % 24;
-        return remaining_hours > 0 ? `${diff_days}d ${remaining_hours}h` : `${diff_days}d`;
-    }
-    if (diff_hours > 0) {
-        const remaining_mins = diff_mins % 60;
-        return remaining_mins > 0 ? `${diff_hours}h ${remaining_mins}m` : `${diff_hours}h`;
-    }
-    if (diff_mins > 0)
-        return `${diff_mins}m`;
-    return `<1m`;
-};

package/dist/tooltip/TooltipContent.svelte

@@ -1,58 +0,0 @@
-<script lang="ts" generics="T, SnippetArg = T">
-  // Wrapper component that handles the common tooltip pattern:
-  // - If tooltip is a snippet function, render it exclusively (replaces default content)
-  // - If tooltip is a config object, render prefix/suffix around the default content
-  // - Otherwise, render just the default content
-  import { sanitize_html } from '../sanitize'
-  import type { Snippet } from 'svelte'
-  import type { TooltipConfig } from './types'
-
-  let {
-    data,
-    snippet_arg,
-    tooltip,
-    children,
-  }: {
-    data: T // Data passed to config prefix/suffix functions
-    snippet_arg: SnippetArg // Single arg passed to custom snippet (can differ from data)
-    tooltip?: Snippet<[SnippetArg]> | TooltipConfig<T>
-    children: Snippet
-  } = $props()
-
-  const is_snippet = $derived(typeof tooltip === `function`)
-  const config = $derived(
-    !is_snippet && tooltip ? (tooltip as TooltipConfig<T>) : null,
-  )
-  const prefix = $derived(
-    typeof config?.prefix === `function` ? config.prefix(data) : config?.prefix,
-  )
-  const suffix = $derived(
-    typeof config?.suffix === `function` ? config.suffix(data) : config?.suffix,
-  )
-</script>
-
-{#if is_snippet}
-  {@render (tooltip as Snippet<[SnippetArg]>)(snippet_arg)}
-{:else}
-  {#if prefix}
-    <div class="tooltip-prefix">{@html sanitize_html(prefix)}</div>
-  {/if}
-  {@render children()}
-  {#if suffix}
-    <div class="tooltip-suffix">{@html sanitize_html(suffix)}</div>
-  {/if}
-{/if}
-
-<style>
-  .tooltip-prefix {
-    margin-bottom: 6px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid
-      var(--tooltip-border, var(--border, rgba(128, 128, 128, 0.3)));
-  }
-  .tooltip-suffix {
-    margin-top: 6px;
-    padding-top: 6px;
-    border-top: 1px solid var(--tooltip-border, var(--border, rgba(128, 128, 128, 0.3)));
-  }
-</style>

package/dist/tooltip/TooltipContent.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { TooltipConfig } from './types';
-declare function $$render<T, SnippetArg = T>(): {
-    props: {
-        data: T;
-        snippet_arg: SnippetArg;
-        tooltip?: Snippet<[SnippetArg]> | TooltipConfig<T>;
-        children: Snippet;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T, SnippetArg = T> {
-    props(): ReturnType<typeof $$render<T, SnippetArg>>['props'];
-    events(): ReturnType<typeof $$render<T, SnippetArg>>['events'];
-    slots(): ReturnType<typeof $$render<T, SnippetArg>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T, SnippetArg = T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, SnippetArg>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, SnippetArg>['props']>, ReturnType<__sveltets_Render<T, SnippetArg>['events']>, ReturnType<__sveltets_Render<T, SnippetArg>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, SnippetArg>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, SnippetArg>['exports']>;
-    <T, SnippetArg = T>(internal: unknown, props: ReturnType<__sveltets_Render<T, SnippetArg>['props']> & {}): ReturnType<__sveltets_Render<T, SnippetArg>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const TooltipContent: $$IsomorphicComponent;
-type TooltipContent<T, SnippetArg = T> = InstanceType<typeof TooltipContent<T, SnippetArg>>;
-export default TooltipContent;

package/dist/tooltip/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TooltipContent } from './TooltipContent.svelte';
-export * from './types';

package/dist/tooltip/index.js

@@ -1,2 +0,0 @@
-export { default as TooltipContent } from './TooltipContent.svelte';
-export * from './types';

package/dist/tooltip/types.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-export type TooltipConfig<T> = {
-    prefix?: string | ((data: T) => string);
-    suffix?: string | ((data: T) => string);
-};
-export type TooltipProp<T, SnippetArgs extends unknown[] = [{
-    hover_data: T;
-}]> = Snippet<SnippetArgs> | TooltipConfig<T>;

package/dist/tooltip/types.js

@@ -1 +0,0 @@
-export {};