matterviz 0.3.2 → 0.3.3

package/dist/element/ElementTile.svelte

@@ -1,94 +1,158 @@
-<script lang="ts">import { contrast_color, is_color, pick_contrast_color } from '../colors';
-import { format_num } from '../labels';
-import { colors, selected } from '../state.svelte';
-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 } = $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)
+<script lang="ts">
+  import { contrast_color, is_color, pick_contrast_color } from '../colors'
+  import type { ChemicalElement } from './'
+  import { format_num } from '../labels'
+  import { colors, selected } from '../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;
+        : 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) => {
-    if (is_color(val))
-        return show_values === true ? val.toString() : ``;
+    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);
+    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 : ``;
+      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;
+
+    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];
-    if (!layout)
-        return null;
+      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`],
-        };
+      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`],
-        };
+      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`],
-        };
+      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`),
-        };
+      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 };
+      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;
-});
+
+    return null
+  })
 </script>
 
 <svelte:element

package/dist/element/Nucleus.svelte

@@ -1,17 +1,45 @@
-<script lang="ts">let { protons, neutrons, size = 100, radius = $bindable(size / 2), proton_color = `cornflowerblue`, neutron_color = `orange`, stroke = ``, proton_label = ` P`, neutron_label = ` N`, text_color = `white`, symbol = ``, ...rest } = $props();
-$effect(() => {
-    radius = size / 2;
-});
-let proton_frac = $derived(protons / (protons + neutrons));
-let neutron_frac = $derived(1 - proton_frac);
-let proton_circ = $derived(Math.PI * radius * proton_frac);
-let dash_array = $derived(`0 ${Math.PI * radius - proton_circ} ${proton_circ}`);
-let text = $derived({
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements'
+
+  let {
+    protons,
+    neutrons,
+    size = 100,
+    radius = $bindable(size / 2),
+    proton_color = `cornflowerblue`,
+    neutron_color = `orange`,
+    stroke = ``,
+    proton_label = ` P`,
+    neutron_label = ` N`,
+    text_color = `white`,
+    symbol = ``,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    protons: number
+    neutrons: number
+    radius?: number
+    size?: number
+    proton_color?: string
+    neutron_color?: string
+    stroke?: string
+    proton_label?: string
+    neutron_label?: string
+    text_color?: string
+    symbol?: string
+  } = $props()
+
+  $effect(() => {
+    radius = size / 2
+  })
+  let proton_frac = $derived(protons / (protons + neutrons))
+  let neutron_frac = $derived(1 - proton_frac)
+  let proton_circ = $derived(Math.PI * radius * proton_frac)
+  let dash_array = $derived(`0 ${Math.PI * radius - proton_circ} ${proton_circ}`)
+  let text = $derived({
     'dominant-baseline': `middle`,
     'text-anchor': `middle`,
     fill: text_color,
-});
-export {};
+  })
 </script>
 
 <svg width="100%" height="100%" viewBox="0 0 {size} {size}" {...rest}>

package/dist/feedback/ClickFeedback.svelte

@@ -1,8 +1,19 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-// 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`, } = $props();
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { IconName } from '../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}

package/dist/feedback/DragOverlay.svelte

