@jjlmoya/utils-motor 1.10.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-motor",
-    "version": "1.10.0",
+    "version": "1.12.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -36,7 +36,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "predev": "node scripts/postinstall.mjs",
         "prestart": "node scripts/postinstall.mjs",
-        "prebuild": "node scripts/postinstall.mjs",
+        "prebuild": "node scripts/postinstall.mjs && node scripts/validate-icons.mjs",
         "qa": "npm run lint && npm run test && npm run build",
         "cf:dry-run": "npm run build && wrangler deploy --dry-run",
         "cf:preview": "npm run build && wrangler deploy --config wrangler.staging.jsonc",

package/scripts/validate-icons.mjs

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import { createRequire } from 'node:module';
+import { readFileSync, readdirSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const packageJsonPath = require.resolve('@iconify-json/mdi/package.json');
+const packageRoot = dirname(packageJsonPath);
+const iconSet = JSON.parse(readFileSync(join(packageRoot, 'icons.json'), 'utf8'));
+const availableIcons = new Set([
+  ...Object.keys(iconSet.icons ?? {}),
+  ...Object.keys(iconSet.aliases ?? {}),
+]);
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = resolve(repoRoot, 'src');
+const extensions = new Set(['.astro', '.js', '.mjs', '.ts', '.tsx']);
+const iconPattern = /\bmdi:([a-z0-9-]+)\b/g;
+const failures = [];
+let references = 0;
+
+function walk(directory) {
+  const entries = readdirSync(directory, { withFileTypes: true });
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== 'node_modules' && entry.name !== 'dist' && entry.name !== 'tests') {
+        walk(path);
+      }
+      continue;
+    }
+    if (!extensions.has(path.slice(path.lastIndexOf('.')))) continue;
+
+    const source = readFileSync(path, 'utf8');
+    for (const match of source.matchAll(iconPattern)) {
+      references += 1;
+      const iconName = match[1];
+      if (availableIcons.has(iconName)) continue;
+
+      const line = source.slice(0, match.index).split('\n').length;
+      failures.push(`${relative(repoRoot, path)}:${line} — mdi:${iconName}`);
+    }
+  }
+}
+
+walk(sourceRoot);
+
+if (failures.length > 0) {
+  console.error('Invalid MDI icons found:');
+  for (const failure of failures) console.error(`- ${failure}`);
+  console.error(`Checked ${references} MDI icon references against @iconify-json/mdi.`);
+  process.exitCode = 1;
+} else {
+  console.log(`MDI icon validation passed: ${references} references checked.`);
+}

package/src/category/index.ts

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

@@ -8,6 +8,8 @@ export { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalcula
 export type { RealFuelConsumptionCalculatorLocaleContent } from './tool/realFuelConsumptionCalculator/entry';
 export { tirePressureConverter } from './tool/tirePressureConverter/entry';
 export type { TirePressureConverterLocaleContent } from './tool/tirePressureConverter/entry';
+export { trailerTongueWeightCalculator } from './tool/trailerTongueWeightCalculator/entry';
+export type { TrailerTongueWeightCalculatorLocaleContent } from './tool/trailerTongueWeightCalculator/entry';
 export { motorCategory } from './category';
 
 import { brakingDistanceCalculator } from './tool/brakingDistanceCalculator/entry';
@@ -16,5 +18,6 @@ import { motorcycleSkidMarkSpeedEstimator } from './tool/motorcycleSkidMarkSpeed
 import { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator/entry';
 import { tirePressureConverter } from './tool/tirePressureConverter/entry';
 import { evChargingTimeCostPlanner } from './tool/evChargingTimeCostPlanner/entry';
+import { trailerTongueWeightCalculator } from './tool/trailerTongueWeightCalculator/entry';
 
-export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator, evChargingTimeCostPlanner];
+export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator, evChargingTimeCostPlanner, trailerTongueWeightCalculator];

package/src/index.ts

@@ -46,3 +46,8 @@ export type {
   EVChargingTimeCostPlannerUI,
   EVChargingTimeCostPlannerLocaleContent,
 } from './tool/evChargingTimeCostPlanner';
+export { TRAILER_TONGUE_WEIGHT_CALCULATOR_TOOL, trailerTongueWeightCalculator } from './tool/trailerTongueWeightCalculator';
+export type {
+  TrailerTongueWeightCalculatorUI,
+  TrailerTongueWeightCalculatorLocaleContent,
+} from './tool/trailerTongueWeightCalculator';

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

package/src/tool/trailerTongueWeightCalculator/bibliography.astro

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

