@the-portland-company/shell 0.76.15 → 0.77.0

package/dist/chunk-TUK2IEL5.js

@@ -0,0 +1,2002 @@
+import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-BHRVZPZ7.js';
+import clsx from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useRef, useContext, useCallback, useMemo, useSyncExternalStore } from 'react';
+import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap, FiBatteryCharging, FiBattery } from 'react-icons/fi';
+import { createPortal } from 'react-dom';
+
+function FormColumn({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-shell-form-column": "", className: clsx("w-full max-w-[960px]", className), children });
+}
+
+// src/lib/deprecation.ts
+var warned = /* @__PURE__ */ new Set();
+function isDev() {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+function warnDeprecated(key, message) {
+  if (!isDev() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[@the-portland-company/shell] ${message}`);
+}
+function useTopBarIconSlotGlyph(slot) {
+  const [name, setName] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const read = () => {
+      const raw = window.getComputedStyle(document.documentElement).getPropertyValue(`--topbar-icon-${slot}`).trim().replace(/^['"]|['"]$/g, "");
+      setName(raw.length > 0 ? raw : null);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(document.head, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [slot]);
+  return name;
+}
+var GLYPHS = {
+  // Communications Fuel reads as a LEVEL, so its glyph is a battery. `bolt`/
+  // `zap` stay mapped for older Brand values.
+  "battery-charging": FiBatteryCharging,
+  battery: FiBattery,
+  fuel: FiBatteryCharging,
+  bolt: FiZap,
+  zap: FiZap,
+  grid: FiGrid,
+  apps: FiGrid,
+  bell: FiBell,
+  notification: FiBell,
+  "alert-triangle": FiAlertTriangle,
+  alert: FiAlertTriangle,
+  "alert-circle": FiAlertCircle,
+  "life-buoy": FiLifeBuoy,
+  "life-ring": FiLifeBuoy,
+  support: FiLifeBuoy,
+  "help-circle": FiHelpCircle,
+  moon: FiMoon,
+  sun: FiSun,
+  info: FiInfo,
+  mail: FiMail,
+  "message-square": FiMessageSquare,
+  settings: FiSettings,
+  user: FiUser
+};
+function resolveBrandGlyph(name) {
+  if (!name) return null;
+  return GLYPHS[name.trim().toLowerCase()] ?? null;
+}
+
+// src/notifications/adapter.ts
+function emptyNotificationsFeed() {
+  return { notifications: [], badge: 0 };
+}
+function asString(value) {
+  return typeof value === "string" ? value : null;
+}
+function normalizeNotificationsFeed(raw) {
+  if (!raw || typeof raw !== "object") return emptyNotificationsFeed();
+  const body = raw;
+  const rows = Array.isArray(body.notifications) ? body.notifications : [];
+  const notifications = [];
+  for (const row of rows) {
+    if (!row || typeof row !== "object") continue;
+    const r = row;
+    const id = asString(r.id);
+    if (!id || asString(r.archived_at)) continue;
+    notifications.push({
+      id,
+      kind: r.kind === "alert" ? "alert" : "notification",
+      title: asString(r.title) ?? "",
+      body: asString(r.body) ?? "",
+      icon: asString(r.icon),
+      link: asString(r.link),
+      readAt: asString(r.read_at),
+      orgId: asString(r.org_id),
+      createdAt: asString(r.created_at)
+    });
+  }
+  const badge = typeof body.badge === "number" && Number.isFinite(body.badge) ? Math.max(0, Math.floor(body.badge)) : notifications.filter((n) => n.kind === "alert" || n.readAt === null).length;
+  return { notifications, badge };
+}
+function createCommsNotificationsAdapter(fetchJson) {
+  const act = async (id, action) => {
+    if (!fetchJson || !id) return false;
+    try {
+      await fetchJson(`me/notifications/${encodeURIComponent(id)}/${action}`, { method: "POST" });
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  return {
+    async list(orgId) {
+      if (!fetchJson) return emptyNotificationsFeed();
+      try {
+        const query = orgId ? `?org_id=${encodeURIComponent(orgId)}` : "";
+        return normalizeNotificationsFeed(await fetchJson(`me/notifications${query}`));
+      } catch {
+        return emptyNotificationsFeed();
+      }
+    },
+    markRead: (id) => act(id, "read"),
+    archive: (id) => act(id, "archive"),
+    resolve: (id) => act(id, "resolve")
+  };
+}
+function notificationsFeedToPayload(feed, orgId) {
+  return {
+    organizationId: orgId ?? "",
+    alerts: feed.notifications.map((n) => ({
+      id: n.id,
+      title: n.title,
+      description: n.body,
+      href: n.link,
+      kind: n.kind,
+      read: n.readAt !== null
+    })),
+    replies: [],
+    badge: feed.badge
+  };
+}
+var CORE_APP_ORIGIN = "https://app.politogyvrm.com";
+var CORE_BILLING_PATH = "/organization-settings/subscription-billing/text-email";
+var CORE_BILLING_URL = `${CORE_APP_ORIGIN}${CORE_BILLING_PATH}`;
+var QUARANTINED_CONTACTS_URL = `https://contacts.politogyvrm.com/duplicates`;
+var SPECS_ORIGIN = "https://specs.politogyvrm.com";
+function withOrgParam(url, orgId) {
+  if (!orgId) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}org=${orgId}`;
+}
+function withPhoneParam(url, phone) {
+  if (!phone) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}phone=${encodeURIComponent(phone)}`;
+}
+function resolveOrgLogoUrl(url) {
+  const raw = url?.trim();
+  if (!raw) return void 0;
+  if (/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(raw)) return raw;
+  return `${CORE_APP_ORIGIN}${raw.startsWith("/") ? "" : "/"}${raw}`;
+}
+var TOPBAR_GLYPH_SIZE = 17;
+function topBarIconButtonClass(tone = "default") {
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
+  return [
+    // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
+    "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-transparent transition",
+    "h-[var(--topbar-icon-button-size,34px)] w-[var(--topbar-icon-button-size,34px)]",
+    toneClass
+  ].join(" ");
+}
+var openPanelCount = 0;
+var panelListeners = /* @__PURE__ */ new Set();
+var emitPanelChange = () => panelListeners.forEach((l) => l());
+function setPanelOpenGlobal(open) {
+  openPanelCount = Math.max(0, openPanelCount + (open ? 1 : -1));
+  emitPanelChange();
+}
+function useAnyTopBarPanelOpen() {
+  return useSyncExternalStore(
+    (cb) => {
+      panelListeners.add(cb);
+      return () => panelListeners.delete(cb);
+    },
+    () => openPanelCount > 0,
+    () => false
+  );
+}
+function TopBarCountBadge({ count }) {
+  if (!(count > 0)) return null;
+  return /* @__PURE__ */ jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-bold leading-4 text-[#FFFFFF]", children: count > 99 ? "99+" : count });
+}
+function TopBarTooltip({
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "tooltip",
+      className: "pointer-events-none absolute left-1/2 top-full z-50 mt-2 hidden w-max max-w-56 -translate-x-1/2 flex-col rounded-lg border border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex group-focus-visible/tbtip:flex",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute -top-[5px] left-1/2 h-2.5 w-2.5 -translate-x-1/2 rotate-45 border-l border-t border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)]"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--app-btn-tooltip-fg,#FFFFFF)]", children: title }),
+        description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[11px] leading-snug text-[color:var(--app-btn-tooltip-fg,#FFFFFF)] opacity-75", children: description }) : null
+      ]
+    }
+  );
+}
+function TopBarPanelArrow() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 border-l border-t border-[color:var(--line)] bg-[color:var(--panel-elevated)]"
+    }
+  );
+}
+function TopBarWidgetSlot({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "topbar-widget-slot group/tbtip relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsx(TopBarTooltip, { title, description })
+  ] });
+}
+var THEME_OPTIONS = [
+  { value: "light", label: "Light" }
+];
+function NavThemeControl({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Appearance" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": "Appearance",
+        className: "flex overflow-hidden rounded-full border border-[color:var(--line)]",
+        children: THEME_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": value === opt.value,
+            onClick: () => onChange(opt.value),
+            className: [
+              "flex-1 px-3 py-1.5 text-xs font-semibold transition",
+              value === opt.value ? "bg-[color:var(--color-accent-bg-safe,var(--color-accent))] text-[#FFFFFF]" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
+            ].join(" "),
+            children: opt.label
+          },
+          opt.value
+        ))
+      }
+    )
+  ] });
+}
+var CHROME_FETCH_CACHE_TTL_MS = 3e4;
+function chromeCacheKey(path, orgId) {
+  return orgId === void 0 ? path : `${path}::${orgId ?? ""}`;
+}
+function createChromeFetchCache(getFetchJson) {
+  const cache = /* @__PURE__ */ new Map();
+  function dedupedFetch(path, init, opts = {}) {
+    const key = chromeCacheKey(path, opts.orgId);
+    const now = Date.now();
+    const hit = cache.get(key);
+    if (hit && hit.expiresAt > now) return hit.promise;
+    const promise = getFetchJson()(path, init);
+    promise.catch(() => cache.delete(key));
+    cache.set(key, { promise, expiresAt: now + (opts.ttlMs ?? CHROME_FETCH_CACHE_TTL_MS) });
+    return promise;
+  }
+  function invalidate(path) {
+    for (const key of cache.keys()) {
+      if (key === path || key.startsWith(`${path}::`)) cache.delete(key);
+    }
+  }
+  return { dedupedFetch, invalidate };
+}
+var NavChromeContext = createContext(null);
+function NavChromeProvider({
+  fetchJson,
+  notificationsAdapter,
+  children
+}) {
+  const fetchJsonRef = useRef(fetchJson);
+  fetchJsonRef.current = fetchJson;
+  const cacheRef = useRef(null);
+  if (!cacheRef.current) {
+    cacheRef.current = createChromeFetchCache(() => fetchJsonRef.current);
+  }
+  const { dedupedFetch, invalidate: invalidateChromeCache } = cacheRef.current;
+  const defaultAdapterRef = useRef(null);
+  if (!defaultAdapterRef.current) {
+    defaultAdapterRef.current = createCommsNotificationsAdapter(
+      (path, init) => fetchJsonRef.current(path, init)
+    );
+  }
+  const adapter = notificationsAdapter === void 0 ? defaultAdapterRef.current : notificationsAdapter;
+  const [me, setMe] = useState(null);
+  const [meLoaded, setMeLoaded] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    dedupedFetch("me", void 0).then((data) => {
+      if (!cancelled) setMe(data);
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled) setMeLoaded(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dedupedFetch]);
+  return /* @__PURE__ */ jsx(
+    NavChromeContext.Provider,
+    {
+      value: { fetchJson, dedupedFetch, invalidateChromeCache, me, meLoaded, notificationsAdapter: adapter },
+      children
+    }
+  );
+}
+function useChromeMe() {
+  const ctx = useContext(NavChromeContext);
+  return { me: ctx?.me ?? null, loaded: ctx?.meLoaded ?? false };
+}
+function useNavChromeDedupedFetch() {
+  return useContext(NavChromeContext)?.dedupedFetch ?? null;
+}
+function useNavChromeFetcher() {
+  return useContext(NavChromeContext)?.fetchJson ?? null;
+}
+function useNavChrome(component) {
+  const ctx = useContext(NavChromeContext);
+  if (!ctx) {
+    throw new Error(
+      `${component} must be rendered inside <NavChromeProvider> (inject the chrome API fetcher there).`
+    );
+  }
+  return ctx;
+}
+function useChromeOrgs({ enabled = true } = {}) {
+  const { dedupedFetch } = useNavChrome("useChromeOrgs");
+  const [orgs, setOrgs] = useState(null);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    dedupedFetch("orgs", void 0).then((data) => {
+      if (cancelled) return;
+      const list = data?.orgs ?? [];
+      setOrgs(list);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dedupedFetch, enabled]);
+  return { orgs, loading, error };
+}
+function ValueSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: [
+        "inline-block animate-pulse rounded bg-[color:var(--panel-elevated)]",
+        className ?? "h-4 w-16"
+      ].join(" ")
+    }
+  );
+}
+function SlotGlyph({
+  slot,
+  fallback: Fallback,
+  size = TOPBAR_GLYPH_SIZE
+}) {
+  const glyphName = useTopBarIconSlotGlyph(slot ?? "apps");
+  const BrandGlyph = slot ? resolveBrandGlyph(glyphName) : null;
+  const Glyph = BrandGlyph ?? Fallback;
+  return /* @__PURE__ */ jsx(Glyph, { size, className: "text-current" });
+}
+function TopBarPopover({
+  label,
+  description,
+  slot,
+  fallbackIcon,
+  badge,
+  tone,
+  onOpen,
+  openToken,
+  onOpenChange,
+  hideTooltip = false,
+  children,
+  panelClassName
+}) {
+  const [open, setOpen] = useState(false);
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  useEffect(() => {
+    onOpenChangeRef.current?.(open);
+    if (!open) return;
+    setPanelOpenGlobal(true);
+    return () => setPanelOpenGlobal(false);
+  }, [open]);
+  const rootRef = useRef(null);
+  const lastOpenTokenRef = useRef(openToken);
+  useEffect(() => {
+    if (openToken === void 0) return;
+    if (openToken === lastOpenTokenRef.current) return;
+    lastOpenTokenRef.current = openToken;
+    setOpen((v) => {
+      if (!v) onOpen?.();
+      return true;
+    });
+  }, [openToken, onOpen]);
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        "aria-expanded": open,
+        className: topBarIconButtonClass(tone),
+        onClick: () => {
+          setOpen((v) => {
+            const next = !v;
+            if (next) onOpen?.();
+            return next;
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
+          typeof badge === "number" ? /* @__PURE__ */ jsx(TopBarCountBadge, { count: badge }) : null,
+          !open && !hideTooltip ? /* @__PURE__ */ jsx(TopBarTooltip, { title: label, description }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          "absolute right-0 z-40 mt-2 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]",
+          panelClassName ?? "w-80"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsx(TopBarPanelArrow, {}),
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children })
+        ]
+      }
+    ) : null
+  ] });
+}
+function BatteryGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "10", x2: "5", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "10", x2: "9", y2: "14" })
+  ] });
+}
+function BellGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+    /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+  ] });
+}
+function BellOffGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.63 13A17.9 17.9 0 0 1 18 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 8a6 6 0 0 0-9.33-5" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] });
+}
+function LifeBuoyGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
+    /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
+    /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
+  ] });
+}
+function LayoutGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "21", x2: "9", y2: "9" })
+  ] });
+}
+function PlusGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function XGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function CheckGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+var LOW_FUEL_HINT_DISMISSED_KEY = "politogy_low_fuel_hint_dismissed";
+function FuelRow({
+  label,
+  channel,
+  loading,
+  addHref,
+  addLabel
+}) {
+  const remaining = channel?.remainingUnits ?? 0;
+  const total = channel ? Math.max(channel.rawBalanceUnits, channel.remainingUnits) : 0;
+  const ratio = total > 0 ? Math.min(100, Math.max(0, remaining / total * 100)) : 0;
+  const low = channel?.lowFuel ?? false;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        loading ? /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: [
+              "text-xs font-semibold tabular-nums",
+              low ? "text-[color:var(--chrome-danger)]" : "text-[color:var(--muted)]"
+            ].join(" "),
+            children: [
+              remaining.toLocaleString(),
+              " left"
+            ]
+          }
+        ),
+        addHref ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: addHref,
+            "aria-label": addLabel,
+            className: "flex h-5 w-5 items-center justify-center rounded-full border border-[color:var(--line)] text-[color:var(--muted)] transition hover:border-[color:var(--foreground)] hover:text-[color:var(--foreground)]",
+            children: /* @__PURE__ */ jsx(PlusGlyph, {})
+          }
+        ) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: loading ? /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "h-full rounded-full transition-[width]",
+          low ? "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--color-ok,#00783B)]"
+        ].join(" "),
+        style: { width: `${ratio}%` }
+      }
+    ) })
+  ] });
+}
+var lowFuelHintVisible = false;
+var lowFuelHintListeners = /* @__PURE__ */ new Set();
+function setLowFuelHintVisible(visible) {
+  if (lowFuelHintVisible === visible) return;
+  lowFuelHintVisible = visible;
+  lowFuelHintListeners.forEach((l) => l());
+}
+function subscribeLowFuelHintVisible(onChange) {
+  lowFuelHintListeners.add(onChange);
+  return () => lowFuelHintListeners.delete(onChange);
+}
+function useLowFuelHintVisible() {
+  return useSyncExternalStore(
+    subscribeLowFuelHintVisible,
+    () => lowFuelHintVisible,
+    () => false
+  );
+}
+var LOW_FUEL_HINT_CLEARANCE_PX = 96;
+function LowFuelHint({ lowFuel, orgId }) {
+  const [dismissed, setDismissed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.sessionStorage.getItem(LOW_FUEL_HINT_DISMISSED_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+  useEffect(() => {
+    if (lowFuel) return;
+    try {
+      window.sessionStorage.removeItem(LOW_FUEL_HINT_DISMISSED_KEY);
+    } catch {
+    }
+  }, [lowFuel]);
+  const panelOpen = useAnyTopBarPanelOpen();
+  const showing = lowFuel && !dismissed && !panelOpen;
+  useEffect(() => {
+    setLowFuelHintVisible(showing);
+    return () => setLowFuelHintVisible(false);
+  }, [showing]);
+  if (!showing) return null;
+  const dismiss = () => {
+    try {
+      window.sessionStorage.setItem(LOW_FUEL_HINT_DISMISSED_KEY, "1");
+    } catch {
+    }
+    setDismissed(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: "absolute right-0 top-[calc(100%+10px)] z-[60] w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--chrome-danger)]"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "You\u2019re low on fuel" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: withOrgParam(CORE_BILLING_URL, orgId),
+                className: "mt-1 inline-block text-sm font-bold underline hover:opacity-90",
+                children: "Buy More Fuel"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Dismiss low fuel notice",
+              onClick: dismiss,
+              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[#FFFFFF]/90 transition hover:bg-[#FFFFFF]/20",
+              children: /* @__PURE__ */ jsx(XGlyph, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FuelAction({ orgId }) {
+  const { dedupedFetch } = useNavChrome("FuelAction");
+  const [fuel, setFuel] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    if (!orgId) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(false);
+    setFuel(null);
+    dedupedFetch(
+      "communications/fuel-status",
+      { headers: orgId ? { "x-contacts-org": orgId } : void 0 },
+      { orgId }
+    ).then((data) => {
+      if (cancelled) return;
+      setFuel(data?.fuel ?? null);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dedupedFetch, orgId]);
+  const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
+  const lowFuelHintUp = useLowFuelHintVisible();
+  return (
+    // The nudge anchors to the trigger, so it sits OUTSIDE the popover panel in
+    // its own relative wrapper (same shape the VRM widget used).
+    /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        TopBarPopover,
+        {
+          label: "Communications Fuel",
+          description: "Remaining SMS and email sending balance for the active organization.",
+          slot: "comms-fuel",
+          fallbackIcon: BatteryGlyph,
+          tone: low ? "warning" : "default",
+          hideTooltip: lowFuelHintUp,
+          children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Communications Fuel" }),
+            error || !loading && !fuel ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Fuel balance is unavailable right now." }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsx(
+                FuelRow,
+                {
+                  label: "SMS Signal",
+                  channel: fuel?.signal ?? null,
+                  loading,
+                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
+                  addLabel: "Add SMS Signal fuel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FuelRow,
+                {
+                  label: "Email Broadcast",
+                  channel: fuel?.broadcast ?? null,
+                  loading,
+                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
+                  addLabel: "Add Email Broadcast fuel"
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(LowFuelHint, { lowFuel: low, orgId })
+    ] })
+  );
+}
+function notifStateKey(orgId) {
+  return `politogy_chrome_notif_state:${orgId ?? "none"}`;
+}
+function readNotifState(orgId) {
+  const empty = { readAlertIds: [], lastSeenAt: null, toastedReplyIds: [] };
+  if (typeof window === "undefined") return empty;
+  try {
+    const raw = window.localStorage.getItem(notifStateKey(orgId));
+    if (!raw) return empty;
+    const parsed = JSON.parse(raw);
+    return {
+      readAlertIds: Array.isArray(parsed?.readAlertIds) ? parsed.readAlertIds.filter((id) => typeof id === "string") : [],
+      lastSeenAt: typeof parsed?.lastSeenAt === "string" ? parsed.lastSeenAt : null,
+      toastedReplyIds: Array.isArray(parsed?.toastedReplyIds) ? parsed.toastedReplyIds.filter((id) => typeof id === "string") : []
+    };
+  } catch {
+    return empty;
+  }
+}
+function writeNotifState(orgId, state) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(notifStateKey(orgId), JSON.stringify(state));
+  } catch {
+  }
+}
+var TOASTS_MUTED_KEY = "politogy_chrome_toasts_muted";
+function readToastsMuted() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.sessionStorage.getItem(TOASTS_MUTED_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeToastsMuted(muted) {
+  if (typeof window === "undefined") return;
+  try {
+    if (muted) window.sessionStorage.setItem(TOASTS_MUTED_KEY, "1");
+    else window.sessionStorage.removeItem(TOASTS_MUTED_KEY);
+  } catch {
+  }
+}
+function formatPhone(raw) {
+  const digits = raw.replace(/\D/g, "");
+  const ten = digits.length === 11 && digits.startsWith("1") ? digits.slice(1) : digits;
+  if (ten.length === 10) return `(${ten.slice(0, 3)}) ${ten.slice(3, 6)}-${ten.slice(6)}`;
+  return raw;
+}
+function ImportRow({ imp }) {
+  const pct = imp.percent == null ? null : Math.max(0, Math.min(100, imp.percent));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-[color:var(--foreground)]", children: imp.label }),
+      pct != null ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs tabular-nums text-[color:var(--muted)]", children: [
+        Math.round(pct),
+        "%"
+      ] }) : null
+    ] }),
+    pct != null ? /* @__PURE__ */ jsx("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full rounded-full bg-[color:var(--color-accent)] transition-[width]",
+        style: { width: `${pct}%` }
+      }
+    ) }) : null
+  ] });
+}
+function NewReplyToast({
+  reply,
+  onActivate,
+  onClose,
+  onSilence,
+  ttlMs = 12e3
+}) {
+  const [visible, setVisible] = useState(false);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const lowFuelHintVisible2 = useLowFuelHintVisible();
+  useEffect(() => {
+    setVisible(true);
+    const fadeAt = Math.max(0, ttlMs - 450);
+    const t1 = window.setTimeout(() => setVisible(false), fadeAt);
+    const t2 = window.setTimeout(() => onCloseRef.current(), ttlMs);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, [ttlMs]);
+  const activate = () => {
+    setVisible(false);
+    onActivate();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Open new reply",
+      onClick: activate,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          activate();
+        }
+      },
+      className: "absolute right-[-6px] top-[calc(100%+12px)] z-50 min-w-[240px] max-w-[320px] cursor-pointer rounded-xl bg-[#161616] px-4 py-3 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
+      style: {
+        top: lowFuelHintVisible2 ? `calc(100% + 12px + ${LOW_FUEL_HINT_CLEARANCE_PX}px)` : void 0,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0px)" : "translateY(-4px)",
+        transition: "opacity 250ms ease, transform 250ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute right-[18px] top-[-7px] h-0 w-0 border-x-[8px] border-x-transparent border-b-[8px] border-b-[#161616]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss notification",
+            onClick: (e) => {
+              e.stopPropagation();
+              setVisible(false);
+              onClose();
+            },
+            className: "absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full text-[#FFFFFF] opacity-60 transition hover:bg-[#FFFFFF]/10 hover:opacity-100",
+            children: /* @__PURE__ */ jsx(XGlyph, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "truncate pr-6 text-sm font-semibold", children: reply.name }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs opacity-85", children: reply.preview }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setVisible(false);
+              onSilence();
+            },
+            className: "mt-2 inline-flex items-center gap-1 text-[11px] font-semibold text-[#FFFFFF] opacity-60 transition hover:opacity-100",
+            children: [
+              /* @__PURE__ */ jsx(BellOffGlyph, { size: 12 }),
+              "Silence notifications"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function NotificationsAction({ orgId }) {
+  const { dedupedFetch, notificationsAdapter } = useNavChrome("NotificationsAction");
+  const [payload, setPayload] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [notif, setNotif] = useState(() => readNotifState(orgId));
+  const [toastReply, setToastReply] = useState(null);
+  const [toastsMuted, setToastsMuted] = useState(() => readToastsMuted());
+  const [openToken, setOpenToken] = useState(0);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [reloadToken, setReloadToken] = useState(0);
+  const anyPanelOpen = useAnyTopBarPanelOpen();
+  useEffect(() => {
+    setNotif(readNotifState(orgId));
+    setToastReply(null);
+  }, [orgId]);
+  useEffect(() => {
+    let cancelled = false;
+    if (!orgId) {
+      setLoading(false);
+      return;
+    }
+    if (notificationsAdapter) {
+      setError(false);
+      notificationsAdapter.list(orgId).then((feed) => {
+        if (!cancelled) setPayload(notificationsFeedToPayload(feed, orgId));
+      }).catch(() => {
+        if (!cancelled) setPayload(notificationsFeedToPayload(emptyNotificationsFeed(), orgId));
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+    setLoading(true);
+    setError(false);
+    setPayload(null);
+    dedupedFetch(
+      "notifications",
+      { headers: orgId ? { "x-contacts-org": orgId } : void 0 },
+      { orgId }
+    ).then((data) => {
+      if (!cancelled) setPayload(data);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dedupedFetch, notificationsAdapter, orgId, reloadToken]);
+  const markRead = useCallback(
+    (id) => {
+      if (notificationsAdapter) {
+        void notificationsAdapter.markRead(id).then((ok) => {
+          if (ok) setReloadToken((t) => t + 1);
+        });
+      }
+      setNotif((prev) => {
+        if (prev.readAlertIds.includes(id)) return prev;
+        const next = { ...prev, readAlertIds: [...prev.readAlertIds, id] };
+        writeNotifState(orgId, next);
+        return next;
+      });
+    },
+    [orgId, notificationsAdapter]
+  );
+  const markUnread = useCallback(
+    (id) => {
+      setNotif((prev) => {
+        if (!prev.readAlertIds.includes(id)) return prev;
+        const next = { ...prev, readAlertIds: prev.readAlertIds.filter((x) => x !== id) };
+        writeNotifState(orgId, next);
+        return next;
+      });
+    },
+    [orgId]
+  );
+  const onOpen = useCallback(() => {
+    setToastReply(null);
+    setNotif((prev) => {
+      const next = { ...prev, lastSeenAt: (/* @__PURE__ */ new Date()).toISOString() };
+      writeNotifState(orgId, next);
+      return next;
+    });
+  }, [orgId]);
+  const alerts = payload?.alerts ?? [];
+  const replies = payload?.replies ?? [];
+  const imports = payload?.imports ?? [];
+  const quarantined = payload?.quarantined ?? [];
+  useEffect(() => {
+    if (toastsMuted) return;
+    if (!payload || toastReply || panelOpen) return;
+    const candidate = replies.filter((r) => {
+      if (!r.createdAt) return false;
+      if (notif.lastSeenAt && r.createdAt <= notif.lastSeenAt) return false;
+      return !notif.toastedReplyIds.includes(r.id);
+    }).sort((a, b) => a.createdAt < b.createdAt ? 1 : -1)[0];
+    if (!candidate) return;
+    setToastReply(candidate);
+    setNotif((prev) => {
+      const next = {
+        ...prev,
+        toastedReplyIds: [candidate.id, ...prev.toastedReplyIds].slice(0, 50)
+      };
+      writeNotifState(orgId, next);
+      return next;
+    });
+  }, [
+    payload,
+    replies,
+    toastReply,
+    panelOpen,
+    toastsMuted,
+    notif.lastSeenAt,
+    notif.toastedReplyIds,
+    orgId
+  ]);
+  const setMuted = useCallback((muted) => {
+    writeToastsMuted(muted);
+    setToastsMuted(muted);
+  }, []);
+  const onToastSilence = useCallback(() => {
+    setMuted(true);
+    setToastReply(null);
+  }, [setMuted]);
+  const onToastActivate = useCallback(() => {
+    const href = toastReply?.href;
+    setToastReply(null);
+    if (href && typeof window !== "undefined") {
+      window.location.assign(href);
+      return;
+    }
+    setOpenToken((t) => t + 1);
+  }, [toastReply]);
+  const isAlertRead = (a) => a.read === true || notif.readAlertIds.includes(a.id);
+  const unreadAlertCount = alerts.filter((a) => !isAlertRead(a)).length;
+  const unseenReplyCount = replies.filter((r) => {
+    if (!notif.lastSeenAt) return true;
+    if (!r.createdAt) return false;
+    return r.createdAt > notif.lastSeenAt;
+  }).length;
+  const badgeCount = notificationsAdapter && payload?.badge !== void 0 ? payload.badge : unreadAlertCount + unseenReplyCount;
+  const isEmpty = alerts.length === 0 && replies.length === 0 && imports.length === 0 && quarantined.length === 0;
+  const toastVisible = toastReply !== null && !panelOpen && !anyPanelOpen;
+  return (
+    // Relative wrapper so the new-reply toast anchors to the bell trigger,
+    // outside the popover panel (same pattern as the fuel low-fuel nudge).
+    /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        TopBarPopover,
+        {
+          label: "Alerts & Notifications",
+          description: "System alerts and recent activity for the active organization.",
+          slot: "notifications",
+          fallbackIcon: BellGlyph,
+          badge: loading ? 0 : badgeCount,
+          onOpen,
+          openToken,
+          onOpenChange: setPanelOpen,
+          hideTooltip: toastVisible,
+          children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+              toastsMuted ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMuted(false),
+                  className: "text-[11px] font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
+                  children: "Unsilence"
+                }
+              ) : null
+            ] }),
+            loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
+              /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-4 w-full" }),
+              /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-4 w-3/4" })
+            ] }) : error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Notifications are unavailable right now." }) : isEmpty ? /* @__PURE__ */ jsx("p", { className: "py-1 text-sm text-[color:var(--muted)]", children: "You\u2019re all caught up." }) : /* @__PURE__ */ jsxs("div", { className: "flex max-h-80 flex-col gap-2 overflow-y-auto", children: [
+              alerts.length > 0 || replies.length > 0 ? /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-1", children: [
+                alerts.map((a) => {
+                  const isRead = isAlertRead(a);
+                  return /* @__PURE__ */ jsx("li", { className: isRead ? "opacity-50" : void 0, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
+                    /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: a.href ?? "#",
+                        onClick: () => markRead(a.id),
+                        className: "block min-w-0 flex-1",
+                        children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: a.title }),
+                          /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--muted)]", children: a.description })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": isRead ? "Mark as unread" : "Mark as read",
+                        onClick: () => isRead && !notificationsAdapter ? markUnread(a.id) : markRead(a.id),
+                        className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)]",
+                        children: /* @__PURE__ */ jsx(CheckGlyph, {})
+                      }
+                    )
+                  ] }) }, a.id);
+                }),
+                replies.map((r) => {
+                  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
+                  ] });
+                  return /* @__PURE__ */ jsx("li", { children: r.href ? /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: r.href,
+                      "aria-label": `Open the conversation with ${r.name}`,
+                      className: "block rounded-lg px-2 py-2 transition hover:bg-[color:var(--panel)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-accent)]",
+                      children: body
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "rounded-lg px-2 py-2", children: body }) }, r.id);
+                })
+              ] }) : null,
+              imports.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Imports" }),
+                /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: imports.map((imp) => /* @__PURE__ */ jsx("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: imp.href ? /* @__PURE__ */ jsx("a", { href: imp.href, className: "block", children: /* @__PURE__ */ jsx(ImportRow, { imp }) }) : /* @__PURE__ */ jsx(ImportRow, { imp }) }, imp.id)) })
+              ] }) : null,
+              quarantined.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Quarantined Contacts" }),
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: withOrgParam(QUARANTINED_CONTACTS_URL, orgId),
+                      className: "text-[11px] font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
+                      children: "View all"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: quarantined.map((q) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: withPhoneParam(withOrgParam(QUARANTINED_CONTACTS_URL, orgId), q.phone),
+                    "aria-label": `Review ${q.count} quarantined message${q.count === 1 ? "" : "s"} from ${formatPhone(q.phone)}`,
+                    className: "block rounded-lg px-2 py-2 transition hover:bg-[color:var(--nav-row-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-accent)]",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: formatPhone(q.phone) }),
+                        /* @__PURE__ */ jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--panel)] px-1 text-[10px] font-normal leading-none tabular-nums text-[color:var(--muted)]", children: q.count > 99 ? "99+" : q.count })
+                      ] }),
+                      q.latestAt ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--muted)]", children: new Date(q.latestAt).toLocaleString() }) : null
+                    ]
+                  }
+                ) }, q.phone)) })
+              ] }) : null
+            ] })
+          ] })
+        }
+      ),
+      toastVisible && toastReply ? /* @__PURE__ */ jsx(
+        NewReplyToast,
+        {
+          reply: toastReply,
+          onActivate: onToastActivate,
+          onClose: () => setToastReply(null),
+          onSilence: onToastSilence
+        }
+      ) : null
+    ] })
+  );
+}
+function composeSupportMessage(input) {
+  const ctx = [`Page: ${input.pageTitle || "Unknown"}`, `URL: ${input.url}`];
+  if (input.orgName) ctx.push(`Org: ${input.orgName}`);
+  const reply = [input.replyEmail?.trim(), input.replyPhone?.trim()].filter(Boolean).join(" / ");
+  if (reply) ctx.push(`Reply-to: ${reply}`);
+  return `${input.note.trim()}
+
+---
+${ctx.join("\n")}`;
+}
+function SupportAction({
+  orgId,
+  orgs: knownOrgs
+} = {}) {
+  const { fetchJson } = useNavChrome("SupportAction");
+  const { me, loaded } = useChromeMe();
+  const { orgs: fetchedOrgs } = useChromeOrgs({ enabled: !knownOrgs });
+  const orgs = knownOrgs ?? fetchedOrgs;
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [showEmailError, setShowEmailError] = useState(false);
+  const [state, setState] = useState("idle");
+  const meEmail = me?.email ?? null;
+  const mePhone = me?.phone ?? null;
+  const missingEmail = loaded && !meEmail;
+  const missingPhone = loaded && !mePhone;
+  const activeOrg = (orgId ? orgs?.find((o) => o.id === orgId) : null) ?? (orgs && orgs.length === 1 ? orgs[0] : null);
+  const orgName = activeOrg?.name ?? null;
+  const close = useCallback(() => {
+    setOpen(false);
+    setState("idle");
+    setMessage("");
+    setShowEmailError(false);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    setEmail(meEmail ?? "");
+    setPhone(mePhone ?? "");
+    setShowEmailError(false);
+  }, [open, meEmail, mePhone]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, close]);
+  const submit = async () => {
+    if (!message.trim() || state === "sending") return;
+    const resolvedEmail = (missingEmail ? email : meEmail ?? "").trim();
+    const resolvedPhone = (missingPhone ? phone : mePhone ?? "").trim();
+    if (missingEmail && !resolvedEmail) {
+      setShowEmailError(true);
+      return;
+    }
+    setShowEmailError(false);
+    const collectedContact = missingEmail || missingPhone;
+    const fullMessage = composeSupportMessage({
+      note: message,
+      pageTitle: typeof document !== "undefined" ? document.title : "",
+      url: typeof window !== "undefined" ? window.location.href : "",
+      orgName,
+      replyEmail: collectedContact ? resolvedEmail : void 0,
+      replyPhone: collectedContact ? resolvedPhone : void 0
+    });
+    setState("sending");
+    try {
+      await fetchJson("support", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: fullMessage })
+      });
+      setState("sent");
+    } catch {
+      setState("error");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Support",
+        className: topBarIconButtonClass(),
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsx(SlotGlyph, { slot: "support", fallback: LifeBuoyGlyph }),
+          /* @__PURE__ */ jsx(
+            TopBarTooltip,
+            {
+              title: "Support",
+              description: "Send a support request to the Politogy team."
+            }
+          )
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Support request",
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) close();
+          },
+          children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
+            state === "sent" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
+              /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: close,
+                  className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-4 py-2 text-sm font-semibold text-[#FFFFFF] hover:opacity-90",
+                  children: "Done"
+                }
+              ) })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
+              missingEmail ? /* @__PURE__ */ jsxs("label", { className: "mt-4 block", children: [
+                /* @__PURE__ */ jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your email" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "email",
+                    value: email,
+                    onChange: (e) => setEmail(e.target.value),
+                    placeholder: "you@example.com",
+                    className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
+                  }
+                ),
+                showEmailError ? /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-[color:var(--chrome-danger)]", children: "Enter an email so support can reply." }) : null
+              ] }) : null,
+              missingPhone ? /* @__PURE__ */ jsxs("label", { className: "mt-3 block", children: [
+                /* @__PURE__ */ jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your phone \u2014 optional" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "tel",
+                    value: phone,
+                    onChange: (e) => setPhone(e.target.value),
+                    placeholder: "(503) 555-1212",
+                    className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  value: message,
+                  onChange: (e) => setMessage(e.target.value),
+                  rows: 5,
+                  placeholder: "How can we help?",
+                  className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
+                }
+              ),
+              state === "error" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[color:var(--chrome-danger)]", children: "Sending failed \u2014 try again." }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: close,
+                    className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: submit,
+                    disabled: !message.trim() || state === "sending",
+                    className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-4 py-2 text-sm font-semibold text-[#FFFFFF] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+                    children: state === "sending" ? "Sending\u2026" : "Send request"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+var SPEC_OVERLAY_ACCESS_CACHE_KEY = "politogy_spec_overlay_access";
+function readSpecOverlayAccessCache() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(SPEC_OVERLAY_ACCESS_CACHE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.allowed === "boolean") return parsed;
+  } catch {
+  }
+  return null;
+}
+function writeSpecOverlayAccessCache(access) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(SPEC_OVERLAY_ACCESS_CACHE_KEY, JSON.stringify(access));
+  } catch {
+  }
+}
+var locationChangeListeners = /* @__PURE__ */ new Set();
+var historyPatched = false;
+function ensureHistoryPatched() {
+  if (historyPatched || typeof window === "undefined") return;
+  historyPatched = true;
+  const notify = () => locationChangeListeners.forEach((fn) => fn());
+  const originalPushState = window.history.pushState.bind(window.history);
+  const originalReplaceState = window.history.replaceState.bind(window.history);
+  window.history.pushState = (...args) => {
+    originalPushState(...args);
+    notify();
+  };
+  window.history.replaceState = (...args) => {
+    originalReplaceState(...args);
+    notify();
+  };
+  window.addEventListener("popstate", notify);
+}
+function useLocationHref() {
+  const [href, setHref] = useState(
+    () => typeof window === "undefined" ? "" : window.location.href
+  );
+  useEffect(() => {
+    ensureHistoryPatched();
+    const onChange = () => setHref(window.location.href);
+    locationChangeListeners.add(onChange);
+    return () => {
+      locationChangeListeners.delete(onChange);
+    };
+  }, []);
+  return href;
+}
+function specOverlayFetchJson(path) {
+  return fetch(`${SPECS_ORIGIN}${path}`, { credentials: "include", signal: AbortSignal.timeout(1e4) }).then((res) => {
+    if (!res.ok) throw new Error(`spec overlay ${path}: ${res.status}`);
+    return res.json();
+  });
+}
+function isAutomatedCaptureSession() {
+  return typeof navigator !== "undefined" && navigator.webdriver === true;
+}
+function currentChromeTheme() {
+  const root = document.documentElement;
+  if (root.classList.contains("dark") || root.getAttribute("data-theme") === "dark") return "dark";
+  if (root.classList.contains("light") || root.getAttribute("data-theme") === "light") return "light";
+  return "light";
+}
+var SPEC_OVERLAY_ROOT_ATTR = "data-spec-overlay-root";
+async function captureMyView(status, orgId, orgName) {
+  const { domToCanvas } = await import('modern-screenshot');
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const theme = currentChromeTheme();
+  const bg = getComputedStyle(document.body).backgroundColor || (theme === "dark" ? "#0b0b0c" : "#ffffff");
+  const full = await domToCanvas(document.body, {
+    width: w,
+    height: h,
+    scale: 1,
+    backgroundColor: bg,
+    // Cross-origin images that refuse CORS render blank instead of failing.
+    fetch: { requestInit: { mode: "cors", credentials: "omit" }, placeholderImage: "" },
+    // Drop the Spec drawer and everything fixed (sidebar, toasts, popovers):
+    // the design is the page body only, so chrome would only add noise.
+    filter: (node) => !(node instanceof Element) || !node.hasAttribute(SPEC_OVERLAY_ROOT_ATTR) && getComputedStyle(node).position !== "fixed",
+    style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)` }
+  });
+  const el = (status.live_selector ? document.querySelector(status.live_selector) : null) ?? document.querySelector("[data-shell-content]");
+  let region = { x: 0, y: 0, width: w, height: h };
+  if (el) {
+    const r = el.getBoundingClientRect();
+    const x = Math.max(0, Math.round(r.left));
+    const y = Math.max(0, Math.round(r.top));
+    region = { x, y, width: Math.min(w - x, Math.round(r.width)), height: Math.min(h - y, Math.round(r.height)) };
+  }
+  const out = document.createElement("canvas");
+  out.width = region.width;
+  out.height = region.height;
+  const ctx = out.getContext("2d");
+  if (!ctx) throw new Error("page raster failed");
+  ctx.drawImage(full, region.x, region.y, region.width, region.height, 0, 0, region.width, region.height);
+  const blob = await new Promise((resolve) => out.toBlob(resolve, "image/png"));
+  if (!blob) throw new Error("page raster failed");
+  const form = new FormData();
+  form.append("image", blob, "live.png");
+  form.append(
+    "meta",
+    JSON.stringify({ url: window.location.href, theme, org_id: orgId ?? null, org_name: orgName ?? null, crop: null })
+  );
+  const res = await fetch(status.capture_url ?? `${SPECS_ORIGIN}/api/overlay/capture`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "X-Spec-Capture": "1" },
+    body: form,
+    signal: AbortSignal.timeout(1e4)
+  });
+  if (!res.ok) throw new Error(`capture ${res.status}: ${(await res.text()).slice(0, 160)}`);
+}
+function SpecCaptureLoading() {
+  return /* @__PURE__ */ jsxs("div", { "data-spec-capture-loading": "", role: "status", "aria-live": "polite", className: "flex-1 overflow-hidden px-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-3 text-sm text-[color:var(--foreground)]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "inline-block h-5 w-5 animate-spin rounded-full border-2 border-[color:var(--line)] border-t-[color:var(--color-accent)] motion-reduce:animate-none"
+        }
+      ),
+      "Capturing your view and comparing\u2026"
+    ] }),
+    ["Live \u2014 your view", "Diff"].map((label) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--muted)]", children: label }),
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-40 w-full animate-pulse rounded border border-[color:var(--line)] bg-[color:var(--panel)] motion-reduce:animate-none" })
+    ] }, label))
+  ] });
+}
+function specOverlayStatusPath() {
+  return `/api/overlay/status?url=${encodeURIComponent(window.location.href)}&theme=${currentChromeTheme()}`;
+}
+function SpecOverlayAction({ orgId, orgName } = {}) {
+  const [access, setAccess] = useState(() => readSpecOverlayAccessCache());
+  const [status, setStatus] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [capture, setCapture] = useState({ state: "idle" });
+  const [frameKey, setFrameKey] = useState(0);
+  const [copied, setCopied] = useState("idle");
+  const href = useLocationHref();
+  const automated = isAutomatedCaptureSession();
+  useEffect(() => {
+    if (access || automated) return;
+    let cancelled = false;
+    specOverlayFetchJson("/api/overlay/access").then((data) => {
+      if (cancelled) return;
+      const next = data && typeof data.allowed === "boolean" ? data : { allowed: false };
+      setAccess(next);
+      writeSpecOverlayAccessCache(next);
+    }).catch(() => {
+      if (cancelled) return;
+      const next = { allowed: false };
+      setAccess(next);
+      writeSpecOverlayAccessCache(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [access]);
+  useEffect(() => {
+    if (automated || !access?.allowed || typeof window === "undefined") return;
+    const timer = window.setTimeout(() => {
+      specOverlayFetchJson(specOverlayStatusPath()).then((data) => setStatus(data)).catch(() => setStatus(null));
+    }, 300);
+    return () => window.clearTimeout(timer);
+  }, [access?.allowed, href, orgId]);
+  const captureRun = useRef(0);
+  const accessRef = useRef(access);
+  accessRef.current = access;
+  const runCapture = async (s) => {
+    const run = ++captureRun.current;
+    const before = s.live_source === "viewer" ? s.finished_at : null;
+    setCapture({ state: "busy" });
+    try {
+      await new Promise((r) => setTimeout(r, 150));
+      await captureMyView(s, orgId, orgName);
+      for (let i = 0; i < 45; i++) {
+        await new Promise((r) => setTimeout(r, 3e3));
+        if (run !== captureRun.current) return;
+        if (!accessRef.current?.allowed) {
+          setCapture({ state: "idle" });
+          return;
+        }
+        const next = await specOverlayFetchJson(specOverlayStatusPath()).catch(() => null);
+        if (next && next.matched && next.live_source === "viewer" && next.finished_at !== before) {
+          setStatus(next);
+          setFrameKey((k) => k + 1);
+          setCapture({ state: "idle" });
+          return;
+        }
+      }
+      setCapture({ state: "error", message: "Compare did not finish in 2 min." });
+    } catch (e) {
+      if (run === captureRun.current) setCapture({ state: "error", message: e instanceof Error ? e.message : String(e) });
+    }
+  };
+  useEffect(() => {
+    if (automated || !open || !status || !status.matched) return;
+    void runCapture(status);
+    return () => {
+      captureRun.current++;
+    };
+  }, [open, status && status.matched ? status.target_id : null]);
+  if (automated || !access?.allowed) return null;
+  const hasScore = status && status.matched && typeof status.mismatch_pct === "number";
+  const badgeLabel = hasScore ? `${Math.round(status.mismatch_pct)}%` : status ? "\u2014" : void 0;
+  const badgeTone = hasScore ? status && status.matched && status.passed ? "default" : "danger" : "default";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Spec",
+        "aria-expanded": open,
+        className: topBarIconButtonClass(badgeTone),
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsx(LayoutGlyph, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
+          badgeLabel ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: [
+                "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-normal leading-none text-[#FFFFFF]",
+                hasScore ? status && status.matched && status.passed ? "bg-[color:var(--chrome-success,#2f855a)]" : "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--muted)]"
+              ].join(" "),
+              children: badgeLabel
+            }
+          ) : null,
+          !open ? /* @__PURE__ */ jsx(
+            TopBarTooltip,
+            {
+              title: "Spec",
+              description: "Spec design + visual regression for this page."
+            }
+          ) : null
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex justify-end bg-black/40",
+          ...{ [SPEC_OVERLAY_ROOT_ATTR]: "" },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Spec overlay",
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) setOpen(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setOpen(false);
+          },
+          children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full max-w-[480px] flex-col border-l border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[color:var(--line)] px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("h2", { className: "truncate text-sm font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: [
+                "Spec",
+                status && status.matched ? `: ${status.spec_title}` : ""
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  onClick: () => setOpen(false),
+                  className: "rounded-full p-1 text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]",
+                  children: /* @__PURE__ */ jsx(CloseGlyph, { size: 16 })
+                }
+              )
+            ] }),
+            status && status.matched ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-[color:var(--line)] px-4 py-2 text-xs font-semibold", children: [
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: status.spec_url,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
+                    children: "Open spec \u2197"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: status.compare_url,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
+                    children: "Compare tab \u2197"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: capture.state === "busy",
+                    onClick: () => void runCapture(status),
+                    className: "ml-auto rounded-md border border-[color:var(--line)] px-2 py-1 text-[color:var(--foreground)] hover:bg-[color:var(--panel)] disabled:opacity-60",
+                    title: "Your view is captured when the drawer opens. Recapture after changing the page.",
+                    children: capture.state === "busy" ? "Capturing\u2026" : "Recapture"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-spec-copy-prompt": "",
+                    disabled: capture.state === "busy" || !status.prompt,
+                    onClick: () => {
+                      const text = status.prompt;
+                      if (!text) return;
+                      navigator.clipboard.writeText(text).then(() => setCopied("copied")).catch(() => setCopied("failed")).finally(() => window.setTimeout(() => setCopied("idle"), 2e3));
+                    },
+                    className: "rounded-md border border-[color:var(--line)] px-2 py-1 text-[color:var(--foreground)] hover:bg-[color:var(--panel)] disabled:opacity-60",
+                    title: "Copy a repair prompt for an AI agent: spec, score, image links, top mismatched regions and instructions.",
+                    children: copied === "copied" ? "Copied \u2713" : copied === "failed" ? "Copy failed" : "Copy prompt"
+                  }
+                )
+              ] }),
+              status.live_size && status.design_size && capture.state !== "busy" ? /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  "data-spec-sizes": "",
+                  className: [
+                    "border-b border-[color:var(--line)] px-4 py-1.5 text-xs",
+                    status.live_size.width === status.design_size.width && status.live_size.height === status.design_size.height ? "text-[color:var(--muted)]" : "font-semibold text-[color:var(--chrome-danger)]"
+                  ].join(" "),
+                  children: [
+                    "Live ",
+                    status.live_size.width,
+                    "\xD7",
+                    status.live_size.height,
+                    " \xB7 Design ",
+                    status.design_size.width,
+                    "\xD7",
+                    status.design_size.height,
+                    status.live_size.width === status.design_size.width && status.live_size.height === status.design_size.height ? " \xB7 sizes match" : " \xB7 SIZE MISMATCH"
+                  ]
+                }
+              ) : null,
+              capture.state === "error" ? /* @__PURE__ */ jsx("p", { className: "border-b border-[color:var(--line)] px-4 py-2 text-xs text-[color:var(--chrome-danger)]", children: capture.message }) : null,
+              capture.state === "busy" ? /* @__PURE__ */ jsx(SpecCaptureLoading, {}) : /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  src: status.overlay_url,
+                  title: "Spec overlay",
+                  className: "h-full w-full flex-1 border-0"
+                },
+                frameKey
+              )
+            ] }) : status && !status.matched ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-[color:var(--muted)]", children: [
+              /* @__PURE__ */ jsx("p", { children: "No compare target covers this page." }),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: status.search_url,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "mt-2 inline-block font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
+                  children: "Search specs \u2197"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-4 w-full" }) })
+          ] })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+function CloseGlyph({ size = 16, className }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+var NAV_DISPLAY_OPTIONS = [
+  { value: "menu", label: "Sub Menu" },
+  { value: "tabs", label: "Tabs Only" },
+  { value: "both", label: "Both" }
+];
+function NavDisplayAction({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    TopBarPopover,
+    {
+      label: "Navigation Display",
+      description: "Show navigation as a sub-menu, tabs, or both.",
+      fallbackIcon: LayoutGlyph,
+      panelClassName: "w-44",
+      children: /* @__PURE__ */ jsx("div", { className: "py-1", role: "radiogroup", "aria-label": "Navigation display", children: NAV_DISPLAY_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": value === opt.value,
+          onClick: () => onChange(opt.value),
+          className: [
+            "flex w-full items-center justify-between px-4 py-2 text-left text-sm font-medium",
+            value === opt.value ? "text-[color:var(--color-accent-fg,var(--color-accent))]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+          ].join(" "),
+          children: [
+            opt.label,
+            value === opt.value ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2713" }) : null
+          ]
+        },
+        opt.value
+      )) })
+    }
+  );
+}
+function useThemePreference() {
+  const ctx = useContext(NavChromeContext);
+  const fetchJson = ctx?.fetchJson ?? null;
+  const [value, setValueState] = useState("system");
+  const reconciled = useRef(false);
+  useEffect(() => {
+    const cookie = readThemeCookie();
+    let ls = null;
+    try {
+      ls = localStorage.getItem(THEME_STORAGE_KEY);
+    } catch {
+    }
+    const pref = cookie ?? (isThemePreference(ls) ? ls : null) ?? "system";
+    setValueState(pref);
+    applyThemePreference(pref);
+  }, []);
+  const meCtx = useContext(NavChromeContext);
+  useEffect(() => {
+    if (reconciled.current) return;
+    const pending = readPendingThemeChoice();
+    if (pending) {
+      if (meCtx?.me) reconciled.current = true;
+      setValueState(pending);
+      applyThemePreference(pending);
+      writeThemeCookie(pending);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, pending);
+      } catch {
+      }
+      if (!meCtx?.me) return;
+      fetchJson?.("me/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ themePreference: pending })
+      }).then(() => clearPendingThemeChoice()).catch(() => {
+      });
+      return;
+    }
+    const pref = meCtx?.me?.themePreference;
+    if (isThemePreference(pref)) {
+      reconciled.current = true;
+      setValueState(pref);
+      applyThemePreference(pref);
+      writeThemeCookie(pref);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, pref);
+      } catch {
+      }
+    }
+  }, [meCtx?.me]);
+  useEffect(() => {
+    const onStorage = (e) => {
+      if (e.key === THEME_STORAGE_KEY && isThemePreference(e.newValue)) {
+        setValueState(e.newValue);
+        applyThemePreference(e.newValue);
+      }
+    };
+    const onWake = () => {
+      const cookie = readThemeCookie();
+      if (cookie) {
+        setValueState((prev) => {
+          if (cookie !== prev) applyThemePreference(cookie);
+          return cookie;
+        });
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    window.addEventListener("focus", onWake);
+    document.addEventListener("visibilitychange", onWake);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener("focus", onWake);
+      document.removeEventListener("visibilitychange", onWake);
+    };
+  }, []);
+  const setValue = useCallback(
+    (next) => {
+      setValueState(next);
+      applyThemePreference(next);
+      writeThemeCookie(next);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, next);
+      } catch {
+      }
+      markThemeChoicePending(next);
+      fetchJson?.("me/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ themePreference: next })
+      }).then(() => clearPendingThemeChoice()).catch(() => {
+      });
+    },
+    [fetchJson]
+  );
+  return { value, setValue };
+}
+
+// src/speculation/emitRules.ts
+function buildSpeculationRules(currentApp, registry) {
+  const others = registry.filter(
+    (entry) => entry.id !== currentApp && entry.visible !== false
+  );
+  if (others.length === 0) return null;
+  const payload = {
+    prerender: [
+      {
+        urls: others.map((entry) => entry.path),
+        eagerness: "moderate"
+      }
+    ]
+  };
+  return JSON.stringify(payload);
+}
+var DESTRUCTIVE_LABEL_PATTERNS = ["sign out", "signout", "log out", "logout", "delete"];
+var DESTRUCTIVE_PATH_PATTERNS = ["/signout", "/sign-out", "/logout", "/log-out"];
+function isDestructive(item) {
+  const label = item.label.toLowerCase();
+  if (DESTRUCTIVE_LABEL_PATTERNS.some((p) => label.includes(p))) return true;
+  const href = (item.href ?? "").toLowerCase();
+  return DESTRUCTIVE_PATH_PATTERNS.some((p) => href.includes(p));
+}
+function collectSiblingAppUrls(items, currentOrigin) {
+  const urls = /* @__PURE__ */ new Set();
+  const walk = (list) => {
+    for (const item of list) {
+      if (item.kind === "section") continue;
+      if (item.href && !isDestructive(item)) {
+        try {
+          const url = new URL(item.href, currentOrigin);
+          if (url.origin !== currentOrigin && /^https?:$/.test(url.protocol)) {
+            urls.add(url.href);
+          }
+        } catch {
+        }
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  };
+  walk(items);
+  return Array.from(urls);
+}
+function buildNavSpeculationRules(items, currentOrigin = typeof window !== "undefined" ? window.location.origin : "") {
+  const urls = collectSiblingAppUrls(items, currentOrigin);
+  if (urls.length === 0) return null;
+  return {
+    prerender: [{ source: "list", urls, eagerness: "moderate" }]
+  };
+}
+var SCRIPT_ID = "politogy-speculation-rules";
+var PREFETCH_ATTR = "data-politogy-speculation-prefetch";
+function SpeculationRulesScript({ items }) {
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const rules = useMemo(() => buildNavSpeculationRules(items, origin), [items, origin]);
+  const json = rules ? JSON.stringify(rules) : null;
+  useEffect(() => {
+    if (!json || typeof document === "undefined") return;
+    let el = document.getElementById(SCRIPT_ID);
+    if (!el) {
+      el = document.createElement("script");
+      el.id = SCRIPT_ID;
+      el.type = "speculationrules";
+      document.head.appendChild(el);
+    }
+    el.textContent = json;
+    return () => {
+    };
+  }, [json]);
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+    const supportsSpecRules = typeof HTMLScriptElement !== "undefined" && typeof HTMLScriptElement.supports === "function" && HTMLScriptElement.supports(
+      "speculationrules"
+    );
+    if (supportsSpecRules) return;
+    const urls = collectSiblingAppUrls(items, origin);
+    if (urls.length === 0) return;
+    const schedule = typeof window.requestIdleCallback === "function" ? window.requestIdleCallback : (cb) => setTimeout(cb, 2e3);
+    const added = [];
+    schedule(() => {
+      for (const url of urls) {
+        if (document.querySelector(`link[${PREFETCH_ATTR}][href="${url}"]`)) continue;
+        const link = document.createElement("link");
+        link.rel = "prefetch";
+        link.href = url;
+        link.setAttribute(PREFETCH_ATTR, "");
+        document.head.appendChild(link);
+        added.push(link);
+      }
+    });
+    return () => {
+      added.forEach((l) => l.remove());
+    };
+  }, [items, origin]);
+  return null;
+}
+
+export { CORE_APP_ORIGIN, CORE_BILLING_PATH, FormColumn, FuelAction, NAV_DISPLAY_OPTIONS, NavChromeProvider, NavDisplayAction, NavThemeControl, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SpeculationRulesScript, SupportAction, TOPBAR_GLYPH_SIZE, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, emptyNotificationsFeed, normalizeNotificationsFeed, resolveBrandGlyph, resolveOrgLogoUrl, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeDedupedFetch, useNavChromeFetcher, useThemePreference, useTopBarIconSlotGlyph, warnDeprecated };
+//# sourceMappingURL=chunk-TUK2IEL5.js.map
+//# sourceMappingURL=chunk-TUK2IEL5.js.map