@jjlmoya/utils-civic 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-civic",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,11 +1,12 @@
 import { coalitionMajorityCalculator } from '../tool/coalition-majority-calculator/entry';
 import { electionSeatApportionmentCalculator } from '../tool/election-seat-apportionment-calculator/entry';
+import { referendumThresholdCalculator } from '../tool/referendum-threshold-calculator/entry';
 import { voteSeatDisproportionalityAnalyzer } from '../tool/vote-seat-disproportionality-analyzer/entry';
 import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const civicCategory = {
   icon: 'mdi:bank-outline',
-  tools: [coalitionMajorityCalculator, electionSeatApportionmentCalculator, voteSeatDisproportionalityAnalyzer],
+  tools: [coalitionMajorityCalculator, electionSeatApportionmentCalculator, referendumThresholdCalculator, voteSeatDisproportionalityAnalyzer],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -6,10 +6,12 @@ export { civicCategory } from './category';
 
 import { coalitionMajorityCalculator } from './tool/coalition-majority-calculator/entry';
 import { electionSeatApportionmentCalculator } from './tool/election-seat-apportionment-calculator/entry';
+import { referendumThresholdCalculator } from './tool/referendum-threshold-calculator/entry';
 import { voteSeatDisproportionalityAnalyzer } from './tool/vote-seat-disproportionality-analyzer/entry';
 
 export const ALL_ENTRIES = [
   coalitionMajorityCalculator,
   electionSeatApportionmentCalculator,
+  referendumThresholdCalculator,
   voteSeatDisproportionalityAnalyzer,
 ];

package/src/index.ts

@@ -2,6 +2,7 @@ export { civicCategory } from './category';
 export const civicCategorySEO = () => import('./category/CivicCategorySEO.astro').then((m) => m.default);
 
 export { electionSeatApportionmentCalculator, ELECTION_SEAT_APPORTIONMENT_CALCULATOR_TOOL } from './tool/election-seat-apportionment-calculator';
+export { referendumThresholdCalculator, REFERENDUM_THRESHOLD_CALCULATOR_TOOL } from './tool/referendum-threshold-calculator';
 export { voteSeatDisproportionalityAnalyzer, VOTE_SEAT_DISPROPORTIONALITY_ANALYZER_TOOL } from './tool/vote-seat-disproportionality-analyzer';
 
 export type {

package/src/tests/locale_completeness.test.ts

@@ -18,6 +18,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(3);
+    expect(ALL_TOOLS.length).toBe(4);
   });
 });

package/src/tests/tool_validation.test.ts

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

package/src/tool/referendum-threshold-calculator/bibliography.astro

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

package/src/tool/referendum-threshold-calculator/bibliography.ts

@@ -0,0 +1,6 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'International IDEA, Direct Democracy Handbook, chapter on referendum rules', url: 'https://www.idea.int/sites/default/files/publications/direct-democracy-the-international-idea-handbook.pdf' },
+  { name: 'Commission de Venise, Code de bonne conduite en matière référendaire révisé', url: 'https://www.venice.coe.int/webforms/documents/?pdf=CDL-AD%282022%29015-f' },
+];

package/src/tool/referendum-threshold-calculator/component.astro

