@jjlmoya/utils-motor 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-motor",
-    "version": "1.4.0",
+    "version": "1.6.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/bibliography_wellformed_export.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+
+function findBibliographyAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  if (!existsSync(dir)) return files;
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...findBibliographyAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name === 'bibliography.astro') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+const toolDir = join(process.cwd(), 'src', 'tool');
+const bibliographyFiles = findBibliographyAstroFiles(toolDir);
+
+describe('Bibliography Component Wellformed Export', () => {
+  it('found tool bibliography.astro components', () => {
+    expect(bibliographyFiles.length).toBeGreaterThan(0);
+  });
+
+  bibliographyFiles.forEach((file) => {
+    const relativePath = relative(process.cwd(), file);
+
+    it(`${relativePath} should use SharedBibliography from @jjlmoya/utils-shared`, () => {
+      const content = readFileSync(file, 'utf-8');
+
+      const usesSharedComponent =
+        content.includes('@jjlmoya/utils-shared') &&
+        (content.includes('Bibliography') || content.includes('SharedBibliography'));
+
+      expect(
+        usesSharedComponent,
+        `File "${relativePath}" does not use the standard Bibliography component from @jjlmoya/utils-shared, resulting in unstyled or raw bibliography output.`,
+      ).toBe(true);
+    });
+  });
+});

package/src/tests/category_seo_quality.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+import type { CategoryLocaleContent } from '../types';
+
+const EXPECTED_LOCALES = [
+  'de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh',
+] as const;
+const COMPACT_LOCALES = new Set(['ja', 'ko', 'zh']);
+
+const localeModules = import.meta.glob('../category/i18n/*.ts', { eager: true }) as Record<
+  string,
+  { content: CategoryLocaleContent }
+>;
+
+function textFrom(value: unknown): string {
+  if (typeof value === 'string') return value.replace(/<[^>]*>/g, ' ');
+  if (Array.isArray(value)) return value.map(textFrom).join(' ');
+  if (value && typeof value === 'object') return Object.values(value).map(textFrom).join(' ');
+  return '';
+}
+
+const STRONG_CLAIM = /\b(?:garantiz\w*|guarante\w*|validat(?:ed)|valid(?:ated|ado|ada|ados|adas|ée|ées)|actualizad\w*)\b/iu;
+
+function getContents(): Map<string, CategoryLocaleContent> {
+  return new Map(
+    Object.entries(localeModules).map(([file, module]) => [file.match(/\/([a-z]{2})\.ts$/u)?.[1] ?? file, module.content]),
+  );
+}
+
+function validateContent(locale: string, content: CategoryLocaleContent): string[] {
+  const failures: string[] = [];
+  const check = (condition: boolean, message: string) => { if (!condition) failures.push(`${locale}: ${message}`); };
+  const minimumTitleLength = COMPACT_LOCALES.has(locale) ? 4 : 12;
+  const minimumDescriptionLength = COMPACT_LOCALES.has(locale) ? 20 : 60;
+  check(content.title.trim().length >= minimumTitleLength && content.title.trim().length <= 70, 'title must use a useful 4/12–70 character length');
+  check(content.description.trim().length >= minimumDescriptionLength && content.description.trim().length <= 180, 'description must use a useful 20/60–180 character length');
+  check(content.seo.length >= 2, 'SEO needs at least two sections');
+
+  const seoText = textFrom(content.seo).replace(/\s+/g, ' ').trim();
+  const minimumSeoLength = COMPACT_LOCALES.has(locale) ? 120 : 240;
+  check(seoText.length >= minimumSeoLength, 'SEO copy must contain the minimum visible copy for its script');
+  check(content.seo.filter((section) => section.type === 'title').length >= 1, 'SEO needs a section heading');
+  check(!/[�]/u.test(seoText), 'SEO contains replacement characters');
+  check(!/ {2,}/u.test(seoText), 'SEO contains duplicated whitespace');
+  check(!STRONG_CLAIM.test(seoText), 'SEO contains an unsupported strong claim');
+
+  check(content.slug.trim().length > 0 && /^[a-z0-9-]+$/u.test(content.slug), 'slug must be a non-empty URL-safe value');
+  return failures;
+}
+
+describe('Category SEO quality contract', () => {
+  it('has one content file for every configured locale', () => {
+    const contents = getContents();
+    expect([...contents.keys()].sort()).toEqual([...EXPECTED_LOCALES].sort());
+  });
+
+  it('keeps metadata, SEO structure and copy quality above the minimum in every locale', () => {
+    const contents = getContents();
+    const english = contents.get('en');
+    expect(english, 'English category content is required as the structural reference').toBeDefined();
+
+    const failures = EXPECTED_LOCALES.flatMap((locale) => {
+      const content = contents.get(locale);
+      return content ? validateContent(locale, content) : [];
+    });
+
+    const englishShape = english?.seo.map((section) => section.type);
+    for (const locale of EXPECTED_LOCALES) {
+      const content = contents.get(locale);
+      if (content && JSON.stringify(content.seo.map((section) => section.type)) !== JSON.stringify(englishShape)) {
+        failures.push(`${locale}: SEO section types must match English`);
+      }
+    }
+
+    expect(failures, 'category SEO quality failures').toEqual([]);
+  }, 30000);
+});

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/seo_wellformed_export.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+
+function findSeoAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  if (!existsSync(dir)) return files;
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...findSeoAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name === 'seo.astro') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+const toolDir = join(process.cwd(), 'src', 'tool');
+const seoFiles = findSeoAstroFiles(toolDir);
+
+describe('SEO Component Wellformed Export', () => {
+  it('found tool seo.astro components', () => {
+    expect(seoFiles.length).toBeGreaterThan(0);
+  });
+
+  seoFiles.forEach((file) => {
+    const relativePath = relative(process.cwd(), file);
+
+    it(`${relativePath} should dynamically load SEO sections and use SEORenderer`, () => {
+      const content = readFileSync(file, 'utf-8');
+
+      const usesSeoRenderer =
+        content.includes('@jjlmoya/utils-shared') &&
+        (content.includes('SEORenderer') || content.includes('SEOArticle'));
+
+      const acquiresDynamicContent =
+        content.includes('.i18n') ||
+        content.includes('loader') ||
+        content.includes('await loader') ||
+        content.includes('.seo');
+
+      const isBrokenPattern =
+        /sections\s*=\s*\[\s*\]/.test(content) && !acquiresDynamicContent;
+
+      expect(
+        usesSeoRenderer,
+        `File "${relativePath}" does not import or use SEORenderer from @jjlmoya/utils-shared.`,
+      ).toBe(true);
+
+      expect(
+        isBrokenPattern,
+        `File "${relativePath}" relies on a static sections=[] prop default without fetching content from entry.i18n, resulting in empty SEO text on consumers.`,
+      ).toBe(false);
+
+      expect(
+        acquiresDynamicContent,
+        `File "${relativePath}" does not fetch dynamic i18n content for SEO rendering.`,
+      ).toBe(true);
+    });
+  });
+});

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);
+}