@jjlmoya/utils-civic 1.4.0 → 1.5.0

package/package.json

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

package/src/category/index.ts

@@ -1,4 +1,5 @@
 import { coalitionMajorityCalculator } from '../tool/coalition-majority-calculator/entry';
+import { civicPriorityMatrix } from '../tool/civic-priority-matrix/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';
@@ -6,7 +7,7 @@ import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const civicCategory = {
   icon: 'mdi:bank-outline',
-  tools: [coalitionMajorityCalculator, electionSeatApportionmentCalculator, referendumThresholdCalculator, voteSeatDisproportionalityAnalyzer],
+  tools: [civicPriorityMatrix, 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

@@ -1,16 +1,20 @@
 export { electionSeatApportionmentCalculator } from './tool/election-seat-apportionment-calculator/entry';
 export type { ElectionSeatUI, ElectionSeatLocaleContent } from './tool/election-seat-apportionment-calculator/entry';
+export { civicPriorityMatrix } from './tool/civic-priority-matrix/entry';
+export type { CivicPriorityUI, CivicPriorityLocaleContent } from './tool/civic-priority-matrix/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 { coalitionMajorityCalculator } from './tool/coalition-majority-calculator/entry';
+import { civicPriorityMatrix } from './tool/civic-priority-matrix/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,
+  civicPriorityMatrix,
   electionSeatApportionmentCalculator,
   referendumThresholdCalculator,
   voteSeatDisproportionalityAnalyzer,

package/src/index.ts

@@ -3,6 +3,7 @@ export const civicCategorySEO = () => import('./category/CivicCategorySEO.astro'
 
 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 { civicPriorityMatrix, CIVIC_PRIORITY_MATRIX_TOOL } from './tool/civic-priority-matrix';
 export { voteSeatDisproportionalityAnalyzer, VOTE_SEAT_DISPROPORTIONALITY_ANALYZER_TOOL } from './tool/vote-seat-disproportionality-analyzer';
 
 export type {

package/src/pages/[locale]/[slug].astro

@@ -89,9 +89,12 @@ const toolCss = cssLoader ? await cssLoader() : "";
 
 const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
-const words = content.title.split(" ");
-const titleHighlight = words[0] || "";
-const titleBase = words.slice(1).join(" ") || "";
+const words = content.title.split(/\s+/).filter(Boolean);
+const titleParts = words.length > 1
+  ? [words[0] || "", words.slice(1).join(" ")]
+  : [content.title.slice(0, Math.ceil(content.title.length / 2)), content.title.slice(Math.ceil(content.title.length / 2))];
+const titleHighlight = titleParts[0] || "";
+const titleBase = titleParts[1] || "";
 ---
 
 <PreviewLayout
@@ -126,7 +129,7 @@ const titleBase = words.slice(1).join(" ") || "";
     />
 
     <section class="section-tool">
-      <Component ui={content.ui} />
+      <Component ui={content.ui} locale={locale} />
     </section>
 
     <section class="section-seo">

package/src/tests/locale_completeness.test.ts

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

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

package/src/tool/civic-priority-matrix/bibliography.astro

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

package/src/tool/civic-priority-matrix/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: "Ministère de l'Economie, des Finances et de la Souveraineté industrielle et numérique, Matrice Impact-Effort",
+    url: 'https://www.economie.gouv.fr/mission-innovation/boite-outils/prendre-une-decision',
+  },
+  {
+    name: 'Government Digital Service, Deciding on priorities',
+    url: 'https://www.gov.uk/service-manual/agile-delivery/deciding-on-priorities',
+  },
+];

package/src/tool/civic-priority-matrix/civic-priority-matrix.css

@@ -0,0 +1,531 @@
+:root {
+  --n-page: #f4f0e7;
+  --n-surface: #fffdf8;
+  --n-surface-soft: #f0ebe0;
+  --n-ink: #20252a;
+  --n-muted: #687078;
+  --n-line: #d7d0c2;
+  --n-accent: #a34f35;
+  --n-accent-dark: #743725;
+  --n-plan: #dce8eb;
+  --n-act: #f2d9c5;
+  --n-defer: #e9e5dc;
+  --n-quick: #dfe7cf;
+  --n-warning: #8b5b22;
+  --n-focus: #155d78;
+  --n-shadow: transparent;
+}
+
+.theme-dark {
+  --n-page: #17191c;
+  --n-surface: #23272b;
+  --n-surface-soft: #2c3136;
+  --n-ink: #f4f0e7;
+  --n-muted: #b9c0c5;
+  --n-line: #525a61;
+  --n-accent: #e49a78;
+  --n-accent-dark: #ffc3a5;
+  --n-plan: #2a4048;
+  --n-act: #553a2e;
+  --n-defer: #363631;
+  --n-quick: #34402e;
+  --n-warning: #f0bf6a;
+  --n-focus: #84d3ed;
+  --n-shadow: transparent;
+}
+
+.civic-priority-tool {
+  --n-local-page: var(--n-page);
+  --n-local-surface: var(--n-surface);
+  --n-local-surface-soft: var(--n-surface-soft);
+  --n-local-ink: var(--n-ink);
+  --n-local-muted: var(--n-muted);
+  --n-local-line: var(--n-line);
+  --n-local-accent: var(--n-accent);
+  --n-local-accent-dark: var(--n-accent-dark);
+  --n-local-plan: var(--n-plan);
+  --n-local-act: var(--n-act);
+  --n-local-defer: var(--n-defer);
+  --n-local-quick: var(--n-quick);
+  --n-local-warning: var(--n-warning);
+  --n-local-focus: var(--n-focus);
+  --n-local-shadow: var(--n-shadow);
+
+  display: block;
+  color: var(--n-local-ink);
+}
+
+.priority-main-surface {
+  background: var(--n-local-surface);
+  border: 1px solid var(--n-local-line);
+  border-radius: 1.25rem;
+  overflow: hidden;
+}
+
+.priority-main-flow {
+  display: grid;
+  grid-template-columns: minmax(20rem, .85fr) minmax(34rem, 1.15fr);
+  align-items: start;
+}
+
+.priority-control-surface,
+.priority-result-surface {
+  padding: clamp(1rem, 2vw, 1.5rem);
+}
+
+.priority-control-surface {
+  border-right: 1px solid var(--n-local-line);
+}
+
+.priority-control-header,
+.priority-result-heading,
+.priority-control-footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.priority-kicker {
+  margin: 0;
+  color: var(--n-local-accent-dark);
+  font-size: .75rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.priority-input-hint,
+.priority-summary,
+.priority-scale-note,
+.priority-form-status,
+.priority-method-card p {
+  color: var(--n-local-muted);
+  font-size: .9rem;
+  line-height: 1.55;
+}
+
+.priority-input-hint,
+.priority-summary,
+.priority-form-status {
+  margin: .35rem 0 0;
+}
+
+.priority-add,
+.priority-reset {
+  border: 1px solid var(--n-local-accent);
+  border-radius: .7rem;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 750;
+  padding: .7rem .95rem;
+}
+
+.priority-add {
+  background: var(--n-local-accent);
+  color: var(--n-local-surface);
+}
+
+.priority-reset {
+  background: transparent;
+  color: var(--n-local-accent-dark);
+}
+
+.priority-add:focus-visible,
+.priority-reset:focus-visible,
+.priority-remove:focus-visible,
+.priority-input:focus-visible {
+  outline: 3px solid var(--n-local-focus);
+  outline-offset: 2px;
+}
+
+.priority-scale-note {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .4rem 1rem;
+  margin: 1rem 0;
+}
+
+.priority-scale-note span:first-child {
+  color: var(--n-local-ink);
+  font-weight: 750;
+}
+
+.priority-initiative-list {
+  display: grid;
+  gap: .6rem;
+}
+
+.priority-initiative-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(10rem, 2fr) repeat(3, minmax(3rem, .65fr));
+  align-items: end;
+  gap: .5rem;
+  padding: .65rem 2rem .75rem .7rem;
+  border-bottom: 1px solid var(--n-local-line);
+}
+
+.priority-field-control {
+  display: grid;
+  gap: .3rem;
+  color: var(--n-local-muted);
+  font-size: .75rem;
+  font-weight: 700;
+}
+
+.priority-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--n-local-line);
+  border-radius: .55rem;
+  background: var(--n-local-surface-soft);
+  color: var(--n-local-ink);
+  font: inherit;
+  font-weight: 650;
+  min-height: 2.7rem;
+  padding: .55rem .65rem;
+}
+
+.priority-input[aria-invalid="true"] {
+  border-color: var(--n-local-accent);
+  box-shadow: 0 0 0 2px var(--n-local-shadow);
+}
+
+.priority-remove {
+  position: absolute;
+  top: .7rem;
+  right: 0;
+  border: 0;
+  background: transparent;
+  color: var(--n-local-muted);
+  cursor: pointer;
+  font-size: 1.4rem;
+  line-height: 1;
+  padding: .45rem;
+}
+
+.priority-row-error {
+  grid-column: 1 / -1;
+  margin: -.3rem 0 0;
+  color: var(--n-local-accent-dark);
+  font-size: .75rem;
+  min-height: 1rem;
+}
+
+.priority-row-error:empty {
+  display: none;
+}
+
+.priority-control-footer {
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.priority-form-status {
+  color: var(--n-local-accent-dark);
+  text-align: right;
+}
+
+.priority-result-surface {
+  padding-top: clamp(1.25rem, 3vw, 2rem);
+  padding-bottom: clamp(1.25rem, 3vw, 2rem);
+}
+
+.priority-empty-mark::before,
+.priority-empty-mark::after {
+  position: absolute;
+  content: '';
+  background: var(--n-local-accent);
+}
+
+.priority-empty-mark::before {
+  top: 50%;
+  left: 15%;
+  width: 70%;
+  height: 1px;
+}
+
+.priority-empty-mark::after {
+  top: 15%;
+  left: 50%;
+  width: 1px;
+  height: 70%;
+}
+
+.priority-scene-wrap {
+  margin: 1rem -0.25rem 0;
+  padding: .5rem;
+  border: 1px solid var(--n-local-line);
+  border-radius: 1rem;
+  background: var(--n-local-page);
+}
+
+.priority-scene {
+  min-height: 18rem;
+}
+
+.priority-field {
+  display: block;
+  width: 100%;
+  max-height: 27rem;
+}
+
+.priority-quadrant-plan { fill: var(--n-local-plan); }
+.priority-quadrant-act { fill: var(--n-local-act); }
+.priority-quadrant-defer { fill: var(--n-local-defer); }
+.priority-quadrant-quick { fill: var(--n-local-quick); }
+.priority-axis {
+  fill: none;
+  stroke: var(--n-local-line);
+  stroke-width: 2;
+}
+
+.priority-axis-label,
+.priority-quadrant-label {
+  fill: var(--n-local-muted);
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+.priority-axis-end {
+  fill: var(--n-local-muted);
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.priority-point circle {
+  stroke: var(--n-local-surface);
+  stroke-width: 3;
+}
+
+.priority-point text {
+  fill: var(--n-local-ink);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.priority-point .priority-point-score {
+  fill: var(--n-local-muted);
+  font-size: 10px;
+  font-weight: 600;
+}
+.priority-point-act-now circle { fill: var(--n-local-accent); }
+.priority-point-plan circle { fill: var(--n-local-focus); }
+.priority-point-quick-response circle { fill: var(--n-local-warning); }
+.priority-point-defer circle { fill: var(--n-local-muted); }
+
+.priority-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem 1rem;
+  padding: .7rem .5rem .2rem;
+  color: var(--n-local-muted);
+  font-size: .78rem;
+  font-weight: 700;
+}
+
+.priority-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: .35rem;
+}
+
+.priority-legend-dot {
+  width: .65rem;
+  height: .65rem;
+  border-radius: 50%;
+}
+
+.priority-dot-plan { background: var(--n-local-focus); }
+.priority-dot-act { background: var(--n-local-accent); }
+.priority-dot-defer { background: var(--n-local-muted); }
+.priority-dot-quick { background: var(--n-local-warning); }
+
+.priority-ranking-block {
+  margin-top: 1.25rem;
+}
+
+.priority-ranking-block h2,
+.priority-method-card h2 {
+  margin: 0 0 .65rem;
+  font-size: 1rem;
+}
+
+.priority-ranking-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .86rem;
+}
+
+.priority-ranking-table th,
+.priority-ranking-table td {
+  padding: .7rem .45rem;
+  border-bottom: 1px solid var(--n-local-line);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.priority-header-cell {
+  color: var(--n-local-muted);
+  font-size: .7rem;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+.priority-rank-cell {
+  color: var(--n-local-accent-dark);
+  font-weight: 850;
+}
+
+.priority-badge {
+  display: inline-block;
+  border-radius: 999px;
+  padding: .25rem .5rem;
+  font-size: .72rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.priority-badge-warm {
+  background: var(--n-local-act);
+  color: var(--n-local-accent-dark);
+}
+
+.priority-badge-cool {
+  background: var(--n-local-plan);
+  color: var(--n-local-focus);
+}
+
+.priority-badge-bright {
+  background: var(--n-local-quick);
+  color: var(--n-local-warning);
+}
+
+.priority-badge-quiet {
+  background: var(--n-local-defer);
+  color: var(--n-local-muted);
+}
+
+.priority-warnings {
+  display: grid;
+  gap: .35rem;
+  margin-top: .8rem;
+}
+
+.priority-warning {
+  margin: 0;
+  border-left: 3px solid var(--n-local-warning);
+  color: var(--n-local-warning);
+  font-size: .82rem;
+  line-height: 1.5;
+  padding: .35rem .7rem;
+}
+
+.priority-empty {
+  display: grid;
+  min-height: 16rem;
+  place-items: center;
+  align-content: center;
+  gap: 1rem;
+  color: var(--n-local-muted);
+  text-align: center;
+}
+
+.priority-empty-mark {
+  position: relative;
+  width: 4rem;
+  height: 4rem;
+  border: 1px solid var(--n-local-accent);
+  border-radius: 50%;
+}
+
+.priority-empty p {
+  max-width: 24rem;
+  margin: 0;
+}
+
+.priority-method-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
+}
+
+.priority-method-card {
+  padding: 0 1rem;
+}
+
+.priority-method-card + .priority-method-card {
+  border-left: 1px solid var(--n-local-line);
+}
+
+.priority-method-card p {
+  margin: 0;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 980px) {
+  .priority-main-flow {
+    grid-template-columns: 1fr;
+  }
+
+  .priority-control-surface {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-local-line);
+  }
+}
+
+@media (max-width: 700px) {
+  .priority-control-header,
+  .priority-control-footer,
+  .priority-result-heading {
+    flex-direction: column;
+  }
+
+  .priority-add,
+  .priority-reset {
+    width: 100%;
+  }
+
+  .priority-initiative-row {
+    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(3.5rem, 1fr));
+    gap: .4rem;
+    padding-right: 2rem;
+    padding-left: 0;
+  }
+
+  .priority-field-control {
+    font-size: .68rem;
+  }
+
+  .priority-ranking-table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .priority-method-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .priority-method-card {
+    padding: 0;
+  }
+
+  .priority-method-card + .priority-method-card {
+    margin-top: 1.25rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--n-local-line);
+    border-left: 0;
+  }
+}