@empoweredvote/ev-ui 0.7.1 → 0.8.1

package/dist/index.mjs

@@ -1,7 +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 } from "react";
 function RadarChartCore({
   topics,
   data,
@@ -13,14 +12,17 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
-  labelFontSize = 18,
   padding = 80,
-  labelOffset = 20,
-  tightFit = false
+  tightFit = false,
+  activeSpoke = null,
+  writeIns = {}
 }) {
+  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);
@@ -28,42 +30,40 @@ function RadarChartCore({
   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(" ");
@@ -73,61 +73,33 @@ function RadarChartCore({
   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 }
-  });
-  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 sinA = Math.sin(angle);
-    const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
-    return { estimatedWidth, side };
-  });
-  const leftLabelWidths = labelMeta.filter((m) => m.side === "left").map((m) => m.estimatedWidth);
-  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 verticalPadding = padding;
-  let tightTop = -verticalPadding;
-  let tightHeight = size + verticalPadding * 2;
+  };
+  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 sidePadding = 20;
+  let tightTop = -sidePadding;
+  let tightHeight = size + sidePadding * 2;
   if (tightFit && numSpokes > 0) {
     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;
-    tightTop = yMin - labelMargin;
-    tightHeight = yMax + labelMargin - tightTop;
+    tightTop = yMin - sidePadding;
+    tightHeight = yMax + sidePadding - tightTop;
   }
   const guidePolygons = [];
   for (let level = 1; level <= 5; level++) {
@@ -135,101 +107,76 @@ 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: "#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 ? "#9ca3af" : "black",
+          x2: endX,
+          y2: endY,
+          stroke: isUnanswered ? "#9ca3af" : "#aaa",
           strokeDasharray: isUnanswered ? "4 3" : void 0,
           opacity: isUnanswered ? 0.6 : 1
         }
-      );
-    }),
-    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 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 labelX = centerX + offset2 * Math.sin(angle);
-      let labelY = centerY - offset2 * Math.cos(angle);
-      if (isTop && lines.length > 1) {
-        labelY -= (lines.length - 1) * lineHeight;
-      }
-      const isUnansweredLabel = !!unansweredSpokes[shortTitle];
-      return /* @__PURE__ */ React.createElement(
-        "text",
+      ), needsExt && /* @__PURE__ */ React.createElement(
+        "line",
         {
-          key: `label-${shortTitle}`,
-          x: labelX,
-          y: labelY,
-          textAnchor: anchor,
-          dominantBaseline: isBottom ? "hanging" : "auto",
-          onClick: () => onReplaceTopic(shortTitle),
-          className: "text-xl font-medium mb-1 md:text-base md:font-normal",
-          fill: isUnansweredLabel ? "#9ca3af" : 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))
-      );
+          x1: endX,
+          y1: endY,
+          x2: extX,
+          y2: extY,
+          stroke: "#aaa",
+          strokeDasharray: "4 4",
+          opacity: 0.4
+        }
+      ));
     }),
     countChanged ? /* @__PURE__ */ React.createElement(
       "polygon",
       {
         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) => {
@@ -247,7 +194,10 @@ function RadarChartCore({
           r: matches ? 8 : 7,
           fill: matches ? "#fed12e" : "#7C6B9E",
           stroke: "#FFFFFF",
-          strokeWidth: 3
+          strokeWidth: 3,
+          style: { cursor: "default" },
+          onMouseEnter: () => setTooltip({ x: cx, y: cy, text: getStanceText(shortTitle, userVal) }),
+          onMouseLeave: () => setTooltip(null)
         }
       );
     }),
