@empoweredvote/ev-ui 0.8.13 → 0.8.15

package/dist/index.mjs

@@ -1,34 +1,6 @@
 // src/RadarChartCore.jsx
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { animated, useSpring } from "@react-spring/web";
-import { useRef, useEffect as useEffect2 } from "react";
-
-// src/useTheme.js
-import { useState, useEffect } from "react";
-function useTheme() {
-  const read = () => {
-    if (typeof document === "undefined") return false;
-    const root = document.documentElement;
-    const body = document.body;
-    const hasDarkClass = (el) => el && el.classList && el.classList.contains("dark");
-    const hasDarkAttr = (el) => el && el.getAttribute && el.getAttribute("data-theme") === "dark";
-    return hasDarkClass(root) || hasDarkAttr(root) || hasDarkClass(body) || hasDarkAttr(body);
-  };
-  const [isDark, setIsDark] = useState(read);
-  useEffect(() => {
-    if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-    const update = () => setIsDark(read());
-    update();
-    const observer = new MutationObserver(update);
-    const opts = { attributes: true, attributeFilter: ["class", "data-theme"] };
-    observer.observe(document.documentElement, opts);
-    if (document.body) observer.observe(document.body, opts);
-    return () => observer.disconnect();
-  }, []);
-  return { isDark };
-}
-
-// src/RadarChartCore.jsx
 function RadarChartCore({
   topics,
   data,
@@ -40,83 +12,95 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
-  labelFontSize = 18,
+  labelFontSize = 13,
   padding = 80,
-  labelOffset = 20,
-  tightFit = false
+  labelOffset = 52,
+  tightFit = false,
+  activeSpoke = null,
+  writeIns = {},
+  darkMode = false,
+  lineColor,
+  ringColor,
+  // replacedSpokes: short_titles of substitute spokes (not the user's original defaults)
+  replacedSpokes = {},
+  // boldOriginalSpokes: when true, bold spokes that are NOT replacements
+  boldOriginalSpokes = false,
+  highlightedSpoke = null
 }) {
-  const { isDark } = useTheme();
+  var _a;
   const radius = size / 2 - 40;
+  const extRadius = radius * 1.15;
   const centerX = size / 2;
   const centerY = size / 2;
+  const [tooltip, setTooltip] = useState(null);
   const spokes = Object.entries(data);
   const numSpokes = Math.max(spokes.length, 1);
   const prevCountRef = useRef(numSpokes);
   const countChanged = numSpokes !== prevCountRef.current;
-  useEffect2(() => {
+  useEffect(() => {
     prevCountRef.current = numSpokes;
   }, [numSpokes]);
-  const pointsArr = spokes.map(([shortTitle, value], index) => {
-    var _a;
+  function calcAdjusted(value, shortTitle) {
+    var _a2;
+    if (!value || Number(value) === 0) return 0;
     const topic = topics.find((t) => t.short_title === shortTitle);
-    const max = ((_a = topic == null ? void 0 : topic.stances) == null ? void 0 : _a.length) || 10;
-    const pct = Math.min(value / max * 10, 10);
-    const angle = 2 * Math.PI * index / numSpokes;
-    const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? 11 - pct : pct;
+    const max = ((_a2 = topic == null ? void 0 : topic.stances) == null ? void 0 : _a2.length) || 10;
+    const pct = Number(value) / max * 10;
+    return invertedSpokes[shortTitle] ? (max + 1) * 10 / max - pct : pct;
+  }
+  const pointsArr = spokes.map(([shortTitle, value], index) => {
+    const adjusted = calcAdjusted(value, shortTitle);
     const r = adjusted / 10 * radius;
-    const x = centerX + r * Math.sin(angle);
-    const y = centerY - r * Math.cos(angle);
-    return [x, y];
+    const angle = 2 * Math.PI * index / numSpokes;
+    return [centerX + r * Math.sin(angle), centerY - r * Math.cos(angle)];
   });
   const targetPoints = pointsArr.map((p) => p.join(",")).join(" ");
-  const spring = useSpring({
+  const springBase = {
     to: { points: targetPoints },
     immediate: countChanged,
-    reset: countChanged,
     config: { tension: 300, friction: 30 }
-  });
+  };
+  if (countChanged) springBase.from = { points: targetPoints };
+  const spring = useSpring(springBase);
   const hasCompareData = Object.keys(compareData).length > 0;
   const centerPoints = spokes.map(() => `${centerX},${centerY}`).join(" ");
   let comparePoints = null;
   let compareCoords = null;
   if (hasCompareData) {
     const ccoords = spokes.map(([shortTitle], index) => {
-      var _a, _b;
-      const value = (_a = compareData[shortTitle]) != null ? _a : 0;
-      const topic = topics.find((t) => t.short_title === shortTitle);
-      const max = ((_b = topic == null ? void 0 : topic.stances) == null ? void 0 : _b.length) || 10;
-      const pct = Math.min(value / max * 10, 10);
-      const angle = 2 * Math.PI * index / numSpokes;
-      const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? 11 - pct : pct;
+      var _a2;
+      const value = (_a2 = compareData[shortTitle]) != null ? _a2 : 0;
+      const adjusted = calcAdjusted(value, shortTitle);
       const r = adjusted / 10 * radius;
-      const x = centerX + r * Math.sin(angle);
-      const y = centerY - r * Math.cos(angle);
-      return [x, y];
+      const angle = 2 * Math.PI * index / numSpokes;
+      return [centerX + r * Math.sin(angle), centerY - r * Math.cos(angle)];
     });
     compareCoords = ccoords;
     comparePoints = ccoords.map((p) => p.join(",")).join(" ");
   }
   const hadCompareDataRef = useRef(false);
   const compareJustAppeared = hasCompareData && !hadCompareDataRef.current;
-  useEffect2(() => {
+  useEffect(() => {
     hadCompareDataRef.current = hasCompareData;
   }, [hasCompareData]);
-  const compareSpring = useSpring({
+  const compareSpringBase = {
     to: { points: comparePoints || centerPoints || `${centerX},${centerY}` },
     immediate: countChanged || compareJustAppeared,
-    reset: countChanged || compareJustAppeared,
     config: { tension: 300, friction: 30 }
-  });
+  };
+  if (countChanged || compareJustAppeared) compareSpringBase.from = compareSpringBase.to;
+  const compareSpring = useSpring(compareSpringBase);
+  const spokeExtension = spokes.reduce((acc, [shortTitle]) => {
+    const userAdj = calcAdjusted(data[shortTitle], shortTitle);
+    const cmpAdj = hasCompareData && compareData[shortTitle] ? calcAdjusted(compareData[shortTitle], shortTitle) : 0;
+    acc[shortTitle] = userAdj > 10 || cmpAdj > 10;
+    return acc;
+  }, {});
   const labelMeta = spokes.map(([shortTitle], i) => {
     const angle = 2 * Math.PI * i / numSpokes;
-    const baseFSize = labelFontSize;
     const lines = wrapLabel(shortTitle, 12);
-    const longestLineLen = lines.reduce(
-      (max, ln) => ln.length > max ? ln.length : max,
-      0
-    );
-    const fSize = adaptiveFontSize(longestLineLen, baseFSize);
-    const estimatedWidth = longestLineLen * fSize * 0.6;
+    const longestLineLen = lines.reduce((m, ln) => ln.length > m ? ln.length : m, 0);
+    const estimatedWidth = longestLineLen * labelFontSize * 0.55;
     const sinA = Math.sin(angle);
     const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
     return { estimatedWidth, side };
@@ -125,23 +109,9 @@ function RadarChartCore({
   const rightLabelWidths = labelMeta.filter((m) => m.side === "right").map((m) => m.estimatedWidth);
   const minPadding = 40;
   const maxPadding = padding * 2;
-  const rawLeftPadding = Math.min(
-    Math.max(
-      leftLabelWidths.length ? Math.max(...leftLabelWidths) + labelOffset : 0,
-      minPadding
-    ),
-    maxPadding
-  );
-  const rawRightPadding = Math.min(
-    Math.max(
-      rightLabelWidths.length ? Math.max(...rightLabelWidths) + labelOffset : 0,
-      minPadding
-    ),
-    maxPadding
-  );
-  const symmetricPadding = Math.max(rawLeftPadding, rawRightPadding);
-  const leftPadding = symmetricPadding;
-  const rightPadding = symmetricPadding;
+  const rawLeft = Math.min(Math.max(leftLabelWidths.length ? Math.max(...leftLabelWidths) + labelOffset : 0, minPadding), maxPadding);
+  const rawRight = Math.min(Math.max(rightLabelWidths.length ? Math.max(...rightLabelWidths) + labelOffset : 0, minPadding), maxPadding);
+  const sidePadding = Math.max(rawLeft, rawRight);
   const verticalPadding = padding;
   let tightTop = -verticalPadding;
   let tightHeight = size + verticalPadding * 2;
@@ -149,11 +119,12 @@ function RadarChartCore({
     let yMin = Infinity, yMax = -Infinity;
     for (let i = 0; i < numSpokes; i++) {
       const angle = 2 * Math.PI * i / numSpokes;
-      const y = centerY - radius * Math.cos(angle);
+      const effectiveR = spokeExtension[(_a = spokes[i]) == null ? void 0 : _a[0]] ? extRadius : radius;
+      const y = centerY - effectiveR * Math.cos(angle);
       if (y < yMin) yMin = y;
       if (y > yMax) yMax = y;
     }
-    const labelMargin = labelOffset + labelFontSize * 1.4 + labelFontSize * 1.1;
+    const labelMargin = labelOffset + labelFontSize * 2.5;
     tightTop = yMin - labelMargin;
     tightHeight = yMax + labelMargin - tightTop;
   }
@@ -163,75 +134,93 @@ function RadarChartCore({
     const ring = [];
     for (let i = 0; i < numSpokes; i++) {
       const angle = 2 * Math.PI * i / numSpokes;
-      const x = centerX + radius * scale * Math.sin(angle);
-      const y = centerY - radius * scale * Math.cos(angle);
-      ring.push(`${x},${y}`);
+      ring.push(`${centerX + radius * scale * Math.sin(angle)},${centerY - radius * scale * Math.cos(angle)}`);
     }
     guidePolygons.push(
-      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: isDark ? "#374151" : "#ccc" })
+      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: ringColor != null ? ringColor : darkMode ? "#555" : "#ccc" })
     );
   }
+  const getStanceText = (shortTitle, value) => {
+    if (writeIns[shortTitle]) return writeIns[shortTitle];
+    const topic = topics.find((t) => t.short_title === shortTitle);
+    const stances = (topic == null ? void 0 : topic.stances) || [];
+    const idx = Math.round(Number(value)) - 1;
+    if (idx >= 0 && idx < stances.length) {
+      return stances[idx].text || shortTitle;
+    }
+    return shortTitle;
+  };
   return /* @__PURE__ */ React.createElement(
     "svg",
     {
       className: "w-full h-auto max-h-full",
-      viewBox: `-${leftPadding} ${tightTop} ${size + leftPadding + rightPadding} ${tightHeight}`,
-      preserveAspectRatio: "xMidYMid meet"
+      viewBox: `-${sidePadding} ${tightTop} ${size + sidePadding * 2} ${tightHeight}`,
+      preserveAspectRatio: "xMidYMid meet",
+      onMouseLeave: () => setTooltip(null)
     },
     guidePolygons,
     spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
-      const x = centerX + radius * Math.sin(angle);
-      const y = centerY - radius * Math.cos(angle);
+      const endX = centerX + radius * Math.sin(angle);
+      const endY = centerY - radius * Math.cos(angle);
       const isUnanswered = !!unansweredSpokes[shortTitle];
-      return /* @__PURE__ */ React.createElement(
+      const needsExt = spokeExtension[shortTitle];
+      const extX = centerX + extRadius * Math.sin(angle);
+      const extY = centerY - extRadius * Math.cos(angle);
+      return /* @__PURE__ */ React.createElement("g", { key: `spoke-${shortTitle}` }, /* @__PURE__ */ React.createElement(
         "line",
         {
-          key: `line-${shortTitle}`,
           x1: centerX,
           y1: centerY,
-          x2: x,
-          y2: y,
-          stroke: isUnanswered ? isDark ? "#6b7280" : "#9ca3af" : isDark ? "#d1d5db" : "black",
+          x2: endX,
+          y2: endY,
+          stroke: isUnanswered ? "#9ca3af" : lineColor != null ? lineColor : darkMode ? "#bbb" : "#888",
           strokeDasharray: isUnanswered ? "4 3" : void 0,
           opacity: isUnanswered ? 0.6 : 1
         }
-      );
+      ), needsExt && /* @__PURE__ */ React.createElement(
+        "line",
+        {
+          x1: endX,
+          y1: endY,
+          x2: extX,
+          y2: extY,
+          stroke: "#aaa",
+          strokeDasharray: "4 4",
+          opacity: 0.4
+        }
+      ));
     }),
     spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
-      const anchor = angle > Math.PI ? "end" : angle < Math.PI && angle > 0 ? "start" : "middle";
       const cosA = Math.cos(angle);
-      const isTop = cosA > 0.5;
       const isBottom = cosA < -0.5;
-      const baseFSize = labelFontSize;
+      const isTop = cosA > 0.5;
       const lines = wrapLabel(shortTitle, 12);
-      const longestLine = lines.reduce(
-        (max, ln) => ln.length > max ? ln.length : max,
-        0
-      );
-      const fSize = adaptiveFontSize(longestLine, baseFSize);
-      const lineHeight = fSize * 1.1;
-      const dynamicLabelOffset = lines.length > 1 ? labelOffset + 8 : labelOffset;
-      const offset2 = radius + dynamicLabelOffset;
+      const longestLine = lines.reduce((m, ln) => ln.length > m ? ln.length : m, 0);
+      const lineHeight = labelFontSize * 1.2;
+      const dynamicOffset = lines.length > 1 ? labelOffset + 6 : labelOffset;
+      const offset2 = radius + dynamicOffset;
       const labelX = centerX + offset2 * Math.sin(angle);
       let labelY = centerY - offset2 * Math.cos(angle);
-      if (isTop && lines.length > 1) {
-        labelY -= (lines.length - 1) * lineHeight;
-      }
+      if (isTop && lines.length > 1) labelY -= (lines.length - 1) * lineHeight;
+      const isActive = shortTitle === activeSpoke;
       const isUnansweredLabel = !!unansweredSpokes[shortTitle];
+      const isReplaced = !!replacedSpokes[shortTitle];
+      const shouldBold = boldOriginalSpokes && !isReplaced;
+      const fSize = labelFontSize;
       return /* @__PURE__ */ React.createElement(
         "text",
         {
           key: `label-${shortTitle}`,
           x: labelX,
           y: labelY,
-          textAnchor: anchor,
+          textAnchor: "middle",
           dominantBaseline: isBottom ? "hanging" : "auto",
           onClick: () => onReplaceTopic(shortTitle),
-          className: "text-xl font-medium mb-1 md:text-base md:font-normal",
-          fill: isUnansweredLabel ? isDark ? "#6b7280" : "#9ca3af" : isDark ? "#d1d5db" : void 0,
-          style: { cursor: "pointer", userSelect: "none", fontSize: fSize }
+          fill: isActive ? "#E85D26" : shortTitle === highlightedSpoke ? darkMode ? "#7DD4E8" : "#59B0C4" : isUnansweredLabel ? "#9ca3af" : darkMode ? "#D3D7DE" : "#555",
+          fontWeight: isActive || shouldBold ? "bold" : "normal",
+          style: { cursor: "pointer", userSelect: "none", fontSize: fSize, fontFamily: "sans-serif" }
         },
         isUnansweredLabel && /* @__PURE__ */ React.createElement("title", null, "No stance on file for this topic."),
         lines.map((ln, idx) => /* @__PURE__ */ React.createElement("tspan", { key: idx, x: labelX, dy: idx === 0 ? "0" : `${lineHeight}` }, ln))
@@ -242,22 +231,14 @@ function RadarChartCore({
       {
         key: "user-static",
         points: targetPoints,
-        style: {
-          fill: "rgba(124, 107, 158, 0.4)",
-          stroke: "#7C6B9E",
-          strokeWidth: 3
-        }
+        style: { fill: "rgba(124, 107, 158, 0.4)", stroke: "#7C6B9E", strokeWidth: 3 }
       }
     ) : /* @__PURE__ */ React.createElement(
       animated.polygon,
       {
         key: "user-animated",
         points: spring.points,
-        style: {
-          fill: "rgba(124, 107, 158, 0.4)",
-          stroke: "#7C6B9E",
-          strokeWidth: 3
-        }
+        style: { fill: "rgba(124, 107, 158, 0.4)", stroke: "#7C6B9E", strokeWidth: 3 }
       }
     ),
     pointsArr.map(([cx, cy], i) => {
@@ -272,10 +253,11 @@ function RadarChartCore({
           key: `user-dot-${i}`,
           cx,
           cy,
-          r: matches ? 8 : 7,
+          r: matches ? 6 : 5,
           fill: matches ? "#fed12e" : "#7C6B9E",
           stroke: "#FFFFFF",
-          strokeWidth: 3
+          strokeWidth: 2,
+          style: { pointerEvents: "none" }
         }
       );
     }),
@@ -285,9 +267,10 @@ function RadarChartCore({
         key: "compare-static",
         points: comparePoints,
         style: {
-          fill: "rgba(90, 154, 110, 0.3)",
-          stroke: "#5A9A6E",
-          strokeWidth: 2
+          fill: darkMode ? "rgba(110, 210, 140, 0.55)" : "rgba(90, 154, 110, 0.45)",
+          stroke: darkMode ? "#6DD28C" : "#5A9A6E",
+          strokeWidth: 2,
+          mixBlendMode: darkMode ? "normal" : "multiply"
         }
       }
     ) : /* @__PURE__ */ React.createElement(
@@ -296,9 +279,10 @@ function RadarChartCore({
         key: "compare-animated",
         points: compareSpring.points,
         style: {
-          fill: "rgba(90, 154, 110, 0.3)",
-          stroke: "#5A9A6E",
-          strokeWidth: 2
+          fill: darkMode ? "rgba(110, 210, 140, 0.55)" : "rgba(90, 154, 110, 0.45)",
+          stroke: darkMode ? "#6DD28C" : "#5A9A6E",
+          strokeWidth: 2,
+          mixBlendMode: darkMode ? "normal" : "multiply"
         }
       }
     ) : null,
@@ -307,24 +291,25 @@ function RadarChartCore({
       const userVal = spokes[i][1];
       const compareVal = compareData[shortTitle];
       if (!compareVal || Number(compareVal) === 0) return null;
-      const matches = userVal !== 0 && compareVal !== 0 && compareVal != null && Number(userVal) === Number(compareVal);
+      const matches = userVal !== 0 && compareVal != null && Number(userVal) === Number(compareVal);
       return /* @__PURE__ */ React.createElement(
         "circle",
         {
           key: `compare-dot-${i}`,
           cx,
           cy,
-          r: matches ? 8 : 7,
-          fill: matches ? "#fed12e" : "#5A9A6E",
+          r: matches ? 6 : 5,
+          fill: matches ? "#fed12e" : darkMode ? "#6DD28C" : "#5A9A6E",
           stroke: "#FFFFFF",
-          strokeWidth: 3
+          strokeWidth: 2,
+          style: { pointerEvents: "none" }
         }
       );
     }),
     spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
-      const x = centerX + radius * Math.sin(angle);
-      const y = centerY - radius * Math.cos(angle);
+      const endX = centerX + (spokeExtension[shortTitle] ? extRadius : radius) * Math.sin(angle);
+      const endY = centerY - (spokeExtension[shortTitle] ? extRadius : radius) * Math.cos(angle);
       const isUnansweredHitbox = !!unansweredSpokes[shortTitle];
       return /* @__PURE__ */ React.createElement(
         "line",
@@ -332,21 +317,92 @@ function RadarChartCore({
           key: `hitbox-${shortTitle}`,
           x1: centerX,
           y1: centerY,
-          x2: x,
-          y2: y,
+          x2: endX,
+          y2: endY,
           stroke: "transparent",
           strokeWidth: 14,
           onClick: () => isUnansweredHitbox ? onReplaceTopic(shortTitle) : onToggleInversion(shortTitle),
           style: { cursor: "pointer" }
         }
       );
-    })
+    }),
+    pointsArr.map(([cx, cy], i) => {
+      const shortTitle = spokes[i][0];
+      const userVal = spokes[i][1];
+      if (!userVal || Number(userVal) === 0) return null;
+      return /* @__PURE__ */ React.createElement(
+        "circle",
+        {
+          key: `user-sensor-${i}`,
+          cx,
+          cy,
+          r: 14,
+          fill: "transparent",
+          stroke: "none",
+          style: { cursor: "default" },
+          onMouseEnter: () => setTooltip({ x: cx, y: cy, text: getStanceText(shortTitle, userVal) }),
+          onMouseLeave: () => setTooltip(null)
+        }
+      );
+    }),
+    hasCompareData && compareCoords && compareCoords.map(([cx, cy], i) => {
+      const shortTitle = spokes[i][0];
+      const compareVal = compareData[shortTitle];
+      if (!compareVal || Number(compareVal) === 0) return null;
+      return /* @__PURE__ */ React.createElement(
+        "circle",
+        {
+          key: `compare-sensor-${i}`,
+          cx,
+          cy,
+          r: 14,
+          fill: "transparent",
+          stroke: "none",
+          style: { cursor: "default" },
+          onMouseEnter: () => setTooltip({ x: cx, y: cy, text: getStanceText(shortTitle, compareVal) }),
+          onMouseLeave: () => setTooltip(null)
+        }
+      );
+    }),
+    tooltip && (() => {
+      const tipW = 190;
+      const tipH = 70;
+      const svgW = size + sidePadding * 2;
+      const tx = tooltip.x + sidePadding + 12 > svgW - tipW ? tooltip.x - tipW - 12 : tooltip.x + 12;
+      const ty = tooltip.y - 10;
+      return /* @__PURE__ */ React.createElement(
+        "foreignObject",
+        {
+          x: tx,
+          y: ty,
+          width: tipW,
+          height: tipH,
+          style: { overflow: "visible", pointerEvents: "none" }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              background: darkMode ? "#2F3237" : "#ffffff",
+              border: darkMode ? "1px solid #59B0C4" : "1px solid #d1d5db",
+              borderRadius: 8,
+              padding: "7px 11px",
+              fontSize: 12,
+              lineHeight: 1.4,
+              color: darkMode ? "#EBEDEF" : "#111",
+              boxShadow: darkMode ? "0 2px 12px rgba(0,0,0,0.4)" : "0 2px 8px rgba(0,0,0,0.12)",
+              width: tipW + "px",
+              wordWrap: "break-word"
+            }
+          },
+          tooltip.text
+        )
+      );
+    })()
   );
 }
-function adaptiveFontSize(longestLineLen, baseFSize) {
-  return Math.max(baseFSize, 10);
-}
-function wrapLabel(label, maxChars = 12) {
+function wrapLabel(label, maxChars = 12, maxLines = 3) {
   const str = String(label);
   let rawWords;
   if (str.includes("/")) {
@@ -371,15 +427,15 @@ function wrapLabel(label, maxChars = 12) {
     }
   }
   if (line) lines.push(line);
-  if (lines.length > 2) {
-    const overflow = lines.splice(2).join(" ");
-    lines[1] = lines[1] + " " + overflow;
+  if (lines.length > maxLines) {
+    const overflow = lines.splice(maxLines).join(" ");
+    lines[maxLines - 1] = lines[maxLines - 1] + " " + overflow;
   }
   return lines;
 }
 
 // src/Header.jsx
-import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect4 } from "react";
+import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect3 } from "react";
 
 // src/tokens.js
 var colorScales = {
@@ -775,13 +831,13 @@ var breakpoints = {
 };
 
 // src/useMediaQuery.js
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 function useMediaQuery(query) {
   const [matches, setMatches] = useState2(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  useEffect3(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     const handler = (e) => setMatches(e.matches);
@@ -793,6 +849,16 @@ function useMediaQuery(query) {
 }
 
 // src/Header.jsx
+var dark = {
+  bg: "#1C1F23",
+  bgElevated: "#2F3237",
+  bgHover: "#41454E",
+  border: "#41454E",
+  link: "#59B0C4",
+  text: "#D3D7DE",
+  textMuted: "#9CA3AF",
+  shadow: "0 10px 40px rgba(0,0,0,0.4)"
+};
 function Header({
   logoSrc,
   logoAlt = "Empowered Vote",
@@ -803,6 +869,7 @@ function Header({
   currentPath,
   onNavigate,
   profileMenu,
+  darkMode = false,
   style = {}
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
@@ -810,7 +877,7 @@ function Header({
   const [profileOpen, setProfileOpen] = useState3(false);
   const isMobile = useMediaQuery("(max-width: 768px)");
   const profileRef = useRef2(null);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!profileOpen) return;
     const handleClickOutside = (e) => {
       if (profileRef.current && !profileRef.current.contains(e.target)) {
@@ -826,9 +893,16 @@ function Header({
       onNavigate(href);
     }
   };
+  const linkColor = darkMode ? dark.link : colors.evTeal;
+  const dropdownBg = darkMode ? dark.bgElevated : colors.bgWhite;
+  const dropdownShadow = darkMode ? dark.shadow : "0 10px 40px rgba(0,0,0,0.1)";
+  const hoverBg = darkMode ? dark.bgHover : colors.bgLight;
+  const borderColor = darkMode ? dark.border : colors.borderLight;
+  const mobileShadow = darkMode ? "0 4px 20px rgba(0,0,0,0.4)" : "0 4px 20px rgba(0,0,0,0.1)";
   const styles2 = {
     header: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
+      borderBottom: darkMode ? `1px solid ${dark.border}` : "none",
       position: "sticky",
       top: 0,
       zIndex: 50,
@@ -856,7 +930,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.xl,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       cursor: "pointer",
       display: "flex",
@@ -879,11 +953,12 @@ function Header({
       zIndex: 100
     },
     dropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: dropdownBg,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: dropdownShadow,
       minWidth: "200px",
-      padding: spacing[2]
+      padding: spacing[2],
+      border: darkMode ? `1px solid ${dark.border}` : "none"
     },
     dropdownItem: {
       display: "block",
@@ -891,7 +966,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer"
@@ -913,13 +988,13 @@ function Header({
       display: "inline-flex",
       alignItems: "center",
       backgroundColor: "transparent",
-      color: colors.evTeal,
+      color: linkColor,
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.base,
       padding: `${spacing[2]} ${spacing[5]}`,
       borderRadius: borderRadius.full || "999px",
-      border: `1.5px solid ${colors.evTeal}`,
+      border: `1.5px solid ${linkColor}`,
       cursor: "pointer",
       textDecoration: "none",
       lineHeight: 1.2,
@@ -935,7 +1010,7 @@ function Header({
     hamburger: {
       width: "24px",
       height: "2px",
-      backgroundColor: colors.evTeal,
+      backgroundColor: linkColor,
       position: "relative"
     },
     mobileMenu: {
@@ -945,25 +1020,26 @@ function Header({
       top: "100%",
       left: 0,
       right: 0,
-      backgroundColor: colors.bgWhite,
+      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
       padding: spacing[4],
-      boxShadow: "0 4px 20px rgba(0,0,0,0.1)"
+      boxShadow: mobileShadow,
+      borderTop: darkMode ? `1px solid ${dark.border}` : "none"
     },
     mobileNavItem: {
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.lg,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       padding: `${spacing[3]} 0`,
-      borderBottom: `1px solid ${colors.borderLight}`
+      borderBottom: `1px solid ${borderColor}`
     },
     profileButton: {
       width: "40px",
       height: "40px",
       borderRadius: borderRadius.full,
-      border: `2px solid ${colors.evTeal}`,
-      backgroundColor: colors.bgLight,
+      border: `2px solid ${linkColor}`,
+      backgroundColor: darkMode ? dark.bgElevated : colors.bgLight,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -978,11 +1054,12 @@ function Header({
       zIndex: 100
     },
     profileDropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: dropdownBg,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: dropdownShadow,
       minWidth: "160px",
-      padding: spacing[2]
+      padding: spacing[2],
+      border: darkMode ? `1px solid ${dark.border}` : "none"
     },
     profileDropdownItem: {
       display: "block",
@@ -991,7 +1068,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer",
@@ -1001,7 +1078,7 @@ function Header({
     },
     mobileDivider: {
       height: "1px",
-      backgroundColor: colors.borderLight,
+      backgroundColor: borderColor,
       margin: `${spacing[3]} 0`
     },
     profileLabel: {
@@ -1009,8 +1086,8 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.semibold,
       fontSize: fontSizes.sm,
-      color: colors.textMuted,
-      borderBottom: `1px solid ${colors.borderLight}`,
+      color: darkMode ? dark.textMuted : colors.textMuted,
+      borderBottom: `1px solid ${borderColor}`,
       marginBottom: spacing[1],
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -1051,7 +1128,7 @@ function Header({
             "path",
             {
               d: "M1 1L8 8L15 1",
-              stroke: colors.evTeal,
+              stroke: linkColor,
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -1067,7 +1144,7 @@ function Header({
           onClick: (e) => handleNavClick(e, dropdownItem.href),
           style: styles2.dropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1091,7 +1168,7 @@ function Header({
           fontFamily: fonts.primary,
           fontWeight: fontWeights.bold,
           fontSize: fontSizes["2xl"],
-          color: colors.evTeal
+          color: linkColor
         }
       },
       "empowered.vote"
@@ -1110,12 +1187,12 @@ function Header({
       style: styles2.secondaryAction,
       className: "ev-header-secondary",
       onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = colors.evTeal;
+        e.currentTarget.style.backgroundColor = linkColor;
         e.currentTarget.style.color = colors.textWhite;
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = colors.evTeal;
+        e.currentTarget.style.color = linkColor;
       }
     },
     secondaryAction.label
@@ -1149,7 +1226,7 @@ function Header({
         height: "20",
         viewBox: "0 0 24 24",
         fill: "none",
-        stroke: colors.evTeal,
+        stroke: linkColor,
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -1173,7 +1250,7 @@ function Header({
           },
           style: styles2.profileDropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1193,7 +1270,7 @@ function Header({
         },
         style: styles2.profileDropdownItem,
         onMouseEnter: (e) => {
-          e.target.style.backgroundColor = colors.bgLight;
+          e.target.style.backgroundColor = hoverBg;
         },
         onMouseLeave: (e) => {
           e.target.style.backgroundColor = "transparent";
@@ -1219,7 +1296,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ), /* @__PURE__ */ React2.createElement(
@@ -1231,7 +1308,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ))
@@ -1484,6 +1561,7 @@ function SiteHeader({
   profileMenu,
   secondaryAction,
   feedbackFeature,
+  darkMode = false,
   style = {}
 }) {
   const handleNavigate = (href) => {
@@ -1512,6 +1590,7 @@ function SiteHeader({
       currentPath,
       onNavigate: handleNavigate,
       profileMenu,
+      darkMode,
       style
     }
   );
@@ -1721,7 +1800,7 @@ function FilterSidebar({
 }
 
 // src/PoliticianCard.jsx
-import React6, { useState as useState4, useEffect as useEffect5 } from "react";
+import React6, { useState as useState4, useEffect as useEffect4 } from "react";
 function PoliticianCard({
   id,
   imageSrc,
@@ -1917,7 +1996,7 @@ function PoliticianCard({
     )
   );
   const [imgError, setImgError] = useState4(false);
-  useEffect5(() => {
+  useEffect4(() => {
     setImgError(false);
   }, [imageSrc]);
   const getInitials = (n) => {
@@ -1983,7 +2062,7 @@ function PoliticianCard({
 }
 
 // src/CompassCardHorizontal.jsx
-import React11, { useState as useState6, useEffect as useEffect6 } from "react";
+import React11, { useState as useState6, useEffect as useEffect5 } from "react";
 
 // src/PlaceholderRadar.jsx
 import React7 from "react";
@@ -2349,7 +2428,7 @@ function CompassCardHorizontal({
   const [focused, setFocused] = useState6(false);
   const [imgError, setImgError] = useState6(false);
   const [emptyCtaHovered, setEmptyCtaHovered] = useState6(false);
-  useEffect6(() => {
+  useEffect5(() => {
     setImgError(false);
   }, [politician == null ? void 0 : politician.photo_origin_url]);
   const cardStyle = {
@@ -2598,7 +2677,7 @@ function CompassCardHorizontal({
 }
 
 // src/CompassCardVertical.jsx
-import React12, { useState as useState7, useEffect as useEffect7 } from "react";
+import React12, { useState as useState7, useEffect as useEffect6 } from "react";
 var RADAR_SIZE2 = 400;
 function CompassCardVertical({
   politician,
@@ -2616,7 +2695,7 @@ function CompassCardVertical({
   const [focused, setFocused] = useState7(false);
   const [imgError, setImgError] = useState7(false);
   const [emptyCtaHovered, setEmptyCtaHovered] = useState7(false);
-  useEffect7(() => {
+  useEffect6(() => {
     setImgError(false);
   }, [politician == null ? void 0 : politician.photo_origin_url]);
   const cardStyle = {
@@ -2950,7 +3029,7 @@ function CompassCardVertical({
 }
 
 // src/CompassKey.jsx
-import React13, { useEffect as useEffect8, useState as useState8 } from "react";
+import React13, { useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/evContext.js
 var DEFAULT_BROKER_URL = "https://ev-context.empowered.vote/";
@@ -3197,7 +3276,7 @@ var evContext = {
 function CompassKey({ compact = false } = {}) {
   const [dismissed, setDismissed] = useState8(false);
   const [loaded, setLoaded] = useState8(false);
-  useEffect8(() => {
+  useEffect7(() => {
     let cancelled = false;
     evContext.get().then((shared) => {
       if (cancelled) return;
@@ -3858,7 +3937,8 @@ function CommitteeTable({
   committees = [],
   title = "Committee Memberships",
   maxVisible = 6,
-  style = {}
+  style = {},
+  darkMode = false
 }) {
   const [showAll, setShowAll] = useState11(false);
   if (committees.length === 0) {
@@ -3878,7 +3958,7 @@ function CommitteeTable({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.semibold,
       fontSize: "18px",
-      color: "#101828",
+      color: darkMode ? "#f3f4f6" : "#101828",
       margin: 0,
       marginBottom: spacing[3]
     },
@@ -3887,7 +3967,7 @@ function CommitteeTable({
       borderCollapse: "collapse"
     },
     row: {
-      borderBottom: "1px solid #F3F4F6"
+      borderBottom: `1px solid ${darkMode ? "#374151" : "#F3F4F6"}`
     },
     cell: {
       padding: `${spacing[2]} 0`,
@@ -3896,16 +3976,16 @@ function CommitteeTable({
       verticalAlign: "top"
     },
     nameCell: {
-      color: "#364153",
+      color: darkMode ? "#d1d5db" : "#364153",
       paddingRight: spacing[4]
     },
     positionCell: {
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       textAlign: "right",
       whiteSpace: "nowrap"
     },
     link: {
-      color: "#364153",
+      color: darkMode ? "#d1d5db" : "#364153",
       textDecoration: "none"
     },
     toggle: {
@@ -3915,7 +3995,7 @@ function CommitteeTable({
       fontFamily: fonts.primary,
       fontSize: "14px",
       fontWeight: fontWeights.medium,
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       background: "none",
       border: "none",
       padding: `${spacing[2]} 0`,
@@ -3964,7 +4044,7 @@ function CommitteeTable({
 }
 
 // src/PoliticianProfile.jsx
-import React22, { useState as useState12, useEffect as useEffect9 } from "react";
+import React22, { useState as useState12, useEffect as useEffect8 } from "react";
 
 // src/LegislativeInlineSummary.jsx
 import React20 from "react";
@@ -4249,12 +4329,10 @@ function stripRetain(s) {
   return (s || "").replace(/\s*\(Retain\s+.+?\?\)/, "");
 }
 function qualifyLocalTitle(baseTitle, pol) {
-  if (!baseTitle) return baseTitle;
+  if (!pol.government_name || !baseTitle) return baseTitle;
   const dt = pol.district_type || "";
   if (!dt.startsWith("LOCAL") && dt !== "COUNTY") return baseTitle;
-  const govRaw = pol.government_name || pol.representing_city || "";
-  if (!govRaw) return baseTitle;
-  const gov = govRaw.split(",")[0].trim();
+  const gov = pol.government_name.split(",")[0].trim();
   const govCore = gov.replace(/^City of\s+/i, "").replace(/\s+County$/i, "").trim();
   if (govCore && baseTitle.toLowerCase().includes(govCore.toLowerCase())) return baseTitle;
   let prefix = dt === "COUNTY" ? gov : gov.replace(/^City of\s+/i, "");
@@ -4421,7 +4499,7 @@ function PoliticianProfile({
   })();
   const initials = [pol.first_name, pol.last_name].filter(Boolean).map((n) => n[0]).join("");
   const [imgError, setImgError] = useState12(false);
-  useEffect9(() => {
+  useEffect8(() => {
     setImgError(false);
   }, [profileImageUrl]);
   const getSocialHandle = (type) => {
@@ -4813,7 +4891,7 @@ function PoliticianProfile({
       darkMode,
       style: { marginTop: allWebsites.length > 0 ? "8px" : 0 }
     }
-  )))), committees.length > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", { style: divider }), /* @__PURE__ */ React22.createElement(CommitteeTable, { committees })), pol.is_judicial ? /* @__PURE__ */ React22.createElement(
+  )))), committees.length > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", { style: divider }), /* @__PURE__ */ React22.createElement(CommitteeTable, { committees, darkMode })), pol.is_judicial ? /* @__PURE__ */ React22.createElement(
     JudicialScorecard,
     {
       judicialRecord,
@@ -5941,7 +6019,7 @@ function computeTierCoverage(topics) {
 }
 
 // src/useEvContextPromotion.js
-import { useEffect as useEffect10, useState as useState16, useCallback, useRef as useRef3 } from "react";
+import { useEffect as useEffect9, useState as useState16, useCallback, useRef as useRef3 } from "react";
 function useEvContextPromotion({
   domain,
   isLoggedIn,
@@ -6005,10 +6083,10 @@ function useEvContextPromotion({
       setPayload(null);
     }
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     detect();
   }, [detect, isLoggedIn, userId, apiData, enabled, domain]);
-  useEffect10(() => {
+  useEffect9(() => {
     const unsub = evContext.subscribe(() => {
       detect();
     });
@@ -6100,7 +6178,7 @@ function isGuestPopulated(domain, fullEvContext) {
 }
 
 // src/StanceAccordion.jsx
-import React30, { useState as useState17, useRef as useRef4, useCallback as useCallback2, useEffect as useEffect11 } from "react";
+import React30, { useState as useState17, useRef as useRef4, useCallback as useCallback2, useEffect as useEffect10 } from "react";
 
 // src/Favicon.jsx
 import React29 from "react";
@@ -6241,7 +6319,7 @@ function StanceAccordion({
     },
     [expandedTopicId, politicianId, apiUrl]
   );
-  useEffect11(() => {
+  useEffect10(() => {
     if (initialExpandedTopicId && topics && topics.length > 0) {
       handleToggle(String(initialExpandedTopicId));
     }