@jjlmoya/utils-civic 1.1.0

package/src/tool/election-seat-apportionment-calculator/dom-views.ts

@@ -0,0 +1,75 @@
+import type { ElectionSeatUI } from './ui';
+import type { ApportionmentResult, DistrictAllocation, PartyAllocation, SeatEvent } from './logic';
+
+const escapeHtml = (value: string): string => value
+  .replaceAll('&', '&')
+  .replaceAll('<', '&lt;')
+  .replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;')
+  .replaceAll("'", '&#039;');
+
+const number = (value: number, maximumFractionDigits = 0): string => value.toLocaleString('en-US', { maximumFractionDigits });
+const percent = (value: number): string => `${number(value, 2)}%`;
+
+const partyColor = (index: number): string => `party-${(index % 8) + 1}`;
+
+const renderLegend = (parties: PartyAllocation[]): string => parties.map((party, index) => `
+  <span class="chamber-legend-item"><i class="legend-swatch ${partyColor(index)}"></i><span>${escapeHtml(party.name)}</span><strong>${party.seats}</strong></span>
+`).join('');
+
+const renderChamber = (parties: PartyAllocation[], label: string): string => {
+  const seats = parties.flatMap((party, partyIndex) => Array.from({ length: party.seats }, (_, index) => ({ party, partyIndex, index })));
+  const columns = Math.max(1, Math.ceil(Math.sqrt(seats.length)));
+  const circles = seats.map((seat, index) => {
+    const x = 22 + (index % columns) * 22;
+    const y = 22 + Math.floor(index / columns) * 22;
+    return `<circle class="seat-dot ${partyColor(seat.partyIndex)}" cx="${x}" cy="${y}" r="7" aria-label="${escapeHtml(seat.party.name)} seat ${seat.index + 1}" />`;
+  }).join('');
+  const height = Math.max(70, Math.ceil(seats.length / columns) * 22 + 26);
+  return `<div class="chamber-wrap"><svg class="seat-chamber" viewBox="0 0 ${columns * 22 + 22} ${height}" role="img" aria-label="${escapeHtml(label)}">${circles}</svg><div class="chamber-legend">${renderLegend(parties)}</div></div>`;
+};
+
+const renderPartyRows = (parties: PartyAllocation[], ui: ElectionSeatUI): string => parties.map((party, index) => `
+  <tr class="${party.excluded ? 'is-excluded' : ''}">
+    <th scope="row"><span class="table-party"><i class="legend-swatch ${partyColor(index)}"></i>${escapeHtml(party.name)}</span></th>
+    <td>${number(party.votes)}</td>
+    <td>${percent(party.sharePercent)}</td>
+    <td class="seat-value">${party.seats} <small>${escapeHtml(ui.seatUnit)}</small></td>
+    <td>${percent(party.seatSharePercent)}</td>
+    <td>${party.excluded ? `<span class="status-pill">${escapeHtml(ui.excludedLabel)}</span>` : ''}</td>
+  </tr>
+`).join('');
+
+const renderEventRows = (events: SeatEvent[], ui: ElectionSeatUI): string => events.slice(0, 18).map((event, index) => `
+  <tr><td>${index + 1}</td><th scope="row">${escapeHtml(event.partyName)}</th><td>${number(event.quotient, 2)}</td><td>${event.remainder === undefined ? '-' : number(event.remainder, 2)}</td></tr>
+`).join('') || `<tr><td colspan="4">${escapeHtml(ui.emptyState)}</td></tr>`;
+
+const renderDistricts = (districts: DistrictAllocation[], ui: ElectionSeatUI): string => districts.length === 0 ? '' : `
+  <section class="district-results" aria-labelledby="district-results-title">
+    <div class="result-section-heading"><span class="eyebrow">${escapeHtml(ui.districtsLabel)}</span><h3 id="district-results-title">Local seat pattern</h3></div>
+    <p class="result-note">${escapeHtml(ui.districtAssumption)}</p>
+    <div class="district-grid">${districts.map((district) => `<article class="district-card"><div class="district-card-heading"><strong>${escapeHtml(district.label)}</strong><span>${district.seats} ${escapeHtml(ui.seatUnit)}</span></div>${renderChamber(district.parties, `${district.label} seat chamber`)}</article>`).join('')}</div>
+  </section>
+`;
+
+const renderSensitivityChange = (change: { thresholdPercent: number; seatsByParty: Record<string, number>; changedParties: string[] }, ui: ElectionSeatUI): string => {
+  const detail = change.changedParties.length > 0
+    ? `${escapeHtml(ui.changedLabel)}: ${change.changedParties.map((party) => `${escapeHtml(party)} ${change.seatsByParty[party] ?? 0}`).join(', ')}`
+    : escapeHtml(ui.noChangesLabel);
+  return `<div class="sensitivity-card"><span>${percent(change.thresholdPercent)}</span><p>${detail}</p></div>`;
+};
+
+const methodLabel = (method: ApportionmentResult['method'], ui: ElectionSeatUI): string => {
+  if (method === 'dhondt') return ui.dhondtLabel;
+  if (method === 'sainte-lague') return ui.sainteLagueLabel;
+  return ui.hareLabel;
+};
+
+export const renderResults = (result: ApportionmentResult, ui: ElectionSeatUI): string => `
+  <div class="result-topline"><div><span class="eyebrow">${escapeHtml(ui.allocatedSeatsLabel)}</span><strong>${result.totalSeats}</strong><span>${escapeHtml(ui.seatUnit)}</span></div><div><span class="eyebrow">${escapeHtml(ui.effectiveThresholdLabel)}</span><strong>${percent(result.effectiveThresholdPercent)}</strong></div></div>
+  <section class="chamber-section" aria-labelledby="chamber-title"><div class="result-section-heading"><span class="eyebrow">${escapeHtml(ui.chamberLabel)}</span><h3 id="chamber-title">${escapeHtml(methodLabel(result.method, ui))}</h3></div>${renderChamber(result.partyAllocations.filter((party) => !party.excluded), ui.chamberLabel)}</section>
+  <section class="allocation-section" aria-labelledby="allocation-title"><div class="result-section-heading"><span class="eyebrow">${escapeHtml(ui.partiesLabel)}</span><h3 id="allocation-title">${escapeHtml(ui.allocationTitle)}</h3></div><div class="table-scroll"><table><thead><tr><th scope="col">${escapeHtml(ui.partyNameLabel)}</th><th scope="col">${escapeHtml(ui.votesLabel)}</th><th scope="col">${escapeHtml(ui.voteShareLabel)}</th><th scope="col">${escapeHtml(ui.allocatedSeatsLabel)}</th><th scope="col">${escapeHtml(ui.seatShareLabel)}</th><th scope="col"></th></tr></thead><tbody>${renderPartyRows(result.partyAllocations, ui)}</tbody></table></div></section>
+  ${renderDistricts(result.districts, ui)}
+  <section class="evidence-section" aria-labelledby="evidence-title"><div class="result-section-heading"><span class="eyebrow">${escapeHtml(ui.eventLabel)}</span><h3 id="evidence-title">${escapeHtml(ui.eventsTitle)}</h3></div><div class="table-scroll"><table><thead><tr><th scope="col">#</th><th scope="col">${escapeHtml(ui.partyNameLabel)}</th><th scope="col">${escapeHtml(ui.quotientLabel)}</th><th scope="col">${escapeHtml(ui.remainderLabel)}</th></tr></thead><tbody>${renderEventRows(result.events, ui)}</tbody></table></div></section>
+  <section class="sensitivity-section" aria-labelledby="sensitivity-title"><div class="result-section-heading"><span class="eyebrow">${escapeHtml(ui.sensitivityLabel)}</span><h3 id="sensitivity-title">${escapeHtml(ui.sensitivityTitle)}</h3></div><div class="sensitivity-grid"><div><span class="sensitivity-label">${escapeHtml(ui.lowerThresholdLabel)}</span>${renderSensitivityChange(result.sensitivity.lower, ui)}</div><div><span class="sensitivity-label">${escapeHtml(ui.higherThresholdLabel)}</span>${renderSensitivityChange(result.sensitivity.higher, ui)}</div></div></section>
+`;

