@the-portland-company/shell 0.66.1 → 0.68.0

package/dist/app-chrome.cjs

@@ -131,14 +131,24 @@ function clearPendingThemeChoice() {
   writeSharedCookie(THEME_PENDING_COOKIE, "", 0);
 }
 function resolveTheme(pref) {
+  if (pref === "dark") return "dark";
+  if (pref === "system") {
+    try {
+      if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+    } catch {
+    }
+  }
   return "light";
 }
 function applyThemePreference(pref) {
   if (typeof document === "undefined") return;
-  const resolved = resolveTheme();
+  const resolved = resolveTheme(pref);
   const d = document.documentElement;
-  d.classList.remove("dark");
+  d.classList.toggle("dark", resolved === "dark");
   try {
+    d.setAttribute("data-theme", resolved);
     d.style.colorScheme = resolved;
   } catch {
   }
@@ -152,11 +162,10 @@ 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){}}
-// 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 dark=pref==="dark"||(pref==="system"&&!!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches));
 var d=document.documentElement;
-d.classList.remove("dark");
-try{d.style.colorScheme="light";}catch(e){}
+if(dark)d.classList.add("dark");else d.classList.remove("dark");
+try{d.setAttribute("data-theme",dark?"dark":"light");d.style.colorScheme=dark?"dark":"light";}catch(e){}
 }catch(e){}})();`;
 var CORE_APP_ORIGIN = "https://app.politogyvrm.com";
 var CORE_BILLING_PATH = "/organization-settings/subscription-billing/text-email";
@@ -177,12 +186,13 @@ function resolveOrgLogoUrl(url) {
   if (/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(raw)) return raw;
   return `${CORE_APP_ORIGIN}${raw.startsWith("/") ? "" : "/"}${raw}`;
 }
+var TOPBAR_GLYPH_SIZE = 17;
 function topBarIconButtonClass(tone = "default") {
   const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
   return [
     // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
-    "group/tbtip relative flex items-center justify-center rounded-full border border-[color:var(--line)] transition",
-    "h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)]",
+    "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-[color:var(--line)] transition",
+    "h-[var(--topbar-icon-button-size,34px)] w-[var(--topbar-icon-button-size,34px)]",
     toneClass
   ].join(" ");
 }
@@ -205,7 +215,7 @@ function useAnyTopBarPanelOpen() {
 }
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-bold leading-4 text-white", children: count > 99 ? "99+" : count });
 }
 function TopBarTooltip({
   title,
@@ -391,7 +401,7 @@ function ValueSkeleton({ className }) {
 function SlotGlyph({
   slot,
   fallback: Fallback,
-  size = 20
+  size = TOPBAR_GLYPH_SIZE
 }) {
   const glyphName = useTopBarIconSlotGlyph(slot ?? "apps");
   const BrandGlyph = slot ? resolveBrandGlyph(glyphName) : null;
@@ -483,7 +493,7 @@ function TopBarPopover({
     ) : null
   ] });
 }
-function BatteryGlyph({ size = 20, className }) {
+function BatteryGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", ry: "2" }),
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14" }),
@@ -491,7 +501,7 @@ function BatteryGlyph({ size = 20, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "10", x2: "9", y2: "14" })
   ] });
 }
-function BellGlyph({ size = 20, className }) {
+function BellGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
@@ -506,7 +516,7 @@ function BellOffGlyph({ size = 14, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
   ] });
 }
-function LifeBuoyGlyph({ size = 20, className }) {
+function LifeBuoyGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
@@ -516,7 +526,7 @@ function LifeBuoyGlyph({ size = 20, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
   ] });
 }
-function LayoutGlyph({ size = 20, className }) {
+function LayoutGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
@@ -1534,7 +1544,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
         className: topBarIconButtonClass(badgeTone),
         onClick: () => setOpen(true),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LayoutGlyph, { size: 20, className: "text-current" }),
+          /* @__PURE__ */ jsxRuntime.jsx(LayoutGlyph, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
           badgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -1699,38 +1709,6 @@ var NAV_DISPLAY_OPTIONS = [
   { value: "tabs", label: "Tabs Only" },
   { value: "both", label: "Both" }
 ];
-function NavDisplayAction({
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TopBarPopover,
-    {
-      label: "Navigation Display",
-      description: "Show navigation as a sub-menu, tabs, or both.",
-      fallbackIcon: LayoutGlyph,
-      panelClassName: "w-44",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", role: "radiogroup", "aria-label": "Navigation display", children: NAV_DISPLAY_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          role: "radio",
-          "aria-checked": value === opt.value,
-          onClick: () => onChange(opt.value),
-          className: [
-            "flex w-full items-center justify-between px-4 py-2 text-left text-sm font-medium",
-            value === opt.value ? "text-[color:var(--color-accent)]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
-          ].join(" "),
-          children: [
-            opt.label,
-            value === opt.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2713" }) : null
-          ]
-        },
-        opt.value
-      )) })
-    }
-  );
-}
 function useThemePreference() {
   const ctx = react.useContext(NavChromeContext);
   const fetchJson = ctx?.fetchJson ?? null;
@@ -1745,7 +1723,7 @@ function useThemePreference() {
     }
     const pref = cookie ?? (isThemePreference(ls) ? ls : null) ?? "system";
     setValueState(pref);
-    applyThemePreference();
+    applyThemePreference(pref);
   }, []);
   const meCtx = react.useContext(NavChromeContext);
   react.useEffect(() => {
@@ -1754,7 +1732,7 @@ function useThemePreference() {
     if (pending) {
       if (meCtx?.me) reconciled.current = true;
       setValueState(pending);
-      applyThemePreference();
+      applyThemePreference(pending);
       writeThemeCookie(pending);
       try {
         localStorage.setItem(THEME_STORAGE_KEY, pending);
@@ -1773,7 +1751,7 @@ function useThemePreference() {
     if (isThemePreference(pref)) {
       reconciled.current = true;
       setValueState(pref);
-      applyThemePreference();
+      applyThemePreference(pref);
       writeThemeCookie(pref);
       try {
         localStorage.setItem(THEME_STORAGE_KEY, pref);
@@ -1792,7 +1770,7 @@ function useThemePreference() {
       const cookie = readThemeCookie();
       if (cookie) {
         setValueState((prev) => {
-          if (cookie !== prev) applyThemePreference();
+          if (cookie !== prev) applyThemePreference(cookie);
           return cookie;
         });
       }
@@ -1814,14 +1792,14 @@ function useThemePreference() {
     } catch {
       return;
     }
-    const onChange = () => applyThemePreference();
+    const onChange = () => applyThemePreference("system");
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, [value]);
   const setValue = react.useCallback(
     (next) => {
       setValueState(next);
-      applyThemePreference();
+      applyThemePreference(next);
       writeThemeCookie(next);
       try {
         localStorage.setItem(THEME_STORAGE_KEY, next);
@@ -1856,6 +1834,16 @@ var SIGNS_ORIGIN = "https://signs.politogyvrm.com/";
 var POLLS_ORIGIN = "https://polls.politogyvrm.com/";
 var CONTACTS_TRIBES = "https://contacts.politogyvrm.com/tribes";
 var PETITION_MODE_ORIGIN = "https://petition-mode.politogyvrm.com/";
+function applyHiddenItems(items, hidden) {
+  if (!hidden || hidden.length === 0) return items;
+  const drop = new Set(hidden.map((h) => h.trim().toLowerCase()));
+  const kept = items.filter((i) => i.kind === "section" || !drop.has(i.label.toLowerCase()));
+  return kept.filter((item, idx) => {
+    if (item.kind !== "section") return true;
+    const next = kept[idx + 1];
+    return !!next && next.kind !== "section";
+  });
+}
 var CONTACTS_APP = "https://contacts.politogyvrm.com";
 var APP_CONTACTS_CHILDREN = [
   { label: "Dashboard", icon: "grid", href: `${CONTACTS_APP}/` },
@@ -1970,7 +1958,8 @@ function standardPolitogyNav(opts) {
       label: "Contacts",
       icon: icon("users"),
       href: opts.contactsItem.href,
-      children: opts.contactsItem.children
+      children: opts.contactsItem.children,
+      badge: opts.contactsItem.count ?? void 0
     } : {
       label: "Contacts",
       icon: icon("users"),
@@ -1982,10 +1971,11 @@ function standardPolitogyNav(opts) {
       }))
     };
     return [
+      { kind: "section", label: "Relationship" },
       { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/relationship/dashboard")) },
       contacts,
       {
-        label: "Email Broadcast",
+        label: "Email broadcast",
         icon: icon("mail"),
         href: withOrg(`${EMAIL_APP}/dashboard`),
         children: [
@@ -1993,20 +1983,19 @@ function standardPolitogyNav(opts) {
           ...leaves([EMAIL_V1_LEGACY])
         ]
       },
-      // SMS/MMS Blast IS a2p (Specs/A2P) — the standalone delivery engine
-      // shared with Campaign Mode, not a core-hosted surface (the old
-      // `/relationship/sms-mms-blast/*` core routes are dead; core no longer
-      // hosts them). Every link carries `mode=relationship` so a2p's nav
-      // resolves the Relationship tree instead of its own Campaign default
-      // (resolveActiveMode, mode-preference.ts).
       {
-        label: "SMS/MMS Blast",
+        // SMS/MMS Blast is the a2p app entered in RELATIONSHIP mode (a2p is
+        // dual-mode; Specs/A2P). The `?mode=relationship` param pins the
+        // destination's tree so the row that got you there is the row that
+        // lights up on arrival.
+        label: "SMS/MMS blast",
         icon: icon("messageSquare"),
         href: withOrg(`${A2P_ORIGIN}?mode=relationship`),
         children: appLeaves(A2P_ORIGIN, APP_A2P_CHILDREN, "relationship")
       },
-      // 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) },
+      { kind: "section", label: "Collect" },
+      // Carries 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"),
@@ -2031,9 +2020,12 @@ function standardPolitogyNav(opts) {
         href: withOrg("https://ctas.politogyvrm.com/"),
         children: APP_CTAS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
+      { kind: "section", label: "Account" },
+      // My Profile is global — NOT org-suffixed (main-app ShellChromeBridge).
+      { label: "My profile", icon: icon("user"), href: withOrg(abs("/my-profile")) },
       {
-        label: "Organization Settings",
-        icon: icon("briefcase"),
+        label: "Organization settings",
+        icon: icon("settings"),
         href: withOrg(abs("/organization-settings")),
         children: branches(ORG_SETTINGS_CHILDREN)
       }
@@ -2089,7 +2081,8 @@ function standardPolitogyNav(opts) {
     } : { label: "Dashboard", icon: icon("home"), href: withOrg(PETITION_MODE_ORIGIN) }
   ];
   const mode = opts.mode ?? "relationship";
-  const items = mode === "campaign" ? buildCampaign() : mode === "petition" ? buildPetition() : buildRelationship();
+  const built = mode === "campaign" ? buildCampaign() : mode === "petition" ? buildPetition() : buildRelationship();
+  const items = applyHiddenItems(built, opts.hiddenItems);
   if (opts.supportItem) {
     items.push({
       label: "Support",
@@ -2219,6 +2212,7 @@ function NavSidebar({
   const ModeIcon = mode?.icon;
   const orgLogoSrc = resolveOrgLogoUrl(org?.logoUrl);
   const orgGradient = org?.brandColor ? `linear-gradient(to right, ${org.brandColor}, ${org.brandColorSecondary || org.brandColor})` : "linear-gradient(to right, #007BFF, #A54B7A, #E63946)";
+  const orgCardStyle = hexToRgba(org?.brandColor, 0.42) ? { borderColor: hexToRgba(org?.brandColor, 0.42) } : void 0;
   const activeGroupKey = react.useMemo(() => {
     for (let i = 0; i < nav.items.length; i++) {
       const item = nav.items[i];
@@ -2252,7 +2246,7 @@ function NavSidebar({
         "aria-modal": open ? "true" : void 0,
         "aria-label": open ? "Navigation" : void 0,
         className: clsx__default.default(
-          "fixed inset-y-0 left-0 w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--sidebar-bg,var(--nav-surface))] lg:flex",
+          "fixed inset-y-0 left-0 w-[var(--sidebar-width,236px)] flex-col border-r border-[color:var(--sidebar-line,var(--line))] bg-[color:var(--sidebar-bg,var(--nav-surface))] lg:flex",
           open ? "flex z-50" : "hidden z-30"
         ),
         style: { fontFamily: 'var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif)' },
@@ -2272,31 +2266,31 @@ function NavSidebar({
               children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
             }
           ) : null,
-          /* @__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-accent)] 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-accent)]", 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-shrink-0 flex-col gap-[14px] border-b border-[color:var(--sidebar-line,var(--line))] px-[18px] py-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Link,
+              {
+                href: brand.homeHref ?? "/",
+                className: "flex items-center gap-2.5",
+                children: brand.logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: brand.logoSrc,
+                    alt: brand.logoAlt ?? brand.title,
+                    draggable: false,
+                    className: "h-[var(--sidebar-brand-logo-height,24px)] 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-accent)] 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-accent)]", 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.jsx("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(--sidebar-text-muted,var(--muted))]", children: "Organization" }) }),
+              }
+            ),
+            org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-[7px] flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
               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",
@@ -2314,34 +2308,41 @@ function NavSidebar({
                 ),
                 /* @__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 flex-col overflow-hidden rounded-[5px] border border-[color:var(--line)] bg-[color:var(--panel-elevated)] text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)] [&::-webkit-details-marker]:hidden", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[70px] w-full items-center justify-center bg-white px-3", children: [
-                    orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-[70px] max-w-full object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "a",
-                      {
-                        href: org.uploadLogoHref ?? "#",
-                        onClick: (e) => e.stopPropagation(),
-                        className: "text-xs font-semibold text-[color:var(--color-accent)] underline",
-                        children: "Upload logo"
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2 px-2.5 py-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          title: org.name ?? void 0,
-                          className: "truncate text-[13px] font-semibold",
-                          children: org.name ?? "No organizations"
-                        }
-                      ),
-                      org.id && !org.loading ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
-                  ] })
-                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "summary",
+                  {
+                    style: orgCardStyle,
+                    className: "flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-white px-3 py-[7px]", children: [
+                        orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "a",
+                          {
+                            href: org.uploadLogoHref ?? "#",
+                            onClick: (e) => e.stopPropagation(),
+                            className: "text-xs font-semibold text-[color:var(--color-accent)] underline",
+                            children: "Upload logo"
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              title: org.name ?? void 0,
+                              className: "truncate text-[12px] font-semibold leading-[1.2]",
+                              children: org.name ?? "No organizations"
+                            }
+                          ),
+                          org.id && !org.loading ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14 })
+                      ] })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
                   shouldShowOrgFilter(org.organizations.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-[color:var(--panel-elevated)] px-2 pb-1 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "input",
@@ -2410,10 +2411,11 @@ function NavSidebar({
                 {
                   type: "button",
                   onClick: org.onClick,
-                  className: "flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--line)] bg-[color:var(--panel-elevated)] text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)]",
+                  style: orgCardStyle,
+                  className: "flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[70px] w-full items-center justify-center bg-white px-3", children: [
-                      orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-[70px] max-w-full object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-white px-3 py-[7px]", children: [
+                      orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
                         "a",
                         {
                           href: org.uploadLogoHref ?? "#",
@@ -2424,31 +2426,31 @@ function NavSidebar({
                       ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2 px-2.5 py-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
                           {
                             title: org.name ?? void 0,
-                            className: "truncate text-[13px] font-semibold",
+                            className: "truncate text-[12px] font-semibold leading-[1.2]",
                             children: org.name ?? "No organizations"
                           }
                         ),
                         org.id && !org.loading ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                      /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14 })
                     ] })
                   ]
                 }
               )
             ] }) : null,
-            mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+            mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   role: "radiogroup",
                   "aria-label": "Mode",
-                  className: "flex items-center justify-start gap-0.5 rounded-lg border border-[color:var(--border-inverse,var(--line))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px]",
+                  className: "flex w-full items-center gap-1 rounded-lg border border-[color:var(--border-inverse,var(--sidebar-line,var(--line)))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px]",
                   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;
@@ -2469,8 +2471,8 @@ function NavSidebar({
                           },
                           disabled: !available,
                           className: [
-                            "flex h-9 items-center justify-center rounded px-[9px] py-[6px] transition",
-                            !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : 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-white/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
+                            "flex flex-1 items-center justify-center rounded-[5px] px-[9px] py-[6px] transition",
+                            !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--sidebar-mode-selected-bg,var(--mode-accent,var(--color-accent)))] text-[color:var(--mode-on-accent,white)]" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-white/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
                           ].join(" "),
                           children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
                         },
@@ -2480,93 +2482,99 @@ function NavSidebar({
                   )
                 }
               ),
-              /* @__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) => {
-                if (item.kind === "section") {
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    NavSectionRow,
-                    {
-                      label: item.label,
-                      first: idx === 0
-                    },
-                    `section-${idx}-${item.label}`
-                  );
-                }
-                if (nav.flatten && item.children && item.children.length > 0) {
-                  return item.children.map((child, i) => {
-                    if (child.kind === "section") {
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        NavSectionRow,
-                        {
-                          label: child.label,
-                          first: idx === 0 && i === 0
-                        },
-                        `flat-section-${idx}-${i}-${child.label}`
-                      );
-                    }
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: modeCaption(mode.label) })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col overflow-y-auto px-[10px] py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-0.5", children: [
+            nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${NAV_EYEBROW_CLASS} px-2 pb-1.5 pt-1`, children: nav.groupLabel }) : null,
+            nav.items.map((item, idx) => {
+              if (item.kind === "section") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  NavSectionRow,
+                  {
+                    label: item.label,
+                    first: idx === 0
+                  },
+                  `section-${idx}-${item.label}`
+                );
+              }
+              if (nav.flatten && item.children && item.children.length > 0) {
+                return item.children.map((child, i) => {
+                  if (child.kind === "section") {
                     return /* @__PURE__ */ jsxRuntime.jsx(
-                      NavRow,
+                      NavSectionRow,
                       {
-                        item: child,
-                        active: child.href ? activeFn(pathname, child.href) : false,
-                        Link,
-                        variant: "flat"
+                        label: child.label,
+                        first: idx === 0 && i === 0
                       },
-                      child.href ?? `flat-${idx}-${i}-${child.label}`
+                      `flat-section-${idx}-${i}-${child.label}`
                     );
