@jjlmoya/utils-civic 1.1.0

package/src/tests/spanish_leakage.test.ts

@@ -0,0 +1,175 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+
+const STRUCTURAL_KEYS = new Set([
+  'id',
+  'slug',
+  'url',
+  'icon',
+  'image',
+  'imageUrl',
+  'keywords',
+  'category',
+  'tags',
+  'toolId',
+  'type',
+  'locale',
+  'language',
+  'direction',
+]);
+
+const TRANSLATABLE_KEYS = [
+  'title',
+  'description',
+  'faqTitle',
+  'faq',
+  'howTo',
+  'seo',
+  'schemas',
+] as const;
+
+const COPY_THRESHOLD = 0.9;
+
+const SPANISH_MARKERS = [
+  ['sangre', /\bsangre\b/gi],
+  ['molino', /\bmolino\b/gi],
+  ['grano', /\bgrano\b/gi],
+  ['paladar', /\bpaladar\b/gi],
+  ['cuchillas', /\bcuchillas\b/gi],
+  ['trozos', /\btrozos\b/gi],
+  ['frescura', /\bfrescura\b/gi],
+  ['ingresa', /\bingresa\b/gi],
+  ['selecciona', /\bselecciona\b/gi],
+  ['herramienta', /\bherramienta\b/gi],
+  ['según', /\bsegún\b/gi],
+  ['después', /\bdespués\b/gi],
+  ['puedes', /\bpuedes\b/gi],
+  ['debes', /\bdebes\b/gi],
+  ['tus', /\btus\b/gi],
+  ['a la vez', /\ba la vez\b/gi],
+  ['los datos', /\blos datos\b/gi],
+  ['las opciones', /\blas opciones\b/gi],
+  ['el resultado', /\bel resultado\b/gi],
+  ['método de extracción', /\bmétodo de extracción\b/gi],
+  ['uniformidad del molino', /\buniformidad del molino\b/gi],
+  ['café recién tostado', /\bcafé recién tostado\b/gi],
+] as const;
+
+type UnknownRecord = Record<string, unknown>;
+
+function normalize(value: string): string {
+  return value
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLocaleLowerCase('es');
+}
+
+function isTechnicalInvariant(text: string): boolean {
+  const ledUnitMatches = text.match(/\b\d+(?:-\d+)?\s*(?:w|lm)\b/g) ?? [];
+  return [
+    'data:image/svg+xml;base64',
+    'background-image: url',
+    '.layout-playground {',
+    'const samplerate =',
+  ].some((pattern) => text.includes(pattern)) ||
+    (text.includes('presets') && text.includes('hz')) ||
+    (text.includes('t_rectal') && text.includes('exp(-k * t)')) ||
+    (text.includes('led') && ledUnitMatches.length >= 3);
+}
+
+function collectString(value: string, output: string[]): void {
+  const text = normalize(value);
+  if (!isTechnicalInvariant(text) && text.length >= 20) output.push(text);
+}
+
+function collectObject(value: UnknownRecord, output: string[]): void {
+  Object.entries(value).forEach(([childKey, childValue]) => {
+    collectText(childValue, output, childKey);
+  });
+}
+
+function collectText(value: unknown, output: string[], key?: string): void {
+  if (key && STRUCTURAL_KEYS.has(key)) return;
+  if (typeof value === 'string') return collectString(value, output);
+  if (Array.isArray(value)) return value.forEach((item) => collectText(item, output));
+  if (value && typeof value === 'object') collectObject(value as UnknownRecord, output);
+}
+
+async function loadText(loader: unknown): Promise<string[]> {
+  if (typeof loader !== 'function') return [];
+  const module = await (loader as () => Promise<unknown>)();
+  const output: string[] = [];
+  if (module && typeof module === 'object') {
+    const record = module as UnknownRecord;
+    for (const key of TRANSLATABLE_KEYS) {
+      collectText(record[key], output, key);
+    }
+  }
+  return output;
+}
+
+function findSpanishMarkers(text: string[]): string[] {
+  const corpus = text.join(' ');
+  return SPANISH_MARKERS.flatMap(([label, pattern]) =>
+    pattern.test(corpus) ? [label] : [],
+  );
+}
+
+function similarity(left: string, right: string): number {
+  const leftTokens = left.split(/\s+/);
+  const rightCounts = new Map<string, number>();
+  right.split(/\s+/).forEach((token) => rightCounts.set(token, (rightCounts.get(token) ?? 0) + 1));
+  const matches = leftTokens.reduce((total, token) => {
+    const count = rightCounts.get(token) ?? 0;
+    if (count > 0) rightCounts.set(token, count - 1);
+    return total + (count > 0 ? 1 : 0);
+  }, 0);
+  return (2 * matches) / (leftTokens.length + right.split(/\s+/).length);
+}
+
+function findCopiedFragments(spanish: string[], translated: string[]): string[] {
+  return spanish
+    .filter((fragment) => fragment.length >= 80)
+    .filter((fragment) => translated.some((candidate) =>
+      candidate.length >= 80 &&
+      Math.min(fragment.length, candidate.length) / Math.max(fragment.length, candidate.length) >= COPY_THRESHOLD &&
+      similarity(fragment, candidate) >= COPY_THRESHOLD,
+    ))
+    .sort((a, b) => b.length - a.length)
+    .slice(0, 3);
+}
+
+describe('Locales must not contain copied Spanish content', () => {
+  for (const entry of ALL_ENTRIES) {
+    it(`${entry.id} has no untranslated Spanish blocks`, async () => {
+      const spanish = await loadText(entry.i18n.es);
+      const failures: string[] = [];
+
+      for (const [locale, loader] of Object.entries(entry.i18n)) {
+        if (locale === 'es') continue;
+
+        const translated = await loadText(loader);
+        const copiedFragments = findCopiedFragments(spanish, translated);
+        const markerHits = findSpanishMarkers(translated);
+
+        if (copiedFragments.length > 0 || markerHits.length >= 2) {
+          const details = [
+            copiedFragments.length > 0
+              ? `copied fragments: ${copiedFragments
+                  .map((fragment) => JSON.stringify(fragment.slice(0, 120)))
+                  .join(', ')}`
+              : '',
+            markerHits.length >= 2 ? `Spanish markers: ${markerHits.join(', ')}` : '',
+          ]
+            .filter(Boolean)
+            .join('; ');
+          failures.push(`${locale}: ${details}`);
+        }
+      }
+
+      expect(failures, failures.join('\n')).toEqual([]);
+    });
+  }
+});

