@jjlmoya/utils-aquarium 1.59.0 → 1.61.0

package/src/tool/aquariumEvaporationTopOffPlanner/component.astro

@@ -0,0 +1,61 @@
+---
+import type { AquariumEvaporationTopOffPlannerUI } from './ui';
+import './aquarium-evaporation-top-off-planner.css';
+
+interface Props { ui: AquariumEvaporationTopOffPlannerUI; }
+
+const { ui } = Astro.props;
+---
+
+<div class="n-evaporation" data-tool-root data-ui={JSON.stringify(ui)}>
+  <section class="n-output" aria-labelledby="n-evaporation-results">
+    <div class="n-output-head">
+      <div class="n-answer">
+        <span class="n-answer-label">{ui.topOffLabel}</span>
+        <h2 id="n-evaporation-results" class="n-main-result"><strong data-output="main-amount">—</strong><span data-output="main-frequency">{ui.emptyState}</span></h2>
+      </div>
+      <span class="n-status" data-output="status">{ui.stableStatus}</span>
+    </div>
+
+    <div class="n-scene" data-output="scene" aria-live="polite"></div>
+
+    <div class="n-stat-grid" aria-live="polite">
+      <div class="n-stat n-stat-feature"><span>{ui.nextRefillLabel}</span><strong data-output="next-refill">—</strong></div>
+      <div class="n-stat"><span>{ui.dailyLossLabel}</span><strong data-output="daily-loss">—</strong></div>
+      <div class="n-stat"><span>{ui.levelAfterIntervalLabel}</span><strong data-output="level-after">—</strong></div>
+      <div class="n-stat"><span>{ui.reservoirDaysLabel}</span><strong data-output="reservoir-days">—</strong></div>
+      <div class="n-stat" data-salinity-result hidden><span>{ui.estimatedSalinityLabel}</span><strong data-output="salinity">—</strong></div>
+    </div>
+    <p class="n-alert" data-output="alert" role="status" hidden></p>
+  </section>
+
+  <section class="n-controls" aria-labelledby="n-evaporation-inputs">
+    <div class="n-controls-head">
+      <h2 id="n-evaporation-inputs">{ui.unitsLabel}</h2>
+      <div class="n-unit-toggle" role="group" aria-label={ui.unitsLabel}>
+        <button type="button" data-unit-choice="metric" class="is-active" aria-pressed="true">{ui.metricLabel}</button>
+        <button type="button" data-unit-choice="imperial" aria-pressed="false">{ui.imperialLabel}</button>
+      </div>
+    </div>
+
+    <div class="n-fields">
+      <label class="n-field"><span>{ui.tankVolumeLabel} <small data-unit="tank">{ui.litreUnit}</small></span><input data-field="tankVolume" type="number" min="0.1" max="100000" step="0.1" inputmode="decimal" /></label>
+      <div class="n-field"><div class="n-field-head"><label for="n-evaporation-loss">{ui.measuredLossLabel} <small data-unit="loss">{ui.millilitreUnit}</small></label><div class="n-mini-toggle" role="group" aria-label={ui.lossUnitLabel}><button type="button" data-loss-unit-choice="millilitres" class="is-active" aria-pressed="true">{ui.millilitreUnit}</button><button type="button" data-loss-unit-choice="litres" aria-pressed="false">{ui.litreUnit}</button><button type="button" data-loss-unit-choice="fluidOunces" aria-pressed="false">{ui.fluidOunceUnit}</button></div></div><input id="n-evaporation-loss" data-field="measuredLoss" type="number" min="0.1" max="100000" step="0.1" inputmode="decimal" /></div>
+      <label class="n-field"><span>{ui.observationDaysLabel} <small>{ui.dayUnit}</small></span><input data-field="observationDays" type="number" min="1" max="90" step="1" inputmode="numeric" /></label>
+      <label class="n-field"><span>{ui.refillIntervalLabel} <small>{ui.dayUnit}</small></span><input data-field="refillIntervalDays" type="number" min="1" max="30" step="1" inputmode="numeric" /></label>
+    </div>
+
+    <details class="n-advanced"><summary>{ui.advancedLabel}</summary><div class="n-advanced-grid"><label class="n-field"><span>{ui.reservoirCapacityLabel} <small data-unit="reservoir">{ui.litreUnit}</small></span><input data-field="reservoirCapacity" type="number" min="0.1" max="100000" step="0.1" inputmode="decimal" /></label><div class="n-water-type"><span>{ui.waterTypeLabel}</span><div class="n-mini-toggle" role="group" aria-label={ui.waterTypeLabel}><button type="button" data-water-type-choice="freshwater" class="is-active" aria-pressed="true">{ui.freshwaterLabel}</button><button type="button" data-water-type-choice="marine" aria-pressed="false">{ui.marineLabel}</button></div></div><label class="n-field" data-marine-field hidden><span>{ui.startingSalinityLabel} <small>SG</small></span><input data-field="startingSpecificGravity" type="number" min="1" max="1.04" step="0.001" inputmode="decimal" /></label></div></details>
+    <div class="n-schedule-head"><h3>{ui.scheduleTitle}</h3><span>{ui.levelLabel}</span></div>
+    <div class="n-calendar" data-output="schedule" role="list" aria-label={ui.scheduleTitle}></div>
+  </section>
+</div>
+
+<script>
+  import { startEvaporationController } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-tool-root]');
+  if (root?.dataset.ui) {
+    startEvaporationController({ root, ui: JSON.parse(root.dataset.ui) });
+  }
+</script>