-                  });
-                }
-                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,
+                    NavRow,
                     {
-                      item,
-                      active: parentActive,
-                      open: openGroup === key,
-                      onToggle: () => toggleGroup(key),
-                      pathname,
-                      activeFn,
-                      Link
+                      item: child,
+                      active: child.href ? activeFn(pathname, child.href) : false,
+                      Link,
+                      variant: "flat"
                     },
-                    key
+                    child.href ?? `flat-${idx}-${i}-${child.label}`
                   );
-                }
-                const active = item.href ? activeFn(pathname, item.href) : false;
+                });
+              }
+              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(
-                  NavRow,
+                  NavGroup,
                   {
                     item,
-                    active,
+                    active: parentActive,
+                    open: openGroup === key,
+                    onToggle: () => toggleGroup(key),
+                    pathname,
+                    activeFn,
                     Link
                   },
-                  item.href ?? `nav-${idx}-${item.label}`
+                  key
                 );
-              })
-            ] })
-          ] }),
-          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",
+              }
+              const active = item.href ? activeFn(pathname, item.href) : false;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                NavRow,
                 {
-                  href: safeHref(l.href),
-                  className: "font-medium text-[color:var(--foreground)] opacity-80 hover:opacity-100 hover:underline",
-                  children: l.label
-                }
-              )
-            ] }, l.label)) }) : null,
+                  item,
+                  active,
+                  Link
+                },
+                item.href ?? `nav-${idx}-${item.label}`
+              );
+            })
+          ] }) }),
+          footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0 border-t border-[color:var(--sidebar-line,var(--line))] px-[14px] py-3", children: [
+            footer.user ? /* @__PURE__ */ jsxRuntime.jsx(
+              NavSidebarUserCard,
+              {
+                user: footer.user,
+                userMenu: footer.userMenu ?? void 0,
+                onSignOut: footer.onSignOut
+              }
+            ) : null,
+            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""}`, children: footer.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: safeHref(l.href),
+                className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:text-[color:var(--sidebar-text,var(--foreground))] hover:underline",
+                children: l.label
+              },
+              l.label
+            )) }) : null,
             footer.envLabel && footer.envLabel.trim().toLowerCase() !== "production" ? /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 "data-shell-meta": true,
-                className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))]",
+                className: "mt-1.5 flex flex-col items-start gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))]",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2629,6 +2637,27 @@ function HamburgerIcon() {
     }
   );
 }
+function BookOpenIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7v14" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" })
+      ]
+    }
+  );
+}
 function SearchIcon({ className } = {}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -2670,12 +2699,12 @@ function CloseIcon() {
     }
   );
 }
-function ChevronDown({ className } = {}) {
+function ChevronDown({ className, size = 16 } = {}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      width: 16,
-      height: 16,
+      width: size,
+      height: size,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -2689,6 +2718,28 @@ function ChevronDown({ className } = {}) {
   );
 }
 var NAV_HOVER_GRADIENT = "var(--nav-hover-gradient)";
+var NAV_EYEBROW_CLASS = "text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em] text-[color:var(--sidebar-eyebrow,var(--sidebar-text-muted,var(--muted)))]";
+var NAV_TOP_ICON_SIZE = 17;
+var NAV_TOP_ROW_CLASS = (active) => `gap-[11px] px-[10px] py-[9px] text-[13px] leading-none ${active ? "font-semibold" : "font-normal"}`;
+var NAV_TOP_ACTIVE_CLASS = "bg-[color:var(--sidebar-active-bg,var(--color-accent))] text-[color:var(--sidebar-active-text,white)]";
+var NAV_TOP_INACTIVE_CLASS = "text-[color:var(--sidebar-row-text,var(--sidebar-text,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] hover:text-[color:var(--sidebar-text,var(--foreground))]";
+function modeCaption(label) {
+  return label.replace(/\s+Mode$/i, " mode");
+}
+function NavActiveRail() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-y-0 left-0 w-[2px]",
+      style: { background: "var(--mode-accent, transparent)" }
+    }
+  );
+}
+function NavRowBadge({ value }) {
+  if (value === void 0 || value === null || value === "") return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: value });
+}
 function NavSectionRow({
   label,
   first,
@@ -2698,9 +2749,9 @@ function NavSectionRow({
     "p",
     {
       className: [
-        "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]",
-        variant === "sub" ? "px-3 pb-0.5" : "px-2 pb-1",
-        first ? "" : "mt-3"
+        NAV_EYEBROW_CLASS,
+        variant === "sub" ? "px-3 pb-0.5" : "px-2 pb-1.5 pt-1",
+        first ? "" : variant === "sub" ? "mt-3" : "mt-[14px]"
       ].join(" "),
       children: label
     }
@@ -2715,39 +2766,32 @@ function NavRow({
   const Icon = item.icon;
   const isSub = variant === "sub";
   const washActive = variant !== "top";
-  const activeClasses = washActive ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent)] shadow-sm" : "bg-[color:var(--color-accent)] text-white shadow-sm";
+  const activeClasses = washActive ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent)] shadow-sm" : NAV_TOP_ACTIVE_CLASS;
   const wrapperClasses = [
-    "group relative block overflow-hidden rounded-md transition",
-    active ? activeClasses : "text-[color:var(--sidebar-text,var(--muted))] hover:text-white"
+    "group relative block overflow-hidden transition",
+    isSub ? "rounded-md" : "rounded-[5px]",
+    active ? activeClasses : isSub ? "text-[color:var(--sidebar-text,var(--muted))] hover:text-white" : NAV_TOP_INACTIVE_CLASS
   ].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 && !washActive ? "text-white" : "text-current";
+  const rowPadding = isSub ? "gap-3 px-3 py-1.5 text-[13px] font-semibold" : NAV_TOP_ROW_CLASS(active);
+  const iconSize = isSub ? 16 : NAV_TOP_ICON_SIZE;
+  const iconClass = "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 }
-      }
-    ) : (
-      // Active-row rail, in the Mode's accent. `--mode-accent` is only set by
-      // a declared Mode chrome group, and the inline `transparent` fallback
-      // is what every other app gets — so this span is present but invisible
-      // there, and being absolutely positioned it moves nothing.
-      /* @__PURE__ */ jsxRuntime.jsx(
+    !active ? (
+      // Sub rows keep the left→right gradient sweep; top-level rows take a
+      // flat wash on hover (design rail: rgba(255,255,255,.05)).
+      isSub ? /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           "aria-hidden": "true",
-          className: "pointer-events-none absolute inset-y-0 left-0 w-[3px] rounded-l-md",
-          style: { background: "var(--mode-accent, transparent)" }
+          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 }
         }
-      )
-    ),
-    /* @__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
+      ) : null
+    ) : /* @__PURE__ */ jsxRuntime.jsx(NavActiveRail, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${rowPadding}`, children: [
+      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: `shrink-0 ${iconClass}` }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(NavRowBadge, { value: item.badge })
     ] })
   ] });
   if (item.disabled) {
@@ -2786,8 +2830,8 @@ function NavGroup({
   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-accent)] text-white shadow-sm" : open ? "bg-[color:var(--panel)] text-[color:var(--foreground)]" : "text-[color:var(--sidebar-text,var(--muted))] hover:text-white"
+    open ? "rounded-t-[5px]" : "rounded-[5px]",
+    active ? NAV_TOP_ACTIVE_CLASS : open ? "bg-[color:var(--sidebar-row-hover-bg,var(--panel))] text-[color:var(--sidebar-text,var(--foreground))]" : NAV_TOP_INACTIVE_CLASS
   ].join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2801,17 +2845,11 @@ function NavGroup({
         "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 }),
+          active ? /* @__PURE__ */ jsxRuntime.jsx(NavActiveRail, {}) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${NAV_TOP_ROW_CLASS(active)}`, children: [
+            Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: NAV_TOP_ICON_SIZE, className: "shrink-0 text-current" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavRowBadge, { value: item.badge }),
             /* @__PURE__ */ jsxRuntime.jsx(
               ChevronDown,
               {
@@ -2928,8 +2966,8 @@ function OrgIdCopyButton({ id }) {
         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)}`
+      className: "-ml-1 rounded px-1 text-left font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
+      children: copied ? "Copied" : `\u2026${id.slice(-8)}`
     }
   );
 }
