@empoweredvote/ev-ui 0.7.0 → 0.8.0

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,
@@ -16,11 +15,16 @@ function RadarChartCore({
   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 +32,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,21 +75,18 @@ 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 }
-  });
+  };
+  if (countChanged || compareJustAppeared) compareSpringBase.from = compareSpringBase.to;
+  const compareSpring = useSpring(compareSpringBase);
   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 longestLineLen = lines.reduce((m, ln) => ln.length > m ? ln.length : m, 0);
+    const fSize = adaptiveFontSize(longestLineLen, labelFontSize);
     const estimatedWidth = longestLineLen * fSize * 0.6;
     const sinA = Math.sin(angle);
     const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
@@ -98,30 +97,31 @@ function RadarChartCore({
   const minPadding = 40;
   const maxPadding = padding * 2;
   const rawLeftPadding = Math.min(
-    Math.max(
-      leftLabelWidths.length ? Math.max(...leftLabelWidths) + labelOffset : 0,
-      minPadding
-    ),
+    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
-    ),
+    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;
+  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;
+  }, {});
   let tightTop = -verticalPadding;
   let tightHeight = size + verticalPadding * 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;
     }
@@ -135,75 +135,94 @@ 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"
+      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,
+          x2: endX,
+          y2: endY,
           stroke: isUnanswered ? "#9ca3af" : "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: "black",
+          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 longestLine = lines.reduce((m, ln) => ln.length > m ? ln.length : m, 0);
+      const fSize = adaptiveFontSize(longestLine, labelFontSize);
       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;
-      }
+      if (isTop && lines.length > 1) labelY -= (lines.length - 1) * lineHeight;
+      const isActive = shortTitle === activeSpoke;
       const isUnansweredLabel = !!unansweredSpokes[shortTitle];
+      const activeFSize = fSize * 1.5;
+      const displayFSize = isActive ? activeFSize : fSize;
       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 ? "#9ca3af" : void 0,
-          style: { cursor: "pointer", userSelect: "none", fontSize: fSize }
+          fill: isActive ? "#E85D26" : isUnansweredLabel ? "#9ca3af" : void 0,
+          fontWeight: isActive ? "bold" : void 0,
+          style: { cursor: "pointer", userSelect: "none", fontSize: displayFSize }
         },
         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))
@@ -214,22 +233,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) => {
@@ -247,7 +258,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 +270,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 +285,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 +295,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,15 +313,51 @@ 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 + leftPadding + rightPadding;
+      const tx = tooltip.x + leftPadding + 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) {
@@ -351,7 +396,7 @@ function wrapLabel(label, maxChars = 12) {
 }
 
 // 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 +792,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 +813,7 @@ function useMediaQuery(query) {
 function Header({
   logoSrc,
   logoAlt = "Empowered Vote",
+  logoHref = "https://login.empowered.vote/profile",
   navItems = [],
   ctaButton,
   secondaryAction,
@@ -776,9 +822,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 +1097,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 +1738,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 +1933,7 @@ function PoliticianCard({
       }
     )
   );
-  const [imgError, setImgError] = useState3(false);
+  const [imgError, setImgError] = useState4(false);
   useEffect4(() => {
     setImgError(false);
   }, [imageSrc]);
@@ -1954,7 +2000,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 +2083,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 +2172,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 +2362,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 +2615,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 +2629,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 +2967,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 +3212,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 +3340,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 +3350,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 +3511,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 +3520,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 +3849,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 +3876,7 @@ function CommitteeTable({
   maxVisible = 6,
   style = {}
 }) {
-  const [showAll, setShowAll] = useState10(false);
+  const [showAll, setShowAll] = useState11(false);
   if (committees.length === 0) {
     return null;
   }
@@ -3934,7 +3980,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 +4423,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 +4833,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 +5012,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 +5052,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 +5114,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 +5327,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 +5338,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 +5790,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 +5803,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 +5943,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 +5952,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 +6102,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 +6163,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 = {};