package/src/tests/title_quality.test.ts

@@ -0,0 +1,55 @@
+import { describe, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+function getFiles(dir: string, ext: string[]): string[] {
+  const results: string[] = [];
+  if (!fs.existsSync(dir)) return results;
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      results.push(...getFiles(fullPath, ext));
+    } else if (ext.some((e) => file.endsWith(e))) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+const SRC_DIR = path.join(process.cwd(), 'src');
+
+describe('Project Titles - Separator Validation', () => {
+  const files = [
+    ...getFiles(path.join(SRC_DIR, 'tool'), ['.ts']),
+    ...getFiles(path.join(SRC_DIR, 'category'), ['.ts']),
+  ].filter(f => f.includes('i18n'));
+
+  it.each(files)('Verify that titles in %s do not contain | or -', (filePath) => {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const relativePath = path.relative(process.cwd(), filePath);
+
+    const titlePatterns = [
+      /const\s+title\s*=\s*['"]([^'"]+)['"]/g,
+      /title\s*:\s*['"]([^'"]+)['"]/g,
+    ];
+
+    const findings: string[] = [];
+
+    for (const pattern of titlePatterns) {
+      let match;
+      while ((match = pattern.exec(content)) !== null) {
+        const title = match[1]!;
+        if (title.includes('|') || title.includes('-')) {
+          findings.push(title);
+        }
+      }
+    }
+
+    if (findings.length > 0) {
+      const list = findings.map((f) => `  - "${f}"`).join('\n');
+      throw new Error(`Forbidden separators (| or -) found in titles in ${relativePath}:\n${list}`);
+    }
+  });
+});

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { civicCategory } from '../data';
+
+describe('Tool Validation Suite', () => {
+  describe('Library Registration', () => {
+    it('should have tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(1);
+    });
+
+    it('civicCategory should be defined', () => {
+      expect(civicCategory).toBeDefined();
+      expect(civicCategory.i18n).toBeDefined();
+    });
+  });
+});

