From af5f10a4ec06108c5d8a190fc6acba3554295a5f Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Mon, 16 Mar 2026 22:21:22 -0400
Subject: [PATCH] Fix: shift+click preserves input value, Ctrl+click adopts
 value, stable highlight layout

- shift+click now only sets fromUnitId; inputValue is unchanged so all outputs
  recalculate correctly from the original user input
- Ctrl+click is a new gesture that sets both fromUnitId and inputValue to the
  tile's displayed converted value (the "pivot" action)
- highlighted-result block always renders with min-height:8rem so the page
  below it never jumps when a highlight is added or cleared
- hotkey hint updated to document all three click gestures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app.css                            |  1 +
 src/components/ConversionResult.svelte | 11 ++++++++---
 src/components/ConverterCard.svelte    |  8 ++++++--
 src/routes/+page.svelte                | 18 ++++++++++++------
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index d606852..d47b861 100644
--- a/src/app.css
+++ b/src/app.css
@@ -97,6 +97,7 @@
   align-items: center;
   gap: 0.4rem;
   position: relative;
+  min-height: 8rem;
 }
 
 .highlighted-value {
diff --git a/src/components/ConversionResult.svelte b/src/components/ConversionResult.svelte
index d45afeb..5ff341e 100644
--- a/src/components/ConversionResult.svelte
+++ b/src/components/ConversionResult.svelte
@@ -14,7 +14,8 @@
     highlighted,
     isInputUnit = false,
     onclick,
-    onshiftclick
+    onshiftclick,
+    onctrlclick
   }: {
     value: Big;
     unit: Unit;
@@ -22,14 +23,18 @@
     isInputUnit?: boolean;
     onclick: () => void;
     onshiftclick: () => void;
+    onctrlclick: () => void;
   } = $props();
 
   // Compute once per reactive update; shared between aria-label and display span.
   let formattedValue = $derived(formatBig(value));
 
   function handleClick(e: MouseEvent) {
-    if (e.shiftKey) {
-      // Shift+click promotes this tile to the from-unit.
+    if (e.ctrlKey) {
+      // Ctrl+click adopts this tile's value as the new input value and promotes it to from-unit.
+      onctrlclick();
+    } else if (e.shiftKey) {
+      // Shift+click promotes this tile to the from-unit (inputValue unchanged).
       // Guard: if it already IS the from-unit, the action would be a no-op.
       if (!isInputUnit) onshiftclick();
     } else {
diff --git a/src/components/ConverterCard.svelte b/src/components/ConverterCard.svelte
index 93ddfbb..5e0a255 100644
--- a/src/components/ConverterCard.svelte
+++ b/src/components/ConverterCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Unit, ResultItem } from '$lib/types';
+  import type { Big } from 'big.js';
   import { MIN_COLUMN_WIDTH, GRID_GAP } from '$lib/config';
   import UnitInput from './UnitInput.svelte';
   import UnitDropdown from './UnitDropdown.svelte';
@@ -19,7 +20,8 @@
     oninputchange,
     onunitchange,
     onhighlight,
-    onsetinput
+    onsetinput,
+    onctrlclick
   }: {
     units: Unit[];
     inputValue: number;
@@ -30,6 +32,7 @@
     onunitchange: (id: string) => void;
     onhighlight: (id: string) => void;
     onsetinput: (id: string) => void;
+    onctrlclick: (id: string, value: Big) => void;
   } = $props();
 
   const gridStyle = `--min-col-width: ${MIN_COLUMN_WIDTH}; --grid-gap: ${GRID_GAP};`;
@@ -50,11 +53,12 @@
         isInputUnit={item.unit.id === fromUnitId}
         onclick={() => onhighlight(item.unit.id)}
         onshiftclick={() => onsetinput(item.unit.id)}
+        onctrlclick={() => onctrlclick(item.unit.id, item.convertedValue)}
       />
     {/each}
   </div>
 
   <p class="hotkey-hint">
-    <small>Click a result to highlight it · Shift+click to use it as input</small>
+    <small>Click to highlight · Shift+click to change input unit · Ctrl+click to adopt value as input</small>
   </p>
 </article>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c266491..9b1caf1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -89,9 +89,14 @@
 
   function handleSetInput(id: string) {
     // Shift+click: promote result unit to from-unit.
-    // Re-express the current value in terms of the new from-unit.
+    // inputValue is NOT changed — outputs recalculate from the same inputValue with the new fromUnitId.
     // highlightedUnitId is NOT cleared — the two states are independent.
-    const convertedValue = convertById(inputValue, fromUnitId, id, units);
+    fromUnitId = id;
+  }
+
+  function handleCtrlClick(id: string, convertedValue: import('big.js').Big) {
+    // Ctrl+click: adopt this tile's displayed value as the new inputValue and promote it to from-unit.
+    // This is the "pivot" gesture.
     inputValue = parseFloat(convertedValue.toFixed(FRACTIONAL_DIGITS));
     fromUnitId = id;
   }
@@ -101,8 +106,8 @@
   <title>Humor Units — Converter</title>
 </svelte:head>
 
-{#if highlightedResult !== null}
-  <div class="highlighted-result">
+<div class="highlighted-result" aria-live="polite">
+  {#if highlightedResult !== null}
     <button
       class="highlight-dismiss"
       aria-label="Remove highlight"
@@ -111,8 +116,8 @@
     <span class="highlighted-value">{formatBig(highlightedResult.convertedValue)}</span>
     <span class="highlighted-label">{highlightedResult.unit.labelPlural}</span>
     <span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
-  </div>
-{/if}
+  {/if}
+</div>
 
 <ConverterCard
   {units}
@@ -124,4 +129,5 @@
   onunitchange={handleUnitChange}
   onhighlight={handleHighlight}
   onsetinput={handleSetInput}
+  onctrlclick={handleCtrlClick}
 />