@jjlmoya/utils-finance 1.35.0 → 1.37.0

package/src/tests/registry_contract.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { pathToFileURL } from 'url';
+import { ALL_ENTRIES } from '../entries';
+import { ALL_TOOLS } from '../tools';
+import type { ToolDefinition } from '../types';
+
+function isToolDefinition(value: unknown): value is ToolDefinition {
+  if (!value || typeof value !== 'object') return false;
+
+  const candidate = value as Record<string, unknown>;
+  return Boolean(
+    candidate.entry &&
+      typeof candidate.entry === 'object' &&
+      typeof candidate.Component === 'function' &&
+      typeof candidate.SEOComponent === 'function' &&
+      typeof candidate.BibliographyComponent === 'function',
+  );
+}
+
+const toolRoot = join(process.cwd(), 'src', 'tool');
+const toolDirectories = readdirSync(toolRoot, { withFileTypes: true })
+  .filter((entry) => entry.isDirectory() && existsSync(join(toolRoot, entry.name, 'index.ts')))
+  .map((entry) => entry.name)
+  .sort();
+
+describe('Library registry contract', () => {
+  it('keeps ALL_ENTRIES and ALL_TOOLS synchronized by id', () => {
+    const entryIds = ALL_ENTRIES.map((entry) => entry.id);
+    const toolIds = ALL_TOOLS.map((tool) => tool.entry.id);
+
+    expect(new Set(entryIds).size).toBe(entryIds.length);
+    expect(new Set(toolIds).size).toBe(toolIds.length);
+    expect([...toolIds].sort()).toEqual([...entryIds].sort());
+  });
+
+  it('registers every tool runtime index in both public registries', async () => {
+    const failures: string[] = [];
+
+    for (const directory of toolDirectories) {
+      const runtimeModule = await import(
+        pathToFileURL(join(toolRoot, directory, 'index.ts')).href,
+      );
+      const definitions = [...new Set(Object.values(runtimeModule).filter(isToolDefinition))];
+
+      if (definitions.length !== 1) {
+        failures.push(`${directory}: expected exactly one ToolDefinition export, found ${definitions.length}`);
+        continue;
+      }
+
+      const [definition] = definitions;
+      if (!definition) {
+        failures.push(`${directory}: runtime definition is undefined`);
+        continue;
+      }
+      if (!ALL_TOOLS.some((tool) => tool.entry.id === definition.entry.id)) {
+        failures.push(`${directory}: runtime definition is missing from ALL_TOOLS`);
+      }
+      if (!ALL_ENTRIES.some((entry) => entry.id === definition.entry.id)) {
+        failures.push(`${directory}: runtime entry is missing from ALL_ENTRIES`);
+      }
+    }
+
+    expect(failures).toEqual([]);
+  });
+});

package/src/tests/script_density.test.ts

