matterviz 0.3.5 → 0.3.7

package/dist/structure/StructureControls.svelte

@@ -206,9 +206,8 @@
   let available_vector_keys = $derived(
     structure ? get_structure_vector_keys(structure) : [],
   )
-  function is_key_visible(key: string): boolean {
-    return scene_props.vector_configs?.[key]?.visible !== false
-  }
+  const is_key_visible = (key: string): boolean =>
+    scene_props.vector_configs?.[key]?.visible !== false
 
   let any_vectors_visible = $derived(available_vector_keys.some(is_key_visible))
 
@@ -319,27 +318,21 @@
       Atoms
     </label>
     <label
-      {@attach tooltip({
-        content: SETTINGS_CONFIG.structure.show_image_atoms.description,
-      })}
+      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_image_atoms.description })}
       style="gap: 6pt"
     >
       <input type="checkbox" bind:checked={show_image_atoms} />
       Image Atoms
     </label>
     <label
-      {@attach tooltip({
-        content: SETTINGS_CONFIG.structure.show_site_labels.description,
-      })}
+      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_site_labels.description })}
       style="gap: 6pt"
     >
       <input type="checkbox" bind:checked={scene_props.show_site_labels} />
       Site Labels
     </label>
     <label
-      {@attach tooltip({
-        content: SETTINGS_CONFIG.structure.show_site_indices.description,
-      })}
+      {@attach tooltip({ content: SETTINGS_CONFIG.structure.show_site_indices.description })}
       style="gap: 6pt"
     >
       <input type="checkbox" bind:checked={scene_props.show_site_indices} />
@@ -365,7 +358,7 @@
             VECTOR_PALETTE[idx % VECTOR_PALETTE.length]}
             onchange={(evt) =>
             update_vector_config(key, {
-              color: (evt.target as HTMLInputElement).value,
+              color: evt.currentTarget.value,
             })}
             style="width: 22px; height: 22px; padding: 0; border: none; cursor: pointer"
           />
@@ -428,9 +421,7 @@
   >
     <label>
       <span
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.camera_projection.description,
-        })}
+        {@attach tooltip({ content: SETTINGS_CONFIG.structure.camera_projection.description })}
       >
         Projection
       </span>
@@ -843,27 +834,21 @@
         />
       </label>
       <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.vector_normalize.description,
-        })}
+        {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_normalize.description })}
         style="gap: 6pt"
       >
         <input type="checkbox" bind:checked={scene_props.vector_normalize} />
         Normalize
       </label>
       <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.vector_uniform_thickness.description,
-        })}
+        {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_uniform_thickness.description })}
         style="gap: 6pt"
       >
         <input type="checkbox" bind:checked={scene_props.vector_uniform_thickness} />
         Uniform Thickness
       </label>
       <label
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.vector_color_mode.description,
-        })}
+        {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_color_mode.description })}
       >
         Color Mode
         <select bind:value={scene_props.vector_color_mode}>
