@the-portland-company/shell 0.75.1 → 0.76.0

package/dist/app-chrome.cjs

@@ -550,12 +550,16 @@ function useNavChrome(component) {
   }
   return ctx;
 }
-function useChromeOrgs() {
+function useChromeOrgs({ enabled = true } = {}) {
   const { dedupedFetch } = useNavChrome("useChromeOrgs");
   const [orgs, setOrgs] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
+  const [loading, setLoading] = react.useState(enabled);
   const [error, setError] = react.useState(false);
   react.useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
     setError(false);
@@ -571,7 +575,7 @@ function useChromeOrgs() {
     return () => {
       cancelled = true;
     };
-  }, [dedupedFetch]);
+  }, [dedupedFetch, enabled]);
   return { orgs, loading, error };
 }
 function ValueSkeleton({ className }) {
@@ -1335,10 +1339,14 @@ function composeSupportMessage(input) {
 ---
 ${ctx.join("\n")}`;
 }
-function SupportAction({ orgId } = {}) {
+function SupportAction({
+  orgId,
+  orgs: knownOrgs
+} = {}) {
   const { fetchJson } = useNavChrome("SupportAction");
   const { me, loaded } = useChromeMe();
-  const { orgs } = useChromeOrgs();
+  const { orgs: fetchedOrgs } = useChromeOrgs({ enabled: !knownOrgs });
+  const orgs = knownOrgs ?? fetchedOrgs;
   const [open, setOpen] = react.useState(false);
   const [message, setMessage] = react.useState("");
   const [email, setEmail] = react.useState("");
@@ -2896,7 +2904,7 @@ function NavSidebar({
               "div",
               {
                 "data-shell-meta": true,
-                className: `mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] text-[color:var(--sidebar-meta-text,rgba(255,255,255,0.4))] ${rc("max-md:hidden")}`,
+                className: `mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] text-[color:var(--sidebar-meta-text,rgba(255,255,255,0.72))] ${rc("max-md:hidden")}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: [
                     footer.envLabel ? shortEnvLabel(footer.envLabel) : null,
@@ -3855,6 +3863,85 @@ function resolveActiveOrg(search) {
   if (fromUrl) return fromUrl;
   return readActiveOrgCookie();
 }
+var ORG_ID_QUERY_PARAM = "org_id";
+var ORG_ID_TAIL_LENGTH = 7;
+var LEGACY_ORG_TAIL_LENGTH = 6;
+var TAIL_RE = /^[0-9a-f]{6,7}$/i;
+var AUTH_BASE_URL = "https://auth.politogyvrm.com";
+var AUTH_BASE_URL_STAGING = "https://auth-staging.politogyvrm.com";
+function orgIdTail(orgId) {
+  return isOrgId(orgId) ? orgId.trim().toLowerCase().slice(-ORG_ID_TAIL_LENGTH) : null;
+}
+function isOrgSelector(v) {
+  return typeof v === "string" && (UUID_RE.test(v.trim()) || TAIL_RE.test(v.trim()));
+}
+function matchOrgSelector(selector, orgs) {
+  if (!isOrgSelector(selector)) return null;
+  const sel = selector.trim().toLowerCase();
+  if (UUID_RE.test(sel)) return orgs.find((o) => o.id.toLowerCase() === sel) ?? null;
+  if (sel.length !== ORG_ID_TAIL_LENGTH && sel.length !== LEGACY_ORG_TAIL_LENGTH) return null;
+  const hits = orgs.filter((o) => o.id.toLowerCase().endsWith(sel));
+  return hits.length === 1 ? hits[0] : null;
+}
+function readOrgSelectorFromUrl(search) {
+  if (!search) return null;
+  try {
+    const qs = search.includes("?") ? search.slice(search.indexOf("?") + 1) : search;
+    const params = new URLSearchParams(qs);
+    for (const key of [ORG_ID_QUERY_PARAM, ACTIVE_ORG_QUERY_PARAM]) {
+      const v = params.get(key);
+      if (isOrgSelector(v)) return v.trim().toLowerCase();
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function orgClaimsFrom(claims) {
+  if (!claims || typeof claims !== "object") return null;
+  const c = claims;
+  if (!isOrgId(c.org_id)) return null;
+  return {
+    orgId: c.org_id.trim().toLowerCase(),
+    orgRole: typeof c.org_role === "string" ? c.org_role : null
+  };
+}
+function authBaseUrl() {
+  if (typeof window !== "undefined" && window.location.hostname.toLowerCase().includes("staging")) {
+    return AUTH_BASE_URL_STAGING;
+  }
+  return AUTH_BASE_URL;
+}
+var ActiveOrgSwitchError = class extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+    this.name = "ActiveOrgSwitchError";
+  }
+};
+async function switchActiveOrg(orgId, opts = {}) {
+  if (!isOrgId(orgId)) throw new ActiveOrgSwitchError(400, "org_id must be a full uuid");
+  const doFetch = opts.fetch ?? fetch;
+  const res = await doFetch(`${opts.authBaseUrl ?? authBaseUrl()}/api/active-org`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ org_id: orgId })
+  });
+  if (!res.ok) {
+    let msg = `active-org switch failed (${res.status})`;
+    try {
+      const body = await res.json();
+      if (body?.error) msg = body.error;
+    } catch {
+    }
+    throw new ActiveOrgSwitchError(res.status, msg);
+  }
+  const claims = orgClaimsFrom(await res.json().catch(() => null));
+  if (!claims) throw new ActiveOrgSwitchError(502, "active-org switch returned no org_id");
+  writeActiveOrgCookie(claims.orgId);
+  return claims;
+}
 
 // src/lib/breadcrumbs.ts
 function deriveBreadcrumbs(items, pathname, opts) {
@@ -4355,7 +4442,9 @@ function LoadingScreen({
                       padding: 0,
                       border: "none",
                       background: "transparent",
-                      color: "rgba(255,255,255,0.38)",
+                      // 0.38 alpha was 3.51:1 on the ink-900 loading background —
+                      // below WCAG 2.2 AA 4.5:1. 0.72 clears it.
+                      color: "rgba(255,255,255,0.72)",
                       fontFamily: "var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif)",
                       fontSize: "12.5px",
                       textDecoration: "underline",
@@ -4382,7 +4471,9 @@ function LoadingScreen({
               padding: "0 32px 30px",
               fontFamily: "var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif)",
               fontSize: "12.5px",
-              color: "rgba(255,255,255,0.38)"
+              // 0.38 alpha was 3.51:1 on the ink-900 loading background — below
+              // WCAG 2.2 AA 4.5:1. 0.72 clears it.
+              color: "rgba(255,255,255,0.72)"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Politogy VRM. Built for the long game." }),
@@ -4450,11 +4541,17 @@ var POLITOGY_APPS = {
     storagePrefix: "contacts",
     pageTitle: false
   },
-  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms" },
-  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys" },
+  // 'title' for forms/surveys/polls/ctas for the same reason as petitions
+  // below: their pages have real names ("Volunteer Signup", "Q3 Satisfaction"),
+  // where the registry can only say the app's own name. Without the grant the
+  // page header falls back to the static registry title forever, so the
+  // designed "<mode> mode" eyebrow + H2 + subtitle block never gets the real
+  // per-page title an app passes it (UI-Platform → Page header).
+  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms", grants: ["title"] },
+  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys", grants: ["title"] },
   // Specs/Left-Navigation §9.2: Polling is a Campaign row (Research).
-  polls: { title: "Polls", origin: "https://polls.politogyvrm.com", storagePrefix: "polls", mode: "campaign" },
-  ctas: { title: "CTAs", origin: "https://ctas.politogyvrm.com", storagePrefix: "ctas" },
+  polls: { title: "Polls", origin: "https://polls.politogyvrm.com", storagePrefix: "polls", mode: "campaign", grants: ["title"] },
+  ctas: { title: "CTAs", origin: "https://ctas.politogyvrm.com", storagePrefix: "ctas", grants: ["title"] },
   // V2 apps that replace retired app.politogyvrm.com pages (Reference/
   // UI-Platform v42 "Retirement of app.politogyvrm.com"). Dashboard hosts the
   // Relationship Dashboard + Campaign Battleground/District data/Campaigns
@@ -4478,7 +4575,7 @@ var POLITOGY_APPS = {
   },
   // Relationship Mode Email Engine (Specs/Email-Engine) — the V2 standalone
   // app, running in parallel to VRM core's V1 Email Broadcast.
-  email: { title: "Email", origin: "https://email.politogyvrm.com", storagePrefix: "email", mode: "relationship" },
+  email: { title: "Email", origin: "https://email.politogyvrm.com", storagePrefix: "email", mode: "relationship", grants: ["title"] },
   // Campaign Mode apps — each scoped to Campaign, so they render the Campaign
   // tree and a static Campaign pill. Not yet deployed; hidden from the Campaign
   // nav by CAMPAIGN_FEATURE_AVAILABILITY until their launch flips the flag.
@@ -4491,11 +4588,12 @@ var POLITOGY_APPS = {
     origin: "https://a2p.politogyvrm.com",
     storagePrefix: "a2p",
     mode: "campaign",
-    dual: { modes: ["relationship", "campaign"], defaultMode: "campaign" }
+    dual: { modes: ["relationship", "campaign"], defaultMode: "campaign" },
+    grants: ["title"]
   },
-  phonebank: { title: "Phone Banking", origin: "https://phonebank.politogyvrm.com", storagePrefix: "phonebank", mode: "campaign" },
-  canvass: { title: "Field Canvassing", origin: "https://canvass.politogyvrm.com", storagePrefix: "canvass", mode: "campaign" },
-  signs: { title: "Sign Mapping", origin: "https://signs.politogyvrm.com", storagePrefix: "signs", mode: "campaign" }
+  phonebank: { title: "Phone Banking", origin: "https://phonebank.politogyvrm.com", storagePrefix: "phonebank", mode: "campaign", grants: ["title"] },
+  canvass: { title: "Field Canvassing", origin: "https://canvass.politogyvrm.com", storagePrefix: "canvass", mode: "campaign", grants: ["title"] },
+  signs: { title: "Sign Mapping", origin: "https://signs.politogyvrm.com", storagePrefix: "signs", mode: "campaign", grants: ["title"] }
 };
 var DEFAULT_SEARCH_PLACEHOLDER = {
   contacts: "Search contacts, segments, forms"
@@ -4522,6 +4620,7 @@ function PolitogyAppFrame({
       fetchJson: data?.fetchJson,
       devNotes: data?.devNotes,
       org: data?.org,
+      tokenOrg: data?.tokenOrg,
       identity: {
         userId: session.userId,
         userName: session.userName ?? null,
@@ -4802,6 +4901,107 @@ var ChromeStateContext = react.createContext(null);
 function useChromeState() {
   return react.useContext(ChromeStateContext);
 }
+function TokenChromeStateProvider({
+  tokenOrg,
+  children
+}) {
+  const { orgs: fetchedOrgs, loading: orgsFetching, error: orgsError } = useChromeOrgs({
+    enabled: !tokenOrg.orgs
+  });
+  const [navDisplay, setNavDisplayState] = react.useState(NAV_DISPLAY_DEFAULT);
+  const [pendingOrg, setPendingOrg] = react.useState(null);
+  const tokenOrgRef = react.useRef(tokenOrg);
+  tokenOrgRef.current = tokenOrg;
+  react.useEffect(() => {
+    setNavDisplayState(resolveNavDisplay());
+  }, []);
+  const orgs = react.useMemo(
+    () => tokenOrg.orgs ?? (fetchedOrgs ?? []).map((o) => ({
+      id: o.id,
+      name: o.name,
+      logoUrl: o.logoUrl,
+      brandColor: o.brandColor,
+      role: o.role,
+      rawRole: o.rawRole ?? null
+    })),
+    [tokenOrg.orgs, fetchedOrgs]
+  );
+  const [urlSelector] = react.useState(
+    () => typeof window === "undefined" ? null : readOrgSelectorFromUrl(window.location.search)
+  );
+  const overrideOrg = react.useMemo(
+    () => urlSelector ? matchOrgSelector(urlSelector, orgs)?.id ?? null : null,
+    [urlSelector, orgs]
+  );
+  const orgId = pendingOrg ?? (tokenOrg.orgId && overrideOrg ? overrideOrg : tokenOrg.orgId);
+  const reexchangedFor = react.useRef(null);
+  react.useEffect(() => {
+    if (!overrideOrg || !tokenOrg.orgId || overrideOrg === tokenOrg.orgId) return;
+    if (reexchangedFor.current === overrideOrg) return;
+    reexchangedFor.current = overrideOrg;
+    void Promise.resolve(tokenOrgRef.current.onReexchange(overrideOrg, { perTab: true })).catch(
+      () => {
+      }
+    );
+  }, [overrideOrg, tokenOrg.orgId]);
+  react.useEffect(() => {
+    if (pendingOrg && tokenOrg.orgId === pendingOrg) setPendingOrg(null);
+  }, [pendingOrg, tokenOrg.orgId]);
+  const setOrgId = react.useCallback((id) => {
+    const current = tokenOrgRef.current;
+    if (!isOrgId(id) || id === (current.orgId ?? null)) return;
+    setPendingOrg(id);
+    void (async () => {
+      try {
+        const claims = await switchActiveOrg(id, { authBaseUrl: current.authBaseUrl });
+        try {
+          const url = new URL(window.location.href);
+          url.searchParams.delete(ACTIVE_ORG_QUERY_PARAM);
+          url.searchParams.set(ORG_ID_QUERY_PARAM, orgIdTail(claims.orgId));
+          window.history.replaceState(window.history.state, "", url.toString());
+        } catch {
+        }
+        await tokenOrgRef.current.onReexchange(claims.orgId, { perTab: false });
+      } catch (err) {
+        setPendingOrg(null);
+        tokenOrgRef.current.onSwitchError?.(err);
+      }
+    })();
+  }, []);
+  const setNavDisplay = react.useCallback((m) => {
+    setNavDisplayState(m);
+    writeNavDisplayLocal(m);
+    writeNavDisplayCookie(m);
+  }, []);
+  react.useEffect(() => {
+    if (!isOrgId(orgId)) return;
+    try {
+      const url = new URL(window.location.href);
+      const tail = orgIdTail(orgId);
+      if (url.searchParams.has(ACTIVE_ORG_QUERY_PARAM) || url.searchParams.get(ORG_ID_QUERY_PARAM) !== tail) {
+        url.searchParams.delete(ACTIVE_ORG_QUERY_PARAM);
+        url.searchParams.set(ORG_ID_QUERY_PARAM, tail);
+        window.history.replaceState(window.history.state, "", url.toString());
+      }
+    } catch {
+    }
+  }, [orgId]);
+  react.useEffect(() => {
+    if (isOrgId(tokenOrg.orgId) && !pendingOrg) writeActiveOrgCookie(tokenOrg.orgId);
+  }, [tokenOrg.orgId, pendingOrg]);
+  const value = react.useMemo(
+    () => ({
+      orgId,
+      setOrgId,
+      orgs,
+      orgsLoading: !tokenOrg.orgs && orgsFetching && !orgsError && !fetchedOrgs,
+      navDisplay,
+      setNavDisplay
+    }),
+    [orgId, setOrgId, orgs, tokenOrg.orgs, orgsFetching, orgsError, fetchedOrgs, navDisplay, setNavDisplay]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChromeStateContext.Provider, { value, children });
+}
 function ChromeStateProvider({
   controlledOrg,
   children
@@ -5105,6 +5305,7 @@ function PolitogyAppChrome({
   fetchJson: fetchJsonOverride,
   devNotes,
   org,
+  tokenOrg,
   identity,
   children
 }) {
@@ -5123,7 +5324,7 @@ function PolitogyAppChrome({
     [proxyBasePath]
   );
   const fetchJson = fetchJsonOverride ?? proxyFetchJson;
-  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeProvider, { fetchJson, children: /* @__PURE__ */ jsxRuntime.jsx(ChromeStateProvider, { controlledOrg: org, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const devNotesTree = /* @__PURE__ */ jsxRuntime.jsx(
     AppDevNotes,
     {
       storagePrefix,
@@ -5132,7 +5333,8 @@ function PolitogyAppChrome({
       identity,
       children
     }
-  ) }) });
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeProvider, { fetchJson, children: tokenOrg ? /* @__PURE__ */ jsxRuntime.jsx(TokenChromeStateProvider, { tokenOrg, children: devNotesTree }) : /* @__PURE__ */ jsxRuntime.jsx(ChromeStateProvider, { controlledOrg: org, children: devNotesTree }) });
 }
 function ChromeTopBarActions() {
   const state = useChromeState();
@@ -5149,7 +5351,7 @@ function ChromeTopBarActions() {
     /* @__PURE__ */ jsxRuntime.jsx(FuelAction, { orgId: state.orgId }),
     /* @__PURE__ */ jsxRuntime.jsx(SpecOverlayAction, { orgId: state.orgId, orgName: state.orgs.find((o) => o.id === state.orgId)?.name ?? null }),
     /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId }),
-    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId })
+    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId, orgs: state.orgs.length ? state.orgs : void 0 })
   ] });
 }
 function ChromeDevNotesMenu() {