matterviz 0.3.5 → 0.3.6

package/dist/src/lib/element/ElementTile.svelte

@@ -0,0 +1,484 @@
+<script lang="ts">
+  import { contrast_color, is_color, pick_contrast_color } from '$lib/colors'
+  import type { ChemicalElement } from '$lib/element'
+  import { format_num } from '$lib/labels'
+  import { colors, selected } from '$lib/state.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type SplitLayout =
+    | `diagonal`
+    | `horizontal`
+    | `vertical`
+    | `triangular`
+    | `quadrant`
+  let {
+    element,
+    bg_color = undefined,
+    show_symbol = true,
+    show_number = undefined, // auto-determine based on multi-value splits
+    show_name = true,
+    value = undefined,
+    symbol_style = ``,
+    active = false,
+    href = undefined,
+    luminance_threshold = 0.7,
+    text_color = $bindable(),
+    float_fmt = undefined,
+    node = $bindable(null),
+    label = undefined,
+    bg_colors = [],
+    show_values = undefined,
+    split_layout = undefined, // auto-determine based on value count if not specified
+    onclick,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLElement>, `onclick`> & {
+    element: ChemicalElement
+    bg_color?: string
+    show_symbol?: boolean
+    show_number?: boolean
+    show_name?: boolean
+    value?: number | number[] | string | string[] | false
+    symbol_style?: string
+    active?: boolean
+    href?: string
+    // at what background color lightness text color switches from black to white
+    luminance_threshold?: number
+    text_color?: string
+    float_fmt?: string
+    node?: HTMLElement | null
+    label?: string
+    // array of background colors for multi-segment tiles
+    bg_colors?: (string | null)[]
+    show_values?: boolean // explicitly control whether to show values when colors are passed
+    // control the layout of multi-value splits
+    split_layout?: SplitLayout
+    onclick?: (data: { element: ChemicalElement; event: MouseEvent }) => void
+  } = $props()
+
+  // background color defaults to category color (initialized in colors/index.ts, user editable in PeriodicTableControls.svelte)
+  let fallback_bg_color = $derived(
+    bg_color ?? colors.category[element.category] ?? `#cccccc`,
+  )
+
+  // Compute contrast text color from background when in heatmap mode (single bg_color)
+  let computed_text_color = $derived(
+    text_color ??
+      (bg_color && !Array.isArray(value)
+        ? pick_contrast_color({ bg_color, luminance_threshold })
+        : undefined),
+  )
+
+  // Determine if we should show the atomic number
+  const should_show_number = $derived.by(() => {
+    if (show_number !== undefined) return show_number
+    // Hide number for multi-value splits to prevent overlap with value labels
+    if (Array.isArray(value) && value.length > 1) return false
+    return true
+  })
+
+  // Helper function to format values appropriately
+  const format_value = (val: string | number): string => {
+    if (is_color(val)) return show_values === true ? val.toString() : ``
+
+    // Handle numeric values
+    if (typeof val === `number`) return format_num(val, float_fmt)
+
+    // Handle string values - check if it's a numeric string
+    if (typeof val === `string`) {
+      const parsed_num = parseFloat(val)
+      if (isFinite(parsed_num)) return format_num(parsed_num, float_fmt)
+      // If show_values is true, return the string as-is to preserve non-numeric strings
+      return show_values === true ? val : ``
+    }
+
+    return ``
+  }
+
+  // Determine if we should show values - default to false if any array element is a color
+  const should_show_values = $derived.by(() => {
+    if (show_values !== undefined) return show_values
+    if (Array.isArray(value)) return !value.some(is_color)
+    return !is_color(value)
+  })
+
+  // Get the appropriate CSS classes for segments and positions based on layout
+  const layout_config = $derived.by(() => {
+    if (!Array.isArray(value)) return null
+
+    const count = value.length
+    // Use explicit split_layout or auto-determine based on count
+    const layout = split_layout ?? {
+      2: `diagonal`,
+      3: `horizontal`,
+      4: `quadrant`,
+    }[count] as SplitLayout | undefined
+
+    if (!layout) return null
+
+    if (layout === `diagonal` && count === 2) {
+      return {
+        segments: [`diagonal-top`, `diagonal-bottom`],
+        positions: [`top-left`, `bottom-right`],
+      }
+    }
+
+    if (layout === `horizontal` && count === 3) {
+      return {
+        segments: [`horizontal-top`, `horizontal-middle`, `horizontal-bottom`],
+        positions: [`bar-top-left`, `bar-middle-right`, `bar-bottom-left`],
+      }
+    }
+
+    if (layout === `vertical` && count === 3) {
+      return {
+        segments: [`vertical-left`, `vertical-middle`, `vertical-right`],
+        positions: [`bar-left-top`, `bar-middle-bottom`, `bar-right-top`],
+      }
+    }
+
+    if (layout === `triangular` && count === 4) {
+      return {
+        segments: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}`),
+        positions: [`top`, `right`, `bottom`, `left`].map((pos) =>
+          `triangle-${pos}-pos`
+        ),
+      }
+    }
+
+    if (layout === `quadrant` && count === 4) {
+      const segments = [`tl`, `tr`, `bl`, `br`].map((pos) => `quadrant-${pos}`)
+      const positions = [`tl`, `tr`, `bl`, `br`].map((pos) => `value-quadrant-${pos}`)
+      return { segments, positions }
+    }
+
+    return null
+  })
+</script>
+
+<svelte:element
+  this={href ? `a` : `div`}
+  bind:this={node}
+  {...(href ? { href } : {})}
+  class="element-tile"
+  data-category={element.category}
+  class:active
+  class:last-active={selected.last_element === element}
+  class:clickable={Boolean(onclick)}
+  style:background-color={Array.isArray(value) && bg_colors?.length > 1 ? `transparent` : fallback_bg_color}
+  style:color={computed_text_color}
+  {@attach computed_text_color ? null : contrast_color()}
+  {...(href ? { role: `link`, tabindex: 0 } : {})}
+  onclick={(event: MouseEvent) => onclick?.({ element, event })}
+  {...rest}
+>
+  {#if should_show_number}
+    <span class="number">
+      {element.number}
+    </span>
+  {/if}
+  {#if show_symbol}
+    <span class="symbol" style={symbol_style}>
+      {element.symbol}
+    </span>
+  {/if}
+  {#if should_show_values && value !== undefined && value !== null && value !== false}
+    {#if Array.isArray(value) && layout_config}
+      <!-- Multi-value positioning using layout config -->
+      {#each value as val, idx (idx)}
+        {#if val && format_value(val)}
+          <span
+            class="value multi-value {layout_config.positions[idx]}"
+            style:color={bg_colors?.[idx]
+            ? pick_contrast_color({
+              bg_color: bg_colors[idx] ?? fallback_bg_color,
+              luminance_threshold,
+            })
+            : null}
+          >
+            {format_value(val)}
+          </span>
+        {/if}
+      {/each}
+    {:else if Array.isArray(value)}
+      <!-- Fallback for other array lengths -->
+      <span class="value">{value.map(format_value).filter(Boolean).join(` / `)}</span>
+    {:else}
+      <!-- Single value -->
+      <span class="value">{format_value(value)}</span>
+    {/if}
+  {:else if show_name}
+    <span class="name">
+      {label ?? element.name}
+    </span>
+  {/if}
+
+  <!-- Multi-segment backgrounds for heatmap arrays -->
+  {#if Array.isArray(value) && bg_colors && bg_colors.length > 1 && layout_config}
+    {#each bg_colors as bg_color, idx (idx)}
+      {#if layout_config.segments[idx]}
+        <div
+          class="segment {layout_config.segments[idx]}"
+          style:background-color={bg_color}
+        >
+        </div>
+      {/if}
+    {/each}
+  {/if}
+</svelte:element>
+
+<style>
+  .element-tile {
+    position: relative;
+    transition: background-color var(--elem-tile-transition-duration, 0.4s);
+    aspect-ratio: 1;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    border-radius: var(--elem-tile-border-radius, var(--border-radius, 3pt));
+    box-sizing: border-box;
+    color: var(--elem-tile-text-color);
+    /* add persistent invisible border so content doesn't move on hover */
+    border: 1px solid transparent;
+    container-type: inline-size;
+    overflow: hidden;
+    width: var(--elem-tile-width);
+    height: var(--elem-tile-height);
+  }
+  .element-tile span {
+    line-height: 1em;
+  }
+  .element-tile.active, .element-tile:hover {
+    border: var(--elem-tile-active-border, 1px solid currentColor);
+  }
+  .element-tile.clickable {
+    cursor: pointer;
+  }
+  .last-active {
+    border: 1px dotted;
+  }
+  .number {
+    font-size: var(--elem-number-font-size, 22cqw);
+    position: absolute;
+    top: 6cqw;
+    font-weight: var(--elem-number-font-weight, 300);
+    left: 6cqw;
+  }
+  .symbol {
+    font-size: var(--elem-symbol-font-size, 40cqw);
+    font-weight: var(--elem-symbol-font-weight, 400);
+  }
+  span.name,
+  span.value {
+    position: absolute;
+    bottom: 8cqw;
+  }
+  span.value {
+    font-size: var(--elem-value-font-size, 18cqw);
+  }
+  span.name {
+    font-size: var(--elem-name-font-size, 12cqw);
+  }
+
+  /* Multi-value positioning */
+  .multi-value {
+    position: absolute;
+    font-size: var(--elem-multi-value-font-size, 14cqw);
+    font-weight: 600;
+    z-index: var(--elem-multi-value-z-index, 2);
+  }
+
+  /* 2-value diagonal positions */
+  .top-left {
+    top: 4cqw;
+    left: 4cqw;
+  }
+  .bottom-right {
+    bottom: 4cqw;
+    right: 4cqw;
+  }
+
+  /* 3-value horizontal bar positions */
+  .bar-top-left {
+    top: 8cqw;
+    left: 4cqw;
+  }
+  .bar-middle-right {
+    top: calc(50% - 7cqw);
+    right: 4cqw;
+  }
+  .bar-bottom-left {
+    bottom: 8cqw;
+    left: 4cqw;
+  }
+
+  /* 3-value vertical bar positions */
+  .bar-left-top {
+    top: 4cqw;
+    left: 8cqw;
+  }
+  .bar-middle-bottom {
+    bottom: 4cqw;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .bar-right-top {
+    top: 4cqw;
+    right: 8cqw;
+  }
+
+  /* 4-value triangular positions (tips meet in center) */
+  .triangle-top-pos {
+    top: 3cqw;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .triangle-right-pos {
+    top: calc(50% - 7cqw);
+    right: 3cqw;
+  }
+  .triangle-bottom-pos {
+    bottom: 3cqw;
+    left: 50%;
+    transform: translate(-50%, 2px);
+  }
+  .triangle-left-pos {
+    top: calc(50% - 7cqw);
+    left: 3cqw;
+  }
+
+  /* 4-value quadrant positions */
+  .value-quadrant-tl {
+    top: 4cqw;
+    left: 4cqw;
+  }
+  .value-quadrant-tr {
+    top: 4cqw;
+    right: 4cqw;
+  }
+  .value-quadrant-bl {
+    bottom: 4cqw;
+    left: 4cqw;
+  }
+  .value-quadrant-br {
+    bottom: 4cqw;
+    right: 4cqw;
+  }
+
+  /* Multi-segment backgrounds */
+  .segment {
+    position: absolute;
+    z-index: 1;
+  }
+
+  /* Diagonal split (2 values) */
+  .diagonal-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(0 0, 100% 0, 0 100%);
+  }
+  .diagonal-bottom {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  }
+
+  /* Horizontal bars (3 values) */
+  .horizontal-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 33.33%;
+  }
+  .horizontal-middle {
+    top: 33.33%;
+    left: 0;
+    width: 100%;
+    height: 33.33%;
+  }
+  .horizontal-bottom {
+    top: 66.66%;
+    left: 0;
+    width: 100%;
+    height: 33.34%;
+  }
+
+  /* Vertical bars (3 values) */
+  .vertical-left {
+    top: 0;
+    left: 0;
+    width: 33.33%;
+    height: 100%;
+  }
+  .vertical-middle {
+    top: 0;
+    left: 33.33%;
+    width: 33.33%;
+    height: 100%;
+  }
+  .vertical-right {
+    top: 0;
+    left: 66.66%;
+    width: 33.34%;
+    height: 100%;
+  }
+
+  /* Triangular segments (4 values) - tips meet in center */
+  .triangle-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(0 0, 100% 0, 50% 50%);
+  }
+  .triangle-right {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
+  }
+  .triangle-bottom {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(100% 100%, 0 100%, 50% 50%);
+  }
+  .triangle-left {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(0 100%, 0 0, 50% 50%);
+  }
+
+  /* Four quadrants (4 values) */
+  .quadrant-tl {
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 50%;
+  }
+  .quadrant-tr {
+    top: 0;
+    left: 50%;
+    width: 50%;
+    height: 50%;
+  }
+  .quadrant-bl {
+    top: 50%;
+    left: 0;
+    width: 50%;
+    height: 50%;
+  }
+  .quadrant-br {
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 50%;
+  }
+</style>

package/dist/src/lib/element/data.json.gz.d.ts

@@ -0,0 +1,4 @@
+import type { ChemicalElement } from './types'
+
+declare const data: ChemicalElement[]
+export default data

package/dist/src/lib/element/data.ts

@@ -0,0 +1,14 @@
+// Data sources (in order of precedence, highest first):
+// 1. Shannon radii and oxidation states from pymatgen 2025.10.7 (https://pymatgen.org)
+// 2. atomic_radius values from pymatgen
+// 3. https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952
+// 4. https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json
+//
+// To regenerate data.json with latest pymatgen data:
+//   python scripts/extract_pymatgen_data.py
+
+// Source of truth is data.json.gz. During npm packaging, scripts/package-dist-assets.ts
+// rewrites dist/element/data.js to inline decompressed JSON for sync consumers.
+import data from './data.json.gz'
+
+export default data

package/dist/src/lib/element/index.ts

@@ -0,0 +1,8 @@
+export type * from '$lib/element/types'
+export { default as BohrAtom } from './BohrAtom.svelte'
+export { default as element_data } from './data'
+export { default as ElementHeading } from './ElementHeading.svelte'
+export { default as ElementPhoto } from './ElementPhoto.svelte'
+export { default as ElementStats } from './ElementStats.svelte'
+export { default as ElementTile } from './ElementTile.svelte'
+export { default as Nucleus } from './Nucleus.svelte'

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

@@ -0,0 +1,62 @@
+import type { ELEM_SYMBOLS, ELEMENT_CATEGORIES } from '$lib/labels'
+
+export type ElementCategory = (typeof ELEMENT_CATEGORIES)[number]
+export type ElementSymbol = (typeof ELEM_SYMBOLS)[number]
+
+// Shannon radii structure: oxidation_state -> coordination -> spin -> radii
+export type ShannonRadiusPair = {
+  crystal_radius: number
+  ionic_radius: number
+}
+export type ShannonRadii = Record<string, Record<string, Record<string, ShannonRadiusPair>>>
+
+export type ChemicalElement = {
+  'cpk-hex': string | null
+  appearance: string | null
+  atomic_mass: number // in atomic units (u)
+  atomic_radius: number | null // in Angstrom (A)
+  boiling_point: number | null // in kelvin (K)
+  category: ElementCategory
+  column: number // aka group, in range 1 - 18
+  covalent_radius: number | null // in Angstrom (A)
+  density: number
+  discoverer: string
+  electron_affinity: number | null
+  electron_configuration_semantic: string
+  electron_configuration: string
+  electronegativity_pauling: number | null
+  electronegativity: number | null
+  first_ionization: number | null // in electron volts (eV)
+  ionization_energies: number[]
+  melting_point: number | null
+  metal: boolean | null
+  metalloid: boolean | null
+  molar_heat: number | null
+  electrons: number
+  neutrons: number
+  protons: number
+  n_shells: number
+  n_valence: number | null
+  name: string
+  natural: boolean | null
+  nonmetal: boolean | null
+  number_of_isotopes: number | null
+  number: number
+  period: number
+  phase: `Gas` | `Liquid` | `Solid`
+  radioactive: boolean | null
+  row: number // != period for lanthanides and actinides
+  shells: number[]
+  specific_heat: number | null
+  spectral_img: string | null
+  summary: string
+  symbol: ElementSymbol
+  year: number | string
+  // Properties from pymatgen
+  mendeleev_number?: number // Pettifor's chemical scale for crystal-structure maps
+  oxidation_states?: number[]
+  common_oxidation_states?: number[]
+  icsd_oxidation_states?: number[]
+  ionic_radii?: Record<string, number> // oxidation_state (as string) -> radius in Angstrom
+  shannon_radii?: ShannonRadii
+}

package/dist/src/lib/feedback/ClickFeedback.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import Icon from '$lib/Icon.svelte'
+  import type { IconName } from '$lib/icons'
+
+  // Generic feedback component that shows a transient icon at a specific position.
+  // Commonly used for copy-to-clipboard feedback, but can display icons for
+  // various user interactions.
+  let {
+    visible = $bindable(false),
+    position = { x: 0, y: 0 },
+    icon = `Check`,
+  }: {
+    visible?: boolean
+    position: { x: number; y: number }
+    icon?: IconName
+  } = $props()
+</script>
+
+{#if visible}
+  {@const { x, y } = position}
+  <div class="click-feedback" style:left="{x}px" style:top="{y}px">
+    <Icon {icon} />
+  </div>
+{/if}
+
+<style>
+  .click-feedback {
+    position: fixed;
+    width: 24px;
+    height: 24px;
+    background: var(--success-color, #4caf50);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    place-content: center;
+    animation: click-success 1.5s ease-out forwards;
+    pointer-events: none;
+    z-index: 10000;
+  }
+  @keyframes click-success {
+    0% {
+      transform: translate(-50%, -50%) scale(0);
+      opacity: 0;
+    }
+    20% {
+      transform: translate(-50%, -50%) scale(1.2);
+      opacity: 1;
+    }
+    40% {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0;
+    }
+  }
+</style>

package/dist/src/lib/feedback/DragOverlay.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Icon from '$lib/Icon.svelte'
+
+  let {
+    visible = false,
+    message = `Drop JSON file to load phase diagram data`,
+  }: {
+    visible?: boolean
+    message?: string
+  } = $props()
+</script>
+
+{#if visible}
+  <div class="drag-overlay">
+    <div class="drag-message">
+      <Icon icon="Info" />
+      <span>{message}</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .drag-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(25, 118, 210, 0.1);
+    border: 2px dashed var(--accent-color, #1976d2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+  .drag-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    color: var(--accent-color, #1976d2);
+    font-weight: 600;
+    font-size: 1.1em;
+  }
+</style>

package/dist/src/lib/feedback/index.ts

@@ -0,0 +1,4 @@
+export { default as ClickFeedback } from './ClickFeedback.svelte'
+export { default as DragOverlay } from './DragOverlay.svelte'
+export { default as Spinner } from './Spinner.svelte'
+export { default as StatusMessage } from './StatusMessage.svelte'