@@ -1,94 +1,94 @@
-import { describe, expect, it } from 'vitest';
-import { ALL_TOOLS } from '../tools';
-
-type ScriptLocale = keyof typeof SCRIPT_RULES;
-
-const SCRIPT_RULES = {
-  ja: {
-    language: 'Japanese',
-    scriptName: 'kana/kanji',
-    scriptCharacters: /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/gu,
-    minScriptRatio: 0.45,
-  },
-  ko: {
-    language: 'Korean',
-    scriptName: 'hangul',
-    scriptCharacters: /\p{Script=Hangul}/gu,
-    minScriptRatio: 0.55,
-  },
-  ru: {
-    language: 'Russian',
-    scriptName: 'cyrillic',
-    scriptCharacters: /\p{Script=Cyrillic}/gu,
-    minScriptRatio: 0.65,
-  },
-  zh: {
-    language: 'Chinese',
-    scriptName: 'han',
-    scriptCharacters: /\p{Script=Han}/gu,
-    minScriptRatio: 0.45,
-  },
-} as const;
-
-const LETTERS = /\p{L}/gu;
-const TRANSLATABLE_KEYS = ['title', 'description', 'ui', 'seo', 'faq', 'howTo'] as const;
-
-function collectStrings(value: unknown): string[] {
-  if (typeof value === 'string') return [value];
-  if (!value || typeof value !== 'object') return [];
-  if (Array.isArray(value)) return value.flatMap(collectStrings);
-  return Object.values(value).flatMap(collectStrings);
-}
-
-function normalizeText(value: unknown): string {
-  return collectStrings(value).join(' ').normalize('NFC');
-}
-
-function translatableContent(content: Record<string, unknown>) {
-  return TRANSLATABLE_KEYS.map((key) => content[key]);
-}
-
-function letterCount(text: string): number {
-  return text.match(LETTERS)?.length ?? 0;
-}
-
-function scriptCount(text: string, locale: ScriptLocale): number {
-  return text.match(SCRIPT_RULES[locale].scriptCharacters)?.length ?? 0;
-}
-
-function scriptRatio(text: string, locale: ScriptLocale): number {
-  const letters = letterCount(text);
-  if (letters === 0) return 0;
-  return scriptCount(text, locale) / letters;
-}
-
-describe('Native script density validation', () => {
-  ALL_TOOLS.forEach((tool) => {
-    describe(`Tool: ${tool.entry.id}`, () => {
-      Object.keys(SCRIPT_RULES).forEach((locale) => {
-        it(`${locale} keeps most translated text in its native script`, async () => {
-          const typedLocale = locale as ScriptLocale;
-          const loader = tool.entry.i18n[typedLocale];
-          if (!loader) return;
-
-          const content = await loader();
-          const rule = SCRIPT_RULES[typedLocale];
-          const text = normalizeText(translatableContent(content as Record<string, unknown>));
-          const letters = letterCount(text);
-          const matches = scriptCount(text, typedLocale);
-          const ratio = scriptRatio(text, typedLocale);
-
-          expect(
-            ratio,
-            [
-              `Possible broken translation detected in ${tool.entry.id}/${typedLocale} (${rule.language}).`,
-              `The text has ${matches} ${rule.scriptName} characters out of ${letters} analyzed letters (${(ratio * 100).toFixed(1)}%).`,
-              `Most translatable content should be written in ${rule.scriptName} script.`,
-              'Non-translatable fields such as slug, bibliography, and schemas are ignored to avoid false positives.',
-            ].join(' '),
-          ).toBeGreaterThanOrEqual(rule.minScriptRatio);
-        });
-      });
-    });
-  });
-});
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+type ScriptLocale = keyof typeof SCRIPT_RULES;
+
+const SCRIPT_RULES = {
+  ja: {
+    language: 'Japanese',
+    scriptName: 'kana/kanji',
+    scriptCharacters: /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/gu,
+    minScriptRatio: 0.45,
+  },
+  ko: {
+    language: 'Korean',
+    scriptName: 'hangul',
+    scriptCharacters: /\p{Script=Hangul}/gu,
+    minScriptRatio: 0.55,
+  },
+  ru: {
+    language: 'Russian',
+    scriptName: 'cyrillic',
+    scriptCharacters: /\p{Script=Cyrillic}/gu,
+    minScriptRatio: 0.65,
+  },
+  zh: {
+    language: 'Chinese',
+    scriptName: 'han',
+    scriptCharacters: /\p{Script=Han}/gu,
+    minScriptRatio: 0.45,
+  },
+} as const;
+
+const LETTERS = /\p{L}/gu;
+const TRANSLATABLE_KEYS = ['title', 'description', 'ui', 'seo', 'faq', 'howTo'] as const;
+
+function collectStrings(value: unknown): string[] {
+  if (typeof value === 'string') return [value];
+  if (!value || typeof value !== 'object') return [];
+  if (Array.isArray(value)) return value.flatMap(collectStrings);
+  return Object.values(value).flatMap(collectStrings);
+}
+
+function normalizeText(value: unknown): string {
+  return collectStrings(value).join(' ').normalize('NFC');
+}
+
+function translatableContent(content: Record<string, unknown>) {
+  return TRANSLATABLE_KEYS.map((key) => content[key]);
+}
+
+function letterCount(text: string): number {
+  return text.match(LETTERS)?.length ?? 0;
+}
+
+function scriptCount(text: string, locale: ScriptLocale): number {
+  return text.match(SCRIPT_RULES[locale].scriptCharacters)?.length ?? 0;
+}
+
+function scriptRatio(text: string, locale: ScriptLocale): number {
+  const letters = letterCount(text);
+  if (letters === 0) return 0;
+  return scriptCount(text, locale) / letters;
+}
+
+describe('Native script density validation', () => {
+  ALL_TOOLS.forEach((tool) => {
+    describe(`Tool: ${tool.entry.id}`, () => {
+      Object.keys(SCRIPT_RULES).forEach((locale) => {
+        it(`${locale} keeps most translated text in its native script`, async () => {
+          const typedLocale = locale as ScriptLocale;
+          const loader = tool.entry.i18n[typedLocale];
+          if (!loader) return;
+
+          const content = await loader();
+          const rule = SCRIPT_RULES[typedLocale];
+          const text = normalizeText(translatableContent(content as unknown as Record<string, unknown>));
+          const letters = letterCount(text);
+          const matches = scriptCount(text, typedLocale);
+          const ratio = scriptRatio(text, typedLocale);
+
+          expect(
+            ratio,
+            [
+              `Possible broken translation detected in ${tool.entry.id}/${typedLocale} (${rule.language}).`,
+              `The text has ${matches} ${rule.scriptName} characters out of ${letters} analyzed letters (${(ratio * 100).toFixed(1)}%).`,
+              `Most translatable content should be written in ${rule.scriptName} script.`,
+              'Non-translatable fields such as slug, bibliography, and schemas are ignored to avoid false positives.',
+            ].join(' '),
+          ).toBeGreaterThanOrEqual(rule.minScriptRatio);
+        });
+      });
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { financeCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 19 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(19);
+    it('should have 20 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(20);
     });
 
     it('financeCategory should be defined', () => {

package/src/tests/translation_copy.test.ts

@@ -106,8 +106,8 @@ describe('Locales must not copy another locale wholesale', () => {
 
       for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
         for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
-          const left = locales[leftIndex];
-          const right = locales[rightIndex];
+          const left = locales[leftIndex]!;
+          const right = locales[rightIndex]!;
           const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
 
           if (similarity >= COPY_THRESHOLD) {

package/src/tool/compoundInterest/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { compoundInterest } from './entry';
 export * from './entry';
 export const COMPOUND_INTEREST_TOOL: ToolDefinition = {

package/src/tool/courtFeeCalculator/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { courtFeeCalculator } from './entry';
 export * from './entry';
 export const COURT_FEE_CALCULATOR_TOOL: ToolDefinition = {

package/src/tool/debtSnowball/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { debtSnowball } from './entry';
 import { DebtSnowballLogic } from './logic';
 export * from './entry';

package/src/tool/fireCalculator/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { fireCalculator } from './entry';
 export * from './entry';
 export const FIRE_CALCULATOR_TOOL: ToolDefinition = {

package/src/tool/ibanBicSwiftConverter/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { ibanBicSwift } from './entry';
 export * from './entry';
 export const IBAN_BIC_SWIFT_TOOL: ToolDefinition = {

package/src/tool/inflation/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { inflation } from './entry';
 export * from './entry';
 export const INFLATION_TOOL: ToolDefinition = {

package/src/tool/inflationPurchasingPower/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { inflationPurchasingPower } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await inflationPurchasingPower.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/inflationPurchasingPower/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Banco de España, ¿Qué es la inflación?',
+    url: 'https://www.bde.es/wbe/es/areas-actuacion/politica-monetaria/preguntas-frecuentes/politica-monetaria-y-estabilidad-precios/que-es-la-inflacion.html',
+  },
+  {
+    name: 'Bank of Canada, Inflation Calculator',
+    url: 'https://www.bankofcanada.ca/rates/related/inflation-calculator/',
+  },
+];

package/src/tool/inflationPurchasingPower/component.astro

@@ -0,0 +1,79 @@
+---
+import type { InflationPurchasingPowerUI } from './ui';
+import type { InflationPurchasingPowerInput } from './logic';
+import { calculateInflationTimeline } from './logic';
+import { renderTimelineResults, renderTimelineScene } from './dom-views';
+import './inflation-purchasing-power-timeline.css';
+
+interface Props {
+  ui: InflationPurchasingPowerUI;
+  locale?: string;
+}
+
+const { ui } = Astro.props;
+const initial: InflationPurchasingPowerInput = {
+  startingAmount: 1000,
+  annualInflationRate: 2.5,
+  years: 20,
+  annualCashFlow: 0,
+  cashFlowMode: 'none',
+};
+const initialResult = calculateInflationTimeline(initial);
+const config = JSON.stringify({ ui, initial });
+---
+
+<div class="inflation-purchasing-power-tool" data-ipp-tool>
+  <form class="ipp-controls" aria-label="Inflation purchasing power inputs">
+    <div class="ipp-field">
+      <label for="ipp-amount">{ui.amountLabel}</label>
+      <input id="ipp-amount" data-ipp-input="amount" type="number" min="0.01" step="0.01" value={initial.startingAmount} inputmode="decimal" />
+      <small>{ui.amountHelp}</small>
+    </div>
+    <div class="ipp-field">
+      <label for="ipp-inflation">{ui.inflationLabel}</label>
+      <input id="ipp-inflation" data-ipp-input="inflation" type="number" min="-99.99" max="100" step="0.1" value={initial.annualInflationRate} inputmode="decimal" />
+      <small>{ui.inflationHelp}</small>
+    </div>
+    <div class="ipp-field">
+      <label for="ipp-years">{ui.yearsLabel}</label>
+      <input id="ipp-years" data-ipp-input="years" type="number" min="1" max="80" step="1" value={initial.years} inputmode="numeric" />
+      <small>{ui.yearsHelp}</small>
+    </div>
+    <div class="ipp-field">
+      <label for="ipp-cash-flow">{ui.cashFlowLabel}</label>
+      <input id="ipp-cash-flow" data-ipp-input="cash-flow" type="number" min="0" step="0.01" value={initial.annualCashFlow} inputmode="decimal" disabled />
+      <small>{ui.cashFlowHelp}</small>
+    </div>
+    <fieldset class="ipp-flow">
+      <legend>{ui.cashFlowModeLabel}</legend>
+      <div class="ipp-flow-options">
+        <button type="button" data-ipp-mode="none" class="is-active" aria-pressed="true">{ui.noCashFlowOption}</button>
+        <button type="button" data-ipp-mode="contribution" aria-pressed="false">{ui.contributionOption}</button>
+        <button type="button" data-ipp-mode="withdrawal" aria-pressed="false">{ui.withdrawalOption}</button>
+      </div>
+    </fieldset>
+  </form>
+
+  <section class="ipp-output" aria-live="polite">
+    <div class="ipp-scene-wrap" data-ipp-scene set:html={initialResult ? renderTimelineScene(initialResult, ui) : ''}></div>
+    <div class="ipp-result-wrap" data-ipp-results set:html={initialResult ? renderTimelineResults(initialResult, ui) : ''}></div>
+    <p class="ipp-error" data-ipp-error hidden>{ui.emptyMessage}</p>
+  </section>
+
+  <details class="ipp-method">
+    <summary>{ui.methodTitle}</summary>
+    <p>{ui.methodText}</p>
+    <p>{ui.limitationText}</p>
+  </details>
+</div>
+
+<script is:inline type="application/json" data-ipp-config set:html={config}></script>
+<script>
+  import { initInflationPurchasingPower } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-ipp-tool]');
+  const configElement = document.querySelector<HTMLScriptElement>('[data-ipp-config]');
+  if (root && configElement?.textContent) {
+    initInflationPurchasingPower(root, JSON.parse(configElement.textContent));
+  }
+</script>

package/src/tool/inflationPurchasingPower/controller.ts

@@ -0,0 +1,82 @@
+import { calculateInflationTimeline, type CashFlowMode, type InflationPurchasingPowerInput } from './logic';
+import { renderTimelineResults, renderTimelineScene } from './dom-views';
+import { loadInflationPurchasingPowerState, saveInflationPurchasingPowerState } from './storage';
+import type { InflationPurchasingPowerUI } from './ui';
+
+interface Config {
+  ui: InflationPurchasingPowerUI;
+  initial: InflationPurchasingPowerInput;
+}
+
+function readNumber(root: HTMLElement, name: string): number {
+  const field = root.querySelector<HTMLInputElement>(`[data-ipp-input="${name}"]`);
+  return field?.value === '' ? Number.NaN : Number(field?.value);
+}
+
+function collectState(root: HTMLElement): InflationPurchasingPowerInput {
+  const activeMode = root.querySelector<HTMLButtonElement>('[data-ipp-mode].is-active')?.dataset.ippMode;
+  return {
+    startingAmount: readNumber(root, 'amount'),
+    annualInflationRate: readNumber(root, 'inflation'),
+    years: readNumber(root, 'years'),
+    annualCashFlow: readNumber(root, 'cash-flow'),
+    cashFlowMode: activeMode === 'contribution' || activeMode === 'withdrawal' ? activeMode : 'none',
+  };
+}
+
+function setMode(root: HTMLElement, mode: CashFlowMode): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-ipp-mode]').forEach((button) => {
+    const isActive = button.dataset.ippMode === mode;
+    button.classList.toggle('is-active', isActive);
+    button.setAttribute('aria-pressed', String(isActive));
+  });
+  const cashFlowField = root.querySelector<HTMLInputElement>('[data-ipp-input="cash-flow"]');
+  if (cashFlowField) cashFlowField.disabled = mode === 'none';
+}
+
+function setInputValues(root: HTMLElement, state: InflationPurchasingPowerInput): void {
+  const values: Record<string, number> = { amount: state.startingAmount, inflation: state.annualInflationRate, years: state.years, 'cash-flow': state.annualCashFlow };
+  Object.entries(values).forEach(([name, value]) => {
+    const field = root.querySelector<HTMLInputElement>(`[data-ipp-input="${name}"]`);
+    if (field) field.value = String(value);
+  });
+  setMode(root, state.cashFlowMode);
+}
+
+function render(root: HTMLElement, state: InflationPurchasingPowerInput, ui: InflationPurchasingPowerUI): void {
+  const result = calculateInflationTimeline(state);
+  const scene = root.querySelector<HTMLElement>('[data-ipp-scene]');
+  const results = root.querySelector<HTMLElement>('[data-ipp-results]');
+  const error = root.querySelector<HTMLElement>('[data-ipp-error]');
+  if (!scene || !results || !error) return;
+  if (!result) {
+    scene.innerHTML = '';
+    results.innerHTML = '';
+    error.hidden = false;
+    return;
+  }
+  error.hidden = true;
+  scene.innerHTML = renderTimelineScene(result, ui);
+  results.innerHTML = renderTimelineResults(result, ui);
+}
+
+export function initInflationPurchasingPower(root: HTMLElement, config: Config): void {
+  const initialState = loadInflationPurchasingPowerState(config.initial);
+  setInputValues(root, initialState);
+  render(root, initialState, config.ui);
+  root.addEventListener('input', () => {
+    const state = collectState(root);
+    if (calculateInflationTimeline(state)) saveInflationPurchasingPowerState(state);
+    render(root, state, config.ui);
+  });
+  root.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    const button = target.closest<HTMLButtonElement>('[data-ipp-mode]');
+    const mode = button?.dataset.ippMode as CashFlowMode | undefined;
+    if (!button || !mode) return;
+    setMode(root, mode);
+    const state = collectState(root);
+    saveInflationPurchasingPowerState(state);
+    render(root, state, config.ui);
+  });
+}

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

@@ -0,0 +1,99 @@
+import type { InflationPurchasingPowerResult, InflationTimelinePoint } from './logic';
+import { evaluateInflationTimeline } from './evaluator';
+import type { InflationPurchasingPowerUI } from './ui';
+
+const numberFormat = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+export function formatAmount(value: number): string {
+  return numberFormat.format(value);
+}
+
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[character] ?? character);
+}
+
+function getChartBounds(result: InflationPurchasingPowerResult): { min: number; max: number } {
+  const values = result.points.flatMap((point) => [point.costEquivalent, point.unchangedRealValue, point.realBalance]);
+  const max = Math.max(...values, result.input.startingAmount) * 1.08;
+  const min = Math.max(0, Math.min(...values) * 0.92);
+  return { min, max: max === min ? min + 1 : max };
+}
+
+function createPath(points: InflationTimelinePoint[], value: (point: InflationTimelinePoint) => number, bounds: { min: number; max: number }): string {
+  const chartWidth = 560;
+  const chartHeight = 220;
+  return points.map((point, index) => {
+    const x = 70 + (index / Math.max(points.length - 1, 1)) * chartWidth;
+    const y = 275 - ((value(point) - bounds.min) / (bounds.max - bounds.min)) * chartHeight;
+    return `${index === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${Math.max(40, Math.min(275, y)).toFixed(1)}`;
+  }).join(' ');
+}
+
+function renderLegend(label: string, className: string): string {
+  return `<span class="ipp-legend-item"><i class="ipp-legend-line ${className}"></i>${escapeHtml(label)}</span>`;
+}
+
+function getEndY(value: number, bounds: { min: number; max: number }): string {
+  return Math.max(40, Math.min(275, 275 - ((value - bounds.min) / (bounds.max - bounds.min)) * 220)).toFixed(1);
+}
+
+function renderChart(result: InflationPurchasingPowerResult, ui: InflationPurchasingPowerUI): string {
+  const bounds = getChartBounds(result);
+  const costPath = createPath(result.points, (point) => point.costEquivalent, bounds);
+  const realPath = createPath(result.points, (point) => point.unchangedRealValue, bounds);
+  const balancePath = createPath(result.points, (point) => point.realBalance, bounds);
+  const end = result.points.at(-1);
+  if (!end) return '';
+  return `<svg class="ipp-chart" viewBox="0 0 700 340" role="img" aria-label="${escapeHtml(ui.chartDescription)}">
+    <line class="ipp-grid-line" x1="70" y1="95" x2="630" y2="95" />
+    <line class="ipp-grid-line" x1="70" y1="185" x2="630" y2="185" />
+    <line class="ipp-axis" x1="70" y1="275" x2="630" y2="275" />
+    <path class="ipp-line ipp-line-cost" d="${costPath}" />
+    <path class="ipp-line ipp-line-real" d="${realPath}" />
+    <path class="ipp-line ipp-line-balance" d="${balancePath}" />
+    <circle class="ipp-end-dot ipp-dot-cost" cx="630" cy="${getEndY(end.costEquivalent, bounds)}" r="6" />
+    <circle class="ipp-end-dot ipp-dot-real" cx="630" cy="${getEndY(end.unchangedRealValue, bounds)}" r="6" />
+    <text class="ipp-axis-label" x="70" y="310">${escapeHtml(ui.todayLabel)}</text>
+    <text class="ipp-axis-label" x="630" y="310" text-anchor="end">${escapeHtml(ui.endLabel)}</text>
+    <text class="ipp-chart-caption" x="70" y="28">${escapeHtml(ui.chartNote)}</text>
+  </svg>`;
+}
+
+export function renderTimelineScene(result: InflationPurchasingPowerResult, ui: InflationPurchasingPowerUI): string {
+  const evaluation = evaluateInflationTimeline(result, ui);
+  return `<div class="ipp-scene" data-ipp-tone="${evaluation.tone}">
+    <div class="ipp-scene-heading">
+      <span>${escapeHtml(ui.todayLabel)}</span>
+      <span class="ipp-scene-rule"></span>
+      <span>${escapeHtml(ui.endLabel)}</span>
+    </div>
+    ${renderChart(result, ui)}
+    <div class="ipp-legend" aria-label="${escapeHtml(ui.chartDescription)}">
+      ${renderLegend(ui.costLineLabel, 'ipp-legend-cost')}
+      ${renderLegend(ui.realLineLabel, 'ipp-legend-real')}
+      ${renderLegend(ui.balanceLineLabel, 'ipp-legend-balance')}
+    </div>
+  </div>`;
+}
+
+function renderMetric(label: string, value: string, className = ''): string {
+  return `<div class="ipp-metric ${className}"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></div>`;
+}
+
+export function renderTimelineResults(result: InflationPurchasingPowerResult, ui: InflationPurchasingPowerUI): string {
+  const end = result.points.at(-1);
+  if (!end) return '';
+  const evaluation = evaluateInflationTimeline(result, ui);
+  const rows = result.milestones.map((point) => `<tr><th scope="row">${point.year}</th><td>${formatAmount(point.costEquivalent)}</td><td>${formatAmount(point.unchangedRealValue)}</td><td>${formatAmount(point.realBalance)}</td></tr>`).join('');
+  return `<div class="ipp-result-content">
+    <div class="ipp-primary-metric"><span>${escapeHtml(ui.costEquivalentLabel)}</span><strong>${formatAmount(end.costEquivalent)}</strong><small>${escapeHtml(ui.amountSuffix)}</small></div>
+    <div class="ipp-metrics">
+      ${renderMetric(ui.realValueLabel, formatAmount(end.unchangedRealValue))}
+      ${renderMetric(ui.nominalBalanceLabel, formatAmount(end.nominalBalance))}
+      ${renderMetric(ui.purchasingPowerLossLabel, `${result.purchasingPowerLossPercent.toFixed(1)}%`, 'ipp-metric-accent')}
+    </div>
+    <p class="ipp-scenario" data-ipp-tone="${evaluation.tone}">${escapeHtml(evaluation.message)}</p>
+    <h3>${escapeHtml(ui.milestoneTitle)}</h3>
+    <div class="ipp-table-wrap"><table><thead><tr><th scope="col">${escapeHtml(ui.yearHeader)}</th><th scope="col">${escapeHtml(ui.costHeader)}</th><th scope="col">${escapeHtml(ui.realHeader)}</th><th scope="col">${escapeHtml(ui.balanceHeader)}</th></tr></thead><tbody>${rows}</tbody></table></div>
+  </div>`;
+}

package/src/tool/inflationPurchasingPower/entry.ts

@@ -0,0 +1,31 @@
+import type { FinanceToolEntry, ToolLocaleContent } from '../../types';
+import type { InflationPurchasingPowerUI } from './ui';
+
+export type InflationPurchasingPowerLocaleContent = ToolLocaleContent<InflationPurchasingPowerUI>;
+
+export const inflationPurchasingPower: FinanceToolEntry<InflationPurchasingPowerUI> = {
+  id: 'inflation-purchasing-power-timeline',
+  icons: {
+    bg: 'mdi:chart-timeline-variant-shimmer',
+    fg: 'mdi:cash-sync',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').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),
+  },
+};
+
+export { bibliography } from './bibliography';