add CopyButton props

- global_selector: string | null = null
- global: boolean = false
- skip_selector: string | null = `button`
- as: string = `button`

refactor how every code fence gets a CopyButton using global prop
add prop as: string = 'ol' to FileDetails

src/lib/CopyButton.svelte

@@ -1,9 +1,32 @@
 <script lang="ts">
-  import { Icon } from '.'
+  import { afterNavigate } from '$app/navigation'
+  import { CopyButton, Icon } from '.'
 
-  export let content: string
+  export let content: string = ``
   export let style: string | null = null
   export let state: 'default' | 'success' | 'error' = `default`
+  export let global_selector: string | null = null
+  export let global: boolean = false
+  export let skip_selector: string | null = `button`
+  export let as: string = `button`
+
+  if (global || global_selector) {
+    afterNavigate(() => {
+      for (const node of document.querySelectorAll(global_selector ?? `pre > code`)) {
+        // skip if <pre> already contains a button (presumably for copy)
+        const pre = node.parentElement
+        if (!pre || (skip_selector && pre.querySelector(skip_selector))) continue
+
+        new CopyButton({
+          target: pre,
+          props: {
+            content: node.textContent ?? ``,
+            style: `position: absolute; top: 9pt; right: 9pt;`,
+          },
+        })
+      }
+    })
+  }
 
   const labels = {
     default: [`Copy`, `Copy`],
@@ -23,7 +46,11 @@
   }
 </script>
 
-<button on:click={copy} {style}>
-  <Icon icon={labels[state][1]} />
-  <span>{labels[state][0]}</span>
-</button>
+{#if !(global || global_selector)}
+  <svelte:element this={as} on:click={copy} {style}>
+    <slot>
+      <Icon icon={labels[state][1]} />
+      <span>{labels[state][0]}</span>
+    </slot>
+  </svelte:element>
+{/if}

src/lib/FileDetails.svelte

@@ -10,6 +10,7 @@
   }[] = []
   export let toggle_all_btn_title: string = `Toggle all`
   export let default_lang: string = `typescript`
+  export let as: string = `ol`
 
   function toggle_all() {
     const any_open = files.some((file) => file.node?.open)
@@ -27,22 +28,24 @@
   </button>
 {/if}
 
-<ol>
+<svelte:element this={as}>
   {#each files as file, idx (file.title)}
-    {@const { title, content, language = default_lang } = file}
+    {@const { title, content, language = default_lang } = file ?? {}}
     <li>
       <details bind:this={file.node}>
-        <summary>
-          <slot name="title" {idx} {...file}>
-            <code>{title.split(`/`).at(-1)}</code>
-          </slot>
-        </summary>
+        {#if title || $$slots.title}
+          <summary>
+            <slot name="title" {idx} {...file}>
+              <code>{title.split(`/`).at(-1)}</code>
+            </slot>
+          </summary>
+        {/if}
 
         <pre><code>{@html hljs.highlight(content, { language }).value}</code></pre>
       </details>
     </li>
   {/each}
-</ol>
+</svelte:element>
 
 <style>
   button {

src/routes/+layout.svelte

@@ -1,28 +1,12 @@
 <script lang="ts">
-  import { afterNavigate, goto } from '$app/navigation'
+  import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { CopyButton, GitHubCorner } from '$lib'
   import { repository } from '$root/package.json'
   import { demos } from '$site/stores'
   import { CmdPalette } from 'svelte-multiselect'
   import '../app.css'
 
-  afterNavigate(() => {
-    for (const node of document.querySelectorAll(`pre > code`)) {
-      // skip if <pre> already contains a button (presumably for copy)
-      const pre = node.parentElement
-      if (!pre || pre.querySelector(`button`)) continue
-
-      new CopyButton({
-        target: pre,
-        props: {
-          content: node.textContent ?? ``,
-          style: `position: absolute; top: 9pt; right: 9pt;`,
-        },
-      })
-    }
-  })
-
   const routes = Object.keys(import.meta.glob(`./**/+page.{svelte,md}`))
 
   const actions = routes.map((filename) => {
@@ -44,7 +28,7 @@
 </script>
 
 <GitHubCorner href={repository} />
-
+<CopyButton global />
 <CmdPalette {actions} placeholder="Go to..." />
 
 {#if !$page.error && $page.url.pathname !== `/`}