@empoweredvote/ev-ui 0.8.11 → 0.8.13

package/dist/index.mjs

@@ -1,6 +1,34 @@
 // src/RadarChartCore.jsx
-import React, { useState, useRef, useEffect } from "react";
+import React 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,
@@ -12,95 +40,83 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
-  labelFontSize = 13,
+  labelFontSize = 18,
   padding = 80,
-  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
+  labelOffset = 20,
+  tightFit = false
 }) {
-  var _a;
+  const { isDark } = useTheme();
   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;
-  useEffect(() => {
+  useEffect2(() => {
     prevCountRef.current = numSpokes;
   }, [numSpokes]);
-  function calcAdjusted(value, shortTitle) {
-    var _a2;
-    if (!value || Number(value) === 0) return 0;
-    const topic = topics.find((t) => t.short_title === shortTitle);
-    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;
+    var _a;
+    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;
-    return [centerX + r * Math.sin(angle), centerY - r * Math.cos(angle)];
+    const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? 11 - pct : pct;
+    const r = adjusted / 10 * radius;
+    const x = centerX + r * Math.sin(angle);
+    const y = centerY - r * Math.cos(angle);
+    return [x, y];
   });
   const targetPoints = pointsArr.map((p) => p.join(",")).join(" ");
-  const springBase = {
+  const spring = useSpring({
     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 _a2;
-      const value = (_a2 = compareData[shortTitle]) != null ? _a2 : 0;
-      const adjusted = calcAdjusted(value, shortTitle);
-      const r = adjusted / 10 * radius;
+      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;
-      return [centerX + r * Math.sin(angle), centerY - r * Math.cos(angle)];
+      const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? 11 - pct : pct;
+      const r = adjusted / 10 * radius;
+      const x = centerX + r * Math.sin(angle);
+      const y = centerY - r * Math.cos(angle);
+      return [x, y];
     });
     compareCoords = ccoords;
     comparePoints = ccoords.map((p) => p.join(",")).join(" ");
   }
   const hadCompareDataRef = useRef(false);
   const compareJustAppeared = hasCompareData && !hadCompareDataRef.current;
-  useEffect(() => {
+  useEffect2(() => {
     hadCompareDataRef.current = hasCompareData;
   }, [hasCompareData]);
-  const compareSpringBase = {
+  const compareSpring = useSpring({
     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((m, ln) => ln.length > m ? ln.length : m, 0);
-    const estimatedWidth = longestLineLen * labelFontSize * 0.55;
+    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 sinA = Math.sin(angle);
     const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
     return { estimatedWidth, side };
@@ -109,9 +125,23 @@ function RadarChartCore({
   const rightLabelWidths = labelMeta.filter((m) => m.side === "right").map((m) => m.estimatedWidth);
   const minPadding = 40;
   const maxPadding = padding * 2;
-  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 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 verticalPadding = padding;
   let tightTop = -verticalPadding;
   let tightHeight = size + verticalPadding * 2;
@@ -119,12 +149,11 @@ function RadarChartCore({
     let yMin = Infinity, yMax = -Infinity;
     for (let i = 0; i < numSpokes; i++) {
       const angle = 2 * Math.PI * i / numSpokes;
-      const effectiveR = spokeExtension[(_a = spokes[i]) == null ? void 0 : _a[0]] ? extRadius : radius;
-      const y = centerY - effectiveR * Math.cos(angle);
+      const y = centerY - radius * Math.cos(angle);
       if (y < yMin) yMin = y;
       if (y > yMax) yMax = y;
     }
-    const labelMargin = labelOffset + labelFontSize * 2.5;
+    const labelMargin = labelOffset + labelFontSize * 1.4 + labelFontSize * 1.1;
     tightTop = yMin - labelMargin;
     tightHeight = yMax + labelMargin - tightTop;
   }
@@ -134,93 +163,75 @@ function RadarChartCore({
     const ring = [];
     for (let i = 0; i < numSpokes; i++) {
       const angle = 2 * Math.PI * i / numSpokes;
-      ring.push(`${centerX + radius * scale * Math.sin(angle)},${centerY - radius * scale * Math.cos(angle)}`);
+      const x = centerX + radius * scale * Math.sin(angle);
+      const y = centerY - radius * scale * Math.cos(angle);
+      ring.push(`${x},${y}`);
     }
     guidePolygons.push(
-      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: ringColor != null ? ringColor : darkMode ? "#555" : "#ccc" })
+      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: isDark ? "#374151" : "#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: `-${sidePadding} ${tightTop} ${size + sidePadding * 2} ${tightHeight}`,
-      preserveAspectRatio: "xMidYMid meet",
-      onMouseLeave: () => setTooltip(null)
+      viewBox: `-${leftPadding} ${tightTop} ${size + leftPadding + rightPadding} ${tightHeight}`,
+      preserveAspectRatio: "xMidYMid meet"
     },
     guidePolygons,
     spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
-      const endX = centerX + radius * Math.sin(angle);
-      const endY = centerY - radius * Math.cos(angle);
+      const x = centerX + radius * Math.sin(angle);
+      const y = centerY - radius * Math.cos(angle);
       const isUnanswered = !!unansweredSpokes[shortTitle];
-      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(
+      return /* @__PURE__ */ React.createElement(
         "line",
         {
+          key: `line-${shortTitle}`,
           x1: centerX,
           y1: centerY,
-          x2: endX,
-          y2: endY,
-          stroke: isUnanswered ? "#9ca3af" : lineColor != null ? lineColor : darkMode ? "#bbb" : "#888",
+          x2: x,
+          y2: y,
+          stroke: isUnanswered ? isDark ? "#6b7280" : "#9ca3af" : isDark ? "#d1d5db" : "black",
           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 isBottom = cosA < -0.5;
       const isTop = cosA > 0.5;
+      const isBottom = cosA < -0.5;
+      const baseFSize = labelFontSize;
       const lines = wrapLabel(shortTitle, 12);
-      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 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 labelX = centerX + offset2 * Math.sin(angle);
       let labelY = centerY - offset2 * Math.cos(angle);
-      if (isTop && lines.length > 1) labelY -= (lines.length - 1) * lineHeight;
-      const isActive = shortTitle === activeSpoke;
+      if (isTop && lines.length > 1) {
+        labelY -= (lines.length - 1) * lineHeight;
+      }
       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: "middle",
+          textAnchor: anchor,
           dominantBaseline: isBottom ? "hanging" : "auto",
           onClick: () => onReplaceTopic(shortTitle),
-          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" }
+          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 }
         },
         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))
@@ -231,14 +242,22 @@ 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) => {
@@ -256,8 +275,7 @@ function RadarChartCore({
           r: matches ? 8 : 7,
           fill: matches ? "#fed12e" : "#7C6B9E",
           stroke: "#FFFFFF",
-          strokeWidth: 3,
-          style: { pointerEvents: "none" }
+          strokeWidth: 3
         }
       );
     }),
@@ -267,10 +285,9 @@ function RadarChartCore({
         key: "compare-static",
         points: comparePoints,
         style: {
-          fill: darkMode ? "rgba(110, 210, 140, 0.55)" : "rgba(90, 154, 110, 0.45)",
-          stroke: darkMode ? "#6DD28C" : "#5A9A6E",
-          strokeWidth: 2,
-          mixBlendMode: darkMode ? "normal" : "multiply"
+          fill: "rgba(90, 154, 110, 0.3)",
+          stroke: "#5A9A6E",
+          strokeWidth: 2
         }
       }
     ) : /* @__PURE__ */ React.createElement(
@@ -279,10 +296,9 @@ function RadarChartCore({
         key: "compare-animated",
         points: compareSpring.points,
         style: {
-          fill: darkMode ? "rgba(110, 210, 140, 0.55)" : "rgba(90, 154, 110, 0.45)",
-          stroke: darkMode ? "#6DD28C" : "#5A9A6E",
-          strokeWidth: 2,
-          mixBlendMode: darkMode ? "normal" : "multiply"
+          fill: "rgba(90, 154, 110, 0.3)",
+          stroke: "#5A9A6E",
+          strokeWidth: 2
         }
       }
     ) : null,
@@ -291,7 +307,7 @@ function RadarChartCore({
       const userVal = spokes[i][1];
       const compareVal = compareData[shortTitle];
       if (!compareVal || Number(compareVal) === 0) return null;
-      const matches = userVal !== 0 && compareVal != null && Number(userVal) === Number(compareVal);
+      const matches = userVal !== 0 && compareVal !== 0 && compareVal != null && Number(userVal) === Number(compareVal);
       return /* @__PURE__ */ React.createElement(
         "circle",
         {
@@ -299,17 +315,16 @@ function RadarChartCore({
           cx,
           cy,
           r: matches ? 8 : 7,
-          fill: matches ? "#fed12e" : darkMode ? "#6DD28C" : "#5A9A6E",
+          fill: matches ? "#fed12e" : "#5A9A6E",
           stroke: "#FFFFFF",
-          strokeWidth: 3,
-          style: { pointerEvents: "none" }
+          strokeWidth: 3
         }
       );
     }),
     spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
-      const endX = centerX + (spokeExtension[shortTitle] ? extRadius : radius) * Math.sin(angle);
-      const endY = centerY - (spokeExtension[shortTitle] ? extRadius : radius) * Math.cos(angle);
+      const x = centerX + radius * Math.sin(angle);
+      const y = centerY - radius * Math.cos(angle);
       const isUnansweredHitbox = !!unansweredSpokes[shortTitle];
       return /* @__PURE__ */ React.createElement(
         "line",
@@ -317,91 +332,20 @@ function RadarChartCore({
           key: `hitbox-${shortTitle}`,
           x1: centerX,
           y1: centerY,
-          x2: endX,
-          y2: endY,
+          x2: x,
+          y2: y,
           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) {
   const str = String(label);
   let rawWords;
@@ -435,7 +379,7 @@ function wrapLabel(label, maxChars = 12) {
 }
 
 // src/Header.jsx
-import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect3 } from "react";
+import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect4 } from "react";
 
 // src/tokens.js
 var colorScales = {
@@ -831,13 +775,13 @@ var breakpoints = {
 };
 
 // src/useMediaQuery.js
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect3 } from "react";
 function useMediaQuery(query) {
   const [matches, setMatches] = useState2(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     const handler = (e) => setMatches(e.matches);
@@ -849,16 +793,6 @@ 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",
@@ -869,7 +803,6 @@ function Header({
   currentPath,
   onNavigate,
   profileMenu,
-  darkMode = false,
   style = {}
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
@@ -877,7 +810,7 @@ function Header({
   const [profileOpen, setProfileOpen] = useState3(false);
   const isMobile = useMediaQuery("(max-width: 768px)");
   const profileRef = useRef2(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!profileOpen) return;
     const handleClickOutside = (e) => {
       if (profileRef.current && !profileRef.current.contains(e.target)) {
@@ -893,16 +826,9 @@ 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: darkMode ? dark.bg : colors.bgWhite,
-      borderBottom: darkMode ? `1px solid ${dark.border}` : "none",
+      backgroundColor: colors.bgWhite,
       position: "sticky",
       top: 0,
       zIndex: 50,
@@ -930,7 +856,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.xl,
-      color: linkColor,
+      color: colors.evTeal,
       textDecoration: "none",
       cursor: "pointer",
       display: "flex",
@@ -953,12 +879,11 @@ function Header({
       zIndex: 100
     },
     dropdownInner: {
-      backgroundColor: dropdownBg,
+      backgroundColor: colors.bgWhite,
       borderRadius: borderRadius.lg,
-      boxShadow: dropdownShadow,
+      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
       minWidth: "200px",
-      padding: spacing[2],
-      border: darkMode ? `1px solid ${dark.border}` : "none"
+      padding: spacing[2]
     },
     dropdownItem: {
       display: "block",
@@ -966,7 +891,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: linkColor,
+      color: colors.evTeal,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer"
@@ -988,13 +913,13 @@ function Header({
       display: "inline-flex",
       alignItems: "center",
       backgroundColor: "transparent",
-      color: linkColor,
+      color: colors.evTeal,
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.base,
       padding: `${spacing[2]} ${spacing[5]}`,
       borderRadius: borderRadius.full || "999px",
-      border: `1.5px solid ${linkColor}`,
+      border: `1.5px solid ${colors.evTeal}`,
       cursor: "pointer",
       textDecoration: "none",
       lineHeight: 1.2,
@@ -1010,7 +935,7 @@ function Header({
     hamburger: {
       width: "24px",
       height: "2px",
-      backgroundColor: linkColor,
+      backgroundColor: colors.evTeal,
       position: "relative"
     },
     mobileMenu: {
@@ -1020,26 +945,25 @@ function Header({
       top: "100%",
       left: 0,
       right: 0,
-      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
+      backgroundColor: colors.bgWhite,
       padding: spacing[4],
-      boxShadow: mobileShadow,
-      borderTop: darkMode ? `1px solid ${dark.border}` : "none"
+      boxShadow: "0 4px 20px rgba(0,0,0,0.1)"
     },
     mobileNavItem: {
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.lg,
-      color: linkColor,
+      color: colors.evTeal,
       textDecoration: "none",
       padding: `${spacing[3]} 0`,
-      borderBottom: `1px solid ${borderColor}`
+      borderBottom: `1px solid ${colors.borderLight}`
     },
     profileButton: {
       width: "40px",
       height: "40px",
       borderRadius: borderRadius.full,
-      border: `2px solid ${linkColor}`,
-      backgroundColor: darkMode ? dark.bgElevated : colors.bgLight,
+      border: `2px solid ${colors.evTeal}`,
+      backgroundColor: colors.bgLight,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -1054,12 +978,11 @@ function Header({
       zIndex: 100
     },
     profileDropdownInner: {
-      backgroundColor: dropdownBg,
+      backgroundColor: colors.bgWhite,
       borderRadius: borderRadius.lg,
-      boxShadow: dropdownShadow,
+      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
       minWidth: "160px",
-      padding: spacing[2],
-      border: darkMode ? `1px solid ${dark.border}` : "none"
+      padding: spacing[2]
     },
     profileDropdownItem: {
       display: "block",
@@ -1068,7 +991,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: linkColor,
+      color: colors.evTeal,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer",
@@ -1078,7 +1001,7 @@ function Header({
     },
     mobileDivider: {
       height: "1px",
-      backgroundColor: borderColor,
+      backgroundColor: colors.borderLight,
       margin: `${spacing[3]} 0`
     },
     profileLabel: {
@@ -1086,8 +1009,8 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.semibold,
       fontSize: fontSizes.sm,
-      color: darkMode ? dark.textMuted : colors.textMuted,
-      borderBottom: `1px solid ${borderColor}`,
+      color: colors.textMuted,
+      borderBottom: `1px solid ${colors.borderLight}`,
       marginBottom: spacing[1],
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -1128,7 +1051,7 @@ function Header({
             "path",
             {
               d: "M1 1L8 8L15 1",
-              stroke: linkColor,
+              stroke: colors.evTeal,
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -1144,7 +1067,7 @@ function Header({
           onClick: (e) => handleNavClick(e, dropdownItem.href),
           style: styles2.dropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = hoverBg;
+            e.target.style.backgroundColor = colors.bgLight;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1168,7 +1091,7 @@ function Header({
           fontFamily: fonts.primary,
           fontWeight: fontWeights.bold,
           fontSize: fontSizes["2xl"],
-          color: linkColor
+          color: colors.evTeal
         }
       },
       "empowered.vote"
@@ -1187,12 +1110,12 @@ function Header({
       style: styles2.secondaryAction,
       className: "ev-header-secondary",
       onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = linkColor;
+        e.currentTarget.style.backgroundColor = colors.evTeal;
         e.currentTarget.style.color = colors.textWhite;
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = linkColor;
+        e.currentTarget.style.color = colors.evTeal;
       }
     },
     secondaryAction.label
@@ -1226,7 +1149,7 @@ function Header({
         height: "20",
         viewBox: "0 0 24 24",
         fill: "none",
-        stroke: linkColor,
+        stroke: colors.evTeal,
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -1250,7 +1173,7 @@ function Header({
           },
           style: styles2.profileDropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = hoverBg;
+            e.target.style.backgroundColor = colors.bgLight;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1270,7 +1193,7 @@ function Header({
         },
         style: styles2.profileDropdownItem,
         onMouseEnter: (e) => {
-          e.target.style.backgroundColor = hoverBg;
+          e.target.style.backgroundColor = colors.bgLight;
         },
         onMouseLeave: (e) => {
           e.target.style.backgroundColor = "transparent";
@@ -1296,7 +1219,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: linkColor
+          backgroundColor: colors.evTeal
         }
       }
     ), /* @__PURE__ */ React2.createElement(
@@ -1308,7 +1231,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: linkColor
+          backgroundColor: colors.evTeal
         }
       }
     ))
@@ -1561,7 +1484,6 @@ function SiteHeader({
   profileMenu,
   secondaryAction,
   feedbackFeature,
-  darkMode = false,
   style = {}
 }) {
   const handleNavigate = (href) => {
@@ -1590,7 +1512,6 @@ function SiteHeader({
       currentPath,
       onNavigate: handleNavigate,
       profileMenu,
-      darkMode,
       style
     }
   );
@@ -1800,7 +1721,7 @@ function FilterSidebar({
 }
 
 // src/PoliticianCard.jsx
-import React6, { useState as useState4, useEffect as useEffect4 } from "react";
+import React6, { useState as useState4, useEffect as useEffect5 } from "react";
 function PoliticianCard({
   id,
   imageSrc,
@@ -1996,7 +1917,7 @@ function PoliticianCard({
     )
   );
   const [imgError, setImgError] = useState4(false);
-  useEffect4(() => {
+  useEffect5(() => {
     setImgError(false);
   }, [imageSrc]);
   const getInitials = (n) => {
@@ -2062,7 +1983,7 @@ function PoliticianCard({
 }
 
 // src/CompassCardHorizontal.jsx
-import React11, { useState as useState6, useEffect as useEffect5 } from "react";
+import React11, { useState as useState6, useEffect as useEffect6 } from "react";
 
 // src/PlaceholderRadar.jsx
 import React7 from "react";
@@ -2428,7 +2349,7 @@ function CompassCardHorizontal({
   const [focused, setFocused] = useState6(false);
   const [imgError, setImgError] = useState6(false);
   const [emptyCtaHovered, setEmptyCtaHovered] = useState6(false);
-  useEffect5(() => {
+  useEffect6(() => {
     setImgError(false);
   }, [politician == null ? void 0 : politician.photo_origin_url]);
   const cardStyle = {
@@ -2677,7 +2598,7 @@ function CompassCardHorizontal({
 }
 
 // src/CompassCardVertical.jsx
-import React12, { useState as useState7, useEffect as useEffect6 } from "react";
+import React12, { useState as useState7, useEffect as useEffect7 } from "react";
 var RADAR_SIZE2 = 400;
 function CompassCardVertical({
   politician,
@@ -2695,7 +2616,7 @@ function CompassCardVertical({
   const [focused, setFocused] = useState7(false);
   const [imgError, setImgError] = useState7(false);
   const [emptyCtaHovered, setEmptyCtaHovered] = useState7(false);
-  useEffect6(() => {
+  useEffect7(() => {
     setImgError(false);
   }, [politician == null ? void 0 : politician.photo_origin_url]);
   const cardStyle = {
@@ -3029,7 +2950,7 @@ function CompassCardVertical({
 }
 
 // src/CompassKey.jsx
-import React13, { useEffect as useEffect7, useState as useState8 } from "react";
+import React13, { useEffect as useEffect8, useState as useState8 } from "react";
 
 // src/evContext.js
 var DEFAULT_BROKER_URL = "https://ev-context.empowered.vote/";
@@ -3276,7 +3197,7 @@ var evContext = {
 function CompassKey({ compact = false } = {}) {
   const [dismissed, setDismissed] = useState8(false);
   const [loaded, setLoaded] = useState8(false);
-  useEffect7(() => {
+  useEffect8(() => {
     let cancelled = false;
     evContext.get().then((shared) => {
       if (cancelled) return;
@@ -4043,7 +3964,7 @@ function CommitteeTable({
 }
 
 // src/PoliticianProfile.jsx
-import React22, { useState as useState12, useEffect as useEffect8 } from "react";
+import React22, { useState as useState12, useEffect as useEffect9 } from "react";
 
 // src/LegislativeInlineSummary.jsx
 import React20 from "react";
@@ -4328,10 +4249,12 @@ function stripRetain(s) {
   return (s || "").replace(/\s*\(Retain\s+.+?\?\)/, "");
 }
 function qualifyLocalTitle(baseTitle, pol) {
-  if (!pol.government_name || !baseTitle) return baseTitle;
+  if (!baseTitle) return baseTitle;
   const dt = pol.district_type || "";
   if (!dt.startsWith("LOCAL") && dt !== "COUNTY") return baseTitle;
-  const gov = pol.government_name.split(",")[0].trim();
+  const govRaw = pol.government_name || pol.representing_city || "";
+  if (!govRaw) return baseTitle;
+  const gov = govRaw.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, "");
@@ -4498,7 +4421,7 @@ function PoliticianProfile({
   })();
   const initials = [pol.first_name, pol.last_name].filter(Boolean).map((n) => n[0]).join("");
   const [imgError, setImgError] = useState12(false);
-  useEffect8(() => {
+  useEffect9(() => {
     setImgError(false);
   }, [profileImageUrl]);
   const getSocialHandle = (type) => {
@@ -6018,7 +5941,7 @@ function computeTierCoverage(topics) {
 }
 
 // src/useEvContextPromotion.js
-import { useEffect as useEffect9, useState as useState16, useCallback, useRef as useRef3 } from "react";
+import { useEffect as useEffect10, useState as useState16, useCallback, useRef as useRef3 } from "react";
 function useEvContextPromotion({
   domain,
   isLoggedIn,
@@ -6082,10 +6005,10 @@ function useEvContextPromotion({
       setPayload(null);
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     detect();
   }, [detect, isLoggedIn, userId, apiData, enabled, domain]);
-  useEffect9(() => {
+  useEffect10(() => {
     const unsub = evContext.subscribe(() => {
       detect();
     });
@@ -6177,7 +6100,7 @@ function isGuestPopulated(domain, fullEvContext) {
 }
 
 // src/StanceAccordion.jsx
-import React30, { useState as useState17, useRef as useRef4, useCallback as useCallback2, useEffect as useEffect10 } from "react";
+import React30, { useState as useState17, useRef as useRef4, useCallback as useCallback2, useEffect as useEffect11 } from "react";
 
 // src/Favicon.jsx
 import React29 from "react";
@@ -6318,7 +6241,7 @@ function StanceAccordion({
     },
     [expandedTopicId, politicianId, apiUrl]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (initialExpandedTopicId && topics && topics.length > 0) {
       handleToggle(String(initialExpandedTopicId));
     }