matterviz 0.4.0 → 0.4.2

package/dist/structure/StructureControls.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AnyStructure } from './';
@@ -23,9 +24,10 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     volumetric_data?: VolumetricData[];
     isosurface_settings?: IsosurfaceSettings;
     active_volume_idx?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    polyhedra_rendered_elements?: string[];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "supercell_loading">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "background_color" | "background_opacity" | "show_image_atoms" | "lattice_props" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "supercell_loading">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;

package/dist/structure/StructureExportPane.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
+  import { export_canvas_as_png, observe_canvas_presence } from '../io/export'
   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 { StructTextFormat } from './export'
   import type { ComponentProps } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { Camera, Scene } from 'three'
 
   let {
@@ -25,42 +26,30 @@
     scene?: Scene
     camera?: Camera
     png_dpi?: number
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
   } = $props()
 
-  // Copy button feedback state
-  let copy_status = $state<
-    { json: boolean; xyz: boolean; cif: boolean; poscar: boolean }
-  >({ json: false, xyz: false, cif: false, poscar: false })
-
-  // Dynamic button text based on copy status
-  const copy_confirm = `✅`
-
   const text_export_formats = [
     {
       label: `JSON`,
       format: `json`,
-      hint:
-        `<a href="https://pymatgen.org" target="_blank">Pymatgen</a> JSON format - Python Materials Genomics structure serialization, widely used in computational materials science`,
+      hint: `<a href="https://pymatgen.org" target="_blank">Pymatgen</a> JSON format - Python Materials Genomics structure serialization, widely used in computational materials science`,
     },
     {
       label: `XYZ`,
       format: `xyz`,
-      hint:
-        `<a href="https://wiki.fysik.dtu.dk/ase" target="_blank">ASE</a> extended XYZ format - human-readable atomic coordinates used by the Atomic Simulation Environment`,
+      hint: `<a href="https://wiki.fysik.dtu.dk/ase" target="_blank">ASE</a> extended XYZ format - human-readable atomic coordinates used by the Atomic Simulation Environment`,
     },
     {
       label: `CIF`,
       format: `cif`,
-      hint:
-        `Crystallographic Information File - standard format from the <a href="https://iucr.org" target="_blank">IUCr</a> for crystal structure data exchange`,
+      hint: `Crystallographic Information File - standard format from the <a href="https://iucr.org" target="_blank">IUCr</a> for crystal structure data exchange`,
     },
     {
       label: `POSCAR`,
       format: `poscar`,
-      hint:
-        `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
+      hint: `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
     },
   ] as const
 
@@ -68,54 +57,23 @@
     {
       label: `GLB`,
       format: `glb`,
-      hint:
-        `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
+      hint: `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
     },
     {
       label: `OBJ`,
       format: `obj`,
-      hint:
-        `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
+      hint: `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
     },
   ] as const
 
-  // Helper function to export structure to file
-  function export_structure(format: `json` | `xyz` | `cif` | `poscar`) {
-    if (!structure) return
-    const export_fns = {
-      json: exports.export_structure_as_json,
-      xyz: exports.export_structure_as_xyz,
-      cif: exports.export_structure_as_cif,
-      poscar: exports.export_structure_as_poscar,
-    } as const
-    export_fns[format](structure)
-  }
-
-  // Handle clipboard copy with user feedback
-  async function handle_copy(format: `json` | `xyz` | `cif` | `poscar`) {
-    if (!structure) {
-      console.warn(`No structure available for copying`)
-      return
-    }
-
+  // Clipboard content for a text format; must not throw (ExportPane evaluates on click)
+  function get_text_content(format: StructTextFormat): string | null {
+    if (!structure) return null
     try {
-      let content: string
-      if (format === `json`) content = exports.structure_to_json_str(structure)
-      else if (format === `xyz`) content = exports.structure_to_xyz_str(structure)
-      else if (format === `cif`) content = exports.structure_to_cif_str(structure)
-      else if (format === `poscar`) {
-        content = exports.structure_to_poscar_str(structure)
-      } else throw new Error(`Invalid format: ${format}`)
-
-      await navigator.clipboard.writeText(content)
-
-      // Show temporary feedback in button text
-      copy_status[format] = true
-      setTimeout(() => {
-        copy_status[format] = false
-      }, 1000)
+      return exports.STRUCT_TEXT_FORMATS[format].to_str(structure)
     } catch (error) {
       console.error(`Failed to copy ${format.toUpperCase()} to clipboard`, error)
+      return null
     }
   }
 
@@ -124,7 +82,6 @@
       console.warn(`No scene available for ${format.toUpperCase()} export`)
       return
     }