package/src/tests/translation_copy.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+
+const COPY_THRESHOLD = 0.9;
+
+const STRUCTURAL_KEYS = new Set([
+  '@context',
+  '@type',
+  'applicationCategory',
+  'columns',
+  'highlight',
+  'icon',
+  'level',
+  'operatingSystem',
+  'position',
+  'positive',
+  'price',
+  'priceCurrency',
+  'slug',
+  'trend',
+  'type',
+  'url',
+  'value',
+  'variant',
+]);
+
+function normalizeText(value: string): string {
+  return value
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&(?:amp|lt|gt|quot|apos|nbsp);/gi, ' ')
+    .replace(/[\u2018\u2019]/g, "'")
+    .replace(/[\u201c\u201d]/g, '"')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+}
+
+function collectText(value: unknown, path: string, parts: string[]): void {
+  if (typeof value === 'string') {
+    const normalized = normalizeText(value);
+    if (normalized.length >= 2) parts.push(normalized);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => collectText(item, `${path}[${index}]`, parts));
+    return;
+  }
+
+  if (!value || typeof value !== 'object') return;
+
+  Object.entries(value).forEach(([key, child]) => {
+    if (STRUCTURAL_KEYS.has(key)) return;
+    collectText(child, `${path}.${key}`, parts);
+  });
+}
+
+function localeCorpus(content: unknown): string {
+  if (!content || typeof content !== 'object') return '';
+
+  const record = content as Record<string, unknown>;
+  const parts: string[] = [];
+  collectText(record.title, 'title', parts);
+  collectText(record.description, 'description', parts);
+  collectText(record.faqTitle, 'faqTitle', parts);
+  collectText(record.faq, 'faq', parts);
+  collectText(record.seo, 'seo', parts);
+  collectText(record.schemas, 'schemas', parts);
+  return parts.join(' ');
+}
+
+function tokenCounts(text: string): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const token of text.match(/[\p{L}\p{N}]+/gu) ?? []) {
+    counts.set(token, (counts.get(token) ?? 0) + 1);
+  }
+  return counts;
+}
+
+function copySimilarity(left: string, right: string): number {
+  const leftCounts = tokenCounts(left);
+  const rightCounts = tokenCounts(right);
+  const leftTotal = [...leftCounts.values()].reduce((sum, count) => sum + count, 0);
+  const rightTotal = [...rightCounts.values()].reduce((sum, count) => sum + count, 0);
+  if (leftTotal === 0 || rightTotal === 0) return 0;
+
+  let shared = 0;
+  for (const [token, count] of leftCounts) {
+    shared += Math.min(count, rightCounts.get(token) ?? 0);
+  }
+  return (2 * shared) / (leftTotal + rightTotal);
+}
+
+async function loadCorpora(entry: (typeof ALL_ENTRIES)[number]): Promise<Map<string, string>> {
+  const corpora = new Map<string, string>();
+  for (const [locale, loader] of Object.entries(entry.i18n)) {
+    if (loader) corpora.set(locale, localeCorpus(await loader()));
+  }
+  return corpora;
+}
+
+function findViolations(corpora: Map<string, string>): string[] {
+  const locales = [...corpora.keys()];
+  const violations: string[] = [];
+  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 similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
+      if (similarity >= COPY_THRESHOLD) violations.push(`${left} ↔ ${right}: ${(similarity * 100).toFixed(1)}%`);
+    }
+  }
+  return violations;
+}
+
+describe('Locales must not copy another locale wholesale', () => {
+  ALL_ENTRIES.forEach((entry) => {
+    it(`${entry.id} is not at least ${COPY_THRESHOLD * 100}% identical to another locale`, async () => {
+      const violations = findViolations(await loadCorpora(entry));
+      expect(violations, `Locale copy threshold exceeded in ${entry.id}`).toEqual([]);
+    });
+  });
+});

package/src/tool/election-seat-apportionment-calculator/bibliography.astro

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

