@the-portland-company/shell 0.69.0 → 0.70.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";
@@ -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: "Phone Banking",
+        label: "Field canvassing",
+        icon: icon("doorOpen"),
+        href: withOrg(CANVASS_ORIGIN),
+        children: appLeaves(CANVASS_ORIGIN, APP_CANVASS_CHILDREN),
+        flag: "canvass"
+      },
+      {
+        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",
@@ -3118,7 +3185,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 +3198,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 +3218,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 +3235,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 +3810,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 +3846,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,