matterviz 0.3.5 → 0.3.6

package/dist/src/lib/theme/themes.mjs

@@ -0,0 +1,297 @@
+// 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`),
+  'canvas-tooltip-bg': {
+    light: `rgba(226, 232, 240, 0.96)`,
+    dark: `rgba(15, 23, 42, 0.96)`,
+    white: `rgba(241, 245, 249, 0.98)`,
+    black: `rgba(20, 20, 20, 0.98)`,
+  },
+  'canvas-tooltip-text-color': {
+    light: `#0f172a`,
+    dark: `#f8fafc`,
+    white: `#0f172a`,
+    black: `#f8fafc`,
+  },
+  '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/src/lib/time.ts

@@ -0,0 +1,71 @@
+// Parse and validate date, returns null if invalid.
+// Strings without timezone are treated as UTC (append Z if missing).
+export const parse_date = (date?: Date | string): Date | null => {
+  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?: Date | string,
+  reference_date?: Date | string,
+): string => {
+  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?: Date | string): string => {
+  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?: Date | string, end?: Date | string): string => {
+  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/src/lib/tooltip/TooltipContent.svelte

@@ -0,0 +1,58 @@
+<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 '$lib/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/src/lib/tooltip/index.ts

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

package/dist/src/lib/tooltip/types.ts

@@ -0,0 +1,13 @@
+// Generic tooltip configuration types for prefix/suffix customization
+// Prefix/suffix are rendered via {@html} - ensure values are developer-defined, not user input
+import type { Snippet } from 'svelte'
+
+export type TooltipConfig<T> = {
+  prefix?: string | ((data: T) => string)
+  suffix?: string | ((data: T) => string)
+}
+
+// Union type: snippet replaces content entirely, config adds prefix/suffix
+export type TooltipProp<T, SnippetArgs extends unknown[] = [{ hover_data: T }]> =
+  | Snippet<SnippetArgs>
+  | TooltipConfig<T>