@@ -256,22 +206,14 @@ function RadarChartCore({
       {
         key: "compare-static",
         points: comparePoints,
-        style: {
-          fill: "rgba(90, 154, 110, 0.3)",
-          stroke: "#5A9A6E",
-          strokeWidth: 2
-        }
+        style: { fill: "rgba(90, 154, 110, 0.3)", stroke: "#5A9A6E", strokeWidth: 2 }
       }
     ) : /* @__PURE__ */ React.createElement(
       animated.polygon,
       {
         key: "compare-animated",
         points: compareSpring.points,
-        style: {
-          fill: "rgba(90, 154, 110, 0.3)",
-          stroke: "#5A9A6E",
-          strokeWidth: 2
-        }
+        style: { fill: "rgba(90, 154, 110, 0.3)", stroke: "#5A9A6E", strokeWidth: 2 }
       }
     ) : null,
     hasCompareData && compareCoords && compareCoords.map(([cx, cy], i) => {
@@ -279,7 +221,7 @@ 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",
         {
@@ -289,14 +231,17 @@ function RadarChartCore({
           r: matches ? 8 : 7,
           fill: matches ? "#fed12e" : "#5A9A6E",
           stroke: "#FFFFFF",
-          strokeWidth: 3
+          strokeWidth: 3,
+          style: { cursor: "default" },
+          onMouseEnter: () => setTooltip({ x: cx, y: cy, text: getStanceText(shortTitle, compareVal) }),
+          onMouseLeave: () => setTooltip(null)
         }
       );
     }),
     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",
@@ -304,54 +249,56 @@ 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" }
         }
       );
-    })
+    }),
+    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: "white",
+              border: "1px solid #d1d5db",
+              borderRadius: 6,
+              padding: "6px 10px",
+              fontSize: 11,
+              lineHeight: 1.4,
+              color: "#111",
+              boxShadow: "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;
-  if (str.includes("/")) {
-    rawWords = str.split("/").reduce((acc, segment, idx, arr) => {
-      const part = idx < arr.length - 1 ? segment + "/" : segment;
-      if (part.trim()) acc.push(part.trim());
-      return acc;
-    }, []);
-  } else {
-    rawWords = str.split(/\s+/);
-  }
-  const lines = [];
-  let line = "";
-  for (const word of rawWords) {
-    if (line === "") {
-      line = word;
-    } else if ((line + " " + word).length <= maxChars) {
-      line += " " + word;
-    } else {
-      lines.push(line);
-      line = word;
-    }
-  }
-  if (line) lines.push(line);
-  if (lines.length > 2) {
-    const overflow = lines.splice(2).join(" ");
-    lines[1] = lines[1] + " " + overflow;
-  }
-  return lines;
-}
 
 // src/Header.jsx