package/src/tool/trailerTongueWeightCalculator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'Dirección General de Tráfico, Conducir seguro con remolque',
+    url: 'https://www-pro.dgt.es/comunicacion/noticias/202406278-conducir-seguro-con-remolque/',
+  },
+  {
+    name: 'The Highway Code, Rule 98: Vehicle towing and loading',
+    url: 'https://www.gov.uk/guidance/the-highway-code/rules-for-drivers-and-motorcyclists-89-to-102',
+  },
+  {
+    name: 'OpenStax, Física universitaria volumen 1, 12.1 Condiciones para el equilibrio estático',
+    url: 'https://openstax.org/books/f%C3%ADsica-universitaria-volumen-1/pages/12-1-condiciones-para-el-equilibrio-estatico',
+  },
+];

package/src/tool/trailerTongueWeightCalculator/component.astro

@@ -0,0 +1,116 @@
+---
+import './trailer-tongue-weight-calculator.css';
+import { calculateTrailerPlan, TRAILER_PRESETS } from './logic';
+import { formatDistance, formatMass } from './dom-views';
+import type { TrailerTongueWeightCalculatorUI } from './ui';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const ui = Astro.props.ui as unknown as TrailerTongueWeightCalculatorUI;
+const initialInputs = TRAILER_PRESETS[0]!.inputs;
+const initialPlan = calculateTrailerPlan(initialInputs);
+const fields = [
+  { id: 'totalMassKg', label: ui.totalMassLabel, hint: ui.totalMassHint, value: '1200', min: '1', max: '20000', step: '1', unit: 'kg', kind: 'mass' },
+  { id: 'hitchDistanceM', label: ui.hitchDistanceLabel, hint: ui.hitchDistanceHint, value: '3', min: '0.5', max: '30', step: '0.1', unit: 'm', kind: 'distance' },
+  { id: 'centerPositionM', label: ui.centerPositionLabel, hint: ui.centerPositionHint, value: '0.3', min: '-15', max: '30', step: '0.1', unit: 'm', kind: 'distance' },
+  { id: 'minimumTongueKg', label: ui.minimumTongueLabel, hint: ui.minimumTongueHint, value: '90', min: '0', max: '5000', step: '1', unit: 'kg', kind: 'mass' },
+  { id: 'maximumTongueKg', label: ui.maximumTongueLabel, hint: ui.maximumTongueHint, value: '180', min: '1', max: '5000', step: '1', unit: 'kg', kind: 'mass' },
+];
+const presetMeta = (index: number): string => ui.presetMetaTemplate
+  .replace('{mass}', formatMass(TRAILER_PRESETS[index]!.inputs.totalMassKg, 'metric'))
+  .replace('{position}', formatDistance(TRAILER_PRESETS[index]!.inputs.centerPositionM, 'metric'));
+---
+
+<div class="ttw-tool" lang="en-US" data-trailer-tongue-weight data-unit="metric" data-status="safe">
+  <section class="ttw-surface">
+    <div class="ttw-toolbar">
+      <div class="ttw-unit-switch" role="group" aria-label="Units">
+        <button type="button" data-ttw-unit="metric" aria-pressed="true">{ui.metricLabel}</button>
+        <button type="button" data-ttw-unit="imperial" aria-pressed="false">{ui.imperialLabel}</button>
+      </div>
+      <button class="ttw-reset" type="button" data-ttw-reset>{ui.resetLabel}</button>
+    </div>
+
+    <div class="ttw-presets" role="group" aria-label={ui.presetLabel}>
+      <span class="ttw-presets-label">{ui.presetLabel}</span>
+      <button type="button" data-ttw-preset="balanced" aria-pressed="true" class="is-active"><strong>{ui.balancedPreset}</strong><small>{presetMeta(0)}</small></button>
+      <button type="button" data-ttw-preset="front-heavy" aria-pressed="false"><strong>{ui.frontHeavyPreset}</strong><small>{presetMeta(1)}</small></button>
+      <button type="button" data-ttw-preset="rear-heavy" aria-pressed="false"><strong>{ui.rearHeavyPreset}</strong><small>{presetMeta(2)}</small></button>
+    </div>
+
+    <div class="ttw-layout">
+      <section class="ttw-controls" aria-labelledby="ttw-geometry-title">
+        <div class="ttw-section-heading">
+          <p class="ttw-overline">{ui.geometryLabel}</p>
+          <h2 id="ttw-geometry-title">{ui.geometryHint}</h2>
+        </div>
+        <div class="ttw-field-stack">
+          {fields.slice(0, 3).map((field) => (
+            <label class="ttw-field" for={`ttw-${field.id}`}>
+              <span class="ttw-field-title">{field.label}</span>
+              <small>{field.hint}</small>
+              <span class="ttw-input-row"><input id={`ttw-${field.id}`} data-ttw-field={field.id} data-ttw-number type="number" min={field.min} max={field.max} step={field.step} value={field.value} /><em data-ttw-mass-unit={field.kind === 'mass' ? '' : undefined} data-ttw-distance-unit={field.kind === 'distance' ? '' : undefined}>{field.unit}</em></span>
+              <input data-ttw-field={field.id} data-ttw-range type="range" min={field.min} max={field.max} step={field.step} value={field.value} aria-label={field.label} />
+            </label>
+          ))}
+        </div>
+        <div class="ttw-limits">
+          <div class="ttw-section-heading">
+            <p class="ttw-overline">{ui.tongueLimitsLabel}</p>
+            <h2>{ui.tongueLimitsHint}</h2>
+          </div>
+          {fields.slice(3).map((field) => (
+            <label class="ttw-field" for={`ttw-${field.id}`}>
+              <span class="ttw-field-title">{field.label}</span>
+              <small>{field.hint}</small>
+              <span class="ttw-input-row"><input id={`ttw-${field.id}`} data-ttw-field={field.id} data-ttw-number type="number" min={field.min} max={field.max} step={field.step} value={field.value} /><em data-ttw-mass-unit>{field.unit}</em></span>
+              <input data-ttw-field={field.id} data-ttw-range type="range" min={field.min} max={field.max} step={field.step} value={field.value} aria-label={field.label} />
+            </label>
+          ))}
+        </div>
+      </section>
+
+      <section class="ttw-result" aria-labelledby="ttw-result-title" aria-live="polite">
+        <div class="ttw-result-heading"><div><p class="ttw-overline">{ui.resultKicker}</p><h2 id="ttw-result-title">{ui.resultTitle}</h2></div><span class="ttw-status" data-ttw-status>{ui.statusSafe}</span></div>
+        <div class="ttw-scene-wrap">
+          <svg class="ttw-scene" viewBox="0 0 620 250" role="img" aria-labelledby="ttw-scene-title">
+            <title id="ttw-scene-title">{ui.sceneLabel}</title>
+            <line class="ttw-force-line" x1="76" y1="45" x2="76" y2="178" />
+            <line class="ttw-load-line" data-ttw-load-line x1="325" y1="58" x2="325" y2="140" />
+            <circle class="ttw-load-dot" data-ttw-load-dot cx="325" cy="58" r="13" />
+            <line class="ttw-deck" x1="76" y1="140" x2="498" y2="140" />
+            <path class="ttw-drawbar" d="M76 140 L35 140 L18 122" />
+            <line class="ttw-axle" x1="370" y1="140" x2="370" y2="198" />
+            <circle class="ttw-wheel" cx="345" cy="212" r="22" />
+            <circle class="ttw-wheel" cx="395" cy="212" r="22" />
+            <path class="ttw-ground" d="M300 234 H440" />
+            <text class="ttw-scene-label" x="36" y="34">{ui.hitchLabel}</text>
+            <text class="ttw-scene-label" x="340" y="184">{ui.axleLabel}</text>
+            <text class="ttw-scene-value" x="250" y="38" data-ttw-scene-load>{formatMass(initialInputs.totalMassKg, 'metric')}</text>
+            <text class="ttw-scene-value" x="250" y="84" data-ttw-scene-center>{formatDistance(initialInputs.centerPositionM, 'metric')}</text>
+            <text class="ttw-scene-value" x="28" y="224" data-ttw-scene-tongue>{formatMass(initialPlan.tongueWeightKg, 'metric')}</text>
+          </svg>
+          <div class="ttw-scene-legend"><span><i class="ttw-dot ttw-dot-load"></i>{ui.centerOfMassLabel}</span><span><i class="ttw-dot ttw-dot-tongue"></i>{ui.tongueWeightLabel}</span><span><i class="ttw-dot ttw-dot-axle"></i>{ui.axleLabel}</span></div>
+        </div>
+        <div class="ttw-lead"><span>{ui.tongueWeightLabel}</span><strong data-ttw-tongue>{formatMass(initialPlan.tongueWeightKg, 'metric')}</strong><small data-ttw-percent>{initialPlan.tonguePercent.toFixed(1)}%</small></div>
+        <div class="ttw-metrics">
+          <div><span>{ui.tonguePercentLabel}</span><strong data-ttw-percent>{initialPlan.tonguePercent.toFixed(1)}%</strong></div>
+          <div><span>{ui.axleLoadLabel}</span><strong data-ttw-axle>{formatMass(initialPlan.axleLoadKg, 'metric')}</strong></div>
+          <div><span>{ui.allowedRangeLabel}</span><strong data-ttw-range>{formatMass(initialInputs.minimumTongueKg, 'metric')} - {formatMass(initialInputs.maximumTongueKg, 'metric')}</strong></div>
+        </div>
+        <div class="ttw-shift"><strong data-ttw-shift-title>{ui.shiftTitle}</strong><p data-ttw-shift>{ui.shiftNone}</p></div>
+        <p class="ttw-summary" data-ttw-summary>{ui.summaryTemplate.replace('{tongue}', formatMass(initialPlan.tongueWeightKg, 'metric')).replace('{percent}', `${initialPlan.tonguePercent.toFixed(1)}%`).replace('{position}', formatDistance(initialInputs.centerPositionM, 'metric'))}</p>
+      </section>
+    </div>
+    <footer class="ttw-formula"><strong>{ui.formulaLabel}</strong><span>{ui.formulaText}</span></footer>
+  </section>
+</div>
+
+<script is:inline id="ttw-copy" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initTrailerTongueWeightCalculator } from './controller';
+  const copy = document.querySelector<HTMLScriptElement>('#ttw-copy');
+  if (copy?.textContent) initTrailerTongueWeightCalculator(JSON.parse(copy.textContent));
+</script>

