@jjlmoya/utils-travel 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-travel",
-    "version": "1.18.0",
+    "version": "1.20.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/entries.ts

@@ -1,17 +1,9 @@
-export { luggageCalculator } from './tool/luggage-calculator/entry';
-export type { Airline, LuggageCalculatorUI, LuggageCalculatorLocaleContent } from './tool/luggage-calculator/entry';
-export { miniAdventures } from './tool/mini-adventures/entry';
-export type { AdventureCategory, Adventure, Achievement, MiniAdventuresUI } from './tool/mini-adventures/entry';
-export { suitcaseChecklist } from './tool/suitcase-checklist/entry';
-export type { ChecklistItem, ChecklistCategory, SuitcaseChecklistUI } from './tool/suitcase-checklist/entry';
-export { tipCalculator } from './tool/tip-calculator/entry';
-export type { TipCountry, TipCalculatorUI } from './tool/tip-calculator/entry';
-export { schengenCalculator } from './tool/schengen-calculator/entry';
-export type { SchengenCalculatorUI } from './tool/schengen-calculator/entry';
-export { travelCategory } from './category';
 import { luggageCalculator } from './tool/luggage-calculator/entry';
 import { miniAdventures } from './tool/mini-adventures/entry';
 import { suitcaseChecklist } from './tool/suitcase-checklist/entry';
 import { tipCalculator } from './tool/tip-calculator/entry';
 import { schengenCalculator } from './tool/schengen-calculator/entry';
-export const ALL_ENTRIES = [luggageCalculator, miniAdventures, suitcaseChecklist, tipCalculator, schengenCalculator];
+import { fuelCostCalculator } from './tool/fuel-cost-calculator/entry';
+import { tripExpenseSplitter } from './tool/trip-expense-splitter/entry';
+
+export const ALL_ENTRIES = [luggageCalculator, miniAdventures, suitcaseChecklist, tipCalculator, schengenCalculator, fuelCostCalculator, tripExpenseSplitter];

package/src/index.ts

@@ -21,3 +21,4 @@ export { tipCalculator, TIP_CALCULATOR_TOOL } from './tool/tip-calculator';
 export { suitcaseChecklist, SUITCASE_CHECKLIST_TOOL } from './tool/suitcase-checklist';
 export { miniAdventures, MINI_ADVENTURES_TOOL } from './tool/mini-adventures';
 export { schengenCalculator, SCHENGEN_CALCULATOR_TOOL } from './tool/schengen-calculator';
+export { fuelCostCalculator, FUEL_COST_CALCULATOR_TOOL } from './tool/fuel-cost-calculator';

package/src/pages/[locale]/[slug].astro

