matterviz 0.3.2 → 0.3.4

package/dist/periodic-table/PeriodicTableControls.svelte

@@ -1,12 +1,57 @@
-<script lang="ts">import { DEFAULT_CATEGORY_COLORS } from '../colors';
-import { colors, selected } from '../state.svelte';
-let { tile_gap = $bindable(`0.3cqw`), symbol_font_size = $bindable(40), number_font_size = $bindable(22), name_font_size = $bindable(12), value_font_size = $bindable(18), tooltip_font_size = $bindable(14), tooltip_bg_color = $bindable(`#000000`), tile_border_radius = $bindable(1), inner_transition_offset = $bindable(0.5), tile_font_color = $bindable(`#ffffff`), 
-// Additional Element Tile controls
-tile_transition_duration = $bindable(0.4), hover_border_width = $bindable(1), symbol_font_weight = $bindable(400), number_font_weight = $bindable(300), 
-// Additional Tooltip controls
-tooltip_border_radius = $bindable(6), tooltip_padding = $bindable(`4px 6px`), tooltip_line_height = $bindable(1.2), tooltip_text_align = $bindable(`center`), ...rest } = $props();
-// Default values for easy reset
-const defaults = {
+<script lang="ts">
+  import type { ElementCategory } from '../element'
+  import { DEFAULT_CATEGORY_COLORS } from '../colors'
+  import { colors, selected } from '../state.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    tile_gap = $bindable(`0.3cqw`),
+    symbol_font_size = $bindable(40),
+    number_font_size = $bindable(22),
+    name_font_size = $bindable(12),
+    value_font_size = $bindable(18),
+    tooltip_font_size = $bindable(14),
+    tooltip_bg_color = $bindable(`#000000`),
+    tile_border_radius = $bindable(1),
+    inner_transition_offset = $bindable(0.5),
+    tile_font_color = $bindable(`#ffffff`),
+    // Additional Element Tile controls
+    tile_transition_duration = $bindable(0.4),
+    hover_border_width = $bindable(1),
+    symbol_font_weight = $bindable(400),
+    number_font_weight = $bindable(300),
+    // Additional Tooltip controls
+    tooltip_border_radius = $bindable(6),
+    tooltip_padding = $bindable(`4px 6px`),
+    tooltip_line_height = $bindable(1.2),
+    tooltip_text_align = $bindable(`center`),
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    // Appearance control values
+    tile_gap?: string
+    symbol_font_size?: number
+    number_font_size?: number
+    name_font_size?: number
+    value_font_size?: number
+    tooltip_font_size?: number
+    tooltip_bg_color?: string
+    tile_border_radius?: number
+    inner_transition_offset?: number
+    tile_font_color?: string
+    // Additional Element Tile controls
+    tile_transition_duration?: number
+    hover_border_width?: number
+    symbol_font_weight?: number
+    number_font_weight?: number
+    // Additional Tooltip controls
+    tooltip_border_radius?: number
+    tooltip_padding?: string
+    tooltip_line_height?: number
+    tooltip_text_align?: string
+  } = $props()
+
+  // Default values for easy reset
+  const defaults = {
     tile_gap: `0.3cqw`,
     symbol_font_size: 40,
     number_font_size: 22,
@@ -25,134 +70,139 @@ const defaults = {
     tooltip_padding: `4px 6px`,
     tooltip_line_height: 1.2,
     tooltip_text_align: `center`,
-};
-// Apply CSS custom properties to document root
-$effect(() => {
+  }
+
+  // Apply CSS custom properties to document root
+  $effect(() => {
     if (typeof document !== `undefined`) {
-        const css_vars = {
-            '--ptable-gap': tile_gap,
-            '--elem-symbol-font-size': `${symbol_font_size}cqw`,
-            '--elem-number-font-size': `${number_font_size}cqw`,
-            '--elem-name-font-size': `${name_font_size}cqw`,
-            '--elem-value-font-size': `${value_font_size}cqw`,
-            '--tooltip-font-size': `${tooltip_font_size}px`,
-            '--tooltip-bg': tooltip_bg_color,
-            '--elem-tile-border-radius': `${tile_border_radius}pt`,
-            '--ptable-spacer-ratio': `${1 / inner_transition_offset}`,
-            '--elem-tile-font-color': tile_font_color,
-            '--elem-tile-transition-duration': `${tile_transition_duration}s`,
-            '--elem-tile-hover-border-width': `${hover_border_width}px`,
-            '--elem-symbol-font-weight': `${symbol_font_weight}`,
-            '--elem-number-font-weight': `${number_font_weight}`,
-            '--tooltip-border-radius': `${tooltip_border_radius}px`,
-            '--tooltip-padding': tooltip_padding,
-            '--tooltip-line-height': `${tooltip_line_height}`,
-            '--tooltip-text-align': tooltip_text_align,
-        };
-        for (const [prop, val] of Object.entries(css_vars)) {
-            document.documentElement.style.setProperty(prop, val);
-        }
+      const css_vars = {
+        '--ptable-gap': tile_gap,
+        '--elem-symbol-font-size': `${symbol_font_size}cqw`,
+        '--elem-number-font-size': `${number_font_size}cqw`,
+        '--elem-name-font-size': `${name_font_size}cqw`,
+        '--elem-value-font-size': `${value_font_size}cqw`,
+        '--tooltip-font-size': `${tooltip_font_size}px`,
+        '--tooltip-bg': tooltip_bg_color,
+        '--elem-tile-border-radius': `${tile_border_radius}pt`,
+        '--ptable-spacer-ratio': `${1 / inner_transition_offset}`,
+        '--elem-tile-font-color': tile_font_color,
+        '--elem-tile-transition-duration': `${tile_transition_duration}s`,
+        '--elem-tile-hover-border-width': `${hover_border_width}px`,
+        '--elem-symbol-font-weight': `${symbol_font_weight}`,
+        '--elem-number-font-weight': `${number_font_weight}`,
+        '--tooltip-border-radius': `${tooltip_border_radius}px`,
+        '--tooltip-padding': tooltip_padding,
+        '--tooltip-line-height': `${tooltip_line_height}`,
+        '--tooltip-text-align': tooltip_text_align,
+      }
+
+      for (const [prop, val] of Object.entries(css_vars)) {
+        document.documentElement.style.setProperty(prop, val)
+      }
     }
-});
-// Generic reset function using simple object key access
-function reset_property(prop) {
-    const default_value = defaults[prop];
+  })
+
+  // Generic reset function using simple object key access
+  function reset_property(prop: keyof typeof defaults): void {
+    const default_value = defaults[prop]
+
     // Use simple assignment based on property name
-    if (prop === `tile_gap`)
-        tile_gap = default_value;
-    else if (prop === `symbol_font_size`)
-        symbol_font_size = default_value;
-    else if (prop === `number_font_size`)
-        number_font_size = default_value;
-    else if (prop === `name_font_size`)
-        name_font_size = default_value;
-    else if (prop === `value_font_size`)
-        value_font_size = default_value;
-    else if (prop === `tooltip_font_size`)
-        tooltip_font_size = default_value;
-    else if (prop === `tooltip_bg_color`)
-        tooltip_bg_color = default_value;
-    else if (prop === `tile_border_radius`)
-        tile_border_radius = Number(default_value);
+    if (prop === `tile_gap`) tile_gap = default_value as string
+    else if (prop === `symbol_font_size`) symbol_font_size = default_value as number
+    else if (prop === `number_font_size`) number_font_size = default_value as number
+    else if (prop === `name_font_size`) name_font_size = default_value as number
+    else if (prop === `value_font_size`) value_font_size = default_value as number
+    else if (prop === `tooltip_font_size`) tooltip_font_size = default_value as number
+    else if (prop === `tooltip_bg_color`) tooltip_bg_color = default_value as string
+    else if (prop === `tile_border_radius`) tile_border_radius = Number(default_value)
     else if (prop === `inner_transition_offset`) {
-        inner_transition_offset = Number(default_value);
-    }
-    else if (prop === `tile_font_color`)
-        tile_font_color = String(default_value);
+      inner_transition_offset = Number(default_value)
+    } else if (prop === `tile_font_color`) tile_font_color = String(default_value)
     else if (prop === `tile_transition_duration`) {
-        tile_transition_duration = Number(default_value);
-    }
-    else if (prop === `hover_border_width`) {
-        hover_border_width = Number(default_value);
-    }
-    else if (prop === `symbol_font_weight`) {
-        symbol_font_weight = Number(default_value);
-    }
-    else if (prop === `number_font_weight`) {
-        number_font_weight = Number(default_value);
-    }
-    else if (prop === `tooltip_border_radius`) {
-        tooltip_border_radius = Number(default_value);
-    }
-    else if (prop === `tooltip_padding`)
-        tooltip_padding = String(default_value);
+      tile_transition_duration = Number(default_value)
+    } else if (prop === `hover_border_width`) {
+      hover_border_width = Number(default_value)
+    } else if (prop === `symbol_font_weight`) {
+      symbol_font_weight = Number(default_value)
+    } else if (prop === `number_font_weight`) {
+      number_font_weight = Number(default_value)
+    } else if (prop === `tooltip_border_radius`) {
+      tooltip_border_radius = Number(default_value)
+    } else if (prop === `tooltip_padding`) tooltip_padding = String(default_value)
     else if (prop === `tooltip_line_height`) {
-        tooltip_line_height = Number(default_value);
-    }
-    else if (prop === `tooltip_text_align`) {
-        tooltip_text_align = String(default_value);
+      tooltip_line_height = Number(default_value)
+    } else if (prop === `tooltip_text_align`) {
+      tooltip_text_align = String(default_value)
     }
