Add quick conversion table section

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 QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
 
   export let config: CalculatorDef;
 
@@ -112,6 +113,7 @@
       </span>
     {/if}
   </div>
+  <QuickConversionTable {config} />
 </div>
 
 <style>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { solve } from '$lib/engine';
+  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 };
+
+  const buildRow = (value: number): Row => {
+    const formatted = solve(config, 1, value.toString(), '', '');
+    return {
+      input: value,
+      output: formatted.val2 || '—'
+    };
+  };
+
+  let rows: Row[] = [];
+  let supportsTable = false;
+
+  $: supportsTable = ['standard', 'inverse'].includes(config.type);
+  $: rows = supportsTable
+    ? numericSamples.map(buildRow)
+    : [];
+</script>
+
+{#if supportsTable && rows.length}
+  <section class="quick-chart">
+    <h3>Quick conversion chart</h3>
+    <p class="chart-note">
+      {#if config.labels.in1 && config.labels.in2}
+        {config.labels.in1} → {config.labels.in2}
+      {/if}
+    </p>
+    <div class="chart-grid">
+      {#each rows as row}
+        <div class="chart-row">
+          <span class="chart-input">{row.input}</span>
+          <span class="chart-divider">→</span>
+          <span class="chart-output">{row.output} {config.labels.in2}</span>
+        </div>
+      {/each}
+    </div>
+  </section>
+{/if}
+
+<style>
+  .quick-chart {
+    margin: 1rem 2rem 2rem;
+    padding: 1rem 1.25rem;
+    border-radius: 12px;
+    background: var(--section-bg);
+    border: 1px solid var(--border);
+  }
+
+  .quick-chart h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .chart-note {
+    margin: 0 0 0.75rem;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+  }
+
+  .chart-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .chart-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35rem;
+    font-size: 0.95rem;
+  }
+
+  .chart-input {
+    font-weight: 600;
+  }
+
+  .chart-divider {
+    color: var(--text-muted);
+  }
+
+  .chart-output {
+    font-weight: 500;
+  }
+</style>