@@ -71,7 +71,7 @@ interface NavItem {
 }
 
 interface Props {
-  Component: unknown;
+  Component: ToolComponent;
   locale: KnownLocale;
   content: ToolLocaleContent;
   localeUrls: Partial<Record<KnownLocale, string>>;
@@ -79,7 +79,9 @@ interface Props {
   englishSlug: string;
 }
 
-const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props;
+type ToolComponent = (props: { ui: Record<string, unknown> }) => unknown;
+
+const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props as Props;
 
 // eslint-disable-next-line custom/no-css-comments
 const cssFiles = import.meta.glob("../../tool/**/*.css", { query: "?raw", import: "default" });

package/src/tests/locale_completeness.test.ts

@@ -10,7 +10,6 @@ describe('Locale Completeness Validation', () => {
           it('should have mandatory properties', async () => {
             const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
             const content = (await loader?.()) as ToolLocaleContent;
-
             expect(content.slug).toBeTruthy();
             expect(typeof content.slug).toBe('string');
             expect(content.title).toBeTruthy();
@@ -23,8 +22,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 5 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(5);
+  it('all 7 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(7);
   });
 });
-

package/src/tests/seo_translation_completeness.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+const ASIAN_LOCALES = ['ja', 'ko', 'zh'];
+
+function getSimpleSectionLength(section: any): number {
+  if (section.type === 'title') return section.text ? section.text.length : 0;
+  if (section.type === 'paragraph') return section.html ? section.html.replace(/<[^>]*>/g, '').length : 0;
+  if (section.type === 'list') return section.items ? section.items.join('').length : 0;
+  return 0;
+}
+
+function getComplexSectionLength(section: any): number {
+  if (section.type === 'diagnostic' || section.type === 'tip') {
+    return (section.title ? section.title.length : 0) + (section.html ? section.html.replace(/<[^>]*>/g, '').length : 0);
+  }
+  if (section.type === 'table') {
+    return ((section.headers || []).join('').length) + ((section.rows || []).flat().join('').length);
+  }
+  return 0;
+}
+
+function getSectionLength(section: any): number {
+  return getSimpleSectionLength(section) || getComplexSectionLength(section);
+}
+
+function calculateSeoTextLength(seoSections: any[]): number {
+  return seoSections.reduce((acc, section) => acc + getSectionLength(section), 0);
+}
+
+function checkLocaleSeoLength(toolId: string, locale: string, localeLen: number, enLen: number): void {
+  const isAsian = ASIAN_LOCALES.includes(locale);
+  const minLength = Math.floor(enLen * (isAsian ? 0.25 : 0.70));
+  const msgType = isAsian ? 'suspiciously short' : 'truncated/lazy';
+
+  expect(
+    localeLen,
+    `[LAZY SEO TRANSLATION] Tool "${toolId}" locale "${locale}" SEO text is ${msgType} (${localeLen} chars vs EN ${enLen} chars, expected min ${minLength})`,
+  ).toBeGreaterThanOrEqual(minLength);
+}
+
+async function auditSingleLocale(toolId: string, locale: string, loader: any, enSeoLength: number): Promise<void> {
+  if (locale === 'en' || !loader) return;
+  const content = await loader();
+  if (!content.seo || !Array.isArray(content.seo)) return;
+
+  checkLocaleSeoLength(toolId, locale, calculateSeoTextLength(content.seo), enSeoLength);
+}
+
+describe('SEO Translation Completeness & Laziness Audit', () => {
+  ALL_TOOLS.forEach(({ entry }) => {
+    describe(`Tool: ${entry.id}`, () => {
+      it('should not have lazy or truncated SEO content compared to English reference', async () => {
+        const enLoader = entry.i18n['en' as keyof typeof entry.i18n];
+        if (!enLoader) return;
+
+        const enContent = await enLoader();
+        if (!enContent.seo || !Array.isArray(enContent.seo)) return;
+
+        const enSeoLength = calculateSeoTextLength(enContent.seo);
+
+        for (const [locale, loader] of Object.entries(entry.i18n)) {
+          await auditSingleLocale(entry.id, locale, loader, enSeoLength);
+        }
+      });
+    });
+  });
+});
+

package/src/tests/spanish_leakage.test.ts

@@ -28,6 +28,8 @@ const TRANSLATABLE_KEYS = [
   'schemas',
 ] as const;
 
+const COPY_THRESHOLD = 0.9;
+
 const SPANISH_MARKERS = [
   ['sangre', /\bsangre\b/gi],
   ['molino', /\bmolino\b/gi],
@@ -65,12 +67,16 @@ function normalize(value: string): string {
 }
 
 function isTechnicalInvariant(text: string): boolean {
+  const ledUnitMatches = text.match(/\b\d+(?:-\d+)?\s*(?:w|lm)\b/g) ?? [];
   return [
     'data:image/svg+xml;base64',
     'background-image: url',
     '.layout-playground {',
     'const samplerate =',
-  ].some((pattern) => text.includes(pattern)) || (text.includes('presets') && text.includes('hz'));
+  ].some((pattern) => text.includes(pattern)) ||
+    (text.includes('presets') && text.includes('hz')) ||
+    (text.includes('t_rectal') && text.includes('exp(-k * t)')) ||
+    (text.includes('led') && ledUnitMatches.length >= 3);
 }
 
 function collectString(value: string, output: string[]): void {
@@ -111,10 +117,26 @@ function findSpanishMarkers(text: string[]): string[] {
   );
 }
 
+function similarity(left: string, right: string): number {
+  const leftTokens = left.split(/\s+/);
+  const rightCounts = new Map<string, number>();
+  right.split(/\s+/).forEach((token) => rightCounts.set(token, (rightCounts.get(token) ?? 0) + 1));
+  const matches = leftTokens.reduce((total, token) => {
+    const count = rightCounts.get(token) ?? 0;
+    if (count > 0) rightCounts.set(token, count - 1);
+    return total + (count > 0 ? 1 : 0);
+  }, 0);
+  return (2 * matches) / (leftTokens.length + right.split(/\s+/).length);
+}
+
 function findCopiedFragments(spanish: string[], translated: string[]): string[] {
-  const corpus = translated.join(' ');
   return spanish
-    .filter((fragment) => fragment.length >= 80 && corpus.includes(fragment))
+    .filter((fragment) => fragment.length >= 80)
+    .filter((fragment) => translated.some((candidate) =>
+      candidate.length >= 80 &&
+      Math.min(fragment.length, candidate.length) / Math.max(fragment.length, candidate.length) >= COPY_THRESHOLD &&
+      similarity(fragment, candidate) >= COPY_THRESHOLD,
+    ))
     .sort((a, b) => b.length - a.length)
     .slice(0, 3);
 }

package/src/tests/tool_validation.test.ts

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

package/src/tool/fuel-cost-calculator/bibliography.astro

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

package/src/tool/fuel-cost-calculator/bibliography.ts

@@ -0,0 +1,14 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'U.S. Department of Energy - Fuel economy conversion guide',
+    url: 'https://www.fueleconomy.gov/feg/convert.shtml',
+  },
+  {
+    name: 'NIST - SI units and conversion factors',
+    url: 'https://www.nist.gov/pml/owm/metric-si/si-units',
+  },
+];
+
+export const bibliography = bibliographyEntries;

