@the-portland-company/shell 0.64.0 → 0.65.0

package/dist/app-chrome.cjs

@@ -131,20 +131,13 @@ function clearPendingThemeChoice() {
   writeSharedCookie(THEME_PENDING_COOKIE, "", 0);
 }
 function resolveTheme(pref) {
-  if (pref === "system") {
-    try {
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    } catch {
-      return "light";
-    }
-  }
-  return pref;
+  return "light";
 }
 function applyThemePreference(pref) {
   if (typeof document === "undefined") return;
-  const resolved = resolveTheme(pref);
+  const resolved = resolveTheme();
   const d = document.documentElement;
-  d.classList.toggle("dark", resolved === "dark");
+  d.classList.remove("dark");
   try {
     d.style.colorScheme = resolved;
   } catch {
@@ -159,11 +152,11 @@ var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
 var pref=cookie||ls||"system";
 if(VALID.indexOf(pref)===-1)pref="system";
 if(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}
-var resolved=pref;
-if(pref==="system"){try{resolved=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}catch(e){resolved="light";}}
+// Dark Mode retired platform-wide 2026-09-21 \u2014 always light, and strip any
+// stale dark class a pre-retirement cookie/localStorage value left behind.
 var d=document.documentElement;
-if(resolved==="dark"){d.classList.add("dark");}else{d.classList.remove("dark");}
-try{d.style.colorScheme=resolved;}catch(e){}
+d.classList.remove("dark");
+try{d.style.colorScheme="light";}catch(e){}
 }catch(e){}})();`;
 var CORE_APP_ORIGIN = "https://app.politogyvrm.com";
 var CORE_BILLING_PATH = "/organization-settings/subscription-billing/text-email";
@@ -1744,7 +1737,7 @@ function useThemePreference() {
     }
     const pref = cookie ?? (isThemePreference(ls) ? ls : null) ?? "system";
     setValueState(pref);
-    applyThemePreference(pref);
+    applyThemePreference();
   }, []);
   const meCtx = react.useContext(NavChromeContext);
   react.useEffect(() => {
@@ -1753,7 +1746,7 @@ function useThemePreference() {
     if (pending) {
       if (meCtx?.me) reconciled.current = true;
       setValueState(pending);
-      applyThemePreference(pending);
+      applyThemePreference();
       writeThemeCookie(pending);
       try {
         localStorage.setItem(THEME_STORAGE_KEY, pending);
@@ -1772,7 +1765,7 @@ function useThemePreference() {
     if (isThemePreference(pref)) {
       reconciled.current = true;
       setValueState(pref);
-      applyThemePreference(pref);
+      applyThemePreference();
       writeThemeCookie(pref);
       try {
         localStorage.setItem(THEME_STORAGE_KEY, pref);
@@ -1791,7 +1784,7 @@ function useThemePreference() {
       const cookie = readThemeCookie();
       if (cookie) {
         setValueState((prev) => {
-          if (cookie !== prev) applyThemePreference(cookie);
+          if (cookie !== prev) applyThemePreference();
           return cookie;
         });
       }
@@ -1813,14 +1806,14 @@ function useThemePreference() {
     } catch {
       return;
     }
-    const onChange = () => applyThemePreference("system");
+    const onChange = () => applyThemePreference();
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, [value]);
   const setValue = react.useCallback(
     (next) => {
       setValueState(next);
-      applyThemePreference(next);
+      applyThemePreference();
       writeThemeCookie(next);
       try {
         localStorage.setItem(THEME_STORAGE_KEY, next);
@@ -2433,52 +2426,34 @@ function NavSidebar({
                 }
               )
             ] }) : 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(--mode-accent,var(--color-accent))] px-2.5 py-2 text-[color:var(--mode-on-accent,white)] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--color-accent))] 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);
+            mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-2 rounded-md bg-[color:var(--panel-elevated)] p-1", children: (mode.options && mode.options.length > 0 ? mode.options : [{ id: mode.label, label: mode.label, icon: ModeIcon }]).map(
+                (opt) => {
+                  const selected = opt.label === mode.label;
+                  const OptIcon = opt.icon;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      title: opt.label,
+                      "aria-label": opt.label,
+                      "aria-current": selected ? "true" : void 0,
+                      onClick: () => {
+                        if (!selected) mode.onSelect?.(opt.id);
+                      },
+                      disabled: !mode.onSelect && !selected,
+                      className: [
+                        "flex h-9 flex-1 items-center justify-center rounded transition",
+                        selected ? "bg-[color:var(--mode-accent,var(--color-accent))] text-[color:var(--mode-on-accent,white)] shadow-sm" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-[color:var(--panel)] hover:text-[color:var(--sidebar-text,var(--foreground))]"
+                      ].join(" "),
+                      children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 16, className: "shrink-0" }) : null
                     },
-                    "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-accent)]" : "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(--mode-accent,var(--color-accent))] px-2.5 py-2 text-[color:var(--mode-on-accent,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,
+                    opt.id
+                  );
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-center text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]", children: mode.label })
+            ] }) : 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(--sidebar-text-muted,var(--muted))]", children: nav.groupLabel }) : null,
               nav.items.map((item, idx) => {
@@ -2626,6 +2601,27 @@ function HamburgerIcon() {
     }
   );
 }
+function SearchIcon({ className } = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  );
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -2920,214 +2916,231 @@ function NavTopBar({
   actions,
   themeToggle,
   onOpenNav,
-  navOpen
+  navOpen,
+  search,
+  buildNotes
 }) {
   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: [
-    onOpenNav ? /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onOpenNav,
-        "aria-label": "Open menu",
-        "aria-expanded": navOpen ?? false,
-        "aria-controls": "politogy-nav-drawer",
-        className: `${topBarIconButtonClass("default")} mr-3 shrink-0 lg:hidden lg:mr-0`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "h1",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-20", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-[var(--topbar-height,60px)] items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-[var(--topbar-padding-x,20px)]", children: [
+      onOpenNav ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          className: "truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]",
-          "data-display": "true",
-          children: title
+          type: "button",
+          onClick: onOpenNav,
+          "aria-label": "Open menu",
+          "aria-expanded": navOpen ?? false,
+          "aria-controls": "politogy-nav-drawer",
+          className: `${topBarIconButtonClass("default")} mr-1 shrink-0 lg:hidden`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
         }
-      ),
-      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-accent)] 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 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: [
-            userMenu?.myProfileHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative flex w-[320px] max-w-full shrink-0 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "pointer-events-none absolute left-3 h-4 w-4 text-[color:var(--muted)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            placeholder: search?.placeholder ?? "Search",
+            value: search?.value,
+            onChange: search?.onChange ? (e) => search.onChange?.(e.target.value) : void 0,
+            onKeyDown: search?.onSubmit ? (e) => {
+              if (e.key === "Enter") search.onSubmit?.(e.target.value);
+            } : void 0,
+            readOnly: !search?.onChange,
+            className: "w-full rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1.5 pl-9 pr-10 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "kbd",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute right-2.5 rounded border border-[color:var(--line)] px-1 py-0.5 text-[10px] font-medium text-[color:var(--muted)]",
+            children: "/"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative ml-auto flex shrink-0 items-center gap-[var(--topbar-icon-gap,8px)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: buildNotes?.onOpen,
+            className: "shrink-0 rounded-md px-2 py-1.5 text-sm font-medium text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)]",
+            children: buildNotes?.label ?? "Build notes"
+          }
+        ),
+        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-accent)] text-xs font-bold text-white", children: user?.avatarUrl || user?.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
               {
-                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"
-                ]
+                src: user.avatarUrl || user.memojiUrl,
+                alt: "",
+                className: "h-full w-full object-cover"
               }
-            ) : null,
-            userMenu?.organizationSettingsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
+            ) : 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,
               {
-                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"
-                ]
+                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."
+                ] })
               }
-            ) : 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",
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-30 mt-2 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: [
+              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-accent)] 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-accent)]" : "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-accent)] hover:bg-[color:var(--panel)]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                    }
+                  ) : null
+                ] }, a.id)) }),
+                userMenu.addAccountHref || userMenu.onAddAccount ? userMenu.addAccountHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "a",
                   {
-                    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)]",
+                    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-accent)] 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-accent)] 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-accent)]" : "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 ?? "" })
-                      ] })
+                      /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
+                      "Add Account"
                     ]
                   }
-                ),
-                !a.active && userMenu.onRemoveAccount ? /* @__PURE__ */ jsxRuntime.jsx(
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(
                   "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-accent)] hover:bg-[color:var(--panel)]",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                    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-accent)] hover:bg-[color:var(--panel)]",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
+                      "Add Account"
+                    ]
                   }
                 ) : 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-accent)] hover:bg-[color:var(--panel)]",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
-                    "Add Account"
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+              ] }) : null,
+              userMenu?.theme ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--line)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                NavThemeControl,
                 {
-                  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-accent)] hover:bg-[color:var(--panel)]",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
-                    "Add Account"
-                  ]
+                  value: userMenu.theme.value,
+                  onChange: userMenu.theme.onChange
                 }
-              ) : null
-            ] }) : null,
-            userMenu?.theme ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--line)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-              NavThemeControl,
+              ) }) : null
+            ] }),
+            onSignOut ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
               {
-                value: userMenu.theme.value,
-                onChange: userMenu.theme.onChange
+                type: "button",
+                onClick: onSignOut,
+                className: "flex w-full shrink-0 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-accent)]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}),
+                  "Sign out"
+                ]
               }
-            ) }) : null
-          ] }),
-          onSignOut ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: onSignOut,
-              className: "flex w-full shrink-0 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-accent)]",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}),
-                "Sign out"
-              ]
-            }
-          ) : null
-        ] })
-      ] }),
-      !hasRealName && user ? /* @__PURE__ */ jsxRuntime.jsx(NamePromptBubble, { profileHref: userMenu?.myProfileHref }) : null
-    ] })
+            ) : null
+          ] })
+        ] }),
+        !hasRealName && user ? /* @__PURE__ */ jsxRuntime.jsx(NamePromptBubble, { profileHref: userMenu?.myProfileHref }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "h-[3px] w-full shrink-0",
+        style: {
+          background: "var(--chrome-gradient, linear-gradient(to right, #007BFF, #A54B7A, #E63946))"
+        }
+      }
+    )
   ] });
 }
 function NamePromptBubble({ profileHref }) {
@@ -3391,7 +3404,22 @@ function NavAppShell({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[240px]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(NavTopBar, { ...topBar, onOpenNav: () => setNavOpen(true), navOpen }),
           betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,
-          contentWrapper === "bare" ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-content": "", children }) : /* @__PURE__ */ jsxRuntime.jsx("main", { "data-shell-content": "", className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
+          topBar.title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "px-6 pt-7 text-xl font-semibold text-[color:var(--foreground)]", children: topBar.title }) : null,
+          contentWrapper === "bare" ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-content": "", className: topBar.title ? "mt-[22px]" : void 0, children }) : (
+            // Claude Design: "a rounded, inset frame on a light-grey page
+            // background" — the shell owns the page background and the
+            // gutter; it does not draw a hard border/box around the content
+            // (that reads as a second frame on top of the page header). An
+            // app's own cards are its own furniture and stay app-owned.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "main",
+              {
+                "data-shell-content": "",
+                className: `min-h-[calc(100vh-63px)] bg-[color:var(--chrome-page-bg,#F4F5F7)] px-6 ${topBar.title ? "pb-7 pt-[22px]" : "py-7"}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children })
+              }
+            )
+          )
         ] })
       ]
     }
@@ -4324,7 +4352,7 @@ function FrameBody({
           footer,
           linkComponent
         },
-        betaBanner: meta.beta === false ? void 0 : {},
+        betaBanner: meta.beta === true ? {} : void 0,
         modeId: appMode,
         contentWrapper: core?.contentWrapper ?? granted("contentWrapper"),
         topBar: {