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);

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

@@ -1,20 +1,18 @@
 <script lang="ts">
   import { solve } from '$lib/engine';
-  import { parseScientificNotation, type ScientificNotationParts } from '$lib/utils/formatScientific';
   import type { CalculatorDef } from '$lib/data/calculators';
 
   export let config: CalculatorDef;
 
   const numericSamples = [0.1, 0.5, 1, 2, 5, 10, 20, 50, 100];
 
-  type Row = { input: number; output: string; scientific?: ScientificNotationParts };
+  type Row = { input: number; output: string };
 
   const buildRow = (value: number): Row => {
     const formatted = solve(config, 1, value.toString(), '', '');
     return {
       input: value,
       output: formatted.val2 || '—',
-      scientific: formatted.val2 ? parseScientificNotation(formatted.val2) ?? undefined : undefined,
     };
   };
 
@@ -44,16 +42,7 @@
         <div class="chart-row">
           <p class="chart-statement">
             Converting {row.input} <span class="chart-unit">{inputLabel}</span> into <span class="chart-unit">{outputLabel}</span> equals
-            <span class="chart-output-value">
+            <span class="chart-output-value">{row.output}</span>
-              {#if row.scientific}
-                <span class="scientific-base">{row.scientific.base}</span>
-                <span class="scientific-suffix">
-                  ×10<sup>{row.scientific.exponent}</sup>
-                </span>
-              {:else}
-                {row.output}
-              {/if}
-            </span>
             <span class="chart-output-unit">{outputLabel}</span>.
           </p>
         </div>
@@ -105,22 +94,6 @@
     color: var(--text);
   }
 
-  .scientific-base {
-    margin-right: 0.15rem;
-  }
-
-  .scientific-suffix {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.15rem;
-    font-size: 0.85em;
-  }
-
-  .scientific-suffix sup {
-    font-size: 0.75em;
-    vertical-align: super;
-  }
-
   .chart-unit,
   .chart-output-unit {
     font-variant: petite-caps;