package/src/tool/fuel-cost-calculator/component.astro

@@ -0,0 +1,151 @@
+---
+import type { FuelCostCalculatorUI } from './ui';
+import './fuel-cost-calculator.css';
+
+interface Props {
+  ui?: FuelCostCalculatorUI;
+}
+
+const { ui } = Astro.props;
+const defaultUI: FuelCostCalculatorUI = {
+  metricLabel: 'Metric',
+  imperialLabel: 'Imperial',
+  routeHeading: 'Tune your trip',
+  distanceLabel: 'One-way distance',
+  distanceHint: 'How far is the destination?',
+  consumptionLabel: 'Vehicle consumption',
+  consumptionHint: 'Use the figure from your car',
+  priceLabel: 'Fuel price',
+  priceHint: 'Enter the current pump price',
+  passengersLabel: 'Passengers',
+  roundTripLabel: 'Round trip',
+  currencyLabel: 'Currency',
+  presetsLabel: 'Quick routes',
+  presetCommute: 'Daily run',
+  presetWeekend: 'Weekend escape',
+  presetRoadTrip: 'Road trip',
+  resultHeading: 'Trip fuel forecast',
+  totalDistanceLabel: 'Total distance',
+  fuelUsedLabel: 'Fuel used',
+  totalCostLabel: 'Total fuel cost',
+  perPersonLabel: 'Each traveler pays',
+  routeStatement: '{distance} {unit} there and back, shared by {passengers}',
+  routeOneWayStatement: '{distance} {unit} one way, shared by {passengers}',
+  statusLight: 'Light lift',
+  statusMedium: 'Worth sharing',
+  statusHigh: 'Big journey',
+  sampleButton: 'Load a sample',
+  resetButton: 'Reset',
+  litersUnit: 'L',
+  gallonsUnit: 'gal',
+  distanceMetricUnit: 'km',
+  distanceImperialUnit: 'mi',
+  consumptionMetricUnit: 'L/100 km',
+  consumptionImperialUnit: 'mpg',
+  priceMetricUnit: 'per litre',
+  priceImperialUnit: 'per gallon',
+  currencyOptions: [
+    { code: 'EUR', symbol: '€' },
+    { code: 'USD', symbol: '$' },
+    { code: 'GBP', symbol: '£' },
+    { code: 'JPY', symbol: '¥' },
+  ],
+};
+
+const content = { ...defaultUI, ...(ui ?? {}) };
+const uiJson = JSON.stringify(content);
+---
+
+<div class="fuel-cost-card" id="fc-app">
+  <div class="fc-stage">
+    <div class="fc-route-art" aria-hidden="true">
+      <svg viewBox="0 0 420 220" role="presentation">
+        <path class="fc-road-shadow" d="M-25 184 C80 70 150 228 250 115 S350 40 450 82" />
+        <path class="fc-road" d="M-25 184 C80 70 150 228 250 115 S350 40 450 82" />
+        <path id="fc-road-progress" class="fc-road-progress" pathLength="340" d="M-25 184 C80 70 150 228 250 115 S350 40 450 82" />
+        <circle class="fc-map-pin fc-pin-start" cx="38" cy="165" r="8" />
+        <circle class="fc-map-pin fc-pin-end" cx="378" cy="65" r="8" />
+        <circle class="fc-route-orb" cx="245" cy="118" r="4" />
+      </svg>
+    </div>
+    <div class="fc-stage-copy">
+      <span class="fc-kicker">{content.resultHeading}</span>
+      <span id="fc-cost-status" class="fc-cost-status" data-level="medium">{content.statusMedium}</span>
+      <strong id="fc-total-cost" class="fc-total-cost">€71.55</strong>
+      <p id="fc-route-statement" class="fc-route-statement">640 km there and back, shared by 2</p>
+    </div>
+  </div>
+
+  <div class="fc-result-strip">
+    <div><span>{content.totalDistanceLabel}</span><strong id="fc-total-distance">640 km</strong></div>
+    <div><span>{content.fuelUsedLabel}</span><strong id="fc-fuel-used">41.6 L</strong></div>
+    <div><span>{content.perPersonLabel}</span><strong id="fc-cost-person">€35.78</strong></div>
+  </div>
+
+  <div class="fc-controls">
+    <div class="fc-controls-head">
+      <span class="fc-section-label">{content.routeHeading}</span>
+      <div class="fc-unit-toggle" role="group" aria-label="Unit system">
+        <button type="button" data-fc-unit="metric">{content.metricLabel}</button>
+        <button type="button" data-fc-unit="imperial">{content.imperialLabel}</button>
+      </div>
+    </div>
+
+    <div class="fc-input-grid">
+      <label class="fc-field" for="fc-distance">
+        <span>{content.distanceLabel}</span>
+        <small>{content.distanceHint}</small>
+        <div class="fc-input-wrap"><input id="fc-distance" type="number" min="0" step="1" inputmode="decimal" /><b id="fc-distance-unit">km</b></div>
+      </label>
+      <label class="fc-field" for="fc-consumption">
+        <span>{content.consumptionLabel}</span>
+        <small>{content.consumptionHint}</small>
+        <div class="fc-input-wrap"><input id="fc-consumption" type="number" min="0" step="0.1" inputmode="decimal" /><b id="fc-consumption-unit">L/100 km</b></div>
+      </label>
+      <label class="fc-field" for="fc-price">
+        <span>{content.priceLabel}</span>
+        <small>{content.priceHint}</small>
+        <div class="fc-input-wrap"><input id="fc-price" type="number" min="0" step="0.01" inputmode="decimal" /><b id="fc-price-unit">per litre</b></div>
+      </label>
+      <label class="fc-field" for="fc-passengers">
+        <span>{content.passengersLabel}</span>
+        <small>Split the cost fairly</small>
+        <div class="fc-input-wrap"><input id="fc-passengers" type="number" min="1" max="99" step="1" inputmode="numeric" /><b>people</b></div>
+      </label>
+    </div>
+
+    <div class="fc-option-row">
+      <label class="fc-switch-label" for="fc-round-trip"><input id="fc-round-trip" type="checkbox" /><span class="fc-switch"></span><span>{content.roundTripLabel}</span></label>
+      <div class="fc-currency-group" role="group" aria-label={content.currencyLabel}>
+        {content.currencyOptions.map((option) => <button type="button" data-fc-currency={option.code}>{option.symbol} {option.code}</button>)}
+      </div>
+    </div>
+
+    <div class="fc-presets">
+      <span>{content.presetsLabel}</span>
+      <button type="button" data-fc-preset="18">{content.presetCommute}<b>18 km</b></button>
+      <button type="button" data-fc-preset="160">{content.presetWeekend}<b>160 km</b></button>
+      <button type="button" data-fc-preset="680">{content.presetRoadTrip}<b>680 km</b></button>
+    </div>
+
+    <div class="fc-actions"><button type="button" id="fc-sample" class="fc-action-secondary">{content.sampleButton}</button><button type="button" id="fc-reset" class="fc-action-primary">{content.resetButton}</button></div>
+  </div>
+</div>
+
+<script is:inline type="application/json" id="fc-i18n" set:html={uiJson}></script>
+<script>
+  import { FuelCostController } from './controller';
+  import type { FuelCostCalculatorUI } from './ui';
+
+  function initFuelCostCalculator(): void {
+    const data = document.getElementById('fc-i18n')?.textContent;
+    if (!data) return;
+    try {
+      const ui = JSON.parse(data) as FuelCostCalculatorUI;
+      new FuelCostController(ui).init();
+    } catch {}
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initFuelCostCalculator);
+  else initFuelCostCalculator();
+</script>