-
     try {
       if (format === `glb`) exports.export_structure_as_glb(scene, structure)
       else if (format === `obj`) exports.export_structure_as_obj(scene, structure)
@@ -135,118 +92,55 @@
 
   let has_canvas = $state(false)
 
-  $effect(() => {
-    if (!wrapper) {
-      has_canvas = false
-      return
-    }
-    const check = () => (has_canvas = Boolean(wrapper.querySelector(`canvas`)))
-    check()
-    const observer = new MutationObserver(check)
-    observer.observe(wrapper, { childList: true, subtree: true })
-    return () => observer.disconnect()
-  })
+  $effect(() => observe_canvas_presence(wrapper, (val) => (has_canvas = val)))
+
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Export as text`,
+      items: text_export_formats.map(({ label, format, hint }) => ({
+        label,
+        hint,
+        disabled: !structure,
+        on_download: () => structure && exports.export_structure_as(format, structure),
+        copy_text: () => get_text_content(format),
+      })),
+    },
+    {
+      title: `Export as image`,
+      items: [
+        {
+          label: `PNG`,
+          disabled: !has_canvas,
+          show_dpi: true,
+          on_download: () => {
+            const canvas = wrapper?.querySelector(`canvas`)
+            if (canvas) export_canvas_as_png(canvas, structure, png_dpi, scene, camera)
+            else console.warn(`Canvas element not found for PNG export`)
+          },
+        },
+      ],
+    },
+    {
+      title: `Export as 3D model`,
+      items: model_3d_formats.map(({ label, format, hint }) => ({
+        label,
+        hint,
+        disabled: !scene,
+        on_download: () => handle_3d_export(format),
+      })),
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...pane_props, class: `export-pane ${pane_props?.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
+  {pane_props}
   toggle_props={{
     title: export_pane_open ? `` : `Export Structure`,
     ...toggle_props,
     class: `structure-export-toggle ${toggle_props?.class ?? ``}`,
   }}
   {...rest}
->
-  <h4 id="export-as-text">Export as text</h4>
-  <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({ allow_html: true, content: sanitize_html(hint) })}>{label}</span>
-        <button
-          type="button"
-          onclick={() => export_structure(format)}
-          title="Download {label}"
-        >
-          ⬇
-        </button>
-        <button
-          type="button"
-          onclick={() => handle_copy(format)}
-          title="Copy {label} to clipboard"
-        >
-          {copy_status[format] ? copy_confirm : `📋`}
-        </button>
-      </div>
-    {/each}
-  </div>
-
-  <h4 id="export-as-image">Export as image</h4>
-  <div class="export-buttons">
-    <label>
-      PNG
-      <button
-        type="button"
-        disabled={!has_canvas}
-        onclick={() => {
-          const canvas = wrapper?.querySelector(`canvas`) as HTMLCanvasElement
-          if (canvas) {
-            export_canvas_as_png(
-              canvas,
-              structure,
-              png_dpi,
-              scene,
-              camera,
-            )
-          } else console.warn(`Canvas element not found for PNG export`)
-        }}
-        title="PNG ({png_dpi} DPI)"
-      >
-        ⬇
-      </button>
-      &nbsp;(DPI: <input
-        type="number"
-        min={50}
-        max={500}
-        bind:value={png_dpi}
-        title="Export resolution in dots per inch"
-        style="margin: 0 0 0 2pt"
-      />)
-    </label>
-  </div>
-
-  <h4 id="export-as-3d-model">Export as 3D model</h4>
-  <div class="export-buttons">
-    {#each model_3d_formats as { label, format, hint } (format)}
-      <div style="display: flex; align-items: center; gap: 4pt">
-        <span {@attach tooltip({ content: hint })}>{label}</span>
-        <button
-          type="button"
-          onclick={() => handle_3d_export(format)}
-          disabled={!scene}
-          title="Download {label}"
-        >
-          ⬇
-        </button>
-      </div>
-    {/each}
-  </div>
-</DraggablePane>
-
-<style>
-  .export-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 9pt;
-    font-size: 0.95em;
-  }
-  .export-buttons button {
-    min-width: 1.9em;
-    height: 1.6em;
-    padding: 0 4pt;
-    margin: 0 0 0 4pt;
-    box-sizing: border-box;
-  }
-</style>
+/>

package/dist/structure/StructureExportPane.svelte.d.ts

@@ -1,6 +1,5 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { AnyStructure } from './';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
 import type { Camera, Scene } from 'three';
 type $$ComponentProps = {
     export_pane_open?: boolean;
@@ -9,9 +8,9 @@ type $$ComponentProps = {
     scene?: Scene;
     camera?: Camera;
     png_dpi?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
 };
-declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type StructureExportPane = ReturnType<typeof StructureExportPane>;
 export default StructureExportPane;

package/dist/structure/StructureInfoPane.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import { get_electro_neg_formula } from '../composition'
   import { element_data, type ElementSymbol } from '../element'
   import Icon from '../Icon.svelte'
   import { format_num } from '../labels'
   import type { InfoItem } from '../layout'
+  import type { Vec2 } from '../math'
   import CopyButton from '../overlays/CopyButton.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { sanitize_html } from '../sanitize'
@@ -14,7 +16,7 @@
   import type { MoyoDataset } from '@spglib/moyo-wasm'
   import type { ComponentProps } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { SvelteSet } from 'svelte/reactivity'
+  import { create_clipboard_feedback } from '../overlays'
 
   type SiteDetail = {
     label: string
@@ -39,8 +41,7 @@
     },
     {
       label: `Atom Selection`,
-      value:
-        `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
+      value: `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
     },
     {
       label: `Navigation`,
@@ -52,8 +53,7 @@
     },
     {
       label: `Colors`,
-      value:
-        `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
+      value: `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
     },
     {
       label: `Keyboard`,
@@ -75,37 +75,25 @@
   }: Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     structure: AnyStructure
     pane_open?: boolean
-    atom_count_thresholds?: [number, number] // if atom count is less than min_threshold, show sites, if atom count is greater than max_threshold, hide sites. in between, show sites behind a toggle button.
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    atom_count_thresholds?: Vec2 // if atom count is less than min_threshold, show sites, if atom count is greater than max_threshold, hide sites. in between, show sites behind a toggle button.
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
     highlighted_sites?: number[] // Sites highlighted from Wyckoff table hover
     hovered_site_idx?: number | null // Site hovered in this pane or in the 3D scene
     selected_sites?: number[] // Sites selected from Wyckoff table click
     sym_data?: MoyoDataset | null // Symmetry analysis data (bindable for external access)
   } = $props()
 
-  let copied_items = new SvelteSet<string>()
+  const { copied, copy } = create_clipboard_feedback()
   let sites_expanded = $state(false)
   let site_filter = $state(``)
   let site_window_start = $state(0)
   let site_cards_el = $state<HTMLDivElement>()
 
-  async function copy_to_clipboard(label: string, value: string, key: string) {
-    try {
-      await navigator.clipboard.writeText(`${label}: ${value}`)
-      copied_items.add(key)
-      setTimeout(() => copied_items.delete(key), 1000)
-    } catch (error) {
-      console.error(`Failed to copy to clipboard:`, error)
-    }
-  }
+  const copy_to_clipboard = (label: string, value: string, key: string): Promise<void> =>
+    copy(`${label}: ${value}`, key)
 
-  function copy_event(
-    event: MouseEvent,
-    label: string,
-    value: string,
-    key: string,
-  ) {
+  function copy_event(event: MouseEvent, label: string, value: string, key: string) {
     event.stopPropagation()
     copy_to_clipboard(label, value, key)
   }
@@ -126,9 +114,8 @@
         : [...selected_sites, site_idx]
       return
     }
-    selected_sites = selected_sites.length === 1 && selected_sites[0] === site_idx
-      ? []
-      : [site_idx]
+    selected_sites =
+      selected_sites.length === 1 && selected_sites[0] === site_idx ? [] : [site_idx]
   }
 
   function update_site_filter(event: Event): void {
@@ -159,9 +146,10 @@
       current_card.parentElement?.querySelectorAll<HTMLDivElement>(`.site-card`) ?? [],
     )
     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)
