@empoweredvote/ev-ui 0.2.3 → 0.4.0

package/dist/index.js

@@ -34,7 +34,9 @@ __export(index_exports, {
   BranchIcon: () => BranchIcon,
   CategorySection: () => CategorySection,
   CommitteeTable: () => CommitteeTable,
+  CompassCoverageCallout: () => CompassCoverageCallout,
   CompassIcon: () => CompassIcon,
+  ExpandCompassNudge: () => ExpandCompassNudge,
   FilterSidebar: () => FilterSidebar,
   GovernmentBodySection: () => GovernmentBodySection,
   Header: () => Header,
@@ -56,6 +58,7 @@ __export(index_exports, {
   breakpoints: () => breakpoints,
   colorScales: () => colorScales,
   colors: () => colors,
+  computeTierCoverage: () => computeTierCoverage,
   dataVizPalette: () => dataVizPalette,
   defaultCtaButton: () => defaultCtaButton,
   defaultNavItems: () => defaultNavItems,
@@ -4115,28 +4118,99 @@ var styles = {
 
 // src/TopicTierBadge.jsx
 var import_react20 = __toESM(require("react"));
-var TIER_LABELS = {
-  federal: { full: "Federal", compact: "F" },
-  state: { full: "State", compact: "S" },
-  local: { full: "Local", compact: "L" }
+function LandmarkIcon({ size = 14 }) {
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M10 18v-7" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M14 18v-7" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M18 18v-7" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M3 22h18" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M6 18v-7" })
+  );
+}
+function Building2Icon({ size = 14 }) {
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M6 12H4a2 2 0 0 0-2 2v8h4" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M18 9h2a2 2 0 0 1 2 2v11h-4" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M10 6h4" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M10 10h4" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M10 14h4" }),
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "M10 18h4" })
+  );
+}
+function HomeIcon({ size = 14 }) {
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react20.default.createElement("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ import_react20.default.createElement("polyline", { points: "9 22 9 12 15 12 15 22" })
+  );
+}
+var TIER_INFO = {
+  federal: { label: "Federal", Icon: LandmarkIcon },
+  state: { label: "State", Icon: Building2Icon },
+  local: { label: "Local", Icon: HomeIcon }
 };
 var SIZE_STYLES = {
   xs: {
+    iconSize: 12,
     fontSize: fontSizes.xs,
-    padding: `${spacing[1]} ${spacing[2]}`,
-    gap: spacing[1]
+    pillPadding: `${spacing[1]} ${spacing[2]}`,
+    gap: spacing[1],
+    iconGap: "3px"
   },
   sm: {
+    iconSize: 14,
     fontSize: fontSizes.xs,
-    padding: `${spacing[1]} ${spacing[2]}`,
-    gap: spacing[1]
+    pillPadding: `${spacing[1]} ${spacing[2]}`,
+    gap: spacing[2],
+    iconGap: "4px"
   }
 };
 function TopicTierBadge({
   topic,
   tiers,
   size = "sm",
-  layout = "full",
+  iconOnly = false,
+  variant = "tinted",
   style = {}
 }) {
   const effectiveTiers = tiers != null ? tiers : topic ? [
@@ -4153,41 +4227,197 @@ function TopicTierBadge({
     flexWrap: "wrap",
     ...style
   };
-  const pillStyle = (tier) => ({
-    display: "inline-flex",
-    alignItems: "center",
-    padding: sizeStyle.padding,
-    borderRadius: borderRadius.full,
-    fontFamily: fonts.primary,
-    fontWeight: fontWeights.medium,
-    fontSize: sizeStyle.fontSize,
-    backgroundColor: tierColors[tier].bg,
-    color: tierColors[tier].text,
-    border: `1px solid ${tierColors[tier].text}`,
-    lineHeight: 1,
-    userSelect: "none"
-  });
+  const itemStyle = (tier) => {
+    const color = variant === "muted" ? "#6B7280" : tierColors[tier].text;
+    return {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: sizeStyle.iconGap,
+      fontFamily: fonts.primary,
+      fontWeight: fontWeights.medium,
+      fontSize: sizeStyle.fontSize,
+      color,
+      lineHeight: 1,
+      userSelect: "none"
+    };
+  };
   return /* @__PURE__ */ import_react20.default.createElement(
     "span",
     {
       className: "ev-topic-tier-badge",
       style: containerStyle2,
       role: "group",
-      "aria-label": `Applies at: ${effectiveTiers.map((t) => TIER_LABELS[t].full).join(", ")}`
+      "aria-label": `Applies at: ${effectiveTiers.map((t) => TIER_INFO[t].label).join(", ")}`
     },
-    effectiveTiers.map((tier) => /* @__PURE__ */ import_react20.default.createElement("span", { key: tier, style: pillStyle(tier) }, TIER_LABELS[tier][layout]))
+    effectiveTiers.map((tier) => {
+      const { label, Icon } = TIER_INFO[tier];
+      return /* @__PURE__ */ import_react20.default.createElement("span", { key: tier, style: itemStyle(tier) }, /* @__PURE__ */ import_react20.default.createElement(Icon, { size: sizeStyle.iconSize }), !iconOnly && /* @__PURE__ */ import_react20.default.createElement("span", null, label));
+    })
   );
 }
 
-// src/StanceAccordion.jsx
+// src/CompassCoverageCallout.jsx
+var import_react21 = __toESM(require("react"));
+var TIER_LABELS = {
+  federal: "federal",
+  state: "state",
+  local: "local"
+};
+function CompassCoverageCallout({
+  tier,
+  count,
+  totalSelected,
+  compassUrl,
+  onDismiss
+}) {
+  const [dismissed, setDismissed] = (0, import_react21.useState)(false);
+  if (dismissed) return null;
+  const tierLabel = TIER_LABELS[tier] || tier;
+  const tierStyle = tierColors[tier] || tierColors.federal;
+  const containerStyle2 = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: spacing[3],
+    padding: `${spacing[3]} ${spacing[4]}`,
+    borderLeft: `4px solid ${tierStyle.text}`,
+    backgroundColor: tierStyle.bg,
+    borderRadius: `0 ${borderRadius.md} ${borderRadius.md} 0`,
+    fontFamily: fonts.primary,
+    margin: `${spacing[3]} 0`
+  };
+  const textStyle = {
+    flex: 1,
+    fontSize: fontSizes.sm,
+    color: "#2d3748",
+    lineHeight: 1.5
+  };
+  const headlineStyle = {
+    fontWeight: fontWeights.semibold,
+    marginBottom: spacing[1],
+    color: tierStyle.text
+  };
+  const ctaStyle = {
+    display: "inline-block",
+    marginTop: spacing[2],
+    padding: `${spacing[2]} ${spacing[4]}`,
+    backgroundColor: tierStyle.text,
+    color: "#ffffff",
+    borderRadius: borderRadius.full,
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.semibold,
+    textDecoration: "none",
+    cursor: "pointer"
+  };
+  const closeStyle = {
+    background: "none",
+    border: "none",
+    padding: spacing[1],
+    cursor: "pointer",
+    color: "#718096",
+    fontSize: fontSizes.lg,
+    lineHeight: 1
+  };
+  const handleDismiss = () => {
+    setDismissed(true);
+    if (onDismiss) onDismiss();
+  };
+  return /* @__PURE__ */ import_react21.default.createElement(
+    "div",
+    {
+      className: "ev-compass-coverage-callout",
+      role: "status",
+      style: containerStyle2
+    },
+    /* @__PURE__ */ import_react21.default.createElement("div", { style: textStyle }, /* @__PURE__ */ import_react21.default.createElement("div", { style: headlineStyle }, "Your compass covers ", tierLabel, " issues lightly"), /* @__PURE__ */ import_react21.default.createElement("div", null, count === 0 ? `None of your ${totalSelected != null ? totalSelected : "selected"} compass topics apply at the ${tierLabel} level. ` : `Only ${count} of your ${totalSelected != null ? totalSelected : "selected"} compass topics apply at the ${tierLabel} level. `, "Add more ", tierLabel, "-applicable topics to get better comparisons with ", tierLabel, " officials."), /* @__PURE__ */ import_react21.default.createElement("a", { href: compassUrl, style: ctaStyle }, "Add ", tierLabel, " topics \u2192")),
+    onDismiss !== void 0 && /* @__PURE__ */ import_react21.default.createElement(
+      "button",
+      {
+        onClick: handleDismiss,
+        style: closeStyle,
+        "aria-label": "Dismiss coverage callout"
+      },
+      "\xD7"
+    )
+  );
+}
+
+// src/ExpandCompassNudge.jsx
 var import_react22 = __toESM(require("react"));
+function ExpandCompassNudge({
+  politicianName,
+  missingCount,
+  compassUrl,
+  style = {}
+}) {
+  if (!missingCount || missingCount <= 0) return null;
+  const containerStyle2 = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: spacing[2],
+    padding: spacing[4],
+    marginTop: spacing[4],
+    backgroundColor: "#F5F9FA",
+    borderRadius: borderRadius.lg,
+    border: "1px solid #e0e6eb",
+    fontFamily: fonts.primary,
+    ...style
+  };
+  const headlineStyle = {
+    fontSize: fontSizes.base,
+    fontWeight: fontWeights.semibold,
+    color: "#2d3748",
+    margin: 0
+  };
+  const bodyStyle = {
+    fontSize: fontSizes.sm,
+    color: "#4a5568",
+    lineHeight: 1.5,
+    margin: 0
+  };
+  const ctaStyle = {
+    display: "inline-block",
+    marginTop: spacing[2],
+    padding: `${spacing[2]} ${spacing[4]}`,
+    backgroundColor: "#00657c",
+    color: "#ffffff",
+    borderRadius: borderRadius.full,
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.semibold,
+    textDecoration: "none",
+    cursor: "pointer"
+  };
+  const topicsLabel = missingCount === 1 ? "topic" : "topics";
+  const speakerName = politicianName || "This politician";
+  return /* @__PURE__ */ import_react22.default.createElement("div", { className: "ev-expand-compass-nudge", style: containerStyle2, role: "region" }, /* @__PURE__ */ import_react22.default.createElement("p", { style: headlineStyle }, "Want a richer comparison?"), /* @__PURE__ */ import_react22.default.createElement("p", { style: bodyStyle }, speakerName, " has stances on ", missingCount, " more ", topicsLabel, " you haven't answered yet. Expand your compass to see where you stand on all of them."), /* @__PURE__ */ import_react22.default.createElement("a", { href: compassUrl, style: ctaStyle }, "Expand my compass \u2192"));
+}
+
+// src/computeTierCoverage.js
+function computeTierCoverage(topics) {
+  const counts = { federal: 0, state: 0, local: 0 };
+  if (!Array.isArray(topics)) return counts;
+  for (const t of topics) {
+    if (!t) continue;
+    const hasFlags = "applies_federal" in t || "applies_state" in t || "applies_local" in t;
+    const f = hasFlags ? Boolean(t.applies_federal) : true;
+    const s = hasFlags ? Boolean(t.applies_state) : true;
+    const l = hasFlags ? Boolean(t.applies_local) : true;
+    if (f) counts.federal++;
+    if (s) counts.state++;
+    if (l) counts.local++;
+  }
+  return counts;
+}
+
+// src/StanceAccordion.jsx
+var import_react24 = __toESM(require("react"));
 
 // src/Favicon.jsx
-var import_react21 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 function Favicon({ url, size = 16 }) {
   try {
     const domain = new URL(url).hostname;
-    return /* @__PURE__ */ import_react21.default.createElement(
+    return /* @__PURE__ */ import_react23.default.createElement(
       "img",
       {
         src: `https://www.google.com/s2/favicons?sz=${size}&domain=${domain}`,
@@ -4198,7 +4428,7 @@ function Favicon({ url, size = 16 }) {
       }
     );
   } catch {
-    return /* @__PURE__ */ import_react21.default.createElement(
+    return /* @__PURE__ */ import_react23.default.createElement(
       "svg",
       {
         width: size,
@@ -4209,8 +4439,8 @@ function Favicon({ url, size = 16 }) {
         strokeWidth: "1.5",
         style: { verticalAlign: "middle", flexShrink: 0 }
       },
-      /* @__PURE__ */ import_react21.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ import_react21.default.createElement("path", { d: "M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+      /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ import_react23.default.createElement("path", { d: "M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
     );
   }
 }
@@ -4241,11 +4471,11 @@ function StanceAccordion({
   apiUrl = "https://api.empowered.vote"
 }) {
   var _a;
-  const [expandedTopicId, setExpandedTopicId] = (0, import_react22.useState)(null);
-  const [loadingId, setLoadingId] = (0, import_react22.useState)(null);
-  const [showAll, setShowAll] = (0, import_react22.useState)(false);
-  const contextCache = (0, import_react22.useRef)(/* @__PURE__ */ new Map());
-  const quotesCache = (0, import_react22.useRef)(null);
+  const [expandedTopicId, setExpandedTopicId] = (0, import_react24.useState)(null);
+  const [loadingId, setLoadingId] = (0, import_react24.useState)(null);
+  const [showAll, setShowAll] = (0, import_react24.useState)(false);
+  const contextCache = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
+  const quotesCache = (0, import_react24.useRef)(null);
   const polAnswerMap = {};
   if (polAnswers) {
     polAnswers.forEach((a) => {
@@ -4304,7 +4534,7 @@ function StanceAccordion({
       quotesCache.current = [];
     }
   }
-  const handleToggle = (0, import_react22.useCallback)(
+  const handleToggle = (0, import_react24.useCallback)(
     async (topicId) => {
       if (expandedTopicId === topicId) {
         setExpandedTopicId(null);
@@ -4321,7 +4551,7 @@ function StanceAccordion({
     },
     [expandedTopicId, politicianId, apiUrl]
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (initialExpandedTopicId && topics && topics.length > 0) {
       handleToggle(String(initialExpandedTopicId));
     }
@@ -4337,13 +4567,13 @@ function StanceAccordion({
       visibleTopics = [pinned, ...baseTopics.filter((t) => String(t.id) !== String(initialExpandedTopicId))];
     }
   }
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(
     "div",
     {
       className: "flex flex-col",
       style: { fontFamily: "'Manrope', sans-serif" }
     },
-    /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react24.default.createElement(
       "h3",
       {
         className: "text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-2",
@@ -4365,15 +4595,15 @@ function StanceAccordion({
         if (topic.topic_key) return q.issue === topic.topic_key;
         return topic.short_title && q.issue.toLowerCase() === topic.short_title.toLowerCase();
       }) : [];
-      return /* @__PURE__ */ import_react22.default.createElement("div", { key: topicId, className: "border-b border-neutral-100" }, /* @__PURE__ */ import_react22.default.createElement(
+      return /* @__PURE__ */ import_react24.default.createElement("div", { key: topicId, className: "border-b border-neutral-100" }, /* @__PURE__ */ import_react24.default.createElement(
         "button",
         {
           type: "button",
           onClick: () => handleToggle(topicId),
           className: "w-full flex items-center justify-between py-3 px-2 text-left cursor-pointer hover:bg-neutral-50 transition-colors"
         },
-        /* @__PURE__ */ import_react22.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "text-sm font-medium text-neutral-800 truncate" }, topic.short_title), questionText && /* @__PURE__ */ import_react22.default.createElement("span", { className: "text-xs text-neutral-400 mt-0.5" }, questionText), /* @__PURE__ */ import_react22.default.createElement("span", { className: "text-xs text-neutral-500 mt-0.5" }, label)),
-        /* @__PURE__ */ import_react22.default.createElement(
+        /* @__PURE__ */ import_react24.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react24.default.createElement("span", { className: "text-sm font-medium text-neutral-800 truncate" }, topic.short_title), questionText && /* @__PURE__ */ import_react24.default.createElement("span", { className: "text-xs text-neutral-400 mt-0.5" }, questionText), /* @__PURE__ */ import_react24.default.createElement("span", { className: "text-xs text-neutral-500 mt-0.5" }, label)),
+        /* @__PURE__ */ import_react24.default.createElement(
           "svg",
           {
             width: "16",
@@ -4390,9 +4620,9 @@ function StanceAccordion({
               transition: "transform 0.2s ease"
             }
           },
-          /* @__PURE__ */ import_react22.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+          /* @__PURE__ */ import_react24.default.createElement("polyline", { points: "9 18 15 12 9 6" })
         )
-      ), /* @__PURE__ */ import_react22.default.createElement(
+      ), /* @__PURE__ */ import_react24.default.createElement(
         "div",
         {
           style: {
@@ -4401,7 +4631,7 @@ function StanceAccordion({
             transition: "grid-template-rows 0.25s ease"
           }
         },
-        /* @__PURE__ */ import_react22.default.createElement("div", { style: { overflow: "hidden" } }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "px-2 pb-4" }, isLoading && /* @__PURE__ */ import_react22.default.createElement("div", { className: "flex items-center py-3" }, /* @__PURE__ */ import_react22.default.createElement(
+        /* @__PURE__ */ import_react24.default.createElement("div", { style: { overflow: "hidden" } }, /* @__PURE__ */ import_react24.default.createElement("div", { className: "px-2 pb-4" }, isLoading && /* @__PURE__ */ import_react24.default.createElement("div", { className: "flex items-center py-3" }, /* @__PURE__ */ import_react24.default.createElement(
           "div",
           {
             style: {
@@ -4413,14 +4643,14 @@ function StanceAccordion({
               animation: "ev-spin 0.8s linear infinite"
             }
           }
-        )), !isLoading && cached && /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, cached.reasoning ? /* @__PURE__ */ import_react22.default.createElement(
+        )), !isLoading && cached && /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, cached.reasoning ? /* @__PURE__ */ import_react24.default.createElement(
           "p",
           {
             className: "text-sm text-neutral-700 mb-3",
             style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }
           },
           cached.reasoning
-        ) : null, cached.sources && cached.sources.length > 0 && /* @__PURE__ */ import_react22.default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ import_react22.default.createElement("p", { className: "text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-1.5" }, "References"), /* @__PURE__ */ import_react22.default.createElement("ol", { className: "list-decimal list-inside space-y-1" }, cached.sources.map((src, i) => /* @__PURE__ */ import_react22.default.createElement("li", { key: i, className: "text-xs text-neutral-600" }, /* @__PURE__ */ import_react22.default.createElement(
+        ) : null, cached.sources && cached.sources.length > 0 && /* @__PURE__ */ import_react24.default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ import_react24.default.createElement("p", { className: "text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-1.5" }, "References"), /* @__PURE__ */ import_react24.default.createElement("ol", { className: "list-decimal list-inside space-y-1" }, cached.sources.map((src, i) => /* @__PURE__ */ import_react24.default.createElement("li", { key: i, className: "text-xs text-neutral-600" }, /* @__PURE__ */ import_react24.default.createElement(
           "a",
           {
             href: src,
@@ -4428,9 +4658,9 @@ function StanceAccordion({
             rel: "noreferrer",
             className: "inline-flex items-center gap-1.5 hover:text-[#00657c] transition-colors"
           },
-          /* @__PURE__ */ import_react22.default.createElement(Favicon, { url: src }),
-          /* @__PURE__ */ import_react22.default.createElement("span", { className: "underline underline-offset-2" }, getDisplayUrl(src))
-        ))))), topicQuotes.length > 0 && /* @__PURE__ */ import_react22.default.createElement("div", { style: { marginTop: "12px" } }, /* @__PURE__ */ import_react22.default.createElement(
+          /* @__PURE__ */ import_react24.default.createElement(Favicon, { url: src }),
+          /* @__PURE__ */ import_react24.default.createElement("span", { className: "underline underline-offset-2" }, getDisplayUrl(src))
+        ))))), topicQuotes.length > 0 && /* @__PURE__ */ import_react24.default.createElement("div", { style: { marginTop: "12px" } }, /* @__PURE__ */ import_react24.default.createElement(
           "p",
           {
             style: {
@@ -4447,7 +4677,7 @@ function StanceAccordion({
           const verdict = verdictsByQuote ? verdictsByQuote[quote.id] : void 0;
           const borderColor = verdict === "agreed" ? "#0e7490" : verdict === "disagreed" ? "#b45309" : "#e2e8f0";
           const sourceName = quote.source_name || quote.sourceName;
-          return /* @__PURE__ */ import_react22.default.createElement(
+          return /* @__PURE__ */ import_react24.default.createElement(
             "div",
             {
               key: quote.id,
@@ -4459,7 +4689,7 @@ function StanceAccordion({
                 marginBottom: "8px"
               }
             },
-            /* @__PURE__ */ import_react22.default.createElement(
+            /* @__PURE__ */ import_react24.default.createElement(
               "p",
               {
                 style: {
@@ -4472,7 +4702,7 @@ function StanceAccordion({
               },
               quote.text
             ),
-            verdict === "agreed" && /* @__PURE__ */ import_react22.default.createElement(
+            verdict === "agreed" && /* @__PURE__ */ import_react24.default.createElement(
               "span",
               {
                 style: {
@@ -4489,10 +4719,10 @@ function StanceAccordion({
                   flexShrink: 0
                 }
               },
-              /* @__PURE__ */ import_react22.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react22.default.createElement("path", { d: "M5 13l4 4L19 7" })),
+              /* @__PURE__ */ import_react24.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react24.default.createElement("path", { d: "M5 13l4 4L19 7" })),
               "Agreed"
             ),
-            verdict === "disagreed" && /* @__PURE__ */ import_react22.default.createElement(
+            verdict === "disagreed" && /* @__PURE__ */ import_react24.default.createElement(
               "span",
               {
                 style: {
@@ -4509,10 +4739,10 @@ function StanceAccordion({
                   flexShrink: 0
                 }
               },
-              /* @__PURE__ */ import_react22.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react22.default.createElement("path", { d: "M6 18L18 6M6 6l12 12" })),
+              /* @__PURE__ */ import_react24.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react24.default.createElement("path", { d: "M6 18L18 6M6 6l12 12" })),
               "Disagreed"
             ),
-            sourceName && /* @__PURE__ */ import_react22.default.createElement(
+            sourceName && /* @__PURE__ */ import_react24.default.createElement(
               "a",
               {
                 href: quote.source_url || quote.sourceUrl,
@@ -4529,10 +4759,10 @@ function StanceAccordion({
               sourceName
             )
           );
-        })), !cached.reasoning && (!cached.sources || cached.sources.length === 0) && topicQuotes.length === 0 && /* @__PURE__ */ import_react22.default.createElement("p", { className: "text-sm text-neutral-400 italic py-2" }, "No detailed reasoning available for this topic."))))
+        })), !cached.reasoning && (!cached.sources || cached.sources.length === 0) && topicQuotes.length === 0 && /* @__PURE__ */ import_react24.default.createElement("p", { className: "text-sm text-neutral-400 italic py-2" }, "No detailed reasoning available for this topic."))))
       ));
     }),
-    hasToggle && /* @__PURE__ */ import_react22.default.createElement(
+    hasToggle && /* @__PURE__ */ import_react24.default.createElement(
       "button",
       {
         type: "button",
@@ -4546,9 +4776,9 @@ function StanceAccordion({
 }
 
 // src/icons.js
-var import_react23 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 function BallotIcon({ size = 16, color = "currentColor" }) {
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     "svg",
     {
       width: size,
@@ -4561,13 +4791,13 @@ function BallotIcon({ size = 16, color = "currentColor" }) {
       strokeLinejoin: "round",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react23.default.createElement("path", { d: "m9 12 2 2 4-4" }),
-    /* @__PURE__ */ import_react23.default.createElement("path", { d: "M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z" }),
-    /* @__PURE__ */ import_react23.default.createElement("path", { d: "M22 19H2" })
+    /* @__PURE__ */ import_react25.default.createElement("path", { d: "m9 12 2 2 4-4" }),
+    /* @__PURE__ */ import_react25.default.createElement("path", { d: "M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z" }),
+    /* @__PURE__ */ import_react25.default.createElement("path", { d: "M22 19H2" })
   );
 }
 function CompassIcon({ size = 16, color = "currentColor" }) {
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     "svg",
     {
       width: size,
@@ -4580,27 +4810,27 @@ function CompassIcon({ size = 16, color = "currentColor" }) {
       strokeLinejoin: "round",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ import_react23.default.createElement("path", { d: "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" })
+    /* @__PURE__ */ import_react25.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ import_react25.default.createElement("path", { d: "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" })
   );
 }
 function BranchIcon({ size = 16, color = "currentColor", branch }) {
   let paths;
   switch (branch) {
     case "executive":
-      paths = /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("path", { d: "M3 21h18" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M5 21V7l8-4v18" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M19 21V11l-6-4" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M9 9v.01" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M9 12v.01" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M9 15v.01" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M9 18v.01" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M5 21h14" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "13", y1: "5", x2: "13", y2: "3" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "13", y1: "3", x2: "15", y2: "4" }));
+      paths = /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement("path", { d: "M3 21h18" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M5 21V7l8-4v18" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M19 21V11l-6-4" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M9 9v.01" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M9 12v.01" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M9 15v.01" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M9 18v.01" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M5 21h14" }), /* @__PURE__ */ import_react25.default.createElement("line", { x1: "13", y1: "5", x2: "13", y2: "3" }), /* @__PURE__ */ import_react25.default.createElement("line", { x1: "13", y1: "3", x2: "15", y2: "4" }));
       break;
     case "legislative":
-      paths = /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("path", { d: "M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M19 17V5a2 2 0 0 0-2-2H4" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M15 8h-5" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M15 12h-5" }));
+      paths = /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement("path", { d: "M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M19 17V5a2 2 0 0 0-2-2H4" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M15 8h-5" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M15 12h-5" }));
       break;
     case "judicial":
-      paths = /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("path", { d: "M12 3v19" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M5 8l7-5 7 5" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M3 13l2-5 2 5a3 3 0 0 1-4 0z" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M17 13l2-5 2 5a3 3 0 0 1-4 0z" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M8 21h8" }));
+      paths = /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement("path", { d: "M12 3v19" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M5 8l7-5 7 5" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M3 13l2-5 2 5a3 3 0 0 1-4 0z" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M17 13l2-5 2 5a3 3 0 0 1-4 0z" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M8 21h8" }));
       break;
     default:
-      paths = /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("path", { d: "M10 18v-7" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M14 18v-7" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M18 18v-7" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M3 22h18" }), /* @__PURE__ */ import_react23.default.createElement("path", { d: "M6 18v-7" }));
+      paths = /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement("path", { d: "M10 18v-7" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M14 18v-7" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M18 18v-7" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M3 22h18" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M6 18v-7" }));
       break;
   }
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     "svg",
     {
       width: size,
@@ -4623,7 +4853,9 @@ function BranchIcon({ size = 16, color = "currentColor", branch }) {
   BranchIcon,
   CategorySection,
   CommitteeTable,
+  CompassCoverageCallout,
   CompassIcon,
+  ExpandCompassNudge,
   FilterSidebar,
   GovernmentBodySection,
   Header,
@@ -4645,6 +4877,7 @@ function BranchIcon({ size = 16, color = "currentColor", branch }) {
   breakpoints,
   colorScales,
   colors,
+  computeTierCoverage,
   dataVizPalette,
   defaultCtaButton,
   defaultNavItems,