@@ -0,0 +1,117 @@
+---
+import type { ReferendumThresholdUI } from './ui';
+import './referendum-threshold-calculator.css';
+
+interface Props {
+  ui: ReferendumThresholdUI;
+}
+
+const { ui } = Astro.props as Props;
+---
+
+<div class="referendum-tool" data-referendum-threshold-tool>
+  <div class="rule-workbench">
+    <form class="rule-form" data-referendum-form>
+      <fieldset class="count-block">
+        <legend>{ui.countsHeading}</legend>
+        <label class="wide-field">{ui.eligibleLabel}<input name="eligibleVoters" type="number" min="0" step="1" value="1000" required /><small>{ui.eligibleHelp}</small></label>
+        <div class="count-grid">
+          <label>{ui.yesLabel}<input name="yes" type="number" min="0" step="1" value="520" required /></label>
+          <label>{ui.noLabel}<input name="no" type="number" min="0" step="1" value="300" required /></label>
+          <label>{ui.blankLabel}<input name="blank" type="number" min="0" step="1" value="20" required /></label>
+          <label>{ui.invalidLabel}<input name="invalid" type="number" min="0" step="1" value="10" required /></label>
+        </div>
+      </fieldset>
+
+      <fieldset class="quorum-block participation-block">
+        <legend>{ui.participationHeading}</legend>
+        <p>{ui.participationHelp}</p>
+        <div class="mode-switch" role="group" aria-label={ui.thresholdModeLabel}>
+          <button type="button" class="active" data-mode-prefix="participation" data-mode="percentage" aria-pressed="true">{ui.percentageOption}</button>
+          <button type="button" data-mode-prefix="participation" data-mode="absolute" aria-pressed="false">{ui.absoluteOption}</button>
+        </div>
+        <div class="comparison-row" role="group" aria-label={ui.comparisonLabel}>
+          <span>{ui.comparisonLabel}</span>
+          <input name="participationComparison" type="hidden" value="at-least" />
+          <button type="button" class="active" data-comparison-prefix="participation" data-comparison="at-least" aria-pressed="true">{ui.atLeastOption}</button>
+          <button type="button" data-comparison-prefix="participation" data-comparison="more-than" aria-pressed="false">{ui.moreThanOption}</button>
+        </div>
+        <div class="quorum-fields">
+          <input name="participationMode" type="hidden" value="percentage" />
+          <label>{ui.thresholdValueLabel}<input name="participationThreshold" type="number" min="0" max="100" step="0.1" value="50" required /></label>
+          <div class="custom-select" data-select>
+            <span class="field-label">{ui.denominatorLabel}</span>
+            <input name="participationDenominator" type="hidden" value="all-ballots" />
+            <button type="button" data-select-trigger aria-expanded="false">{ui.allBallotsOption}</button>
+            <div class="select-menu" data-select-menu hidden role="listbox">
+              <button type="button" data-option="all-ballots" role="option">{ui.allBallotsOption}</button>
+              <button type="button" data-option="valid-votes" role="option">{ui.validVotesOption}</button>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset class="quorum-block approval-block">
+        <legend>{ui.approvalHeading}</legend>
+        <p>{ui.approvalHelp}</p>
+        <div class="mode-switch" role="group" aria-label={ui.thresholdModeLabel}>
+          <button type="button" class="active" data-mode-prefix="approval" data-mode="percentage" aria-pressed="true">{ui.percentageOption}</button>
+          <button type="button" data-mode-prefix="approval" data-mode="absolute" aria-pressed="false">{ui.absoluteOption}</button>
+        </div>
+        <div class="comparison-row" role="group" aria-label={ui.comparisonLabel}>
+          <span>{ui.comparisonLabel}</span>
+          <input name="approvalComparison" type="hidden" value="at-least" />
+          <button type="button" class="active" data-comparison-prefix="approval" data-comparison="at-least" aria-pressed="true">{ui.atLeastOption}</button>
+          <button type="button" data-comparison-prefix="approval" data-comparison="more-than" aria-pressed="false">{ui.moreThanOption}</button>
+        </div>
+        <div class="preset-row" role="group" aria-label={ui.presetsLabel}>
+          <span>{ui.presetsLabel}</span>
+          <button type="button" data-preset="simple-majority">{ui.simpleMajorityPreset}</button>
+          <button type="button" data-preset="electorate-majority">{ui.electorateMajorityPreset}</button>
+          <button type="button" data-preset="qualified-55">{ui.qualified55Preset}</button>
+          <button type="button" data-preset="qualified-60">{ui.qualified60Preset}</button>
+        </div>
+        <div class="quorum-fields">
+          <input name="approvalMode" type="hidden" value="percentage" />
+          <label>{ui.thresholdValueLabel}<input name="approvalThreshold" type="number" min="0" max="100" step="0.1" value="50" required /></label>
+          <div class="custom-select" data-select>
+            <span class="field-label">{ui.denominatorLabel}</span>
+            <input name="approvalDenominator" type="hidden" value="valid-votes" />
+            <button type="button" data-select-trigger aria-expanded="false">{ui.validVotesOption}</button>
+            <div class="select-menu" data-select-menu hidden role="listbox">
+              <button type="button" data-option="all-ballots" role="option">{ui.allBallotsOption}</button>
+              <button type="button" data-option="valid-votes" role="option">{ui.validVotesOption}</button>
+              <button type="button" data-option="eligible-voters" role="option">{ui.eligibleVotersOption}</button>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+
+      <div class="form-actions"><button class="secondary-action" type="button" data-reset>{ui.loadExample}</button><button class="share-action" type="button" data-share>{ui.shareAction}</button></div>
+      <p class="tool-status" data-status role="status"></p>
+    </form>
+
+    <section class="decision-panel" aria-live="polite" aria-labelledby="referendum-result-heading">
+      <div class="panel-heading"><span class="panel-index">02</span><h2 id="referendum-result-heading">{ui.resultHeading}</h2></div>
+      <div class="decision-scene" data-scene></div>
+      <div class="empty-result" data-empty-result>{ui.emptyResult}</div>
+      <div class="result-content" data-result hidden></div>
+    </section>
+  </div>
+
+  <section class="guardrails" aria-label="Method and limits">
+    <article><span class="guardrail-mark">01</span><h2>{ui.methodHeading}</h2><p>{ui.methodText}</p></article>
+    <article><span class="guardrail-mark">02</span><h2>{ui.limitsHeading}</h2><p>{ui.limitsText}</p></article>
+    <article><span class="guardrail-mark">03</span><h2>{ui.warningsHeading}</h2><p>{ui.warningsText}</p></article>
+  </section>
+
+  <script is:inline type="application/json" data-referendum-threshold-config set:html={JSON.stringify({ ui })}></script>
+</div>
+
+<script>
+  import { mountReferendumThresholdTool } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-referendum-threshold-tool]');
+  const config = root?.querySelector<HTMLScriptElement>('[data-referendum-threshold-config]');
+  if (root && config) mountReferendumThresholdTool(root, JSON.parse(config.textContent || '{}').ui);
+</script>

package/src/tool/referendum-threshold-calculator/controller.ts