package/src/tool/trailerTongueWeightCalculator/controller.ts

@@ -0,0 +1,143 @@
+import { evaluateTrailerStatus } from './evaluator';
+import { calculateTrailerPlan, convertDistance, convertMass, getPreset, parseDistance, parseMass, type TrailerInputs, type UnitSystem } from './logic';
+import { clearTrailerState, loadTrailerState, saveTrailerState } from './storage';
+import { renderTrailerPlan } from './dom-views';
+import type { TrailerTongueWeightCalculatorUI } from './ui';
+
+type FieldName = 'totalMassKg' | 'hitchDistanceM' | 'centerPositionM' | 'minimumTongueKg' | 'maximumTongueKg';
+type UnitState = { value: UnitSystem };
+
+const DEFAULT_INPUTS: TrailerInputs = getPreset('balanced').inputs;
+const FIELD_LIMITS: Record<FieldName, [number, number, number]> = {
+  totalMassKg: [1, 20000, 1],
+  hitchDistanceM: [0.5, 30, 0.1],
+  centerPositionM: [-15, 30, 0.1],
+  minimumTongueKg: [0, 5000, 1],
+  maximumTongueKg: [1, 5000, 1],
+};
+
+function isUnit(value: unknown): value is UnitSystem {
+  return value === 'metric' || value === 'imperial';
+}
+
+function isMassField(field: FieldName): boolean {
+  return field.endsWith('Kg');
+}
+
+function parseDisplayedValue(value: number, field: FieldName, unit: UnitSystem): number {
+  return isMassField(field) ? parseMass(value, unit) : parseDistance(value, unit);
+}
+
+function displayValue(value: number, field: FieldName, unit: UnitSystem): string {
+  const converted = isMassField(field) ? convertMass(value, unit) : convertDistance(value, unit);
+  return String(Math.round(converted * 10) / 10);
+}
+
+function readInputs(root: HTMLElement, unit: UnitSystem): TrailerInputs {
+  const values = {} as Record<FieldName, number>;
+  (Object.keys(DEFAULT_INPUTS) as FieldName[]).forEach((field) => {
+    const input = root.querySelector<HTMLInputElement>(`[data-ttw-field="${field}"][data-ttw-number]`);
+    values[field] = input ? parseDisplayedValue(Number(input.value), field, unit) : DEFAULT_INPUTS[field];
+  });
+  return values as TrailerInputs;
+}
+
+function syncField(root: HTMLElement, field: FieldName, value: number, unit: UnitSystem): void {
+  const [minimum, maximum, step] = FIELD_LIMITS[field];
+  const conversion = isMassField(field) ? convertMass : convertDistance;
+  root.querySelectorAll<HTMLInputElement>(`[data-ttw-field="${field}"]`).forEach((input) => {
+    input.value = displayValue(value, field, unit);
+    input.min = String(conversion(minimum, unit));
+    input.max = String(conversion(maximum, unit));
+    input.step = String(conversion(step, unit));
+  });
+}
+
+function syncUnits(root: HTMLElement, unit: UnitSystem): void {
+  const massUnit = unit === 'metric' ? 'kg' : 'lb';
+  const distanceUnit = unit === 'metric' ? 'm' : 'ft';
+  root.querySelectorAll<HTMLElement>('[data-ttw-mass-unit]').forEach((element) => { element.textContent = massUnit; });
+  root.querySelectorAll<HTMLElement>('[data-ttw-distance-unit]').forEach((element) => { element.textContent = distanceUnit; });
+}
+
+function setPresetState(root: HTMLElement, presetId: string): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-ttw-preset]').forEach((button) => {
+    const active = button.dataset.ttwPreset === presetId;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+}
+
+function update(root: HTMLElement, ui: TrailerTongueWeightCalculatorUI, unit: UnitSystem): void {
+  const inputs = readInputs(root, unit);
+  const plan = calculateTrailerPlan(inputs);
+  const status = evaluateTrailerStatus(inputs, plan);
+  renderTrailerPlan({ root, inputs, plan, unit, ui }, status);
+  saveTrailerState({ inputs, unit });
+}
+
+function applyInputs(root: HTMLElement, inputs: TrailerInputs, unit: UnitSystem): void {
+  (Object.keys(inputs) as FieldName[]).forEach((field) => syncField(root, field, inputs[field], unit));
+  syncUnits(root, unit);
+}
+
+function bindField(root: HTMLElement, ui: TrailerTongueWeightCalculatorUI, unitState: UnitState, field: FieldName): void {
+  root.querySelectorAll<HTMLInputElement>(`[data-ttw-field="${field}"]`).forEach((input) => {
+    input.addEventListener('input', () => {
+      const numberInput = root.querySelector<HTMLInputElement>(`[data-ttw-field="${field}"][data-ttw-number]`);
+      if (numberInput && input !== numberInput) numberInput.value = input.value;
+      update(root, ui, unitState.value);
+    });
+  });
+}
+
+function bindPresets(root: HTMLElement, ui: TrailerTongueWeightCalculatorUI, unitState: UnitState): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-ttw-preset]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const id = button.dataset.ttwPreset as 'balanced' | 'front-heavy' | 'rear-heavy';
+      applyInputs(root, getPreset(id).inputs, unitState.value);
+      setPresetState(root, id);
+      update(root, ui, unitState.value);
+    });
+  });
+}
+
+function bindUnitToggle(root: HTMLElement, ui: TrailerTongueWeightCalculatorUI, unitState: UnitState): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-ttw-unit]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const inputs = readInputs(root, unitState.value);
+      unitState.value = button.dataset.ttwUnit === 'imperial' ? 'imperial' : 'metric';
+      root.dataset.unit = unitState.value;
+      root.querySelectorAll<HTMLButtonElement>('[data-ttw-unit]').forEach((option) => option.setAttribute('aria-pressed', String(option.dataset.ttwUnit === unitState.value)));
+      applyInputs(root, inputs, unitState.value);
+      update(root, ui, unitState.value);
+    });
+  });
+}
+
+function bindReset(root: HTMLElement, ui: TrailerTongueWeightCalculatorUI, unitState: UnitState): void {
+  root.querySelector<HTMLButtonElement>('[data-ttw-reset]')?.addEventListener('click', () => {
+    clearTrailerState();
+    unitState.value = 'metric';
+    root.dataset.unit = 'metric';
+    applyInputs(root, DEFAULT_INPUTS, unitState.value);
+    setPresetState(root, 'balanced');
+    update(root, ui, unitState.value);
+  });
+}
+
+export function initTrailerTongueWeightCalculator(ui: TrailerTongueWeightCalculatorUI): void {
+  const root = document.querySelector<HTMLElement>('[data-trailer-tongue-weight]');
+  if (!root) return;
+  const stored = loadTrailerState();
+  const unitState: UnitState = { value: isUnit(stored?.unit) ? stored.unit : 'metric' };
+  const inputs = stored?.inputs ?? DEFAULT_INPUTS;
+  root.dataset.unit = unitState.value;
+  applyInputs(root, inputs, unitState.value);
+  root.querySelectorAll<HTMLButtonElement>('[data-ttw-unit]').forEach((button) => button.setAttribute('aria-pressed', String(button.dataset.ttwUnit === unitState.value)));
+  (Object.keys(DEFAULT_INPUTS) as FieldName[]).forEach((field) => bindField(root, ui, unitState, field));
+  bindPresets(root, ui, unitState);
+  bindUnitToggle(root, ui, unitState);
+  bindReset(root, ui, unitState);
+  update(root, ui, unitState.value);
+}

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

