@the-portland-company/shell 0.18.1 → 0.19.1

package/dist/app-chrome.cjs

@@ -0,0 +1,919 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var fi = require('react-icons/fi');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+var devnotes = require('@the-portland-company/devnotes');
+
+function useTopBarIconSlotGlyph(slot) {
+  const [name, setName] = react.useState(null);
+  react.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": fi.FiBatteryCharging,
+  battery: fi.FiBattery,
+  fuel: fi.FiBatteryCharging,
+  bolt: fi.FiZap,
+  zap: fi.FiZap,
+  grid: fi.FiGrid,
+  apps: fi.FiGrid,
+  bell: fi.FiBell,
+  notification: fi.FiBell,
+  "alert-triangle": fi.FiAlertTriangle,
+  alert: fi.FiAlertTriangle,
+  "alert-circle": fi.FiAlertCircle,
+  "life-buoy": fi.FiLifeBuoy,
+  "life-ring": fi.FiLifeBuoy,
+  support: fi.FiLifeBuoy,
+  "help-circle": fi.FiHelpCircle,
+  moon: fi.FiMoon,
+  sun: fi.FiSun,
+  info: fi.FiInfo,
+  mail: fi.FiMail,
+  "message-square": fi.FiMessageSquare,
+  settings: fi.FiSettings,
+  user: fi.FiUser
+};
+function resolveBrandGlyph(name) {
+  if (!name) return null;
+  return GLYPHS[name.trim().toLowerCase()] ?? null;
+}
+
+// src/theme-preference.ts
+var THEME_STORAGE_KEY = "politogy_theme";
+var THEME_COOKIE = "politogy_theme";
+var VALID = ["light", "dark", "system"];
+function isThemePreference(v) {
+  return typeof v === "string" && VALID.includes(v);
+}
+function readThemeCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${THEME_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isThemePreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeThemeCookie(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const onParentDomain = /(^|\.)politogyvrm\.com$/i.test(host);
+  const domainAttr = onParentDomain ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(
+    pref
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function resolveTheme(pref) {
+  if (pref === "system") {
+    try {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } catch {
+      return "light";
+    }
+  }
+  return pref;
+}
+function applyThemePreference(pref) {
+  if (typeof document === "undefined") return;
+  const resolved = resolveTheme(pref);
+  const d = document.documentElement;
+  d.classList.toggle("dark", resolved === "dark");
+  try {
+    d.style.colorScheme = resolved;
+  } catch {
+  }
+}
+`(function(){try{
+var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
+var VALID=["light","dark","system"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${THEME_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+var pref=cookie||ls||"system";
+if(VALID.indexOf(pref)===-1)pref="system";
+if(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}
+var resolved=pref;
+if(pref==="system"){try{resolved=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}catch(e){resolved="light";}}
+var d=document.documentElement;
+if(resolved==="dark"){d.classList.add("dark");}else{d.classList.remove("dark");}
+try{d.style.colorScheme=resolved;}catch(e){}
+}catch(e){}})();`;
+function topBarIconButtonClass(tone = "default") {
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "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-full border border-[color:var(--line)] transition",
+    "h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)]",
+    toneClass
+  ].join(" ");
+}
+function TopBarCountBadge({ count }) {
+  if (!(count > 0)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white", children: count > 99 ? "99+" : count });
+}
+function TopBarTooltip({
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxRuntime.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(--line)] bg-[color:var(--panel-elevated)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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(--line)] bg-[color:var(--panel-elevated)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-[11px] leading-snug text-[color:var(--muted)]", children: description }) : null
+      ]
+    }
+  );
+}
+function TopBarPanelArrow() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "topbar-widget-slot group/tbtip relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title, description })
+  ] });
+}
+var NavChromeContext = react.createContext(null);
+function NavChromeProvider({
+  fetchJson,
+  children
+}) {
+  const [me, setMe] = react.useState(null);
+  const [meLoaded, setMeLoaded] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    fetchJson("me").then((data) => {
+      if (!cancelled) setMe(data);
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled) setMeLoaded(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson]);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson, me, meLoaded }, children });
+}
+function useNavChrome(component) {
+  const ctx = react.useContext(NavChromeContext);
+  if (!ctx) {
+    throw new Error(
+      `${component} must be rendered inside <NavChromeProvider> (inject the chrome API fetcher there).`
+    );
+  }
+  return ctx;
+}
+function useChromeOrgs() {
+  const { fetchJson } = useNavChrome("useChromeOrgs");
+  const [orgs, setOrgs] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    fetchJson("orgs").then((data) => {
+      if (cancelled) return;
+      const list = data?.orgs ?? [];
+      setOrgs(list);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson]);
+  return { orgs, loading, error };
+}
+function ValueSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.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 = 20
+}) {
+  const glyphName = useTopBarIconSlotGlyph(slot ?? "apps");
+  const BrandGlyph = slot ? resolveBrandGlyph(glyphName) : null;
+  const Glyph = BrandGlyph ?? Fallback;
+  return /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size, className: "text-current" });
+}
+function TopBarPopover({
+  label,
+  description,
+  slot,
+  fallbackIcon,
+  badge,
+  tone,
+  onOpen,
+  children,
+  panelClassName
+}) {
+  const [open, setOpen] = react.useState(false);
+  const rootRef = react.useRef(null);
+  react.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__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
+          typeof badge === "number" ? /* @__PURE__ */ jsxRuntime.jsx(TopBarCountBadge, { count: badge }) : null,
+          !open ? /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-xl", children })
+        ]
+      }
+    ) : null
+  ] });
+}
+function BatteryGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "10", x2: "5", y2: "14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "10", x2: "9", y2: "14" })
+  ] });
+}
+function BellGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+  ] });
+}
+function LifeBuoyGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
+  ] });
+}
+function LayoutGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "21", x2: "9", y2: "9" })
+  ] });
+}
+function FuelRow({
+  label,
+  channel,
+  loading
+}) {
+  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__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: label }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: [
+            "text-xs font-semibold tabular-nums",
+            low ? "text-[color:var(--color-race-red)]" : "text-[color:var(--muted)]"
+          ].join(" "),
+          children: [
+            remaining.toLocaleString(),
+            " left"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: [
+          "h-full rounded-full transition-[width]",
+          low ? "bg-[color:var(--color-race-red)]" : "bg-[color:var(--color-ok,#00A651)]"
+        ].join(" "),
+        style: { width: `${ratio}%` }
+      }
+    ) })
+  ] });
+}
+function FuelAction({ orgId }) {
+  const { fetchJson } = useNavChrome("FuelAction");
+  const [fuel, setFuel] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    setFuel(null);
+    fetchJson("communications/fuel-status", {
+      headers: orgId ? { "x-contacts-org": orgId } : void 0
+    }).then((data) => {
+      if (cancelled) return;
+      setFuel(data?.fuel ?? null);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson, orgId]);
+  const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
+  return /* @__PURE__ */ jsxRuntime.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",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Communications Fuel" }),
+        error || !loading && !fuel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Fuel balance is unavailable right now." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FuelRow, { label: "SMS Signal", channel: fuel?.signal ?? null, loading }),
+          /* @__PURE__ */ jsxRuntime.jsx(FuelRow, { label: "Email Broadcast", channel: fuel?.broadcast ?? null, loading })
+        ] })
+      ] })
+    }
+  );
+}
+function NotificationsAction({ orgId }) {
+  const { fetchJson } = useNavChrome("NotificationsAction");
+  const [payload, setPayload] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    setPayload(null);
+    fetchJson("notifications", {
+      headers: orgId ? { "x-contacts-org": orgId } : void 0
+    }).then((data) => {
+      if (!cancelled) setPayload(data);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson, orgId]);
+  const count = (payload?.alerts.length ?? 0) + (payload?.replies.length ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarPopover,
+    {
+      label: "Alerts & Notifications",
+      description: "System alerts and recent activity for the active organization.",
+      slot: "notifications",
+      fallbackIcon: BellGlyph,
+      badge: loading ? 0 : count,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-3/4" })
+        ] }) : error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Notifications are unavailable right now." }) : count === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-1 text-sm text-[color:var(--muted)]", children: "You\u2019re all caught up." }) : /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex max-h-80 flex-col gap-1 overflow-y-auto", children: [
+          payload?.alerts.map((a) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: a.href ?? "#",
+              className: "block rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: a.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: a.description })
+              ]
+            }
+          ) }, a.id)),
+          payload?.replies.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
+          ] }, r.id))
+        ] })
+      ] })
+    }
+  );
+}
+function SupportAction() {
+  const { fetchJson } = useNavChrome("SupportAction");
+  const [open, setOpen] = react.useState(false);
+  const [message, setMessage] = react.useState("");
+  const [state, setState] = react.useState("idle");
+  const close = react.useCallback(() => {
+    setOpen(false);
+    setState("idle");
+    setMessage("");
+  }, []);
+  react.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;
+    setState("sending");
+    try {
+      await fetchJson("support", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: message.trim() })
+      });
+      setState("sent");
+    } catch {
+      setState("error");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Support",
+        className: topBarIconButtonClass(),
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot: "support", fallback: LifeBuoyGlyph }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TopBarTooltip,
+            {
+              title: "Support",
+              description: "Send a support request to the Politogy team."
+            }
+          )
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
+            state === "sent" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: close,
+                  className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
+                  children: "Done"
+                }
+              ) })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
+              /* @__PURE__ */ jsxRuntime.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-race-red)]"
+                }
+              ),
+              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: submit,
+                    disabled: !message.trim() || state === "sending",
+                    className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+                    children: state === "sending" ? "Sending\u2026" : "Send request"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+var NAV_DISPLAY_OPTIONS = [
+  { value: "menu", label: "Sub Menu" },
+  { value: "tabs", label: "Tabs Only" },
+  { value: "both", label: "Both" }
+];
+function NavDisplayAction({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarPopover,
+    {
+      label: "Navigation Display",
+      description: "Show navigation as a sub-menu, tabs, or both.",
+      fallbackIcon: LayoutGlyph,
+      panelClassName: "w-44",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", role: "radiogroup", "aria-label": "Navigation display", children: NAV_DISPLAY_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.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-race-red)]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+          ].join(" "),
+          children: [
+            opt.label,
+            value === opt.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2713" }) : null
+          ]
+        },
+        opt.value
+      )) })
+    }
+  );
+}
+function useThemePreference() {
+  const ctx = react.useContext(NavChromeContext);
+  const fetchJson = ctx?.fetchJson ?? null;
+  const [value, setValueState] = react.useState("system");
+  const reconciled = react.useRef(false);
+  react.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 = react.useContext(NavChromeContext);
+  react.useEffect(() => {
+    if (reconciled.current) 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]);
+  react.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);
+    };
+  }, []);
+  react.useEffect(() => {
+    if (value !== "system") return;
+    let mq;
+    try {
+      mq = window.matchMedia("(prefers-color-scheme: dark)");
+    } catch {
+      return;
+    }
+    const onChange = () => applyThemePreference("system");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [value]);
+  const setValue = react.useCallback(
+    (next) => {
+      setValueState(next);
+      applyThemePreference(next);
+      writeThemeCookie(next);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, next);
+      } catch {
+      }
+      fetchJson?.("me/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ themePreference: next })
+      }).catch(() => {
+      });
+    },
+    [fetchJson]
+  );
+  return { value, setValue };
+}
+var ORG_STORAGE_KEY = "vrm.activeOrg";
+var NAV_DISPLAY_KEY = "vrm.navDisplay";
+var CORE_BASE_URL = "https://app.politogyvrm.com";
+var ChromeStateContext = react.createContext(null);
+function useChromeState() {
+  return react.useContext(ChromeStateContext);
+}
+function ChromeStateProvider({ children }) {
+  const { orgs } = useChromeOrgs();
+  const [orgId, setOrgIdState] = react.useState(null);
+  const [navDisplay, setNavDisplayState] = react.useState("both");
+  react.useEffect(() => {
+    try {
+      const storedOrg = localStorage.getItem(ORG_STORAGE_KEY);
+      if (storedOrg) setOrgIdState(storedOrg);
+      const storedNav = localStorage.getItem(NAV_DISPLAY_KEY);
+      if (storedNav === "menu" || storedNav === "tabs" || storedNav === "both") {
+        setNavDisplayState(storedNav);
+      }
+    } catch {
+    }
+  }, []);
+  react.useEffect(() => {
+    if (!orgs || orgs.length === 0) return;
+    setOrgIdState((prev) => prev && orgs.some((o) => o.id === prev) ? prev : orgs[0].id);
+  }, [orgs]);
+  const setOrgId = react.useCallback((id) => {
+    setOrgIdState(id);
+    try {
+      localStorage.setItem(ORG_STORAGE_KEY, id);
+    } catch {
+    }
+  }, []);
+  const setNavDisplay = react.useCallback((m) => {
+    setNavDisplayState(m);
+    try {
+      localStorage.setItem(NAV_DISPLAY_KEY, m);
+    } catch {
+    }
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      orgId,
+      setOrgId,
+      orgs: (orgs ?? []).map((o) => ({
+        id: o.id,
+        name: o.name,
+        logoUrl: o.logoUrl,
+        brandColor: o.brandColor,
+        role: o.role,
+        rawRole: o.rawRole ?? null
+      })),
+      navDisplay,
+      setNavDisplay
+    }),
+    [orgId, setOrgId, orgs, navDisplay, setNavDisplay]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChromeStateContext.Provider, { value, children });
+}
+function AppDevNotes({
+  storagePrefix,
+  proxyBasePath,
+  identity,
+  children
+}) {
+  const adapter = react.useMemo(
+    () => devnotes.createDevNotesClient({
+      basePath: `${proxyBasePath}/devnotes`,
+      // The proxy attaches the session's Bearer server-side.
+      getAuthToken: async () => ""
+    }),
+    [proxyBasePath]
+  );
+  const user = react.useMemo(
+    () => ({
+      id: identity.userId,
+      email: identity.email ?? "",
+      fullName: identity.userName ?? void 0
+    }),
+    [identity.userId, identity.email, identity.userName]
+  );
+  const config = react.useMemo(
+    () => ({
+      storagePrefix,
+      role: identity.role.toLowerCase() === "admin" ? "admin" : "reporter",
+      disableAi: true,
+      getPagePath: () => window.location.pathname
+    }),
+    [storagePrefix, identity.role]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesProvider, { adapter, user, config, children });
+}
+function PolitogyAppChrome({
+  storagePrefix,
+  proxyBasePath = "/api/chrome",
+  fetchJson: fetchJsonOverride,
+  identity,
+  children
+}) {
+  const proxyFetchJson = react.useMemo(
+    () => async (path, init) => {
+      const res = await fetch(`${proxyBasePath}/${path}`, {
+        method: init?.method ?? "GET",
+        headers: init?.headers,
+        body: init?.body
+      });
+      if (!res.ok) throw new Error(`chrome ${path}: ${res.status}`);
+      if (res.status === 204) return null;
+      const text = await res.text();
+      return text ? JSON.parse(text) : null;
+    },
+    [proxyBasePath]
+  );
+  const fetchJson = fetchJsonOverride ?? proxyFetchJson;
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeProvider, { fetchJson, children: /* @__PURE__ */ jsxRuntime.jsx(ChromeStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    AppDevNotes,
+    {
+      storagePrefix,
+      proxyBasePath,
+      identity,
+      children
+    }
+  ) }) });
+}
+function ChromeTopBarActions() {
+  const state = useChromeState();
+  if (!state) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FuelAction, { orgId: state.orgId }),
+    /* @__PURE__ */ jsxRuntime.jsx(NavDisplayAction, { value: state.navDisplay, onChange: state.setNavDisplay }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TopBarWidgetSlot,
+      {
+        title: "DevNotes",
+        description: "Capture bugs and notes, filed straight to Forge.",
+        children: /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesMenu, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId })
+  ] });
+}
+function useIsSuperAdmin() {
+  const state = useChromeState();
+  return (state?.orgs ?? []).some((o) => /super/i.test(o.rawRole ?? ""));
+}
+var FOOTER_LINKS = [
+  { label: "Privacy", href: `${CORE_BASE_URL}/privacy-policy`, external: true },
+  { label: "Terms", href: `${CORE_BASE_URL}/terms-and-conditions`, external: true },
+  {
+    label: "Subscriptions",
+    href: "https://politogyvrm.com/subscription-cancellation-policy",
+    external: true
+  }
+];
+function useChromeFooter(meta) {
+  const isSuperAdmin = useIsSuperAdmin();
+  return react.useMemo(
+    () => isSuperAdmin ? { links: FOOTER_LINKS, ...meta } : { links: FOOTER_LINKS },
+    [isSuperAdmin, meta.envLabel, meta.version, meta.commit, meta.commitDate, meta.commitAuthor]
+  );
+}
+function useChromeUserMenu({
+  userId,
+  userName,
+  email
+}) {
+  const state = useChromeState();
+  const theme = useThemePreference();
+  const activeOrg = state?.orgs.find((o) => o.id === state.orgId) ?? null;
+  const orgSuffix = activeOrg ? `?org=${activeOrg.id.slice(-6)}` : "";
+  return {
+    // My Profile is global — NOT org-suffixed (main-app ShellChromeBridge).
+    myProfileHref: `${CORE_BASE_URL}/my-profile`,
+    organizationSettingsHref: `${CORE_BASE_URL}/organization-settings${orgSuffix}`,
+    roles: (state?.orgs ?? []).filter((o) => o.rawRole || o.role).map((o) => ({ role: o.rawRole ?? o.role, orgName: o.name })),
+    accounts: [{ id: userId, name: userName, email, avatarUrl: null, active: true }],
+    addAccountHref: `${CORE_BASE_URL}/my-profile#accounts`,
+    theme: { value: theme.value, onChange: theme.setValue }
+  };
+}
+
+exports.ChromeTopBarActions = ChromeTopBarActions;
+exports.PolitogyAppChrome = PolitogyAppChrome;
+exports.useChromeFooter = useChromeFooter;
+exports.useChromeState = useChromeState;
+exports.useChromeUserMenu = useChromeUserMenu;
+exports.useIsSuperAdmin = useIsSuperAdmin;
+//# sourceMappingURL=app-chrome.cjs.map
+//# sourceMappingURL=app-chrome.cjs.map