package/src/tool/fuel-cost-calculator/controller.ts

@@ -0,0 +1,173 @@
+import {
+  calculateFuelCost,
+  kilometersToMiles,
+  litersPer100KmToMpg,
+  milesToKilometers,
+  mpgToLitersPer100Km,
+  type FuelInputs,
+  type FuelUnitSystem,
+} from './logic';
+import { loadFuelState, saveFuelState, type FuelStorageState } from './storage';
+import { renderResult, syncUnitLabels } from './dom-views';
+import type { FuelCostCalculatorUI } from './ui';
+
+const DEFAULT_STATE: FuelStorageState = {
+  distanceKm: 320,
+  consumptionLPer100Km: 6.5,
+  pricePerLiter: 1.72,
+  passengers: 2,
+  roundTrip: true,
+  currency: 'EUR',
+  unitSystem: 'metric',
+};
+
+function numberValue(id: string, fallback: number): number {
+  const input = document.getElementById(id) as HTMLInputElement | null;
+  const value = Number(input?.value);
+  return Number.isFinite(value) ? value : fallback;
+}
+
+export class FuelCostController {
+  private state: FuelStorageState;
+  private readonly ui: FuelCostCalculatorUI;
+
+  constructor(ui: FuelCostCalculatorUI) {
+    this.ui = ui;
+    this.state = loadFuelState(DEFAULT_STATE);
+  }
+
+  public init(): void {
+    this.bindInputs();
+    this.bindUnitToggle();
+    this.bindCurrencyChips();
+    this.bindPresets();
+    this.bindActions();
+    this.syncInputs();
+    this.update();
+  }
+
+  private bindInputs(): void {
+    document.getElementById('fc-distance')?.addEventListener('input', () => this.readDistance());
+    document.getElementById('fc-consumption')?.addEventListener('input', () => this.readConsumption());
+    document.getElementById('fc-price')?.addEventListener('input', () => {
+      const price = numberValue('fc-price', this.displayedPrice());
+      this.state.pricePerLiter = this.state.unitSystem === 'metric' ? price : price / 3.785411784;
+      this.update();
+    });
+    document.getElementById('fc-passengers')?.addEventListener('input', () => {
+      this.state.passengers = Math.max(1, Math.round(numberValue('fc-passengers', this.state.passengers)));
+      this.update();
+    });
+    document.getElementById('fc-round-trip')?.addEventListener('change', (event) => {
+      this.state.roundTrip = (event.target as HTMLInputElement).checked;
+      this.update();
+    });
+  }
+
+  private bindUnitToggle(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fc-unit]').forEach((button) => {
+      button.addEventListener('click', () => {
+        const next = button.dataset.fcUnit as FuelUnitSystem;
+        if (next === this.state.unitSystem) return;
+        this.state.unitSystem = next;
+        this.syncInputs();
+        this.updateUnitButtons();
+        this.update();
+      });
+    });
+    this.updateUnitButtons();
+  }
+
+  private bindCurrencyChips(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fc-currency]').forEach((button) => {
+      button.addEventListener('click', () => {
+        this.state.currency = button.dataset.fcCurrency ?? 'EUR';
+        this.updateCurrencyButtons();
+        this.update();
+      });
+    });
+    this.updateCurrencyButtons();
+  }
+
+  private bindPresets(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fc-preset]').forEach((button) => {
+      button.addEventListener('click', () => {
+        this.state.distanceKm = Number(button.dataset.fcPreset ?? this.state.distanceKm);
+        this.syncInputs();
+        this.update();
+      });
+    });
+  }
+
+  private bindActions(): void {
+    document.getElementById('fc-sample')?.addEventListener('click', () => {
+      this.state = { ...DEFAULT_STATE, distanceKm: 680, consumptionLPer100Km: 7.2, pricePerLiter: 1.89, passengers: 3 };
+      this.syncInputs();
+      this.updateCurrencyButtons();
+      this.update();
+    });
+    document.getElementById('fc-reset')?.addEventListener('click', () => {
+      this.state = { ...DEFAULT_STATE };
+      this.syncInputs();
+      this.updateCurrencyButtons();
+      this.update();
+    });
+  }
+
+  private readDistance(): void {
+    const value = numberValue('fc-distance', 0);
+    this.state.distanceKm = this.state.unitSystem === 'metric' ? value : milesToKilometers(value);
+    this.update();
+  }
+
+  private readConsumption(): void {
+    const value = numberValue('fc-consumption', 0);
+    this.state.consumptionLPer100Km = this.state.unitSystem === 'metric' ? value : mpgToLitersPer100Km(value);
+    this.update();
+  }
+
+  private syncInputs(): void {
+    const distance = this.state.unitSystem === 'metric' ? this.state.distanceKm : kilometersToMiles(this.state.distanceKm);
+    const consumption = this.state.unitSystem === 'metric'
+      ? this.state.consumptionLPer100Km
+      : litersPer100KmToMpg(this.state.consumptionLPer100Km);
+    this.setInputValue('fc-distance', distance, 0);
+    this.setInputValue('fc-consumption', consumption, 1);
+    this.setInputValue('fc-price', this.displayedPrice(), 2);
+    this.setInputValue('fc-passengers', this.state.passengers, 0);
+    const roundTrip = document.getElementById('fc-round-trip') as HTMLInputElement | null;
+    if (roundTrip) roundTrip.checked = this.state.roundTrip;
+    syncUnitLabels(this.state.unitSystem, this.ui);
+  }
+
+  private setInputValue(id: string, value: number, digits: number): void {
+    const input = document.getElementById(id) as HTMLInputElement | null;
+    if (input) input.value = value.toFixed(digits);
+  }
+
+  private displayedPrice(): number {
+    return this.state.unitSystem === 'metric' ? this.state.pricePerLiter : this.state.pricePerLiter * 3.785411784;
+  }
+
+  private updateUnitButtons(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fc-unit]').forEach((button) => {
+      const active = button.dataset.fcUnit === this.state.unitSystem;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', String(active));
+    });
+  }
+
+  private updateCurrencyButtons(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fc-currency]').forEach((button) => {
+      const active = button.dataset.fcCurrency === this.state.currency;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', String(active));
+    });
+  }
+
+  private update(): void {
+    const inputs: FuelInputs = { ...this.state };
+    renderResult(calculateFuelCost(inputs), this.state, this.ui);
+    saveFuelState(this.state);
+  }
+}