@@ -0,0 +1,79 @@
+import type { TrailerStatus } from './evaluator';
+import type { TrailerInputs, TrailerPlan, UnitSystem } from './logic';
+import type { TrailerTongueWeightCalculatorUI } from './ui';
+
+const numberFormat = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+
+export function formatNumber(value: number): string {
+  return numberFormat.format(Math.round(value * 10) / 10);
+}
+
+export function formatMass(valueKg: number, unit: UnitSystem): string {
+  return `${formatNumber(unit === 'metric' ? valueKg : valueKg / 0.45359237)} ${unit === 'metric' ? 'kg' : 'lb'}`;
+}
+
+export function formatDistance(valueM: number, unit: UnitSystem): string {
+  return `${formatNumber(unit === 'metric' ? valueM : valueM / 0.3048)} ${unit === 'metric' ? 'm' : 'ft'}`;
+}
+
+const replaceTemplate = (template: string, values: Record<string, string>): string => Object.entries(values).reduce((text, [key, value]) => text.replaceAll(`{${key}}`, value), template);
+
+function setText(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = value;
+}
+
+function renderScene(root: HTMLElement, inputs: TrailerInputs, plan: TrailerPlan, unit: UnitSystem): void {
+  const sceneX = 250 + Math.max(-0.45, Math.min(0.75, inputs.centerPositionM / inputs.hitchDistanceM)) * 220;
+  const loadDot = root.querySelector<SVGCircleElement>('[data-ttw-load-dot]');
+  const loadLine = root.querySelector<SVGLineElement>('[data-ttw-load-line]');
+  if (loadDot) loadDot.setAttribute('cx', String(sceneX));
+  if (loadLine) loadLine.setAttribute('x1', String(sceneX));
+  if (loadLine) loadLine.setAttribute('x2', String(sceneX));
+  setText(root, '[data-ttw-scene-load]', formatMass(inputs.totalMassKg, unit));
+  setText(root, '[data-ttw-scene-center]', formatDistance(inputs.centerPositionM, unit));
+  setText(root, '[data-ttw-scene-tongue]', formatMass(plan.tongueWeightKg, unit));
+}
+
+function renderStatus(root: HTMLElement, status: TrailerStatus, ui: TrailerTongueWeightCalculatorUI): void {
+  const statusText = { safe: ui.statusSafe, light: ui.statusLight, heavy: ui.statusHeavy, invalid: ui.statusInvalid }[status];
+  const badge = root.querySelector<HTMLElement>('[data-ttw-status]');
+  if (badge) {
+    badge.textContent = statusText;
+    badge.dataset.status = status;
+  }
+  root.dataset.status = status;
+}
+
+interface RenderContext {
+  root: HTMLElement;
+  inputs: TrailerInputs;
+  plan: TrailerPlan;
+  unit: UnitSystem;
+  ui: TrailerTongueWeightCalculatorUI;
+}
+
+function renderShift({ root, inputs, plan, unit, ui }: RenderContext): void {
+  const current = inputs.centerPositionM;
+  const target = plan.targetCenterPositionM;
+  let message = ui.shiftNone;
+  if (plan.shiftDistanceM >= 0.01) {
+    const template = target > current ? ui.shiftForwardTemplate : ui.shiftRearwardTemplate;
+    message = replaceTemplate(template, { distance: formatDistance(plan.shiftDistanceM, unit) });
+  }
+  setText(root, '[data-ttw-shift]', message);
+}
+
+export function renderTrailerPlan(context: RenderContext, status: TrailerStatus): void {
+  const { root, inputs, plan, unit, ui } = context;
+  renderScene(root, inputs, plan, unit);
+  renderStatus(root, status, ui);
+  setText(root, '[data-ttw-tongue]', formatMass(plan.tongueWeightKg, unit));
+  root.querySelectorAll<HTMLElement>('[data-ttw-percent]').forEach((element) => { element.textContent = `${formatNumber(plan.tonguePercent)}%`; });
+  setText(root, '[data-ttw-axle]', formatMass(plan.axleLoadKg, unit));
+  setText(root, '[data-ttw-range]', `${formatMass(inputs.minimumTongueKg, unit)} - ${formatMass(inputs.maximumTongueKg, unit)}`);
+  const summary = replaceTemplate(ui.summaryTemplate, { tongue: formatMass(plan.tongueWeightKg, unit), percent: `${formatNumber(plan.tonguePercent)}%`, position: formatDistance(inputs.centerPositionM, unit) });
+  setText(root, '[data-ttw-summary]', summary);
+  setText(root, '[data-ttw-shift-title]', ui.shiftTitle);
+  renderShift(context);
+}