-}
-// Check if settings in each section have been modified from defaults
-let category_colors_modified = $derived(Object.keys(colors.category).some((key) => colors.category[key] !== DEFAULT_CATEGORY_COLORS[key]));
-let tiles_modified = $derived(tile_gap !== defaults.tile_gap ||
-    tile_border_radius !== defaults.tile_border_radius ||
-    inner_transition_offset !== defaults.inner_transition_offset ||
-    tile_transition_duration !== defaults.tile_transition_duration ||
-    hover_border_width !== defaults.hover_border_width ||
-    tile_font_color !== defaults.tile_font_color);
-let fonts_modified = $derived(symbol_font_size !== defaults.symbol_font_size ||
-    number_font_size !== defaults.number_font_size ||
-    name_font_size !== defaults.name_font_size ||
-    value_font_size !== defaults.value_font_size ||
-    symbol_font_weight !== defaults.symbol_font_weight ||
-    number_font_weight !== defaults.number_font_weight);
-let tooltip_modified = $derived(tooltip_font_size !== defaults.tooltip_font_size ||
-    tooltip_bg_color !== defaults.tooltip_bg_color ||
-    tooltip_border_radius !== defaults.tooltip_border_radius ||
-    tooltip_padding !== defaults.tooltip_padding ||
-    tooltip_line_height !== defaults.tooltip_line_height ||
-    tooltip_text_align !== defaults.tooltip_text_align);
-// Reset functions for each section
-function reset_category_colors() {
+  }
+
+  // Check if settings in each section have been modified from defaults
+  let category_colors_modified = $derived(
+    Object.keys(colors.category).some(
+      (key) => colors.category[key] !== DEFAULT_CATEGORY_COLORS[key],
+    ),
+  )
+
+  let tiles_modified = $derived(
+    tile_gap !== defaults.tile_gap ||
+      tile_border_radius !== defaults.tile_border_radius ||
+      inner_transition_offset !== defaults.inner_transition_offset ||
+      tile_transition_duration !== defaults.tile_transition_duration ||
+      hover_border_width !== defaults.hover_border_width ||
+      tile_font_color !== defaults.tile_font_color,
+  )
+
+  let fonts_modified = $derived(
+    symbol_font_size !== defaults.symbol_font_size ||
+      number_font_size !== defaults.number_font_size ||
+      name_font_size !== defaults.name_font_size ||
+      value_font_size !== defaults.value_font_size ||
+      symbol_font_weight !== defaults.symbol_font_weight ||
+      number_font_weight !== defaults.number_font_weight,
+  )
+
+  let tooltip_modified = $derived(
+    tooltip_font_size !== defaults.tooltip_font_size ||
+      tooltip_bg_color !== defaults.tooltip_bg_color ||
+      tooltip_border_radius !== defaults.tooltip_border_radius ||
+      tooltip_padding !== defaults.tooltip_padding ||
+      tooltip_line_height !== defaults.tooltip_line_height ||
+      tooltip_text_align !== defaults.tooltip_text_align,
+  )
+
+  // Reset functions for each section
+  function reset_category_colors(): void {
     for (const key of Object.keys(colors.category)) {
-        colors.category[key] = DEFAULT_CATEGORY_COLORS[key];
+      colors.category[key] = DEFAULT_CATEGORY_COLORS[key]
     }
-}
-function reset_tiles() {
-    tile_gap = defaults.tile_gap;
-    tile_border_radius = defaults.tile_border_radius;
-    inner_transition_offset = defaults.inner_transition_offset;
-    tile_transition_duration = defaults.tile_transition_duration;
-    hover_border_width = defaults.hover_border_width;
-    tile_font_color = defaults.tile_font_color;
-}
-function reset_fonts() {
-    symbol_font_size = defaults.symbol_font_size;
-    number_font_size = defaults.number_font_size;
-    name_font_size = defaults.name_font_size;
-    value_font_size = defaults.value_font_size;
-    symbol_font_weight = defaults.symbol_font_weight;
-    number_font_weight = defaults.number_font_weight;
-}
-function reset_tooltip() {
-    tooltip_font_size = defaults.tooltip_font_size;
-    tooltip_bg_color = defaults.tooltip_bg_color;
-    tooltip_border_radius = defaults.tooltip_border_radius;
-    tooltip_padding = defaults.tooltip_padding;
-    tooltip_line_height = defaults.tooltip_line_height;
-    tooltip_text_align = defaults.tooltip_text_align;
-}
+  }
+
+  function reset_tiles(): void {
+    tile_gap = defaults.tile_gap
+    tile_border_radius = defaults.tile_border_radius
+    inner_transition_offset = defaults.inner_transition_offset
+    tile_transition_duration = defaults.tile_transition_duration
+    hover_border_width = defaults.hover_border_width
+    tile_font_color = defaults.tile_font_color
+  }
+
+  function reset_fonts(): void {
+    symbol_font_size = defaults.symbol_font_size
+    number_font_size = defaults.number_font_size
+    name_font_size = defaults.name_font_size
+    value_font_size = defaults.value_font_size
+    symbol_font_weight = defaults.symbol_font_weight
+    number_font_weight = defaults.number_font_weight
+  }
+
+  function reset_tooltip(): void {
+    tooltip_font_size = defaults.tooltip_font_size
+    tooltip_bg_color = defaults.tooltip_bg_color
+    tooltip_border_radius = defaults.tooltip_border_radius
+    tooltip_padding = defaults.tooltip_padding
+    tooltip_line_height = defaults.tooltip_line_height
+    tooltip_text_align = defaults.tooltip_text_align
+  }
 </script>
 
 <div {...rest} class="controls-grid {rest.class ?? ``}">