@@ -2946,7 +2984,8 @@ function NavTopBar({
   onOpenNav,
   navOpen,
   search,
-  buildNotes
+  buildNotes,
+  accountMenu = "topbar"
 }) {
   const rawName = user?.name?.trim() || "";
   const hasRealName = rawName.length > 0 && !rawName.includes("@");
@@ -2954,7 +2993,7 @@ function NavTopBar({
   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("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: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-[var(--topbar-height,60px)] items-center justify-between gap-[14px] border-b border-[color:var(--line)] bg-[color:var(--panel)] px-[var(--topbar-padding-x,20px)]", children: [
       onOpenNav ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2967,8 +3006,8 @@ function NavTopBar({
           children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
         }
       ) : 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.jsxs("label", { className: "relative flex h-9 w-[320px] max-w-full shrink-0 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "pointer-events-none absolute left-[10px] h-[15px] w-[15px] text-[color:var(--muted)]" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2980,32 +3019,35 @@ function NavTopBar({
               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)]"
+            className: "h-full w-full rounded-[5px] border border-[color:var(--line)] bg-[color:var(--surface-sunken,var(--panel-elevated))] pl-[33px] pr-10 text-[13px] 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)]",
+            className: "pointer-events-none absolute right-[10px] rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] 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(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "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"
+            className: "inline-flex h-8 shrink-0 items-center gap-1.5 rounded-[5px] px-3 text-xs font-semibold text-[color:var(--muted)] transition hover:bg-[color:var(--surface-sunken,var(--panel-elevated))] hover:text-[color:var(--foreground)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(BookOpenIcon, {}),
+              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: [
+        accountMenu === "topbar" ? /* @__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",
@@ -3036,127 +3078,9 @@ function NavTopBar({
               }
             ) })
           ] }),
-          /* @__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",
-                  {
-                    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",
-                  {
-                    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"
-                    ]
-                  }
-                ) : 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 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
+          /* @__PURE__ */ jsxRuntime.jsx(NavAccountMenuPanel, { userMenu, onSignOut, placement: "below" })
+        ] }) : null,
+        accountMenu === "topbar" && !hasRealName && user ? /* @__PURE__ */ jsxRuntime.jsx(NamePromptBubble, { profileHref: userMenu?.myProfileHref }) : null
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3171,7 +3095,191 @@ function NavTopBar({
     )
   ] });
 }