package/src/tool/election-seat-apportionment-calculator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'International IDEA, Electoral System Design: The New International IDEA Handbook',
+    url: 'https://www.idea.int/sites/default/files/publications/electoral-system-design-the-new-international-idea-handbook.pdf',
+  },
+  {
+    name: 'BOE, Ley Orgánica 5/1985 del Régimen Electoral General, artículo 163',
+    url: 'https://www.boe.es/buscar/act.php?id=BOE-A-1985-11672&p=20250103&tn=1#a163',
+  },
+  {
+    name: 'Bundeswahlgesetz, § 5 Berechnung der Sitzverteilung',
+    url: 'https://www.gesetze-im-internet.de/bwahlg/__5.html',
+  },
+];

package/src/tool/election-seat-apportionment-calculator/component.astro

@@ -0,0 +1,69 @@
+---
+import type { ElectionSeatUI } from './ui';
+
+interface Props {
+  ui: ElectionSeatUI;
+}
+
+const { ui } = Astro.props as Props;
+const initialParties = [
+  { name: 'Cedar', votes: 42000 },
+  { name: 'River', votes: 31000 },
+  { name: 'Lantern', votes: 17000 },
+  { name: 'Common', votes: 10000 },
+];
+---
+
+<div class="election-tool" data-election-tool data-ui={JSON.stringify(ui)}>
+  <div class="tool-layout">
+    <form class="control-surface" data-election-form>
+      <fieldset class="method-fieldset">
+        <legend>{ui.methodLabel}</legend>
+        <label class="method-option is-selected"><input type="radio" name="allocation-method" value="dhondt" checked /><span>{ui.dhondtLabel}</span></label>
+        <label class="method-option"><input type="radio" name="allocation-method" value="sainte-lague" /><span>{ui.sainteLagueLabel}</span></label>
+        <label class="method-option"><input type="radio" name="allocation-method" value="hare" /><span>{ui.hareLabel}</span></label>
+      </fieldset>
+
+      <section class="party-editor" aria-labelledby="party-editor-title">
+        <div class="control-heading"><span class="eyebrow">01</span><h2 id="party-editor-title">{ui.partiesLabel}</h2></div>
+        <div class="party-list" data-party-list>
+          {initialParties.map((party, index) => (
+            <div class="party-row" data-party-row>
+              <span class="party-row-index">{index + 1}</span>
+              <label><span>{ui.partyNameLabel}</span><input data-party-name type="text" value={party.name} maxlength="32" /></label>
+              <label><span>{ui.votesLabel}</span><input data-party-votes type="number" min="0" step="1" value={party.votes} /></label>
+              <button class="icon-button" data-remove-party type="button" aria-label={ui.removeParty}>×</button>
+            </div>
+          ))}
+        </div>
+        <button class="text-button" data-add-party type="button">+ {ui.addParty}</button>
+      </section>
+
+      <div class="number-controls">
+        <label><span>{ui.totalSeatsLabel}</span><input data-total-seats type="number" min="1" max="500" step="1" value="12" /></label>
+        <label><span>{ui.thresholdLabel}</span><input data-threshold type="number" min="0" max="100" step="0.1" value="5" /></label>
+      </div>
+
+      <section class="district-control" aria-labelledby="districts-title">
+        <div class="control-heading"><span class="eyebrow">02</span><h2 id="districts-title">{ui.districtsLabel}</h2></div>
+        <label><span>{ui.districtsLabel}</span><input data-district-seats type="text" placeholder={ui.districtsPlaceholder} /></label>
+        <p>{ui.districtsHelp}</p>
+      </section>
+
+      <div class="action-row"><button class="secondary-button" data-share type="button">{ui.shareResult}</button><button class="secondary-button" data-reset type="button">{ui.reset}</button></div>
+      <p class="tool-status" data-status role="status"></p>
+    </form>
+
+    <section class="result-surface" aria-live="polite">
+      <div class="result-intro"><span class="eyebrow">03</span><p>{ui.modelNotice}</p></div>
+      <div data-result class="result-content"><p class="empty-result">{ui.emptyState}</p></div>
+    </section>
+  </div>
+</div>
+
+<script>
+  import { mountElectionTool } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-election-tool]');
+  if (root) mountElectionTool(root);
+</script>

package/src/tool/election-seat-apportionment-calculator/controller.ts

