@the-portland-company/shell 0.24.0 → 0.26.0

package/dist/app-chrome.cjs

@@ -57,6 +57,7 @@ function resolveBrandGlyph(name) {
 // src/theme-preference.ts
 var THEME_STORAGE_KEY = "politogy_theme";
 var THEME_COOKIE = "politogy_theme";
+var THEME_PENDING_COOKIE = "politogy_theme_pending";
 var VALID = ["light", "dark", "system"];
 function isThemePreference(v) {
   return typeof v === "string" && VALID.includes(v);
@@ -83,6 +84,33 @@ function writeThemeCookie(pref) {
     pref
   )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
 }
+function writeSharedCookie(name, value, maxAgeSeconds) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${name}=${encodeURIComponent(
+    value
+  )}; Path=/; Max-Age=${maxAgeSeconds}; SameSite=Lax${domainAttr}${secure}`;
+}
+function markThemeChoicePending(pref) {
+  writeSharedCookie(THEME_PENDING_COOKIE, pref, 31536e3);
+}
+function readPendingThemeChoice() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${THEME_PENDING_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isThemePreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function clearPendingThemeChoice() {
+  writeSharedCookie(THEME_PENDING_COOKIE, "", 0);
+}
 function resolveTheme(pref) {
   if (pref === "system") {
     try {
@@ -173,6 +201,42 @@ function TopBarWidgetSlot({
     /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title, description })
   ] });
 }
+var THEME_OPTIONS = [
+  { value: "light", label: "Light" },
+  { value: "system", label: "System" },
+  { value: "dark", label: "Dark" }
+];
+function NavThemeControl({
+  value,
+  onChange
+}) {
+  return /* @__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: "Appearance" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": "Appearance",
+        className: "flex overflow-hidden rounded-full border border-[color:var(--line)]",
+        children: THEME_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.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-race-red)] text-white" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
+            ].join(" "),
+            children: opt.label
+          },
+          opt.value
+        ))
+      }
+    )
+  ] });
+}
 var NavChromeContext = react.createContext(null);
 function NavChromeProvider({
   fetchJson,
@@ -194,6 +258,10 @@ function NavChromeProvider({
   }, [fetchJson]);
   return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson, me, meLoaded }, children });
 }
+function useChromeMe() {
+  const ctx = react.useContext(NavChromeContext);
+  return { me: ctx?.me ?? null, loaded: ctx?.meLoaded ?? false };
+}
 function useNavChromeFetcher() {
   return react.useContext(NavChromeContext)?.fetchJson ?? null;
 }
@@ -661,6 +729,25 @@ function useThemePreference() {
   const meCtx = react.useContext(NavChromeContext);
   react.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;
@@ -719,17 +806,1281 @@ function useThemePreference() {
         localStorage.setItem(THEME_STORAGE_KEY, next);
       } catch {
       }
+      markThemeChoicePending(next);
       fetchJson?.("me/preferences", {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ themePreference: next })
-      }).catch(() => {
+      }).then(() => clearPendingThemeChoice()).catch(() => {
       });
     },
     [fetchJson]
   );
   return { value, setValue };
 }
+
+// src/native/standardNav.ts
+var CONTACTS_DEFAULT_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/contacts/dashboard" },
+  { label: "All Contacts", icon: "list", path: "/relationship/contacts/all" },
+  { label: "Tribes", icon: "users", path: "/relationship/contacts/groups" },
+  { label: "Import", icon: "upload", path: "/relationship/contacts/import" },
+  { label: "Import History", icon: "fileText", path: "/relationship/contacts/import-history" },
+  { label: "Merge Rules", icon: "layout", path: "/relationship/contacts/merge-rules" }
+];
+var EMAIL_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/email/dashboard" },
+  { label: "Create & Edit", icon: "edit", path: "/relationship/email/create-and-edit" },
+  { label: "Sender Information", icon: "mail", path: "/relationship/email/inbox" },
+  { label: "Recipients", icon: "user", path: "/relationship/email/send-to" },
+  { label: "Send & Automate", icon: "clock", path: "/relationship/email/send-and-automate" },
+  { label: "Statistics", icon: "barChart", path: "/relationship/email/statistics" }
+];
+var SMS_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/sms-mms-blast/dashboard" },
+  { label: "Compose & Send", icon: "send", path: "/relationship/sms-mms-blast/compose-and-send" },
+  { label: "Conversations", icon: "messageSquare", path: "/relationship/sms-mms-blast/conversations" }
+];
+var CTA_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/cta-database/dashboard" },
+  { label: "Create & Edit", icon: "edit", path: "/relationship/cta-creator/create-and-edit" },
+  { label: "Submissions", icon: "fileText", path: "/relationship/cta-submissions/submissions" }
+];
+var ORG_SETTINGS_CHILDREN = [
+  { label: "General", icon: "settings", path: "/organization-settings" },
+  {
+    label: "Subscription & Billing",
+    icon: "creditCard",
+    path: "/organization-settings/subscription-billing",
+    children: [
+      { label: "Current Plan", icon: "fileText", path: "/organization-settings/subscription-billing/current-plan" },
+      { label: "SMS, MMS & Email Usage", icon: "activity", path: "/organization-settings/subscription-billing/text-email" },
+      { label: "Wallet", icon: "dollarSign", path: "/organization-settings/subscription-billing/wallet" },
+      { label: "10DLC", icon: "messageSquare", path: "/organization-settings/subscription-billing/10dlc" },
+      { label: "Billing History", icon: "clock", path: "/organization-settings/subscription-billing/billing-history" }
+    ]
+  },
+  { label: "Email", icon: "mail", path: "/organization-settings/email-settings" },
+  { label: "Users", icon: "users", path: "/organization-settings/users" },
+  { label: "Shared Links", icon: "share", path: "/organization-settings/shared-links" }
+];
+var APP_FORMS_CHILDREN = [
+  { label: "Forms", icon: "list", href: "https://forms.politogyvrm.com/?tab=forms" },
+  { label: "Canvas", icon: "edit", href: "https://forms.politogyvrm.com/?tab=canvas" },
+  { label: "Submissions", icon: "fileText", href: "https://forms.politogyvrm.com/?tab=submissions" }
+];
+var APP_SURVEYS_CHILDREN = [
+  { label: "Surveys", icon: "list", href: "https://surveys.politogyvrm.com/surveys" }
+];
+var APP_POLLS_CHILDREN = [
+  { label: "Command Center", icon: "grid", href: "https://polls.politogyvrm.com/" },
+  { label: "New Poll", icon: "edit", href: "https://polls.politogyvrm.com/polls/new" }
+];
+function standardPolitogyNav(opts) {
+  const base = opts.coreBaseUrl.replace(/\/+$/, "");
+  const abs = (path) => `${base}${path.startsWith("/") ? path : `/${path}`}`;
+  const icon = (key) => opts.icons?.[key];
+  const leaves = (children) => children.map((c) => ({ label: c.label, icon: icon(c.icon), href: abs(c.path) }));
+  const branches = (children) => children.map((c) => ({
+    label: c.label,
+    icon: icon(c.icon),
+    href: abs(c.path),
+    children: c.children ? leaves(c.children) : void 0
+  }));
+  const contacts = opts.contactsItem ? {
+    label: "Contacts",
+    icon: icon("users"),
+    href: opts.contactsItem.href,
+    children: opts.contactsItem.children
+  } : {
+    label: "Contacts",
+    icon: icon("users"),
+    href: abs("/relationship/contacts/dashboard"),
+    children: leaves(CONTACTS_DEFAULT_CHILDREN)
+  };
+  const items = [
+    { label: "Dashboard", icon: icon("home"), href: abs("/relationship/dashboard") },
+    contacts,
+    {
+      label: "Email Broadcast",
+      icon: icon("mail"),
+      href: abs("/relationship/email/dashboard"),
+      children: leaves(EMAIL_CHILDREN)
+    },
+    {
+      label: "SMS/MMS Blast",
+      icon: icon("messageSquare"),
+      href: abs("/relationship/sms-mms-blast/dashboard"),
+      children: leaves(SMS_CHILDREN)
+    },
+    // These two carry no top-level href in VRM core (parent row only toggles).
+    { label: "Calls to Action", icon: icon("layout"), children: leaves(CTA_CHILDREN) },
+    {
+      label: "Forms",
+      icon: icon("activity"),
+      href: "https://forms.politogyvrm.com/",
+      children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+    },
+    {
+      label: "Surveys",
+      icon: icon("fileText"),
+      href: "https://surveys.politogyvrm.com/surveys",
+      children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+    },
+    {
+      label: "Polls",
+      icon: icon("barChart"),
+      href: "https://polls.politogyvrm.com/",
+      children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+    },
+    {
+      label: "Organization Settings",
+      icon: icon("briefcase"),
+      href: abs("/organization-settings"),
+      children: branches(ORG_SETTINGS_CHILDREN)
+    }
+  ];
+  if (opts.supportItem) {
+    items.push({
+      label: "Support",
+      icon: icon("lifeBuoy"),
+      href: opts.supportItem.href,
+      onClick: opts.supportItem.onClick
+    });
+  }
+  return items;
+}
+var safeHref = (h) => h && /^(https?:|mailto:|tel:|\/|#|\.)/i.test(h.trim()) ? h : "#";
+var DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: safeHref(href), ...rest, children });
+function isNavItemActive(pathname, href) {
+  let targetPath = href;
+  let targetSearch = "";
+  if (/^https?:\/\//i.test(href)) {
+    if (typeof window === "undefined") return false;
+    try {
+      const u = new URL(href);
+      if (u.host !== window.location.host) return false;
+      targetPath = u.pathname;
+      targetSearch = u.search;
+    } catch {
+      return false;
+    }
+  } else {
+    const qi = href.indexOf("?");
+    if (qi >= 0) {
+      targetPath = href.slice(0, qi) || "/";
+      targetSearch = href.slice(qi);
+    }
+  }
+  if (targetSearch) {
+    if (typeof window === "undefined") return false;
+    if (pathname !== targetPath) return false;
+    const want = new URLSearchParams(targetSearch);
+    const have = new URLSearchParams(window.location.search);
+    for (const [k, v] of want) if (have.get(k) !== v) return false;
+    return true;
+  }
+  if (targetPath === "/") return pathname === "/";
+  return pathname === targetPath || pathname.startsWith(`${targetPath}/`);
+}
+function groupKeyOf(item, index) {
+  return item.href ?? `nav-group-${index}-${item.label}`;
+}
+function hasActiveChild(item, pathname, activeFn) {
+  return (item.children ?? []).some(
+    (child) => (child.href ? activeFn(pathname, child.href) : false) || // Depth-3: a grandchild owning the route also opens the top group.
+    (child.children ?? []).some(
+      (leaf) => leaf.href ? activeFn(pathname, leaf.href) : false
+    )
+  );
+}
+function envChipClasses(label) {
+  const l = label.toLowerCase();
+  if (l === "production" || l === "prod")
+    return "bg-[#fee2e2] text-[#ef4444]";
+  if (l === "staging" || l === "stage")
+    return "bg-[#ffedd5] text-[#f97316]";
+  if (l === "local" || l === "development" || l === "dev")
+    return "bg-[#dcfce7] text-[#22c55e]";
+  return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
+}
+var ORG_PILL_DEFAULT = "var(--color-race-red)";
+function NavSidebar({
+  pathname,
+  brand,
+  nav,
+  org,
+  mode,
+  footer,
+  linkComponent
+}) {
+  const Link = linkComponent ?? DefaultLink;
+  const activeFn = nav.isActive ?? isNavItemActive;
+  const ModeIcon = mode?.icon;
+  const orgBg = org?.brandColor || ORG_PILL_DEFAULT;
+  const activeGroupKey = react.useMemo(() => {
+    for (let i = 0; i < nav.items.length; i++) {
+      const item = nav.items[i];
+      if (item.children && item.children.length > 0 && hasActiveChild(item, pathname, activeFn)) {
+        return groupKeyOf(item, i);
+      }
+    }
+    return null;
+  }, [nav.items, pathname, activeFn]);
+  const [openGroup, setOpenGroup] = react.useState(activeGroupKey);
+  react.useEffect(() => {
+    setOpenGroup(activeGroupKey);
+  }, [activeGroupKey]);
+  const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--nav-surface)] lg:flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        href: brand.homeHref ?? "/",
+        className: "flex h-[64px] flex-shrink-0 items-center gap-2.5 px-6",
+        children: brand.logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: brand.logoSrc,
+            alt: brand.logoAlt ?? brand.title,
+            draggable: false,
+            className: "h-10 w-auto object-contain"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-race-red)] text-base font-black text-white shadow-sm", children: brand.badgeLabel }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col leading-tight", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-race-red)]", children: brand.title }),
+            brand.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto px-4 pb-2", children: [
+      org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+          org.id ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
+        ] }),
+        org.organizations && org.organizations.length > 0 && org.onSwitch ? /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)] [&::-webkit-details-marker]:hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: { backgroundColor: orgBg },
+                  className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-bold text-white",
+                  children: org.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: org.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  title: org.name ?? void 0,
+                  className: "truncate text-sm font-semibold",
+                  children: org.name ?? "No organizations"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-72 overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: org.organizations.map((o) => {
+            const selected = o.id === org.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.currentTarget.closest("details")?.removeAttribute("open");
+                  if (!selected) org.onSwitch?.(o.id);
+                },
+                "aria-current": selected ? "true" : void 0,
+                className: [
+                  "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
+                  selected ? "font-semibold text-[color:var(--color-race-red)]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: { backgroundColor: o.brandColor || ORG_PILL_DEFAULT },
+                      className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[10px] font-bold text-white",
+                      children: o.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: o.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (o.name ?? "Org").slice(0, 2).toUpperCase()
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { title: o.name ?? o.id, className: "truncate", children: o.name ?? o.id.slice(0, 8) })
+                ]
+              },
+              o.id
+            );
+          }) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: org.onClick,
+            className: "flex w-full items-center justify-between gap-2 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: { backgroundColor: orgBg },
+                    className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-bold text-white",
+                    children: org.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: org.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold", children: org.name ?? "No organizations" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+            ]
+          }
+        )
+      ] }) : null,
+      mode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: mode.options && mode.options.length > 1 && mode.onSelect ? /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md bg-[color:var(--color-race-red)] px-2.5 py-2 text-white shadow-sm transition hover:opacity-95 [&::-webkit-details-marker]:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
+            ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tracking-[-0.01em]", children: mode.label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-0 z-40 mt-1 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: mode.options.map((opt) => {
+          const selected = opt.label === mode.label;
+          const OptIcon = opt.icon;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.currentTarget.closest("details")?.removeAttribute("open");
+                if (!selected) mode.onSelect?.(opt.id);
+              },
+              "aria-current": selected ? "true" : void 0,
+              className: [
+                "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
+                selected ? "font-semibold text-[color:var(--color-race-red)]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+              ].join(" "),
+              children: [
+                OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 15, className: "shrink-0 text-current" }) : null,
+                opt.label
+              ]
+            },
+            opt.id
+          );
+        }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-race-red)] px-2.5 py-2 text-white shadow-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
+              ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tracking-[-0.01em]", children: mode.label })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+          ]
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-1", children: [
+        nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: nav.groupLabel }) : null,
+        nav.items.map((item, idx) => {
+          if (item.children && item.children.length > 0) {
+            const key = groupKeyOf(item, idx);
+            const selfActive = item.href ? activeFn(pathname, item.href) : false;
+            const parentActive = selfActive || hasActiveChild(item, pathname, activeFn);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              NavGroup,
+              {
+                item,
+                active: parentActive,
+                open: openGroup === key,
+                onToggle: () => toggleGroup(key),
+                pathname,
+                activeFn,
+                Link
+              },
+              key
+            );
+          }
+          const active = item.href ? activeFn(pathname, item.href) : false;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            NavRow,
+            {
+              item,
+              active,
+              Link
+            },
+            item.href ?? `nav-${idx}-${item.label}`
+          );
+        })
+      ] })
+    ] }),
+    footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3", children: [
+      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-1.5 text-xs", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        idx > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: safeHref(l.href),
+            className: "font-medium text-[color:var(--foreground)] opacity-80 hover:opacity-100 hover:underline",
+            children: l.label
+          }
+        )
+      ] }, l.label)) }) : null,
+      footer.envLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: [
+                "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
+                envChipClasses(footer.envLabel)
+              ].join(" "),
+              children: footer.envLabel
+            }
+          ),
+          footer.commit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commit.slice(-4) })
+          ] }) : null,
+          footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "v",
+              footer.version
+            ] })
+          ] }) : null
+        ] }),
+        footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          footer.commitDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
+            month: "short",
+            day: "numeric"
+          }) }) : null,
+          footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+          footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
+        ] }) : null
+      ] }) : null
+    ] }) : null
+  ] });
+}
+function ChevronDown({ className } = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: className ?? "shrink-0 opacity-80",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+var NAV_HOVER_GRADIENT = "linear-gradient(90deg,#EA4751 0%,#E63946 100%)";
+function NavRow({
+  item,
+  active,
+  Link,
+  variant = "top"
+}) {
+  const Icon = item.icon;
+  const isSub = variant === "sub";
+  const activeClasses = isSub ? "bg-[color:var(--panel-elevated)] text-[color:var(--color-race-red)] shadow-sm" : "bg-[color:var(--color-race-red)] text-white shadow-sm";
+  const wrapperClasses = [
+    "group relative block overflow-hidden rounded-md transition",
+    active ? activeClasses : "text-[color:var(--muted)] hover:text-white"
+  ].join(" ");
+  const rowPadding = isSub ? "px-3 py-1.5 text-[13px]" : "px-3 py-2 text-sm";
+  const iconSize = isSub ? 16 : 18;
+  const iconClass = active && !isSub ? "text-white" : "text-current";
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !active ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full",
+        style: { background: NAV_HOVER_GRADIENT }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center gap-3 font-semibold ${rowPadding}`, children: [
+      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: iconClass }) : null,
+      item.label
+    ] })
+  ] });
+  if (item.onClick && !item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: `w-full text-left ${wrapperClasses}`, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link,
+    {
+      href: item.href ?? "#",
+      "aria-current": active ? "page" : void 0,
+      className: wrapperClasses,
+      children: inner
+    }
+  );
+}
+function NavGroup({
+  item,
+  active,
+  open,
+  onToggle,
+  pathname,
+  activeFn,
+  Link
+}) {
+  const Icon = item.icon;
+  const headerClasses = [
+    "group relative block w-full overflow-hidden text-left transition",
+    open ? "rounded-t-md" : "rounded-md",
+    active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : open ? "bg-[color:var(--panel)] text-[color:var(--foreground)]" : "text-[color:var(--muted)] hover:text-white"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": open,
+        className: headerClasses,
+        children: [
+          !active && !open ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full",
+              style: { background: NAV_HOVER_GRADIENT }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold", children: [
+            Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, className: active ? "text-white" : "text-current" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ChevronDown,
+              {
+                className: [
+                  "shrink-0 opacity-80 transition-transform duration-200",
+                  open ? "rotate-180" : ""
+                ].join(" ")
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--panel)] p-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
+      const childActive = child.href ? activeFn(pathname, child.href) : false;
+      if (child.children && child.children.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          NavSubGroup,
+          {
+            item: child,
+            pathname,
+            activeFn,
+            Link
+          },
+          child.href ?? `subgrp-${i}-${child.label}`
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        NavRow,
+        {
+          item: child,
+          active: childActive,
+          Link,
+          variant: "sub"
+        },
+        child.href ?? `sub-${i}-${child.label}`
+      );
+    }) }) }) : null
+  ] });
+}
+function NavSubGroup({
+  item,
+  pathname,
+  activeFn,
+  Link
+}) {
+  const ownsActive = (item.href ? activeFn(pathname, item.href) : false) || (item.children ?? []).some((c) => c.href ? activeFn(pathname, c.href) : false);
+  const [open, setOpen] = react.useState(ownsActive);
+  react.useEffect(() => {
+    if (ownsActive) setOpen(true);
+  }, [ownsActive]);
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        className: [
+          "flex w-full items-center gap-2.5 rounded px-3 py-1.5 text-left text-[13px] font-medium transition",
+          ownsActive ? "text-[color:var(--color-race-red)]" : "text-[color:var(--muted)] hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)]"
+        ].join(" "),
+        children: [
+          Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 15, className: "shrink-0 text-current" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDown,
+            {
+              className: [
+                "shrink-0 opacity-70 transition-transform duration-200",
+                open ? "rotate-180" : ""
+              ].join(" ")
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 flex flex-col gap-0.5 border-l border-[color:var(--line)] pl-2", children: item.children.map((leaf, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      NavRow,
+      {
+        item: leaf,
+        active: leaf.href ? activeFn(pathname, leaf.href) : false,
+        Link,
+        variant: "sub"
+      },
+      leaf.href ?? `subsub-${i}-${leaf.label}`
+    )) }) : null
+  ] });
+}
+function OrgIdCopyButton({ id }) {
+  const [copied, setCopied] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        try {
+          void navigator.clipboard?.writeText(id);
+        } catch {
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      title: "Copy organization id",
+      className: "rounded px-1 text-[11px] text-[color:var(--muted)] hover:bg-[color:var(--panel)]",
+      children: copied ? "Copied" : `...${id.slice(-8)}`
+    }
+  );
+}
+function NavTopBar({
+  title,
+  subtitle,
+  breadcrumbs,
+  user,
+  userMenu,
+  onSignOut,
+  actionsList,
+  actions,
+  themeToggle
+}) {
+  const rawName = user?.name?.trim() || "";
+  const hasRealName = rawName.length > 0 && !rawName.includes("@");
+  const displayName = hasRealName ? formatFirstLast(rawName) : user?.email ?? "Signed in";
+  const initials = (hasRealName ? rawName : user?.email ?? "P").slice(0, 2).toUpperCase();
+  const secondary = hasRealName ? user?.email || [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member" : [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member";
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex h-20 items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-4 backdrop-blur-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: "truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]",
+          "data-display": "true",
+          children: title
+        }
+      ),
+      breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: "flex min-w-0 items-center gap-1.5 text-sm text-[color:var(--muted)]", children: breadcrumbs.map((b, i) => {
+        const last = i === breadcrumbs.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[color:var(--muted)] opacity-60", children: "\u203A" }) : null,
+          b.href && !last ? /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: safeHref(b.href),
+              className: "truncate hover:text-[color:var(--foreground)] hover:underline",
+              children: b.label
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-current": last ? "page" : void 0,
+              className: ["truncate", last ? "text-[color:var(--foreground)]" : ""].join(" "),
+              children: b.label
+            }
+          )
+        ] }, `${b.label}-${i}`);
+      }) }) : subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-[color:var(--muted)]", children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex shrink-0 items-center gap-[var(--topbar-icon-gap,8px)]", children: [
+      actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavTopBarActionButton, { action }, action.key)) : null,
+      actions,
+      themeToggle,
+      /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group/acct relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "group/tbtip relative flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)] items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white", children: user?.avatarUrl || user?.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: user.avatarUrl || user.memojiUrl,
+              alt: "",
+              className: "h-full w-full object-cover"
+            }
+          ) : initials }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-col leading-tight md:flex", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: displayName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--muted)]", children: secondary })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "group-open/acct:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            TopBarTooltip,
+            {
+              title: "My Account",
+              description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                hasRealName ? rawName : user?.email ?? "Signed in",
+                user?.email ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                  user.email
+                ] }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                "Profile, organizations, appearance and sign out."
+              ] })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-30 mt-2 w-72 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
+          userMenu?.myProfileHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: safeHref(userMenu.myProfileHref),
+              className: "flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {}),
+                "My Profile"
+              ]
+            }
+          ) : null,
+          userMenu?.organizationSettingsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: safeHref(userMenu.organizationSettingsHref),
+              className: "flex w-full items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(BriefcaseIcon, {}),
+                "Organization Settings"
+              ]
+            }
+          ) : null,
+          userMenu?.roles && userMenu.roles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[color:var(--line)] 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: "Roles & Organizations" }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: userMenu.roles.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-md bg-[color:var(--panel)] px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-[color:var(--foreground)]", children: r.role }),
+              r.orgName ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[color:var(--muted)]", children: [
+                "in ",
+                r.orgName
+              ] }) : null
+            ] }, `${r.role}-${i}`)) })
+          ] }) : null,
+          userMenu?.accounts && userMenu.accounts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[color:var(--line)] 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: "Accounts" }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: userMenu.accounts.map((a) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (!a.active) userMenu.onSwitchAccount?.(a.id);
+                  },
+                  className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-1 py-1 text-left hover:bg-[color:var(--panel)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-[11px] font-bold text-white", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: [
+                            "truncate text-sm font-semibold",
+                            a.active ? "text-[color:var(--color-race-red)]" : "text-[color:var(--foreground)]"
+                          ].join(" "),
+                          children: a.name ?? a.email ?? a.id.slice(0, 8)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-[color:var(--muted)]", children: a.active ? "Active" : a.email ?? "" })
+                    ] })
+                  ]
+                }
+              ),
+              !a.active && userMenu.onRemoveAccount ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${a.name ?? a.email ?? "account"}`,
+                  onClick: () => userMenu.onRemoveAccount?.(a.id),
+                  className: "shrink-0 rounded p-1 text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                }
+              ) : null
+            ] }, a.id)) }),
+            userMenu.addAccountHref || userMenu.onAddAccount ? userMenu.addAccountHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: safeHref(userMenu.addAccountHref),
+                className: "mt-1.5 flex items-center gap-2.5 rounded-lg px-1 py-1.5 text-sm font-semibold text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
+                  "Add Account"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: userMenu.onAddAccount,
+                className: "mt-1.5 flex w-full items-center gap-2.5 rounded-lg px-1 py-1.5 text-left text-sm font-semibold text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
+                  "Add Account"
+                ]
+              }
+            ) : null
+          ] }) : null,
+          userMenu?.theme ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--line)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            NavThemeControl,
+            {
+              value: userMenu.theme.value,
+              onChange: userMenu.theme.onChange
+            }
+          ) }) : null,
+          onSignOut ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onSignOut,
+              className: "flex w-full items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}),
+                "Sign out"
+              ]
+            }
+          ) : null
+        ] })
+      ] }),
+      !hasRealName && user ? /* @__PURE__ */ jsxRuntime.jsx(NamePromptBubble, { profileHref: userMenu?.myProfileHref }) : null
+    ] })
+  ] });
+}
+function NamePromptBubble({ profileHref }) {
+  const KEY = "politogy_name_prompt_dismissed";
+  const [dismissed, setDismissed] = react.useState(true);
+  react.useEffect(() => {
+    try {
+      setDismissed(sessionStorage.getItem(KEY) === "1");
+    } catch {
+      setDismissed(false);
+    }
+  }, []);
+  if (dismissed) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-4 top-full z-30 mt-2 w-64 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-3 shadow-[var(--shadow-soft)]", children: [
+    /* @__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)]"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: "Add your name" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs leading-snug text-[color:var(--muted)]", children: "Set your first and last name so teammates see you \u2014 not your email." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+      profileHref ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: safeHref(profileHref),
+          className: "rounded-full bg-[color:var(--color-race-red)] px-3 py-1 text-xs font-semibold text-white hover:opacity-90",
+          children: "Set name"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setDismissed(true);
+            try {
+              sessionStorage.setItem(KEY, "1");
+            } catch {
+            }
+          },
+          className: "rounded-full border border-[color:var(--line)] px-3 py-1 text-xs font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+          children: "Dismiss"
+        }
+      )
+    ] })
+  ] });
+}
+function formatFirstLast(name) {
+  const parts = name.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) return parts[0];
+  return `${parts[0]} ${parts[parts.length - 1][0].toUpperCase()}.`;
+}
+function ProfileIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
+  ] });
+}
+function BriefcaseIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" })
+  ] });
+}
+function TrashIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  ] });
+}
+function AddUserIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+  ] });
+}
+function SignOutIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 15,
+      height: 15,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+      ]
+    }
+  );
+}
+function NavTopBarActionButton({ action }) {
+  const Icon = action.icon;
+  const className = topBarIconButtonClass(action.tone ?? "default");
+  const glyphName = useTopBarIconSlotGlyph(action.slot ?? "apps");
+  const BrandGlyph = action.slot ? resolveBrandGlyph(glyphName) : null;
+  const Glyph = BrandGlyph ?? Icon;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size: 20, className: "text-current" }),
+    typeof action.badge === "number" && action.badge > 0 ? /* @__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: action.badge }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: action.label, description: action.description })
+  ] });
+  const isExternal = action.href ? /^https?:\/\//.test(action.href) : false;
+  if (action.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: safeHref(action.href),
+        "aria-label": action.label,
+        className,
+        ...isExternal ? { target: "_blank", rel: "noreferrer" } : {},
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      "aria-label": action.label,
+      className,
+      children: content
+    }
+  );
+}
+var BETA_BANNER_DEFAULTS = {
+  text: "Our product is in Beta. Thank you for participating in the Pilot Program. ",
+  linkLabel: "You can click here to see the Terms & Conditions for Beta users.",
+  href: "https://app.politogyvrm.com/beta-terms-and-conditions"
+};
+function NavBetaBanner({ text, linkLabel, href }) {
+  const body = text ?? BETA_BANNER_DEFAULTS.text;
+  const label = linkLabel ?? BETA_BANNER_DEFAULTS.linkLabel;
+  const target = href ?? BETA_BANNER_DEFAULTS.href;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "note",
+      className: "w-full border-y px-4 py-2 text-center text-sm",
+      style: {
+        background: "var(--beta-banner-bg)",
+        borderColor: "var(--beta-banner-border)",
+        color: "var(--beta-banner-text)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: body }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: safeHref(target),
+            target: "_blank",
+            rel: "noreferrer",
+            className: "font-bold underline",
+            style: { color: "var(--beta-banner-text)" },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function useCloseNavDetailsOnOutsideClick() {
+  react.useEffect(() => {
+    const close = (target) => {
+      document.querySelectorAll("details[data-nav-details][open]").forEach((d) => {
+        if (!target || !d.contains(target)) d.removeAttribute("open");
+      });
+    };
+    const onPointerDown = (e) => close(e.target);
+    const onKey = (e) => {
+      if (e.key === "Escape") close(null);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, []);
+}
+function NavAppShell({ sidebar, topBar, betaBanner, children }) {
+  useCloseNavDetailsOnOutsideClick();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[240px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(NavTopBar, { ...topBar }),
+      betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
+    ] })
+  ] });
+}
+
+// src/lib/breadcrumbs.ts
+function deriveBreadcrumbs(items, pathname, opts) {
+  const search = opts?.search ?? (typeof window !== "undefined" ? window.location.search : "");
+  const origin = opts?.origin ?? (typeof window !== "undefined" ? window.location.origin : "");
+  const matches = (href) => {
+    if (!href) return false;
+    let path = href;
+    let query = "";
+    if (/^https?:\/\//i.test(href)) {
+      try {
+        const u = new URL(href);
+        if (origin && u.origin !== origin) return false;
+        path = u.pathname;
+        query = u.search;
+      } catch {
+        return false;
+      }
+    } else {
+      const qi = href.indexOf("?");
+      if (qi >= 0) {
+        path = href.slice(0, qi) || "/";
+        query = href.slice(qi);
+      }
+    }
+    if (path !== pathname) return false;
+    if (!query) return true;
+    const want = new URLSearchParams(query);
+    const have = new URLSearchParams(search);
+    for (const [k, v] of want) if (have.get(k) !== v) return false;
+    return true;
+  };
+  const walk = (nodes, trail2) => {
+    for (const node of nodes) {
+      const here = [...trail2, node];
+      if (node.children?.length) {
+        const deeper = walk(node.children, here);
+        if (deeper) return deeper;
+      }
+      if (matches(node.href)) return here;
+    }
+    return null;
+  };
+  const trail = walk(items, []);
+  const dashboard = items.find((i) => i.label === "Dashboard");
+  const crumbs = [{ label: "Dashboard", href: dashboard?.href }];
+  if (!trail) return crumbs;
+  for (const node of trail) {
+    if (node.label === "Dashboard") continue;
+    crumbs.push({ label: node.label, href: node.href });
+  }
+  const last = crumbs[crumbs.length - 1];
+  if (last) delete last.href;
+  return crumbs;
+}
+
+// src/lib/identity.ts
+function looksLikeEmail(value) {
+  return typeof value === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+function resolveIdentity(input) {
+  const apiName = looksLikeEmail(input.apiName) ? null : input.apiName ?? null;
+  const fallbackName = looksLikeEmail(input.fallbackName) ? null : input.fallbackName ?? null;
+  return {
+    userName: apiName ?? fallbackName,
+    email: input.email ?? null,
+    avatarUrl: input.avatarUrl ?? null,
+    loaded: input.loaded ?? false
+  };
+}
+var POLITOGY_APPS = {
+  vrm: { title: "Politogy VRM", origin: "https://app.politogyvrm.com", storagePrefix: "vrm" },
+  contacts: { title: "Contacts", origin: "https://contacts.politogyvrm.com", storagePrefix: "contacts" },
+  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms" },
+  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys" },
+  polls: { title: "Polls", origin: "https://polls.politogyvrm.com", storagePrefix: "polls" },
+  petitions: { title: "Petitions", origin: "https://petitions.politogyvrm.com", storagePrefix: "petitions" }
+};
+function PolitogyAppFrame({
+  app,
+  pathname,
+  search,
+  linkComponent,
+  session,
+  onSignOut,
+  buildMeta,
+  data,
+  children
+}) {
+  const meta = POLITOGY_APPS[app];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PolitogyAppChrome,
+    {
+      storagePrefix: meta.storagePrefix,
+      fetchJson: data?.fetchJson,
+      devNotes: data?.devNotes,
+      org: data?.org,
+      identity: {
+        userId: session.userId,
+        userName: session.userName ?? null,
+        email: session.email,
+        role: session.role
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        FrameBody,
+        {
+          app,
+          pathname,
+          search,
+          linkComponent,
+          session,
+          onSignOut,
+          buildMeta,
+          data,
+          children
+        }
+      )
+    }
+  );
+}
+function FrameBody({
+  app,
+  pathname,
+  search,
+  linkComponent,
+  session,
+  onSignOut,
+  buildMeta,
+  data,
+  children
+}) {
+  const meta = POLITOGY_APPS[app];
+  const chrome = useChromeState();
+  const identity = useChromeIdentity({ userName: session.userName, email: session.email });
+  const userMenu = useChromeUserMenu({
+    userId: session.userId,
+    userName: identity.userName,
+    email: identity.email
+  });
+  const footer = useChromeFooter(buildMeta ?? {});
+  const mode = useChromeMode();
+  const coreOrgs = chrome?.orgs ?? [];
+  const activeCoreOrg = coreOrgs.find((o) => o.id === chrome?.orgId) ?? null;
+  const navDisplay = chrome?.navDisplay ?? "both";
+  const navItems = react.useMemo(
+    () => standardPolitogyNav({
+      coreBaseUrl: POLITOGY_APPS.vrm.origin,
+      icons: standardNavIcons,
+      // An app that OWNS a standard nav entry (Contacts) nests its own routes
+      // under it. This is routing data, not chrome configuration.
+      contactsItem: data?.contactsItem
+    }),
+    [data?.contactsItem]
+  );
+  const breadcrumbs = react.useMemo(
+    () => deriveBreadcrumbs(navItems, pathname, { search, origin: meta.origin }),
+    [navItems, pathname, search, meta.origin]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavAppShell,
+    {
+      sidebar: {
+        pathname,
+        brand: {
+          logoSrc: "/brand/logos/relationship-mode-logo.png",
+          logoAlt: "Politogy",
+          badgeLabel: "P",
+          title: "Politogy"
+        },
+        nav: {
+          items: navDisplay === "tabs" ? navItems.map(({ children: _sub, ...item }) => item) : navItems
+        },
+        org: activeCoreOrg ? {
+          name: activeCoreOrg.name,
+          id: activeCoreOrg.id,
+          logoUrl: activeCoreOrg.logoUrl,
+          brandColor: activeCoreOrg.brandColor,
+          organizations: coreOrgs,
+          onSwitch: chrome?.setOrgId
+        } : { name: session.accountName, id: session.accountId },
+        mode,
+        footer,
+        linkComponent
+      },
+      betaBanner: {},
+      topBar: {
+        title: meta.title,
+        breadcrumbs,
+        user: {
+          name: identity.userName,
+          email: identity.email,
+          // The chrome API's avatar wins; the app may supply a fallback chain
+          // (e.g. a stored memoji) for users with no uploaded photo.
+          avatarUrl: identity.avatarUrl ?? data?.fallbackAvatarUrl ?? null,
+          role: session.role
+        },
+        userMenu,
+        onSignOut,
+        actions: /* @__PURE__ */ jsxRuntime.jsx(ChromeTopBarActions, {})
+      },
+      children
+    }
+  );
+}
 var standardNavIcons = {
   home: fi.FiHome,
   users: fi.FiUsers,
@@ -754,6 +2105,7 @@ var standardNavIcons = {
   share: fi.FiShare2
 };
 var ORG_STORAGE_KEY = "vrm.activeOrg";
+var MODE_STORAGE_KEY = "vrm.activeMode";
 var NAV_DISPLAY_KEY = "vrm.navDisplay";
 var CORE_BASE_URL = "https://app.politogyvrm.com";
 var ChromeStateContext = react.createContext(null);
@@ -938,6 +2290,16 @@ function useChromeFooter(meta) {
     [isSuperAdmin, meta.envLabel, meta.version, meta.commit, meta.commitDate, meta.commitAuthor]
   );
 }
+function useChromeIdentity(fallback) {
+  const { me, loaded } = useChromeMe();
+  return resolveIdentity({
+    apiName: me?.userName,
+    fallbackName: fallback?.userName,
+    email: fallback?.email,
+    avatarUrl: me?.avatarUrl,
+    loaded
+  });
+}
 function useChromeUserMenu({
   userId,
   userName,
@@ -981,11 +2343,19 @@ var MODE_DEFS = [
     orgQuery: true
   }
 ];
-function useChromeMode(currentModeId = "relationship") {
+function useChromeMode(fallbackModeId = "relationship") {
   const ctx = react.useContext(ChromeStateContext);
   const nav = useNavChromeFetcher();
   const orgId = ctx?.orgId ?? null;
   const [entitled, setEntitled] = react.useState(null);
+  const [selectedModeId, setSelectedModeId] = react.useState(null);
+  react.useEffect(() => {
+    try {
+      const stored = localStorage.getItem(MODE_STORAGE_KEY);
+      if (stored && MODE_DEFS.some((m) => m.id === stored)) setSelectedModeId(stored);
+    } catch {
+    }
+  }, []);
   react.useEffect(() => {
     if (!nav || !orgId) return;
     let cancelled = false;
@@ -999,8 +2369,9 @@ function useChromeMode(currentModeId = "relationship") {
       cancelled = true;
     };
   }, [nav, orgId]);
-  const current = MODE_DEFS.find((m) => m.id === currentModeId) ?? MODE_DEFS[0];
   const options = MODE_DEFS.filter((m) => entitled?.[m.id]);
+  const selected = selectedModeId ? options.find((m) => m.id === selectedModeId) ?? null : null;
+  const current = selected ?? options[0] ?? MODE_DEFS.find((m) => m.id === fallbackModeId) ?? MODE_DEFS[0];
   const suffix = orgId ? `?org=${orgId.slice(-6)}` : "";
   return {
     label: current.label,
@@ -1009,6 +2380,11 @@ function useChromeMode(currentModeId = "relationship") {
     onSelect: options.length > 1 ? (id) => {
       const def = MODE_DEFS.find((m) => m.id === id);
       if (!def) return;
+      setSelectedModeId(id);
+      try {
+        localStorage.setItem(MODE_STORAGE_KEY, id);
+      } catch {
+      }
       const sep = def.href.includes("?") ? "&" : "?";
       window.location.assign(
         def.orgQuery && suffix ? `${def.href}${sep}${suffix.slice(1)}` : def.href
@@ -1018,9 +2394,15 @@ function useChromeMode(currentModeId = "relationship") {
 }
 
 exports.ChromeTopBarActions = ChromeTopBarActions;
+exports.POLITOGY_APPS = POLITOGY_APPS;
 exports.PolitogyAppChrome = PolitogyAppChrome;
+exports.PolitogyAppFrame = PolitogyAppFrame;
+exports.deriveBreadcrumbs = deriveBreadcrumbs;
+exports.looksLikeEmail = looksLikeEmail;
+exports.resolveIdentity = resolveIdentity;
 exports.standardNavIcons = standardNavIcons;
 exports.useChromeFooter = useChromeFooter;
+exports.useChromeIdentity = useChromeIdentity;
 exports.useChromeMode = useChromeMode;
 exports.useChromeState = useChromeState;
 exports.useChromeUserMenu = useChromeUserMenu;