-import React2, { useState as useState2, useRef as useRef2, useEffect as useEffect3 } from "react";
+import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect3 } from "react";
 
 // src/tokens.js
 var colorScales = {
@@ -747,9 +694,9 @@ var breakpoints = {
 };
 
 // src/useMediaQuery.js
-import { useState, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 function useMediaQuery(query) {
-  const [matches, setMatches] = useState(() => {
+  const [matches, setMatches] = useState2(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
@@ -768,6 +715,7 @@ function useMediaQuery(query) {
 function Header({
   logoSrc,
   logoAlt = "Empowered Vote",
+  logoHref = "https://login.empowered.vote/profile",
   navItems = [],
   ctaButton,
   secondaryAction,
@@ -776,9 +724,9 @@ function Header({
   profileMenu,
   style = {}
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
-  const [openDropdown, setOpenDropdown] = useState2(null);
-  const [profileOpen, setProfileOpen] = useState2(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const [openDropdown, setOpenDropdown] = useState3(null);
+  const [profileOpen, setProfileOpen] = useState3(false);
   const isMobile = useMediaQuery("(max-width: 768px)");
   const profileRef = useRef2(null);
   useEffect3(() => {
@@ -1051,8 +999,8 @@ function Header({
   return /* @__PURE__ */ React2.createElement("header", { style: styles2.header }, /* @__PURE__ */ React2.createElement("div", { style: styles2.container }, /* @__PURE__ */ React2.createElement(
     "a",
     {
-      href: "/",
-      onClick: (e) => handleNavClick(e, "/"),
+      href: logoHref,
+      onClick: (e) => handleNavClick(e, logoHref),
       style: { display: "flex", alignItems: "center" }
     },
     logoSrc ? /* @__PURE__ */ React2.createElement("img", { src: logoSrc, alt: logoAlt, style: styles2.logo }) : /* @__PURE__ */ React2.createElement(
@@ -1692,7 +1640,7 @@ function FilterSidebar({
 }
 
 // src/PoliticianCard.jsx
-import React6, { useState as useState3, useEffect as useEffect4 } from "react";
+import React6, { useState as useState4, useEffect as useEffect4 } from "react";
 function PoliticianCard({
   id,
   imageSrc,
@@ -1887,7 +1835,7 @@ function PoliticianCard({
       }
     )
   );
-  const [imgError, setImgError] = useState3(false);
+  const [imgError, setImgError] = useState4(false);
   useEffect4(() => {
     setImgError(false);
   }, [imageSrc]);
@@ -1954,7 +1902,7 @@ function PoliticianCard({
 }
 
 // src/CompassCardHorizontal.jsx
-import React11, { useState as useState5, useEffect as useEffect5 } from "react";
+import React11, { useState as useState6, useEffect as useEffect5 } from "react";
 
 // src/PlaceholderRadar.jsx
 import React7 from "react";
@@ -2037,7 +1985,7 @@ function PlaceholderRadar({ size = 250, name = "" }) {
 import React10 from "react";
 
 // src/IconOverlay.jsx
-import React9, { useState as useState4 } from "react";
+import React9, { useState as useState5 } from "react";
 import {
   useFloating,
   useHover,
@@ -2126,7 +2074,7 @@ function BranchIcon({ size = 16, color = "currentColor", branch }) {
 
 // src/IconOverlay.jsx
 function IconWithTooltip({ IconComponent, color, tooltip, size = 14, extraProps = {}, onClick }) {
-  const [isOpen, setIsOpen] = useState4(false);
+  const [isOpen, setIsOpen] = useState5(false);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -2316,10 +2264,10 @@ function CompassCardHorizontal({
   onClick
 }) {
   var _a;
-  const [hovered, setHovered] = useState5(false);
-  const [focused, setFocused] = useState5(false);
-  const [imgError, setImgError] = useState5(false);
-  const [emptyCtaHovered, setEmptyCtaHovered] = useState5(false);
+  const [hovered, setHovered] = useState6(false);
+  const [focused, setFocused] = useState6(false);
+  const [imgError, setImgError] = useState6(false);
+  const [emptyCtaHovered, setEmptyCtaHovered] = useState6(false);
   useEffect5(() => {
     setImgError(false);
   }, [politician == null ? void 0 : politician.photo_origin_url]);
@@ -2569,7 +2517,7 @@ function CompassCardHorizontal({
 }
 
 // src/CompassCardVertical.jsx
-import React12, { useState as useState6, useEffect as useEffect6 } from "react";
+import React12, { useState as useState7, useEffect as useEffect6 } from "react";
 var RADAR_SIZE2 = 400;
 function CompassCardVertical({
   politician,
@@ -2583,10 +2531,10 @@ function CompassCardVertical({
   onClick
 }) {
   var _a;
-  const [hovered, setHovered] = useState6(false);
-  const [focused, setFocused] = useState6(false);
-  const [imgError, setImgError] = useState6(false);
-  const [emptyCtaHovered, setEmptyCtaHovered] = useState6(false);
+  const [hovered, setHovered] = useState7(false);
+  const [focused, setFocused] = useState7(false);
+  const [imgError, setImgError] = useState7(false);
+  const [emptyCtaHovered, setEmptyCtaHovered] = useState7(false);
   useEffect6(() => {
     setImgError(false);
   }, [politician == null ? void 0 : politician.photo_origin_url]);
@@ -2921,7 +2869,7 @@ function CompassCardVertical({
 }
 
 // src/CompassKey.jsx
-import React13, { useEffect as useEffect7, useState as useState7 } from "react";
+import React13, { useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/evContext.js
 var DEFAULT_BROKER_URL = "https://ev-context.empowered.vote/";
@@ -3166,8 +3114,8 @@ var evContext = {
 
 // src/CompassKey.jsx
 function CompassKey({ compact = false } = {}) {
-  const [dismissed, setDismissed] = useState7(false);
-  const [loaded, setLoaded] = useState7(false);
+  const [dismissed, setDismissed] = useState8(false);
+  const [loaded, setLoaded] = useState8(false);
   useEffect7(() => {
     let cancelled = false;
     evContext.get().then((shared) => {
@@ -3294,7 +3242,7 @@ function CompassKey({ compact = false } = {}) {
 }
 
 // src/CategorySection.jsx
-import React14, { useState as useState8 } from "react";
+import React14, { useState as useState9 } from "react";
 function CategorySection({
   title,
   infoTooltip,
@@ -3304,7 +3252,7 @@ function CategorySection({
   tier
 }) {
   var _a, _b;
-  const [showTooltip, setShowTooltip] = useState8(false);
+  const [showTooltip, setShowTooltip] = useState9(false);
   const tierStyle = tier ? tierColors[tier] : null;
   const styles2 = {
     section: {
@@ -3465,7 +3413,7 @@ function SubGroupSection({ title, websiteUrl, children, gridTemplateColumns, gap
 }
 
 // src/GovernmentBodySection.jsx
-import React16, { useState as useState9 } from "react";
+import React16, { useState as useState10 } from "react";
 function GovernmentBodySection({
   title,
   websiteUrl,
@@ -3474,7 +3422,7 @@ function GovernmentBodySection({
   children
 }) {
   var _a;
-  const [expanded, setExpanded] = useState9(defaultExpanded);
+  const [expanded, setExpanded] = useState10(defaultExpanded);
   const tierStyle = tier ? tierColors[tier] : null;
   const accentColor = (_a = tierStyle == null ? void 0 : tierStyle.accent) != null ? _a : colors.borderMedium;
   const styles2 = {
@@ -3803,7 +3751,7 @@ function IssueTags({
 }
 
 // src/CommitteeTable.jsx
-import React19, { useState as useState10 } from "react";
+import React19, { useState as useState11 } from "react";
 var ROLE_ORDER = {
   "chair": 0,
   "co-chair": 1,
@@ -3830,7 +3778,7 @@ function CommitteeTable({
   maxVisible = 6,
   style = {}
 }) {
-  const [showAll, setShowAll] = useState10(false);
+  const [showAll, setShowAll] = useState11(false);
   if (committees.length === 0) {
     return null;
   }
@@ -3934,7 +3882,7 @@ function CommitteeTable({
 }
 
 // src/PoliticianProfile.jsx
-import React22, { useState as useState11, useEffect as useEffect8 } from "react";
+import React22, { useState as useState12, useEffect as useEffect8 } from "react";
 
 // src/LegislativeInlineSummary.jsx
 import React20 from "react";
@@ -4377,7 +4325,7 @@ function PoliticianProfile({
     return pol.photo_origin_url;
   })();
   const initials = [pol.first_name, pol.last_name].filter(Boolean).map((n) => n[0]).join("");
-  const [imgError, setImgError] = useState11(false);
+  const [imgError, setImgError] = useState12(false);
   useEffect8(() => {
     setImgError(false);
   }, [profileImageUrl]);
@@ -4787,7 +4735,7 @@ function PoliticianProfile({
 }
 
 // src/LegislativeRecord.jsx
-import React23, { useState as useState12 } from "react";
+import React23, { useState as useState13 } from "react";
 var DEFAULT_LIMIT = 25;
 function normalizeText(str) {
   if (!str) return "";
@@ -4966,7 +4914,7 @@ function Spinner() {
   } }), /* @__PURE__ */ React23.createElement("style", null, `@keyframes ev-spin { to { transform: rotate(360deg); } }`));
 }
 function CommitteesSection({ committees, leadership }) {
-  const [showAll, setShowAll] = useState12(false);
+  const [showAll, setShowAll] = useState13(false);
   const visible = showAll ? committees : committees.slice(0, DEFAULT_LIMIT);
   return /* @__PURE__ */ React23.createElement("div", { style: { marginBottom: spacing[8] } }, /* @__PURE__ */ React23.createElement(SectionHeader, { title: "Committees & Leadership" }), leadership && leadership.length > 0 && /* @__PURE__ */ React23.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: spacing[2], marginBottom: spacing[4] } }, leadership.map((role, i) => /* @__PURE__ */ React23.createElement("div", { key: i, style: {
     display: "inline-flex",
@@ -5006,8 +4954,8 @@ function CommitteesSection({ committees, leadership }) {
 }
 function LegislationSection({ bills, isMobile }) {
   const years = getYears(bills, "introduced_at");
-  const [yearFilter, setYearFilter] = useState12("All");
-  const [showAll, setShowAll] = useState12(false);
+  const [yearFilter, setYearFilter] = useState13("All");
+  const [showAll, setShowAll] = useState13(false);
   const handleYearChange = (y) => {
     setYearFilter(y);
     setShowAll(false);
@@ -5068,8 +5016,8 @@ function LegislationSection({ bills, isMobile }) {
 }
 function VotingSection({ votes, isMobile }) {
   const years = getYears(votes, "vote_date");
-  const [yearFilter, setYearFilter] = useState12("All");
-  const [showAll, setShowAll] = useState12(false);
+  const [yearFilter, setYearFilter] = useState13("All");
+  const [showAll, setShowAll] = useState13(false);
   const handleYearChange = (y) => {
     setYearFilter(y);
     setShowAll(false);
@@ -5281,7 +5229,7 @@ function JudicialRecordDetail({ politician = {}, judicialRecord, onBack }) {
 }
 
 // src/AuthForm.jsx
-import React25, { useState as useState13 } from "react";
+import React25, { useState as useState14 } from "react";
 function AuthForm({
   logoSrc = "/EVLogo.svg",
   appName = "Empowered Vote",
@@ -5292,11 +5240,11 @@ function AuthForm({
   error = null,
   submitting = false
 }) {
-  const [username, setUsername] = useState13("");
-  const [password, setPassword] = useState13("");
-  const [confirmPassword, setConfirmPassword] = useState13("");
-  const [showPasswords, setShowPasswords] = useState13(false);
-  const [passwordMismatch, setPasswordMismatch] = useState13(false);
+  const [username, setUsername] = useState14("");
+  const [password, setPassword] = useState14("");
+  const [confirmPassword, setConfirmPassword] = useState14("");
+  const [showPasswords, setShowPasswords] = useState14(false);
+  const [passwordMismatch, setPasswordMismatch] = useState14(false);
   const isLogin = mode === "login";
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -5744,7 +5692,7 @@ function TopicTierBadge({
 }
 
 // src/CompassCoverageCallout.jsx
-import React27, { useState as useState14 } from "react";
+import React27, { useState as useState15 } from "react";
 var TIER_LABELS = {
   federal: "federal",
   state: "state",
@@ -5757,7 +5705,7 @@ function CompassCoverageCallout({
   compassUrl,
   onDismiss
 }) {
-  const [dismissed, setDismissed] = useState14(false);
+  const [dismissed, setDismissed] = useState15(false);
   if (dismissed) return null;
   const tierLabel = TIER_LABELS[tier] || tier;
   const tierStyle = tierColors[tier] || tierColors.federal;
@@ -5897,7 +5845,7 @@ function computeTierCoverage(topics) {
 }
 
 // src/useEvContextPromotion.js
-import { useEffect as useEffect9, useState as useState15, useCallback, useRef as useRef3 } from "react";
+import { useEffect as useEffect9, useState as useState16, useCallback, useRef as useRef3 } from "react";
 function useEvContextPromotion({
   domain,
   isLoggedIn,
@@ -5906,10 +5854,10 @@ function useEvContextPromotion({
   apiWriter,
   enabled = true
 }) {
-  const [shouldPrompt, setShouldPrompt] = useState15(false);
-  const [payload, setPayload] = useState15(null);
-  const [status, setStatus] = useState15("idle");
-  const [error, setError] = useState15(null);
+  const [shouldPrompt, setShouldPrompt] = useState16(false);
+  const [payload, setPayload] = useState16(null);
+  const [status, setStatus] = useState16("idle");
+  const [error, setError] = useState16(null);
   const apiDataRef = useRef3(apiData);
   apiDataRef.current = apiData;
   const userIdRef = useRef3(userId);
@@ -6056,7 +6004,7 @@ function isGuestPopulated(domain, fullEvContext) {
 }
 
 // src/StanceAccordion.jsx
-import React30, { useState as useState16, useRef as useRef4, useCallback as useCallback2, useEffect as useEffect10 } 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";
@@ -6117,9 +6065,9 @@ function StanceAccordion({
   apiUrl = "https://api.empowered.vote"
 }) {
   var _a;
-  const [expandedTopicId, setExpandedTopicId] = useState16(null);
-  const [loadingId, setLoadingId] = useState16(null);
-  const [showAll, setShowAll] = useState16(false);
+  const [expandedTopicId, setExpandedTopicId] = useState17(null);
+  const [loadingId, setLoadingId] = useState17(null);
+  const [showAll, setShowAll] = useState17(false);
   const contextCache = useRef4(/* @__PURE__ */ new Map());
   const quotesCache = useRef4(null);
   const polAnswerMap = {};