@jjlmoya/utils-motor 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-motor",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -28,7 +28,7 @@
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",
-        "preversion": "npm run lint && npm run test && npm run build",
+        "preversion": "npm run lint && npm run test",
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",

package/src/category/index.ts

@@ -4,10 +4,11 @@ import { carMotorcycleGearRatioCalculator } from '../tool/carMotorcycleGearRatio
 import { motorcycleSkidMarkSpeedEstimator } from '../tool/motorcycleSkidMarkSpeedEstimator/entry';
 import { realFuelConsumptionCalculator } from '../tool/realFuelConsumptionCalculator/entry';
 import { tirePressureConverter } from '../tool/tirePressureConverter/entry';
+import { evChargingTimeCostPlanner } from '../tool/evChargingTimeCostPlanner/entry';
 
 export const motorCategory: MotorCategoryEntry = {
   icon: 'mdi:car-cog',
-  tools: [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator] as unknown as MotorToolEntry<Record<string, string>>[],
+  tools: [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator, evChargingTimeCostPlanner] 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

@@ -15,5 +15,6 @@ import { carMotorcycleGearRatioCalculator } from './tool/carMotorcycleGearRatioC
 import { motorcycleSkidMarkSpeedEstimator } from './tool/motorcycleSkidMarkSpeedEstimator/entry';
 import { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator/entry';
 import { tirePressureConverter } from './tool/tirePressureConverter/entry';
+import { evChargingTimeCostPlanner } from './tool/evChargingTimeCostPlanner/entry';
 
-export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator];
+export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator, evChargingTimeCostPlanner];

package/src/index.ts

@@ -41,3 +41,8 @@ export type {
   MotorcycleSkidMarkSpeedEstimatorUI,
   MotorcycleSkidMarkSpeedEstimatorLocaleContent,
 } from './tool/motorcycleSkidMarkSpeedEstimator';
+export { EV_CHARGING_TIME_COST_PLANNER_TOOL, evChargingTimeCostPlanner } from './tool/evChargingTimeCostPlanner';
+export type {
+  EVChargingTimeCostPlannerUI,
+  EVChargingTimeCostPlannerLocaleContent,
+} from './tool/evChargingTimeCostPlanner';

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(5);
+    expect(ALL_TOOLS.length).toBe(6);
   });
 
   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(5);
+      expect(ALL_TOOLS.length).toBe(6);
     });
 
     it('motorCategory should be defined', () => {

package/src/tool/evChargingTimeCostPlanner/bibliography.astro

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

package/src/tool/evChargingTimeCostPlanner/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'IEA, Electric vehicle charging, Global EV Outlook 2025',
+    url: 'https://www.iea.org/reports/global-ev-outlook-2025/electric-vehicle-charging',
+  },
+  {
+    name: 'IDAE, Guía de movilidad eléctrica para las entidades locales',
+    url: 'https://www.idae.es/sites/default/files/movilidad/2019-10/Guia_movilidad_electrica_para_entidades_locales.pdf',
+  },
+  {
+    name: 'European Central Bank, Euro foreign exchange reference rates',
+    url: 'https://www.ecb.europa.eu/stats/policy_and_exchange_rates/euro_reference_exchange_rates/html/index.en.html',
+  },
+];

package/src/tool/evChargingTimeCostPlanner/component.astro