@@ -0,0 +1,141 @@
+import { evaluateReferendum, getExampleInput, type DenominatorMode, type ReferendumInput, type ThresholdComparison, type ThresholdMode, type ThresholdRule } from './logic';
+import { renderDecision, renderDecisionScene, formatInputValue } from './dom-views';
+import { loadSavedInput, saveInput } from './storage';
+import { buildShareUrl, readShareUrl } from './sharing';
+import type { ReferendumThresholdUI } from './ui';
+
+function getInput(root: HTMLElement, name: string): HTMLInputElement {
+  return root.querySelector<HTMLInputElement>(`[name="${name}"]`)!;
+}
+
+function numericValue(root: HTMLElement, name: string): number {
+  return Number(getInput(root, name).value);
+}
+
+function selectedValue(root: HTMLElement, name: string): string {
+  return getInput(root, name).value;
+}
+
+function readRule(root: HTMLElement, prefix: string): ThresholdRule {
+  return { mode: selectedValue(root, `${prefix}Mode`) as ThresholdMode, value: numericValue(root, `${prefix}Threshold`), denominator: selectedValue(root, `${prefix}Denominator`) as DenominatorMode, comparison: selectedValue(root, `${prefix}Comparison`) as ThresholdComparison };
+}
+
+function readInput(root: HTMLElement): ReferendumInput {
+  return { counts: { eligibleVoters: numericValue(root, 'eligibleVoters'), yes: numericValue(root, 'yes'), no: numericValue(root, 'no'), blank: numericValue(root, 'blank'), invalid: numericValue(root, 'invalid') }, rules: { participation: readRule(root, 'participation'), approval: readRule(root, 'approval') } };
+}
+
+function updateSelectLabel(root: HTMLElement, name: string): void {
+  const field = getInput(root, name);
+  const select = field.closest<HTMLElement>('[data-select]');
+  const active = select?.querySelector<HTMLElement>(`[data-option="${field.value}"]`);
+  const trigger = select?.querySelector<HTMLButtonElement>('[data-select-trigger]');
+  if (trigger && active) trigger.textContent = active.textContent;
+}
+
+function updateModeButtons(root: HTMLElement, prefix: string, mode: ThresholdMode): void {
+  const threshold = getInput(root, `${prefix}Threshold`);
+  threshold.max = mode === 'percentage' ? '100' : '';
+  root.querySelectorAll<HTMLButtonElement>(`[data-mode-prefix="${prefix}"]`).forEach((button) => { const active = button.dataset.mode === mode; button.classList.toggle('active', active); button.setAttribute('aria-pressed', String(active)); });
+}
+
+function updateComparisonButtons(root: HTMLElement, prefix: string, comparison: ThresholdComparison): void {
+  root.querySelectorAll<HTMLButtonElement>(`[data-comparison-prefix="${prefix}"]`).forEach((button) => { const active = button.dataset.comparison === comparison; button.classList.toggle('active', active); button.setAttribute('aria-pressed', String(active)); });
+}
+
+function updateRule(root: HTMLElement, prefix: string, rule: ThresholdRule): void {
+  getInput(root, `${prefix}Mode`).value = rule.mode;
+  getInput(root, `${prefix}Threshold`).value = formatInputValue(rule.value);
+  getInput(root, `${prefix}Denominator`).value = rule.denominator;
+  getInput(root, `${prefix}Comparison`).value = rule.comparison ?? 'at-least';
+  updateSelectLabel(root, `${prefix}Denominator`);
+  updateModeButtons(root, prefix, rule.mode);
+  updateComparisonButtons(root, prefix, rule.comparison ?? 'at-least');
+}
+
+function emitChange(field: HTMLInputElement): void {
+  field.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+function writeInput(root: HTMLElement, input: ReferendumInput): void {
+  Object.entries(input.counts).forEach(([name, value]) => { getInput(root, name).value = formatInputValue(value); });
+  ['participation', 'approval'].forEach((prefix) => { updateRule(root, prefix, input.rules[prefix as 'participation' | 'approval'] as ThresholdRule); });
+}
+
+function wireSelect(root: HTMLElement, select: HTMLElement): void {
+  const trigger = select.querySelector<HTMLButtonElement>('[data-select-trigger]');
+  const menu = select.querySelector<HTMLElement>('[data-select-menu]');
+  const field = select.querySelector<HTMLInputElement>('input[type="hidden"]');
+  if (!trigger || !menu || !field) return;
+  trigger.addEventListener('click', () => { const open = menu.hidden; root.querySelectorAll<HTMLElement>('[data-select-menu]').forEach((item) => { item.hidden = true; }); menu.hidden = !open; trigger.setAttribute('aria-expanded', String(open)); });
+  menu.querySelectorAll<HTMLButtonElement>('[data-option]').forEach((option) => option.addEventListener('click', () => { field.value = option.dataset.option ?? ''; updateSelectLabel(root, field.name); menu.hidden = true; trigger.setAttribute('aria-expanded', 'false'); emitChange(field); }));
+}
+
+function wireModeButtons(root: HTMLElement): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-mode-prefix]').forEach((button) => button.addEventListener('click', () => { const prefix = button.dataset.modePrefix!; const mode = button.dataset.mode as ThresholdMode; const field = getInput(root, `${prefix}Mode`); field.value = mode; updateModeButtons(root, prefix, mode); emitChange(field); }));
+}
+
+function wireComparisonButtons(root: HTMLElement): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-comparison-prefix]').forEach((button) => button.addEventListener('click', () => { const prefix = button.dataset.comparisonPrefix!; const comparison = button.dataset.comparison as ThresholdComparison; const field = getInput(root, `${prefix}Comparison`); field.value = comparison; updateComparisonButtons(root, prefix, comparison); emitChange(field); }));
+}
+
+function wirePresets(root: HTMLElement): void {
+  const presets: Record<string, ThresholdRule> = {
+    'simple-majority': { mode: 'percentage', value: 50, denominator: 'valid-votes', comparison: 'more-than' },
+    'electorate-majority': { mode: 'percentage', value: 50, denominator: 'eligible-voters', comparison: 'more-than' },
+    'qualified-55': { mode: 'percentage', value: 55, denominator: 'valid-votes', comparison: 'at-least' },
+    'qualified-60': { mode: 'percentage', value: 60, denominator: 'valid-votes', comparison: 'at-least' },
+  };
+  root.querySelectorAll<HTMLButtonElement>('[data-preset]').forEach((button) => button.addEventListener('click', () => { const preset = presets[button.dataset.preset ?? '']; if (preset) { updateRule(root, 'approval', preset); emitChange(getInput(root, 'approvalThreshold')); } }));
+}
+
+function wireOutsideSelectClose(root: HTMLElement): void {
+  root.addEventListener('click', (event) => {
+    if ((event.target as Element).closest('[data-select]')) return;
+    root.querySelectorAll<HTMLElement>('[data-select-menu]').forEach((menu) => { menu.hidden = true; });
+    root.querySelectorAll<HTMLButtonElement>('[data-select-trigger]').forEach((trigger) => { trigger.setAttribute('aria-expanded', 'false'); });
+  });
+}
+
+function wireShare(root: HTMLElement, ui: ReferendumThresholdUI): void {
+  root.querySelector<HTMLButtonElement>('[data-share]')!.addEventListener('click', async () => {
+    const url = buildShareUrl(window.location.href, readInput(root));
+    window.history.replaceState({}, '', url);
+    try { if (!navigator.clipboard) throw new Error('clipboard-unavailable'); await navigator.clipboard.writeText(url); root.querySelector<HTMLElement>('[data-status]')!.textContent = ui.shareSuccess; } catch { root.querySelector<HTMLElement>('[data-status]')!.textContent = ui.shareFailure; }
+  });
+}
+
+function showEvaluation(root: HTMLElement, input: ReferendumInput, ui: ReferendumThresholdUI): void {
+  const evaluation = evaluateReferendum(input);
+  root.querySelector<HTMLElement>('[data-empty-result]')!.hidden = true;
+  root.querySelector<HTMLElement>('[data-result]')!.hidden = false;
+  renderDecisionScene(root.querySelector<HTMLElement>('[data-scene]')!, evaluation, ui);
+  renderDecision(root.querySelector<HTMLElement>('[data-result]')!, evaluation, ui);
+  root.querySelector<HTMLElement>('[data-status]')!.textContent = evaluation.errors.includes('ballots-exceed-eligible') ? ui.ballotsExceedEligible : '';
+}
+
+function refreshEvaluation(root: HTMLElement, ui: ReferendumThresholdUI): void {
+  const input = readInput(root);
+  saveInput(input);
+  showEvaluation(root, input, ui);
+}
+
+function wireForm(root: HTMLElement, ui: ReferendumThresholdUI): void {
+  const form = root.querySelector<HTMLFormElement>('[data-referendum-form]')!;
+  form.addEventListener('input', () => refreshEvaluation(root, ui));
+  form.addEventListener('change', () => refreshEvaluation(root, ui));
+  form.addEventListener('submit', (event) => { event.preventDefault(); refreshEvaluation(root, ui); });
+  root.querySelector<HTMLButtonElement>('[data-reset]')!.addEventListener('click', () => { writeInput(root, getExampleInput()); refreshEvaluation(root, ui); });
+}
+
+export function mountReferendumThresholdTool(root: HTMLElement, ui: ReferendumThresholdUI): void {
+  root.querySelectorAll<HTMLElement>('[data-select]').forEach((select) => wireSelect(root, select));
+  wireOutsideSelectClose(root);
+  wireModeButtons(root);
+  wireComparisonButtons(root);
+  wirePresets(root);
+  wireForm(root, ui);
+  wireShare(root, ui);
+  const initial = readShareUrl(window.location.href) ?? loadSavedInput() ?? getExampleInput();
+  writeInput(root, initial);
+  showEvaluation(root, initial, ui);
+}