+    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()
   }
 
@@ -169,10 +157,9 @@
     element_data?.find((element_record) => element_record.symbol === element)?.name || element
 
   const site_summary = (card: SiteCard): string =>
-    [
-      card.element_name,
-      ...card.details.map(({ label, value }) => `${label}: ${value}`),
-    ].join(`; `)
+    [card.element_name, ...card.details.map(({ label, value }) => `${label}: ${value}`)].join(
+      `; `,
+    )
 
   function format_site_property(prop_key: string, prop_value: unknown): SiteDetail | null {
     if (prop_value == null) return null
@@ -185,14 +172,16 @@
     let tooltip: string | undefined
 
     if (
-      prop_key === `force` && Array.isArray(prop_value) &&
-      prop_value.length === 3 && prop_value.every((value) => typeof value === `number`)
+      prop_key === `force` &&
+      Array.isArray(prop_value) &&
+      prop_value.length === 3 &&
+      prop_value.every((value) => typeof value === `number`)
     ) {
       const force_values = prop_value as [number, number, number]
       const value = `${format_num(Math.hypot(...force_values), `.3~f`)} eV/Å`
-      tooltip = `Force vector: ${
-        force_values.map((force) => format_num(force, `.3~f`)).join(`, `)
-      } eV/Å`
+      tooltip = `Force vector: ${force_values
+        .map((force) => format_num(force, `.3~f`))
+        .join(`, `)} eV/Å`
       return { label: prop_key, value, key: prop_key, tooltip }
     }
     if (prop_key === `magmom` || prop_key.includes(`magnet`)) {
@@ -204,7 +193,7 @@
 
     const value = Array.isArray(prop_value)
       ? format_value_list(prop_value)
-      : format_numeric_value(prop_value) ?? String(prop_value)
+      : (format_numeric_value(prop_value) ?? String(prop_value))
     return { label: prop_key, value, key: prop_key }
   }
 
@@ -267,7 +256,9 @@
     // Symmetry Info
     if (`lattice` in structure && sym_data) {
       const { operations } = sym_data
-      let translations = 0, rotations = 0, roto_translations = 0
+      let translations = 0,
+        rotations = 0,
+        roto_translations = 0
       for (const op of operations) {
         const has_translation = op.translation.some((offset) => offset !== 0)
         const is_identity = String(op.rotation) === `1,0,0,0,1,0,0,0,1`
@@ -276,14 +267,15 @@
         else roto_translations++
       }
 
-      const international_symbol = (sym_data as MoyoDataset & {
-        international_short?: string
-      }).international_short
-      const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)
-        ?.replaceAll(
-          /\s+/g,
-          ``,
-        )
+      const international_symbol = (
+        sym_data as MoyoDataset & {
+          international_short?: string
+        }
+      ).international_short
+      const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)?.replaceAll(
+        /\s+/g,
+        ``,
+      )
       const space_group_value = space_group_symbol
         ? `${sym_data.number} (${space_group_symbol})`
         : String(sym_data.number)
