@jjlmoya/utils-civic 1.1.0 → 1.2.0

package/src/tool/vote-seat-disproportionality-analyzer/vote-seat-disproportionality-analyzer.css

@@ -0,0 +1,467 @@
+:root {
+  --n-paper: #f4f0e7;
+  --n-surface: #fffdf8;
+  --n-ink: #20211d;
+  --n-muted: #6b6d62;
+  --n-line: #d9d3c6;
+  --n-accent: #b2472f;
+  --n-accent-soft: #f1d8ca;
+  --n-blue: #285c73;
+  --n-blue-soft: #d6e6e9;
+  --n-gold: #b6812b;
+  --n-success: #3c7654;
+  --n-caution: #a44d31;
+  --n-shadow: rgba(35, 31, 24, .12);
+}
+
+.theme-dark {
+  --n-paper: #171817;
+  --n-surface: #222422;
+  --n-ink: #f4f0e7;
+  --n-muted: #b3b4a9;
+  --n-line: #4a4e48;
+  --n-accent: #ef8868;
+  --n-accent-soft: #4c2c25;
+  --n-blue: #83c5d4;
+  --n-blue-soft: #203a41;
+  --n-gold: #e0b15a;
+  --n-success: #8bc096;
+  --n-caution: #f09a72;
+  --n-shadow: rgba(0, 0, 0, .28);
+}
+
+.vote-seat-tool {
+  --n-paper: #f4f0e7;
+  --n-surface: #fffdf8;
+  --n-ink: #20211d;
+  --n-muted: #6b6d62;
+  --n-line: #d9d3c6;
+  --n-accent: #b2472f;
+  --n-accent-soft: #f1d8ca;
+  --n-blue: #285c73;
+  --n-blue-soft: #d6e6e9;
+  --n-gold: #b6812b;
+  --n-success: #3c7654;
+  --n-caution: #a44d31;
+  --n-shadow: rgba(35, 31, 24, .12);
+
+  color: var(--n-ink);
+  background: var(--n-paper);
+  padding: clamp(1rem, 3vw, 2.5rem);
+  font: inherit;
+}
+
+.theme-dark .vote-seat-tool {
+  --n-paper: #171817;
+  --n-surface: #222422;
+  --n-ink: #f4f0e7;
+  --n-muted: #b3b4a9;
+  --n-line: #4a4e48;
+  --n-accent: #ef8868;
+  --n-accent-soft: #4c2c25;
+  --n-blue: #83c5d4;
+  --n-blue-soft: #203a41;
+  --n-gold: #e0b15a;
+  --n-success: #8bc096;
+  --n-caution: #f09a72;
+  --n-shadow: rgba(0, 0, 0, .28);
+}
+
+.comparison-surface {
+  display: grid;
+  grid-template-columns: minmax(16rem, .8fr) minmax(24rem, 1.4fr);
+  max-width: 76rem;
+  margin: 0 auto;
+  overflow: hidden;
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  box-shadow: 0 .8rem 2rem var(--n-shadow);
+}
+
+.input-surface,
+.result-surface {
+  min-width: 0;
+  padding: clamp(1.2rem, 3vw, 2.4rem);
+}
+
+.input-surface {
+  border-right: 1px solid var(--n-line);
+}
+
+.section-label,
+.result-heading {
+  display: flex;
+  align-items: baseline;
+  gap: .75rem;
+  margin-bottom: 1rem;
+}
+
+.section-label h2,
+.result-heading h2,
+.detail-heading {
+  margin: 0;
+  font-size: clamp(1.1rem, 2vw, 1.45rem);
+  line-height: 1.1;
+  font-weight: 600;
+}
+
+.section-glyph {
+  color: var(--n-accent);
+  font-size: .72rem;
+  font-weight: 700;
+  letter-spacing: .12em;
+}
+
+.field-help,
+.model-notice,
+.result-guide,
+.model-note,
+.totals-line {
+  color: var(--n-muted);
+  font-size: .88rem;
+  line-height: 1.5;
+}
+
+.field-help {
+  margin: 0 0 1.25rem;
+}
+
+.model-notice {
+  max-width: 38rem;
+  margin: 0 0 1.2rem;
+}
+
+.party-input-list {
+  display: grid;
+  gap: .7rem;
+}
+
+.party-input-row {
+  display: grid;
+  grid-template-columns: 1.8rem minmax(7rem, 1fr) minmax(5.5rem, .7fr) minmax(4.25rem, .5fr) 2rem;
+  align-items: end;
+  gap: .45rem;
+  padding-bottom: .7rem;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.row-number {
+  padding-bottom: .7rem;
+  color: var(--n-accent);
+  font-size: .75rem;
+  font-weight: 700;
+}
+
+.input-label {
+  display: grid;
+  gap: .25rem;
+  min-width: 0;
+}
+
+.input-label span {
+  color: var(--n-muted);
+  font-size: .68rem;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.input-label input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.45rem;
+  padding: .45rem .55rem;
+  border: 1px solid var(--n-line);
+  border-radius: .15rem;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  font: inherit;
+  font-size: .95rem;
+}
+
+.input-label input:focus {
+  outline: 2px solid var(--n-accent);
+  outline-offset: 1px;
+}
+
+.remove-row {
+  min-height: 2.45rem;
+  border: 0;
+  background: transparent;
+  color: var(--n-muted);
+  cursor: pointer;
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.remove-row:hover,
+.remove-row:focus-visible {
+  color: var(--n-accent);
+}
+
+.add-row,
+.secondary-action,
+.primary-action {
+  border-radius: .15rem;
+  cursor: pointer;
+  font: inherit;
+}
+
+.add-row {
+  margin-top: 1rem;
+  padding: .45rem 0;
+  border: 0;
+  background: transparent;
+  color: var(--n-blue);
+  font-size: .9rem;
+  font-weight: 700;
+}
+
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .65rem;
+  margin-top: 1.5rem;
+}
+
+.primary-action,
+.secondary-action {
+  min-height: 2.7rem;
+  padding: .6rem .85rem;
+}
+
+.primary-action {
+  border: 1px solid var(--n-accent);
+  background: var(--n-accent);
+  color: var(--n-surface);
+  font-weight: 700;
+}
+
+.secondary-action {
+  border: 1px solid var(--n-line);
+  background: transparent;
+  color: var(--n-ink);
+}
+
+.primary-action:focus-visible,
+.secondary-action:focus-visible,
+.add-row:focus-visible {
+  outline: 2px solid var(--n-blue);
+  outline-offset: 2px;
+}
+
+.tool-status {
+  min-height: 1.4rem;
+  margin: .9rem 0 0;
+  color: var(--n-muted);
+  font-size: .82rem;
+  line-height: 1.4;
+}
+
+.status-positive {
+  color: var(--n-success);
+}
+
+.status-caution,
+.status-error {
+  color: var(--n-caution);
+}
+
+.empty-result {
+  display: grid;
+  min-height: 18rem;
+  place-items: center;
+  padding: 2rem;
+  border: 1px dashed var(--n-line);
+  color: var(--n-muted);
+  text-align: center;
+}
+
+.result-stack {
+  display: grid;
+  gap: 1rem;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: .55rem;
+}
+
+.metric {
+  display: grid;
+  gap: .35rem;
+  min-width: 0;
+  padding: .75rem;
+  border-top: 3px solid var(--n-line);
+  background: var(--n-paper);
+}
+
+.metric-gallagher {
+  border-color: var(--n-accent);
+}
+
+.metric-loosemore {
+  border-color: var(--n-blue);
+}
+
+.metric-sainte {
+  border-color: var(--n-gold);
+}
+
+.metric-gap {
+  border-color: var(--n-success);
+}
+
+.metric-label {
+  color: var(--n-muted);
+  font-size: .7rem;
+  line-height: 1.2;
+}
+
+.metric-value {
+  overflow-wrap: anywhere;
+  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
+  line-height: 1;
+}
+
+.totals-line,
+.result-guide,
+.model-note {
+  margin: 0;
+}
+
+.press-scene {
+  display: grid;
+  gap: .75rem;
+  padding: 1rem;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper);
+}
+
+.scene-legend {
+  color: var(--n-muted);
+  font-size: .72rem;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.share-strip {
+  display: grid;
+  grid-template-columns: minmax(5rem, .6fr) minmax(10rem, 2fr) minmax(4rem, .5fr);
+  align-items: center;
+  gap: .7rem;
+}
+
+.share-name,
+.share-gap {
+  overflow-wrap: anywhere;
+  font-size: .82rem;
+}
+
+.share-gap {
+  color: var(--n-accent);
+  text-align: right;
+}
+
+.share-ribbons {
+  position: relative;
+  display: grid;
+  gap: .3rem;
+  min-height: 1.45rem;
+  padding: .2rem 0;
+  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), var(--n-line) 20%);
+}
+
+.share-ribbon {
+  display: block;
+  min-width: 2px;
+  height: .35rem;
+  transform-origin: left center;
+}
+
+.vote-ribbon {
+  background: var(--n-blue);
+}
+
+.seat-ribbon {
+  background: var(--n-accent);
+}
+
+.model-note-caution {
+  color: var(--n-caution);
+}
+
+.detail-section {
+  overflow-x: auto;
+}
+
+.detail-heading {
+  margin-bottom: .7rem;
+  font-size: 1rem;
+}
+
+.detail-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .78rem;
+}
+
+.detail-table th,
+.detail-table td {
+  padding: .55rem .45rem;
+  border-bottom: 1px solid var(--n-line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.detail-table th {
+  color: var(--n-muted);
+  font-size: .68rem;
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.detail-table td:nth-child(n + 2) {
+  white-space: nowrap;
+}
+
+[hidden] {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .comparison-surface {
+    grid-template-columns: 1fr;
+  }
+
+  .input-surface {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+}
+
+@media (max-width: 620px) {
+  .vote-seat-tool {
+    padding: .7rem;
+  }
+
+  .input-surface,
+  .result-surface {
+    padding: 1rem;
+  }
+
+  .party-input-row {
+    grid-template-columns: 1.5rem minmax(6rem, 1fr) minmax(4.9rem, .65fr) minmax(3.7rem, .5fr) 1.7rem;
+    gap: .3rem;
+  }
+
+  .metrics-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .share-strip {
+    grid-template-columns: minmax(4rem, .7fr) minmax(7rem, 1.7fr) minmax(3.5rem, .5fr);
+    gap: .45rem;
+  }
+}

package/src/tools.ts

@@ -1,7 +1,9 @@
 export { ALL_ENTRIES } from './entries';
 import type { ToolDefinition } from './types';
 import { ELECTION_SEAT_APPORTIONMENT_CALCULATOR_TOOL } from './tool/election-seat-apportionment-calculator';
+import { VOTE_SEAT_DISPROPORTIONALITY_ANALYZER_TOOL } from './tool/vote-seat-disproportionality-analyzer';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   ELECTION_SEAT_APPORTIONMENT_CALCULATOR_TOOL,
+  VOTE_SEAT_DISPROPORTIONALITY_ANALYZER_TOOL,
 ];

package/src/types.ts

@@ -47,6 +47,7 @@ export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
 
 export interface CivicToolEntry<TUI extends Record<string, string> = Record<string, string>> {
   id: string;
+  phase?: 'english-first' | 'localized';
   icons: {
     bg: string;
     fg: string;
@@ -66,4 +67,3 @@ export interface ToolDefinition {
   SEOComponent: unknown;
   BibliographyComponent: unknown;
 }
-