matterviz 0.1.0

package/dist/colors/vesta-colors.json

@@ -0,0 +1,111 @@
+{
+  "Ac": [112, 171, 250],
+  "Ag": [192, 192, 192],
+  "Al": [129, 178, 214],
+  "Am": [84, 92, 242],
+  "Ar": [207, 254, 196],
+  "As": [116, 208, 87],
+  "At": [117, 79, 69],
+  "Au": [255, 209, 35],
+  "B": [31, 162, 15],
+  "Ba": [0, 201, 0],
+  "Be": [94, 215, 123],
+  "Bh": [224, 0, 56],
+  "Bi": [158, 79, 181],
+  "Bk": [138, 79, 227],
+  "Br": [126, 49, 2],
+  "C": [76, 76, 76],
+  "Ca": [90, 150, 189],
+  "Cd": [255, 217, 143],
+  "Ce": [255, 255, 199],
+  "Cf": [161, 54, 212],
+  "Cl": [49, 252, 2],
+  "Cm": [120, 92, 227],
+  "Co": [0, 0, 175],
+  "Cr": [0, 0, 158],
+  "Cs": [87, 23, 143],
+  "Cu": [34, 71, 220],
+  "Db": [209, 0, 79],
+  "Dy": [31, 255, 199],
+  "Er": [0, 230, 117],
+  "Es": [179, 31, 212],
+  "Eu": [97, 255, 199],
+  "F": [176, 185, 230],
+  "Fe": [181, 113, 0],
+  "Fm": [179, 31, 186],
+  "Fr": [66, 0, 102],
+  "Ga": [158, 227, 115],
+  "Gd": [69, 255, 199],
+  "Ge": [126, 110, 166],
+  "H": [255, 204, 204],
+  "He": [252, 232, 206],
+  "Hf": [77, 194, 255],
+  "Hg": [184, 184, 208],
+  "Ho": [0, 255, 156],
+  "Hs": [230, 0, 46],
+  "I": [148, 0, 148],
+  "In": [166, 117, 115],
+  "Ir": [23, 84, 135],
+  "K": [161, 33, 246],
+  "Kr": [250, 193, 243],
+  "La": [90, 196, 73],
+  "Li": [134, 223, 115],
+  "Lr": [199, 0, 102],
+  "Lu": [0, 171, 36],
+  "Md": [179, 13, 166],
+  "Mg": [251, 123, 21],
+  "Mn": [167, 8, 157],
+  "Mo": [84, 181, 181],
+  "Mt": [235, 0, 38],
+  "N": [176, 185, 230],
+  "Na": [249, 220, 60],
+  "Nb": [115, 194, 201],
+  "Nd": [199, 255, 199],
+  "Ne": [254, 55, 181],
+  "Ni": [183, 187, 189],
+  "No": [189, 13, 135],
+  "Np": [0, 128, 255],
+  "O": [254, 3, 0],
+  "Os": [38, 102, 150],
+  "P": [192, 156, 194],
+  "Pa": [0, 161, 255],
+  "Pb": [87, 89, 97],
+  "Pd": [0, 105, 133],
+  "Pm": [163, 255, 199],
+  "Po": [171, 92, 0],
+  "Pr": [217, 255, 199],
+  "Pt": [208, 208, 224],
+  "Pu": [0, 107, 255],
+  "Ra": [0, 125, 0],
+  "Rb": [112, 46, 176],
+  "Re": [38, 125, 171],
+  "Rf": [204, 0, 89],
+  "Rh": [10, 125, 140],
+  "Rn": [66, 130, 150],
+  "Ru": [36, 143, 143],
+  "S": [255, 250, 0],
+  "Sb": [158, 99, 181],
+  "Sc": [181, 99, 171],
+  "Se": [154, 239, 15],
+  "Sg": [217, 0, 69],
+  "Si": [27, 59, 250],
+  "Sm": [143, 255, 199],
+  "Sn": [154, 142, 185],
+  "Sr": [0, 255, 0],
+  "Ta": [77, 166, 255],
+  "Tb": [48, 255, 199],
+  "Tc": [59, 158, 158],
+  "Te": [212, 122, 0],
+  "Th": [0, 186, 255],
+  "Ti": [120, 202, 255],
+  "Tl": [166, 84, 77],
+  "Tm": [0, 212, 82],
+  "U": [0, 143, 255],
+  "V": [229, 25, 0],
+  "W": [33, 148, 214],
+  "Xe": [66, 158, 176],
+  "Y": [148, 255, 255],
+  "Yb": [0, 191, 56],
+  "Zn": [143, 143, 129],
+  "Zr": [0, 255, 0]
+}