@@ -0,0 +1,147 @@
+---
+import './ev-charging-time-cost-planner.css';
+import { CHARGING_PRESETS, CURRENCY_OPTIONS, convertCurrencyAmount, getCurrencyOption, isCurrencyCode } from './logic';
+import type { EVChargingTimeCostPlannerUI } from './ui';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const ui = Astro.props.ui as EVChargingTimeCostPlannerUI;
+const initialCurrency = isCurrencyCode(ui.defaultCurrency) ? ui.defaultCurrency : 'EUR';
+const initialCurrencyOption = getCurrencyOption(initialCurrency);
+const initialPreset = CHARGING_PRESETS[0]!;
+const initialPrice = convertCurrencyAmount(initialPreset.inputs.pricePerKwh, initialPreset.inputs.currency, initialCurrency);
+const formatPrice = (value: number): string => value.toFixed(2);
+const initialCost = new Intl.NumberFormat('en-US', { style: 'currency', currency: initialCurrency, maximumFractionDigits: 2 }).format(32 * Number(formatPrice(initialPrice)));
+const presetMeta = (preset: typeof initialPreset): string => ui.presetMetaTemplate
+  .replace('{power}', preset.inputs.chargerPowerKw.toFixed(1))
+  .replace('{symbol}', initialCurrencyOption.symbol)
+  .replace('{price}', formatPrice(convertCurrencyAmount(preset.inputs.pricePerKwh, preset.inputs.currency, initialCurrency)));
+const getInitialSegmentLevel = (index: number): string => {
+  if (index < 4) return 'held';
+  if (index < 10) return 'added';
+  return 'empty';
+};
+const fields = [
+  { id: 'capacityKwh', label: ui.capacityLabel, hint: ui.capacityHint, value: '60', min: '1', max: '250', step: '1', unit: 'kWh' },
+  { id: 'chargerPowerKw', label: ui.chargerPowerLabel, hint: ui.chargerPowerHint, value: '7.4', min: '0.1', max: '350', step: '0.1', unit: 'kW' },
+  { id: 'efficiency', label: ui.efficiencyLabel, hint: ui.efficiencyHint, value: '90', min: '50', max: '100', step: '1', unit: '%' },
+  { id: 'pricePerKwh', label: ui.priceLabel, hint: ui.priceHint, value: formatPrice(initialPrice), min: '0', max: String(5 * initialCurrencyOption.unitsPerEur), step: '0.01', unit: `${initialCurrencyOption.symbol} / kWh` },
+  { id: 'consumptionKwhPer100Km', label: ui.consumptionLabel, hint: ui.consumptionHint, value: '18', min: '1', max: '100', step: '0.5', unit: 'kWh / 100 km' },
+];
+---
+
+<div class="evc-tool" lang="en-US" data-ev-charging-planner data-currency={initialCurrency} data-status="standard">
+  <section class="evc-surface">
+    <header class="evc-header">
+      <div class="evc-header-copy">
+        <p class="evc-overline">{ui.setupLabel}</p>
+        <p class="evc-intro">{ui.setupHint}</p>
+      </div>
+      <button class="evc-reset" type="button" data-ev-reset>{ui.resetLabel}</button>
+    </header>
+
+    <div class="evc-scenes" role="group" aria-label={ui.presetLabel}>
+      <span class="evc-scenes-label">{ui.presetLabel}</span>
+      <button type="button" class="evc-scene-button is-active" data-ev-preset="home" aria-pressed="true"><strong>{ui.homePreset}</strong><small data-ev-preset-meta="home">{presetMeta(CHARGING_PRESETS[0]!)}</small></button>
+      <button type="button" class="evc-scene-button" data-ev-preset="public" aria-pressed="false"><strong>{ui.publicPreset}</strong><small data-ev-preset-meta="public">{presetMeta(CHARGING_PRESETS[1]!)}</small></button>
+      <button type="button" class="evc-scene-button" data-ev-preset="fast" aria-pressed="false"><strong>{ui.fastPreset}</strong><small data-ev-preset-meta="fast">{presetMeta(CHARGING_PRESETS[2]!)}</small></button>
+    </div>
+
+    <div class="evc-main-grid">
+      <section class="evc-inputs" aria-labelledby="evc-inputs-title">
+        <div class="evc-section-heading">
+          <div>
+            <p class="evc-overline">{ui.chargeWindowLabel}</p>
+            <h2 id="evc-inputs-title">{ui.chargeWindowHint}</h2>
+          </div>
+        </div>
+
+        <div class="evc-soc-row">
+          <label class="evc-field evc-soc-field" for="evc-start-number">
+            <span>{ui.startSocLabel}</span><small>{ui.startSocHint}</small>
+            <strong><input id="evc-start-number" data-ev-field="startSoc" data-ev-number type="number" min="0" max="100" step="1" value="32" /><em>%</em></strong>
+            <input data-ev-field="startSoc" data-ev-range type="range" min="0" max="100" step="1" value="32" aria-label={ui.startSocLabel} />
+          </label>
+          <div class="evc-window-arrow" aria-hidden="true">→</div>
+          <label class="evc-field evc-soc-field" for="evc-end-number">
+            <span>{ui.endSocLabel}</span><small>{ui.endSocHint}</small>
+            <strong><input id="evc-end-number" data-ev-field="endSoc" data-ev-number type="number" min="0" max="100" step="1" value="80" /><em>%</em></strong>
+            <input data-ev-field="endSoc" data-ev-range type="range" min="0" max="100" step="1" value="80" aria-label={ui.endSocLabel} />
+          </label>
+        </div>
+
+        <div class="evc-currency-panel" data-ev-currency-select>
+          <div>
+            <span>{ui.currencyLabel}</span>
+            <small>{ui.currencyHint}</small>
+          </div>
+          <button type="button" class="evc-currency-trigger" data-ev-currency-trigger aria-haspopup="listbox" aria-expanded="false" aria-label={ui.currencyMenuLabel}>
+            <strong data-ev-currency-code>{initialCurrency}</strong>
+            <span data-ev-currency-factor>{ui.currencyFactorTemplate.replace('{factor}', initialCurrencyOption.unitsPerEur.toString()).replace('{currency}', initialCurrency)}</span>
+            <i aria-hidden="true"></i>
+          </button>
+          <div class="evc-currency-menu" data-ev-currency-menu role="listbox" aria-label={ui.currencyMenuLabel} hidden>
+            {CURRENCY_OPTIONS.map((option) => (
+              <button type="button" role="option" data-ev-currency-option={option.code} aria-selected={option.code === initialCurrency ? 'true' : 'false'}>
+                <strong>{option.code}</strong><span>{option.symbol} · 1 EUR = {option.unitsPerEur}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div class="evc-field-stack">
+          {fields.map((field) => (
+            <label class="evc-field" for={`evc-${field.id}-number`}>
+              <span data-ev-price-label={field.id === 'pricePerKwh' ? '' : undefined}>{field.label}</span><small>{field.hint}</small>
+              <strong><input id={`evc-${field.id}-number`} data-ev-field={field.id} data-ev-number type={field.id === 'pricePerKwh' ? 'text' : 'number'} inputmode={field.id === 'pricePerKwh' ? 'decimal' : undefined} min={field.min} max={field.max} step={field.step} value={field.value} /><em data-ev-price-unit={field.id === 'pricePerKwh' ? '' : undefined}>{field.unit}</em></strong>
+              <input data-ev-field={field.id} data-ev-range type="range" min={field.min} max={field.max} step={field.step} value={field.value} aria-label={field.label} />
+            </label>
+          ))}
+        </div>
+      </section>
+
+      <section class="evc-runway" aria-labelledby="evc-result-title" aria-live="polite">
+        <div class="evc-runway-heading">
+          <div><p class="evc-overline">{ui.resultKicker}</p><h2 id="evc-result-title">{ui.resultTitle}</h2></div>
+          <span class="evc-status" data-ev-status>{ui.statusStandard}</span>
+        </div>
+        <div class="evc-battery-wrap">
+          <svg class="evc-battery" viewBox="0 0 540 206" role="img" aria-labelledby="evc-battery-title">
+            <title id="evc-battery-title">{ui.batterySceneLabel}</title>
+            <rect class="evc-battery-shell" x="16" y="35" width="470" height="136" rx="28" />
+            <rect class="evc-battery-terminal" x="486" y="81" width="38" height="44" rx="12" />
+            <g class="evc-segments">
+              {Array.from({ length: 12 }, (_, index) => <rect data-ev-segment data-level={getInitialSegmentLevel(index)} x={38 + index * 36} y="56" width="25" height="94" rx="10" />)}
+            </g>
+            <path class="evc-energy-line" d="M74 184 C146 198 244 199 330 184 S444 164 500 190" />
+            <circle class="evc-energy-node" cx="74" cy="184" r="7" />
+            <circle class="evc-energy-node" cx="500" cy="190" r="7" />
+          </svg>
+          <div class="evc-battery-legend"><span><i class="evc-dot evc-dot-held"></i><span>{ui.startingChargeLabel}</span> <strong data-ev-start-soc>32%</strong></span><span><i class="evc-dot evc-dot-added"></i><span>{ui.targetChargeLabel}</span> <strong data-ev-end-soc>80%</strong></span></div>
+        </div>
+
+        <div class="evc-result-lead"><span>{ui.timeLabel}</span><strong data-ev-time>4 h 20 min</strong><small data-ev-power>7.4 kW</small></div>
+        <div class="evc-metrics">
+          <div><span>{ui.batteryEnergyLabel}</span><strong data-ev-battery-energy>28.8 kWh</strong></div>
+          <div><span>{ui.gridEnergyLabel}</span><strong data-ev-grid-energy>32 kWh</strong></div>
+          <div><span>{ui.lossesLabel}</span><strong data-ev-loss-energy>3.2 kWh</strong></div>
+          <div><span>{ui.costLabel}</span><strong data-ev-cost>{initialCost}</strong></div>
+          <div><span>{ui.rangeLabel}</span><strong data-ev-result-range>160 km</strong></div>
+        </div>
+        <p class="evc-summary" data-ev-summary>{ui.summaryTemplate.replace('{battery}', '28.8').replace('{range}', '160').replace('{power}', '7.4').replace('{time}', '4 h 20 min').replace('{cost}', initialCost)}</p>
+      </section>
+    </div>
+
+    <footer class="evc-formula"><strong>{ui.formulaLabel}</strong><span>{ui.formulaText}</span></footer>
+  </section>
+</div>
+
+<script is:inline id="evc-copy" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initEVChargingPlanner } from './controller';
+
+  const copy = document.querySelector<HTMLScriptElement>('#evc-copy');
+  if (copy?.textContent) initEVChargingPlanner(JSON.parse(copy.textContent));
+</script>

package/src/tool/evChargingTimeCostPlanner/controller.ts

@@ -0,0 +1,214 @@
+import {
+  CHARGING_PRESETS,
+  calculateChargingPlan,
+  convertCurrencyAmount,
+  DEFAULT_CURRENCY,
+  getCurrencyOption,
+  getPriceInputStep,
+  isCurrencyCode,
+  type ChargingInputs,
+  type CurrencyCode,
+} from './logic';
+import { evaluateChargingStatus } from './evaluator';
+import { clearChargingInputs, loadChargingInputs, saveChargingInputs } from './storage';
+import { renderChargingPlan } from './dom-views';
+import type { EVChargingTimeCostPlannerUI } from './ui';
+
+type NumericField = Exclude<keyof ChargingInputs, 'currency'>;
+
+const fields: NumericField[] = [
+  'capacityKwh',
+  'startSoc',
+  'endSoc',
+  'chargerPowerKw',
+  'efficiency',
+  'pricePerKwh',
+  'consumptionKwhPer100Km',
+];
+
+function getRootCurrency(root: HTMLElement): CurrencyCode {
+  return isCurrencyCode(root.dataset.evCurrency) ? root.dataset.evCurrency : DEFAULT_CURRENCY;
+}
+
+function readInputs(root: HTMLElement): ChargingInputs {
+  const values = fields.map((field) => {
+    const input = root.querySelector<HTMLInputElement>(`[data-ev-field="${field}"][data-ev-number]`);
+    const rawValue = Number((input?.value ?? '0').replace(',', '.'));
+    const value = field === 'efficiency' ? rawValue / 100 : rawValue;
+    return [field, value] as const;
+  });
+  return { ...Object.fromEntries(values), currency: getRootCurrency(root) } as unknown as ChargingInputs;
+}
+
+function setField(root: HTMLElement, field: NumericField, value: number): void {
+  const displayValue = getDisplayValue(field, value);
+  root.querySelectorAll<HTMLInputElement>(`[data-ev-field="${field}"]`).forEach((input) => {
+    input.value = String(displayValue);
+  });
+}
+
+function getDisplayValue(field: NumericField, value: number): number {
+  if (field === 'efficiency') return value * 100;
+  if (field === 'pricePerKwh') return Number(value.toFixed(2));
+  return value;
+}
+
+function setInputs(root: HTMLElement, inputs: ChargingInputs): void {
+  fields.forEach((field) => setField(root, field, inputs[field]));
+}
+
+function setCurrencyMenuOpen(root: HTMLElement, open: boolean): void {
+  const menu = root.querySelector<HTMLElement>('[data-ev-currency-menu]');
+  const trigger = root.querySelector<HTMLButtonElement>('[data-ev-currency-trigger]');
+  if (menu) menu.hidden = !open;
+  if (trigger) trigger.setAttribute('aria-expanded', String(open));
+  root.classList.toggle('is-currency-open', open);
+}
+
+function updatePriceInputBounds(root: HTMLElement, currency: CurrencyCode): void {
+  const factor = getCurrencyOption(currency).unitsPerEur;
+  const max = String(Number((5 * factor).toFixed(2)));
+  const step = String(getPriceInputStep(currency));
+  root.querySelectorAll<HTMLInputElement>('[data-ev-field="pricePerKwh"]').forEach((input) => {
+    input.max = max;
+    input.step = step;
+  });
+}
+
+function setCurrency(root: HTMLElement, currency: CurrencyCode): void {
+  root.dataset.evCurrency = currency;
+  updatePriceInputBounds(root, currency);
+}
+
+function getInitialInputs(root: HTMLElement, stored: Partial<ChargingInputs> | null, defaultCurrency: CurrencyCode): ChargingInputs {
+  const preset = CHARGING_PRESETS[0]!.inputs;
+  if (stored) {
+    const currency = isCurrencyCode(stored.currency) ? stored.currency : preset.currency;
+    return { ...preset, ...stored, currency } as ChargingInputs;
+  }
+  const pricePerKwh = convertCurrencyAmount(preset.pricePerKwh, preset.currency, defaultCurrency);
+  setCurrency(root, defaultCurrency);
+  return { ...preset, currency: defaultCurrency, pricePerKwh };
+}
+
+function getPresetInputs(currency: CurrencyCode, preset: ChargingInputs): ChargingInputs {
+  return {
+    ...preset,
+    currency,
+    pricePerKwh: convertCurrencyAmount(preset.pricePerKwh, preset.currency, currency),
+  };
+}
+
+function syncFieldInputs(root: HTMLElement, target: HTMLInputElement): void {
+  const field = target.dataset.evField;
+  if (!field) return;
+  const normalizedValue = target.value.replace(',', '.');
+  root.querySelectorAll<HTMLInputElement>(`[data-ev-field="${field}"]`).forEach((input) => {
+    input.value = normalizedValue;
+  });
+}
+
+function updatePresetState(root: HTMLElement, activeId: string): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-ev-preset]').forEach((button) => {
+    const active = button.dataset.evPreset === activeId;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+}
+
+function render(root: HTMLElement, ui: EVChargingTimeCostPlannerUI): void {
+  const inputs = readInputs(root);
+  const plan = calculateChargingPlan(inputs);
+  renderChargingPlan(root, { ui, inputs, plan, status: evaluateChargingStatus(plan) });
+  saveChargingInputs(inputs);
+}
+
+function attachInputHandlers(root: HTMLElement, ui: EVChargingTimeCostPlannerUI): void {
+  root.addEventListener('input', (event) => {
+    const target = event.target as HTMLInputElement;
+    if (!target.matches('[data-ev-field]')) return;
+    syncFieldInputs(root, target);
+    updatePresetState(root, 'custom');
+    render(root, ui);
+  });
+}
+
+function handleCurrencySelection(root: HTMLElement, ui: EVChargingTimeCostPlannerUI, currency: CurrencyCode): void {
+  const current = readInputs(root);
+  const convertedPrice = convertCurrencyAmount(current.pricePerKwh, current.currency, currency);
+  setCurrency(root, currency);
+  setField(root, 'pricePerKwh', convertedPrice);
+  updatePresetState(root, 'custom');
+  setCurrencyMenuOpen(root, false);
+  render(root, ui);
+}
+
+function attachCurrencyDismissal(root: HTMLElement): void {
+  document.addEventListener('click', (event) => {
+    if (!root.contains(event.target as Node)) setCurrencyMenuOpen(root, false);
+  });
+  root.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') setCurrencyMenuOpen(root, false);
+  });
+}
+
+function handleCurrencyClick(root: HTMLElement, ui: EVChargingTimeCostPlannerUI, target: HTMLElement): boolean {
+  const currencyOption = target.closest<HTMLButtonElement>('[data-ev-currency-option]');
+  if (currencyOption && isCurrencyCode(currencyOption.dataset.evCurrencyOption)) {
+    handleCurrencySelection(root, ui, currencyOption.dataset.evCurrencyOption);
+    return true;
+  }
+  const currencyTrigger = target.closest<HTMLButtonElement>('[data-ev-currency-trigger]');
+  if (!currencyTrigger) return false;
+  const menu = root.querySelector<HTMLElement>('[data-ev-currency-menu]');
+  setCurrencyMenuOpen(root, Boolean(menu?.hidden));
+  return true;
+}
+
+function handlePresetClick(root: HTMLElement, ui: EVChargingTimeCostPlannerUI, target: HTMLElement): boolean {
+  const presetButton = target.closest<HTMLButtonElement>('[data-ev-preset]');
+  if (!presetButton?.dataset.evPreset) return false;
+  const preset = CHARGING_PRESETS.find((item) => item.id === presetButton.dataset.evPreset);
+  if (!preset) return true;
+  const currency = getRootCurrency(root);
+  setInputs(root, getPresetInputs(currency, preset.inputs));
+  updatePresetState(root, preset.id);
+  render(root, ui);
+  return true;
+}
+
+function handleResetClick(root: HTMLElement, ui: EVChargingTimeCostPlannerUI, target: HTMLElement): void {
+  const resetButton = target.closest<HTMLButtonElement>('[data-ev-reset]');
+  if (!resetButton) return;
+  clearChargingInputs();
+  const currency = isCurrencyCode(ui.defaultCurrency) ? ui.defaultCurrency : DEFAULT_CURRENCY;
+  setCurrency(root, currency);
+  setInputs(root, getPresetInputs(currency, CHARGING_PRESETS[0]!.inputs));
+  updatePresetState(root, 'home');
+  render(root, ui);
+}
+
+function attachClickHandlers(root: HTMLElement, ui: EVChargingTimeCostPlannerUI): void {
+  root.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    if (handleCurrencyClick(root, ui, target)) return;
+    if (handlePresetClick(root, ui, target)) return;
+    handleResetClick(root, ui, target);
+  });
+}
+
+export function initEVChargingPlanner(ui: EVChargingTimeCostPlannerUI): void {
+  const root = document.querySelector<HTMLElement>('[data-ev-charging-planner]');
+  if (!root || root.dataset.initialized === 'true') return;
+  root.dataset.initialized = 'true';
+  const stored = loadChargingInputs();
+  const defaultCurrency = isCurrencyCode(ui.defaultCurrency) ? ui.defaultCurrency : DEFAULT_CURRENCY;
+  const initial = getInitialInputs(root, stored, defaultCurrency);
+  setCurrency(root, initial.currency);
+  setInputs(root, initial);
+  updatePresetState(root, stored ? 'custom' : 'home');
+  render(root, ui);
+  attachInputHandlers(root, ui);
+  attachClickHandlers(root, ui);
+  attachCurrencyDismissal(root);
+}

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

