Lots of work on upgrading to Tailwind CSS 4. Still more to go. Need to fix Modals everywhere.

src/lib/e_app_clipboard.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+
+interface Props {
+    log_lvl?: number;
+    value: any;
+    success: boolean;
+    btn_text: string;
+    btn_title?: string;
+    btn_class?: string;
+}
+
+let {
+    log_lvl = 1,
+    value = $bindable(''),
+    success = $bindable(false),
+    btn_text = 'Copy to Clipboard',
+    btn_title = 'Copy to Clipboard',
+    btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1'
+}: Props = $props();
+
+if (log_lvl) {
+    console.log(`Clipboard component initialized with value:`, value);
+}
+
+// Select your trigger element
+const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
+
+// Add a click event handler to the trigger
+// elemButton?.addEventListener('click', () => {
+//     // Call the Clipboard API
+//     navigator.clipboard
+//     // Use the `writeText` method write content to the clipboard
+//     .writeText(value)
+//     // Handle confirmation
+//     .then(() => {
+//         if (log_lvl) {
+//             console.log(`Clipboard write successful: ${value}`);
+//         }
+//         success = true;
+//     });
+// });
+</script>
+
+
+<button
+    data-button
+    onclick={() => {
+        // Call the Clipboard API
+        navigator.clipboard
+        // Use the `writeText` method write content to the clipboard
+        .writeText(value)
+        // Handle confirmation
+        .then(() => {
+            if (log_lvl) {
+                console.log(`Clipboard write successful: ${value}`);
+            }
+            success = true;
+        });
+    }}
+    class={btn_class}
+    title={btn_title}
+    >
+    {btn_text}
+</button>