@@ -292,8 +284,16 @@
         title: `Symmetry`,
         items: [
           { label: `Space Group`, value: space_group_value, key: `symmetry-space-group` },
-          { label: `Hall Number`, value: String(sym_data.hall_number), key: `symmetry-hall-number` },
-          { label: `Pearson Symbol`, value: sym_data.pearson_symbol, key: `symmetry-pearson-symbol` },
+          {
+            label: `Hall Number`,
+            value: String(sym_data.hall_number),
+            key: `symmetry-hall-number`,
+          },
+          {
+            label: `Pearson Symbol`,
+            value: sym_data.pearson_symbol,
+            key: `symmetry-pearson-symbol`,
+          },
           {
             label: `Symmetry Ops`,
             value: `${operations.length} (${translations} trans, ${rotations} rot, ${roto_translations} roto-trans)`,
@@ -345,9 +345,9 @@
         element_name,
         title,
         details,
-        search_text: `${title} ${element} ${element_name} ${
-          details.map(({ label, value }) => `${label} ${value}`).join(` `)
-        }`.toLowerCase(),
+        search_text: `${title} ${element} ${element_name} ${details
+          .map(({ label, value }) => `${label} ${value}`)
+          .join(` `)}`.toLowerCase(),
       }
     })
   })
@@ -380,8 +380,7 @@
     if (!pane_open || selected_site_idx === undefined) return
     const visible_idx = visible_site_cards.findIndex(({ idx }) => idx === selected_site_idx)
     if (visible_idx === -1) return
