@jjlmoya/utils-civic 1.2.0 → 1.3.0

package/package.json

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

package/src/category/index.ts

@@ -1,10 +1,11 @@
+import { coalitionMajorityCalculator } from '../tool/coalition-majority-calculator/entry';
 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, voteSeatDisproportionalityAnalyzer],
+  tools: [coalitionMajorityCalculator, electionSeatApportionmentCalculator, voteSeatDisproportionalityAnalyzer],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

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

package/src/tests/locale_completeness.test.ts

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

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

package/src/tool/coalition-majority-calculator/bibliography.astro

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

package/src/tool/coalition-majority-calculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Deutscher Bundestag, Koalition',
+    url: 'https://www.bundestag.de/services/glossar/glossar/K/koalition-245478',
+  },
+  {
+    name: 'Madeleine O. Hosli, The New Voting Weights in the Council of the European Union',
+    url: 'https://ciaotest.cc.columbia.edu/isa/hom01/',
+  },
+];

package/src/tool/coalition-majority-calculator/coalition-majority-calculator.css

@@ -0,0 +1,467 @@
+:root {
+  --n-paper: #f5f1e8;
+  --n-card: #fffdf8;
+  --n-ink: #17202a;
+  --n-muted: #5e6872;
+  --n-line: #d8d2c8;
+  --n-accent: #a44a2f;
+  --n-accent-soft: #f0d7c8;
+  --n-orbit: #d1a23a;
+  --n-good: #2f7759;
+  --n-warn: #a44a2f;
+}
+
+.theme-dark {
+  --n-paper: #161817;
+  --n-card: #202321;
+  --n-ink: #f1eee6;
+  --n-muted: #b5b9b2;
+  --n-line: #454945;
+  --n-accent: #ef8b63;
+  --n-accent-soft: #4b3028;
+  --n-orbit: #e0bd57;
+  --n-good: #79bd96;
+  --n-warn: #ef8b63;
+}
+
+.coalition-tool {
+  --n-surface: var(--n-card);
+  --n-field: var(--n-paper);
+
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  color: var(--n-ink);
+  margin: 0 auto;
+  max-width: 1120px;
+  overflow: hidden;
+}
+
+.coalition-workspace {
+  display: grid;
+  grid-template-columns: minmax(300px, .8fr) minmax(400px, 1.2fr);
+}
+
+.coalition-controls,
+.coalition-result {
+  min-width: 0;
+  padding: 1.4rem;
+}
+
+.coalition-controls {
+  border-right: 1px solid var(--n-line);
+}
+
+.coalition-result {
+  background: var(--n-surface);
+}
+
+.section-kicker {
+  color: var(--n-accent);
+  font-size: .75rem;
+  font-weight: 800;
+  letter-spacing: .11em;
+  text-transform: uppercase;
+}
+
+.party-list {
+  display: grid;
+  gap: .7rem;
+  margin: 1rem 0;
+}
+
+.party-row {
+  align-items: end;
+  display: grid;
+  gap: .55rem;
+  grid-template-columns: minmax(0, 1fr) 6rem 2rem;
+}
+
+label {
+  color: var(--n-muted);
+  display: grid;
+  font-size: .76rem;
+  font-weight: 700;
+  gap: .3rem;
+}
+
+input {
+  background: var(--n-field);
+  border: 1px solid var(--n-line);
+  border-radius: .35rem;
+  box-sizing: border-box;
+  color: var(--n-ink);
+  font: inherit;
+  min-height: 2.55rem;
+  padding: .5rem .6rem;
+  width: 100%;
+}
+
+input:focus-visible,
+button:focus-visible {
+  outline: 3px solid var(--n-orbit);
+  outline-offset: 2px;
+}
+
+.icon-button,
+.secondary-button,
+.text-button {
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+.icon-button {
+  background: transparent;
+  color: var(--n-muted);
+  font-size: 1.1rem;
+  min-height: 2.55rem;
+}
+
+.control-actions {
+  align-items: center;
+  display: flex;
+  gap: .8rem;
+  margin: .8rem 0 1.4rem;
+}
+
+.secondary-button {
+  background: var(--n-accent-soft);
+  border-radius: 999px;
+  color: var(--n-ink);
+  padding: .65rem .9rem;
+}
+
+.text-button {
+  background: transparent;
+  color: var(--n-accent);
+  padding: .5rem 0;
+  text-decoration: underline;
+}
+
+.threshold-control {
+  border-top: 1px solid var(--n-line);
+  padding-top: 1rem;
+}
+
+.threshold-help,
+.threshold-control small,
+.control-note,
+.limit-note,
+.method-note,
+.scene-empty {
+  color: var(--n-muted);
+}
+
+.control-note,
+.limit-note {
+  font-size: .88rem;
+  line-height: 1.5;
+}
+
+.limit-note {
+  border-left: 3px solid var(--n-orbit);
+  padding-left: .7rem;
+}
+
+.result-heading {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.result-heading p {
+  color: var(--n-good);
+  font-size: .86rem;
+  margin: 0;
+  text-align: right;
+}
+
+.result-heading p[data-tone="warn"] {
+  color: var(--n-warn);
+}
+
+.scene-wrap {
+  align-items: center;
+  border-bottom: 1px solid var(--n-line);
+  display: flex;
+  justify-content: center;
+  min-height: 300px;
+}
+
+.scene-empty {
+  font-size: .9rem;
+  line-height: 1.5;
+  max-width: 20rem;
+  text-align: center;
+}
+
+.coalition-orbit {
+  fill: none;
+  stroke: var(--n-orbit);
+  stroke-dasharray: 3 7;
+  stroke-width: 2;
+}
+
+.coalition-core {
+  fill: var(--n-accent-soft);
+  stroke: var(--n-accent);
+  stroke-width: 2;
+}
+
+.coalition-link {
+  stroke: var(--n-line);
+  stroke-width: 1.2;
+}
+
+.coalition-node circle {
+  fill: var(--n-field);
+  stroke: var(--n-muted);
+  stroke-width: 1.5;
+}
+
+.coalition-winning-link {
+  opacity: .42;
+  stroke: var(--n-accent);
+  stroke-width: 2.4;
+}
+
+.coalition-node.is-pivotal circle {
+  fill: var(--n-accent-soft);
+  stroke: var(--n-accent);
+  stroke-width: 3;
+}
+
+.coalition-core-label,
+.coalition-node-name,
+.coalition-node-seats,
+.coalition-core-caption {
+  fill: var(--n-ink);
+}
+
+.coalition-core-label {
+  font-size: 1.25rem;
+  font-weight: 800;
+}
+
+.coalition-core-caption,
+.coalition-node-seats {
+  fill: var(--n-muted);
+  font-size: .62rem;
+}
+
+.coalition-node-name {
+  font-size: .68rem;
+  font-weight: 800;
+  text-anchor: middle;
+}
+
+.coalition-node-seats {
+  text-anchor: middle;
+}
+
+.coalition-stats {
+  display: grid;
+  gap: .7rem;
+  grid-template-columns: repeat(2, 1fr);
+  margin: 1.2rem 0;
+}
+
+.coalition-stat {
+  border-left: 2px solid var(--n-orbit);
+  padding-left: .65rem;
+}
+
+.coalition-stat dt {
+  color: var(--n-muted);
+  font-size: .72rem;
+}
+
+.coalition-stat dd {
+  font-size: 1.1rem;
+  font-weight: 800;
+  margin: .15rem 0 0;
+}
+
+.pivots,
+.coalition-table-wrap {
+  border-top: 1px solid var(--n-line);
+  padding-top: 1rem;
+}
+
+.pivots h3,
+.coalition-table-wrap h3 {
+  font-size: .9rem;
+  margin: 0;
+}
+
+.table-heading {
+  align-items: end;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  margin-bottom: .65rem;
+}
+
+.table-filter {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-size: .7rem;
+  gap: .4rem;
+}
+
+.table-filter select {
+  background: var(--n-field);
+  border: 1px solid var(--n-line);
+  border-radius: .35rem;
+  color: var(--n-ink);
+  font: inherit;
+  min-height: 2rem;
+  padding: .25rem .4rem;
+}
+
+.pivots ul {
+  display: grid;
+  gap: .45rem;
+  grid-template-columns: repeat(2, 1fr);
+  list-style: none;
+  margin: 0 0 1.2rem;
+  padding: 0;
+}
+
+.pivots li {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: .2rem .5rem;
+}
+
+.pivots small {
+  color: var(--n-muted);
+  font-size: .7rem;
+  grid-column: 1 / -1;
+}
+
+.table-scroll {
+  overflow-x: auto;
+}
+
+table {
+  border-collapse: collapse;
+  font-size: .78rem;
+  width: 100%;
+}
+
+th,
+td {
+  border-bottom: 1px solid var(--n-line);
+  padding: .55rem .4rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+thead th {
+  color: var(--n-muted);
+  font-size: .7rem;
+  position: sticky;
+  text-transform: uppercase;
+  top: 0;
+}
+
+.row-badge {
+  color: var(--n-muted);
+  display: block;
+  font-size: .65rem;
+  font-weight: 800;
+  margin-bottom: .15rem;
+  text-transform: uppercase;
+}
+
+.row-badge.is-minimal {
+  color: var(--n-accent);
+}
+
+.method-note {
+  border-top: 1px solid var(--n-line);
+  display: grid;
+  font-size: .8rem;
+  gap: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+  line-height: 1.45;
+  padding: 1rem 1.4rem;
+}
+
+.method-note section {
+  display: grid;
+  gap: .35rem;
+}
+
+.method-note strong {
+  color: var(--n-ink);
+}
+
+.coalition-seo,
+.coalition-bibliography {
+  color: var(--n-ink);
+  margin: 2rem auto;
+  max-width: 840px;
+}
+
+.coalition-seo h2,
+.coalition-bibliography h2 {
+  margin-top: 2rem;
+}
+
+.coalition-seo p,
+.coalition-seo li,
+.coalition-bibliography li {
+  line-height: 1.65;
+}
+
+.coalition-seo aside {
+  border-left: 3px solid var(--n-orbit);
+  margin: 1.2rem 0;
+  padding: .2rem 1rem;
+}
+
+.coalition-seo table {
+  margin: 1rem 0;
+}
+
+.coalition-bibliography a {
+  color: var(--n-accent);
+}
+
+@media (max-width: 760px) {
+  .coalition-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .coalition-controls {
+    border-bottom: 1px solid var(--n-line);
+    border-right: 0;
+  }
+
+  .coalition-result {
+    padding-top: 1.1rem;
+  }
+}
+
+@media (max-width: 460px) {
+  .coalition-controls,
+  .coalition-result,
+  .method-note {
+    padding-left: .9rem;
+    padding-right: .9rem;
+  }
+
+  .party-row {
+    grid-template-columns: minmax(0, 1fr) 5rem 1.7rem;
+  }
+
+  .pivots ul {
+    grid-template-columns: 1fr;
+  }
+
+  .method-note { grid-template-columns: 1fr; }
+}

package/src/tool/coalition-majority-calculator/component.astro

@@ -0,0 +1,62 @@
+---
+import './coalition-majority-calculator.css';
+import type { CoalitionMajorityUI } from './ui';
+
+interface Props {
+  ui: CoalitionMajorityUI;
+}
+
+const { ui } = Astro.props;
+const initialParties = [
+  { name: 'Cedar', seats: 38 },
+  { name: 'River', seats: 27 },
+  { name: 'North Star', seats: 19 },
+  { name: 'Harbor', seats: 11 },
+];
+const initialThreshold = 49;
+const config = JSON.stringify({ ui }).replace(/</g, '\\u003c');
+---
+
+<div class="coalition-tool" data-coalition-tool>
+  <div class="coalition-workspace">
+    <section class="coalition-controls" aria-labelledby="coalition-controls-title">
+      <div class="section-kicker" id="coalition-controls-title">{ui.partyTable}</div>
+      <div class="party-list" data-parties>
+        {initialParties.map((party, index) => <div class="party-row" data-party-row>
+          <label><span>{ui.partyName} {index + 1}</span><input data-party-name type="text" value={party.name} /></label>
+          <label><span>{ui.partySeats}</span><input data-party-seats type="number" min="0" step="1" value={party.seats} /></label>
+          <button type="button" class="icon-button" data-remove-party aria-label={`${ui.removeParty} ${index + 1}`}>x</button>
+        </div>)}
+      </div>
+      <div class="control-actions">
+        <button type="button" class="secondary-button" data-add-party>{ui.addParty}</button>
+        <button type="button" class="text-button" data-reset>{ui.reset}</button>
+      </div>
+      <label class="threshold-control"><span>{ui.majorityThreshold}</span><input data-threshold type="number" min="1" step="1" value={initialThreshold} aria-describedby="threshold-hint" /></label>
+      <small class="threshold-help" id="threshold-hint">{ui.thresholdHint}</small>
+      <p class="control-note">{ui.explanation}</p>
+      <p class="limit-note">{ui.maximumParties}</p>
+    </section>
+
+    <section class="coalition-result" aria-labelledby="coalition-result-title">
+      <div class="result-heading"><div class="section-kicker" id="coalition-result-title">{ui.resultTitle}</div><p data-coalition-status aria-label={ui.winningCoalitions} role="status"></p></div>
+      <div class="scene-wrap" data-coalition-scene aria-label={ui.coalitionSceneLabel}><div class="scene-empty">{ui.emptyState}</div></div>
+      <dl class="coalition-stats" data-coalition-stats></dl>
+      <section class="pivots" aria-labelledby="pivots-title"><h3 id="pivots-title">{ui.pivotalParty}</h3><ul data-coalition-pivots></ul></section>
+      <section class="coalition-table-wrap" aria-labelledby="coalition-table-title"><div class="table-heading"><h3 id="coalition-table-title">{ui.partyTable}</h3><label class="table-filter"><span>{ui.filterCoalitions}</span><select data-coalition-filter><option value="all">{ui.allCoalitions}</option><option value="minimal">{ui.minimalCoalition}</option><option value="surplus">{ui.surplusCoalition}</option></select></label></div><div class="table-scroll"><table><thead><tr><th scope="col">{ui.partyTable}</th><th scope="col">{ui.seats}</th><th scope="col">{ui.surplus}</th><th scope="col">{ui.redundantMembers}</th></tr></thead><tbody data-coalition-rows></tbody></table></div></section>
+    </section>
+  </div>
+  <div class="method-note">
+    <section><strong>{ui.methodTitle}</strong><span>{ui.methodText}</span></section>
+    <section><strong>{ui.notDoTitle}</strong><span>{ui.notDoText}</span></section>
+    <section><strong>{ui.edgeCasesTitle}</strong><span>{ui.edgeCasesText}</span></section>
+  </div>
+</div>
+
+<script is:inline type="application/json" data-coalition-config set:html={config}></script>
+<script>
+  import { mountCoalitionTool } from './controller';
+  const root = document.querySelector<HTMLElement>('[data-coalition-tool]');
+  const configNode = document.querySelector<HTMLScriptElement>('[data-coalition-config]');
+  if (root && configNode?.textContent) mountCoalitionTool(root, JSON.parse(configNode.textContent));
+</script>

package/src/tool/coalition-majority-calculator/contract.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { coalitionMajorityCalculator } from './entry';
+import { COALITION_MAJORITY_CALCULATOR_TOOL } from './index';
+
+describe('coalition majority runtime contract', () => {
+  it('exposes the English loader and all page component loaders', async () => {
+    const content = await coalitionMajorityCalculator.i18n.en?.();
+    expect(content?.slug).toBe('coalition-majority-calculator');
+    expect(content?.ui).toBeDefined();
+    expect(typeof COALITION_MAJORITY_CALCULATOR_TOOL.Component).toBe('function');
+    expect(typeof COALITION_MAJORITY_CALCULATOR_TOOL.SEOComponent).toBe('function');
+    expect(typeof COALITION_MAJORITY_CALCULATOR_TOOL.BibliographyComponent).toBe('function');
+  });
+});