@jjlmoya/utils-civic 1.1.0 → 1.2.0

package/src/category/i18n/tr.ts

@@ -2,19 +2,22 @@ import type { CategoryLocaleContent } from '../../types';
 
 export const content: CategoryLocaleContent = {
   slug: 'kamusal',
-  title: 'Kamusal karar araçları',
-  description: 'Şeffaf varsayımlarla kamu karar sistemlerini incelemek için çevrimdışı araçlar; başlangıç noktası seçim sandalyesi dağılımı modelidir.',
+  title: 'Seçimler, bütçeler ve kamu verileri için araçlar',
+  description: 'Seçimleri, koalisyonları, referandumları, kamu bütçelerini, açık verileri, parlamento oylarını ve bilgiye erişimi açık varsayımlarla inceleyen yurttaşlık araçları.',
   seo: [
-    { type: 'title', text: 'Oy toplamlarından temsili modellemek', level: 2 },
-    { type: 'paragraph', html: 'İlk kamusal araç, parti veya liste oylarını izlenebilir bir sandalye dağılımına dönüştürür. Yöntem, seçim barajı, bölüm sırası, kalan oy sırası ve oylarla sandalyeler arasındaki fark adım adım görünür.' },
-    { type: 'title', text: 'Yöntemleri ve varsayımları karşılaştırın', level: 2 },
-    { type: 'paragraph', html: 'Kamusal modeller, varsayımları açık kaldığında işe yarar. Aynı girdilerle D\'Hondt, Sainte-Laguë ve Hare en büyük kalan yöntemlerini karşılaştırın; ardından barajın veya seçim bölgesi büyüklüğünün sonucu nasıl değiştirdiğini inceleyin. Çıktı eğitseldir ve resmî sayımın ya da belirli bir seçim hukukunun yerini tutmaz.' },
-    { type: 'title', text: 'Varsayılan olarak özel', level: 2 },
-    { type: 'paragraph', html: 'Girdiler tarayıcıda işlenir. Hesap açmak gerekmez. Model, dersler, kamusal açıklamalar ve oy senaryolarını bir hizmete göndermeden yapılan dikkatli varsayım çalışmaları için tasarlanmıştır.' },
+    { type: 'title', text: 'Seçimleri ve ortak kararları inceleyin', level: 2 },
+    { type: 'paragraph', html: 'Bu yurttaşlık araçları koleksiyonu, kamu karar sistemlerini anlamayı kolaylaştırır. Seçim sandalye dağılımıyla başlar ve koalisyon çoğunlukları, referandum eşikleri, parlamento oyları ve oyların karara dönüşme süreci için araçlar sunacak şekilde tasarlanmıştır.' },
+    { type: 'title', text: 'Kuralları gizlemeden temsili karşılaştırın', level: 2 },
+    { type: 'paragraph', html: 'Bir seçim senaryosu, varsayımları görünür olduğunda anlamlıdır. Sandalye dağılımı modeliyle D\'Hondt, Sainte-Laguë ve Hare en büyük kalan yöntemlerini karşılaştırın; ardından barajları, seçim bölgesi büyüklüğünü, oy paylarını, sandalye paylarını ve dağıtım sırasını inceleyin. Bunlar öğrenme ve açıklama senaryolarıdır, resmî sonuç değildir.' },
+    { type: 'title', text: 'Kamu önceliklerini bütçe senaryolarına dönüştürün', level: 2 },
+    { type: 'paragraph', html: 'Planlanan araçlar, öncelikleri anlaşılır bütçe senaryolarına dönüştürmeye de yardımcı olacaktır. Bir öncelik matrisinin kamu ihtiyaçlarını nasıl sıraladığını, katılımcı bütçenin kısıtlar altında nasıl dağıtılacağını ve kamu bütçesinin toplamlar, kategoriler ve tercihler üzerinden nasıl okunacağını inceleyin.' },
+    { type: 'title', text: 'Açık verileri ve kamu hesap verebilirliğini inceleyin', level: 2 },
+    { type: 'paragraph', html: 'Kamusal bir karar, arkasındaki bilginin kalitesine bağlıdır. Planlanan koleksiyon açık veri kalitesini profillemek, parlamento oylarını analiz etmek ve daha açık bilgi edinme başvuruları hazırlamak için araçlar içerir; böylece eksikler ve sorular daha kolay belgelenebilir.' },
+    { type: 'title', text: 'Şeffaf senaryolar, açık sınırlar ve tarayıcı gizliliği', level: 2 },
+    { type: 'paragraph', html: 'Her araç girdileri, yöntemi, varsayımları ve sınırları anlaşılır bir dille göstermeyi amaçlar. Koleksiyon derslerde, gazetecilikte, topluluk çalışmalarında ve dikkatli ne olurdu analizlerinde kullanılabilir. Tarayıcıdaki senaryolar resmî sayımın, belirli bir hukuk kuralının veya uzman görüşünün yerini tutmaz.' },
     { type: 'stats', items: [
       { label: 'Araç', value: '1', icon: 'mdi:tools' },
       { label: 'Yöntem', value: '3', icon: 'mdi:scale-balance' },
-      { label: 'Mod', value: 'Çevrimdışı', icon: 'mdi:lock-outline' },
       { label: 'Durum', value: 'Çok dilli', icon: 'mdi:translate' },
     ] },
   ],

package/src/category/i18n/zh.ts

@@ -2,15 +2,19 @@ import type { CategoryLocaleContent } from '../../types';
 
 export const content: CategoryLocaleContent = {
   slug: 'civic',
-  title: '公共决策工具',
-  description: '用透明的假设探索公共决策制度的离线工具，首先提供选举席位分配模型。',
+  title: '选举、预算与公共数据的公民工具',
+  description: '用清晰的假设探索选举、联盟、公投、公共预算、开放数据、议会投票和信息公开的公民工具。',
   seo: [
-    { type: 'title', text: '从得票数建立代表性模型', level: 2 },
-    { type: 'paragraph', html: '第一个公共工具把政党或名单的得票数转换为可追溯的席位分配。用户可以逐步查看分配方法、门槛、商的顺序、余数的顺序，以及得票与席位之间的差异。' },
-    { type: 'title', text: '比较方法与假设', level: 2 },
-    { type: 'paragraph', html: '公共制度模型只有在假设清晰时才有帮助。用相同输入比较顿特法、圣拉古法和黑尔最大余数法，再测试门槛或选区席位数如何改变结果。输出用于学习和解释，不能替代官方计票或任何特定地区的选举法。' },
-    { type: 'title', text: '默认在浏览器中处理', level: 2 },
-    { type: 'paragraph', html: '输入在浏览器内处理，不需要账户。它适合课堂练习、公共说明和谨慎的假设分析，不会把投票情景发送给外部服务。' },
+    { type: 'title', text: '探索选举与集体决策', level: 2 },
+    { type: 'paragraph', html: '这组公民工具旨在让公共决策制度更容易理解。它从选举席位分配开始，并计划覆盖联盟多数、公投门槛、议会投票模式，以及得票如何转化为公共决策等问题。' },
+    { type: 'title', text: '不隐藏规则，比较代表性差异', level: 2 },
+    { type: 'paragraph', html: '选举情景只有在假设清晰时才有意义。使用席位分配模型比较顿特法、圣拉古法和黑尔最大余数法，再查看门槛、选区规模、得票率、席位率和席位分配顺序。这些情景用于学习和解释，不是官方结果。' },
+    { type: 'title', text: '把公共优先事项转化为预算情景', level: 2 },
+    { type: 'paragraph', html: '计划中的工具还将帮助把优先事项转化为易于理解的预算情景。探索优先级矩阵如何排列公共需求，参与式预算如何在限制条件下分配，以及如何通过总额、类别和权衡来阅读公共预算。' },
+    { type: 'title', text: '检查开放数据与公共问责', level: 2 },
+    { type: 'paragraph', html: '公共决策取决于支撑它的信息质量。计划中的工具包括开放数据质量分析、议会投票分析和信息公开申请构建，帮助记录信息缺口、提出清晰问题并追踪依据。' },
+    { type: 'title', text: '为公共决策提供清晰情景', level: 2 },
+    { type: 'paragraph', html: '每个工具都计划用易懂的语言展示输入、方法、假设和限制。它们适合课堂、新闻报道、社区工作和谨慎的假设分析。工具帮助清晰解释问题，但不能替代官方计票、具体法律规则或专业意见。' },
     { type: 'stats', items: [
       { label: '工具', value: '1', icon: 'mdi:tools' },
       { label: '方法', value: '3', icon: 'mdi:scale-balance' },

package/src/category/index.ts

@@ -1,9 +1,10 @@
 import { electionSeatApportionmentCalculator } from '../tool/election-seat-apportionment-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: [electionSeatApportionmentCalculator],
+  tools: [electionSeatApportionmentCalculator, voteSeatDisproportionalityAnalyzer],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -1,9 +1,13 @@
 export { electionSeatApportionmentCalculator } from './tool/election-seat-apportionment-calculator/entry';
 export type { ElectionSeatUI, ElectionSeatLocaleContent } from './tool/election-seat-apportionment-calculator/entry';
+export { voteSeatDisproportionalityAnalyzer } from './tool/vote-seat-disproportionality-analyzer/entry';
+export type { VoteSeatUI, VoteSeatLocaleContent } from './tool/vote-seat-disproportionality-analyzer/entry';
 export { civicCategory } from './category';
 
 import { electionSeatApportionmentCalculator } from './tool/election-seat-apportionment-calculator/entry';
+import { voteSeatDisproportionalityAnalyzer } from './tool/vote-seat-disproportionality-analyzer/entry';
 
 export const ALL_ENTRIES = [
   electionSeatApportionmentCalculator,
+  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 { voteSeatDisproportionalityAnalyzer, VOTE_SEAT_DISPROPORTIONALITY_ANALYZER_TOOL } from './tool/vote-seat-disproportionality-analyzer';
 
 export type {
   KnownLocale,

package/src/tests/i18n_coverage.test.ts

@@ -11,6 +11,10 @@ describe('I18n Coverage Validation', () => {
   ALL_TOOLS.forEach(({ entry }: { entry: any }) => {
     describe(`Tool: ${entry.id}`, () => {
       it('should have all 15 required locales', () => {
+        if (entry.phase === 'english-first') {
+          expect(Object.keys(entry.i18n)).toEqual(['en']);
+          return;
+        }
         const registeredLocales = Object.keys(entry.i18n);
         EXPECTED_LOCALES.forEach((locale) => {
           expect(
@@ -21,6 +25,10 @@ describe('I18n Coverage Validation', () => {
       });
 
       it('all locale loaders should be functions', () => {
+        if (entry.phase === 'english-first') {
+          expect(typeof entry.i18n.en).toBe('function');
+          return;
+        }
         EXPECTED_LOCALES.forEach((locale) => {
           const loader = entry.i18n[locale as keyof typeof entry.i18n];
           expect(

package/src/tests/locale_completeness.test.ts

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

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(1);
+      expect(ALL_TOOLS.length).toBe(2);
     });
 
     it('civicCategory should be defined', () => {

package/src/tool/vote-seat-disproportionality-analyzer/bibliography.astro

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

package/src/tool/vote-seat-disproportionality-analyzer/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Michael Gallagher, Proportionality, Disproportionality and Electoral Systems',
+    url: 'https://www.tcd.ie/Political_Science/about/people/michael_gallagher/ElectoralStudies1991.pdf',
+  },
+  {
+    name: 'John Loosemore and Victor J. Hanby, The Theoretical Limits of Maximum Distortion',
+    url: 'https://www.cambridge.org/core/services/aop-cambridge-core/content/view/77CE5C85BDDDE59036B7E91D81FBF87E/S000712340000925Xa.pdf/div-class-title-the-theoretical-limits-of-maximum-distortion-some-analytic-expressions-for-electoral-systems-div.pdf',
+  },
+  {
+    name: 'Universidad de Valladolid, Índices de desproporcionalidad electoral',
+    url: 'https://uvadoc.uva.es/bitstream/handle/10324/71724/TFG-E-2023.pdf?sequence=1',
+  },
+];

package/src/tool/vote-seat-disproportionality-analyzer/component.astro

@@ -0,0 +1,48 @@
+---
+import type { VoteSeatUI } from './ui';
+import './vote-seat-disproportionality-analyzer.css';
+
+interface Props {
+  ui: VoteSeatUI;
+}
+
+const { ui } = Astro.props as Props;
+const initialRows = [
+  { name: 'Cedar', votes: 42000, seats: 8 },
+  { name: 'River', votes: 31000, seats: 5 },
+  { name: 'Lantern', votes: 17000, seats: 2 },
+  { name: 'Common', votes: 10000, seats: 1 },
+];
+---
+
+<div class="vote-seat-tool" data-vote-seat-tool>
+  <div class="comparison-surface">
+    <form class="input-surface" data-vote-seat-form>
+      <section class="input-section" aria-labelledby="vote-seat-input-heading">
+        <div class="section-label"><span class="section-glyph">01</span><h2 id="vote-seat-input-heading">{ui.rowsLabel}</h2></div>
+        <p class="field-help">{ui.rowsHelp}</p>
+        <div class="party-input-list" data-party-list></div>
+        <button class="add-row" type="button" data-add-row>+ {ui.addRow}</button>
+      </section>
+      <div class="form-actions">
+        <button class="primary-action" type="submit">{ui.calculate}</button>
+        <button class="secondary-action" type="button" data-reset>{ui.reset}</button>
+      </div>
+      <p class="tool-status" data-status role="status"></p>
+    </form>
+    <section class="result-surface" aria-live="polite" aria-labelledby="vote-seat-result-heading">
+      <div class="result-heading"><span class="section-glyph">02</span><h2 id="vote-seat-result-heading">{ui.resultLabel}</h2></div>
+      <p class="model-notice">{ui.modelNotice}</p>
+      <div class="empty-result" data-empty-result>{ui.emptyState}</div>
+      <div class="result-content" data-result hidden></div>
+    </section>
+  </div>
+  <script is:inline type="application/json" data-vote-seat-config set:html={JSON.stringify({ ui, initialRows })}></script>
+</div>
+
+<script>
+  import { mountVoteSeatTool } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-vote-seat-tool]');
+  if (root) mountVoteSeatTool(root);
+</script>

package/src/tool/vote-seat-disproportionality-analyzer/controller.ts

@@ -0,0 +1,165 @@
+import { calculateDisproportionality, type VoteSeatInput, type VoteSeatRow } from './logic';
+import { renderDisproportionalityResult } from './dom-views';
+import { evaluateDisproportionality } from './evaluator';
+import { clearVoteSeatInput, loadVoteSeatInput, saveVoteSeatInput } from './storage';
+import type { VoteSeatUI } from './ui';
+
+interface Config {
+  ui: VoteSeatUI;
+  initialRows: VoteSeatRow[];
+}
+
+interface InputSpec {
+  label: string;
+  field: string;
+  value: string;
+  type: string;
+  maxLength?: number;
+}
+
+interface Elements {
+  form: HTMLFormElement;
+  list: HTMLElement;
+  result: HTMLElement;
+  empty: HTMLElement;
+  status: HTMLElement;
+}
+
+const readConfig = (root: HTMLElement): Config => {
+  const script = root.querySelector<HTMLScriptElement>('[data-vote-seat-config]');
+  return JSON.parse(script?.textContent ?? '{}') as Config;
+};
+
+const isInput = (value: VoteSeatInput | null): value is VoteSeatInput => Boolean(value?.rows?.length);
+
+const renderRows = (list: HTMLElement, rows: VoteSeatRow[], ui: VoteSeatUI): void => {
+  list.replaceChildren();
+  rows.forEach((row, index) => {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'party-input-row';
+    wrapper.dataset.rowIndex = String(index);
+    const number = document.createElement('span');
+    number.className = 'row-number';
+    number.textContent = String(index + 1).padStart(2, '0');
+    const nameLabel = createInputLabel({ label: ui.partyNameLabel, field: 'name', value: row.name, type: 'text', maxLength: 32 });
+    const votesLabel = createInputLabel({ label: ui.votesLabel, field: 'votes', value: String(row.votes), type: 'number' });
+    const seatsLabel = createInputLabel({ label: ui.seatsLabel, field: 'seats', value: String(row.seats), type: 'number' });
+    const remove = document.createElement('button');
+    remove.type = 'button';
+    remove.className = 'remove-row';
+    remove.dataset.removeRow = 'true';
+    remove.ariaLabel = ui.removeRow;
+    remove.textContent = '×';
+    wrapper.append(number, nameLabel, votesLabel, seatsLabel, remove);
+    list.append(wrapper);
+  });
+};
+
+const createInputLabel = ({ label, field, value, type, maxLength }: InputSpec): HTMLLabelElement => {
+  const wrapper = document.createElement('label');
+  wrapper.className = `input-label input-${field}`;
+  const caption = document.createElement('span');
+  caption.textContent = label;
+  const input = document.createElement('input');
+  input.type = type;
+  input.dataset.field = field;
+  input.value = value;
+  if (maxLength) input.maxLength = maxLength;
+  if (type === 'number') {
+    input.min = '0';
+    input.step = 'any';
+    input.inputMode = 'decimal';
+  }
+  wrapper.append(caption, input);
+  return wrapper;
+};
+
+const readRows = (list: HTMLElement): VoteSeatRow[] => Array.from(list.querySelectorAll<HTMLElement>('[data-row-index]')).map((row) => {
+  const input = (field: string) => row.querySelector<HTMLInputElement>(`[data-field="${field}"]`);
+  return {
+    name: input('name')?.value ?? '',
+    votes: Number(input('votes')?.value ?? Number.NaN),
+    seats: Number(input('seats')?.value ?? Number.NaN),
+  };
+});
+
+const setStatus = (status: HTMLElement, tone: string, message: string): void => {
+  status.className = `tool-status status-${tone}`;
+  status.textContent = message;
+};
+
+const getElements = (root: HTMLElement): Elements | null => {
+  const form = root.querySelector<HTMLFormElement>('[data-vote-seat-form]');
+  const list = root.querySelector<HTMLElement>('[data-party-list]');
+  const result = root.querySelector<HTMLElement>('[data-result]');
+  const empty = root.querySelector<HTMLElement>('[data-empty-result]');
+  const status = root.querySelector<HTMLElement>('[data-status]');
+  return form && list && result && empty && status ? { form, list, result, empty, status } : null;
+};
+
+const renderError = (elements: Elements, ui: VoteSeatUI, error: unknown): void => {
+  elements.result.hidden = true;
+  elements.empty.hidden = false;
+  const message = error instanceof Error ? error.message : 'Enter valid values.';
+  setStatus(elements.status, 'error', `${ui.errorPrefix}: ${message}`);
+};
+
+const createUpdater = (config: Config, elements: Elements): (() => void) => {
+  const update = (): void => {
+    const rows = readRows(elements.list);
+    try {
+      const calculated = calculateDisproportionality({ rows });
+      renderDisproportionalityResult(elements.result, calculated, config.ui, document.documentElement.lang || 'en');
+      elements.result.hidden = false;
+      elements.empty.hidden = true;
+      const state = evaluateDisproportionality(calculated, config.ui);
+      setStatus(elements.status, state.tone, state.text);
+      saveVoteSeatInput({ rows });
+    } catch (error) {
+      renderError(elements, config.ui, error);
+    }
+  };
+  return update;
+};
+
+const bindRowActions = (elements: Elements, ui: VoteSeatUI, update: () => void): void => {
+  elements.list.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    if (!target.closest('[data-remove-row]')) return;
+    const rows = readRows(elements.list);
+    const row = target.closest<HTMLElement>('[data-row-index]');
+    const index = Number(row?.dataset.rowIndex ?? -1);
+    if (index >= 0 && rows.length > 1) rows.splice(index, 1);
+    renderRows(elements.list, rows, ui);
+    update();
+  });
+};
+
+const bindFormActions = (root: HTMLElement, config: Config, elements: Elements, update: () => void): void => {
+  elements.form.addEventListener('input', update);
+  elements.form.addEventListener('submit', (event) => { event.preventDefault(); update(); });
+  root.querySelector('[data-add-row]')?.addEventListener('click', () => {
+    const rows = readRows(elements.list);
+    rows.push({ name: `List ${rows.length + 1}`, votes: 0, seats: 0 });
+    renderRows(elements.list, rows, config.ui);
+    update();
+  });
+  root.querySelector('[data-reset]')?.addEventListener('click', () => {
+    clearVoteSeatInput();
+    renderRows(elements.list, config.initialRows, config.ui);
+    update();
+  });
+};
+
+export const mountVoteSeatTool = (root: HTMLElement): void => {
+  const config = readConfig(root);
+  const elements = getElements(root);
+  if (!elements) return;
+  const stored = loadVoteSeatInput();
+  const rows = isInput(stored) ? stored.rows : config.initialRows;
+  const update = createUpdater(config, elements);
+  renderRows(elements.list, rows, config.ui);
+  bindFormActions(root, config, elements, update);
+  bindRowActions(elements, config.ui, update);
+  update();
+};

package/src/tool/vote-seat-disproportionality-analyzer/dom-views.ts

@@ -0,0 +1,123 @@
+import type { DisproportionalityResult, PartyDisproportionality } from './logic';
+import type { VoteSeatUI } from './ui';
+
+const make = <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string): HTMLElementTagNameMap[K] => {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  return element;
+};
+
+const text = (value: string): Text => document.createTextNode(value);
+
+const addMetric = (parent: HTMLElement, label: string, value: string, accent: string): void => {
+  const metric = make('div', `metric metric-${accent}`);
+  const metricLabel = make('span', 'metric-label');
+  metricLabel.append(text(label));
+  const metricValue = make('strong', 'metric-value');
+  metricValue.append(text(value));
+  metric.append(metricLabel, metricValue);
+  parent.append(metric);
+};
+
+const formatNumber = (value: number, locale: string, maximumFractionDigits = 2): string => new Intl.NumberFormat(locale, {
+  maximumFractionDigits,
+}).format(value);
+
+const formatRatio = (value: number | null, locale: string): string => {
+  if (value === null) return 'n/a';
+  if (value === Infinity) return '∞';
+  return formatNumber(value, locale, 3);
+};
+
+const addRibbon = (parent: HTMLElement, party: PartyDisproportionality, ui: VoteSeatUI, locale: string): void => {
+  const row = make('div', 'share-strip');
+  const name = make('div', 'share-name');
+  name.append(text(party.name));
+  const shares = make('div', 'share-ribbons');
+  const voteRibbon = make('span', 'share-ribbon vote-ribbon');
+  voteRibbon.style.width = `${party.voteSharePercent}%`;
+  voteRibbon.title = `${ui.voteShareLabel}: ${formatNumber(party.voteSharePercent, locale)}%`;
+  const seatRibbon = make('span', 'share-ribbon seat-ribbon');
+  seatRibbon.style.width = `${party.seatSharePercent}%`;
+  seatRibbon.title = `${ui.seatShareLabel}: ${formatNumber(party.seatSharePercent, locale)}%`;
+  shares.append(voteRibbon, seatRibbon);
+  const gap = make('span', 'share-gap');
+  gap.append(text(`${party.differencePercent > 0 ? '+' : ''}${formatNumber(party.differencePercent, locale)} pp`));
+  row.append(name, shares, gap);
+  parent.append(row);
+};
+
+const buildScene = (result: DisproportionalityResult, ui: VoteSeatUI, locale: string): HTMLElement => {
+  const scene = make('div', 'press-scene');
+  const sceneLegend = make('div', 'scene-legend');
+  sceneLegend.append(text(`${ui.voteShareLabel}  /  ${ui.seatShareLabel}`));
+  scene.append(sceneLegend);
+  result.parties.forEach((party) => addRibbon(scene, party, ui, locale));
+  return scene;
+};
+
+const buildHeaders = (ui: VoteSeatUI): HTMLTableRowElement => {
+  const row = make('tr');
+  [ui.partyNameLabel, ui.voteShareLabel, ui.seatShareLabel, ui.differenceLabel, ui.ratioLabel, ui.directionLabel].forEach((label) => {
+    const cell = make('th');
+    cell.scope = 'col';
+    cell.append(text(label));
+    row.append(cell);
+  });
+  return row;
+};
+
+const buildBody = (result: DisproportionalityResult, ui: VoteSeatUI, locale: string): HTMLTableSectionElement => {
+  const body = make('tbody');
+  result.parties.forEach((party) => {
+    const row = make('tr');
+    [
+      party.name,
+      `${formatNumber(party.voteSharePercent, locale)}%`,
+      `${formatNumber(party.seatSharePercent, locale)}%`,
+      `${party.differencePercent > 0 ? '+' : ''}${formatNumber(party.differencePercent, locale)} pp`,
+      formatRatio(party.voteToSeatRatio, locale),
+      ui[party.direction],
+    ].forEach((value) => {
+      const cell = make('td');
+      cell.append(text(value));
+      row.append(cell);
+    });
+    body.append(row);
+  });
+  return body;
+};
+
+const buildDetail = (result: DisproportionalityResult, ui: VoteSeatUI, locale: string): HTMLElement => {
+  const section = make('section', 'detail-section');
+  const heading = make('h3', 'detail-heading');
+  heading.append(text(ui.detailLabel));
+  const table = make('table', 'detail-table');
+  const head = make('thead');
+  head.append(buildHeaders(ui));
+  table.append(head, buildBody(result, ui, locale));
+  section.append(heading, table);
+  return section;
+};
+
+export const renderDisproportionalityResult = (element: HTMLElement, result: DisproportionalityResult, ui: VoteSeatUI, locale: string): void => {
+  const wrapper = make('div', 'result-stack');
+  const metrics = make('div', 'metrics-grid');
+  addMetric(metrics, ui.gallagherLabel, formatNumber(result.gallagherIndex, locale, 2), 'gallagher');
+  addMetric(metrics, ui.loosemoreHanbyLabel, formatNumber(result.loosemoreHanbyIndex, locale, 2), 'loosemore');
+  addMetric(metrics, ui.sainteLagueLabel, formatNumber(result.sainteLagueIndex, locale, 3), 'sainte');
+  addMetric(metrics, ui.maxGapLabel, `${formatNumber(result.maxAbsoluteDifferencePercent, locale, 2)} pp`, 'gap');
+  const totals = make('p', 'totals-line');
+  totals.append(text(`${ui.totalVotesLabel}: ${formatNumber(result.totalVotes, locale)}  ·  ${ui.totalSeatsLabel}: ${formatNumber(result.totalSeats, locale)}`));
+  const guide = make('p', 'result-guide');
+  guide.append(text(ui.resultGuide));
+  const scene = buildScene(result, ui, locale);
+  const note = make('p', 'model-note');
+  note.append(text(ui.proportionNote));
+  const zeroVote = result.sainteLagueRows < result.parties.length ? make('p', 'model-note model-note-caution') : null;
+  zeroVote?.append(text(ui.zeroVoteNote));
+  wrapper.append(metrics, totals, guide, scene, note);
+  if (zeroVote) wrapper.append(zeroVote);
+  wrapper.append(buildDetail(result, ui, locale));
+  element.replaceChildren(wrapper);
+};

package/src/tool/vote-seat-disproportionality-analyzer/entry.ts

@@ -0,0 +1,29 @@
+import type { CivicToolEntry, ToolLocaleContent } from '../../types';
+import type { VoteSeatUI } from './ui';
+
+export type { VoteSeatUI } from './ui';
+
+export type VoteSeatLocaleContent = ToolLocaleContent<VoteSeatUI>;
+
+export const voteSeatDisproportionalityAnalyzer: CivicToolEntry<VoteSeatUI> = {
+  id: 'vote-seat-disproportionality-analyzer',
+  phase: 'localized',
+  icons: { bg: 'mdi:chart-box-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/vote-seat-disproportionality-analyzer/evaluator.ts

@@ -0,0 +1,15 @@
+import type { DisproportionalityResult } from './logic';
+import type { VoteSeatUI } from './ui';
+
+export interface DisproportionalityStatus {
+  tone: 'positive' | 'caution' | 'neutral';
+  text: string;
+}
+
+export const evaluateDisproportionality = (result: DisproportionalityResult, ui: VoteSeatUI): DisproportionalityStatus => {
+  if (result.gallagherIndex === 0) return { tone: 'positive', text: ui.exactParity };
+  return {
+    tone: result.maxAbsoluteDifferencePercent >= 10 ? 'caution' : 'neutral',
+    text: `${ui.maxGapLabel}: ${result.maxAbsoluteDifferencePercent.toFixed(2)} percentage points (${result.largestGapParty}).`,
+  };
+};

package/src/tool/vote-seat-disproportionality-analyzer/i18n/de.ts

@@ -0,0 +1,44 @@
+import type { FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import { bibliography } from '../bibliography';
+import type { VoteSeatLocaleContent } from '../entry';
+
+const ui = {
+  rowsLabel: 'Stimmen und Sitze je Partei oder Liste', rowsHelp: 'Gib für dieselben Parteien die erhaltenen Stimmen und gewonnenen Sitze ein. Jede Spalte wird getrennt normiert.', partyNameLabel: 'Partei oder Liste', votesLabel: 'Stimmen', seatsLabel: 'Sitze', addRow: 'Partei oder Liste hinzufügen', removeRow: 'Partei oder Liste entfernen', calculate: 'Abstand messen', reset: 'Beispiel laden', resultLabel: 'Proportionalitätspresse', emptyState: 'Stimmen und Sitze eingeben und den Abstand messen.', modelNotice: 'Das Modell vergleicht Stimmenanteil und Sitzanteil. Es bewertet weder Fairness noch Ideologie, Rechtmäßigkeit oder Wahlqualität.', totalVotesLabel: 'Stimmen insgesamt', totalSeatsLabel: 'Sitze insgesamt', gallagherLabel: 'Gallagher-Index', loosemoreHanbyLabel: 'Loosemore-Hanby', sainteLagueLabel: 'Sainte-Laguë-Index', maxGapLabel: 'Größter Anteilsabstand', voteShareLabel: 'Stimmenanteil', seatShareLabel: 'Sitzanteil', differenceLabel: 'Sitzanteil minus Stimmenanteil', ratioLabel: 'Stimmen-Sitz-Verhältnis', directionLabel: 'Lesart', overrepresented: 'Mehr Sitze als Stimmenanteil', underrepresented: 'Weniger Sitze als Stimmenanteil', aligned: 'Anteile stimmen überein', detailLabel: 'Parteidetails', zeroVoteNote: 'Der Sainte-Laguë-Index verwendet nur Zeilen mit mindestens einer Stimme im Nenner. Zeilen ohne Stimmen bleiben in den anderen Maßen sichtbar.', proportionNote: 'Niedrigere Indexwerte bedeuten, dass beide Verteilungen näher beieinanderliegen. Die Werte sind beschreibend und keine Rechtsgrenze.', errorPrefix: 'Eingabe prüfen', exactParity: 'Exakte Parität: Jeder Stimmenanteil entspricht seinem Sitzanteil.', resultGuide: 'Lies die Bänder zeilenweise: Der Abstand zwischen Stimmen- und Sitzmarke ist die Lücke der Partei.',
+};
+
+const softwareApplication: SoftwareApplication = { '@type': 'SoftwareApplication', name: 'Analyse der Abweichung von Stimmen und Sitzen', applicationCategory: 'EducationalApplication', operatingSystem: 'Any', description: 'Misst die Abweichung zwischen Stimmenanteilen und Sitzanteilen mit etablierten Indizes.', url: 'https://gamebob.dev/de/analyse-stimmen-sitze-wahlproportionalitaet', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' } };
+const faqPage: FAQPage = { '@type': 'FAQPage', mainEntity: [
+  { '@type': 'Question', name: 'Was misst die Analyse?', acceptedAnswer: { '@type': 'Answer', text: 'Sie vergleicht für jede Partei Stimmen- und Sitzanteil und fasst den Abstand mit Gallagher, Loosemore-Hanby und Sainte-Laguë zusammen. Sie entscheidet nicht über Fairness oder Rechtmäßigkeit.' } },
+  { '@type': 'Question', name: 'Warum können Stimmen und Sitze unterschiedliche Summen haben?', acceptedAnswer: { '@type': 'Answer', text: 'Sie sind unterschiedliche Einheiten. Stimmen werden durch die Gesamtstimmen und Sitze durch die Gesamtsitze normiert.' } },
+  { '@type': 'Question', name: 'Wie lese ich das Stimmen-Sitz-Verhältnis?', acceptedAnswer: { '@type': 'Answer', text: 'Es ist Stimmenanteil geteilt durch Sitzanteil. 1 bedeutet Parität, ein Wert über 1 weniger Sitzanteil und eine Partei ohne Sitze bei vorhandenen Stimmen hat unendliche Quote.' } },
+  { '@type': 'Question', name: 'Beweist das Ergebnis ein unfaires Wahlsystem?', acceptedAnswer: { '@type': 'Answer', text: 'Nein. Die Indizes beschreiben nur den Abstand zweier Verteilungen. Wahlkreisgröße, Sperrklauseln, Wahlbeteiligung und Nenner müssen zusätzlich geprüft werden.' } },
+] };
+const howTo: HowTo = { '@type': 'HowTo', name: 'Abweichung zwischen Stimmen und Sitzen messen', step: [
+  { '@type': 'HowToStep', name: 'Parteien eingeben', text: 'Füge für jede Partei oder Liste eine Zeile hinzu.' }, { '@type': 'HowToStep', name: 'Stimmen und Sitze eingeben', text: 'Verwende denselben Wahlumfang und trage die beobachteten Summen ein.' }, { '@type': 'HowToStep', name: 'Abstand messen', text: 'Starte die Analyse, um beide Spalten zu normieren und drei Indizes zu berechnen.' }, { '@type': 'HowToStep', name: 'Bänder prüfen', text: 'Vergleiche Anteile, Differenz und Stimmen-Sitz-Verhältnis jeder Zeile.' }, { '@type': 'HowToStep', name: 'Kontext prüfen', text: 'Lies die Formeln und kontrolliere die Regeln der betreffenden Wahl.' },
+] };
+
+export const content: ToolLocaleContent<VoteSeatLocaleContent['ui']> = {
+  slug: 'analyse-stimmen-sitze-wahlproportionalitaet', title: 'Analyse der Abweichung von Stimmen und Sitzen', description: 'Vergleiche Stimmenanteile und Sitzanteile mit Gallagher-, Loosemore-Hanby- und Sainte-Laguë-Indizes aus transparenten Wahldaten.', ui,
+  seo: [
+    { type: 'title', text: 'Den Abstand zwischen Stimmen und Sitzen messen', level: 2 },
+    { type: 'paragraph', html: 'Eine Wahl kann einer Partei einen deutlich anderen Sitzanteil als Stimmenanteil geben. Diese Analyse macht beide beobachteten Verteilungen vergleichbar und zeigt, welche Parteien relativ zu ihrem Stimmenanteil mehr oder weniger Sitze erhalten. Stimmen und Sitze werden dabei als getrennte Einheiten normiert.' },
+    { type: 'paragraph', html: 'Das Ergebnis ist kein Urteil. Ein positiver Abstand bedeutet einen höheren Sitzanteil, ein negativer Abstand einen niedrigeren Sitzanteil. Die Bänder machen diese Richtung sichtbar, bevor die Gesamtindizes betrachtet werden.' },
+    { type: 'title', text: 'Was die drei Indizes sichtbar machen', level: 2 },
+    { type: 'paragraph', html: 'Der Gallagher-Index zieht die Quadratwurzel aus der halben Summe der quadrierten Abstände in Prozentpunkten. Große Abweichungen zählen dadurch stärker. Der Loosemore-Hanby-Index summiert die absoluten Abstände und halbiert sie.' },
+    { type: 'paragraph', html: 'Der Sainte-Laguë-Index verwendet Anteile und teilt das quadrierte Abstandssignal durch den Stimmenanteil jeder Zeile mit Stimmen. Eine Zeile ohne Stimmen kann keinen solchen Nenner liefern und wird deshalb nur bei den beiden anderen Maßen berücksichtigt.' },
+    { type: 'table', headers: ['Maß', 'Berechnung', 'Nützliche Frage'], rows: [['Gallagher', 'Wurzel aus der halben Summe quadrierter Prozentpunktabstände.', 'Welche großen Lücken prägen den Abstand?'], ['Loosemore-Hanby', 'Halbe Summe der absoluten Prozentpunktabstände.', 'Wie viel der Verteilung weicht insgesamt ab?'], ['Sainte-Laguë', 'Quadrierter Anteilsabstand geteilt durch den Stimmenanteil.', 'Wie gewichtet der Nenner kleine Parteien?']] },
+    { type: 'title', text: 'Vergleichbare Wahldaten vorbereiten', level: 2 },
+    { type: 'paragraph', html: 'Nutze denselben Wahlumfang und mische keine nationalen Stimmen mit regionalen Sitzen. Die Summen müssen nicht gleich sein, weil es verschiedene Einheiten sind. Jede Zeile muss aber dieselbe Partei und dasselbe Ergebnis beschreiben.' },
+    { type: 'list', items: ['Parteien in beiden Spalten eindeutig benennen.', 'Parteien mit Stimmen, aber ohne Sitze aufnehmen.', 'Nullwerte nur eintragen, wenn sie im Datensatz sinnvoll dokumentiert sind.', 'Prüfen, welche gültigen, ungültigen oder ausgeschlossenen Stimmen in den Nenner gehören.', 'Die Indizes zusammen mit der Quelle der Wahldaten aufbewahren.'] },
+    { type: 'tip', title: 'Eine Quote erklärt noch keine Ursache', html: 'Ein Verhältnis über 1 zeigt weniger Sitzanteil als Stimmenanteil. Wahlkreisgröße, Sperrklausel, geografische Konzentration, Wahlbeteiligung und Wahlformel können die Ursache sein.' },
+    { type: 'title', text: 'Grenzen vor dem Vergleich kennen', level: 2 },
+    { type: 'paragraph', html: 'Niedrigere Werte bedeuten eine geringere Distanz der eingegebenen Verteilungen, nicht automatisch ein besseres Wahlsystem. Vergleiche nur Daten mit gleicher Definition von Stimmen, Sitzen, Parteien, Gebiet und Nenner.' },
+    { type: 'paragraph', html: 'Die Analyse schließt keine Ideologie, Absicht, Absprache, Rechtmäßigkeit oder demokratische Legitimität. Sie korrigiert kein amtliches Ergebnis und rekonstruiert keine länderspezifische Auszählung.' },
+    { type: 'tip', title: 'Mit dem größten Band beginnen', html: 'Prüfe zuerst die Partei mit der größten Lücke. Vergleiche ihre Rohwerte und kontrolliere danach, ob alle anderen Zeilen gleich behandelt wurden.' },
+  ],
+  faq: [{ question: 'Was misst die Analyse?', answer: 'Sie vergleicht Stimmen- und Sitzanteile und fasst den Abstand mit Gallagher, Loosemore-Hanby und Sainte-Laguë zusammen.' }, { question: 'Warum können die Summen unterschiedlich sein?', answer: 'Stimmen und Sitze sind verschiedene Einheiten und werden jeweils mit ihrer eigenen Summe normiert.' }, { question: 'Wie lese ich das Verhältnis?', answer: 'Stimmenanteil geteilt durch Sitzanteil: 1 bedeutet Parität, über 1 weniger Sitzanteil.' }, { question: 'Beweist das Ergebnis Unfairness?', answer: 'Nein. Es beschreibt nur einen Abstand und braucht den Kontext der Wahlregeln.' }],
+  bibliography, howTo: [{ name: 'Parteien eingeben', text: 'Füge für jede Partei oder Liste eine Zeile hinzu.' }, { name: 'Werte eingeben', text: 'Trage Stimmen und Sitze desselben Wahlumfangs ein.' }, { name: 'Abstand messen', text: 'Starte die Analyse und berechne die Indizes.' }, { name: 'Bänder prüfen', text: 'Vergleiche die Anteile und ihre Differenz.' }, { name: 'Kontext prüfen', text: 'Kontrolliere die geltenden Wahlregeln.' }], schemas: [softwareApplication, faqPage, howTo] as unknown as Record<string, unknown>[],
+};
+
+export const germanContent: VoteSeatLocaleContent = content;