-function NamePromptBubble({ profileHref }) {
+function NavAccountMenuPanel({
+  userMenu,
+  onSignOut,
+  placement
+}) {
+  const wrapper = placement === "above" ? "absolute bottom-full left-0 right-0 z-40 mb-2 flex max-h-[calc(100vh-5rem)] flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 text-[color:var(--foreground)] shadow-[var(--shadow-soft)]" : "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)]";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapper, children: [
+    placement === "below" ? /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}) : null,
+    /* @__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",
+          {
+            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",
+          {
+            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"
+            ]
+          }
+        ) : 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,
+      userMenu?.navDisplay ? /* @__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: "Navigation display" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": "Navigation display", className: "flex flex-col gap-0.5", children: NAV_DISPLAY_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": userMenu.navDisplay?.value === opt.value,
+            onClick: () => userMenu.navDisplay?.onChange(opt.value),
+            className: [
+              "flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm font-medium",
+              userMenu.navDisplay?.value === opt.value ? "text-[color:var(--color-accent)]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+            ].join(" "),
+            children: [
+              opt.label,
+              userMenu.navDisplay?.value === opt.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2713" }) : null
+            ]
+          },
+          opt.value
+        )) })
+      ] }) : 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
+  ] });
+}
+function NavSidebarUserCard({
+  user,
+  userMenu,
+  onSignOut
+}) {
+  const rawName = user.name?.trim() || "";
+  const hasRealName = rawName.length > 0 && !rawName.includes("@");
+  const displayName = hasRealName ? 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("details", { "data-nav-details": true, className: "group/acct relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "summary",
+      {
+        "aria-label": "My Account",
+        className: "flex w-full cursor-pointer list-none items-center gap-[9px] rounded-[5px] px-1 py-1 text-left transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] [&::-webkit-details-marker]:hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--sidebar-avatar-bg,var(--color-accent))] text-[11px] 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: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[12px] font-semibold leading-[1.2] text-[color:var(--sidebar-text,var(--foreground))]", children: displayName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] leading-[1.3] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: secondary })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14, className: "shrink-0 rotate-180 text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] transition group-open/acct:rotate-0" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(NavAccountMenuPanel, { userMenu, onSignOut, placement: "above" }),
+    !hasRealName ? /* @__PURE__ */ jsxRuntime.jsx(NamePromptBubble, { profileHref: userMenu?.myProfileHref, placement: "above" }) : null
+  ] });
+}
+function hexToRgba(hex, alpha) {
+  if (!hex) return void 0;
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return void 0;
+  const n = parseInt(m[1], 16);
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+}
+function NamePromptBubble({ profileHref, placement = "below" }) {
   const KEY = "politogy_name_prompt_dismissed";
   const [dismissed, setDismissed] = react.useState(true);
   react.useEffect(() => {
@@ -3182,42 +3290,48 @@ function NamePromptBubble({ profileHref }) {
     }
   }, []);
   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-accent)] 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 {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: placement === "above" ? "absolute bottom-full left-0 z-30 mb-2 w-64 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-3 text-left shadow-[var(--shadow-soft)]" : "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: placement === "above" ? "absolute -bottom-[5px] left-[14px] h-2.5 w-2.5 rotate-45 border-b border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)]" : "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-accent)] px-3 py-1 text-xs font-semibold text-white hover:opacity-90",