package/src/tool/referendum-threshold-calculator/dom-views.ts

@@ -0,0 +1,71 @@
+import type { ReferendumEvaluation, ThresholdRule } from './logic';
+import { getStatusPresentation } from './evaluator';
+import type { ReferendumThresholdUI } from './ui';
+
+const numberFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });
+const percentFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+
+function formatNumber(value: number): string {
+  return numberFormatter.format(value);
+}
+
+function formatPercent(value: number): string {
+  return `${percentFormatter.format(value)}%`;
+}
+
+function thresholdText(rule: ThresholdRule, ui: ReferendumThresholdUI): string {
+  const operator = rule.comparison === 'more-than' ? '> ' : '>= ';
+  if (rule.mode === 'absolute') return `${operator}${formatNumber(rule.value)} ${ui.peopleSuffix}`;
+  const denominator = denominatorText(rule.denominator, ui);
+  return `${operator}${formatNumber(rule.value)}% of ${denominator}`;
+}
+
+function denominatorText(mode: ThresholdRule['denominator'], ui: ReferendumThresholdUI): string {
+  if (mode === 'eligible-voters') return ui.eligibleVotersLabel;
+  if (mode === 'valid-votes') return ui.validVotesLabel;
+  return ui.allBallotsLabel;
+}
+
+function markerPosition(rule: ThresholdRule, denominator: number): number {
+  if (rule.mode === 'percentage') return rule.value;
+  if (denominator <= 0) return 100;
+  return (rule.value / denominator) * 100;
+}
+
+function statusTitle(evaluation: ReferendumEvaluation, ui: ReferendumThresholdUI): string {
+  if (!evaluation.valid) return ui.invalidResult;
+  if (evaluation.status === 'passed') return ui.passed;
+  if (evaluation.status === 'participation-failed') return ui.participationFailed;
+  if (evaluation.status === 'approval-failed') return ui.approvalFailed;
+  return ui.bothFailed;
+}
+
+function gateMarkup(label: string, rule: ThresholdRule, value: ReferendumEvaluation['participation'], ui: ReferendumThresholdUI): string {
+  const fill = Math.min(100, Math.max(0, value.rate));
+  const marker = markerPosition(rule, value.denominator);
+  const state = value.passed ? 'pass' : 'fail';
+  return `<div class="quorum-gate ${state}"><div class="gate-top"><span>${label}</span><strong>${formatPercent(value.rate)}</strong></div><div class="gate-track"><span style="width:${fill}%"></span><i style="left:${Math.min(100, Math.max(0, marker))}%"></i></div><div class="gate-bottom"><span>${formatNumber(value.numerator)} / ${formatNumber(value.denominator)}</span><span>required ${thresholdText(rule, ui)}</span></div></div>`;
+}
+
+export function renderDecisionScene(target: HTMLElement, evaluation: ReferendumEvaluation, ui: ReferendumThresholdUI): void {
+  const allBallotsRule: ThresholdRule = { mode: evaluation.participation.mode, value: evaluation.participation.threshold, denominator: evaluation.participation.denominatorMode, comparison: evaluation.participation.comparison };
+  const validVotesRule: ThresholdRule = { mode: evaluation.approval.mode, value: evaluation.approval.threshold, denominator: evaluation.approval.denominatorMode, comparison: evaluation.approval.comparison };
+  target.innerHTML = `<div class="ballot-path" aria-label="${ui.decisionPathLabel}"><div class="ballot-mark"><span class="ballot-check">O</span><span>${formatNumber(evaluation.totals.allBallots)} ${ui.allBallotsLabel}</span></div><div class="path-line"></div><div class="gate-stack">${gateMarkup(ui.participationMetric, allBallotsRule, evaluation.participation, ui)}${gateMarkup(ui.approvalMetric, validVotesRule, evaluation.approval, ui)}</div></div>`;
+}
+
+function ruleCard(title: string, evaluation: ReferendumEvaluation['participation'] | ReferendumEvaluation['approval'], rule: ThresholdRule, ui: ReferendumThresholdUI): string {
+  return `<article class="metric-card"><div class="metric-card-head"><span>${title}</span><b class="metric-state ${evaluation.passed ? 'pass' : 'fail'}">${evaluation.passed ? 'PASS' : 'FAIL'}</b></div><strong>${formatPercent(evaluation.rate)}</strong><dl><div><dt>${ui.observedLabel}</dt><dd>${formatNumber(evaluation.numerator)} / ${formatNumber(evaluation.denominator)}</dd></div><div><dt>${ui.thresholdLabel}</dt><dd>${thresholdText(rule, ui)}</dd></div></dl></article>`;
+}
+
+export function renderDecision(target: HTMLElement, evaluation: ReferendumEvaluation, ui: ReferendumThresholdUI): void {
+  const presentation = getStatusPresentation(evaluation);
+  const errors = evaluation.errors.length > 0 ? `<div class="inline-message danger" role="alert">${ui.invalidInput}</div>` : '';
+  const warnings = evaluation.warnings.map((warning) => warning === 'no-valid-votes' ? ui.noValidVotes : ui.noBallots).map((text) => `<li>${text}</li>`).join('');
+  const participationRule: ThresholdRule = { mode: evaluation.participation.mode, value: evaluation.participation.threshold, denominator: evaluation.participation.denominatorMode, comparison: evaluation.participation.comparison };
+  const approvalRule: ThresholdRule = { mode: evaluation.approval.mode, value: evaluation.approval.threshold, denominator: evaluation.approval.denominatorMode, comparison: evaluation.approval.comparison };
+  target.innerHTML = `<div class="decision-banner ${presentation.tone}"><span class="decision-seal">${evaluation.valid ? 'O' : '!'}</span><div><strong>${statusTitle(evaluation, ui)}</strong><p>${presentation.detail}</p></div></div>${errors}<div class="metric-grid">${ruleCard(ui.participationMetric, evaluation.participation, participationRule, ui)}${ruleCard(ui.approvalMetric, evaluation.approval, approvalRule, ui)}</div><div class="totals-strip"><span>${ui.yesShareLabel} <b>${formatNumber(evaluation.approval.numerator)}</b></span><span>${ui.allBallotsLabel} <b>${formatNumber(evaluation.totals.allBallots)}</b></span><span>${ui.validVotesLabel} <b>${formatNumber(evaluation.totals.validVotes)}</b></span><span>${ui.eligibleVotersLabel} <b>${formatNumber(evaluation.participation.denominator)}</b></span></div>${warnings ? `<div class="warning-list"><strong>${ui.warningsHeading}</strong><ul>${warnings}</ul></div>` : ''}<div class="next-step"><strong>${ui.whatNextLabel}</strong><p>${ui.whatNextText}</p></div>`;
+}
+
+export function formatInputValue(value: number): string {
+  return Number.isFinite(value) ? String(value) : '';
+}

