Improve layout/behavior and accessibility

hdyc-svelte/src/app.css

@@ -18,6 +18,7 @@
   --accent-glow:  rgba(16, 185, 129, 0.15);
   --accent-gradient: linear-gradient(135deg, #10b981, #06b6d4);
   --header-bg: rgba(12, 15, 20, 0.85);
+  --section-bg: rgba(255, 255, 255, 0.04);
 
   /* ─── Typography ──────────────────────────────────────── */
   --font-body:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -42,6 +43,179 @@
   --accent-glow: rgba(16, 185, 129, 0.15);
   --accent-gradient: linear-gradient(135deg, #10b981, #06b6d4);
   --header-bg: rgba(255, 255, 255, 0.95);
+  --section-bg: rgba(15, 23, 42, 0.04);
+}
+
+/* ─── Palette overrides ─────────────────────────────────── */
+
+:root[data-palette='emerald'][data-theme='dark'] {
+  --bg: #0b1313;
+  --bg-elevated: rgba(4, 20, 15, 0.85);
+  --sidebar-bg: #08110f;
+  --card-bg: rgba(6, 19, 13, 0.75);
+  --input-bg: rgba(16, 185, 129, 0.08);
+  --hover-bg: rgba(16, 185, 129, 0.12);
+  --border: rgba(16, 185, 129, 0.35);
+  --text: #e9fcea;
+  --text-muted: #9fdac4;
+  --accent: #10b981;
+  --accent-dark: #059669;
+  --accent-glow: rgba(16, 185, 129, 0.25);
+  --accent-gradient: linear-gradient(135deg, #10b981, #0ea5e9);
+  --header-bg: rgba(12, 15, 20, 0.85);
+}
+
+:root[data-palette='emerald'][data-theme='light'] {
+  --bg: #f6fbf9;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #ffffff;
+  --input-bg: #ecf7f1;
+  --hover-bg: #d5f0df;
+  --border: rgba(4, 120, 87, 0.25);
+  --text: #0b2c1f;
+  --text-muted: #4a6b5c;
+  --accent: #047857;
+  --accent-dark: #065f46;
+  --accent-glow: rgba(4, 120, 87, 0.2);
+  --accent-gradient: linear-gradient(135deg, #047857, #0ea5e9);
+  --header-bg: rgba(255, 255, 255, 0.95);
+}
+
+:root[data-palette='sunset'][data-theme='dark'] {
+  --bg: #0f0505;
+  --bg-elevated: rgba(15, 5, 5, 0.85);
+  --sidebar-bg: #0c0404;
+  --card-bg: rgba(19, 6, 6, 0.7);
+  --input-bg: rgba(251, 113, 133, 0.08);
+  --hover-bg: rgba(251, 113, 133, 0.14);
+  --border: rgba(251, 113, 133, 0.35);
+  --text: #ffe7e0;
+  --text-muted: #f9a6aa;
+  --accent: #fb7185;
+  --accent-dark: #be123c;
+  --accent-glow: rgba(251, 113, 133, 0.25);
+  --accent-gradient: linear-gradient(135deg, #fb7185, #f97316);
+  --header-bg: rgba(12, 8, 6, 0.85);
+}
+
+:root[data-palette='sunset'][data-theme='light'] {
+  --bg: #fff8f2;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #fff4ef;
+  --input-bg: #ffe3d8;
+  --hover-bg: #ffd3bf;
+  --border: rgba(249, 115, 22, 0.25);
+  --text: #3d1b0b;
+  --text-muted: #7a4a37;
+  --accent: #f97316;
+  --accent-dark: #c2410c;
+  --accent-glow: rgba(249, 115, 22, 0.25);
+  --accent-gradient: linear-gradient(135deg, #f97316, #ec4899);
+  --header-bg: rgba(255, 255, 255, 0.96);
+}
+
+:root[data-palette='ocean'][data-theme='dark'] {
+  --bg: #030b12;
+  --bg-elevated: rgba(2, 9, 20, 0.85);
+  --sidebar-bg: #050c16;
+  --card-bg: rgba(3, 13, 26, 0.75);
+  --input-bg: rgba(14, 165, 233, 0.08);
+  --hover-bg: rgba(14, 165, 233, 0.15);
+  --border: rgba(14, 165, 233, 0.4);
+  --text: #e6f6ff;
+  --text-muted: #a1c4e8;
+  --accent: #38bdf8;
+  --accent-dark: #0369a1;
+  --accent-glow: rgba(14, 165, 233, 0.35);
+  --accent-gradient: linear-gradient(135deg, #38bdf8, #0f172a);
+  --header-bg: rgba(6, 15, 30, 0.85);
+}
+
+:root[data-palette='ocean'][data-theme='light'] {
+  --bg: #f4fbff;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #f0f7ff;
+  --input-bg: #dcefff;
+  --hover-bg: #cae8ff;
+  --border: rgba(14, 165, 233, 0.25);
+  --text: #06274e;
+  --text-muted: #4d6993;
+  --accent: #0ea5e9;
+  --accent-dark: #0369a1;
+  --accent-glow: rgba(14, 165, 233, 0.25);
+  --accent-gradient: linear-gradient(135deg, #0ea5e9, #4753ff);
+  --header-bg: rgba(255, 255, 255, 0.95);
+}
+
+:root[data-palette='orchid'][data-theme='dark'] {
+  --bg: #0c0215;
+  --bg-elevated: rgba(10, 3, 30, 0.85);
+  --sidebar-bg: #090118;
+  --card-bg: rgba(12, 2, 25, 0.75);
+  --input-bg: rgba(168, 85, 247, 0.08);
+  --hover-bg: rgba(168, 85, 247, 0.16);
+  --border: rgba(168, 85, 247, 0.35);
+  --text: #f5e6ff;
+  --text-muted: #c5a3e8;
+  --accent: #d946ef;
+  --accent-dark: #831843;
+  --accent-glow: rgba(217, 70, 239, 0.25);
+  --accent-gradient: linear-gradient(135deg, #d946ef, #fb7185);
+  --header-bg: rgba(13, 6, 23, 0.95);
+}
+
+:root[data-palette='orchid'][data-theme='light'] {
+  --bg: #fdf6ff;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #fdf2ff;
+  --input-bg: #f5e4ff;
+  --hover-bg: #e9d4ff;
+  --border: rgba(168, 85, 247, 0.25);
+  --text: #2c0a3a;
+  --text-muted: #6a5277;
+  --accent: #a855f7;
+  --accent-dark: #6d28d9;
+  --accent-glow: rgba(168, 85, 247, 0.25);
+  --accent-gradient: linear-gradient(135deg, #c084fc, #a855f7);
+  --header-bg: rgba(255, 255, 255, 0.97);
+}
+
+:root[data-palette='citrus'][data-theme='dark'] {
+  --bg: #1a1203;
+  --bg-elevated: rgba(26, 18, 3, 0.9);
+  --sidebar-bg: #130e02;
+  --card-bg: rgba(26, 18, 3, 0.75);
+  --input-bg: rgba(250, 204, 21, 0.08);
+  --hover-bg: rgba(250, 204, 21, 0.14);
+  --border: rgba(250, 204, 21, 0.35);
+  --text: #fff8e7;
+  --text-muted: #f6dea1;
+  --accent: #fbbf24;
+  --accent-dark: #b45309;
+  --accent-glow: rgba(250, 204, 21, 0.25);
+  --accent-gradient: linear-gradient(135deg, #fbbf24, #f97316);
+  --header-bg: rgba(15, 9, 2, 0.9);
+}
+
+:root[data-palette='citrus'][data-theme='light'] {
+  --bg: #fffdf5;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #fffaf0;
+  --input-bg: #fff4d8;
+  --hover-bg: #ffeec1;
+  --border: rgba(250, 204, 21, 0.25);
+  --text: #2b2509;
+  --text-muted: #6d5f2a;
+  --accent: #facc15;
+  --accent-dark: #b45309;
+  --accent-glow: rgba(250, 204, 21, 0.2);
+  --accent-gradient: linear-gradient(135deg, #facc15, #f97316);
+  --header-bg: rgba(255, 255, 255, 0.98);
 }
 
 *, *::before, *::after {

hdyc-svelte/src/app.html

@@ -1,8 +1,26 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark" data-palette="classic">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script>
+			(function () {
+				try {
+					const doc = document.documentElement;
+					const savedTheme = localStorage.getItem('theme');
+					const savedPalette = localStorage.getItem('palette');
+					const prefersDark =
+						typeof window.matchMedia === 'function' &&
+						window.matchMedia('(prefers-color-scheme: dark)').matches;
+					doc.dataset.theme = savedTheme || (prefersDark ? 'dark' : 'light');
+					if (savedPalette) {
+						doc.dataset.palette = savedPalette;
+					}
+				} catch (error) {
+					// Ignore errors if storage or matchMedia is unavailable
+				}
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

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

@@ -75,7 +75,13 @@
 
     {#if !has3}
       <div class="swap-col">
-        <button class="swap-btn" on:click={swap} title="Swap values">
+        <button
+          type="button"
+          class="swap-btn"
+          on:click={swap}
+          title="Swap values"
+          aria-label="Swap conversion direction"
+        >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M7 16l-4-4 4-4M17 8l4 4-4 4M3 12h18" />
           </svg>
@@ -111,7 +117,9 @@
   </div>
 
   <div class="calc-footer">
-    <button class="clear-btn" on:click={clear}>Clear</button>
+    <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
+      Clear
+    </button>
     {#if config.factor && config.type === 'standard'}
       <span class="formula-hint">
         1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}

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

@@ -48,16 +48,29 @@
       aria-label="Search conversions"
     />
     {#if query}
-      <button class="clear" on:click={() => { query = ''; selectedIndex = -1; }} aria-label="Clear search">✕</button>
+      <button
+        type="button"
+        class="clear"
+        on:click={() => {
+          query = '';
+          selectedIndex = -1;
+        }}
+        aria-label="Clear search"
+      >
+        ✕
+      </button>
     {/if}
   </div>
   {#if focused && results.length > 0}
-    <ul class="results">
+    <ul class="results" role="listbox" aria-label="Conversion suggestions">
       {#each results as result, i}
         <li>
           <button
+            type="button"
             class="result-item"
             class:selected={i === selectedIndex}
+            role="option"
+            aria-selected={i === selectedIndex}
             on:mousedown|preventDefault={() => navigateTo(result.slug)}
           >
             <span class="result-name">{result.name}</span>

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

@@ -69,20 +69,23 @@
     <h3>All Converters</h3>
     <button class="close-btn" on:click={() => (open = false)} aria-label="Close sidebar">✕</button>
   </div>
-  <nav>
+  <nav aria-label="Calculator categories">
     {#each categoryUnitGroups as group}
       <div class="cat-section">
         <button
+          type="button"
           class="cat-toggle"
           class:active={expandedCategory === group.key || currentPath.includes(`/category/${group.key}`)}
           on:click={() => toggle(group.key)}
+          aria-expanded={expandedCategory === group.key}
+          aria-controls={`cat-list-${group.key}`}
         >
           <span class="cat-icon">{group.meta.icon}</span>
           <span class="cat-label">{group.meta.label}</span>
           <span class="chevron" class:expanded={expandedCategory === group.key}>›</span>
         </button>
         {#if expandedCategory === group.key}
-          <ul class="cat-list">
+          <ul class="cat-list" id={`cat-list-${group.key}`}>
             {#each group.units as unit (unit.label)}
               <li class="unit-item">
                 <button
@@ -99,7 +102,11 @@
                   <ul class="unit-list">
                     {#each unit.conversions as calc}
                       <li>
-                        <a href="/{calc.slug}" class:current={currentPath === `/${calc.slug}`}>
+                        <a
+                          href="/{calc.slug}"
+                          class:current={currentPath === `/${calc.slug}`}
+                          aria-current={currentPath === `/${calc.slug}` ? 'page' : undefined}
+                        >
                           {calc.name}
                         </a>
                       </li>
@@ -109,7 +116,13 @@
               </li>
             {/each}
             <li>
-              <a href="/category/{group.key}" class="view-all">View all {group.meta.label} →</a>
+              <a
+                href="/category/{group.key}"
+                class="view-all"
+                aria-current={currentPath === `/category/${group.key}` ? 'page' : undefined}
+              >
+                View all {group.meta.label} →
+              </a>
             </li>
           </ul>
         {/if}

hdyc-svelte/src/lib/data/calculators.ts

@@ -66,11 +66,22 @@ export const calculators: CalculatorDef[] = [
   {"slug": "becquerel-to-curie", "name": "Becquerel to Curie", "category": "radiation", "type": "standard", "labels": {"in1": "Becquerel", "in2": "Curie"}, "factor": 2.7027027e-11, "hidden": true},
   {"slug": "becquerel-to-rutherford", "name": "Becquerel to Rutherford", "category": "radiation", "type": "standard", "labels": {"in1": "Becquerel", "in2": "Rutherford"}, "factor": 1e-06, "hidden": true},
   {"slug": "bits-to-bytes", "name": "Bits to Bytes", "category": "data", "type": "standard", "labels": {"in1": "Bits", "in2": "Bytes"}, "factor": 0.1},
+  {"slug": "words-16-bit-to-bits", "name": "Words (16-bit) to Bits", "category": "data", "type": "standard", "teaser": "Convert 16-bit words into raw bits for archive calculations.", "labels": {"in1": "Words (16-bit)", "in2": "Bits"}, "factor": 16.0},
+  {"slug": "words-16-bit-to-bytes", "name": "Words (16-bit) to Bytes", "category": "data", "type": "standard", "teaser": "Express a 16-bit word as a pair of bytes.", "labels": {"in1": "Words (16-bit)", "in2": "Bytes"}, "factor": 2.0},
+  {"slug": "words-32-bit-to-bits", "name": "Words (32-bit) to Bits", "category": "data", "type": "standard", "teaser": "Convert 32-bit words into bits for framing larger registers.", "labels": {"in1": "Words (32-bit)", "in2": "Bits"}, "factor": 32.0},
+  {"slug": "words-32-bit-to-bytes", "name": "Words (32-bit) to Bytes", "category": "data", "type": "standard", "teaser": "Express a 32-bit word as four bytes.", "labels": {"in1": "Words (32-bit)", "in2": "Bytes"}, "factor": 4.0},
+  {"slug": "bits-to-words-16-bit", "name": "Bits to Words (16-bit)", "category": "data", "type": "standard", "teaser": "Show how many 16-bit words fit into a given bit count.", "labels": {"in1": "Bits", "in2": "Words (16-bit)"}, "factor": 0.0625},
+  {"slug": "bits-to-words-32-bit", "name": "Bits to Words (32-bit)", "category": "data", "type": "standard", "teaser": "Show how many 32-bit words fit into a given bit count.", "labels": {"in1": "Bits", "in2": "Words (32-bit)"}, "factor": 0.03125},
+  {"slug": "bytes-to-words-16-bit", "name": "Bytes to Words (16-bit)", "category": "data", "type": "standard", "teaser": "Convert byte counts into 16-bit words for legacy units.", "labels": {"in1": "Bytes", "in2": "Words (16-bit)"}, "factor": 0.5},
+  {"slug": "bytes-to-words-32-bit", "name": "Bytes to Words (32-bit)", "category": "data", "type": "standard", "teaser": "Convert byte counts into 32-bit words for modern registers.", "labels": {"in1": "Bytes", "in2": "Words (32-bit)"}, "factor": 0.25},
   {"slug": "btu-to-kilojoules", "name": "BTU to Kilojoules", "category": "energy", "type": "standard", "labels": {"in1": "BTU", "in2": "Kilojoules"}, "factor": 1.05505585},
   {"slug": "btuhour-to-watts", "name": "BTU/hour to Watts", "category": "energy", "type": "standard", "labels": {"in1": "BTU/hour", "in2": "Watts"}, "factor": 0.293071},
   {"slug": "calories-to-joules", "name": "Calories to Joules", "category": "energy", "type": "standard", "labels": {"in1": "Calories", "in2": "Joules"}, "factor": 4.184},
   {"slug": "calories-to-kilojoules", "name": "Calories to Kilojoules", "category": "energy", "type": "standard", "labels": {"in1": "Calories", "in2": "Kilojoules"}, "factor": 4.184},
+  {"slug": "abamperes-to-amperes", "name": "Abamperes to Amperes", "category": "electrical", "type": "standard", "teaser": "Convert ancient electromagnetic units into modern amperes.", "labels": {"in1": "Abamperes", "in2": "Amperes"}, "factor": 10.0},
+  {"slug": "abvolts-to-volts", "name": "Abvolts to Volts", "category": "electrical", "type": "standard", "teaser": "Translate CGS-style abvolts into SI volts.", "labels": {"in1": "Abvolts", "in2": "Volts"}, "factor": 1e-08, "hidden": true},
   {"slug": "ascii-to-binary", "name": "ASCII to Binary", "category": "number-systems", "type": "text-bin", "labels": {"in1": "ASCII", "in2": "Binary"}},
+  {"slug": "amperes-to-abamperes", "name": "Amperes to Abamperes", "category": "electrical", "type": "standard", "teaser": "Convert SI amperes into CGS abamperes quickly.", "labels": {"in1": "Amperes", "in2": "Abamperes"}, "factor": 0.1, "hidden": true},
   {"slug": "amps-to-volts", "name": "Amps to Volts", "category": "electrical", "type": "3col", "labels": {"in1": "Amps", "in2": "Volts", "in3": "Result"}},
   {"slug": "binary-to-ascii", "name": "Binary to ASCII", "category": "number-systems", "type": "bin-text", "labels": {"in1": "Binary", "in2": "ASCII"}, "hidden": true},
   {"slug": "binary-to-decimal", "name": "Binary to Decimal", "category": "number-systems", "type": "base", "labels": {"in1": "Binary", "in2": "Decimal"}, "fromBase": 2, "toBase": 10},
@@ -85,7 +96,9 @@ export const calculators: CalculatorDef[] = [
   {"slug": "centimeters-to-inches", "name": "Centimeters to Inches", "category": "length", "type": "standard", "labels": {"in1": "Centimeters", "in2": "Inches"}, "factor": 0.393700787},
   {"slug": "cfs-to-cms", "name": "CFS to CMS", "category": "other", "type": "standard", "labels": {"in1": "CFS", "in2": "CMS"}, "factor": 0.0283168466, "hidden": true},
   {"slug": "cms-to-cfs", "name": "CMS to CFS", "category": "other", "type": "standard", "labels": {"in1": "CMS", "in2": "CFS"}, "factor": 35.3146667},
+  {"slug": "ampere-hours-to-coulombs", "name": "Ampere-hours to Coulombs", "category": "time", "type": "standard", "teaser": "Convert battery capacity in ampere-hours into coulombs.", "labels": {"in1": "Ampere-hours", "in2": "Coulombs"}, "factor": 3600.0},
   {"slug": "coulomb-per-kilogram-to-roentgen", "name": "Coulomb per Kilogram to Roentgen", "category": "weight", "type": "standard", "labels": {"in1": "Coulomb per Kilogram", "in2": "Roentgen"}, "factor": 3875.96899},
+  {"slug": "coulombs-to-ampere-hours", "name": "Coulombs to Ampere-hours", "category": "time", "type": "standard", "teaser": "Express a charge in coulombs as ampere-hours.", "labels": {"in1": "Coulombs", "in2": "Ampere-hours"}, "factor": 0.0002777777777777778, "hidden": true},
   {"slug": "cups-to-milliliters", "name": "Cups to Milliliters", "category": "volume", "type": "standard", "labels": {"in1": "Cups", "in2": "Milliliters"}, "factor": 236.588237},
   {"slug": "curie-to-becquerel", "name": "Curie to Becquerel", "category": "radiation", "type": "standard", "labels": {"in1": "Curie", "in2": "Becquerel"}, "factor": 37000000000.0},
   {"slug": "daltons-to-amu", "name": "Daltons to AMU", "category": "weight", "type": "standard", "labels": {"in1": "Daltons", "in2": "AMU"}, "factor": 1.0},
@@ -166,6 +179,8 @@ export const calculators: CalculatorDef[] = [
   {"slug": "nautical-miles-to-kilometers", "name": "Nautical miles to Kilometers", "category": "length", "type": "standard", "labels": {"in1": "Nautical miles", "in2": "Kilometers"}, "factor": 1.852},
   {"slug": "newtons-to-dynes", "name": "Newtons to Dynes", "category": "force", "type": "standard", "labels": {"in1": "Newtons", "in2": "Dynes"}, "factor": 100000.0},
   {"slug": "newton-meters-to-kilogram-force-meters", "name": "Newton-meters to Kilogram-force Meters", "category": "force", "type": "standard", "teaser": "Convert a torque in newton-meters into kilogram-force meters for mechanical specs.", "labels": {"in1": "Newton-meters", "in2": "Kilogram-force Meters"}, "factor": 0.10197162129779283},
+  {"slug": "newton-meters-to-dyne-centimeters", "name": "Newton-meters to Dyne-centimeters", "category": "force", "type": "standard", "teaser": "Scale a newton-meter into dyne-centimeters for CGS torque gauges.", "labels": {"in1": "Newton-meters", "in2": "Dyne-centimeters"}, "factor": 10000000.0},
+  {"slug": "newton-meters-to-inch-pounds", "name": "Newton-meters to Inch-Pounds", "category": "force", "type": "standard", "teaser": "Express a newton-meter as inch-pounds to compare imperial torque specs.", "labels": {"in1": "Newton-meters", "in2": "Inch-Pounds"}, "factor": 8.850745767},
   {"slug": "newtons-to-kilogram-force", "name": "Newtons to Kilogram-force", "category": "force", "type": "standard", "teaser": "A force of one newton expressed as kilogram-force.", "labels": {"in1": "Newtons", "in2": "Kilogram-force"}, "factor": 0.10197162129779283},
   {"slug": "newtons-to-pound-force", "name": "Newtons to Pound-force", "category": "force", "type": "standard", "teaser": "Translate a newton reading into pounds of force.", "labels": {"in1": "Newtons", "in2": "Pound-force"}, "factor": 0.2248089431128759, "hidden": true},
   {"slug": "newtons-to-kilonewtons", "name": "Newtons to Kilonewtons", "category": "force", "type": "standard", "teaser": "Convert a newton force into kilonewtons for handy SI notation.", "labels": {"in1": "Newtons", "in2": "Kilonewtons"}, "factor": 0.001, "hidden": true},
@@ -198,6 +213,19 @@ export const calculators: CalculatorDef[] = [
   {"slug": "millimeters-to-microns", "name": "Millimeters to Microns", "category": "length", "type": "standard", "labels": {"in1": "Millimeters", "in2": "Microns"}, "factor": 1000.0},
   {"slug": "femtograms-to-attograms", "name": "Femtograms to Attograms", "category": "weight", "type": "standard", "labels": {"in1": "Femtograms", "in2": "Attograms"}, "factor": 1000.0},
   {"slug": "gigabytes-to-terabytes", "name": "Gigabytes to Terabytes", "category": "data", "type": "standard", "labels": {"in1": "Gigabytes", "in2": "Terabytes"}, "factor": 0.001, "hidden": true},
+  {"slug": "maxwell-to-weber", "name": "Maxwell to Weber", "category": "other", "type": "standard", "teaser": "Convert CGS magnetic flux (maxwell) into SI webers.", "labels": {"in1": "Maxwell", "in2": "Weber"}, "factor": 1e-08},
+  {"slug": "mbps-to-gbps", "name": "Mbps to Gbps", "category": "other", "type": "standard", "teaser": "Convert megabits per second into gigabits per second.", "labels": {"in1": "Mbps", "in2": "Gbps"}, "factor": 0.001, "hidden": true},
+  {"slug": "mbps-to-kbps", "name": "Mbps to Kbps", "category": "other", "type": "standard", "teaser": "Convert megabits per second into kilobits per second.", "labels": {"in1": "Mbps", "in2": "Kbps"}, "factor": 1000.0},
+  {"slug": "mbps-to-mb-per-second", "name": "Mbps to MB/s", "category": "other", "type": "standard", "teaser": "Convert megabits per second into megabytes per second.", "labels": {"in1": "Mbps", "in2": "MB/s"}, "factor": 0.125},
+  {"slug": "mebibytes-to-megabytes", "name": "Mebibytes to Megabytes", "category": "data", "type": "standard", "teaser": "Convert mebibytes into megabytes.", "labels": {"in1": "Mebibytes", "in2": "Megabytes"}, "factor": 1.048576},
+  {"slug": "megabits-to-gigabits", "name": "Megabits to Gigabits", "category": "data", "type": "standard", "teaser": "Convert megabits into gigabits.", "labels": {"in1": "Megabits", "in2": "Gigabits"}, "factor": 0.001, "hidden": true},
+  {"slug": "megabits-to-kilobits", "name": "Megabits to Kilobits", "category": "data", "type": "standard", "teaser": "Convert megabits into kilobits.", "labels": {"in1": "Megabits", "in2": "Kilobits"}, "factor": 1000.0},
+  {"slug": "megabytes-to-bytes", "name": "Megabytes to Bytes", "category": "data", "type": "standard", "teaser": "A download weighs 5 megabytes; how many bytes does that represent?", "labels": {"in1": "Megabytes", "in2": "Bytes"}, "factor": 1000000.0},
+  {"slug": "megabytes-to-kilobytes", "name": "Megabytes to Kilobytes", "category": "data", "type": "standard", "teaser": "A file is 3 megabytes; how many kilobytes is that?", "labels": {"in1": "Megabytes", "in2": "Kilobytes"}, "factor": 1000.0},
+  {"slug": "megabytes-to-mebibytes", "name": "Megabytes to Mebibytes", "category": "data", "type": "standard", "teaser": "Convert megabytes into mebibytes.", "labels": {"in1": "Megabytes", "in2": "Mebibytes"}, "factor": 0.95367431640625, "hidden": true},
+  {"slug": "megabytes-to-terabytes", "name": "Megabytes to Terabytes", "category": "data", "type": "standard", "teaser": "Convert megabytes into terabytes.", "labels": {"in1": "Megabytes", "in2": "Terabytes"}, "factor": 1e-06},
+  {"slug": "megahertz-to-gigahertz", "name": "Megahertz to Gigahertz", "category": "other", "type": "standard", "teaser": "A radio tuned to 100 MHz is what frequency in GHz?", "labels": {"in1": "Megahertz", "in2": "Gigahertz"}, "factor": 0.001, "hidden": true},
+  {"slug": "megahertz-to-kilohertz", "name": "Megahertz to Kilohertz", "category": "other", "type": "standard", "teaser": "Express megahertz as kilohertz.", "labels": {"in1": "Megahertz", "in2": "Kilohertz"}, "factor": 1000.0},
   {"slug": "joules-to-calories", "name": "Joules to Calories", "category": "energy", "type": "standard", "labels": {"in1": "Joules", "in2": "Calories"}, "factor": 0.239005736, "hidden": true},
   {"slug": "joules-to-ergs", "name": "Joules to Ergs", "category": "energy", "type": "standard", "labels": {"in1": "Joules", "in2": "Ergs"}, "factor": 10000000.0},
   {"slug": "kilocalories-to-kilojoules", "name": "Kilocalories to Kilojoules", "category": "energy", "type": "standard", "labels": {"in1": "Kilocalories", "in2": "Kilojoules"}, "factor": 4.184},
@@ -216,6 +244,13 @@ export const calculators: CalculatorDef[] = [
   {"slug": "liters-to-gallons", "name": "Liters to Gallons", "category": "volume", "type": "standard", "labels": {"in1": "Liters", "in2": "Gallons"}, "factor": 0.264172052, "hidden": true},
   {"slug": "liters-to-pints", "name": "Liters to Pints", "category": "volume", "type": "standard", "labels": {"in1": "Liters", "in2": "Pints"}, "factor": 2.11337642},
   {"slug": "liters-to-quarts", "name": "Liters to Quarts", "category": "volume", "type": "standard", "labels": {"in1": "Liters", "in2": "Quarts"}, "factor": 1.05668821},
+  {"slug": "liters-per-100-km-to-kilometers-per-liter", "name": "Liters per 100 km to Kilometers per liter", "category": "length", "type": "standard", "teaser": "Turn consumption from L/100 km into km per liter.", "labels": {"in1": "Liters per 100 km", "in2": "Kilometers per liter"}},
+  {"slug": "liters-per-100-km-to-miles-per-gallon", "name": "Liters per 100 km to Miles per gallon", "category": "length", "type": "inverse", "teaser": "Convert L/100 km into MPG.", "labels": {"in1": "Liters per 100 km", "in2": "Miles per gallon"}},
+  {"slug": "liters-per-minute-to-gallons-per-minute", "name": "Liters per minute to Gallons per minute", "category": "volume", "type": "standard", "labels": {"in1": "Liters per minute", "in2": "Gallons per minute"}, "factor": 0.264172052, "hidden": true},
+  {"slug": "liters-per-second-to-cms", "name": "Liters per second to CMS", "category": "volume", "type": "standard", "teaser": "Convert liters per second into cubic meters per second.", "labels": {"in1": "Liters per second", "in2": "CMS"}, "factor": 0.001},
+  {"slug": "liters-to-cubic-inches", "name": "Liters to Cubic inches", "category": "length", "type": "standard", "teaser": "Express liters as cubic inches.", "labels": {"in1": "Liters", "in2": "Cubic inches"}, "factor": 61.0237441},
+  {"slug": "liters-to-cubic-meters", "name": "Liters to Cubic Meters", "category": "length", "type": "standard", "teaser": "Express liters as cubic meters.", "labels": {"in1": "Liters", "in2": "Cubic Meters"}, "factor": 0.001, "hidden": true},
+  {"slug": "liters-to-fluid-ounces", "name": "Liters to Fluid Ounces", "category": "weight", "type": "standard", "teaser": "Express liters as US fluid ounces.", "labels": {"in1": "Liters", "in2": "Fluid Ounces"}, "factor": 33.8140227},
   {"slug": "candela-to-lumens", "name": "Candela to Lumens", "category": "light", "type": "standard", "labels": {"in1": "Candela", "in2": "Lumens"}, "factor": 12.5663706},
   {"slug": "decimal-to-binary", "name": "Decimal to Binary", "category": "number-systems", "type": "base", "labels": {"in1": "Decimal", "in2": "Binary"}, "toBase": 2, "fromBase": 10, "hidden": true},
   {"slug": "decimal-to-hex", "name": "Decimal to Hex", "category": "number-systems", "type": "base", "labels": {"in1": "Decimal", "in2": "Hex"}, "toBase": 16, "fromBase": 10},
@@ -224,9 +259,10 @@ export const calculators: CalculatorDef[] = [
   {"slug": "hex-to-decimal", "name": "Hex to Decimal", "category": "number-systems", "type": "standard", "labels": {"in1": "Hex", "in2": "Decimal"}, "hidden": true},
   {"slug": "watts-to-amps", "name": "Watts to amps", "category": "power", "type": "3col", "labels": {"in1": "Watts", "in2": "amps", "in3": "Volts"}, "hidden": true},
   {"slug": "volts-to-amps", "name": "Volts to amps", "category": "electrical", "type": "3col", "labels": {"in1": "Volts", "in2": "amps", "in3": "Result"}, "hidden": true},
+  {"slug": "volts-to-abvolts", "name": "Volts to Abvolts", "category": "electrical", "type": "standard", "teaser": "Convert SI volts into CGS abvolts.", "labels": {"in1": "Volts", "in2": "Abvolts"}, "factor": 100000000.0},
   {"slug": "siemens-to-ohms", "name": "Siemens to ohms", "category": "electrical", "type": "inverse", "labels": {"in1": "Siemens", "in2": "ohms"}, "hidden": true},
   {"slug": "ohms-to-siemens", "name": "Ohms to siemens", "category": "electrical", "type": "inverse", "labels": {"in1": "Ohms", "in2": "siemens"}},
-  {"slug": "miles-per-gallon-to-liters-per-100-km", "name": "Miles per gallon to liters per 100 km", "category": "length", "type": "inverse", "labels": {"in1": "Miles per gallon", "in2": "liters per 100 km"}},
+  {"slug": "miles-per-gallon-to-liters-per-100-km", "name": "Miles per gallon to liters per 100 km", "category": "length", "type": "inverse", "labels": {"in1": "Miles per gallon", "in2": "liters per 100 km"}, "hidden": true},
   {"slug": "lux-to-lumens", "name": "Lux to lumens", "category": "light", "type": "3col-mul", "labels": {"in1": "Lux", "in2": "lumens", "in3": "Area (sq m)"}, "hidden": true},
   {"slug": "lumens-to-lux", "name": "Lumens to lux", "category": "light", "type": "3col", "labels": {"in1": "Lumens", "in2": "lux", "in3": "Area (sq m)"}},
   {"slug": "grams-to-moles", "name": "Grams to moles", "category": "weight", "type": "3col", "labels": {"in1": "Grams", "in2": "moles", "in3": "Molar Mass"}},
@@ -308,6 +344,8 @@ export const calculators: CalculatorDef[] = [
   {"slug": "hectopascals-to-bar", "name": "Hectopascals to Bar", "category": "pressure", "type": "standard", "teaser": "Convert Hectopascals to Bar instantly.", "labels": {"in1": "Hectopascals", "in2": "Bar"}, "factor": 0.001},
   {"slug": "hectopascals-to-psi", "name": "Hectopascals to PSI", "category": "pressure", "type": "standard", "teaser": "Convert Hectopascals to PSI instantly.", "labels": {"in1": "Hectopascals", "in2": "PSI"}, "factor": 0.0145038},
   {"slug": "henries-to-millihenries", "name": "Henries to Millihenries", "category": "other", "type": "standard", "teaser": "Convert Henries to Millihenries instantly.", "labels": {"in1": "Henries", "in2": "Millihenries"}, "factor": 1000.0},
+  {"slug": "millihenries-to-henries", "name": "Millihenries to Henries", "category": "other", "type": "standard", "teaser": "Convert millihenries back into henries for coarse values.", "labels": {"in1": "Millihenries", "in2": "Henries"}, "factor": 0.001, "hidden": true},
+  {"slug": "millihenries-to-microhenries", "name": "Millihenries to Microhenries", "category": "other", "type": "standard", "teaser": "Translate millihenries into microhenries for fine tuning.", "labels": {"in1": "Millihenries", "in2": "Microhenries"}, "factor": 1000.0},
   {"slug": "hertz-to-kilohertz", "name": "Hertz to Kilohertz", "category": "other", "type": "standard", "teaser": "Convert Hertz to Kilohertz instantly.", "labels": {"in1": "Hertz", "in2": "Kilohertz"}, "factor": 0.001},
   {"slug": "hertz-to-rpm", "name": "Hertz to RPM", "category": "speed", "type": "standard", "teaser": "Convert Hertz to RPM instantly.", "labels": {"in1": "Hertz", "in2": "RPM"}, "factor": 60.0},
   {"slug": "hex-to-octal", "name": "Hex to Octal", "category": "number-systems", "type": "base", "teaser": "Convert Hex to Octal instantly.", "labels": {"in1": "Hex", "in2": "Octal"}, "fromBase": 16, "toBase": 8},
@@ -323,7 +361,7 @@ export const calculators: CalculatorDef[] = [
   {"slug": "imperial-gallons-to-us-gallons", "name": "Imperial gallons to US gallons", "category": "volume", "type": "standard", "teaser": "Convert Imperial gallons to US gallons instantly.", "labels": {"in1": "Imperial gallons", "in2": "US gallons"}, "factor": 1.20095},
   {"slug": "imperial-pints-to-us-pints", "name": "Imperial pints to US pints", "category": "volume", "type": "standard", "teaser": "Convert Imperial pints to US pints instantly.", "labels": {"in1": "Imperial pints", "in2": "US pints"}, "factor": 1.20095},
   {"slug": "inch-pounds-to-foot-pounds", "name": "Inch-Pounds to Foot-Pounds", "category": "force", "type": "standard", "teaser": "Convert Inch-Pounds to Foot-Pounds instantly.", "labels": {"in1": "Inch-Pounds", "in2": "Foot-Pounds"}, "factor": 0.0833333, "hidden": true},
-  {"slug": "inch-pounds-to-newton-meters", "name": "Inch-Pounds to Newton-Meters", "category": "force", "type": "standard", "teaser": "Convert Inch-Pounds to Newton-Meters instantly.", "labels": {"in1": "Inch-Pounds", "in2": "Newton-Meters"}, "factor": 0.112985},
+  {"slug": "inch-pounds-to-newton-meters", "name": "Inch-Pounds to Newton-Meters", "category": "force", "type": "standard", "teaser": "Convert Inch-Pounds to Newton-Meters instantly.", "labels": {"in1": "Inch-Pounds", "in2": "Newton-Meters"}, "factor": 0.112985, "hidden": true},
   {"slug": "inches-of-water-to-psi", "name": "Inches of Water to PSI", "category": "length", "type": "standard", "teaser": "Convert Inches of Water to PSI instantly.", "labels": {"in1": "Inches of Water", "in2": "PSI"}, "factor": 0.0360912},
   {"slug": "inches-per-second-to-cm-per-second", "name": "Inches per second to cm per second", "category": "length", "type": "standard", "teaser": "Convert Inches per second to Centimeters per second instantly.", "labels": {"in1": "Inches per second", "in2": "cm per second"}, "factor": 2.54},
   {"slug": "inches-to-meters", "name": "Inches to Meters", "category": "length", "type": "standard", "teaser": "Convert Inches to Meters instantly.", "labels": {"in1": "Inches", "in2": "Meters"}, "factor": 0.0254, "hidden": true},
@@ -422,7 +460,7 @@ export const calculators: CalculatorDef[] = [
   {"slug": "mg-per-liter-to-ppm", "name": "mg/L to PPM", "category": "other", "type": "standard", "teaser": "Treat milligrams per liter as parts per million for dilute solutions.", "labels": {"in1": "mg/L", "in2": "PPM"}},
   {"slug": "microfarads-to-farads", "name": "Microfarads to Farads", "category": "radiation", "type": "standard", "teaser": "Convert capacitance from microfarads to farads.", "labels": {"in1": "Microfarads", "in2": "Farads"}, "factor": 1e-06, "hidden": true},
   {"slug": "microfarads-to-picofarads", "name": "Microfarads to Picofarads", "category": "radiation", "type": "standard", "teaser": "Convert microfarads to picofarads.", "labels": {"in1": "Microfarads", "in2": "Picofarads"}, "factor": 1000000.0},
-  {"slug": "microhenries-to-millihenries", "name": "Microhenries to Millihenries", "category": "other", "type": "standard", "teaser": "Convert inductance from microhenries to millihenries.", "labels": {"in1": "Microhenries", "in2": "Millihenries"}, "factor": 0.001},
+  {"slug": "microhenries-to-millihenries", "name": "Microhenries to Millihenries", "category": "other", "type": "standard", "teaser": "Convert inductance from microhenries to millihenries.", "labels": {"in1": "Microhenries", "in2": "Millihenries"}, "factor": 0.001, "hidden": true},
   {"slug": "microns-to-millimeters", "name": "Microns to Millimeters", "category": "length", "type": "standard", "teaser": "Convert microns (micrometers) to millimeters.", "labels": {"in1": "Microns", "in2": "Millimeters"}, "factor": 0.001, "hidden": true},
   {"slug": "microseconds-to-milliseconds", "name": "Microseconds to Milliseconds", "category": "time", "type": "standard", "teaser": "Convert time from microseconds to milliseconds.", "labels": {"in1": "Microseconds", "in2": "Milliseconds"}, "factor": 0.001},
   {"slug": "microseconds-to-nanoseconds", "name": "Microseconds to Nanoseconds", "category": "time", "type": "standard", "teaser": "Convert microseconds to nanoseconds.", "labels": {"in1": "Microseconds", "in2": "Nanoseconds"}, "factor": 1000.0},

hdyc-svelte/src/routes/+layout.svelte

@@ -32,23 +32,6 @@
     dark: PaletteTheme;
   };
 
-  const paletteVariableKeys: PaletteVar[] = [
-    'bg',
-    'bg-elevated',
-    'sidebar-bg',
-    'card-bg',
-    'input-bg',
-    'hover-bg',
-    'border',
-    'text',
-    'text-muted',
-    'accent',
-    'accent-dark',
-    'accent-glow',
-    'accent-gradient',
-    'header-bg',
-  ];
-
   const palettes: Palette[] = [
     {
       slug: 'classic',
@@ -272,21 +255,21 @@
   let theme: ThemeMode = 'dark';
   let selectedPaletteIndex = 0;
 
-  const updatePaletteStyles = (index: number, mode: ThemeMode) => {
+  const applyPalette = (index: number, persist = false) => {
+    const normalizedIndex = Math.max(0, Math.min(index, palettes.length - 1));
+    selectedPaletteIndex = normalizedIndex;
     if (!browser) return;
-    const palette = palettes[index];
-    const colors = palette[mode];
-    paletteVariableKeys.forEach(key => {
-      document.documentElement.style.setProperty(`--${key}`, colors[key]);
-    });
-    document.documentElement.dataset.palette = palette.slug;
+    const slug = palettes[normalizedIndex].slug;
+    document.documentElement.dataset.palette = slug;
+    if (persist) {
+      window.localStorage.setItem('palette', slug);
+    }
   };
 
   const updateTheme = (value: ThemeMode, persist = false) => {
     theme = value;
     if (!browser) return;
     document.documentElement.dataset.theme = value;
-    updatePaletteStyles(selectedPaletteIndex, value);
     if (persist) {
       window.localStorage.setItem('theme', value);
     }
@@ -298,10 +281,7 @@
   };
 
   const setPalette = (index: number) => {
-    selectedPaletteIndex = index;
-    if (!browser) return;
-    window.localStorage.setItem('palette', palettes[index].slug);
-    updatePaletteStyles(index, theme);
+    applyPalette(index, true);
   };
 
   onMount(() => {
@@ -310,10 +290,11 @@
     const savedTheme = window.localStorage.getItem('theme') as ThemeMode | null;
     const savedPalette = window.localStorage.getItem('palette');
     const paletteIndex = palettes.findIndex(palette => palette.slug === savedPalette);
-    selectedPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
+    const initialPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
+    applyPalette(initialPaletteIndex, Boolean(savedPalette));
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const initialTheme: ThemeMode = savedTheme ?? 'dark';
+    const initialTheme: ThemeMode = savedTheme ?? (mediaQuery.matches ? 'dark' : 'light');
     updateTheme(initialTheme, Boolean(savedTheme));
 
     const handlePreferenceChange = (event: MediaQueryListEvent) => {