+              children: "Set name"
             }
-          },
-          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"
-        }
-      )
-    ] })
-  ] });
+          ) : 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);
@@ -3278,8 +3392,8 @@ function NavTopBarActionButton({ action }) {
   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-accent)] px-1 text-[10px] text-white", children: action.badge }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
+    typeof action.badge === "number" && action.badge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger,var(--color-accent))] px-1 text-[10px] font-bold leading-4 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;
@@ -3406,6 +3520,7 @@ function NavAppShell({
   topBar,
   betaBanner,
   contentWrapper = "padded",
+  accountMenuPlacement = "sidebar",
   modeId,
   children
 }) {
@@ -3422,15 +3537,29 @@ function NavAppShell({
       document.body.style.overflow = previous;
     };
   }, [navOpen]);
+  const sidebarFooter = accountMenuPlacement === "sidebar" && topBar.user ? {
+    ...sidebar.footer ?? {},
+    user: sidebar.footer?.user ?? topBar.user,
+    userMenu: sidebar.footer?.userMenu ?? topBar.userMenu,
+    onSignOut: sidebar.footer?.onSignOut ?? topBar.onSignOut
+  } : sidebar.footer;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-politogy-mode": modeId,
       className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar, open: navOpen, onClose: () => setNavOpen(false) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[240px]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(NavTopBar, { ...topBar, onOpenNav: () => setNavOpen(true), navOpen }),
