@the-portland-company/shell 0.34.0 → 0.35.1

package/dist/app-chrome.cjs

@@ -1569,9 +1569,25 @@ function NavSidebar({
       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.id && !org.loading ? /* @__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: [
+        org.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "h-7 w-7 shrink-0 animate-pulse rounded-full bg-[color:var(--panel)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "h-4 flex-1 animate-pulse rounded bg-[color:var(--panel)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading organization" })
+        ] }) : 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(
@@ -2479,6 +2495,7 @@ function resolveIdentity(input) {
     loaded: input.loaded ?? false
   };
 }
+var CORE_APP = "vrm";
 var POLITOGY_APPS = {
   vrm: { title: "Politogy VRM", origin: "https://app.politogyvrm.com", storagePrefix: "vrm" },
   contacts: { title: "Contacts", origin: "https://contacts.politogyvrm.com", storagePrefix: "contacts" },
@@ -2554,21 +2571,24 @@ function FrameBody({
 }) {
   const meta = POLITOGY_APPS[app];
   const chrome = useChromeState();
+  const core = app === CORE_APP ? data?.core : void 0;
   const identity = useChromeIdentity({ userName: session.userName, email: session.email });
-  const userMenu = useChromeUserMenu({
+  const derivedUserMenu = useChromeUserMenu({
     userId: session.userId,
     userName: identity.userName,
     email: identity.email
   });
+  const userMenu = core?.userMenu ?? derivedUserMenu;
   const footer = useChromeFooter(buildMeta ?? {});
   const appMode = meta.mode;
-  const mode = useChromeMode(appMode ? { pinnedModeId: appMode } : void 0);
+  const derivedMode = useChromeMode(appMode ? { pinnedModeId: appMode } : void 0);
+  const mode = core?.mode ?? derivedMode;
   const coreOrgs = chrome?.orgs ?? [];
   const activeCoreOrg = coreOrgs.find((o) => o.id === chrome?.orgId) ?? null;
   const navDisplay = chrome?.navDisplay ?? "both";
   const navMode = appMode ?? "relationship";
   const activeOrgId = chrome?.orgId ?? null;
-  const navItems = react.useMemo(
+  const derivedNavItems = react.useMemo(
     () => standardPolitogyNav({
       coreBaseUrl: POLITOGY_APPS.vrm.origin,
       icons: standardNavIcons,
@@ -2580,17 +2600,19 @@ function FrameBody({
     }),
     [data?.contactsItem, navMode, activeOrgId]
   );
-  const breadcrumbs = react.useMemo(
+  const navItems = core?.nav ?? derivedNavItems;
+  const derivedBreadcrumbs = react.useMemo(
     () => deriveBreadcrumbs(navItems, pathname, { search, origin: meta.origin }),
     [navItems, pathname, search, meta.origin]
   );
+  const breadcrumbs = core ? core.page?.breadcrumbs : derivedBreadcrumbs;
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavAppShell,
     {
       sidebar: {
         pathname,
         brand: {
-          logoSrc: "/brand/logos/relationship-mode-logo.png",
+          logoSrc: core?.brandLogoSrc ?? "/brand/logos/relationship-mode-logo.png",
           logoAlt: "Politogy",
           badgeLabel: "P",
           title: "Politogy"
@@ -2598,6 +2620,11 @@ function FrameBody({
         nav: {
           items: navDisplay === "tabs" ? navItems.map(({ children: _sub, ...item }) => item) : navItems
         },
+        // The app's own workspace is NOT the organization — it is a per-app
+        // bootstrap account with a different id in every app. Showing it while
+        // the chrome API resolves flashed the wrong org on every load ("not
+        // connected to the account"). Shimmer while in flight; only fall back
+        // to the app label once the chrome lookup has actually failed.
         org: activeCoreOrg ? {
           name: activeCoreOrg.name,
           id: activeCoreOrg.id,
@@ -2605,14 +2632,17 @@ function FrameBody({
           brandColor: activeCoreOrg.brandColor,
           organizations: coreOrgs,
           onSwitch: chrome?.setOrgId
-        } : { name: session.accountName, id: session.accountId },
+        } : chrome?.orgsLoading ? { name: null, id: null, loading: true } : { name: session.accountName, id: session.accountId },
         mode,
         footer,
         linkComponent
       },
       betaBanner: {},
+      contentWrapper: core?.contentWrapper,
       topBar: {
-        title: meta.title,
+        // Core's pages publish their own identity; every other app is one
+        // product surface and takes its registry title.
+        title: core?.page?.title ?? meta.title,
         breadcrumbs,
         user: {
           name: identity.userName,
@@ -2624,7 +2654,13 @@ function FrameBody({
         },
         userMenu,
         onSignOut,
-        actions: /* @__PURE__ */ jsxRuntime.jsx(ChromeTopBarActions, {})
+        // The action cluster is IDENTICAL everywhere — core included. Page
+        // actions sit BEFORE it, never inside it, so the Alerts bell keeps its
+        // required position: farthest right, immediately before My Account.
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          core?.page?.actions,
+          /* @__PURE__ */ jsxRuntime.jsx(ChromeTopBarActions, {})
+        ] })
       },
       children
     }
@@ -2671,7 +2707,7 @@ function ChromeStateProvider({
   controlledOrg,
   children
 }) {
-  const { orgs } = useChromeOrgs();
+  const { orgs, loading: orgsFetching, error: orgsError } = useChromeOrgs();
   const [orgId, setOrgIdState] = react.useState(null);
   const [navDisplay, setNavDisplayState] = react.useState("both");
   react.useEffect(() => {
@@ -2716,6 +2752,7 @@ function ChromeStateProvider({
           role: o.role,
           rawRole: o.rawRole ?? null
         })),
+        orgsLoading: false,
         navDisplay,
         setNavDisplay
       };
@@ -2731,10 +2768,13 @@ function ChromeStateProvider({
         role: o.role,
         rawRole: o.rawRole ?? null
       })),
+      // Loading until the fetch settles. On error we stop loading so the frame
+      // falls back to the app label rather than shimmering forever.
+      orgsLoading: orgsFetching && !orgsError && !orgs,
       navDisplay,
       setNavDisplay
     };
-  }, [controlledOrg, orgId, setOrgId, orgs, navDisplay, setNavDisplay]);
+  }, [controlledOrg, orgId, setOrgId, orgs, orgsFetching, orgsError, navDisplay, setNavDisplay]);
   return /* @__PURE__ */ jsxRuntime.jsx(ChromeStateContext.Provider, { value, children });
 }
 function AppDevNotes({
@@ -2770,6 +2810,7 @@ function AppDevNotes({
     }),
     [storagePrefix, identity.role]
   );
+  if (devNotes?.providedByApp) return /* @__PURE__ */ jsxRuntime.jsx(DevNotesSurface, { children });
   return /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesProvider, { adapter, user, config, children: /* @__PURE__ */ jsxRuntime.jsx(DevNotesSurface, { children }) });
 }
 var DevNotesTasksContext = react.createContext({