matterviz 0.4.1 → 0.4.3

package/dist/element/ElementTile.svelte

@@ -5,12 +5,7 @@
   import { colors, selected } from '../state.svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  type SplitLayout =
-    | `diagonal`
-    | `horizontal`
-    | `vertical`
-    | `triangular`
-    | `quadrant`
+  type SplitLayout = `diagonal` | `horizontal` | `vertical` | `triangular` | `quadrant`
   let {
     element,
     bg_color = undefined,
@@ -56,9 +51,7 @@
   } = $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`,
-  )
+  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(
@@ -85,7 +78,7 @@
 
     // Handle string values - check if it's a numeric string
     if (typeof val === `string`) {
-      const parsed_num = parseFloat(val)
+      const parsed_num = Number(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 : ``
@@ -101,73 +94,57 @@
     return !is_color(value)
   })
 
+  // CSS classes for segments and value positions, keyed by `layout-count`
+  const layout_classes: Record<string, { segments: string[]; positions: string[] }> = {
+    'diagonal-2': {
+      segments: [`diagonal-top`, `diagonal-bottom`],
+      positions: [`top-left`, `bottom-right`],
+    },
+    'horizontal-3': {
+      segments: [`horizontal-top`, `horizontal-middle`, `horizontal-bottom`],
+      positions: [`bar-top-left`, `bar-middle-right`, `bar-bottom-left`],
+    },
+    'vertical-3': {
+      segments: [`vertical-left`, `vertical-middle`, `vertical-right`],
+      positions: [`bar-left-top`, `bar-middle-bottom`, `bar-right-top`],
+    },
+    'triangular-4': {
+      segments: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}`),
+      positions: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}-pos`),
+    },
+    'quadrant-4': {
+      segments: [`tl`, `tr`, `bl`, `br`].map((pos) => `quadrant-${pos}`),
+      positions: [`tl`, `tr`, `bl`, `br`].map((pos) => `value-quadrant-${pos}`),
+    },
+  }
+
   // 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
+    const layout =
+      split_layout ??
+      ({ 2: `diagonal`, 3: `horizontal`, 4: `quadrant` }[count] as SplitLayout | undefined)
+    return layout ? (layout_classes[`${layout}-${count}`] ?? null) : null
   })
 </script>
 
 <svelte:element
   this={href ? `a` : `div`}
   bind:this={node}
-  {...(href ? { href } : {})}
+  {...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: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 } : {})}
+  {...href ? { role: `link`, tabindex: 0 } : {}}
   onclick={(event: MouseEvent) => onclick?.({ element, event })}
   {...rest}
 >
@@ -189,11 +166,11 @@
           <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}
+              ? pick_contrast_color({
+                  bg_color: bg_colors[idx] ?? fallback_bg_color,
+                  luminance_threshold,
+                })
+              : null}
           >
             {format_value(val)}
           </span>
@@ -219,8 +196,7 @@
         <div
           class="segment {layout_config.segments[idx]}"
           style:background-color={bg_color}
-        >
-        </div>
+        ></div>
       {/if}
     {/each}
   {/if}
@@ -247,7 +223,8 @@
   .element-tile span {
     line-height: 1em;
   }
-  .element-tile.active, .element-tile:hover {
+  .element-tile.active,
+  .element-tile:hover {
     border: var(--elem-tile-active-border, 1px solid currentColor);
   }
   .element-tile.clickable {

package/dist/element/Nucleus.svelte

@@ -64,7 +64,8 @@
     y={radius + (radius / 2) * Math.sin(Math.PI * -proton_frac)}
     {...text}
   >
-    {protons} {proton_label}
+    {protons}
+    {proton_label}
   </text>
 
   <text
@@ -72,7 +73,8 @@
     y={radius + (radius / 2) * Math.sin(Math.PI * neutron_frac)}
     {...text}
   >
-    {neutrons} {neutron_label}
+    {neutrons}
+    {neutron_label}
   </text>
 
   {#if symbol}

package/dist/element/data.d.ts

@@ -1,2 +1,3 @@
-import data from './data.json.gz';
-export default data;
+import type { ChemicalElement, ElementSymbol } from './types';
+export declare const element_by_symbol: ReadonlyMap<ElementSymbol, ChemicalElement>;
+export { default } from './data.json.gz';