@@ -0,0 +1,124 @@
+import { CHARGING_PRESETS, getCurrencyOption, type ChargingInputs, type ChargingPlan } from './logic';
+import type { ChargingStatus } from './evaluator';
+import type { EVChargingTimeCostPlannerUI } from './ui';
+
+const numberFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+const priceFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 });
+const factorFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 });
+
+export function formatNumber(value: number): string {
+  return numberFormatter.format(value);
+}
+
+export function formatCurrency(value: number, currency: ChargingInputs['currency']): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function formatPrice(value: number): string {
+  return priceFormatter.format(value);
+}
+
+function formatFactor(value: number): string {
+  return factorFormatter.format(value);
+}
+
+function formatDuration(minutes: number): string {
+  if (minutes <= 0) return '0 min';
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+  if (hours === 0) return `${remainder} min`;
+  if (remainder === 0) return `${hours} h`;
+  return `${hours} h ${remainder} min`;
+}
+
+function statusText(ui: EVChargingTimeCostPlannerUI, status: ChargingStatus): string {
+  const labels: Record<ChargingStatus, string> = {
+    empty: ui.statusEmpty,
+    short: ui.statusShort,
+    standard: ui.statusStandard,
+    long: ui.statusLong,
+  };
+  return labels[status];
+}
+
+function updateText(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = value;
+}
+
+function updateCurrencyContext(root: HTMLElement, ui: EVChargingTimeCostPlannerUI, inputs: ChargingInputs): void {
+  const currency = getCurrencyOption(inputs.currency);
+  updateText(root, '[data-ev-currency-code]', currency.code);
+  updateText(root, '[data-ev-price-unit]', `${currency.symbol} / kWh`);
+  updateText(root, '[data-ev-price-label]', `${ui.priceLabel} (${currency.code})`);
+  updateText(root, '[data-ev-currency-factor]', ui.currencyFactorTemplate
+    .replace('{factor}', formatFactor(currency.unitsPerEur))
+    .replace('{currency}', currency.code));
+  root.querySelectorAll<HTMLElement>('[data-ev-currency-option]').forEach((option) => {
+    const active = option.dataset.evCurrencyOption === currency.code;
+    option.setAttribute('aria-selected', String(active));
+    option.classList.toggle('is-active', active);
+  });
+  root.querySelectorAll<HTMLElement>('[data-ev-preset-meta]').forEach((meta) => {
+    const presetId = meta.dataset.evPresetMeta;
+    const preset = CHARGING_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    const presetCurrency = getCurrencyOption(preset.inputs.currency);
+    const price = (preset.inputs.pricePerKwh / presetCurrency.unitsPerEur) * currency.unitsPerEur;
+    meta.textContent = ui.presetMetaTemplate
+      .replace('{power}', formatPrice(preset.inputs.chargerPowerKw))
+      .replace('{symbol}', currency.symbol)
+      .replace('{price}', formatPrice(price));
+  });
+}
+
+function getAddedLevel(index: number, endSegment: number): string {
+  return index < endSegment ? 'added' : 'empty';
+}
+
+function updateBattery(root: HTMLElement, startSoc: number, endSoc: number): void {
+  const segments = Array.from(root.querySelectorAll<HTMLElement>('[data-ev-segment]'));
+  const startSegment = Math.round((startSoc / 100) * segments.length);
+  const endSegment = Math.round((endSoc / 100) * segments.length);
+  segments.forEach((segment, index) => {
+    const level = index < startSegment ? 'held' : getAddedLevel(index, endSegment);
+    segment.dataset.level = level;
+  });
+  root.style.setProperty('--ev-start-soc', `${startSoc}%`);
+  root.style.setProperty('--ev-end-soc', `${endSoc}%`);
+}
+
+export function renderChargingPlan(
+  root: HTMLElement,
+  view: {
+    ui: EVChargingTimeCostPlannerUI;
+    inputs: ChargingInputs;
+    plan: ChargingPlan;
+    status: ChargingStatus;
+  },
+): void {
+  const { ui, inputs, plan, status } = view;
+  updateCurrencyContext(root, ui, inputs);
+  updateBattery(root, inputs.startSoc, inputs.endSoc);
+  root.dataset.status = status;
+  updateText(root, '[data-ev-start-soc]', `${formatNumber(inputs.startSoc)}%`);
+  updateText(root, '[data-ev-end-soc]', `${formatNumber(inputs.endSoc)}%`);
+  updateText(root, '[data-ev-battery-energy]', `${formatNumber(plan.batteryEnergyKwh)} kWh`);
+  updateText(root, '[data-ev-grid-energy]', `${formatNumber(plan.gridEnergyKwh)} kWh`);
+  updateText(root, '[data-ev-loss-energy]', `${formatNumber(plan.lossEnergyKwh)} kWh`);
+  updateText(root, '[data-ev-time]', formatDuration(plan.timeMinutes));
+  updateText(root, '[data-ev-cost]', formatCurrency(plan.cost, inputs.currency));
+  updateText(root, '[data-ev-result-range]', `${formatNumber(plan.recoveredRangeKm)} ${ui.rangeUnit}`);
+  updateText(root, '[data-ev-status]', statusText(ui, status));
+  updateText(root, '[data-ev-power]', `${formatNumber(inputs.chargerPowerKw)} kW`);
+  updateText(root, '[data-ev-summary]', ui.summaryTemplate
+    .replace('{battery}', formatNumber(plan.batteryEnergyKwh))
+    .replace('{range}', formatNumber(plan.recoveredRangeKm))
+    .replace('{power}', formatNumber(inputs.chargerPowerKw))
+    .replace('{time}', formatDuration(plan.timeMinutes))
+    .replace('{cost}', formatCurrency(plan.cost, inputs.currency)));
+}

package/src/tool/evChargingTimeCostPlanner/entry.ts

@@ -0,0 +1,30 @@
+import type { MotorToolEntry, ToolLocaleContent } from '../../types';
+import type { EVChargingTimeCostPlannerUI } from './ui';
+
+export type { EVChargingTimeCostPlannerUI };
+export type EVChargingTimeCostPlannerLocaleContent = ToolLocaleContent<EVChargingTimeCostPlannerUI>;
+
+export const evChargingTimeCostPlanner: MotorToolEntry<EVChargingTimeCostPlannerUI> = {
+  id: 'ev-charging-time-cost-planner',
+  icons: {
+    bg: 'mdi:ev-station',
+    fg: 'mdi:flash-outline',
+  },
+  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),
+  },
+};