@@ -0,0 +1,181 @@
+import { calculateApportionment, type ElectionInput, type PartyInput } from './logic';
+import { renderResults } from './dom-views';
+import { evaluateElection } from './evaluator';
+import { clearElectionInput, loadElectionInput, saveElectionInput } from './storage';
+import { buildShareUrl, hasSharePayload, readSharePayload } from './sharing';
+import type { ElectionSeatUI } from './ui';
+
+const defaultInput: ElectionInput = {
+  parties: [
+    { name: 'Cedar', votes: 42000 },
+    { name: 'River', votes: 31000 },
+    { name: 'Lantern', votes: 17000 },
+    { name: 'Common', votes: 10000 },
+  ],
+  totalSeats: 12,
+  thresholdPercent: 5,
+  method: 'dhondt',
+};
+
+const select = <T extends Element>(root: HTMLElement, selector: string): T => {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Missing election tool element: ${selector}`);
+  return element;
+};
+
+const parseInputNumber = (element: HTMLInputElement): number => Number(element.value);
+
+const escapeAttribute = (value: string): string => value
+  .replaceAll('&', '&amp;')
+  .replaceAll('"', '&quot;')
+  .replaceAll('<', '&lt;')
+  .replaceAll('>', '&gt;');
+
+const getPartyRows = (root: HTMLElement): HTMLElement[] => Array.from(root.querySelectorAll<HTMLElement>('.party-row'));
+
+const readParties = (root: HTMLElement): PartyInput[] => getPartyRows(root).map((row) => ({
+  name: select<HTMLInputElement>(row, '[data-party-name]').value,
+  votes: parseInputNumber(select<HTMLInputElement>(row, '[data-party-votes]')),
+}));
+
+const readDistrictSeats = (root: HTMLElement): number[] | undefined => {
+  const raw = select<HTMLInputElement>(root, '[data-district-seats]').value.trim();
+  if (!raw) return undefined;
+  return raw.split(',').map((value) => Number(value.trim()));
+};
+
+const readInput = (root: HTMLElement): ElectionInput => {
+  const districtSeats = readDistrictSeats(root);
+  return {
+    parties: readParties(root),
+    totalSeats: parseInputNumber(select<HTMLInputElement>(root, '[data-total-seats]')),
+    thresholdPercent: parseInputNumber(select<HTMLInputElement>(root, '[data-threshold]')),
+    method: select<HTMLInputElement>(root, 'input[name="allocation-method"]:checked').value as ElectionInput['method'],
+    ...(districtSeats ? { districtSeats } : {}),
+  };
+};
+
+const partyRowHtml = (party: PartyInput, index: number, ui: ElectionSeatUI): string => `
+  <div class="party-row" data-party-row>
+    <span class="party-row-index">${index + 1}</span>
+    <label><span>${ui.partyNameLabel}</span><input data-party-name type="text" value="${escapeAttribute(party.name)}" maxlength="32" /></label>
+    <label><span>${ui.votesLabel}</span><input data-party-votes type="number" min="0" step="1" value="${party.votes}" /></label>
+    <button class="icon-button" data-remove-party type="button" aria-label="${ui.removeParty}">×</button>
+  </div>
+`;
+
+const renderPartyInputs = (root: HTMLElement, parties: PartyInput[], ui: ElectionSeatUI): void => {
+  select<HTMLElement>(root, '[data-party-list]').innerHTML = parties.map((party, index) => partyRowHtml(party, index, ui)).join('');
+};
+
+const setFormValue = (root: HTMLElement, input: ElectionInput): void => {
+  renderPartyInputs(root, input.parties, JSON.parse(root.dataset.ui ?? '{}') as ElectionSeatUI);
+  select<HTMLInputElement>(root, '[data-total-seats]').value = String(input.totalSeats);
+  select<HTMLInputElement>(root, '[data-threshold]').value = String(input.thresholdPercent);
+  select<HTMLInputElement>(root, '[data-district-seats]').value = input.districtSeats?.join(', ') ?? '';
+  const method = select<HTMLInputElement>(root, `input[name="allocation-method"][value="${input.method}"]`);
+  method.checked = true;
+};
+
+const showError = (root: HTMLElement, message: string): void => {
+  const status = select<HTMLElement>(root, '[data-status]');
+  status.textContent = message;
+  status.className = 'tool-status is-error';
+};
+
+const showStatus = (root: HTMLElement, message: string, tone: 'positive' | 'caution'): void => {
+  const status = select<HTMLElement>(root, '[data-status]');
+  status.textContent = message;
+  status.className = `tool-status is-${tone}`;
+};
+
+const showResult = (root: HTMLElement, input: ElectionInput, ui: ElectionSeatUI): void => {
+  try {
+    const result = calculateApportionment(input);
+    const status = evaluateElection(result, ui);
+    const statusElement = select<HTMLElement>(root, '[data-status]');
+    statusElement.textContent = status.text;
+    statusElement.className = `tool-status is-${status.tone}`;
+    select<HTMLElement>(root, '[data-result]').innerHTML = renderResults(result, ui);
+    saveElectionInput(input);
+  } catch (error) {
+    showError(root, error instanceof Error ? error.message : ui.invalidNumber);
+  }
+};
+
+const bindPartyActions = (root: HTMLElement, ui: ElectionSeatUI, recalculate: () => void): void => {
+  select<HTMLButtonElement>(root, '[data-add-party]').onclick = () => {
+    const parties = readParties(root);
+    parties.push({ name: `List ${parties.length + 1}`, votes: 0 });
+    renderPartyInputs(root, parties, ui);
+    bindPartyActions(root, ui, recalculate);
+    recalculate();
+  };
+  root.querySelectorAll<HTMLButtonElement>('[data-remove-party]').forEach((button) => { button.onclick = () => {
+    const parties = readParties(root);
+    const row = button.closest<HTMLElement>('[data-party-row]');
+    const index = row ? getPartyRows(root).indexOf(row) : -1;
+    if (index >= 0 && parties.length > 2) parties.splice(index, 1);
+    renderPartyInputs(root, parties, ui);
+    bindPartyActions(root, ui, recalculate);
+    recalculate();
+  }; });
+};
+
+const bindFormActions = (root: HTMLElement, recalculate: () => void): void => {
+  const form = select<HTMLFormElement>(root, '[data-election-form]');
+  form.addEventListener('input', recalculate);
+  form.addEventListener('change', recalculate);
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    recalculate();
+  });
+};
+
+const bindResetAction = (root: HTMLElement, recalculate: () => void, ui: ElectionSeatUI): void => {
+  select<HTMLButtonElement>(root, '[data-reset]').addEventListener('click', () => {
+    clearElectionInput();
+    setFormValue(root, defaultInput);
+    bindPartyActions(root, ui, recalculate);
+    recalculate();
+  });
+};
+
+const copyShareLink = async (root: HTMLElement, ui: ElectionSeatUI): Promise<void> => {
+  const input = readInput(root);
+  try {
+    calculateApportionment(input);
+    const shareUrl = buildShareUrl(window.location.href, input);
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      showStatus(root, ui.shareCopied, 'positive');
+    } catch {
+      window.prompt(ui.shareCopyFallback, shareUrl);
+      showStatus(root, ui.shareCopyFallback, 'caution');
+    }
+  } catch (error) {
+    showError(root, error instanceof Error ? error.message : ui.invalidNumber);
+  }
+};
+
+const bindShareAction = (root: HTMLElement, ui: ElectionSeatUI): void => {
+  select<HTMLButtonElement>(root, '[data-share]').addEventListener('click', () => {
+    void copyShareLink(root, ui);
+  });
+};
+
+export const mountElectionTool = (root: HTMLElement): void => {
+  const ui = JSON.parse(root.dataset.ui ?? '{}') as ElectionSeatUI;
+  const sharedInput = readSharePayload(window.location.search);
+  const invalidSharedInput = hasSharePayload(window.location.search) && !sharedInput;
+  const saved = loadElectionInput();
+  const initial = sharedInput ?? saved ?? defaultInput;
+  setFormValue(root, initial);
+  const recalculate = (): void => showResult(root, readInput(root), ui);
+  bindPartyActions(root, ui, recalculate);
+  bindFormActions(root, recalculate);
+  bindResetAction(root, recalculate, ui);
+  bindShareAction(root, ui);
+  recalculate();
+  if (invalidSharedInput) showError(root, ui.invalidSharedResult);
+};