Add share link button

hdyc-svelte/src/lib/components/Calculator.svelte

@@ -3,6 +3,7 @@
   import type { CalculatorDef } from '$lib/data/calculators';
   import { page } from '$app/stores';
   import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
   import QuickDefinitionCard from '$lib/components/QuickDefinitionCard.svelte';
   import QuickConversionExample from '$lib/components/QuickConversionExample.svelte';
   import QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
@@ -15,6 +16,8 @@
   let val3 = '';
   let activeField: 1 | 2 | 3 = 1;
   let swapState: { originalField: 1 | 2; originalValue: string } | null = null;
+  let copyStatus: 'idle' | 'copied' | 'failed' = 'idle';
+  let statusTimeout: ReturnType<typeof setTimeout> | null = null;
 
   $: has3 = ['3col', '3col-mul'].includes(config.type) || !!config.labels.in3;
   $: isTextInput = ['base', 'text-bin', 'bin-text', 'dec-frac', 'dms-dd', 'dd-dms'].includes(config.type);
@@ -64,6 +67,43 @@
     swapState = null;
   }
 
+  function buildShareUrl() {
+    const params = new URLSearchParams();
+    if (val1.trim()) {
+      params.set('v1', val1);
+    }
+    if (val2.trim()) {
+      params.set('v2', val2);
+    }
+    if (val3.trim() && has3) {
+      params.set('v3', val3);
+    }
+
+    const shareUrl = new URL($page.url);
+    shareUrl.search = params.toString();
+    return shareUrl.toString();
+  }
+
+  async function copyLink() {
+    if (!browser) return;
+    const url = buildShareUrl();
+
+    try {
+      await navigator.clipboard.writeText(url);
+      copyStatus = 'copied';
+    } catch (error) {
+      console.error('Failed to copy link', error);
+      copyStatus = 'failed';
+    } finally {
+      if (statusTimeout) {
+        clearTimeout(statusTimeout);
+      }
+      statusTimeout = setTimeout(() => {
+        copyStatus = 'idle';
+      }, 2000);
+    }
+  }
+
   onMount(() => {
     const params = new URLSearchParams($page.url.search);
     if (params.has('v1')) { val1 = params.get('v1')!; handleInput(1); }
@@ -145,6 +185,30 @@
     <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
       Clear
     </button>
+    <button
+      type="button"
+      class="link-btn"
+      on:click={copyLink}
+      aria-label="Copy calculator link"
+      disabled={!val1 && !val2 && !(val3 && has3)}
+    >
+      <svg viewBox="0 0 24 24" role="presentation" aria-hidden="true">
+        <path
+          d="M10 14a1 1 0 0 1-1 1H6a4 4 0 0 1 0-8h3a1 1 0 1 1 0 2H6a2 2 0 0 0 0 4h3a1 1 0 0 1 1 1zm4-2a1 1 0 0 1 1-1h3a2 2 0 0 0 0-4h-3a1 1 0 1 1 0-2h3a4 4 0 0 1 0 8h-3a1 1 0 0 1-1-1zm-1.293 2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4zM12 16l-4-4 4-4"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      Link
+      {#if copyStatus === 'copied'}
+        <span class="status-badge">Copied</span>
+      {:else if copyStatus === 'failed'}
+        <span class="status-badge">Failed</span>
+      {/if}
+    </button>
     {#if config.factor && config.type === 'standard'}
       <span class="formula-hint">
         1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}
@@ -303,6 +367,40 @@
     outline: none;
     box-shadow: 0 0 0 3px var(--accent-glow);
   }
+  .link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--section-bg);
+    color: var(--text);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s;
+  }
+  .link-btn svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .link-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .link-btn:not(:disabled):hover {
+    border-color: var(--accent);
+    background: var(--surface-hover);
+  }
+  .status-badge {
+    font-size: 0.7rem;
+    background: var(--accent);
+    color: #fff;
+    border-radius: 999px;
+    padding: 0.05rem 0.55rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
   .formula-hint {
     font-size: 0.78rem;
     color: var(--text-muted);