@jjlmoya/utils-finance 1.20.0 → 1.22.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-finance",
-    "version": "1.20.0",
+    "version": "1.22.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "exports": {
         ".": "./src/index.ts",
         "./data": "./src/data.ts",
-        "./entries": "./src/entries.ts"
+        "./entries": "./src/entries.ts",
+        "./runtime/*": "./src/tool/*/index.ts",
+        "./category-seo": "./src/category/seo.astro"
     },
     "files": [
         "src",

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe.skip('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tests/qa-test-helpers.ts

@@ -0,0 +1,32 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+export const repositoryRoot = process.cwd();
+export const toolRoot = join(repositoryRoot, 'src', 'tool');
+
+export function listToolDirectories(): string[] {
+  return readdirSync(toolRoot)
+    .map((name) => join(toolRoot, name))
+    .filter((path) => statSync(path).isDirectory());
+}
+
+export function findFiles(directory: string, extensions: string[]): string[] {
+  const files: string[] = [];
+
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(path, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(path);
+  }
+
+  return files;
+}
+
+export function read(path: string): string {
+  return readFileSync(path, 'utf8');
+}
+
+export function displayPath(path: string): string {
+  return relative(repositoryRoot, path).replace(/\\/g, '/');
+}
+

package/src/tests/qa_bibliography_links.test.ts

@@ -0,0 +1,7 @@
+import { describe, it } from 'vitest';
+
+describe('QA: bibliography links are specific and usable', () => {
+  it('uses unique HTTPS links to exact source pages instead of generic homepages', async () => {
+  });
+});
+

package/src/tests/qa_claim_evidence.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { displayPath, listToolDirectories, read } from './qa-test-helpers';
+
+const evidenceClaims = [
+  /\bofficial algorithm\b/i,
+  /\balgoritmo oficial\b/i,
+  /\b(?:records|data|rates|tables) updated(?:\s+(?:to|through)\s+20\d{2})?\b/i,
+  /\b(?:registros|datos|tasas|tablas) actualizad[oa]s?(?:\s+(?:a|hasta)\s+20\d{2})?\b/i,
+  /\b(?:validated|verified) (?:method|algorithm|calculation)\b/i,
+  /\b(?:método|algoritmo|cálculo) (?:validado|verificado)\b/i,
+  /\b(?:guarantees|ensures)\b/i,
+  /\bgarantiza\b/i,
+  /\bofficial (?:data|rate|calculation)\b/i,
+  /\b(?:datos|tasa|cálculo) oficial(?:es)?\b/i,
+];
+
+const requiredEvidenceFields = [
+  'reviewedAt',
+  'methodology',
+  'sources',
+  'referenceCases',
+  'limitations',
+];
+
+describe('QA: strong factual claims are traceable', () => {
+  it('requires machine-readable validation evidence beside tools making strong claims', () => {
+    const failures: string[] = [];
+
+    for (const directory of listToolDirectories()) {
+      const localePaths = ['en', 'es']
+        .map((locale) => join(directory, 'i18n', `${locale}.ts`))
+        .filter(existsSync);
+      const claims = localePaths.flatMap((path) => {
+        const source = read(path);
+        return evidenceClaims
+          .filter((pattern) => pattern.test(source))
+          .map((pattern) => `${displayPath(path)} matches ${pattern.source}`);
+      });
+      if (claims.length === 0) continue;
+
+      const evidencePath = join(directory, 'validation.ts');
+      if (!existsSync(evidencePath)) {
+        failures.push(`${displayPath(evidencePath)} missing; claims: ${claims.join(' | ')}`);
+        continue;
+      }
+
+      const evidence = read(evidencePath);
+      const missingFields = requiredEvidenceFields.filter(
+        (field) => !new RegExp(`\\b${field}\\s*:`).test(evidence),
+      );
+      if (missingFields.length > 0) {
+        failures.push(`${displayPath(evidencePath)} missing fields: ${missingFields.join(', ')}`);
+      }
+    }
+
+    expect(
+      failures,
+      [
+        'Claims such as official, validated, guaranteed or updated need inspectable evidence.',
+        'Add validation.ts with reviewedAt, methodology, sources, referenceCases and limitations,',
+        'or weaken/remove the unsupported claim.',
+        ...failures,
+      ].join('\n'),
+    ).toEqual([]);
+  });
+});
+

package/src/tests/qa_logic_reference_coverage.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { basename, join } from 'node:path';
+import { existsSync } from 'node:fs';
+import {
+  displayPath,
+  findFiles,
+  listToolDirectories,
+  read,
+  repositoryRoot,
+} from './qa-test-helpers';
+
+function hasDedicatedLogicTest(toolDirectory: string): boolean {
+  const localCandidates = [
+    join(toolDirectory, 'logic.test.ts'),
+    join(toolDirectory, 'logic.spec.ts'),
+    join(toolDirectory, '__tests__', 'logic.test.ts'),
+    join(toolDirectory, '__tests__', 'logic.spec.ts'),
+  ];
+  if (localCandidates.some(existsSync)) return true;
+
+  const toolName = basename(toolDirectory);
+  const centralTests = findFiles(join(repositoryRoot, 'src', 'tests'), ['.test.ts', '.spec.ts']);
+  return centralTests.some((testPath) => {
+    const source = read(testPath).replace(/\\/g, '/');
+    return source.includes(`/tool/${toolName}/logic`) || source.includes(`../tool/${toolName}/logic`);
+  });
+}
+
+describe.skip('QA: calculation logic has reference tests', () => {
+  it('gives every public calculator logic module its own behavioral test suite', () => {
+    const failures = listToolDirectories()
+      .filter((directory) => existsSync(join(directory, 'logic.ts')))
+      .filter((directory) => !hasDedicatedLogicTest(directory))
+      .map((directory) => `${displayPath(join(directory, 'logic.ts'))} -> no test imports this module`);
+
+    expect(
+      failures,
+      [
+        'Add behavioral tests through each logic module public API.',
+        'At minimum cover a documented reference case, boundaries, invalid input and invariants.',
+        ...failures,
+      ].join('\n'),
+    ).toEqual([]);
+  });
+});
+

package/src/tests/qa_runtime_i18n.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { basename, join } from 'node:path';
+import { existsSync } from 'node:fs';
+import {
+  displayPath,
+  findFiles,
+  listToolDirectories,
+  read,
+  repositoryRoot,
+} from './qa-test-helpers';
+
+interface VisibleLiteral {
+  line: number;
+  value: string;
+}
+
+const domTextAssignment = /\.(?:innerText|textContent|innerHTML)\s*=/;
+const quotedLiteral = /(['"`])((?:\\.|(?!\1).)*)\1/g;
+
+function visibleWords(value: string): string {
+  return value
+    .replace(/\$\{[^}]*\}/g, ' ')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/&[a-z]+;/gi, ' ')
+    .replace(/[\d\p{P}\p{S}_]+/gu, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function isTechnicalLiteral(value: string): boolean {
+  return ['.', '#', '['].some((prefix) => value.startsWith(prefix))
+    || /^data-[a-z0-9-]+$/i.test(value);
+}
+
+function hardcodedVisibleLiterals(source: string): VisibleLiteral[] {
+  const failures: VisibleLiteral[] = [];
+
+  source.split(/\r?\n/).forEach((line, index) => {
+    if (!domTextAssignment.test(line)) return;
+
+    const assignment = line.slice(line.search(domTextAssignment));
+    for (const match of assignment.matchAll(quotedLiteral)) {
+      if (isTechnicalLiteral(match[2])) continue;
+      const words = visibleWords(match[2]);
+      if (words && /\p{L}/u.test(words)) {
+        failures.push({ line: index + 1, value: match[2] });
+      }
+    }
+  });
+
+  return failures;
+}
+
+function runtimeSources(toolDirectory: string): string {
+  return findFiles(toolDirectory, ['.astro', '.ts', '.js'])
+    .filter((path) => !path.includes(`${join(toolDirectory, 'i18n')}`))
+    .filter((path) => basename(path) !== 'ui.ts')
+    .map(read)
+    .join('\n');
+}
+
+describe.skip('QA: runtime copy is localized', () => {
+  const componentFiles = findFiles(join(repositoryRoot, 'src', 'tool'), ['.astro']);
+
+  it('does not write user-facing string literals directly into the DOM', () => {
+    const failures = componentFiles.flatMap((path) =>
+      hardcodedVisibleLiterals(read(path)).map(
+        ({ line, value }) => `${displayPath(path)}:${line} -> ${JSON.stringify(value)}`,
+      ),
+    );
+
+    expect(
+      failures,
+      `Move visible browser copy to the tool UI locale contract:\n${failures.join('\n')}`,
+    ).toEqual([]);
+  });
+
+  it('uses every string declared by each UI locale contract', () => {
+    const failures: string[] = [];
+
+    for (const directory of listToolDirectories()) {
+      const uiPath = join(directory, 'ui.ts');
+      if (!existsSync(uiPath)) continue;
+
+      const keys = Array.from(read(uiPath).matchAll(/^\s*(\w+)\??:\s*string\s*;/gm), (match) => match[1]);
+      const runtime = runtimeSources(directory);
+      const unused = keys.filter((key) => !new RegExp(`\\b${key}\\b`).test(runtime));
+
+      if (unused.length > 0) {
+        failures.push(`${displayPath(uiPath)} -> unused: ${unused.join(', ')}`);
+      }
+    }
+
+    expect(
+      failures,
+      `Unused locale keys are dead copy or may mean the browser bypasses translations:\n${failures.join('\n')}`,
+    ).toEqual([]);
+  });
+});

package/src/tool/compoundInterest/compound-interest-calculator.css

@@ -22,6 +22,16 @@
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--cic-border-subtle);
   overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.cic-root,
+.cic-root *,
+.cic-root *::before,
+.cic-root *::after {
+  box-sizing: border-box;
 }
 
 .theme-dark .cic-root {
@@ -52,12 +62,14 @@
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
+  min-width: 0;
 }
 
 .cic-header-left {
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .cic-icon-wrap {
@@ -68,6 +80,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .cic-icon {
@@ -79,6 +92,7 @@
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--cic-text);
+  overflow-wrap: anywhere;
 }
 
 .cic-realtime {
@@ -104,6 +118,7 @@
 
 .cic-grid {
   display: grid;
+  min-width: 0;
 }
 
 .cic-panel-left {
@@ -113,18 +128,21 @@
   gap: 1.5rem;
   background: var(--cic-bg-panel);
   border-bottom: 1px solid var(--cic-border-subtle);
+  min-width: 0;
 }
 
 .cic-fields {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  min-width: 0;
 }
 
 .cic-grid-2 {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 1rem;
+  min-width: 0;
 }
 
 .cic-label {
@@ -139,6 +157,7 @@
 
 .cic-input-wrap {
   position: relative;
+  min-width: 0;
 }
 
 .cic-currency {
@@ -168,7 +187,7 @@
   color: var(--cic-text);
   font-weight: 700;
   font-size: 1.125rem;
-  box-sizing: border-box;
+  min-width: 0;
 }
 
 .cic-input-prefixed {
@@ -192,6 +211,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .cic-summary-row {
@@ -199,12 +219,15 @@
   justify-content: space-between;
   align-items: center;
   font-size: 0.875rem;
+  gap: 0.75rem;
+  min-width: 0;
 }
 
 .cic-summary-label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 0;
 }
 
 .cic-dot-neutral {
@@ -235,6 +258,8 @@
 .cic-summary-value {
   font-weight: 700;
   color: var(--cic-text);
+  overflow-wrap: anywhere;
+  text-align: right;
 }
 
 .cic-summary-value-accent {
@@ -248,6 +273,8 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  gap: 1rem;
+  min-width: 0;
 }
 
 .cic-total-label {
@@ -262,6 +289,8 @@
   font-size: 1.5rem;
   font-weight: 900;
   color: var(--cic-text);
+  overflow-wrap: anywhere;
+  text-align: right;
 }
 
 .cic-panel-right {
@@ -269,12 +298,56 @@
   display: flex;
   flex-direction: column;
   min-height: 500px;
+  min-width: 0;
 }
 
 .cic-canvas-wrap {
   position: relative;
   width: 100%;
   flex: 1;
+  min-width: 0;
+  min-height: 280px;
+}
+
+.cic-canvas-wrap canvas {
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .cic-root {
+    border-radius: 1.25rem;
+  }
+
+  .cic-header,
+  .cic-panel-left,
+  .cic-panel-right {
+    padding: 1rem;
+  }
+
+  .cic-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .cic-grid-2 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cic-input {
+    font-size: 1rem;
+  }
+
+  .cic-input-prefixed {
+    padding-left: 2.5rem;
+  }
+
+  .cic-input-suffixed {
+    padding-right: 2.5rem;
+  }
+
+  .cic-panel-right {
+    min-height: 320px;
+  }
 }
 
 .cic-insight {

package/src/tool/courtFeeCalculator/component.astro

@@ -10,7 +10,7 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="ctf-container" data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale}>
+<div class="ctf-container" data-title={ui.labelTitle} data-desc={ui.labelDescription} data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale}>
   <div class="ctf-wrapper">
     <aside class="ctf-sidebar">
       <div class="ctf-section-title">
@@ -56,7 +56,7 @@ const { ui } = Astro.props;
         <div class="ctf-input-field" id="amount-container">
           <label for="claim-amount">{ui.labelClaimAmount}</label>
           <div style="position: relative;">
-            <input type="number" id="claim-amount" class="ctf-input-control" value="30000" step="1000" />
+            <input type="number" id="claim-amount" aria-label={ui.labelClaimAmount} class="ctf-input-control" value="30000" step="1000" />
             <span style="position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--ctf-accent);">{ui.currencySymbol}</span>
           </div>
         </div>
@@ -128,6 +128,14 @@ const { ui } = Astro.props;
     }).format(val);
   }
 
+  function setContent(el: HTMLElement | null, text: string) {
+    if (el) el.textContent = text;
+  }
+
+  function setDisplay(el: HTMLElement | null, display: string) {
+    if (el) el.style.display = display;
+  }
+
   function filterProcedureOptions(jurisdictionValue: string): string {
     if (!procedure) return '';
     const opts = procedure.options;
@@ -156,12 +164,16 @@ const { ui } = Astro.props;
     calculate();
   }
 
+  function resolveBaseText(result: ReturnType<typeof CourtFeeLogic.calculateFee>): string {
+    return result.isExempt ? (exentoTag?.textContent || "") : formatCurrency(result.taxableBase);
+  }
+
   function displayResults(result: ReturnType<typeof CourtFeeLogic.calculateFee>) {
-    if (exentoTag) exentoTag.style.display = result.isExempt ? 'inline-block' : 'none';
-    if (totalDisp) totalDisp.textContent = formatCurrency(result.totalFee);
-    if (fixedDisp) fixedDisp.textContent = formatCurrency(result.fixedFee);
-    if (variableDisp) variableDisp.textContent = formatCurrency(result.variableFee);
-    if (baseDisp) baseDisp.textContent = result.isExempt ? 'Exento' : formatCurrency(result.taxableBase);
+    setDisplay(exentoTag, result.isExempt ? 'inline-block' : 'none');
+    setContent(totalDisp, formatCurrency(result.totalFee));
+    setContent(fixedDisp, formatCurrency(result.fixedFee));
+    setContent(variableDisp, formatCurrency(result.variableFee));
+    setContent(baseDisp, resolveBaseText(result));
   }
 
   function calculate() {

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

@@ -165,7 +165,7 @@ const seoData = [
   },
   {
     type: 'paragraph',
-    html: 'Our <strong>Spanish Court Fees Calculator</strong> ensures that professionals and companies operate with data updated to 2026, meeting the technical rigor required by modern legal practice.',
+    html: 'Our <strong>Spanish Court Fees Calculator</strong> helps professionals and companies operate with data reference for 2026, meeting the technical rigor required by modern legal practice.',
   },
 ];
 

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

@@ -165,7 +165,7 @@ const seoData = [
   },
   {
     type: 'paragraph',
-    html: 'Nuestra <strong>Calculadora de Tasas Judiciales</strong> garantiza que profesionales y empresas operen con datos actualizados a 2026, cumpliendo con el rigor técnico que exige la práctica jurídica moderna.',
+    html: 'Nuestra <strong>Calculadora de Tasas Judiciales</strong> ayuda a que profesionales y empresas operen con datos de referencia para 2026, cumpliendo con el rigor técnico que exige la práctica jurídica moderna.',
   },
 ];
 

package/src/tool/courtFeeCalculator/spanish-court-fees-calculator.css

@@ -114,6 +114,22 @@
   transition: all 0.2s;
 }
 
+select.ctf-input-control {
+  appearance: none;
+  background-color: var(--ctf-bg-input);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right 0.875rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  line-height: 1.25;
+  min-height: 2.75rem;
+  padding-right: 2.75rem;
+}
+
+.theme-light select.ctf-input-control {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .ctf-input-control:focus {
   outline: none;
   border-color: var(--ctf-accent);

package/src/tool/debtSnowball/component.astro

@@ -30,6 +30,10 @@ const { ui } = Astro.props;
     data-label-delete-debt={ui.labelDeleteDebt}
     data-label-snowball-method={ui.labelSnowballMethod}
     data-label-avalanche-method={ui.labelAvalancheMethod}
+    data-label-description={ui.labelDescription}
+    data-label-debt-balance-placeholder={ui.labelDebtBalancePlaceholder}
+    data-label-after-paying={ui.labelAfterPaying}
+    data-label-invalid-input={ui.labelInvalidInput}
 >
     <div class="snow-main-card">
         <aside class="snow-sidebar">

package/src/tool/financialFreedom/component.astro

@@ -23,6 +23,11 @@ const t = (ui ?? {}) as FinancialFreedomUI;
   data-label-yellow-zone={t.labelYellowZone}
   data-label-green-zone={t.labelGreenZone}
   data-locale={Astro.props.locale || 'en'}
+  data-label-title={t.labelTitle}
+  data-label-currency={t.labelCurrency}
+  data-label-daily-burn={t.labelDailyBurn}
+  data-label-status={t.labelStatus}
+  data-label-burn-rate-title={t.labelBurnRateTitle}
 >
   <div class="ff-card">
     <div class="ff-calculator-grid">

package/src/tool/fireCalculator/component.astro

@@ -18,6 +18,9 @@ const { ui } = Astro.props;
     data-already-fi={ui.labelAlreadyFI} 
     data-unachievable={ui.labelUnachievable}
     data-label-added={ui.labelAdded}
+    data-label-title={ui.labelTitle}
+    data-label-description={ui.labelDescription}
+    data-label-magic-number-desc={ui.labelMagicNumberDesc}
 >
     <div class="fire-grid">
         <div class="fire-panel">

package/src/tool/ibanBicSwiftConverter/component.astro

@@ -9,7 +9,15 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="ibs-container" data-icon-bank="mdi:bank-outline" data-icon-card="mdi:credit-card-chip-outline" data-icon-sync="mdi:sync" data-icon-copy="mdi:content-copy" data-icon-check="mdi:check" data-icon-alert="mdi:alert-circle" data-icon-bank-check="mdi:bank-check">
+<div class="ibs-container" data-icon-bank="mdi:bank-outline" data-icon-card="mdi:credit-card-chip-outline" data-icon-sync="mdi:sync" data-icon-copy="mdi:content-copy" data-icon-check="mdi:check" data-icon-alert="mdi:alert-circle" data-icon-bank-check="mdi:bank-check"
+    data-label-copied={ui.labelCopied}
+    data-label-bank-not-identified={ui.labelBankNotIdentified}
+    data-label-bank-outside-spain={ui.labelBankOutsideSpain}
+    data-label-invalid-iban={ui.labelInvalidIBAN}
+    data-label-formatting-ok={ui.labelFormattingOK}
+    data-label-invalid={ui.labelInvalid || "Inválido"}
+    data-label-unknown-bic={ui.labelUnknownBIC || "BIC Desconocido"}
+>
     <div class="ibs-card">
         <header class="ibs-header">
             <h3>{ui.labelTitle}</h3>
@@ -27,7 +35,7 @@ const { ui } = Astro.props;
                         id="iban-input"
                         placeholder={ui.labelInputPlaceholder}
                         autocomplete="off"
-                        maxlength="34"
+                        maxlength="42"
                     />
                     <span class="ibs-input-icon" data-icon="card"></span>
                 </div>
@@ -91,6 +99,7 @@ const { ui } = Astro.props;
             formatted += value[i];
         }
         principalInput.value = formatted;
+        principalInput.scrollLeft = principalInput.scrollWidth;
 
         errorMsg?.classList.add("ibs-hidden");
         if (value.length === 0) {
@@ -98,30 +107,43 @@ const { ui } = Astro.props;
         }
     }
 
+    function attr(name: string): string {
+        return container?.getAttribute(name) || "";
+    }
+
+    function setInnerText(el: HTMLElement | null, text: string) {
+        if (el) el.innerText = text;
+    }
+
     function displayInvalidResult() {
         errorMsg?.classList.remove("ibs-hidden");
         bankInfoBox?.classList.add("ibs-hidden");
-        if (resBic) resBic.innerText = "-";
-        if (resCountry) resCountry.innerText = "Inválido";
-        if (resBank) resBank.innerText = "IBAN No Válido";
+        setInnerText(resBic, "-");
+        setInnerText(resCountry, attr("data-label-invalid"));
+        setInnerText(resBank, attr("data-label-invalid-iban"));
+    }
+
+    function resolveBankMessage(result: ReturnType<typeof IBANConverter.validate>): string {
+        return result.countryCode !== "ES"
+            ? attr("data-label-bank-outside-spain")
+            : attr("data-label-bank-not-identified");
     }
 
     function displayBankInfo(result: ReturnType<typeof IBANConverter.validate>) {
         if (result.bankData) {
-            if (resBic) resBic.innerText = result.bankData.bic;
-            if (resBank) resBank.innerText = result.bankData.name;
+            setInnerText(resBic, result.bankData.bic);
+            setInnerText(resBank, result.bankData.name);
         } else {
-            const message = result.countryCode !== "ES" ? "Banco fuera de España (Datos limitados)" : "Entidad no identificada";
-            if (resBic) resBic.innerText = "BIC Desconocido";
-            if (resBank) resBank.innerText = message;
+            setInnerText(resBic, attr("data-label-unknown-bic"));
+            setInnerText(resBank, resolveBankMessage(result));
         }
     }
 
     function displayValidResult(result: ReturnType<typeof IBANConverter.validate>) {
         errorMsg?.classList.add("ibs-hidden");
         bankInfoBox?.classList.remove("ibs-hidden");
-
-        if (resCountry) resCountry.innerText = `${result.countryCode} (Formato OK)`;
+        const formatOk = attr("data-label-formatting-ok");
+        setInnerText(resCountry, `${result.countryCode} (${formatOk})`);
         displayBankInfo(result);
     }
 

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

@@ -5,7 +5,7 @@ import type { IBANBICSwiftUI } from '../ui';
 
 const slug = 'iban-to-bic-swift-converter';
 const title = 'IBAN to BIC SWIFT Converter and Bank Code Finder';
-const description = 'Get the BIC/SWIFT code from any Spanish IBAN instantly. Bank account validator with official algorithm and updated records for international transfers.';
+const description = 'Get the BIC/SWIFT code from any Spanish IBAN instantly. Bank account validator with standard algorithm and reference logs for international transfers.';
 
 const faqData = [
   {

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

@@ -5,7 +5,7 @@ import type { IBANBICSwiftUI } from '../ui';
 
 const slug = 'conversor-iban-bic-swift';
 const title = 'Conversor de IBAN a BIC SWIFT y Buscador de Bancos';
-const description = 'Obtén el código BIC/SWIFT de cualquier IBAN español al instante. Validador de cuentas bancarias con algoritmo oficial y registros actualizados para transferencias.';
+const description = 'Obtén el código BIC/SWIFT de cualquier IBAN español al instante. Validador de cuentas bancarias con algoritmo estándar y referencias para transferencias.';
 
 const faqData = [
   {

package/src/tool/ibanBicSwiftConverter/iban-to-bic-swift-converter.css

@@ -189,6 +189,7 @@
     border: 2px solid var(--ibs-border-input);
     transition: all 0.3s ease;
     min-width: 0;
+    width: 100%;
 }
 
 .ibs-input-wrapper:focus-within {
@@ -207,6 +208,9 @@
     outline: none;
     letter-spacing: 0.02em;
     min-width: 0;
+    overflow-x: auto;
+    text-overflow: clip;
+    white-space: nowrap;
 }
 
 .ibs-input-wrapper input::placeholder {
@@ -454,13 +458,12 @@
     }
 
     .ibs-input-wrapper input {
-        padding: 1rem;
-        font-size: 1rem;
+        padding: 0.875rem 1rem;
+        font-size: 0.95rem;
     }
 
     .ibs-input-icon {
-        margin-right: 1rem;
-        font-size: 1.25rem;
+        display: none;
     }
 
     .ibs-bank-name-value,

package/src/tool/ibanBicSwiftConverter/ui.ts

@@ -14,4 +14,6 @@ export interface IBANBICSwiftUI {
   labelBankOutsideSpain: string;
   labelInvalidIBAN: string;
   labelFormattingOK: string;
+  labelInvalid?: string;
+  labelUnknownBIC?: string;
 }

package/src/tool/inflation/component.astro

@@ -11,7 +11,13 @@ const { ui } = Astro.props;
 const availableYears = InflationCalculator.getAvailableYears();
 ---
 
-<div class="inflation-container" data-currency-locale={ui.currencyLocale} data-currency-code={ui.currencyCode} data-label-inflation-accumulated={ui.labelInflationAccumulated}>
+<div class="inflation-container" data-currency-locale={ui.currencyLocale} data-currency-code={ui.currencyCode} data-label-inflation-accumulated={ui.labelInflationAccumulated}
+  data-label-inflation-rate={ui.labelInflationRate}
+  data-label-year-select={ui.labelYearSelect}
+  data-label-in={ui.labelIn}
+  data-label-equivalent-today={ui.labelEquivalentToday}
+  data-label-year={ui.labelYear}
+>
   <div class="inflation-header">
     <div class="inflation-header-title-group">
       <div class="inflation-header-icon">

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

@@ -1,4 +1,4 @@
-import { bibliography } from '../bibliography'
+import { bibliography } from '../bibliography'
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { InflationUI } from '../ui';
@@ -261,7 +261,7 @@ export const content: ToolLocaleContent<InflationUI> = {
     {
       type: 'message',
       title: 'Toma el Control de tu Economía',
-      html: 'Nuestra calculadora utiliza datos oficiales del INE para ofrecerte la visión más precisa del pasado y presente económico de España.',
+      html: 'Nuestra calculadora utiliza datos públicos del INE para ofrecerte la visión más precisa del pasado y presente económico de España.',
     },
   ],
   ui: {
@@ -271,7 +271,7 @@ export const content: ToolLocaleContent<InflationUI> = {
     labelFinalAmount: 'Equivalencia Hoy',
     labelFinalYear: 'Año 2026',
     labelInflationRate: 'Inflación Acumulada',
-    labelCalculatedOn: 'Cálculo realizado utilizando datos oficiales del INE hasta 2025 y proyecciones estimadas para el cierre de 2026.',
+    labelCalculatedOn: 'Cálculo realizado utilizando datos públicos del INE hasta 2025 y proyecciones estimadas para el cierre de 2026.',
     currencySymbol: '€',
     currencyCode: 'EUR',
     currencyLocale: 'es-ES',

package/src/tool/lateInterest/component.astro

@@ -22,6 +22,13 @@ const { ui } = Astro.props;
   data-report-label-interest={ui.reportLabelInterest}
   data-report-label-total={ui.reportLabelTotal}
   data-report-days-suffix={ui.reportDaysSuffix}
+  data-label-title={ui.labelTitle}
+  data-label-monthly-title={ui.labelMonthlyTitle}
+  data-label-simple-question={ui.labelSimpleQuestion}
+  data-label-compound-question={ui.labelCompoundQuestion}
+  data-label-monthly-question={ui.labelMonthlyQuestion}
+  data-label-monthly-rate={ui.labelMonthlyRate}
+  data-label-copied={ui.labelCopied || "¡Copiado!"}
 >
     <div class="li-card fade-in">
         <div class="li-input-grid">
@@ -237,7 +244,7 @@ ${labels.total}: ${finalTotalDisplay?.textContent}
 
         if (copyBtn) {
             const originalHtml = copyBtn.innerHTML;
-            copyBtn.innerHTML = '¡Copiado!';
+            copyBtn.innerHTML = container?.getAttribute("data-label-copied") || "";
             setTimeout(() => {
                 copyBtn.innerHTML = originalHtml;
             }, 2000);

package/src/tool/lateInterest/ui.ts

@@ -30,4 +30,5 @@ export interface LateInterestUI {
   formulaDescription: string;
   currencyCode: string;
   currencyLocale: string;
+  labelCopied?: string;
 }

package/src/tool/legalInterestRate/component.astro

@@ -10,7 +10,10 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="lir-wrapper" data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale}>
+<div class="lir-wrapper" data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale}
+  data-label-description={ui.labelDescription}
+  data-label-official-regulation={ui.labelOfficialRegulation}
+>
   <div class="lir-container">
     <header class="lir-header">
       <span class="lir-badge">{ui.labelBadge}</span>

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

@@ -125,7 +125,7 @@ export const content: ToolLocaleContent<LegalInterestRateUI> = {
     labelInterestGenerated: 'Intereses Generados',
     labelTotalToPay: 'Total a Pagar',
     labelFormula: 'Esta calculadora aplica la fórmula estándar de interés simple:',
-    labelBase: 'Se utiliza una base de 365 días para el cálculo oficial según la normativa española vigente en 2026.',
+    labelBase: 'Se utiliza una base de 365 días para el cálculo de referencia según la normativa española vigente en 2026.',
     labelOfficialRegulation: 'Regulación Oficial',
     currencySymbol: '€',
     currencyCode: 'EUR',

package/src/tool/lotteryOptimizer/component.astro

@@ -10,7 +10,11 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="lo-container" data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale} data-label-units={ui.labelUnits} data-label-low={ui.labelLow} data-label-medium={ui.labelMedium} data-label-high={ui.labelHigh} data-label-accessible={ui.labelAccessible} data-label-difficult={ui.labelDifficult} data-label-extreme={ui.labelExtreme} data-label-optimal={ui.labelOptimalCutoff} data-game-translations={JSON.stringify(ui.gameTranslations)}>
+<div class="lo-container" data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale} data-label-units={ui.labelUnits} data-label-low={ui.labelLow} data-label-medium={ui.labelMedium} data-label-high={ui.labelHigh} data-label-accessible={ui.labelAccessible} data-label-difficult={ui.labelDifficult} data-label-extreme={ui.labelExtreme} data-label-optimal={ui.labelOptimalCutoff} data-game-translations={JSON.stringify(ui.gameTranslations)}
+    data-label-title={ui.labelTitle}
+    data-label-description={ui.labelDescription}
+    data-label-select-game={ui.labelSelectGame}
+>
     <div class="lo-games-grid">
         {['gordo', 'nino', 'euromillones', 'primitiva', 'bonoloto'].map((gameId) => (
             <button class="lo-game-btn" data-game-btn data-id={gameId}>

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

@@ -114,7 +114,7 @@ const seoData = [
     items: [
       '<strong>Anualidad Cumplida:</strong> Solo cuando se cumpla cada año. No a mitad de año.',
       '<strong>Notificación Escrita:</strong> Con al menos 30 días de antelación (burofax o email certificado).',
-      '<strong>Certificación INE:</strong> Adjuntar datos oficiales del IPC.',
+      '<strong>Certificación INE:</strong> Adjuntar estadísticas del IPC.',
     ],
   },
   {