package/src/tool/trailerTongueWeightCalculator/entry.ts

@@ -0,0 +1,30 @@
+import type { MotorToolEntry, ToolLocaleContent } from '../../types';
+import type { TrailerTongueWeightCalculatorUI } from './ui';
+
+export type { TrailerTongueWeightCalculatorUI };
+export type TrailerTongueWeightCalculatorLocaleContent = ToolLocaleContent<TrailerTongueWeightCalculatorUI>;
+
+export const trailerTongueWeightCalculator: MotorToolEntry<TrailerTongueWeightCalculatorUI> = {
+  id: 'trailer-tongue-weight-calculator',
+  icons: {
+    bg: 'mdi:truck-trailer',
+    fg: 'mdi:scale-balance',
+  },
+  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/trailerTongueWeightCalculator/evaluator.ts

@@ -0,0 +1,10 @@
+import type { TrailerInputs, TrailerPlan } from './logic';
+
+export type TrailerStatus = 'safe' | 'light' | 'heavy' | 'invalid';
+
+export function evaluateTrailerStatus(inputs: Pick<TrailerInputs, 'minimumTongueKg' | 'maximumTongueKg'>, plan: TrailerPlan): TrailerStatus {
+  if (!plan.valid || inputs.maximumTongueKg <= inputs.minimumTongueKg) return 'invalid';
+  if (plan.tongueWeightKg < inputs.minimumTongueKg) return 'light';
+  if (plan.tongueWeightKg > inputs.maximumTongueKg) return 'heavy';
+  return 'safe';
+}

package/src/tool/trailerTongueWeightCalculator/i18n/de.ts

@@ -0,0 +1,39 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import { bibliographyEntries } from '../bibliography';
+import type { TrailerTongueWeightCalculatorUI } from '../ui';
+
+const ui: TrailerTongueWeightCalculatorUI = {
+  metricLabel: 'Metrisch kg / m', imperialLabel: 'Imperial lb / ft', resetLabel: 'Rechner zurücksetzen', presetLabel: 'Ladeposition testen', balancedPreset: 'Ausgeglichen', frontHeavyPreset: 'Vorne schwer', rearHeavyPreset: 'Hinten schwer', presetMetaTemplate: '{mass} geladen, Schwerpunkt {position}', geometryLabel: 'Geometrie des Anhängers', geometryHint: 'Platziere den Ladungsschwerpunkt zwischen Kupplung und Achse', totalMassLabel: 'Geladene Anhängermasse', totalMassHint: 'Anhänger und Ladung in fahrbereitem Zustand', hitchDistanceLabel: 'Abstand Kupplung bis Achse', hitchDistanceHint: 'Vom Kupplungspunkt bis zur Achsreferenz messen', centerPositionLabel: 'Ladungsschwerpunkt ab Achse', centerPositionHint: 'Positiv zur Kupplung, negativ hinter der Achse', tongueLimitsLabel: 'Kupplungsgrenzen', tongueLimitsHint: 'Verwende die Werte von Fahrzeug und Kupplung', minimumTongueLabel: 'Minimale Stützlast', minimumTongueHint: 'Gewünschte Abwärtslast an der Kupplung', maximumTongueLabel: 'Maximale Stützlast', maximumTongueHint: 'Der niedrigere Wert aus Fahrzeug- und Kupplungsgrenze', resultKicker: 'Gleichgewicht an der Kupplung', resultTitle: 'Sieh, wohin die Ladung wirkt', sceneLabel: 'Seitenansicht des Anhängers mit Kupplung, Achse, Schwerpunkt und Stützlast', hitchLabel: 'Kupplung', axleLabel: 'Achse', centerOfMassLabel: 'Schwerpunkt', loadedMassLabel: 'Geladene Masse', tongueWeightLabel: 'Stützlast', tonguePercentLabel: 'Anteil an der Kupplung', axleLoadLabel: 'Restlast auf der Achse', allowedRangeLabel: 'Dein zulässiger Bereich', statusSafe: 'Im Bereich', statusLight: 'Zu leicht', statusHeavy: 'Zu schwer', statusInvalid: 'Grenzen prüfen', shiftTitle: 'Praktische Anpassung der Ladung', shiftForwardTemplate: 'Verschiebe den Gesamtschwerpunkt etwa {distance} zur Kupplung, um die Mitte deines Bereichs zu erreichen.', shiftRearwardTemplate: 'Verschiebe den Gesamtschwerpunkt etwa {distance} zur Achse, um die Mitte deines Bereichs zu erreichen.', shiftNone: 'Der aktuelle Schwerpunkt liegt bereits nahe der Mitte deines Bereichs.', summaryTemplate: 'Bei {position} ab der Achse wirken {tongue} an der Kupplung, also {percent} der geladenen Anhängermasse.', formulaLabel: 'Modell', formulaText: 'Stützlast = geladene Masse × Abstand des Schwerpunkts ÷ Abstand Kupplung bis Achse. Das Modell betrachtet den stehenden Anhänger und den eingegebenen Gesamtschwerpunkt.', inputUnitMass: 'kg', inputUnitDistance: 'm', outputUnitMass: 'kg',
+};
+
+const faq = [
+  { question: 'Was schätzt dieser Stützlastrechner?', answer: 'Er schätzt die Abwärtslast an der Kupplung aus geladener Anhängermasse, Abstand zwischen Kupplung und Achse sowie dem Gesamtschwerpunkt ab der Achse. Danach vergleicht er das Ergebnis mit deinen eingegebenen Grenzen.' },
+  { question: 'Warum wird die Stützlast kleiner, wenn die Ladung nach hinten wandert?', answer: 'Der Hebelarm zur Kupplung wird kürzer, wenn der Schwerpunkt zur Achse oder dahinter wandert. Im statischen Gleichgewicht sinkt dadurch die Abwärtslast an der Kupplung.' },
+  { question: 'Welche Grenze soll ich eingeben?', answer: 'Verwende die für deine Kombination gültigen Werte. Als Maximum zählt der niedrigste Wert aus Fahrzeug, Anhängerkupplung, Kupplung und Anhänger. Der Rechner prüft keine Herstellervorgaben.' },
+  { question: 'Ersetzt das Ergebnis eine Wägung?', answer: 'Nein. Es ist eine Planungshilfe für eine Ladungsposition. Prüfe die Herstellerdaten und miss die tatsächliche Stützlast vor der Fahrt mit einer geeigneten Waage.' },
+  { question: 'Was bedeutet die vorgeschlagene Verschiebung?', answer: 'Sie zeigt die Änderung des Gesamtschwerpunkts bis zur Mitte deines Bereichs. Sie sagt nicht, dass ein einzelner Gegenstand genau diese Strecke bewegt werden muss.' },
+];
+const howTo = [
+  { name: 'Einheit wählen', text: 'Wähle metrische kg / m oder imperiale lb / ft, bevor du Maße eingibst.' },
+  { name: 'Geometrie eingeben', text: 'Gib die geladene Gesamtmasse, den Abstand von Kupplung zu Achse und den Schwerpunkt ab der Achse ein.' },
+  { name: 'Grenzen eintragen', text: 'Trage minimale gewünschte und maximale zulässige Stützlast ein.' },
+  { name: 'Ergebnis prüfen', text: 'Lies Szene, Bereich und Richtung der empfohlenen Schwerpunktverschiebung.' },
+];
+const schemas: ToolLocaleContent<TrailerTongueWeightCalculatorUI>['schemas'] = [
+  { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) } as WithContext<FAQPage>,
+  { '@context': 'https://schema.org', '@type': 'HowTo', name: 'Stützlast vor dem Ziehen schätzen', description: 'Statische Stützlast aus Masse und Schwerpunkt berechnen.', step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) } as WithContext<HowTo>,
+  { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: 'Stützlastrechner für Anhänger', description: 'Stützlast aus geladener Masse, Achsabstand und Schwerpunkt im Browser schätzen.', applicationCategory: 'UtilitiesApplication', operatingSystem: 'All', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' }, inLanguage: 'de' } as WithContext<SoftwareApplication>,
+];
+export const content: ToolLocaleContent<TrailerTongueWeightCalculatorUI> = { slug: 'rechner-stuetzlast-anhaenger', title: 'Stützlastrechner für Anhänger', description: 'Schätze die Stützlast deines Anhängers aus Masse, Achsabstand und Schwerpunkt vor der Fahrt.', ui, faqTitle: 'Häufige Fragen', faq, howTo, bibliographyTitle: 'Bibliografische Quellen', bibliography: bibliographyEntries, schemas, seo: [
+  { type: 'title', text: 'Die Last an der Anhängerkupplung berechnen', level: 2 },
+  { type: 'paragraph', html: 'Dieser Rechner übersetzt eine Ladungsposition in eine statische Schätzung der Abwärtslast an der Kupplung. Gib die fahrbereite Anhängermasse, den Abstand von der Achse zur Kupplung und den Gesamtschwerpunkt ein.' },
+  { type: 'paragraph', html: 'So kannst du eine Beladung prüfen, bevor du Kisten, Werkzeug oder Fahrräder umstellst. Das Ergebnis zeigt Stützlast, Prozentanteil, Restlast auf der Achse und den Vergleich mit deinen Grenzen.' },
+  { type: 'title', text: 'Warum die Position der Ladung zählt', level: 2 },
+  { type: 'paragraph', html: 'Das Modell nutzt das statische Drehgleichgewicht um die Achse. Ein Schwerpunkt näher an der Kupplung erhöht seinen Hebelarm und überträgt mehr Last auf die Kupplung. Ein Schwerpunkt an oder hinter der Achse verringert sie.' },
+  { type: 'table', headers: ['Eingabe', 'Rolle im Modell', 'Nutzen'], rows: [['Geladene Masse', 'Gesamte Abwärtslast', 'Vollständige Ladung berücksichtigen'], ['Kupplung bis Achse', 'Hebelarm', 'Reale Geometrie verwenden'], ['Schwerpunkt ab Achse', 'Lage der Gesamtmasse', 'Vordere und hintere Beladung testen'], ['Stützlastgrenzen', 'Vergleichsbereich', 'Umverteilung erkennen']] },
+  { type: 'title', text: 'Das Ergebnis vor der Fahrt nutzen', level: 2 },
+  { type: 'paragraph', html: 'Verwende die geladene Masse und vergleiche die berechnete Stützlast mit dem niedrigsten gültigen Grenzwert aus Fahrzeug, Kupplung und Anhänger. Diese Angaben kennt der Rechner nicht automatisch.' },
+  { type: 'list', items: ['Schwere Gegenstände tief und möglichst nahe an der Achse platzieren, sofern die Anleitung das erlaubt.', 'Die vorgeschlagene Richtung für eine neue Schwerpunktposition testen.', 'Nach jeder Änderung sichern und die tatsächliche Stützlast vor der Fahrt messen.'] },
+  { type: 'tip', title: 'Eine Ladehilfe ist keine rechtliche Freigabe', html: 'Der Rechner nimmt einen stehenden starren Anhänger und einen Gesamtschwerpunkt an. Dynamische Kräfte, Bremsung, Steigung, Reifenlasten und Herstellergrenzen sind nicht enthalten.' },
+] };