package/src/tool/referendum-threshold-calculator/entry.ts

@@ -0,0 +1,27 @@
+import type { CivicToolEntry, ToolLocaleContent } from '../../types';
+import type { ReferendumThresholdUI } from './ui';
+
+export type ReferendumThresholdLocaleContent = ToolLocaleContent<ReferendumThresholdUI>;
+
+export const referendumThresholdCalculator: CivicToolEntry<ReferendumThresholdUI> = {
+  id: 'referendum-threshold-calculator',
+  phase: 'localized',
+  icons: { bg: 'mdi:vote-outline', fg: 'mdi:scale-balance' },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

package/src/tool/referendum-threshold-calculator/evaluator.ts

@@ -0,0 +1,19 @@
+import type { ReferendumEvaluation, ReferendumStatus } from './logic';
+
+export interface StatusPresentation {
+  tone: 'positive' | 'warning' | 'danger' | 'neutral';
+  title: string;
+  detail: string;
+}
+
+const statusDetails: Record<ReferendumStatus, StatusPresentation> = {
+  passed: { tone: 'positive', title: 'Both thresholds pass', detail: 'The declared rule accepts the result because participation and approval tests pass.' },
+  'participation-failed': { tone: 'warning', title: 'Participation quorum fails', detail: 'The approval test may pass, but the declared participation threshold is not reached.' },
+  'approval-failed': { tone: 'warning', title: 'Approval quorum fails', detail: 'Participation reaches its threshold, but the Yes count does not meet the declared approval rule.' },
+  'both-failed': { tone: 'danger', title: 'Both thresholds fail', detail: 'Neither declared quorum is reached with the supplied counts.' },
+  invalid: { tone: 'danger', title: 'Check the declared counts', detail: 'The inputs contain a structural error, so no decision should be read from the result.' },
+};
+
+export function getStatusPresentation(evaluation: ReferendumEvaluation): StatusPresentation {
+  return statusDetails[evaluation.status];
+}

package/src/tool/referendum-threshold-calculator/i18n/de.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import { bibliography } from '../bibliography';
+import type { ReferendumThresholdLocaleContent } from '../entry';
+import type { ReferendumThresholdUI } from '../ui';
+
+const ui: ReferendumThresholdUI = {
+  countsHeading: 'Gemeldete Stimmenzahlen eingeben', eligibleLabel: 'Wahlberechtigte oder registrierte Wähler', eligibleHelp: 'Verwende den Wählerkreis, den die geprüfte Regel nennt.', yesLabel: 'Ja-Stimmen', noLabel: 'Nein-Stimmen', blankLabel: 'Leere Stimmzettel', invalidLabel: 'Ungültige Stimmzettel', participationHeading: 'Beteiligungsquorum', participationHelp: 'Lege fest, was als Beteiligung zählt und welche Schwelle erreicht werden muss.', approvalHeading: 'Zustimmungsquorum', approvalHelp: 'Wähle den Nenner für die Ja-Schwelle. Jede Regel bleibt im Ergebnis sichtbar.', thresholdModeLabel: 'Schwellentyp', comparisonLabel: 'Vergleich', atLeastOption: 'Mindestens', moreThanOption: 'Mehr als', percentageOption: 'Prozent', absoluteOption: 'Absolute Zahl', thresholdValueLabel: 'Schwellenwert', denominatorLabel: 'Verwendete Zahl', allBallotsOption: 'Alle Stimmzettel', validVotesOption: 'Nur gültige Stimmen', eligibleVotersOption: 'Wahlberechtigte', presetsLabel: 'Vorlagen für Zustimmung', simpleMajorityPreset: 'Einfache Mehrheit', electorateMajorityPreset: 'Mehrheit des Wahlkörpers', qualified55Preset: 'Qualifizierte 55 Prozent', qualified60Preset: 'Qualifizierte 60 Prozent', loadExample: 'Beispiel laden', shareAction: 'Permalink kopieren', shareSuccess: 'Permalink kopiert. Er enthält Zahlen und Regeln.', shareFailure: 'Der Permalink steht in der Adresszeile und kann kopiert werden.', resultHeading: 'Entscheidung nach gemeldeter Regel', emptyResult: 'Gib Zahlen und Schwellen ein, um beide Quorumsprüfungen zu sehen.', passed: 'Beide Schwellen erreicht', participationFailed: 'Beteiligungsquorum nicht erreicht', approvalFailed: 'Zustimmungsquorum nicht erreicht', bothFailed: 'Beide Schwellen nicht erreicht', invalidResult: 'Gemeldete Zahlen prüfen', participationMetric: 'Beteiligungsprüfung', approvalMetric: 'Zustimmungsprüfung', observedLabel: 'Beobachtet', thresholdLabel: 'Erforderlich', decisionPathLabel: 'Entscheidungspfad', methodHeading: 'Angewandte Methode', methodText: 'Die Beteiligung ist die ausgewählte Zahl von Stimmzetteln geteilt durch die Wahlberechtigten. Die Zustimmung ist Ja geteilt durch den gewählten Nenner. Der Vergleich legt fest, ob ein exakter Prozentsatz genügt oder überschritten werden muss. Absolute Schwellen vergleichen direkt die Anzahl.', limitsHeading: 'Was dieses Werkzeug nicht leistet', limitsText: 'Es bestimmt keine zuständige Behörde, keine Frist, keine amtliche Zählung und keine Rechtsberatung. Das Ergebnis ist nur so zuverlässig wie die eingegebenen Annahmen.', warningsHeading: 'Grenzfälle und Datenhinweise', warningsText: 'Prüfe, ob leere und ungültige Stimmzettel zur Beteiligung zählen, ob der Wählerkreis aktuell ist und ob die Zustimmung gegen gültige Stimmen, alle Stimmzettel oder die Wahlberechtigten berechnet wird.', invalidInput: 'Verwende ganze, nichtnegative Zahlen. Die Wahlberechtigten müssen größer als null sein und die Stimmzettel dürfen sie nicht überschreiten.', ballotsExceedEligible: 'Die gemeldeten Stimmzettel überschreiten den Wählerkreis.', noValidVotes: 'Es gibt keine Ja- oder Nein-Stimmen, daher fehlt der Nenner gültiger Stimmen.', noBallots: 'Es wurden keine Stimmzettel gemeldet.', peopleSuffix: 'Personen', yesShareLabel: 'Ja-Anteil', allBallotsLabel: 'alle Stimmzettel', validVotesLabel: 'gültige Stimmen', eligibleVotersLabel: 'Wahlberechtigte', whatNextLabel: 'Vor einer Verwendung des Ergebnisses', whatNextText: 'Übernimm den genauen Wortlaut der geltenden Regel und vergleiche ihn mit den angezeigten Einstellungen.',
+};
+
+const softwareApplication: SoftwareApplication = { '@type': 'SoftwareApplication', name: 'Referendum Quorum Rechner', applicationCategory: 'EducationalApplication', operatingSystem: 'Any', description: 'Prüft Beteiligungs- und Zustimmungsquoren mit sichtbaren Zählern und Nennern.', url: 'https://gamebob.dev/de/referendum-quorum-rechner', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+const faqPage: FAQPage = { '@type': 'FAQPage', mainEntity: [
+  { '@type': 'Question', name: 'Was entscheidet dieser Rechner?', acceptedAnswer: { '@type': 'Answer', text: 'Er prüft gemeldete Stimmen gegen die von dir eingegebenen Beteiligungs- und Zustimmungsschwellen. Er legt nicht fest, welche Rechtsregel gilt.' } },
+  { '@type': 'Question', name: 'Was ist der Unterschied zwischen den beiden Quoren?', acceptedAnswer: { '@type': 'Answer', text: 'Das Beteiligungsquorum fragt, ob genügend Stimmen oder Personen erfasst wurden. Das Zustimmungsquorum fragt, ob Ja die geforderte Zahl oder den geforderten Anteil erreicht.' } },
+  { '@type': 'Question', name: 'Warum verändern leere und ungültige Stimmzettel das Ergebnis?', acceptedAnswer: { '@type': 'Answer', text: 'Sie können bei der Beteiligung zählen, aber aus gültigen Stimmen ausgeschlossen werden. Der Rechner macht diese Nenner getrennt sichtbar.' } },
+  { '@type': 'Question', name: 'Beweist ein positives Ergebnis die rechtliche Gültigkeit?', acceptedAnswer: { '@type': 'Answer', text: 'Nein. Prüfe Verfassung, Gesetz, amtliche Hinweise, Definitionen der Stimmzettel und die zuständige Zählstelle.' } },
+] };
+const howTo: HowTo = { '@type': 'HowTo', name: 'Referendumsquoren prüfen', step: [
+  { '@type': 'HowToStep', name: 'Wählerkreis eintragen', text: 'Trage die Wahlberechtigten oder registrierten Wähler der geprüften Regel ein.' },
+  { '@type': 'HowToStep', name: 'Stimmen erfassen', text: 'Trenne Ja, Nein, leere und ungültige Stimmzettel aus derselben Auszählung.' },
+  { '@type': 'HowToStep', name: 'Beteiligung festlegen', text: 'Wähle die Zählweise und eine prozentuale oder absolute Beteiligungsschwelle.' },
+  { '@type': 'HowToStep', name: 'Zustimmung festlegen', text: 'Wähle den Zustimmungsnenner und die erforderliche Ja-Zahl oder Ja-Quote.' },
+  { '@type': 'HowToStep', name: 'Ergebnis lesen', text: 'Vergleiche Zähler, Nenner, beobachteten Wert, Schwelle und Datenhinweise.' },
+] };
+
+export const content: ToolLocaleContent<ReferendumThresholdLocaleContent['ui']> = {
+  slug: 'referendum-quorum-rechner', title: 'Referendum Quorum Rechner', description: 'Prüfe Beteiligungs- und Zustimmungsquoren mit sichtbaren Zählern, Nennern und klar getrennten Regeln.', ui, seo: [
+    { type: 'title', text: 'Referendumsregel mit sichtbaren Nennern prüfen', level: 2 },
+    { type: 'paragraph', html: 'Ein Referendum kann einfach aussehen, obwohl die entscheidende Frage im Nenner steckt. Dieser Rechner stellt Wahlkreis, Stimmzettel und beide Quoren nebeneinander, damit die verwendete Definition nachvollziehbar bleibt.' },
+    { type: 'paragraph', html: 'Beteiligung und Zustimmung sind getrennte Prüfungen. Leere oder ungültige Stimmzettel können die Beteiligung erhöhen, ohne Teil der gültigen Stimmen zu sein. Das Werkzeug übernimmt diese Entscheidung nicht stillschweigend.' },
+    { type: 'title', text: 'So funktionieren die beiden Quoren', level: 2 },
+    { type: 'paragraph', html: 'Die Beteiligungsquote teilt die gewählte Beteiligungszahl durch die Wahlberechtigten. Die Zustimmungsquote teilt Ja durch den gewählten Zustimmungsnenner. Der Vergleich kann einen exakten Wert akzeptieren oder eine echte Überschreitung verlangen.' },
+    { type: 'table', headers: ['Prüfung', 'Beobachteter Wert', 'Frage'], rows: [['Beteiligung', 'Ausgewählte Stimmzettel / Wahlberechtigte', 'Hat ein ausreichender Teil teilgenommen?'], ['Zustimmung', 'Ja / gewählter Nenner', 'Erreicht Ja die geforderte Schwelle?']] },
+    { type: 'title', text: 'Zahlen sauber vorbereiten', level: 2 },
+    { type: 'paragraph', html: 'Nutze Zahlen aus derselben amtlichen Auszählung und demselben Wählerkreis. Vermische keine vorläufige Zählung mit einem späteren Wählerverzeichnis. Halte Ja, Nein, leer und ungültig getrennt, bevor du einen Nenner auswählst.' },
+    { type: 'list', items: ['Prüfe, ob die Regel Wahlberechtigte oder registrierte Wähler nennt.', 'Erfasse alle vier Stimmzettelkategorien separat.', 'Stelle sicher, dass die Stimmzettel den Wählerkreis nicht überschreiten.', 'Notiere den Nenner jeder Prozentangabe.', 'Bewahre den amtlichen Wortlaut neben dem Ergebnis auf.'] },
+    { type: 'tip', title: 'Der Nenner ist Teil der Regel', html: '50 Prozent Zustimmung unter gültigen Stimmen ist eine andere Prüfung als 50 Prozent unter allen Stimmzetteln oder Wahlberechtigten. Leere und ungültige Stimmen können die Entscheidung verschieben.' },
+    { type: 'title', text: 'Positive und negative Zustände einordnen', level: 2 },
+    { type: 'paragraph', html: 'Das Ergebnis unterscheidet Beteiligungsfehler von Zustimmungsfehlern. Wenn die Beteiligung genügt, aber Zustimmung nicht, liegt das Problem bei Ja und seinem Nenner. Wenn nur Zustimmung genügt, fehlt die Beteiligungsbedingung.' },
+    { type: 'paragraph', html: 'Ein positives Rechenergebnis ist keine Rechtsfeststellung. Länder und Fragestellungen können besondere Regeln, territoriale Bedingungen oder amtliche Behandlungen leerer Stimmen vorsehen. Geprüft wird nur deine Konfiguration.' },
+    { type: 'tip', title: 'Das Ergebnis als Prüfbogen verwenden', html: 'Vergleiche vor einer Veröffentlichung jeden angezeigten Zähler, Nenner und Schwellentyp mit der aktuellen amtlichen Regel. Bei unklarer Definition solltest du den Hinweis offenlassen.' },
+    { type: 'title', text: 'Quellen und Grenzen', level: 2 },
+    { type: 'paragraph', html: 'International IDEA beschreibt die Bedeutung klarer Beteiligungs- und Zustimmungsregeln. Die Venedig-Kommission behandelt Wirkungen und Risiken von Quoren. Diese Quellen liefern keinen universellen Schwellenwert für jedes Land.' },
+  ], faq: [
+    { question: 'Was entscheidet dieser Rechner?', answer: 'Er prüft gemeldete Stimmen gegen die von dir eingegebenen Beteiligungs- und Zustimmungsschwellen. Er legt nicht fest, welche Rechtsregel gilt.' },
+    { question: 'Was ist der Unterschied zwischen den beiden Quoren?', answer: 'Das Beteiligungsquorum fragt, ob genügend Stimmen oder Personen erfasst wurden. Das Zustimmungsquorum fragt, ob Ja die geforderte Zahl oder den geforderten Anteil erreicht.' },
+    { question: 'Warum verändern leere und ungültige Stimmzettel das Ergebnis?', answer: 'Sie können bei der Beteiligung zählen, aber aus gültigen Stimmen ausgeschlossen werden. Der Rechner macht diese Nenner getrennt sichtbar.' },
+    { question: 'Beweist ein positives Ergebnis die rechtliche Gültigkeit?', answer: 'Nein. Prüfe Verfassung, Gesetz, amtliche Hinweise, Definitionen der Stimmzettel und die zuständige Zählstelle.' },
+  ], bibliography, howTo: [
+    { name: 'Wählerkreis eintragen', text: 'Trage die Wahlberechtigten oder registrierten Wähler der geprüften Regel ein.' },
+    { name: 'Stimmen erfassen', text: 'Trenne Ja, Nein, leere und ungültige Stimmzettel aus derselben Auszählung.' },
+    { name: 'Beteiligung festlegen', text: 'Wähle die Zählweise und eine prozentuale oder absolute Beteiligungsschwelle.' },
+    { name: 'Zustimmung festlegen', text: 'Wähle den Zustimmungsnenner und die erforderliche Ja-Zahl oder Ja-Quote.' },
+    { name: 'Ergebnis lesen', text: 'Vergleiche Zähler, Nenner, beobachteten Wert, Schwelle und Datenhinweise.' },
+  ], schemas: [softwareApplication, faqPage, howTo] as unknown as Record<string, unknown>[]
+};