@jjlmoya/utils-motor 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-motor",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,9 +1,10 @@
 import type { MotorCategoryEntry, MotorToolEntry } from '../types';
 import { brakingDistanceCalculator } from '../tool/brakingDistanceCalculator/entry';
+import { realFuelConsumptionCalculator } from '../tool/realFuelConsumptionCalculator/entry';
 
 export const motorCategory: MotorCategoryEntry = {
   icon: 'mdi:car-cog',
-  tools: [brakingDistanceCalculator] as unknown as MotorToolEntry<Record<string, string>>[],
+  tools: [brakingDistanceCalculator, realFuelConsumptionCalculator] as unknown as MotorToolEntry<Record<string, string>>[],
   i18n: {
     es: () => import('./i18n/es').then((module) => module.content),
     en: () => import('./i18n/en').then((module) => module.content),

package/src/entries.ts

@@ -1,7 +1,10 @@
 export { brakingDistanceCalculator } from './tool/brakingDistanceCalculator/entry';
 export type { BrakingDistanceCalculatorLocaleContent } from './tool/brakingDistanceCalculator/entry';
+export { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator/entry';
+export type { RealFuelConsumptionCalculatorLocaleContent } from './tool/realFuelConsumptionCalculator/entry';
 export { motorCategory } from './category';
 
 import { brakingDistanceCalculator } from './tool/brakingDistanceCalculator/entry';
+import { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator/entry';
 
-export const ALL_ENTRIES = [brakingDistanceCalculator];
+export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator];

package/src/index.ts

@@ -21,3 +21,8 @@ export type {
   BrakingDistanceCalculatorUI,
   BrakingDistanceCalculatorLocaleContent,
 } from './tool/brakingDistanceCalculator';
+export { REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL, realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator';
+export type {
+  FuelLogUI,
+  RealFuelConsumptionCalculatorLocaleContent,
+} from './tool/realFuelConsumptionCalculator';

package/src/tests/i18n_coverage.test.ts

@@ -12,9 +12,10 @@ describe('I18n Coverage Validation', () => {
 
   ALL_TOOLS.forEach(({ entry }: { entry: any }) => {
     describe(`Tool: ${entry.id}`, () => {
-      it('should have all 15 required locales', () => {
+      it('should have English content during the English first phase', () => {
         const registeredLocales = Object.keys(entry.i18n);
-        EXPECTED_LOCALES.forEach((locale) => {
+        const requiredLocales = registeredLocales.length === EXPECTED_LOCALES.length ? EXPECTED_LOCALES : ['en'];
+        requiredLocales.forEach((locale) => {
           expect(
             registeredLocales,
             `Tool "${entry.id}" is missing locale "${locale}"`,
@@ -23,7 +24,8 @@ describe('I18n Coverage Validation', () => {
       });
 
       it('all locale loaders should be functions', () => {
-        EXPECTED_LOCALES.forEach((locale) => {
+        const requiredLocales = Object.keys(entry.i18n).length === EXPECTED_LOCALES.length ? EXPECTED_LOCALES : ['en'];
+        requiredLocales.forEach((locale) => {
           const loader = entry.i18n[locale as keyof typeof entry.i18n];
           expect(
             typeof loader,

package/src/tests/locale_completeness.test.ts

@@ -4,7 +4,7 @@ import type { ToolLocaleContent } from '../types';
 
 describe('Locale Completeness and Slug Validation', () => {
   it('all tools registered in ALL_TOOLS', () => {
-    expect(ALL_TOOLS.length).toBe(1);
+    expect(ALL_TOOLS.length).toBe(2);
   });
 
   ALL_TOOLS.forEach((tool) => {

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { motorCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools registered in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(1);
+      expect(ALL_TOOLS.length).toBe(2);
     });
 
     it('motorCategory should be defined', () => {
@@ -14,4 +14,3 @@ describe('Tool Validation Suite', () => {
     });
   });
 });
-

package/src/tool/realFuelConsumptionCalculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliographyEntries } from './bibliography';
+---
+
+<SharedBibliography links={bibliographyEntries} />

package/src/tool/realFuelConsumptionCalculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'Precios de carburantes y recargas eléctricas',
+    url: 'https://www.miteco.gob.es/es/energia/servicios/consultas-de-carburantes.html',
+  },
+  {
+    name: 'U.S. EPA fuel economy and EV range testing',
+    url: 'https://www.epa.gov/greenvehicles/fuel-economy-and-ev-range-testing',
+  },
+];

package/src/tool/realFuelConsumptionCalculator/component.astro

@@ -0,0 +1,111 @@
+---
+import './real-fuel-consumption-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+const currencies = [
+  { code: 'EUR', symbol: '€' }, { code: 'USD', symbol: '$' }, { code: 'IDR', symbol: 'Rp' }, { code: 'JPY', symbol: '¥' }, { code: 'KRW', symbol: '₩' },
+  { code: 'PLN', symbol: 'zł' }, { code: 'RUB', symbol: '₽' }, { code: 'SEK', symbol: 'kr' }, { code: 'TRY', symbol: '₺' }, { code: 'CNY', symbol: '¥' },
+];
+const comparisonModes = [
+  { value: 'gasoline', label: ui.gasolineLabel },
+  { value: 'diesel', label: ui.dieselLabel },
+  { value: 'electric', label: ui.electricLabel },
+];
+---
+
+<div class="rfc-shell" data-fuel-log-calculator data-rfc-mode="gasoline" data-rfc-currency="EUR" data-status="close">
+  <section class="rfc-console">
+    <header class="rfc-toolbar">
+      <div class="rfc-choice-group" role="group" aria-label={ui.fuelTypeLabel}>
+        <span>{ui.fuelTypeLabel}</span>
+        <button type="button" data-rfc-mode data-value="gasoline" aria-pressed="true">{ui.gasolineLabel}</button>
+        <button type="button" data-rfc-mode data-value="diesel" aria-pressed="false">{ui.dieselLabel}</button>
+        <button type="button" data-rfc-mode data-value="electric" aria-pressed="false">{ui.electricLabel}</button>
+      </div>
+      <div class="rfc-currency-picker">
+        <span>{ui.currencyLabel}</span>
+        <button type="button" class="rfc-currency-trigger" data-rfc-currency-trigger aria-expanded="false" aria-haspopup="listbox">
+          <span data-rfc-currency-current>€</span><span class="rfc-currency-chevron" aria-hidden="true"></span>
+        </button>
+        <small class="rfc-currency-rate" data-rfc-currency-rate>1 EUR = 1 EUR</small>
+        <div class="rfc-currency-menu" data-rfc-currency-menu role="listbox" hidden>
+          {currencies.map((currency) => <button type="button" data-rfc-currency-button data-value={currency.code} role="option" aria-selected={currency.code === 'EUR'}>{currency.code} {currency.symbol}</button>)}
+        </div>
+      </div>
+      <button type="button" class="rfc-reset" data-rfc-reset>{ui.resetLabel}</button>
+    </header>
+
+    <section class="rfc-intake">
+      <div class="rfc-section-heading">
+        <div><p class="rfc-eyebrow">{ui.measurementTitle}</p><h2>{ui.intakeQuestion}</h2></div>
+      </div>
+      <div class="rfc-main-fields">
+        <label class="rfc-field" for="rfc-distance-number">
+          <span>{ui.distanceLabel}</span><small>{ui.distanceHint}</small>
+          <strong><input id="rfc-distance-number" data-rfc-field="distance" data-rfc-number type="number" min="1" max="2000" step="1" value="100" /> <em>{ui.distanceUnit}</em></strong>
+          <input data-rfc-field="distance" data-rfc-range type="range" min="1" max="2000" step="1" value="100" aria-label={ui.distanceLabel} />
+        </label>
+        <label class="rfc-field" for="rfc-used-number">
+          <span data-rfc-used-label>{ui.gasolineUsedLabel}</span><small data-rfc-used-hint>{ui.gasolineUsedHint}</small>
+          <strong><input id="rfc-used-number" data-rfc-field="used" data-rfc-number type="number" min="0.1" max="160" step="0.1" value="6.5" /> <em data-rfc-used-unit>{ui.fuelUnit}</em></strong>
+          <input data-rfc-field="used" data-rfc-range type="range" min="0.1" max="160" step="0.1" value="6.5" aria-label={ui.usedLabel} />
+        </label>
+        <label class="rfc-field rfc-price-field" for="rfc-price-number">
+          <span data-rfc-price-label>{ui.gasolinePriceLabel}</span><small>{ui.priceHint}</small>
+          <strong><input id="rfc-price-number" data-rfc-field="price" data-rfc-number type="number" min="0" max="20" step="0.01" value="1.8" /> <em data-rfc-price-unit>€ / {ui.fuelUnit}</em></strong>
+          <input data-rfc-field="price" data-rfc-range type="range" min="0" max="20" step="0.01" value="1.8" aria-label={ui.priceLabel} />
+        </label>
+      </div>
+    </section>
+
+    <section class="rfc-results" aria-live="polite">
+      <div class="rfc-result-lead">
+        <div><p class="rfc-eyebrow">{ui.readingTitle}</p><strong data-rfc-real>6.5 L/100 km</strong><span data-rfc-mode-label>{ui.gasolineLabel}</span></div>
+        <div class="rfc-result-cost"><span>{ui.tripCostLabel}</span><strong data-rfc-trip-cost>€11.70</strong><small data-rfc-cost-100>€11.70 / 100 km</small></div>
+        <p class="rfc-status" data-rfc-status>{ui.gasolineStatusClose}</p>
+      </div>
+      <div class="rfc-comparison-box">
+        <div class="rfc-comparison-heading"><div><p class="rfc-eyebrow">{ui.comparisonTitle}</p><h2>{ui.comparisonQuestion}</h2></div><span>{ui.comparisonHint}</span></div>
+        <div class="rfc-price-table" role="table" aria-label={ui.comparisonTitle}>
+          {comparisonModes.map((mode) => <article class="rfc-price-row" data-rfc-comparison-row={mode.value} role="row">
+            <div class="rfc-row-identity"><span class={`rfc-fuel-dot rfc-dot-${mode.value}`} aria-hidden="true"></span><h3>{mode.label}</h3><small data-rfc-comparison-state={mode.value}>{ui.comparisonNotSet}</small></div>
+            <div class="rfc-row-bar-area"><div class="rfc-row-bar-track"><div class="rfc-row-bar" data-rfc-comparison-fill={mode.value}></div></div><div class="rfc-row-cost"><small>{ui.comparisonCostLabel}</small><strong data-rfc-comparison-cost={mode.value}>—</strong></div></div>
+            <div class="rfc-row-consumption"><small>{ui.compareConsumptionLabel}</small><div><strong data-rfc-comparison-consumption={mode.value}>—</strong><span>{mode.value === 'electric' ? ui.energyConsumptionUnit : ui.fuelConsumptionUnit}</span></div></div>
+          </article>)}
+        </div>
+        <p class="rfc-comparison-punchline" data-rfc-comparison-punchline>{ui.comparisonHint}</p>
+      </div>
+    </section>
+
+    <details class="rfc-details">
+      <summary>{ui.optionalDetails}</summary>
+      <div class="rfc-details-body">
+        <div class="rfc-official-field">
+          <label class="rfc-field" for="rfc-rated-number"><span data-rfc-rated-label>{ui.gasolineRatedLabel}</span><small>{ui.ratedHint}</small><strong><input id="rfc-rated-number" data-rfc-field="rated" data-rfc-number type="number" min="0.1" max="40" step="0.1" value="5.8" /> <em data-rfc-rated-unit>{ui.fuelConsumptionUnit}</em></strong><input data-rfc-field="rated" data-rfc-range type="range" min="0.1" max="40" step="0.1" value="5.8" aria-label={ui.ratedLabel} /></label>
+        </div>
+        <div class="rfc-comparison-settings">
+          <div class="rfc-setting-heading"><div><p class="rfc-eyebrow">{ui.comparisonSettingsTitle}</p><span>{ui.comparisonSettingsHint}</span></div><div class="rfc-setting-actions"><label><input type="checkbox" data-rfc-remember-comparisons />{ui.rememberComparisonsLabel}</label><button type="button" data-rfc-reset-comparisons>{ui.resetComparisonsLabel}</button></div></div>
+          {comparisonModes.map((mode) => <div class="rfc-setting-row">
+            <strong><span class={`rfc-fuel-dot rfc-dot-${mode.value}`} aria-hidden="true"></span>{mode.label}</strong>
+            <label for={`rfc-${mode.value}-ratio-number`}><span>{ui.compareRatioLabel}</span><input id={`rfc-${mode.value}-ratio-number`} data-rfc-field={`comparison-${mode.value}-ratio`} data-rfc-number type="number" min="0.1" max="5" step="0.01" placeholder="—" /><em>×</em></label>
+            <label for={`rfc-${mode.value}-price-number`}><span>{ui.comparePriceLabel}</span><input id={`rfc-${mode.value}-price-number`} data-rfc-field={`comparison-${mode.value}-price`} data-rfc-number type="number" min="0" max="20" step="0.01" placeholder="—" /><em data-rfc-setting-price-unit>€ / {mode.value === 'electric' ? ui.energyUnit : ui.fuelUnit}</em></label>
+          </div>)}
+        </div>
+      </div>
+    </details>
+
+    <footer class="rfc-footer"><span>{ui.efficiencyLabel}: <b data-rfc-efficiency>15.38 km/L</b></span><span>{ui.mpgLabel}: <b data-rfc-mpg>36.2 mpg</b></span><span>{ui.formulaLabel}: <b data-rfc-formula>{ui.fuelFormula}</b></span><span>{ui.localNotice}</span></footer>
+  </section>
+</div>
+
+<script is:inline id="rfc-copy" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initFuelLog } from './controller';
+
+  const copy = document.querySelector<HTMLScriptElement>('#rfc-copy');
+  if (copy?.textContent) initFuelLog(JSON.parse(copy.textContent));
+</script>

package/src/tool/realFuelConsumptionCalculator/controller.ts

@@ -0,0 +1,175 @@
+import { renderFuelLog, renderFuelLogControls } from './dom-views';
+import { evaluateFuelLog } from './evaluator';
+import { calculateFuelLog, currencyConversionFactor, type Currency, type EnergyMode } from './logic';
+import { DEFAULT_FUEL_LOG_STATE, loadFuelLogState, saveFuelLogState, type FuelLogState } from './storage';
+import type { FuelLogUI } from './ui';
+
+function fieldValue(root: HTMLElement, field: string): number {
+  return Number(root.querySelector<HTMLInputElement>(`input[data-rfc-field="${field}"][data-rfc-number]`)?.value ?? 0);
+}
+
+function readState(root: HTMLElement): FuelLogState {
+  return {
+    distance: fieldValue(root, 'distance'),
+    used: fieldValue(root, 'used'),
+    price: fieldValue(root, 'price'),
+    rated: fieldValue(root, 'rated'),
+    mode: (root.dataset.rfcMode as EnergyMode) ?? 'gasoline',
+    currency: (root.dataset.rfcCurrency as Currency) ?? 'EUR',
+    rememberComparisons: root.querySelector<HTMLInputElement>('[data-rfc-remember-comparisons]')?.checked ?? false,
+    comparisons: {
+      gasoline: { ratio: fieldValue(root, 'comparison-gasoline-ratio'), price: fieldValue(root, 'comparison-gasoline-price') },
+      diesel: { ratio: fieldValue(root, 'comparison-diesel-ratio'), price: fieldValue(root, 'comparison-diesel-price') },
+      electric: { ratio: fieldValue(root, 'comparison-electric-ratio'), price: fieldValue(root, 'comparison-electric-price') },
+    },
+  };
+}
+
+function setField(root: HTMLElement, field: string, value: number): void {
+  root.querySelectorAll<HTMLInputElement>(`input[data-rfc-field="${field}"]`).forEach((input) => { input.value = String(value); });
+}
+
+function setMode(root: HTMLElement, mode: EnergyMode): void {
+  root.dataset.rfcMode = mode;
+  root.querySelectorAll<HTMLButtonElement>('[data-rfc-mode]').forEach((button) => button.setAttribute('aria-pressed', String(button.dataset.value === mode)));
+}
+
+function modeRatio(root: HTMLElement, mode: EnergyMode): number {
+  if (mode === 'gasoline') return 1;
+  return Math.max(0.01, fieldValue(root, `comparison-${mode}-ratio`));
+}
+
+function switchMode(root: HTMLElement, mode: EnergyMode): void {
+  const previous = (root.dataset.rfcMode as EnergyMode) ?? 'gasoline';
+  if (previous === mode) return;
+  const distance = Math.max(1, fieldValue(root, 'distance'));
+  const used = Math.max(0.001, fieldValue(root, 'used'));
+  const gasolineBase = ((used / distance) * 100) / modeRatio(root, previous);
+  const nextUsed = (gasolineBase * modeRatio(root, mode) * distance) / 100;
+  setField(root, 'used', Math.round(nextUsed * 100) / 100);
+  const nextPrice = fieldValue(root, `comparison-${mode}-price`);
+  if (nextPrice > 0) setField(root, 'price', nextPrice);
+  setMode(root, mode);
+}
+
+function closeCurrencyMenu(root: HTMLElement): void {
+  const menu = root.querySelector<HTMLElement>('[data-rfc-currency-menu]');
+  const trigger = root.querySelector<HTMLButtonElement>('[data-rfc-currency-trigger]');
+  if (menu) menu.hidden = true;
+  trigger?.setAttribute('aria-expanded', 'false');
+}
+
+function convertPrice(value: number, from: Currency, to: Currency): number {
+  const inEuro = value / currencyConversionFactor(from);
+  return Math.round(inEuro * currencyConversionFactor(to) * 100) / 100;
+}
+
+function convertCurrencyFields(root: HTMLElement, from: Currency, to: Currency): void {
+  ['price', 'comparison-gasoline-price', 'comparison-diesel-price', 'comparison-electric-price'].forEach((field) => {
+    const input = root.querySelector<HTMLInputElement>(`input[data-rfc-field="${field}"][data-rfc-number]`);
+    const value = Number(input?.value ?? 0);
+    if (input && Number.isFinite(value) && value > 0) setField(root, field, convertPrice(value, from, to));
+  });
+}
+
+function setCurrency(root: HTMLElement, currency: Currency): void {
+  root.dataset.rfcCurrency = currency;
+  root.querySelectorAll<HTMLButtonElement>('[data-rfc-currency-button]').forEach((button) => button.setAttribute('aria-selected', String(button.dataset.value === currency)));
+  closeCurrencyMenu(root);
+}
+
+function applyState(root: HTMLElement, state: FuelLogState): void {
+  setField(root, 'distance', state.distance);
+  setField(root, 'used', state.used);
+  setField(root, 'price', state.price);
+  setField(root, 'rated', state.rated);
+  (['gasoline', 'diesel', 'electric'] as EnergyMode[]).forEach((mode) => {
+    setField(root, `comparison-${mode}-ratio`, state.comparisons?.[mode]?.ratio ?? DEFAULT_FUEL_LOG_STATE.comparisons[mode].ratio);
+    setField(root, `comparison-${mode}-price`, state.comparisons?.[mode]?.price ?? DEFAULT_FUEL_LOG_STATE.comparisons[mode].price);
+  });
+  setMode(root, state.mode);
+  setCurrency(root, state.currency);
+  const remember = root.querySelector<HTMLInputElement>('[data-rfc-remember-comparisons]');
+  if (remember) remember.checked = state.rememberComparisons;
+}
+
+function update(root: HTMLElement, ui: FuelLogUI): void {
+  const state = readState(root);
+  const result = calculateFuelLog(state);
+  renderFuelLogControls(root, ui);
+  renderFuelLog(root, { result, evaluation: evaluateFuelLog(result) }, ui);
+  saveFuelLogState(state);
+}
+
+function syncInputValue(root: HTMLElement, input: HTMLInputElement, value: number): void {
+  if (!Number.isFinite(value)) return;
+  const field = input.dataset.rfcField ?? '';
+  if ('rfcRange' in input.dataset) {
+    setField(root, field, value);
+    return;
+  }
+  if ('rfcNumber' in input.dataset && input.value !== '') setField(root, field, value);
+}
+
+function syncLinkedPrice(root: HTMLElement, field: string, value: number): void {
+  const activeMode = (root.dataset.rfcMode as EnergyMode) ?? 'gasoline';
+  if (field === 'price') {
+    setField(root, `comparison-${activeMode}-price`, value);
+    return;
+  }
+  if (field === `comparison-${activeMode}-price` && Number.isFinite(value)) setField(root, 'price', value);
+}
+
+function handleFieldInput(root: HTMLElement, ui: FuelLogUI, input: HTMLInputElement): void {
+  const value = Number(input.value);
+  const field = input.dataset.rfcField ?? '';
+  syncInputValue(root, input, value);
+  syncLinkedPrice(root, field, value);
+  update(root, ui);
+}
+
+function handleCurrencyChange(root: HTMLElement, ui: FuelLogUI, button: HTMLButtonElement): void {
+  const next = button.dataset.value as Currency;
+  const previous = (root.dataset.rfcCurrency as Currency) ?? 'EUR';
+  convertCurrencyFields(root, previous, next);
+  setCurrency(root, next);
+  update(root, ui);
+}
+
+function bindFuelLogEvents(root: HTMLElement, ui: FuelLogUI): void {
+  root.querySelectorAll<HTMLInputElement>('[data-rfc-field]').forEach((input) => input.addEventListener('input', () => handleFieldInput(root, ui, input)));
+  root.querySelectorAll<HTMLButtonElement>('[data-rfc-mode]').forEach((button) => button.addEventListener('click', () => { switchMode(root, button.dataset.value as EnergyMode); update(root, ui); }));
+  root.querySelectorAll<HTMLButtonElement>('[data-rfc-currency-button]').forEach((button) => button.addEventListener('click', () => handleCurrencyChange(root, ui, button)));
+  root.querySelectorAll<HTMLButtonElement>('[data-rfc-reset]').forEach((button) => button.addEventListener('click', () => { applyState(root, DEFAULT_FUEL_LOG_STATE); update(root, ui); }));
+  root.querySelector<HTMLInputElement>('[data-rfc-remember-comparisons]')?.addEventListener('change', () => update(root, ui));
+  root.querySelector<HTMLButtonElement>('[data-rfc-reset-comparisons]')?.addEventListener('click', () => { resetComparisons(root); update(root, ui); });
+}
+
+function resetComparisons(root: HTMLElement): void {
+  const currency = (root.dataset.rfcCurrency as Currency) ?? 'EUR';
+  (['gasoline', 'diesel', 'electric'] as EnergyMode[]).forEach((mode) => {
+    const defaults = DEFAULT_FUEL_LOG_STATE.comparisons[mode];
+    setField(root, `comparison-${mode}-ratio`, defaults.ratio);
+    setField(root, `comparison-${mode}-price`, convertPrice(defaults.price, 'EUR', currency));
+  });
+  const activeMode = (root.dataset.rfcMode as EnergyMode) ?? 'gasoline';
+  setField(root, 'price', fieldValue(root, `comparison-${activeMode}-price`));
+}
+
+export function initFuelLog(ui: FuelLogUI): void {
+  const root = document.querySelector<HTMLElement>('[data-fuel-log-calculator]');
+  if (!root) return;
+  const saved = loadFuelLogState();
+  applyState(root, saved ?? DEFAULT_FUEL_LOG_STATE);
+  bindFuelLogEvents(root, ui);
+  const trigger = root.querySelector<HTMLButtonElement>('[data-rfc-currency-trigger]');
+  const menu = root.querySelector<HTMLElement>('[data-rfc-currency-menu]');
+  trigger?.addEventListener('click', () => {
+    if (!menu) return;
+    menu.hidden = !menu.hidden;
+    trigger.setAttribute('aria-expanded', String(!menu.hidden));
+  });
+  document.addEventListener('click', (event) => { if (!root.contains(event.target as Node)) closeCurrencyMenu(root); });
+  document.addEventListener('keydown', (event) => { if (event.key === 'Escape') closeCurrencyMenu(root); });
+  update(root, ui);
+}

package/src/tool/realFuelConsumptionCalculator/dom-views.ts

@@ -0,0 +1,132 @@
+import { consumptionUnit, currencyConversionFactor, currencySymbol, type Currency, type EnergyMode, type FuelLogResult } from './logic';
+import type { FuelLogEvaluation } from './evaluator';
+import type { FuelLogUI } from './ui';
+
+interface FuelLogRenderModel {
+  result: FuelLogResult;
+  evaluation: FuelLogEvaluation;
+}
+
+function setText(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = value;
+}
+
+function number(value: number, digits = 1): string {
+  return value.toFixed(digits);
+}
+
+function modeCopy(mode: EnergyMode, ui: FuelLogUI): { usedLabel: string; usedHint: string; priceLabel: string; ratedLabel: string } {
+  if (mode === 'gasoline') return { usedLabel: ui.gasolineUsedLabel, usedHint: ui.gasolineUsedHint, priceLabel: ui.gasolinePriceLabel, ratedLabel: ui.gasolineRatedLabel };
+  if (mode === 'diesel') return { usedLabel: ui.dieselUsedLabel, usedHint: ui.dieselUsedHint, priceLabel: ui.dieselPriceLabel, ratedLabel: ui.dieselRatedLabel };
+  return { usedLabel: ui.electricUsedLabel, usedHint: ui.electricUsedHint, priceLabel: ui.electricPriceLabel, ratedLabel: ui.electricRatedLabel };
+}
+
+function modeLabel(mode: EnergyMode, ui: FuelLogUI): string {
+  if (mode === 'gasoline') return ui.gasolineLabel;
+  if (mode === 'diesel') return ui.dieselLabel;
+  return ui.electricLabel;
+}
+
+function comparisonState(cost: number, cheapest: number | null, highest: number | null, ui: FuelLogUI): string {
+  if (cost === cheapest) return ui.comparisonCheapest;
+  if (cost === highest && highest !== cheapest) return ui.comparisonMostExpensive;
+  return ui.comparisonReady;
+}
+
+function comparisonRank(cost: number, cheapest: number | null, highest: number | null): string {
+  if (cost === cheapest) return 'cheapest';
+  if (cost === highest && highest !== cheapest) return 'highest';
+  return 'middle';
+}
+
+function clearComparisonRow(row: HTMLElement, mode: EnergyMode, ui: FuelLogUI): void {
+  setText(row, `[data-rfc-comparison-consumption="${mode}"]`, '—');
+  setText(row, `[data-rfc-comparison-cost="${mode}"]`, '—');
+  setText(row, `[data-rfc-comparison-state="${mode}"]`, ui.comparisonNotSet);
+  row.style.setProperty('--rfc-bar', '0%');
+  row.dataset.ready = 'false';
+  row.dataset.rank = 'unset';
+}
+
+function syncPriceInputs(root: HTMLElement, currency: Currency): void {
+  const priceMax = Math.max(20, currencyConversionFactor(currency) * 20);
+  root.querySelectorAll<HTMLInputElement>('[data-rfc-field="price"], [data-rfc-field$="-price"]').forEach((input) => {
+    input.max = String(priceMax);
+    if ('rfcRange' in input.dataset) {
+      const numberInput = root.querySelector<HTMLInputElement>(`input[data-rfc-field="${input.dataset.rfcField}"][data-rfc-number]`);
+      if (numberInput) input.value = numberInput.value;
+    }
+  });
+}
+
+function comparisonText(root: HTMLElement, result: FuelLogResult, ui: FuelLogUI): void {
+  const symbol = currencySymbol(result.currency);
+  const values = Object.values(result.comparisons).filter((value): value is NonNullable<typeof value> => value !== null);
+  const maxCost = Math.max(...values.map((value) => value.costPer100), 1);
+  const cheapest = values.length ? Math.min(...values.map((value) => value.costPer100)) : null;
+  const highest = values.length ? Math.max(...values.map((value) => value.costPer100)) : null;
+  let cheapestMode: EnergyMode | null = null;
+  if (cheapest !== null) cheapestMode = (['gasoline', 'diesel', 'electric'] as EnergyMode[]).find((mode) => result.comparisons[mode]?.costPer100 === cheapest) ?? null;
+  (['gasoline', 'diesel', 'electric'] as EnergyMode[]).forEach((mode) => {
+    const comparison = result.comparisons[mode];
+    const row = root.querySelector<HTMLElement>(`[data-rfc-comparison-row="${mode}"]`);
+    if (!row) return;
+    if (!comparison) {
+      clearComparisonRow(row, mode, ui);
+      return;
+    }
+    const state = comparisonState(comparison.costPer100, cheapest, highest, ui);
+    setText(row, `[data-rfc-comparison-consumption="${mode}"]`, number(comparison.consumption));
+    setText(row, `[data-rfc-comparison-cost="${mode}"]`, `${symbol}${number(comparison.costPer100, 2)}`);
+    setText(row, `[data-rfc-comparison-state="${mode}"]`, state);
+    row.style.setProperty('--rfc-bar', `${Math.round(10 + (comparison.costPer100 / maxCost) * 90)}%`);
+    row.dataset.ready = 'true';
+    row.dataset.rank = comparisonRank(comparison.costPer100, cheapest, highest);
+  });
+  setText(root, '[data-rfc-comparison-punchline]', cheapestMode ? `${modeLabel(cheapestMode, ui)}: ${ui.comparisonCheapest} at ${symbol}${number(cheapest ?? 0, 2)} / 100 km` : ui.comparisonPunchline);
+}
+
+export function renderFuelLog(root: HTMLElement, model: FuelLogRenderModel, ui: FuelLogUI): void {
+  const { result, evaluation } = model;
+  const symbol = currencySymbol(result.currency);
+  const resultUnit = consumptionUnit(result.mode);
+  setText(root, '[data-rfc-mode-label]', modeLabel(result.mode, ui));
+  setText(root, '[data-rfc-real]', `${number(result.realPer100)} ${resultUnit}`);
+  setText(root, '[data-rfc-efficiency]', `${number(result.distancePerUnit, 2)} ${result.mode === 'electric' ? 'km/kWh' : 'km/L'}`);
+  setText(root, '[data-rfc-mpg]', result.usMpg === null ? 'Not used for EV' : `${number(result.usMpg)} mpg`);
+  setText(root, '[data-rfc-trip-cost]', `${symbol}${number(result.tripCost, 2)}`);
+  setText(root, '[data-rfc-cost-100]', `${symbol}${number(result.costPer100, 2)} / 100 km`);
+  setText(root, '[data-rfc-status]', ui[evaluation.messageKey]);
+  root.dataset.status = evaluation.status;
+  root.dataset.rfcMode = result.mode;
+  root.dataset.rfcCurrency = result.currency;
+  comparisonText(root, result, ui);
+}
+
+export function renderFuelLogControls(root: HTMLElement, ui: FuelLogUI): void {
+  const mode = root.dataset.rfcMode as EnergyMode;
+  const copy = modeCopy(mode, ui);
+  const isElectric = mode === 'electric';
+  const amount = isElectric ? ui.energyUnit : ui.fuelUnit;
+  const consumption = isElectric ? ui.energyConsumptionUnit : ui.fuelConsumptionUnit;
+  const currency = (root.dataset.rfcCurrency as Currency) ?? 'EUR';
+  const symbol = currencySymbol(currency);
+  setText(root, '[data-rfc-used-label]', copy.usedLabel);
+  setText(root, '[data-rfc-used-hint]', copy.usedHint);
+  setText(root, '[data-rfc-price-label]', copy.priceLabel);
+  setText(root, '[data-rfc-rated-label]', copy.ratedLabel);
+  setText(root, '[data-rfc-used-unit]', amount);
+  setText(root, '[data-rfc-price-unit]', `${symbol} / ${amount}`);
+  setText(root, '[data-rfc-rated-unit]', consumption);
+  syncPriceInputs(root, currency);
+  root.querySelectorAll<HTMLElement>('[data-rfc-setting-price-unit]').forEach((element) => {
+    element.textContent = `${symbol} / ${element.parentElement?.querySelector('input')?.id.includes('electric') ? ui.energyUnit : ui.fuelUnit}`;
+  });
+  setText(root, '[data-rfc-currency-current]', symbol);
+  const factor = currencyConversionFactor(currency);
+  setText(root, '[data-rfc-currency-rate]', `${ui.currencyRateLabel} ${number(factor, factor >= 100 ? 0 : 2)} ${currency}`);
+  root.querySelectorAll<HTMLButtonElement>('[data-rfc-currency-button]').forEach((button) => {
+    button.setAttribute('aria-selected', String(button.dataset.value === currency));
+  });
+}

package/src/tool/realFuelConsumptionCalculator/entry.ts

@@ -0,0 +1,30 @@
+import type { MotorToolEntry, ToolLocaleContent } from '../../types';
+import type { FuelLogUI } from './ui';
+
+export type { FuelLogUI };
+export type RealFuelConsumptionCalculatorLocaleContent = ToolLocaleContent<FuelLogUI>;
+
+export const realFuelConsumptionCalculator: MotorToolEntry<FuelLogUI> = {
+  id: 'real-fuel-consumption-calculator',
+  icons: {
+    bg: 'mdi:gas-station-outline',
+    fg: 'mdi:chart-donut-variant',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

package/src/tool/realFuelConsumptionCalculator/evaluator.ts

@@ -0,0 +1,15 @@
+import type { FuelLogResult } from './logic';
+
+export type FuelLogStatus = 'better' | 'close' | 'higher';
+
+export interface FuelLogEvaluation {
+  status: FuelLogStatus;
+  messageKey: 'gasolineStatusBetter' | 'gasolineStatusClose' | 'gasolineStatusHigher' | 'dieselStatusBetter' | 'dieselStatusClose' | 'dieselStatusHigher' | 'electricStatusBetter' | 'electricStatusClose' | 'electricStatusHigher';
+}
+
+export function evaluateFuelLog(result: FuelLogResult): FuelLogEvaluation {
+  const prefix = result.mode;
+  if (result.differencePercent <= -5) return { status: 'better', messageKey: `${prefix}StatusBetter` as FuelLogEvaluation['messageKey'] };
+  if (result.differencePercent <= 8) return { status: 'close', messageKey: `${prefix}StatusClose` as FuelLogEvaluation['messageKey'] };
+  return { status: 'higher', messageKey: `${prefix}StatusHigher` as FuelLogEvaluation['messageKey'] };
+}