@@ -1,5 +1,13 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-let { visible = false, message = `Drop JSON file to load phase diagram data`, } = $props();
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+
+  let {
+    visible = false,
+    message = `Drop JSON file to load phase diagram data`,
+  }: {
+    visible?: boolean
+    message?: string
+  } = $props()
 </script>
 
 {#if visible}

package/dist/feedback/Spinner.svelte

@@ -1,5 +1,7 @@
-<script lang="ts">let { text, ...rest } = $props();
-export {};
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { text, ...rest }: { text?: string } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
 <div class="spinner" role="status" aria-live="polite" aria-busy="true" {...rest}>

package/dist/feedback/StatusMessage.svelte

@@ -1,5 +1,11 @@
-<script lang="ts">let { message = $bindable(), type = `info`, dismissible = false, ...rest } = $props();
-export {};
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { message = $bindable(), type = `info`, dismissible = false, ...rest }: {
+    message?: string
+    type?: `info` | `error` | `warning`
+    dismissible?: boolean
+  } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
 {#if message}

package/dist/fermi-surface/FermiSlice.svelte

@@ -1,103 +1,133 @@
-<script lang="ts">import { ScatterPlot } from '../plot';
-import { SvelteSet } from 'svelte/reactivity';
-import { compute_fermi_slice } from './compute';
-import { BAND_COLORS } from './constants';
-let { fermi_data, miller_indices = [0, 0, 1], distance = 0, line_width = 2, show_axes = true, axis_labels, band_colors = BAND_COLORS, show_legend = true, on_error, children, ...rest } = $props();
-let wrapper = $state(undefined);
-let hidden_bands = new SvelteSet();
-// Compute axis labels from Miller indices (subscript z doesn't exist in Unicode)
-let labels = $derived.by(() => {
-    if (axis_labels)
-        return axis_labels;
-    const K = [`kₓ`, `kᵧ`, `kz`];
-    const zeros = miller_indices.flatMap((val, idx) => (val === 0 ? [idx] : []));
-    if (zeros.length === 2)
-        return [K[zeros[0]], K[zeros[1]]];
-    if (zeros.length === 1)
-        return [`k⊥`, K[zeros[0]]];
-    return [`k₁`, `k₂`];
-});
-// Compute slice with error handling
-let slice_data = $state(null);
-$effect(() => {
+<script lang="ts">
+  import type { Vec3 } from '../math'
+  import type { DataSeries } from '../plot'
+  import { ScatterPlot } from '../plot'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteSet } from 'svelte/reactivity'
+  import { compute_fermi_slice } from './compute'
+  import { BAND_COLORS } from './constants'
+  import type { FermiSliceData, FermiSurfaceData } from './types'
+
+  let {
+    fermi_data,
+    miller_indices = [0, 0, 1],
+    distance = 0,
+    line_width = 2,
+    show_axes = true,
+    axis_labels,
+    band_colors = BAND_COLORS,
+    show_legend = true,
+    on_error,
+    children,
+    ...rest
+  }: {
+    fermi_data?: FermiSurfaceData
+    miller_indices?: Vec3
+    distance?: number
+    line_width?: number
+    show_axes?: boolean
+    axis_labels?: [string, string]
+    band_colors?: readonly string[]
+    show_legend?: boolean
+    on_error?: (error: Error) => void
+    children?: Snippet<
+      [{ slice_data: FermiSliceData | null; export_svg: () => string | null }]
+    >
+  } & HTMLAttributes<HTMLDivElement> = $props()
+
+  let wrapper = $state<HTMLDivElement | undefined>(undefined)
+  let hidden_bands = new SvelteSet<number>()
+
+  // Compute axis labels from Miller indices (subscript z doesn't exist in Unicode)
+  let labels = $derived.by((): [string, string] => {
+    if (axis_labels) return axis_labels
+    const K = [`kₓ`, `kᵧ`, `kz`] as const
+    const zeros = miller_indices.flatMap((val, idx) => (val === 0 ? [idx] : []))
+    if (zeros.length === 2) return [K[zeros[0]], K[zeros[1]]]
+    if (zeros.length === 1) return [`k⊥`, K[zeros[0]]]
+    return [`k₁`, `k₂`]
+  })
+
+  // Compute slice with error handling
+  let slice_data = $state<FermiSliceData | null>(null)
+  $effect(() => {
     if (!fermi_data) {
-        slice_data = null;
-        return;
+      slice_data = null
+      return
     }
     try {
-        slice_data = compute_fermi_slice(fermi_data, { miller_indices, distance });
+      slice_data = compute_fermi_slice(fermi_data, { miller_indices, distance })
+    } catch (err) {
+      slice_data = null
+      on_error?.(err instanceof Error ? err : new Error(String(err)))
     }
-    catch (err) {
-        slice_data = null;
-        on_error?.(err instanceof Error ? err : new Error(String(err)));
-    }
-});
-// Transform isolines to ScatterPlot series
-let series = $derived(slice_data?.isolines.map((iso, idx) => ({
-    id: `iso-${iso.band_index}-${idx}`,
-    x: iso.points_2d.map((pt) => pt[0]),
-    y: iso.points_2d.map((pt) => pt[1]),
-    markers: `line`,
-    visible: !hidden_bands.has(iso.band_index),
-    label: `Band ${iso.band_index + 1}`,
-    line_style: {
+  })
+
+  // Transform isolines to ScatterPlot series
+  let series: DataSeries[] = $derived(
+    slice_data?.isolines.map((iso, idx) => ({
+      id: `iso-${iso.band_index}-${idx}`,
+      x: iso.points_2d.map((pt) => pt[0]),
+      y: iso.points_2d.map((pt) => pt[1]),
+      markers: `line` as const,
+      visible: !hidden_bands.has(iso.band_index),
+      label: `Band ${iso.band_index + 1}`,
+      line_style: {
         stroke: band_colors[iso.band_index % band_colors.length],
         stroke_width: line_width,
-    },
-})) ?? []);
-// Compute padded data bounds (single-pass to avoid stack overflow on large arrays)
-let bounds = $derived.by(() => {
-    const isolines = slice_data?.isolines;
-    if (!isolines?.length)
-        return { min: [-1, -1], max: [1, 1] };
-    let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity;
+      },
+    })) ?? [],
+  )
+
+  // Compute padded data bounds (single-pass to avoid stack overflow on large arrays)
+  let bounds = $derived.by(() => {
+    const isolines = slice_data?.isolines
+    if (!isolines?.length) return { min: [-1, -1], max: [1, 1] }
+
+    let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity
     for (const iso of isolines) {
-        for (const pt of iso.points_2d) {
-            if (pt[0] < xmin)
-                xmin = pt[0];
-            if (pt[0] > xmax)
-                xmax = pt[0];
-            if (pt[1] < ymin)
-                ymin = pt[1];
-            if (pt[1] > ymax)
-                ymax = pt[1];
-        }
+      for (const pt of iso.points_2d) {
+        if (pt[0] < xmin) xmin = pt[0]
+        if (pt[0] > xmax) xmax = pt[0]
+        if (pt[1] < ymin) ymin = pt[1]
+        if (pt[1] > ymax) ymax = pt[1]
+      }
     }
-    if (!isFinite(xmin))
-        return { min: [-1, -1], max: [1, 1] };
-    const pad = 0.1, rx = xmax - xmin || 1, ry = ymax - ymin || 1;
+    if (!isFinite(xmin)) return { min: [-1, -1], max: [1, 1] }
+
+    const pad = 0.1, rx = xmax - xmin || 1, ry = ymax - ymin || 1
     return {
-        min: [xmin - rx * pad, ymin - ry * pad],
-        max: [xmax + rx * pad, ymax + ry * pad],
-    };
-});
-function toggle_band(series_idx) {
-    const band = slice_data?.isolines[series_idx]?.band_index;
-    if (band === undefined)
-        return;
-    if (hidden_bands.has(band))
-        hidden_bands.delete(band);
-    else
-        hidden_bands.add(band);
-}
-function isolate_band(series_idx) {
-    const band = slice_data?.isolines[series_idx]?.band_index;
-    if (band === undefined)
-        return;
+      min: [xmin - rx * pad, ymin - ry * pad],
+      max: [xmax + rx * pad, ymax + ry * pad],
+    }
+  })
+
+  function toggle_band(series_idx: number) {
+    const band = slice_data?.isolines[series_idx]?.band_index
+    if (band === undefined) return
+    if (hidden_bands.has(band)) hidden_bands.delete(band)
+    else hidden_bands.add(band)
+  }
+
+  function isolate_band(series_idx: number) {
+    const band = slice_data?.isolines[series_idx]?.band_index
+    if (band === undefined) return
     const all_bands = [
-        ...new Set(slice_data?.isolines.map((iso) => iso.band_index) ?? []),
-    ];
-    const is_solo = all_bands.every((b) => b === band || hidden_bands.has(b));
-    hidden_bands.clear();
+      ...new Set(slice_data?.isolines.map((iso) => iso.band_index) ?? []),
+    ]
+    const is_solo = all_bands.every((bid) => bid === band || hidden_bands.has(bid))
+    hidden_bands.clear()
     if (!is_solo) {
-        for (const b of all_bands) {
-            if (b !== band)
-                hidden_bands.add(b);
-        }
+      for (const bid of all_bands) {
+        if (bid !== band) hidden_bands.add(bid)
+      }
     }
-}
-// Returns null if SVG not found, making export failures explicit
-const export_svg = () => wrapper?.querySelector(`svg`)?.outerHTML ?? null;
+  }
+
+  // Returns null if SVG not found, making export failures explicit
+  const export_svg = (): string | null =>
+    wrapper?.querySelector(`svg`)?.outerHTML ?? null
 </script>
 
 <ScatterPlot