+        /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar, footer: sidebarFooter, open: navOpen, onClose: () => setNavOpen(false) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[var(--sidebar-width,236px)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NavTopBar,
+            {
+              ...topBar,
+              accountMenu: topBar.accountMenu ?? (accountMenuPlacement === "sidebar" ? "sidebar" : "topbar"),
+              onOpenNav: () => setNavOpen(true),
+              navOpen
+            }
+          ),
           betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,
           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 }) : (
@@ -4108,7 +4237,12 @@ var MODE_BRAND_LOGOS = {
 var modeBrandLogo = (mode) => mode && MODE_BRAND_LOGOS[mode] || DEFAULT_BRAND_LOGO;
 var POLITOGY_APPS = {
   vrm: { title: "Politogy VRM", origin: "https://app.politogyvrm.com", storagePrefix: "vrm" },
-  contacts: { title: "Contacts", origin: "https://contacts.politogyvrm.com", storagePrefix: "contacts" },
+  contacts: {
+    title: "Contacts",
+    origin: "https://contacts.politogyvrm.com",
+    storagePrefix: "contacts",
+    pageTitle: false
+  },
   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" },
@@ -4149,6 +4283,9 @@ var POLITOGY_APPS = {
   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" }
 };
+var DEFAULT_SEARCH_PLACEHOLDER = {
+  contacts: "Search contacts, segments, forms"
+};
 function PolitogyAppFrame({
   app,
   pathname,
@@ -4307,10 +4444,11 @@ function FrameBody({
       // under it. This is routing data, not chrome configuration.
       contactsItem: data?.contactsItem,
       petitionsItem: data?.petitionsItem,
+      hiddenItems: data?.hiddenNavItems,
       mode: navMode,
       activeOrgId
     }),
-    [data?.contactsItem, data?.petitionsItem, navMode, activeOrgId]
+    [data?.contactsItem, data?.petitionsItem, data?.hiddenNavItems, navMode, activeOrgId]
   );
   const navItems = core?.nav ?? derivedNavItems;
   const navIsActive = react.useMemo(() => {
@@ -4359,7 +4497,7 @@ function FrameBody({
             // A flat rail's sub-menu IS the nav, so the 'tabs only' preference
             // (which strips children) would leave one childless parent row —
             // flat apps ignore the stripping.
-            items: navDisplay === "tabs" && meta.navShape !== "flat" ? navItems.map(({ children: _sub, ...item }) => item) : navItems,
+            items: (navDisplay === "tabs" || data?.flatNav === true) && meta.navShape !== "flat" ? navItems.map(({ children: _sub, ...item }) => item) : navItems,
             isActive: navIsActive,
             flatten: meta.navShape === "flat"
           },
@@ -4386,7 +4524,7 @@ function FrameBody({
         topBar: {
           // Core's pages publish their own identity; every other app is one
           // product surface and takes its registry title.
-          title: core?.page?.title ?? (grants?.includes("title") ? data?.frame?.title : void 0) ?? meta.title,
+          title: core?.page?.title ?? (grants?.includes("title") ? data?.frame?.title : void 0) ?? (meta.pageTitle === false ? void 0 : meta.title),
           breadcrumbs,
           user: {
             name: identity.userName,
@@ -4398,6 +4536,15 @@ function FrameBody({
           },
           userMenu,
           onSignOut: handleSignOut,
+          // Reference/UI-Platform "Top bar — required elements": Universal
+          // search is the only thing on the left end of the bar. No app wires
+          // search yet, so this stays decorative (`NavTopBarProps.search` — "an
+          // app that has not wired search yet still gets the correct chrome").
+          search: { placeholder: data?.searchPlaceholder ?? DEFAULT_SEARCH_PLACEHOLDER[app] ?? "Search" },
+          // "Build notes" — a quiet text button that starts the right-hand
+          // group. The spec names the element and its position but not its
+          // destination content; `onOpen` is left unset until that is defined.
+          buildNotes: {},
           // 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.
@@ -4792,8 +4939,6 @@ function ChromeTopBarActions() {
   const state = useChromeState();
   if (!state) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FuelAction, { orgId: state.orgId }),
-    /* @__PURE__ */ jsxRuntime.jsx(NavDisplayAction, { value: state.navDisplay, onChange: state.setNavDisplay }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TopBarWidgetSlot,
       {
@@ -4802,9 +4947,10 @@ function ChromeTopBarActions() {
         children: /* @__PURE__ */ jsxRuntime.jsx(ChromeDevNotesMenu, {})
       }
     ),
+    /* @__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(SupportAction, { orgId: state.orgId }),
-    /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId })
+    /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId }),
+    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId })
   ] });
 }
 function ChromeDevNotesMenu() {
@@ -4858,7 +5004,8 @@ function useChromeUserMenu({
     roles: (state?.orgs ?? []).filter((o) => o.rawRole || o.role).map((o) => ({ role: o.rawRole ?? o.role, orgName: o.name })),
     accounts: [{ id: userId, name: userName, email, avatarUrl: null, active: true }],
     addAccountHref: `${coreBase}/my-profile#accounts`,
-    theme: { value: theme.value, onChange: theme.setValue }
+    theme: { value: theme.value, onChange: theme.setValue },
+    navDisplay: state ? { value: state.navDisplay, onChange: state.setNavDisplay } : void 0
   };
 }
 var MODE_DEFS = [
@@ -4921,10 +5068,19 @@ function useChromeMode(arg = {}) {
   return {
     label: current.label,
     icon: current.icon,
-    options: options.length > 1 ? options.map((o) => ({ id: o.id, label: o.label, icon: o.icon })) : void 0,
-    onSelect: options.length > 1 ? (id) => {
+    // Left-Navigation §7 / Reference/UI-Platform: always the row of three icon
+    // buttons. A mode the organization does not hold is shown dimmed and not
+    // selectable, never hidden. Before entitlements land only the current mode
+    // reads as available (no layout shift, nothing clickable it shouldn't be).
+    options: MODE_DEFS.map((o) => ({
+      id: o.id,
+      label: o.label,
+      icon: o.icon,
+      available: entitled ? Boolean(entitled[o.id]) || o.id === current.id : o.id === current.id
+    })),
+    onSelect: options.length > 0 ? (id) => {
       const def = MODE_DEFS.find((m) => m.id === id);
-      if (!def) return;
+      if (!def || !entitled?.[def.id]) return;
       setSelectedModeId(id);
       try {
         localStorage.setItem(MODE_STORAGE_KEY, id);