From e20fcbb3df1b9e3164fe62c8d7139f29cf98cd17 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Sat, 7 Mar 2026 06:33:59 +0000
Subject: [PATCH] Add conversion example card

---
 .../src/lib/components/Calculator.svelte      |  2 +
 .../components/QuickConversionExample.svelte  | 68 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 hdyc-svelte/src/lib/components/QuickConversionExample.svelte

diff --git a/hdyc-svelte/src/lib/components/Calculator.svelte b/hdyc-svelte/src/lib/components/Calculator.svelte
index c7bf54c..2ca4bce 100644
--- a/hdyc-svelte/src/lib/components/Calculator.svelte
+++ b/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 QuickConversionExample from '$lib/components/QuickConversionExample.svelte';
   import QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
 
   export let config: CalculatorDef;
@@ -114,6 +115,7 @@
     {/if}
   </div>
   <QuickConversionTable {config} />
+  <QuickConversionExample {config} />
 </div>
 
 <style>
diff --git a/hdyc-svelte/src/lib/components/QuickConversionExample.svelte b/hdyc-svelte/src/lib/components/QuickConversionExample.svelte
new file mode 100644
index 0000000..e2214d8
--- /dev/null
+++ b/hdyc-svelte/src/lib/components/QuickConversionExample.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { solve } from '$lib/engine';
+  import type { CalculatorDef } from '$lib/data/calculators';
+
+  export let config: CalculatorDef;
+
+  const exampleInput = 15;
+
+  const supportsExample =
+    config.type === 'standard' &&
+    typeof config.factor === 'number' &&
+    !!config.labels.in1 &&
+    !!config.labels.in2;
+
+  $: result = supportsExample
+    ? solve(config, 1, exampleInput.toString(), '', '')
+    : null;
+  $: reverseResult = supportsExample
+    ? solve(config, 2, '', '1', '')
+    : null;
+  $: offset = config.offset ?? 0;
+  $: formulaExpression = supportsExample
+    ? `${exampleInput} × ${config.factor}${offset ? ` + ${offset}` : ''}`
+    : '';
+</script>
+
+{#if supportsExample && result}
+  <section class="example-card">
+    <h3>How to convert {config.labels.in1} to {config.labels.in2}</h3>
+    <p class="example-note">
+      1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}
+    </p>
+    <p class="example-note">
+      1 {config.labels.in2} = {reverseResult?.val1 ?? '—'} {config.labels.in1}
+    </p>
+    <p class="example">
+      Example: convert {exampleInput} {config.labels.in1} to {config.labels.in2}: {formulaParts} = {result.val2} {config.labels.in2}
+    </p>
+  </section>
+{/if}
+
+<style>
+  .example-card {
+    margin: 0 2rem 2rem;
+    padding: 1.25rem 1.5rem;
+    border-radius: 12px;
+    background: var(--section-bg);
+    border: 1px solid var(--border);
+  }
+
+  .example-card h3 {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .example-note {
+    font-size: 0.85rem;
+    margin: 0 0 0.35rem;
+    color: var(--text-muted);
+  }
+
+  .example {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 500;
+  }
+</style>