package/dist/periodic-table/PropertySelect.svelte

@@ -1,10 +1,28 @@
-<script lang="ts">import { ELEM_HEATMAP_LABELS } from '../labels';
-import Select from 'svelte-multiselect';
-const options = Object.keys(ELEM_HEATMAP_LABELS);
-let { value = $bindable(null), empty = false, selected = empty ? [] : [options[1]], minSelect = 0, key = $bindable(null), ...rest } = $props();
-$effect.pre(() => {
-    key = ELEM_HEATMAP_LABELS[value ?? ``] ?? null;
-});
+<script lang="ts">
+  import type { ChemicalElement } from '../element'
+  import { ELEM_HEATMAP_LABELS } from '../labels'
+  import type { ComponentProps } from 'svelte'
+  import Select from 'svelte-multiselect'
+
+  const options = Object.keys(ELEM_HEATMAP_LABELS)
+  let {
+    value = $bindable(null),
+    empty = false,
+    selected = empty ? [] : [options[1]],
+    minSelect = 0,
+    key = $bindable(null),
+    ...rest
+  }: Omit<ComponentProps<typeof Select>, `options` | `key`> & {
+    value?: keyof ChemicalElement | null
+    empty?: boolean
+    selected?: string[]
+    minSelect?: number
+    key?: string | null
+  } = $props()
+
+  $effect.pre(() => {
+    key = ELEM_HEATMAP_LABELS[value ?? ``] ?? null
+  })
 </script>
 
 <Select

package/dist/periodic-table/TableInset.svelte

@@ -1,5 +1,10 @@
-<script lang="ts">let { as = `aside`, children, ...rest } = $props();
-export {};
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { as = `aside`, children, ...rest }:
+    & HTMLAttributes<HTMLElementTagNameMap[`aside`]>
+    & { as?: keyof HTMLElementTagNameMap; children?: Snippet } = $props()
 </script>
 
 <svelte:element this={as} {...rest} class="table-inset {rest.class ?? ``}">
@@ -15,6 +20,6 @@ export {};
     container-type: inline-size;
     container-name: table-inset;
     overflow: visible;
-    padding: var(--ptable-inset-padding, 0 0 5px 15px);
+    padding: var(--ptable-inset-padding);
   }
 </style>