-    const selected_window_start = Math.floor(visible_idx / SITE_WINDOW_SIZE) *
-      SITE_WINDOW_SIZE
+    const selected_window_start = Math.floor(visible_idx / SITE_WINDOW_SIZE) * SITE_WINDOW_SIZE
     if (selected_window_start !== site_window_start) {
       site_window_start = selected_window_start
       return
@@ -432,7 +431,7 @@
         >
           <span>{@html sanitize_html(label)}</span>
           <span title={tooltip}>{@html sanitize_html(value)}</span>
-          {#if key && copied_items.has(key)}
+          {#if key && copied.has(key)}
             <Icon
               icon="Check"
               style="color: var(--success-color, #10b981); width: 12px; height: 12px"
@@ -445,8 +444,8 @@
       {#if section.title === `Symmetry` && wyckoff_positions.length > 0}
         <WyckoffTable
           {wyckoff_positions}
-          on_hover={(site_indices) => highlighted_sites = site_indices ?? []}
-          on_click={(site_indices) => selected_sites = site_indices ?? []}
+          on_hover={(site_indices) => (highlighted_sites = site_indices ?? [])}
+          on_click={(site_indices) => (selected_sites = site_indices ?? [])}
           style="width: 100%; margin-top: 0.5em; font-size: 0.8em"
         />
       {/if}
@@ -470,7 +469,9 @@
         {/if}
       </div>
       {#if sites_hidden_by_threshold}
-        <p class="sites-note">Site list hidden for this {structure.sites.length}-site structure.</p>
+        <p class="sites-note">
+          Site list hidden for this {structure.sites.length}-site structure.
+        </p>
       {:else if site_cards.length > 0}
         <input
           class="site-filter"
@@ -489,19 +490,21 @@
                 type="button"
                 disabled={site_window_start === 0}
                 onclick={() =>
-                  site_window_start = Math.max(0, site_window_start - SITE_WINDOW_SIZE)}
+                  (site_window_start = Math.max(0, site_window_start - SITE_WINDOW_SIZE))}
               >
                 Previous
               </button>
-              <span>{site_window_start + 1}-{site_window_end} of {visible_site_cards.length}</span>
+              <span
+                >{site_window_start + 1}-{site_window_end} of {visible_site_cards.length}</span
+              >
               <button
                 type="button"
                 disabled={site_window_end >= visible_site_cards.length}
                 onclick={() =>
-                  site_window_start = Math.min(
+                  (site_window_start = Math.min(
                     Math.max(0, visible_site_cards.length - SITE_WINDOW_SIZE),
                     site_window_start + SITE_WINDOW_SIZE,
-                  )}
+                  ))}
               >
                 Next
               </button>
@@ -509,8 +512,8 @@
           {/if}
           <div class="site-cards" bind:this={site_cards_el}>
             {#each rendered_site_cards as card (card.idx)}
-              {@const is_highlighted = highlighted_sites.includes(card.idx) ||
-                hovered_site_idx === card.idx}
+              {@const is_highlighted =
+                highlighted_sites.includes(card.idx) || hovered_site_idx === card.idx}
               {@const is_selected = selected_sites.includes(card.idx)}
               <div
                 class="site-card"
@@ -537,9 +540,14 @@
                   <CopyButton
                     label="Copy {card.title}"
                     title="Copy {card.title}"
-                    copied={copied_items.has(`site-${card.idx}-summary`)}
+                    copied={copied.has(`site-${card.idx}-summary`)}
                     onclick={(event) =>
-                      copy_event(event, card.title, site_summary(card), `site-${card.idx}-summary`)}
+                      copy_event(
+                        event,
+                        card.title,
+                        site_summary(card),
+                        `site-${card.idx}-summary`,
+                      )}
                   />
                 </div>
                 <div class="site-card-details">
@@ -550,7 +558,7 @@
                       <CopyButton
                         label="Copy {card.title} {detail.label}"
                         title="Copy {detail.label}"
-                        copied={copied_items.has(`site-${card.idx}-${detail.key}`)}
+                        copied={copied.has(`site-${card.idx}-${detail.key}`)}
                         onclick={(event) =>
                           copy_event(
                             event,