package/src/tool/aquariumEvaporationTopOffPlanner/controller.ts

@@ -0,0 +1,232 @@
+import { calculateEvaporation, type EvaporationInputs } from './logic';
+import { evaluateEvaporation, type EvaporationStatus } from './evaluator';
+import { formatValue, renderScheduleRows, renderWaterline } from './dom-views';
+import { readEvaporationState, writeEvaporationState, type StoredEvaporationState } from './storage';
+import type { AquariumEvaporationTopOffPlannerUI } from './ui';
+
+interface ControllerOptions {
+  root: HTMLElement;
+  ui: AquariumEvaporationTopOffPlannerUI;
+}
+
+type Units = 'metric' | 'imperial';
+type LossUnit = 'millilitres' | 'litres' | 'fluidOunces';
+type WaterType = 'freshwater' | 'marine';
+
+interface DisplayState {
+  units: Units;
+  lossUnit: LossUnit;
+  waterType: WaterType;
+  input: EvaporationInputs;
+}
+
+const IMPERIAL_GALLON_LITRES = 4.54609;
+const IMPERIAL_FLUID_OUNCE_MILLILITRES = 28.4131;
+const DEFAULT_INPUT: EvaporationInputs = {
+  tankVolumeLitres: 120,
+  measuredLossMillilitres: 1200,
+  observationDays: 7,
+  refillIntervalDays: 3,
+  reservoirCapacityLitres: 10,
+  startingSpecificGravity: 1.025,
+};
+
+function numberInput(root: HTMLElement, field: string): HTMLInputElement {
+  return root.querySelector(`[data-field="${field}"]`) as HTMLInputElement;
+}
+
+function lossToMillilitres(value: number, unit: LossUnit): number {
+  if (unit === 'litres') return value * 1000;
+  if (unit === 'fluidOunces') return value * IMPERIAL_FLUID_OUNCE_MILLILITRES;
+  return value;
+}
+
+function millilitresToLoss(value: number, unit: LossUnit): number {
+  if (unit === 'litres') return value / 1000;
+  if (unit === 'fluidOunces') return value / IMPERIAL_FLUID_OUNCE_MILLILITRES;
+  return value;
+}
+
+function readInput(root: HTMLElement, state: DisplayState): EvaporationInputs {
+  const tankValue = Number(numberInput(root, 'tankVolume').value);
+  const lossValue = Number(numberInput(root, 'measuredLoss').value);
+  const reservoirValue = Number(numberInput(root, 'reservoirCapacity').value);
+  const salinityValue = Number(numberInput(root, 'startingSpecificGravity').value);
+  const input: EvaporationInputs = {
+    tankVolumeLitres: state.units === 'metric' ? tankValue : tankValue * IMPERIAL_GALLON_LITRES,
+    measuredLossMillilitres: lossToMillilitres(lossValue, state.lossUnit),
+    observationDays: Number(numberInput(root, 'observationDays').value),
+    refillIntervalDays: Number(numberInput(root, 'refillIntervalDays').value),
+    reservoirCapacityLitres: state.units === 'metric' ? reservoirValue : reservoirValue * IMPERIAL_GALLON_LITRES,
+  };
+  if (Number.isFinite(salinityValue) && salinityValue > 0) input.startingSpecificGravity = salinityValue;
+  return input;
+}
+
+function writeInput(root: HTMLElement, state: DisplayState): void {
+  const tank = state.units === 'metric' ? state.input.tankVolumeLitres : state.input.tankVolumeLitres / IMPERIAL_GALLON_LITRES;
+  const loss = millilitresToLoss(state.input.measuredLossMillilitres, state.lossUnit);
+  const reservoirLitres = state.input.reservoirCapacityLitres ?? 10;
+  const reservoir = state.units === 'metric' ? reservoirLitres : reservoirLitres / IMPERIAL_GALLON_LITRES;
+  numberInput(root, 'tankVolume').value = String(Number(tank.toFixed(2)));
+  numberInput(root, 'measuredLoss').value = String(Number(loss.toFixed(2)));
+  numberInput(root, 'observationDays').value = String(state.input.observationDays);
+  numberInput(root, 'refillIntervalDays').value = String(state.input.refillIntervalDays);
+  numberInput(root, 'reservoirCapacity').value = String(Number(reservoir.toFixed(2)));
+  numberInput(root, 'startingSpecificGravity').value = String(state.input.startingSpecificGravity ?? 1.025);
+}
+
+function unitLabel(ui: AquariumEvaporationTopOffPlannerUI, unit: LossUnit): string {
+  if (unit === 'litres') return ui.litreUnit;
+  if (unit === 'fluidOunces') return ui.fluidOunceUnit;
+  return ui.millilitreUnit;
+}
+
+function volumeUnit(ui: AquariumEvaporationTopOffPlannerUI, units: Units): string {
+  return units === 'metric' ? ui.litreUnit : ui.gallonUnit;
+}
+
+function lossUnitForUnits(units: Units, current: LossUnit): LossUnit {
+  if (units === 'imperial') return 'fluidOunces';
+  return current === 'fluidOunces' ? 'millilitres' : current;
+}
+
+function updateLabels(root: HTMLElement, ui: AquariumEvaporationTopOffPlannerUI, state: DisplayState): void {
+  const volume = volumeUnit(ui, state.units);
+  root.querySelector('[data-unit="tank"]')?.replaceChildren(document.createTextNode(volume));
+  root.querySelector('[data-unit="reservoir"]')?.replaceChildren(document.createTextNode(volume));
+  root.querySelector('[data-unit="loss"]')?.replaceChildren(document.createTextNode(unitLabel(ui, state.lossUnit)));
+  root.querySelectorAll<HTMLButtonElement>('[data-unit-choice]').forEach((button) => {
+    const active = button.dataset.unitChoice === state.units;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  root.querySelectorAll<HTMLButtonElement>('[data-loss-unit-choice]').forEach((button) => {
+    const visible = state.units === 'metric' || button.dataset.lossUnitChoice === 'fluidOunces';
+    button.hidden = !visible;
+    const active = button.dataset.lossUnitChoice === state.lossUnit;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+}
+
+function updateWaterType(root: HTMLElement, state: DisplayState): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-water-type-choice]').forEach((button) => {
+    const active = button.dataset.waterTypeChoice === state.waterType;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  const marineField = root.querySelector<HTMLElement>('[data-marine-field]');
+  if (marineField) marineField.hidden = state.waterType !== 'marine';
+}
+
+function outputVolume(valueLitres: number, units: Units): number {
+  return units === 'metric' ? valueLitres : valueLitres / IMPERIAL_GALLON_LITRES;
+}
+
+function outputLoss(valueLitres: number, unit: LossUnit): number {
+  return millilitresToLoss(valueLitres * 1000, unit);
+}
+
+function statusText(ui: AquariumEvaporationTopOffPlannerUI, status: EvaporationStatus): string {
+  if (status === 'frequent') return ui.frequentStatus;
+  if (status === 'watch') return ui.watchStatus;
+  return ui.stableStatus;
+}
+
+function setOutput(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector(selector);
+  if (element) element.textContent = value;
+}
+
+function clearResults(root: HTMLElement, ui: AquariumEvaporationTopOffPlannerUI): void {
+  setOutput(root, '[data-output="main-amount"]', '—');
+  setOutput(root, '[data-output="main-frequency"]', ui.invalidState);
+  root.querySelector('[data-output="scene"]')?.replaceChildren();
+  root.querySelector('[data-output="schedule"]')?.replaceChildren();
+  const alert = root.querySelector<HTMLElement>('[data-output="alert"]');
+  if (alert) alert.hidden = true;
+}
+
+function renderSecondary(root: HTMLElement, ui: AquariumEvaporationTopOffPlannerUI, result: NonNullable<ReturnType<typeof calculateEvaporation>>, state: DisplayState): void {
+  const loss = formatValue(outputLoss(result.dailyLossLitres, state.lossUnit), 'en-US', state.lossUnit === 'litres' ? 2 : 1);
+  setOutput(root, '[data-output="daily-loss"]', `${loss} ${unitLabel(ui, state.lossUnit)}`);
+  setOutput(root, '[data-output="next-refill"]', `${formatValue(outputVolume(result.nextRefillLitres, state.units), 'en-US', 2)} ${volumeUnit(ui, state.units)}`);
+  setOutput(root, '[data-output="level-after"]', `${formatValue(result.levelAfterIntervalPercent, 'en-US', 1)} ${ui.percentUnit}`);
+  setOutput(root, '[data-output="reservoir-days"]', result.reservoirDays === undefined ? '—' : `${formatValue(result.reservoirDays, 'en-US', 1)} ${ui.dayUnit}`);
+  setOutput(root, '[data-output="salinity"]', result.salinityAfterInterval === undefined ? '—' : formatValue(result.salinityAfterInterval, 'en-US', 3));
+}
+
+function renderSignals(root: HTMLElement, ui: AquariumEvaporationTopOffPlannerUI, result: NonNullable<ReturnType<typeof calculateEvaporation>>, state: DisplayState): void {
+  const alert = root.querySelector<HTMLElement>('[data-output="alert"]');
+  if (alert) {
+    alert.textContent = result.isCritical ? ui.criticalAlert : '';
+    alert.hidden = !result.isCritical;
+  }
+  const salinity = root.querySelector<HTMLElement>('[data-salinity-result]');
+  if (salinity) salinity.hidden = state.waterType !== 'marine';
+}
+
+function renderResults(root: HTMLElement, ui: AquariumEvaporationTopOffPlannerUI, state: DisplayState): void {
+  const result = calculateEvaporation(state.input);
+  if (result === null) {
+    clearResults(root, ui);
+    return;
+  }
+  setOutput(root, '[data-output="main-amount"]', `${formatValue(outputVolume(result.nextRefillLitres, state.units), 'en-US', 2)} ${volumeUnit(ui, state.units)}`);
+  setOutput(root, '[data-output="main-frequency"]', `${ui.everyLabel} ${state.input.refillIntervalDays} ${ui.dayUnit}`);
+  setOutput(root, '[data-output="status"]', statusText(ui, evaluateEvaporation(result)));
+  renderSecondary(root, ui, result, state);
+  renderSignals(root, ui, result, state);
+  const scene = root.querySelector('[data-output="scene"]');
+  if (scene) scene.innerHTML = renderWaterline(result, ui);
+  const schedule = root.querySelector('[data-output="schedule"]');
+  if (schedule) schedule.innerHTML = renderScheduleRows(result, ui, state.units);
+}
+
+function storedState(): DisplayState {
+  const stored = readEvaporationState() as StoredEvaporationState | null;
+  if (stored === null) return { units: 'metric', lossUnit: 'millilitres', waterType: 'freshwater', input: DEFAULT_INPUT };
+  const units: Units = stored.units === 'imperial' ? 'imperial' : 'metric';
+  const lossUnit = stored.lossUnit ?? (units === 'imperial' ? 'fluidOunces' : 'millilitres');
+  return {
+    units,
+    lossUnit,
+    waterType: stored.waterType === 'marine' ? 'marine' : 'freshwater',
+    input: { ...DEFAULT_INPUT, ...stored.input },
+  };
+}
+
+function persistAndRender(root: HTMLElement, ui: AquariumEvaporationTopOffPlannerUI, state: DisplayState): void {
+  updateLabels(root, ui, state);
+  updateWaterType(root, state);
+  renderResults(root, ui, state);
+  writeEvaporationState(state);
+}
+
+export function startEvaporationController({ root, ui }: ControllerOptions): void {
+  let state = storedState();
+  writeInput(root, state);
+  persistAndRender(root, ui, state);
+  root.querySelectorAll<HTMLButtonElement>('[data-unit-choice]').forEach((button) => button.addEventListener('click', () => {
+    const nextUnits = button.dataset.unitChoice as Units;
+    const nextLossUnit = lossUnitForUnits(nextUnits, state.lossUnit);
+    state = { ...state, units: nextUnits, lossUnit: nextLossUnit, input: readInput(root, state) };
+    writeInput(root, state);
+    persistAndRender(root, ui, state);
+  }));
+  root.querySelectorAll<HTMLButtonElement>('[data-loss-unit-choice]').forEach((button) => button.addEventListener('click', () => {
+    const nextLossUnit = button.dataset.lossUnitChoice as LossUnit;
+    state = { ...state, lossUnit: nextLossUnit, input: readInput(root, state) };
+    writeInput(root, state);
+    persistAndRender(root, ui, state);
+  }));
+  root.querySelectorAll<HTMLButtonElement>('[data-water-type-choice]').forEach((button) => button.addEventListener('click', () => {
+    state = { ...state, waterType: button.dataset.waterTypeChoice as WaterType };
+    persistAndRender(root, ui, state);
+  }));
+  root.querySelectorAll<HTMLInputElement>('input').forEach((input) => input.addEventListener('input', () => {
+    state = { ...state, input: readInput(root, state) };
+    persistAndRender(root, ui, state);
+  }));
+}

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

@@ -0,0 +1,39 @@
+import type { AquariumEvaporationTopOffPlannerUI } from './ui';
+import type { EvaporationResult } from './logic';
+
+export function formatValue(value: number, locale: string, digits = 1): string {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  }).format(value);
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+export function renderWaterline(result: EvaporationResult, ui: AquariumEvaporationTopOffPlannerUI): string {
+  const level = clamp(result.levelAfterIntervalPercent, 0, 100);
+  const waterHeight = 156 * (level / 100);
+  const waterY = 222 - waterHeight;
+  const lossHeight = 156 - waterHeight;
+  return `<svg class="n-evaporation-scene" viewBox="0 0 320 250" role="img" aria-label="${ui.levelAfterIntervalLabel}"><rect class="n-tank-frame" x="54" y="38" width="212" height="184" rx="12"></rect><rect class="n-water" x="62" y="${waterY.toFixed(2)}" width="196" height="${waterHeight.toFixed(2)}" rx="6"></rect><rect class="n-loss-zone" x="62" y="66" width="196" height="${Math.max(0, lossHeight).toFixed(2)}" rx="6"></rect><line class="n-waterline" x1="62" y1="${waterY.toFixed(2)}" x2="258" y2="${waterY.toFixed(2)}"></line><path class="n-mark" d="M42 66h18M42 222h18"></path><text class="n-mark-label" x="18" y="71">100%</text><text class="n-mark-label" x="18" y="227">0%</text><text class="n-scene-label" x="160" y="25">${formatValue(level, 'en-US', 1)}%</text><text class="n-scene-caption" x="160" y="240">${ui.levelLabel}</text></svg>`;
+}
+
+function unitFor(ui: AquariumEvaporationTopOffPlannerUI, units: 'metric' | 'imperial'): string {
+  return units === 'metric' ? ui.litreUnit : ui.gallonUnit;
+}
+
+export function renderScheduleRows(
+  result: EvaporationResult,
+  ui: AquariumEvaporationTopOffPlannerUI,
+  units: 'metric' | 'imperial',
+): string {
+  return result.schedule.slice(1).map((point) => {
+    const refill = point.refillLitres > 0
+      ? `${formatValue(point.refillLitres / (units === 'metric' ? 1 : 4.54609), 'en-US', 2)} ${unitFor(ui, units)}`
+      : '';
+    const marker = refill === '' ? '' : `<strong>${refill}</strong>`;
+    return `<div class="n-calendar-item${refill === '' ? '' : ' is-refill'}" role="listitem"><span>${point.day}</span><small>${formatValue(point.levelPercent, 'en-US', 1)}%</small>${marker}</div>`;
+  }).join('');
+}

package/src/tool/aquariumEvaporationTopOffPlanner/entry.ts

@@ -0,0 +1,27 @@
+import type { AquariumToolEntry, ToolLocaleContent } from '../../types';
+import type { AquariumEvaporationTopOffPlannerUI } from './ui';
+
+export type { AquariumEvaporationTopOffPlannerUI };
+export type AquariumEvaporationTopOffPlannerLocaleContent = ToolLocaleContent<AquariumEvaporationTopOffPlannerUI>;
+
+export const aquariumEvaporationTopOffPlanner: AquariumToolEntry<AquariumEvaporationTopOffPlannerUI> = {
+  id: 'aquarium-evaporation-top-off-planner',
+  icons: { bg: 'mdi:fishbowl-outline', fg: 'mdi:water-minus' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/aquariumEvaporationTopOffPlanner/evaluator.ts

@@ -0,0 +1,9 @@
+import type { EvaporationResult } from './logic';
+
+export type EvaporationStatus = 'steady' | 'watch' | 'frequent';
+
+export function evaluateEvaporation(result: EvaporationResult): EvaporationStatus {
+  if (result.dailyRatePercent >= 1) return 'frequent';
+  if (result.dailyRatePercent >= 0.5) return 'watch';
+  return 'steady';
+}

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

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.de;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/en.ts

@@ -0,0 +1,179 @@
+import { bibliography } from '../bibliography';
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AquariumEvaporationTopOffPlannerUI } from '../ui';
+
+const slug = 'aquarium-evaporation-top-off-planner';
+const title = 'Aquarium Evaporation and Top Off Planner';
+const description = 'Turn a real aquarium evaporation measurement into a daily loss, refill amount and simple top off calendar for freshwater or saltwater tanks.';
+
+const faq = [
+  {
+    question: 'How should I measure evaporation for this planner?',
+    answer: 'Mark the normal waterline, avoid water changes, measure the water you add after several days, and enter that amount with the exact observation period. A longer observation reduces the effect of one unusual day.',
+  },
+  {
+    question: 'Does evaporation remove salt from a marine aquarium?',
+    answer: 'No. Evaporation removes water while dissolved salt remains. Use the planner for the missing volume, then follow your aquarium method for preparing top off water and check salinity when appropriate.',
+  },
+  {
+    question: 'Why does the planner use my own measurement instead of room conditions?',
+    answer: 'Aquarium covers, airflow, lighting, temperature, humidity and surface agitation can change the loss. A measured loss is more useful for scheduling than a generic climate estimate.',
+  },
+  {
+    question: 'Can this replace water changes?',
+    answer: 'No. Top off replaces water lost to evaporation. It does not remove accumulated waste or replace a water change chosen for water quality and animal care.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Enter the working tank volume',
+    text: 'Use the approximate water volume currently in the aquarium, not the outside dimensions or the advertised maximum capacity.',
+  },
+  {
+    name: 'Record a real evaporation loss',
+    text: 'Measure how much water you add after a stable observation period. Enter the amount in millilitres or fluid ounces and the number of days observed.',
+  },
+  {
+    name: 'Choose a refill interval',
+    text: 'Choose how often you want to top off. The planner estimates the amount due at that interval and shows the level between refills.',
+  },
+  {
+    name: 'Use the calendar as a routine',
+    text: 'Use the projected refill rows as a reminder, then remeasure after changes to the cover, airflow, lighting or room conditions.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step, index) => ({
+    '@type': 'HowToStep',
+    position: index + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'en',
+};
+
+export const content: ToolLocaleContent<AquariumEvaporationTopOffPlannerUI> = {
+  slug,
+  title,
+  description,
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Schedule From a Real Waterline', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Evaporation is easy to notice and surprisingly easy to misjudge. A covered tank in a humid room can lose very little, while strong surface movement, warm lights or dry air can make the waterline fall faster. This planner starts with the amount you actually replaced, so the routine reflects your aquarium rather than a generic room estimate.',
+    },
+    { type: 'title', text: 'Measure the Loss Before You Plan the Top Off', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Mark the normal waterline and observe the tank for several days without a water change. Measure the water added to restore the line. The planner divides that measured volume by the observation period, then projects the loss to your chosen refill interval. Repeat the measurement after changing a lid, fan, light schedule or room location.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Use a stable observation period:</strong> several days are more useful than a single reading.',
+        '<strong>Use working volume:</strong> include the water currently present, not the empty glass capacity.',
+        '<strong>Choose a practical interval:</strong> shorter intervals reduce the visible level swing.',
+        '<strong>Recheck after changes:</strong> airflow and surface agitation can change the measured rate.',
+      ],
+    },
+    { type: 'title', text: 'Read the Waterline as a Maintenance Signal', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'The daily rate shows how much water the tank loses relative to its working volume. The next refill tells you what to prepare for the selected interval, while the calendar makes the loss visible between refills. These are scheduling estimates, not a water quality assessment and not a substitute for observing animals and testing the water.',
+    },
+    {
+      type: 'tip',
+      title: 'Saltwater needs a separate salinity check',
+      html: '<p>Evaporation leaves dissolved salt behind. For a marine aquarium, top off with the water type required by your method and check salinity when the level has moved noticeably. Never treat the calculated volume as a universal dosing instruction.</p>',
+    },
+    {
+      type: 'table',
+      headers: ['Output', 'What it tells you'],
+      rows: [
+        ['Daily loss', 'The measured evaporation converted to one day'],
+        ['Next refill', 'The volume expected at your chosen interval'],
+        ['Thirty day loss', 'A planning estimate for water preparation'],
+        ['Level after interval', 'The projected level before the scheduled top off'],
+      ],
+    },
+  ],
+  ui: {
+    unitsLabel: 'Units',
+    metricLabel: 'Metric',
+    imperialLabel: 'Imperial',
+    tankVolumeLabel: 'Working tank volume',
+    measuredLossLabel: 'Water added after observation',
+    lossUnitLabel: 'Measured loss unit',
+    observationDaysLabel: 'Observation period',
+    refillIntervalLabel: 'Top off every',
+    reservoirCapacityLabel: 'ATO reservoir',
+    advancedLabel: 'Optional ATO and marine settings',
+    waterTypeLabel: 'Water type',
+    freshwaterLabel: 'Freshwater',
+    marineLabel: 'Marine',
+    startingSalinityLabel: 'Starting salinity',
+    estimatedSalinityLabel: 'Estimated SG',
+    reservoirDaysLabel: 'ATO autonomy',
+    criticalAlert: 'Critical level swing: shorten the refill interval.',
+    volumeHint: 'Use the water currently in the tank.',
+    lossHint: 'Measure the amount needed to restore the line.',
+    intervalHint: 'Shorter intervals make the level swing smaller.',
+    resultTitle: 'Your top off rhythm',
+    dailyLossLabel: 'Daily loss',
+    dailyRateLabel: 'Daily rate of tank volume',
+    nextRefillLabel: 'Next top off',
+    thirtyDayLabel: 'Thirty day preparation',
+    levelAfterIntervalLabel: 'Projected level before top off',
+    twoPercentDaysLabel: 'Days to lose 2 percent',
+    scheduleTitle: 'Fourteen day waterline',
+    dayLabel: 'Day',
+    topOffLabel: 'Top off',
+    everyLabel: 'every',
+    levelLabel: 'Level before top off',
+    stableStatus: 'Steady measured loss',
+    watchStatus: 'Watch the waterline',
+    frequentStatus: 'Frequent top off likely',
+    emptyState: 'Add your tank data to begin.',
+    invalidState: 'Check the values: use positive numbers, an observation up to 90 days and a refill interval up to 30 days.',
+    measurementNote: 'This projection is based on your measured loss. Recheck it after changing the tank cover, airflow, lighting or room conditions.',
+    saltwaterNote: 'Evaporation leaves dissolved salt behind. Follow your aquarium method for the correct top off water and check salinity when needed.',
+    resetLabel: 'Reset example',
+    litreUnit: 'L',
+    gallonUnit: 'imp gal',
+    millilitreUnit: 'mL',
+    fluidOunceUnit: 'fl oz',
+    dayUnit: 'days',
+    percentUnit: '%',
+  },
+};

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/es.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.es;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/fr.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.fr;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/id.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.id;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/it.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.it;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/ja.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.ja;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/ko.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.ko;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/nl.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.nl;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/pl.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.pl;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/pt.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.pt;

package/src/tool/aquariumEvaporationTopOffPlanner/i18n/ru.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.ru;