package/dist/composition/BarChart.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">import { format_num } from '..';
+import { element_color_schemes } from '../colors';
+import { choose_bw_for_contrast } from '../labels';
+import { composition_to_percentages } from './parse';
+// Constants for bar chart calculations
+const MIN_FONT_SCALE = 0.6;
+const MAX_FONT_SCALE = 1.2;
+const MIN_SEGMENT_SIZE_FOR_LABEL = 15; // pixels
+let { composition, width = 200, height = 60, segment_gap = 0, border_radius = 8, outer_corners_only = true, show_labels = true, show_percentages = false, show_amounts = true, color_scheme = `Vesta`, segment_content, style = ``, class: class_name = ``, interactive = true, ...rest } = $props();
+let element_colors = $derived(element_color_schemes[color_scheme] || element_color_schemes.Vesta);
+let percentages = $derived(composition_to_percentages(composition));
+// Calculate bar segments for horizontal layout
+let segments = $derived.by(() => {
+    const element_entries = Object.entries(composition).filter(([_, amount]) => amount && amount > 0);
+    if (element_entries.length === 0)
+        return [];
+    const THIN_SEGMENT_THRESHOLD = 20; // Percentage below which segment is considered thin
+    const EXTERNAL_LABEL_SIZE_THRESHOLD = 5; // Lower threshold for external labels
+    let above_labels = 0;
+    let below_labels = 0;
+    return element_entries.map(([element, amount]) => {
+        const percentage = percentages[element] || 0;
+        const color = element_colors[element] || `#cccccc`;
+        // Calculate font scale based on percentage (approximate segment width)
+        const approx_segment_width = (percentage / 100) * width;
+        const segment_size = Math.min(approx_segment_width, height);
+        const font_scale = Math.min(MAX_FONT_SCALE, Math.max(MIN_FONT_SCALE, segment_size / 40));
+        // Determine label display requirements
+        const can_show_label = segment_size >= MIN_SEGMENT_SIZE_FOR_LABEL;
+        const is_thin = percentage < THIN_SEGMENT_THRESHOLD;
+        const can_show_external_label = segment_size >= EXTERNAL_LABEL_SIZE_THRESHOLD;
+        const needs_external_label = is_thin && can_show_external_label;
+        // Balance labels above and below for better visual distribution
+        let external_label_position = null;
+        if (needs_external_label) {
+            external_label_position = above_labels <= below_labels
+                ? `above`
+                : `below`;
+            if (external_label_position === `above`)
+                above_labels++;
+            else
+                below_labels++;
+        }
+        return {
+            element: element,
+            amount: amount,
+            percentage,
+            color,
+            width_percent: percentage,
+            font_scale,
+            text_color: choose_bw_for_contrast(null, color),
+            can_show_label,
+            is_thin,
+            needs_external_label,
+            external_label_position,
+        };
+    });
+});
+let hovered_element = $state(null);
+</script>
+
+{#snippet label_content(segment: SegmentData)}
+  <span class="element-symbol" style:font-size="{10 * segment.font_scale}px">{
+    segment.element
+  }</span>{#if show_amounts}<sub
+      class="amount"
+      style:font-size="{8 * segment.font_scale}px"
+    >{segment.amount}</sub>{/if}
+  {#if show_percentages}
+    <sub class="percentage" style:font-size="{8 * segment.font_scale}px">
+      {format_num(segment.percentage, 1)}%
+    </sub>
+  {/if}
+{/snippet}
+
+<div
+  class="stacked-bar-chart-container {class_name}"
+  style:--bar-max-width="{width}px"
+  style:--bar-height="{height}px"
+  style:--segment-gap="{segment_gap}px"
+  style:--border-radius="{border_radius}px"
+  {style}
+  {...rest}
+>
+  <!-- External labels above the bar -->
+  <div class="external-labels-above">
+    {#each segments as segment (segment.element)}
+      {#if show_labels && segment.needs_external_label &&
+        segment.external_label_position === `above`}
+        <div
+          class="external-label"
+          class:hovered={hovered_element === segment.element}
+          style:color={segment.color}
+          style:font-size="{7 * segment.font_scale}px"
+          style:flex={segment.width_percent}
+        >
+          {@render label_content(segment)}
+        </div>
+      {:else}
+        <div style:flex={segment.width_percent}></div>
+      {/if}
+    {/each}
+  </div>
+
+  <div class="bar-segments" class:outer-corners-only={outer_corners_only}>
+    {#each segments as segment (segment.element)}
+      <div
+        class="bar-segment"
+        class:interactive
+        class:hovered={hovered_element === segment.element}
+        style:background-color={segment.color}
+        style:flex={segment.width_percent}
+        onmouseenter={() => interactive && (hovered_element = segment.element)}
+        onmouseleave={() => interactive && (hovered_element = null)}
+        {...interactive && {
+          role: `button`,
+          tabindex: 0,
+          'aria-label': `${segment.element}: ${segment.amount} ${
+            segment.amount === 1 ? `atom` : `atoms`
+          } (${segment.percentage.toFixed(1)}%)`,
+        }}
+        title="{segment.element}: {segment.amount} {segment.amount === 1
+          ? `atom`
+          : `atoms`} ({segment.percentage.toFixed(1)}%)"
+      >
+        {#if show_labels && segment.can_show_label && !segment.needs_external_label}
+          <div
+            class="bar-label"
+            style:color={segment.text_color}
+            style:font-size="{7 * segment.font_scale}px"
+          >
+            {@render label_content(segment)}
+          </div>
+        {/if}
+
+        {#if segment_content}
+          {@render segment_content(segment)}
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <!-- External labels below the bar -->
+  <div class="external-labels-below">
+    {#each segments as segment (segment.element)}
+      {#if show_labels && segment.needs_external_label &&
+        segment.external_label_position === `below`}
+        <div
+          class="external-label"
+          class:hovered={hovered_element === segment.element}
+          style:color={segment.color}
+          style:font-size="{7 * segment.font_scale}px"
+          style:flex={segment.width_percent}
+        >
+          {@render label_content(segment)}
+        </div>
+      {:else}
+        <div style:flex={segment.width_percent}></div>
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .stacked-bar-chart-container {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--bar-max-width);
+    min-width: var(--bar-min-width, 100px);
+    gap: 2px;
+  }
+  .external-labels-above,
+  .external-labels-below {
+    display: flex;
+    width: 100%;
+    gap: var(--segment-gap);
+    min-height: 20px;
+  }
+  .external-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-weight: 600;
+    white-space: nowrap;
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+  .external-label.hovered {
+    font-weight: 700;
+  }
+  .bar-segments {
+    display: flex;
+    width: 100%;
+    height: var(--bar-height, 50px);
+    max-height: var(--bar-max-height, 25px);
+    gap: var(--segment-gap);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+  }
+  .bar-segments:not(.outer-corners-only) .bar-segment {
+    border-radius: var(--border-radius);
+  }
+  .bar-segments.outer-corners-only .bar-segment:first-child {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+  .bar-segments.outer-corners-only .bar-segment:last-child {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+  .bar-segment {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    min-width: 0; /* Allow flex items to shrink */
+  }
+  .bar-segment.interactive {
+    cursor: pointer;
+  }
+  .bar-segment.interactive:hover,
+  .bar-segment.hovered {
+    filter: brightness(1.1);
+    transform: scaleY(1.05);
+  }
+  .bar-segment.interactive:focus {
+    outline: 2px solid var(--focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+  .bar-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-weight: 600;
+    white-space: nowrap;
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+  .bar-segment.hovered .bar-label {
+    font-weight: 700;
+  }
+  .element-symbol {
+    font-weight: 700;
+  }
+  .amount,
+  .percentage {
+    margin-left: 1px;
+    transform: translateY(5px);
+  }
+  .amount {
+    font-weight: 500;
+  }
+  .percentage {
+    font-weight: 400;
+  }
+</style>

package/dist/composition/BarChart.svelte.d.ts

@@ -0,0 +1,33 @@
+import { type CompositionType, type ElementSymbol } from '..';
+import { element_color_schemes } from '../colors';
+import type { Snippet } from 'svelte';
+interface Props {
+    composition: CompositionType;
+    width?: number;
+    height?: number;
+    segment_gap?: number;
+    border_radius?: number;
+    outer_corners_only?: boolean;
+    show_labels?: boolean;
+    show_percentages?: boolean;
+    show_amounts?: boolean;
+    color_scheme?: keyof typeof element_color_schemes;
+    segment_content?: Snippet<[
+        {
+            element: ElementSymbol;
+            amount: number;
+            percentage: number;
+            color: string;
+            width_percent: number;
+            font_scale: number;
+            text_color: string;
+        }
+    ]>;
+    style?: string;
+    class?: string;
+    interactive?: boolean;
+    [key: string]: unknown;
+}
+declare const BarChart: import("svelte").Component<Props, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/composition/BubbleChart.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">import { element_color_schemes } from '../colors';
+import { choose_bw_for_contrast } from '../labels';
+import { hierarchy, pack } from 'd3-hierarchy';
+// Constants for bubble positioning and sizing
+const MIN_FONT_SCALE = 0.4;
+const MAX_FONT_SCALE = 1.0;
+let { composition, size = 200, padding = 0, show_labels = true, show_amounts = true, color_scheme = `Vesta`, bubble_content, style = ``, class: class_name = ``, interactive = true, ...rest } = $props();
+let element_colors = $derived(element_color_schemes[color_scheme] || element_color_schemes.Vesta);
+// Function to determine text color based on background
+function get_text_color(background_color) {
+    return choose_bw_for_contrast(null, background_color);
+}
+// Calculate bubble data with proper circle packing
+let bubbles = $derived.by(() => {
+    const element_entries = Object.entries(composition).filter(([_, amount]) => amount && amount > 0);
+    if (element_entries.length === 0)
+        return [];
+    // Create hierarchy data structure for D3 pack
+    const hierarchy_data = {
+        children: element_entries.map(([element, amount]) => ({
+            element: element,
+            amount: amount,
+            color: element_colors[element] || `#cccccc`,
+        })),
+    };
+    // Use D3's pack layout for proper circle packing
+    const pack_layout = pack()
+        .size([size - 2 * padding, size - 2 * padding])
+        .padding(padding * 0.1); // Small padding between circles
+    const root = pack_layout(hierarchy(hierarchy_data).sum((d) => d && `amount` in d ? d.amount : 0));
+    // Get max radius for font scaling
+    const max_radius = Math.max(...root.leaves().map((d) => d.r || 0));
+    return root.leaves().map((node) => {
+        const radius = node.r || 0;
+        const data = node.data;
+        // Calculate font scale based on bubble size
+        // Scale from MIN_FONT_SCALE (for very small bubbles) to MAX_FONT_SCALE (for large bubbles)
+        const font_scale = Math.min(MAX_FONT_SCALE, MIN_FONT_SCALE + (radius / max_radius) * (MAX_FONT_SCALE - MIN_FONT_SCALE));
+        return {
+            element: data.element,
+            amount: data.amount,
+            radius,
+            x: (node.x || 0) + padding, // Offset by padding
+            y: (node.y || 0) + padding,
+            color: data.color,
+            font_scale,
+            text_color: get_text_color(data.color),
+        };
+    });
+});
+let hovered_element = $state(null);
+</script>
+
+<div class="bubble-chart-container {class_name}" {style} {...rest}>
+  <svg viewBox="0 0 {size} {size}" class="bubble-chart">
+    {#each bubbles as bubble (bubble.element)}
+      <circle
+        cx={bubble.x}
+        cy={bubble.y}
+        r={bubble.radius}
+        fill={bubble.color}
+        stroke="white"
+        stroke-width={hovered_element === bubble.element ? 1.5 : 1}
+        class="bubble"
+        class:interactive
+        class:hovered={hovered_element === bubble.element}
+        onmouseenter={() => interactive && (hovered_element = bubble.element)}
+        onmouseleave={() => interactive && (hovered_element = null)}
+        {...interactive && {
+          role: `button`,
+          tabindex: 0,
+          'aria-label': `${bubble.element}: ${bubble.amount} ${
+            bubble.amount === 1 ? `atom` : `atoms`
+          }`,
+        }}
+      >
+        <title>
+          {bubble.element}: {bubble.amount} {bubble.amount === 1 ? `atom` : `atoms`}
+        </title>
+      </circle>
+
+      {#if bubble_content}
+        {@render bubble_content(bubble)}
+      {/if}
+    {/each}
+
+    {#if show_labels}
+      {#each bubbles as bubble (bubble.element)}
+        <foreignObject
+          x={bubble.x - (size * 0.15 * bubble.font_scale) / 2}
+          y={bubble.y - (size * 0.075 * bubble.font_scale) / 2}
+          width={size * 0.15 * bubble.font_scale}
+          height={size * 0.075 * bubble.font_scale}
+          class="bubble-label-container"
+          class:hovered={hovered_element === bubble.element}
+        >
+          <div class="bubble-label" style:color={bubble.text_color}>
+            <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px">{
+              bubble.element
+            }</span>
+            {#if show_amounts}
+              <sub class="amount" style:font-size="{10 * bubble.font_scale}px">
+                {bubble.amount}
+              </sub>{/if}
+          </div>
+        </foreignObject>
+      {/each}
+    {/if}
+  </svg>
+</div>
+
+<style>
+  .bubble-chart-container {
+    display: inline-block;
+  }
+  .bubble-chart {
+    overflow: visible;
+    width: 100%;
+    height: auto;
+  }
+  .bubble {
+    transition: all 0.2s ease;
+  }
+  .bubble.interactive {
+    cursor: pointer;
+  }
+  .bubble.interactive:hover,
+  .bubble.hovered {
+    filter: brightness(1.1);
+  }
+  .bubble.interactive:focus {
+    outline: none;
+  }
+  .bubble-label-container {
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+  .bubble-label-container.hovered {
+    font-weight: 700;
+  }
+  .bubble-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+  foreignobject {
+    overflow: visible;
+  }
+  .bubble-label.hovered {
+    font-weight: 700;
+  }
+  .element-symbol {
+    font-weight: 700;
+  }
+  .amount {
+    font-weight: 500;
+    margin-left: 1px;
+    transform: translateY(5px);
+  }
+</style>

package/dist/composition/BubbleChart.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { CompositionType, ElementSymbol } from '..';
+import { element_color_schemes } from '../colors';
+import type { Snippet } from 'svelte';
+interface Props {
+    composition: CompositionType;
+    size?: number;
+    padding?: number;
+    show_labels?: boolean;
+    show_amounts?: boolean;
+    color_scheme?: keyof typeof element_color_schemes;
+    bubble_content?: Snippet<[
+        {
+            element: ElementSymbol;
+            amount: number;
+            radius: number;
+            x: number;
+            y: number;
+            color: string;
+            font_scale: number;
+            text_color: string;
+        }
+    ]>;
+    style?: string;
+    class?: string;
+    interactive?: boolean;
+    [key: string]: unknown;
+}
+declare const BubbleChart: import("svelte").Component<Props, {}, "">;
+type BubbleChart = ReturnType<typeof BubbleChart>;
+export default BubbleChart;

package/dist/composition/Composition.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">import { element_color_schemes } from '../colors';
+import BarChart from './BarChart.svelte';
+import BubbleChart from './BubbleChart.svelte';
+import { parse_composition_input } from './parse';
+import PieChart from './PieChart.svelte';
+let { input, mode = `pie`, size = 100, width = 300, height = 60, inner_radius = 0, show_labels = true, show_amounts = true, show_percentages = false, color_scheme = `Vesta`, interactive = true, on_composition_change, center_content, style = ``, class: class_name = ``, ...rest } = $props();
+let composition = $derived.by(() => {
+    try {
+        const parsed = parse_composition_input(input);
+        return parsed;
+    }
+    catch (error) {
+        console.error(`Failed to parse composition:`, error);
+        return {};
+    }
+});
+// Call the composition change callback in an effect, not in the derived
+$effect(() => {
+    on_composition_change?.(composition);
+});
+</script>
+
+<div class="composition-container {class_name}" {style} {...rest}>
+  <div class="visualization">
+    {#if mode === `pie`}
+      <PieChart
+        {composition}
+        {size}
+        {inner_radius}
+        {show_labels}
+        {show_amounts}
+        {show_percentages}
+        {color_scheme}
+        {interactive}
+        {center_content}
+      />
+    {:else if mode === `bubble`}
+      <BubbleChart
+        {composition}
+        {size}
+        {show_labels}
+        {show_amounts}
+        {color_scheme}
+        {interactive}
+      />
+    {:else if mode === `bar`}
+      <BarChart
+        {composition}
+        {width}
+        {height}
+        {show_labels}
+        {show_amounts}
+        {show_percentages}
+        {color_scheme}
+        {interactive}
+      />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .composition-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .visualization {
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/composition/Composition.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { CompositionType } from '..';
+import { element_color_schemes } from '../colors';
+import type { Snippet } from 'svelte';
+interface Props {
+    input: string | CompositionType;
+    mode?: `pie` | `bubble` | `bar`;
+    size?: number;
+    width?: number;
+    height?: number;
+    inner_radius?: number;
+    show_labels?: boolean;
+    show_amounts?: boolean;
+    show_percentages?: boolean;
+    color_scheme?: keyof typeof element_color_schemes;
+    interactive?: boolean;
+    on_composition_change?: (composition: CompositionType) => void;
+    center_content?: Snippet<[{
+        composition: CompositionType;
+        total_atoms: number;
+    }]>;
+    style?: string;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Composition: import("svelte").Component<Props, {}, "">;
+type Composition = ReturnType<typeof Composition>;
+export default Composition;