Copyable.svelte

<script>
  import { onMount } from "svelte";

  let wrapper;
  let copied = false;

  async function copyText() {
    const text = wrapper.innerText.trim();
    try {
      await navigator.clipboard.writeText(text);
      copied = true;
      setTimeout(() => (copied = false), 1500);
    } catch (err) {
      console.error("No se pudo copiar:", err);
    }
  }
</script>

<div bind:this={wrapper} style="display: inline-flex; align-items: center; gap: 0.25rem;">
  <slot></slot>
  <button 
    on:click={copyText} 
    style="background: none; border: none; cursor: pointer; font-size: 1rem;"
    aria-label="Copiar al portapapeles"
  >
    📋
  </button>
  {#if copied}
    <span style="font-size: 0.8rem; color: green;">copiado!</span>
  {/if}
</div>