@the-portland-company/shell 0.69.0 → 0.71.0

package/dist/native.cjs

@@ -88,6 +88,56 @@ function normalize(s) {
   return s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
 }
 
+// src/nav-preference.ts
+var NAV_DISPLAY_STORAGE_KEY = "politogy_nav_display";
+var NAV_DISPLAY_COOKIE = "politogy_nav_display";
+`(function(){try{
+var KEY=${JSON.stringify(NAV_DISPLAY_STORAGE_KEY)};
+var VALID=["menu","tabs","both"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+if(cookie&&VALID.indexOf(cookie)!==-1){var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+if(cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}}
+}catch(e){}})();`;
+var RAIL_STORAGE_KEY = "politogy_rail";
+var RAIL_COOKIE = "politogy_rail";
+var RAIL_DEFAULT = "collapsed";
+function isRailPreference(v) {
+  return v === "expanded" || v === "collapsed";
+}
+function readRailPreference() {
+  if (typeof document !== "undefined") {
+    try {
+      const m = document.cookie.match(new RegExp(`(?:^|;\\s*)${RAIL_COOKIE}=([^;]+)`));
+      const v = m ? decodeURIComponent(m[1]) : null;
+      if (isRailPreference(v)) return v;
+    } catch {
+    }
+  }
+  if (typeof localStorage !== "undefined") {
+    try {
+      const v = localStorage.getItem(RAIL_STORAGE_KEY);
+      if (isRailPreference(v)) return v;
+    } catch {
+    }
+  }
+  return RAIL_DEFAULT;
+}
+function writeRailPreference(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  try {
+    document.cookie = `${RAIL_COOKIE}=${pref}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+  } catch {
+  }
+  try {
+    localStorage.setItem(RAIL_STORAGE_KEY, pref);
+  } catch {
+  }
+}
+
 // src/theme-preference.ts
 var THEME_STORAGE_KEY = "politogy_theme";
 var THEME_COOKIE = "politogy_theme";
@@ -206,7 +256,7 @@ 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-[var(--topbar-icon-button-radius,5px)] border border-[color:var(--line)] transition",
+    "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-transparent transition",
     "h-[var(--topbar-icon-button-size,34px)] w-[var(--topbar-icon-button-size,34px)]",
     toneClass
   ].join(" ");
@@ -1882,7 +1932,6 @@ var PHONEBANK_ORIGIN = "https://phonebank.politogyvrm.com/";
 var CANVASS_ORIGIN = "https://canvass.politogyvrm.com/";
 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;
@@ -1952,10 +2001,6 @@ var APP_POLLS_CHILDREN = [
   { label: "Command Center", icon: "grid", href: "https://polls.politogyvrm.com/" },
   { label: "New Poll", icon: "edit", href: "https://polls.politogyvrm.com/polls/new" }
 ];
-var APP_CTAS_CHILDREN = [
-  { label: "CTAs", icon: "list", href: "https://ctas.politogyvrm.com/" },
-  { label: "Canvas", icon: "edit", href: "https://ctas.politogyvrm.com/?tab=canvas" }
-];
 var APP_A2P_CHILDREN = [
   { label: "Dashboard", icon: "grid", path: "dashboard" },
   { label: "Compose", icon: "edit", path: "compose" },
@@ -2003,16 +2048,27 @@ function standardPolitogyNav(opts) {
       return { label: c.label, icon: icon(c.icon), href: withOrg(withMode) };
     });
   };
+  const accountRows = () => [
+    { kind: "section", label: "Account" },
+    // My Profile is global — NOT org-suffixed (main-app ShellChromeBridge).
+    { label: "My profile", icon: icon("circleUser"), href: withOrg(abs("/my-profile")) },
+    {
+      label: "Organization settings",
+      icon: icon("settings"),
+      href: withOrg(abs("/organization-settings")),
+      children: branches(ORG_SETTINGS_CHILDREN)
+    }
+  ];
   const buildRelationship = () => {
     const contacts = opts.contactsItem ? {
       label: "Contacts",
-      icon: icon("users"),
+      icon: icon("usersRound"),
       href: opts.contactsItem.href,
       children: opts.contactsItem.children,
       badge: opts.contactsItem.count ?? void 0
     } : {
       label: "Contacts",
-      icon: icon("users"),
+      icon: icon("usersRound"),
       href: withOrg(`${CONTACTS_APP}/`),
       children: APP_CONTACTS_CHILDREN.map((c) => ({
         label: c.label,
@@ -2022,7 +2078,7 @@ function standardPolitogyNav(opts) {
     };
     return [
       { kind: "section", label: "Relationship" },
-      { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/relationship/dashboard")) },
+      { label: "Dashboard", icon: icon("layoutDashboard"), href: withOrg(abs("/relationship/dashboard")) },
       contacts,
       {
         label: "Email broadcast",
@@ -2045,40 +2101,20 @@ function standardPolitogyNav(opts) {
       },
       { 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: "Calls to action", icon: icon("mousePointerClick"), children: leaves(CTA_CHILDREN) },
       {
         label: "Forms",
-        icon: icon("activity"),
+        icon: icon("fileText"),
         href: withOrg("https://forms.politogyvrm.com/"),
         children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
       {
         label: "Surveys",
-        icon: icon("fileText"),
+        icon: icon("clipboardList"),
         href: withOrg("https://surveys.politogyvrm.com/surveys"),
         children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
-      {
-        label: "Polls",
-        icon: icon("barChart"),
-        href: withOrg("https://polls.politogyvrm.com/"),
-        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
-      },
-      {
-        label: "CTAs",
-        icon: icon("layout"),
-        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("settings"),
-        href: withOrg(abs("/organization-settings")),
-        children: branches(ORG_SETTINGS_CHILDREN)
-      }
+      ...accountRows()
     ];
   };
   const buildCampaign = () => {
@@ -2087,40 +2123,57 @@ function standardPolitogyNav(opts) {
       ...opts.campaignAvailability
     };
     const rows = [
-      { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/campaign/dashboard")) },
-      { label: "Voter Contact", icon: icon("target"), href: withOrg(abs("/campaign/campaigns")) },
+      // Left-Navigation §9.2: Race data -> Research -> GOTV -> Account.
+      // Battleground is the Campaign landing page; there is no Campaign
+      // Dashboard row, and Voter Contact and Tribes have no row.
+      { kind: "section", label: "Race data" },
+      { label: "Battleground", icon: icon("crosshair"), href: withOrg(abs("/campaign/battleground")) },
+      { label: "District data", icon: icon("landmark"), href: withOrg(abs("/campaign/districts")) },
+      { kind: "section", label: "Research" },
       {
-        label: "A2P",
-        icon: icon("messageSquare"),
-        href: withOrg(A2P_ORIGIN),
-        children: appLeaves(A2P_ORIGIN, APP_A2P_CHILDREN),
-        flag: "a2p"
+        label: "Polling",
+        icon: icon("chartNoAxes"),
+        href: withOrg(POLLS_ORIGIN),
+        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) })),
+        flag: "polling"
+      },
+      { kind: "section", label: "GOTV" },
+      {
+        label: "Field canvassing",
+        icon: icon("doorOpen"),
+        href: withOrg(CANVASS_ORIGIN),
+        children: appLeaves(CANVASS_ORIGIN, APP_CANVASS_CHILDREN),
+        flag: "canvass"
       },
       {
-        label: "Phone Banking",
+        label: "Phone banking",
         icon: icon("phone"),
         href: withOrg(PHONEBANK_ORIGIN),
         children: appLeaves(PHONEBANK_ORIGIN, APP_PHONEBANK_CHILDREN),
         flag: "phonebank"
       },
       {
-        label: "Field Canvassing",
-        icon: icon("map"),
-        href: withOrg(CANVASS_ORIGIN),
-        children: appLeaves(CANVASS_ORIGIN, APP_CANVASS_CHILDREN),
-        flag: "canvass"
+        label: "A2P texting",
+        icon: icon("messageSquare"),
+        href: withOrg(A2P_ORIGIN),
+        children: appLeaves(A2P_ORIGIN, APP_A2P_CHILDREN),
+        flag: "a2p"
       },
       {
-        label: "Sign Mapping",
-        icon: icon("mapPin"),
+        label: "Sign mapping",
+        icon: icon("signpost"),
         href: withOrg(SIGNS_ORIGIN),
         children: appLeaves(SIGNS_ORIGIN, APP_SIGNS_CHILDREN),
         flag: "signs"
       },
-      { label: "Tribes", icon: icon("users"), href: withOrg(CONTACTS_TRIBES), flag: "tribes" },
-      { label: "Polling Engine", icon: icon("barChart"), href: withOrg(POLLS_ORIGIN), flag: "polling" }
+      ...accountRows()
     ];
-    return rows.filter((r) => !r.flag || avail[r.flag]).map(({ flag: _flag, ...item }) => item);
+    const kept = rows.filter((r) => !r.flag || avail[r.flag]).map(({ flag: _flag, ...item }) => item);
+    return kept.filter((item, idx) => {
+      if (item.kind !== "section") return true;
+      const next = kept[idx + 1];
+      return !!next && next.kind !== "section";
+    });
   };
   const buildPetition = () => [
     opts.petitionsItem ? {
@@ -2227,7 +2280,9 @@ function NavSidebar({
   footer,
   linkComponent,
   open,
-  onClose
+  onClose,
+  onOpen,
+  onNavigate
 }) {
   const Link = linkComponent ?? DefaultLink;
   const collapsible = !open;
@@ -2324,7 +2379,7 @@ function NavSidebar({
         style: { fontFamily: 'var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif)' },
         onKeyDown: trapTab,
         onClick: (e) => {
-          if (open && e.target.closest("a[href]")) onClose?.();
+          if (open && e.target.closest("a[href]")) (onNavigate ?? onClose)?.();
         },
         children: [
           open ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2333,18 +2388,30 @@ function NavSidebar({
               type: "button",
               ref: closeButtonRef,
               onClick: onClose,
-              "aria-label": "Close menu",
+              "aria-label": "Collapse navigation",
               className: "absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)] md:hidden",
               children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
             }
           ) : 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 ${rc("max-md:items-center max-md:px-[10px]")}`, children: [
+            onOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onOpen,
+                "aria-label": "Expand navigation",
+                "aria-expanded": open ?? false,
+                "data-rail-toggle": "expand",
+                className: `hidden h-8 w-8 items-center justify-center rounded-lg ${rc("max-md:flex")}`,
+                children: brand.logoSquareSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: brand.logoSquareSrc, alt: "", draggable: false, className: "h-8 w-8 object-contain" }) : brand.logoPending ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "block h-8 w-8" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-sm font-black text-[#FFFFFF]", children: brand.badgeLabel })
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsxs(
               Link,
               {
                 href: brand.homeHref ?? "/",
                 "aria-label": brand.logoAlt ?? brand.title,
-                className: `flex items-center gap-2.5 ${rc("max-md:justify-center")}`,
+                className: `flex items-center gap-2.5 ${rc("max-md:justify-center")} ${onOpen ? rc("max-md:hidden") : ""}`,
                 children: [
                   brand.logoSquareSrc ? /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
@@ -2388,7 +2455,7 @@ function NavSidebar({
               }
             ),
             org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rc("max-md:flex max-md:justify-center"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-[7px] mt-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, 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 ${rc("max-md:w-auto max-md:border-0 max-md:bg-transparent max-md:p-0 max-md:shadow-none")}`, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
@@ -2414,7 +2481,7 @@ function NavSidebar({
                     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 ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,70px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                         orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
                           "a",
                           {
@@ -2426,7 +2493,7 @@ 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-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-[10px] ${rc("max-md:hidden")}`, children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "span",
@@ -2516,7 +2583,7 @@ function NavSidebar({
                   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))] ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,70px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                       orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
                         "a",
                         {
@@ -2528,7 +2595,7 @@ 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-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-[10px] ${rc("max-md:hidden")}`, children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
@@ -2573,7 +2640,7 @@ function NavSidebar({
                           },
                           disabled: !available,
                           className: [
-                            "flex flex-1 items-center justify-center rounded-[5px] px-[9px] py-[6px] transition",
+                            `flex flex-none items-center justify-center rounded-[5px] px-[9px] py-[6px] transition ${rc("max-md:flex-1")}`,
                             !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-[#FFFFFF]/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
                           ].join(" "),
                           children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
@@ -2663,15 +2730,17 @@ function NavSidebar({
                 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" : ""} ${rc("max-md:hidden")}`, 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.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap items-center justify-center gap-[6px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+              i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: "\xB7" }) : null,
+              /* @__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",
               {
@@ -3118,7 +3187,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-[14px] border-b border-[color:var(--line)] bg-[color:var(--panel)] px-[var(--topbar-padding-x,20px)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex min-w-0 h-[var(--topbar-height,60px)] items-center justify-between gap-[8px] md:gap-[14px] border-b border-[color:var(--line)] bg-[color:var(--panel)] px-[var(--topbar-padding-x,20px)]", children: [
       onOpenNav ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -3131,7 +3200,7 @@ function NavTopBar({
           children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative flex h-9 w-[320px] max-w-full shrink-0 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative flex h-9 w-[320px] min-w-0 max-w-full shrink items-center md:shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "pointer-events-none absolute left-[10px] h-[15px] w-[15px] text-[color:var(--muted)]" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -3151,13 +3220,13 @@ function NavTopBar({
           "kbd",
           {
             "aria-hidden": true,
-            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)]",
+            className: "pointer-events-none absolute right-[10px] hidden md:block 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.jsxs(
+        buildNotes ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -3168,7 +3237,7 @@ function NavTopBar({
               buildNotes?.label ?? "Build notes"
             ]
           }
-        ),
+        ) : null,
         actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavTopBarActionButton, { action }, action.key)) : null,
         actions,
         themeToggle,
@@ -3743,9 +3812,22 @@ function NavAppShell({
     );
   }
   const [navOpen, setNavOpen] = react.useState(false);
+  const expandRail = () => {
+    writeRailPreference("expanded");
+    setNavOpen(true);
+  };
+  const collapseRail = () => {
+    writeRailPreference("collapsed");
+    setNavOpen(false);
+  };
   react.useEffect(() => {
     setNavOpen(false);
   }, [sidebar.pathname]);
+  react.useEffect(() => {
+    if (readRailPreference() !== "expanded") return;
+    const narrow = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 767.98px)").matches : false;
+    if (narrow) setNavOpen(true);
+  }, []);
   react.useEffect(() => {
     if (!navOpen) return;
     const previous = document.body.style.overflow;
@@ -3766,15 +3848,23 @@ function NavAppShell({
       "data-politogy-mode": modeId,
       className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar, footer: sidebarFooter, open: navOpen, onClose: () => setNavOpen(false) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NavSidebar,
+          {
+            ...sidebar,
+            footer: sidebarFooter,
+            open: navOpen,
+            onClose: collapseRail,
+            onOpen: expandRail,
+            onNavigate: () => setNavOpen(false)
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-[var(--sidebar-collapsed-width,64px)] md:pl-[var(--sidebar-width,236px)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             NavTopBar,
             {
               ...topBar,
-              accountMenu: topBar.accountMenu ?? (accountMenuPlacement === "sidebar" ? "sidebar" : "topbar"),
-              onOpenNav: () => setNavOpen(true),
-              navOpen
+              accountMenu: topBar.accountMenu ?? (accountMenuPlacement === "sidebar" ? "sidebar" : "topbar")
             }
           ),
           betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,