package/src/tool/election-seat-apportionment-calculator/election-seat-apportionment-calculator.css

@@ -0,0 +1,585 @@
+:root {
+  --n-paper: #f5f0e6;
+  --n-card: #fffdf7;
+  --n-ink: #1f2730;
+  --n-muted: #68747d;
+  --n-line: #d9d4c9;
+  --n-blue: #1f5f83;
+  --n-blue-soft: #dbeaf0;
+  --n-red: #b24b3b;
+  --n-gold: #c28b38;
+  --n-green: #66856a;
+  --n-purple: #6e668d;
+  --n-shadow: #1f23;
+}
+
+.theme-dark {
+  --n-paper: #171b1e;
+  --n-card: #22282d;
+  --n-ink: #f4f0e7;
+  --n-muted: #b5bec1;
+  --n-line: #465057;
+  --n-blue: #7dc0dc;
+  --n-blue-soft: #294452;
+  --n-red: #e38b78;
+  --n-gold: #e0b15c;
+  --n-green: #9dc19c;
+  --n-purple: #b3a9d8;
+  --n-shadow: #0006;
+}
+
+.election-tool {
+  --n-bg: var(--n-paper);
+  --n-surface: var(--n-card);
+  --n-text: var(--n-ink);
+  --n-secondary: var(--n-muted);
+  --n-border: var(--n-line);
+  --n-accent: var(--n-blue);
+  --n-accent-soft: var(--n-blue-soft);
+  --n-error: var(--n-red);
+  --n-shadow-soft: var(--n-shadow);
+
+  background: var(--n-bg);
+  color: var(--n-text);
+  border: 1px solid var(--n-border);
+  border-radius: 1.25rem;
+  box-shadow: 0 1.5rem 3rem var(--n-shadow-soft);
+  overflow: hidden;
+}
+
+main,
+.tool-page,
+.section-tool {
+  min-width: 0;
+}
+
+.tool-layout {
+  display: grid;
+  grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.5fr);
+  min-width: 0;
+}
+
+.control-surface,
+.result-surface {
+  min-width: 0;
+  padding: clamp(1.25rem, 3vw, 2.4rem);
+}
+
+.control-surface {
+  border-right: 1px solid var(--n-border);
+}
+
+.result-surface {
+  background: var(--n-surface);
+  min-height: 42rem;
+}
+
+.method-fieldset,
+.party-editor,
+.district-control {
+  border: 0;
+  border-bottom: 1px solid var(--n-border);
+  margin: 0;
+  padding: 0 0 1.5rem;
+}
+
+.party-editor,
+.district-control {
+  margin-top: 1.5rem;
+}
+
+.method-fieldset legend,
+.control-heading h2,
+.district-control h2 {
+  color: var(--n-text);
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  margin: 0 0 0.8rem;
+}
+
+.method-option {
+  align-items: center;
+  border: 1px solid var(--n-border);
+  border-radius: 0.7rem;
+  cursor: pointer;
+  display: flex;
+  gap: 0.65rem;
+  margin-top: 0.55rem;
+  padding: 0.75rem;
+}
+
+.method-option:has(input:checked) {
+  background: var(--n-accent-soft);
+  border-color: var(--n-accent);
+}
+
+.method-option input {
+  accent-color: var(--n-accent);
+  flex: 0 0 auto;
+  height: 1.15rem;
+  min-height: 1.15rem;
+  padding: 0;
+  width: 1.15rem;
+}
+
+.method-option span,
+label span,
+.district-control p,
+.result-intro p,
+.tool-status,
+.result-note,
+.sensitivity-label {
+  color: var(--n-secondary);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.control-heading {
+  align-items: baseline;
+  display: flex;
+  gap: 0.55rem;
+}
+
+.control-heading h2 {
+  margin-bottom: 0;
+}
+
+.eyebrow {
+  color: var(--n-accent);
+  font-size: 0.63rem;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.party-list {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.party-row {
+  align-items: end;
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: 1.4rem minmax(5rem, 1fr) minmax(5rem, 0.7fr) 2rem;
+}
+
+.party-row-index {
+  color: var(--n-secondary);
+  font-size: 0.7rem;
+  padding-bottom: 0.7rem;
+}
+
+label {
+  display: grid;
+  gap: 0.35rem;
+}
+
+input {
+  background: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  color: var(--n-text);
+  font: inherit;
+  min-height: 2.45rem;
+  min-width: 0;
+  padding: 0.55rem 0.65rem;
+  width: 100%;
+}
+
+input:focus-visible,
+button:focus-visible {
+  outline: 3px solid var(--n-gold);
+  outline-offset: 2px;
+}
+
+.icon-button,
+.text-button,
+.primary-button,
+.secondary-button {
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+.icon-button {
+  background: transparent;
+  color: var(--n-secondary);
+  font-size: 1.2rem;
+  min-height: 2.45rem;
+}
+
+.text-button {
+  background: transparent;
+  color: var(--n-accent);
+  font-size: 0.78rem;
+  font-weight: 800;
+  margin-top: 0.85rem;
+  padding: 0;
+}
+
+.number-controls {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 1.5rem;
+}
+
+.district-control p {
+  margin: 0.65rem 0 0;
+}
+
+.action-row {
+  display: flex;
+  gap: 0.7rem;
+  margin-top: 1.5rem;
+}
+
+.primary-button,
+.secondary-button {
+  border-radius: 0.55rem;
+  font-size: 0.8rem;
+  font-weight: 800;
+  padding: 0.75rem 1rem;
+}
+
+.primary-button {
+  background: var(--n-accent);
+  color: var(--n-card);
+}
+
+.secondary-button {
+  background: transparent;
+  border: 1px solid var(--n-border);
+  color: var(--n-text);
+}
+
+.tool-status {
+  min-height: 1.2rem;
+  margin: 0.85rem 0 0;
+}
+
+.tool-status.is-error {
+  color: var(--n-error);
+}
+
+.tool-status.is-positive {
+  color: var(--n-green);
+}
+
+.tool-status.is-caution {
+  color: var(--n-gold);
+}
+
+.result-intro {
+  align-items: baseline;
+  border-bottom: 1px solid var(--n-border);
+  display: flex;
+  gap: 0.75rem;
+  padding-bottom: 1rem;
+}
+
+.result-intro p {
+  margin: 0;
+}
+
+.empty-result {
+  color: var(--n-secondary);
+  font-size: clamp(1.4rem, 3vw, 2.4rem);
+  line-height: 1.05;
+  max-width: 16ch;
+}
+
+.result-content {
+  padding-top: 1.5rem;
+}
+
+.result-topline {
+  align-items: end;
+  border-bottom: 1px solid var(--n-border);
+  display: flex;
+  gap: 2rem;
+  justify-content: space-between;
+  padding-bottom: 1.5rem;
+}
+
+.result-topline div {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.result-topline strong {
+  font-size: clamp(2.8rem, 8vw, 5.2rem);
+  letter-spacing: -0.08em;
+  line-height: 0.85;
+}
+
+.result-topline div:last-child strong {
+  color: var(--n-accent);
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  letter-spacing: -0.05em;
+}
+
+.result-section-heading {
+  display: flex;
+  gap: 0.7rem;
+  justify-content: space-between;
+}
+
+.result-section-heading h3 {
+  font-size: 0.9rem;
+  margin: 0;
+  text-align: right;
+}
+
+.chamber-section,
+.allocation-section,
+.district-results,
+.evidence-section,
+.sensitivity-section {
+  border-bottom: 1px solid var(--n-border);
+  padding: 1.5rem 0;
+}
+
+.chamber-wrap {
+  margin-top: 1rem;
+}
+
+.seat-chamber {
+  display: block;
+  height: auto;
+  max-height: 20rem;
+  width: 100%;
+}
+
+.seat-dot {
+  stroke: var(--n-surface);
+  stroke-width: 2;
+}
+
+.party-1,
+.legend-swatch.party-1 {
+  fill: var(--n-blue);
+  background: var(--n-blue);
+}
+.party-2,
+.legend-swatch.party-2 {
+  fill: var(--n-red);
+  background: var(--n-red);
+}
+.party-3,
+.legend-swatch.party-3 {
+  fill: var(--n-gold);
+  background: var(--n-gold);
+}
+.party-4,
+.legend-swatch.party-4 {
+  fill: var(--n-green);
+  background: var(--n-green);
+}
+.party-5,
+.legend-swatch.party-5 {
+  fill: var(--n-purple);
+  background: var(--n-purple);
+}
+.party-6,
+.legend-swatch.party-6 {
+  fill: var(--n-blue-soft);
+  background: var(--n-blue-soft);
+}
+.party-7,
+.legend-swatch.party-7 {
+  fill: var(--n-red);
+  background: var(--n-red);
+}
+.party-8,
+.legend-swatch.party-8 {
+  fill: var(--n-gold);
+  background: var(--n-gold);
+}
+
+.chamber-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.8rem;
+  margin-top: 0.7rem;
+}
+
+.chamber-legend-item {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.7rem;
+  gap: 0.35rem;
+}
+
+.legend-swatch {
+  border-radius: 50%;
+  display: inline-block;
+  height: 0.65rem;
+  width: 0.65rem;
+}
+
+.chamber-legend-item strong {
+  color: var(--n-accent);
+}
+
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  margin-top: 1rem;
+}
+
+table {
+  border-collapse: collapse;
+  font-size: 0.74rem;
+  min-width: 38rem;
+  width: 100%;
+}
+
+th,
+td {
+  border-bottom: 1px solid var(--n-border);
+  padding: 0.65rem 0.45rem;
+  text-align: right;
+}
+
+th:first-child,
+td:first-child {
+  text-align: left;
+}
+
+thead th {
+  color: var(--n-secondary);
+  font-size: 0.64rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.table-party {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4rem;
+}
+
+.seat-value {
+  color: var(--n-accent);
+  font-size: 1rem;
+  font-weight: 900;
+}
+
+.seat-value small {
+  color: var(--n-secondary);
+  font-size: 0.6rem;
+  font-weight: 500;
+}
+
+.is-excluded {
+  opacity: 0.55;
+}
+
+.status-pill {
+  color: var(--n-error);
+  font-size: 0.6rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.result-note {
+  margin: 0.8rem 0 0;
+}
+
+.district-grid,
+.sensitivity-grid {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  margin-top: 1rem;
+}
+
+.district-card,
+.sensitivity-card {
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 0.7rem;
+  padding: 0.8rem;
+}
+
+.district-card-heading {
+  display: flex;
+  font-size: 0.72rem;
+  justify-content: space-between;
+}
+
+.district-card .chamber-wrap {
+  margin-top: 0.5rem;
+}
+
+.district-card .seat-chamber {
+  max-height: 8rem;
+}
+
+.sensitivity-label {
+  display: block;
+  font-size: 0.68rem;
+  margin-bottom: 0.45rem;
+}
+
+.sensitivity-card {
+  display: flex;
+  gap: 0.6rem;
+}
+
+.sensitivity-card > span {
+  color: var(--n-accent);
+  font-size: 1rem;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.sensitivity-card p {
+  font-size: 0.72rem;
+  margin: 0;
+}
+
+@media (max-width: 1200px) {
+  .tool-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .control-surface {
+    border-bottom: 1px solid var(--n-border);
+    border-right: 0;
+  }
+
+  .result-surface {
+    min-height: 0;
+  }
+}
+
+@media (max-width: 460px) {
+  .party-row {
+    grid-template-columns: 1.2rem minmax(4.4rem, 1fr) minmax(6.2rem, 0.9fr) 1.2rem;
+  }
+
+  .number-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .result-topline {
+    align-items: start;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .result-section-heading {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .result-section-heading h3 {
+    text-align: left;
+  }
+}

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

@@ -0,0 +1,28 @@
+import type { CivicToolEntry, ToolLocaleContent } from '../../types';
+import type { ElectionSeatUI } from './ui';
+
+export type { ElectionSeatUI } from './ui';
+
+export type ElectionSeatLocaleContent = ToolLocaleContent<ElectionSeatUI>;
+
+export const electionSeatApportionmentCalculator: CivicToolEntry<ElectionSeatUI> = {
+  id: 'election-seat-apportionment-calculator',
+  icons: { bg: 'mdi:bank', fg: 'mdi:scale-balance' },
+  i18n: {
+    en: () => import('./i18n/en').then((module) => module.content),
+    de: () => import('./i18n/de').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/election-seat-apportionment-calculator/evaluator.ts

@@ -0,0 +1,20 @@
+import type { ApportionmentResult } from './logic';
+import type { ElectionSeatUI } from './ui';
+
+export interface ElectionStatus {
+  tone: 'neutral' | 'caution' | 'positive';
+  text: string;
+}
+
+export const evaluateElection = (result: ApportionmentResult, ui: ElectionSeatUI): ElectionStatus => {
+  if (result.excludedVotes > 0) {
+    return {
+      tone: 'caution',
+      text: `${ui.excludedVotesLabel}: ${result.excludedVotes.toLocaleString()} votes sit below the eligibility threshold and do not enter the allocation.`,
+    };
+  }
+  return {
+    tone: 'positive',
+    text: `${ui.eligibleVotesLabel}: Every entered vote is eligible for this model.`,
+  };
+};