@@ -889,9 +874,7 @@
       {/if}
       {#if available_vector_keys.length > 1}
         <label
-          {@attach tooltip({
-            content: SETTINGS_CONFIG.structure.vector_origin_gap.description,
-          })}
+          {@attach tooltip({ content: SETTINGS_CONFIG.structure.vector_origin_gap.description })}
         >
           Origin Gap
           <input
@@ -911,15 +894,14 @@
         </label>
         {#each available_vector_keys as key (key)}
           {#if is_key_visible(key)}
-            {@const on_scale = (evt: Event) => {
-        const parsed = parseFloat((evt.target as HTMLInputElement).value)
+            {@const on_scale = (
+        evt: Event & { currentTarget: HTMLInputElement },
+      ) => {
+        const parsed = parseFloat(evt.currentTarget.value)
         update_vector_config(key, { scale: Number.isNaN(parsed) ? 1.0 : parsed })
       }}
             <label
-              {@attach tooltip({
-                content:
-                  `Scale multiplier for ${key} arrows (applied on top of global scale)`,
-              })}
+              {@attach tooltip({ content: `Scale multiplier for ${key} arrows (applied on top of global scale)` })}
             >
               {key} scale
               <input
@@ -981,10 +963,7 @@
       </label>
       <label>
         <span
-          {@attach tooltip({
-            content:
-              `Create supercells by repeating the unit cell. Examples: "2x2x2", "3x1x2", or "2"`,
-          })}
+          {@attach tooltip({ content: `Create supercells by repeating the unit cell. Examples: "2x2x2", "3x1x2", or "2"` })}
         >
           Supercell Scaling
         </span>
@@ -1092,7 +1071,7 @@
           type="color"
           value={background_color}
           oninput={(event) => {
-            background_color = (event.target as HTMLInputElement).value
+            background_color = event.currentTarget.value
           }}
         />
       </label>
@@ -1193,18 +1172,14 @@
       </label>
       <label
         style="gap: 6pt"
-        {@attach tooltip({
-          content: SETTINGS_CONFIG.structure.auto_bond_order.description,
-        })}
+        {@attach tooltip({ content: SETTINGS_CONFIG.structure.auto_bond_order.description })}
       >
         <input type="checkbox" bind:checked={scene_props.auto_bond_order} />
         Auto bond order (perceive double/triple/aromatic)
       </label>
       {#if scene_props.auto_bond_order}
         <label
-          {@attach tooltip({
-            content: SETTINGS_CONFIG.structure.aromatic_display.description,
-          })}
+          {@attach tooltip({ content: SETTINGS_CONFIG.structure.aromatic_display.description })}
         >
           Aromatic display <select bind:value={scene_props.aromatic_display}>
             {#each Object.entries(

package/dist/structure/StructureExportPane.svelte

@@ -2,6 +2,7 @@
   import type { AnyStructure } from './'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { export_canvas_as_png } from '../io/export'
+  import { sanitize_html } from '../sanitize'
   import * as exports from './export'
   import type { ComponentProps } from 'svelte'
   import { tooltip } from 'svelte-multiselect/attachments'
@@ -163,7 +164,7 @@
   <div class="export-buttons">
     {#each text_export_formats as { label, format, hint } (format)}
       <div style="display: flex; align-items: center; gap: 4pt">
-        <span {@attach tooltip({ content: hint })}>{label}</span>
+        <span {@attach tooltip({ allow_html: true, content: sanitize_html(hint) })}>{label}</span>
         <button
           type="button"
           onclick={() => export_structure(format)}

package/dist/structure/StructureInfoPane.svelte

@@ -137,7 +137,10 @@
     site_window_start = 0
   }
 
-  function handle_site_keydown(event: KeyboardEvent, card: SiteCard) {
+  function handle_site_keydown(
+    event: KeyboardEvent & { currentTarget: HTMLDivElement },
+    card: SiteCard,
+  ) {
     const plain_key = !event.altKey && !event.ctrlKey && !event.metaKey
     if ([`Enter`, ` `].includes(event.key)) {
       event.preventDefault()
@@ -151,20 +154,19 @@
     }
     if (![`ArrowDown`, `ArrowUp`].includes(event.key)) return
     event.preventDefault()
-    const current_card = event.currentTarget as HTMLDivElement | null
+    const current_card = event.currentTarget
     const sibling_cards = Array.from(
-      current_card?.parentElement?.querySelectorAll<HTMLDivElement>(`.site-card`) ?? [],
+      current_card.parentElement?.querySelectorAll<HTMLDivElement>(`.site-card`) ?? [],
     )
-    const current_idx = sibling_cards.indexOf(current_card as HTMLDivElement)
+    const current_idx = sibling_cards.indexOf(current_card)
     const next_idx = event.key === `ArrowDown`
       ? Math.min(current_idx + 1, sibling_cards.length - 1)
       : Math.max(current_idx - 1, 0)
     sibling_cards[next_idx]?.focus()
   }
 
-  function get_element_name(element: string): string {
-    return element_data?.find((el) => el.symbol === element)?.name || element
-  }
+  const get_element_name = (element: string): string =>
+    element_data?.find((element_record) => element_record.symbol === element)?.name || element
 
   function site_summary(card: SiteCard): string {
     return [
@@ -268,7 +270,7 @@
       const { operations } = sym_data
       let translations = 0, rotations = 0, roto_translations = 0
       for (const op of operations) {
-        const has_translation = op.translation.some((t) => t !== 0)
+        const has_translation = op.translation.some((offset) => offset !== 0)
         const is_identity = String(op.rotation) === `1,0,0,0,1,0,0,0,1`
         if (is_identity && has_translation) translations++
         else if (!has_translation) rotations++