package/src/tool/fuel-cost-calculator/dom-views.ts

@@ -0,0 +1,91 @@
+import type { FuelResult, FuelUnitSystem } from './logic';
+import { kilometersToMiles } from './logic';
+import { evaluateCost } from './evaluator';
+import type { FuelCostCalculatorUI } from './ui';
+
+function getElement<T extends Element>(id: string): T | null {
+  return document.getElementById(id) as T | null;
+}
+
+function formatNumber(value: number, digits = 1): string {
+  return new Intl.NumberFormat('en', { maximumFractionDigits: digits }).format(value);
+}
+
+function formatMoney(value: number, symbol: string, code: string): string {
+  const digits = code === 'JPY' ? 0 : 2;
+  return `${symbol}${value.toFixed(digits)}`;
+}
+
+interface ResultView {
+  distance: string;
+  fuel: string;
+  total: string;
+  perPerson: string;
+  route: string;
+  status: string;
+  level: string;
+  progress: string;
+}
+
+type ResultState = { unitSystem: FuelUnitSystem; currency: string; roundTrip: boolean; passengers: number };
+
+function buildResultView(result: FuelResult, state: ResultState, ui: FuelCostCalculatorUI): ResultView {
+  const currency = ui.currencyOptions.find((option) => option.code === state.currency) ?? ui.currencyOptions[0];
+  const metric = state.unitSystem === 'metric';
+  const distance = metric ? result.totalDistanceKm : kilometersToMiles(result.totalDistanceKm);
+  const fuel = metric ? result.fuelLiters : result.fuelGallons;
+  const distanceUnit = metric ? ui.distanceMetricUnit : ui.distanceImperialUnit;
+  const fuelUnit = metric ? ui.litersUnit : ui.gallonsUnit;
+  const status = evaluateCost(result.costPerPerson, ui);
+  const routeTemplate = state.roundTrip ? ui.routeStatement : ui.routeOneWayStatement;
+  const route = routeTemplate
+    .replace('{distance}', formatNumber(distance))
+    .replace('{unit}', distanceUnit)
+    .replace('{passengers}', String(Math.max(1, Math.round(state.passengers))));
+  return {
+    distance: `${formatNumber(distance)} ${distanceUnit}`,
+    fuel: `${formatNumber(fuel)} ${fuelUnit}`,
+    total: formatMoney(result.totalCost, currency.symbol, currency.code),
+    perPerson: formatMoney(result.costPerPerson, currency.symbol, currency.code),
+    route,
+    status: status.label,
+    level: status.level,
+    progress: String(Math.max(0, 340 - Math.min(1, result.totalDistanceKm / 1600) * 340)),
+  };
+}
+
+function setText(id: string, value: string): void {
+  const element = getElement<HTMLElement>(id);
+  if (element) element.textContent = value;
+}
+
+export function renderResult(
+  result: FuelResult,
+  state: ResultState,
+  ui: FuelCostCalculatorUI,
+): void {
+  const view = buildResultView(result, state, ui);
+  setText('fc-total-distance', view.distance);
+  setText('fc-fuel-used', view.fuel);
+  setText('fc-total-cost', view.total);
+  setText('fc-cost-person', view.perPerson);
+  setText('fc-route-statement', view.route);
+  const statusEl = getElement<HTMLSpanElement>('fc-cost-status');
+  if (statusEl) {
+    statusEl.textContent = view.status;
+    statusEl.dataset.level = view.level;
+  }
+  const road = getElement<SVGPathElement>('fc-road-progress');
+  if (road) road.style.strokeDashoffset = view.progress;
+}
+
+export function syncUnitLabels(unitSystem: FuelUnitSystem, ui: FuelCostCalculatorUI): void {
+  const distanceUnit = unitSystem === 'metric' ? ui.distanceMetricUnit : ui.distanceImperialUnit;
+  const consumptionUnit = unitSystem === 'metric' ? ui.consumptionMetricUnit : ui.consumptionImperialUnit;
+  const distanceHint = getElement<HTMLSpanElement>('fc-distance-unit');
+  const consumptionHint = getElement<HTMLSpanElement>('fc-consumption-unit');
+  const priceHint = getElement<HTMLSpanElement>('fc-price-unit');
+  if (distanceHint) distanceHint.textContent = distanceUnit;
+  if (consumptionHint) consumptionHint.textContent = consumptionUnit;
+  if (priceHint) priceHint.textContent = unitSystem === 'metric' ? ui.priceMetricUnit : ui.priceImperialUnit;
+}