@the-portland-company/shell 0.31.0 → 0.32.1

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## 0.32.0 — 2026-07-23
+
+### Added — mode-aware navigation (Campaign Mode) with zero new chrome config
+
+`standardPolitogyNav` now builds a per-Mode tree. `mode: 'relationship'` (the
+default) is **byte-for-byte** what it produced before — no consumer changes,
+no regression. `mode: 'campaign'` produces the Campaign tree — Dashboard, Voter
+Contact (both core-hosted under `app.politogyvrm.com/campaign/*`), then A2P,
+Phone Banking, Field Canvassing, Sign Mapping (standalone apps), Tribes (the
+Contacts app's `/tribes`) and Polling Engine (the polls app). `mode: 'petition'`
+is a minimal tree pointing at the Petition Mode app.
+
+Which tree an app renders is **derived, not passed**: it comes from the app's
+own `mode` in the `POLITOGY_APPS` registry. New rows were added for the four
+Campaign apps — `a2p`, `phonebank`, `canvass`, `signs` — each `mode: 'campaign'`,
+so they render the Campaign tree and a **static Campaign pill** (never a
+Relationship pill). Unscoped apps (forms / surveys / polls / contacts / vrm)
+have no `mode` and render Relationship exactly as before. The zero-drift
+contract holds: an app still passes nothing about its chrome.
+
+### Added — `CAMPAIGN_FEATURE_AVAILABILITY` (staged feature rollout)
+
+Campaign features ship incrementally. A disabled feature is **omitted** from the
+nav (not rendered as a dead row); its flag flips to `true` in a later patch
+release as the app launches. Defaults at this version: Polling Engine and Tribes
+on; A2P, Phone Banking, Field Canvassing and Sign Mapping off.
+
+### Changed — Mode switcher targets, and cross-app links carry the active org
+
+The Campaign/Petition trees carry the active org on every cross-app link as
+`?org=<last6>` — the same convention the Mode switcher and My Account menu use —
+so the destination app opens on the same org. The Mode switcher's Petition
+destination is corrected to `petition-mode.politogyvrm.com` (the petitions app's
+real production subdomain), and a mode-scoped app can pass `pinnedModeId` to
+`useChromeMode` so its pill shows its own mode while a multi-mode org still gets
+the switcher to leave.
+
 ## 0.31.0 — 2026-07-23
 
 ### Fixed — Surveys sub-menu now shows all three items (matches the tab strip)

package/README.md

@@ -179,6 +179,32 @@ import '@the-portland-company/shell/css'             // view-transitions CSS for
 
 ---
 
+## Mode-aware navigation (Campaign Mode)
+
+`PolitogyAppFrame` and `standardPolitogyNav` render a different left-nav tree per
+operating **Mode** — and an app passes nothing to select it. Which tree an app
+renders is derived from the app's own `mode` in the `POLITOGY_APPS` registry:
+
+- **Unscoped apps** (no `mode` — forms / surveys / polls / contacts / vrm) render
+  the **Relationship** tree, byte-for-byte as before, with an entitlement-driven
+  Mode pill.
+- **Campaign apps** (`a2p`, `phonebank`, `canvass`, `signs`, all `mode: 'campaign'`)
+  render the **Campaign** tree (Dashboard, Voter Contact, then the launched
+  feature apps) and a **static Campaign pill**.
+- **Petitions** (`mode: 'petition'`) renders a minimal Petition tree.
+
+Campaign features ship incrementally. `CAMPAIGN_FEATURE_AVAILABILITY` (exported
+from `@the-portland-company/shell/native`) gates each feature: a disabled one is
+omitted from the nav, and its flag flips to `true` in a patch release as the app
+launches. Defaults: Polling Engine and Tribes on; A2P, Phone Banking, Field
+Canvassing, Sign Mapping off.
+
+Cross-app links in the Campaign/Petition trees carry the active org as
+`?org=<last6>` — the same convention the Mode switcher and My Account menu use —
+so the destination app opens on the same org. When the chrome API grants more
+than one Mode (`scope.modes`), the pill becomes a switcher whose selection
+navigates to that Mode's home carrying the active org.
+
 ## Multi-SPA routing on `app.politogy.com`
 
 Multiple politogy apps live behind one domain via a Cloudflare Worker edge router (in `packages/edge-router` of the monorepo).

package/dist/app-chrome.cjs

@@ -820,6 +820,21 @@ function useThemePreference() {
 }
 
 // src/native/standardNav.ts
+var CAMPAIGN_FEATURE_AVAILABILITY = {
+  a2p: false,
+  phonebank: false,
+  canvass: false,
+  signs: false,
+  tribes: true,
+  polling: true
+};
+var A2P_ORIGIN = "https://a2p.politogyvrm.com/";
+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/";
 var CONTACTS_DEFAULT_CHILDREN = [
   { label: "Dashboard", icon: "grid", path: "/relationship/contacts/dashboard" },
   { label: "All Contacts", icon: "list", path: "/relationship/contacts/all" },
@@ -889,59 +904,85 @@ function standardPolitogyNav(opts) {
     href: abs(c.path),
     children: c.children ? leaves(c.children) : void 0
   }));
-  const contacts = opts.contactsItem ? {
-    label: "Contacts",
-    icon: icon("users"),
-    href: opts.contactsItem.href,
-    children: opts.contactsItem.children
-  } : {
-    label: "Contacts",
-    icon: icon("users"),
-    href: abs("/relationship/contacts/dashboard"),
-    children: leaves(CONTACTS_DEFAULT_CHILDREN)
+  const orgParam = opts.activeOrgId ? `org=${opts.activeOrgId.slice(-6)}` : "";
+  const withOrg = (url) => orgParam ? `${url}${url.includes("?") ? "&" : "?"}${orgParam}` : url;
+  const buildRelationship = () => {
+    const contacts = opts.contactsItem ? {
+      label: "Contacts",
+      icon: icon("users"),
+      href: opts.contactsItem.href,
+      children: opts.contactsItem.children
+    } : {
+      label: "Contacts",
+      icon: icon("users"),
+      href: abs("/relationship/contacts/dashboard"),
+      children: leaves(CONTACTS_DEFAULT_CHILDREN)
+    };
+    return [
+      { label: "Dashboard", icon: icon("home"), href: abs("/relationship/dashboard") },
+      contacts,
+      {
+        label: "Email Broadcast",
+        icon: icon("mail"),
+        href: abs("/relationship/email/dashboard"),
+        children: leaves(EMAIL_CHILDREN)
+      },
+      {
+        label: "SMS/MMS Blast",
+        icon: icon("messageSquare"),
+        href: abs("/relationship/sms-mms-blast/dashboard"),
+        children: leaves(SMS_CHILDREN)
+      },
+      // 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) },
+      {
+        label: "Forms",
+        icon: icon("activity"),
+        href: "https://forms.politogyvrm.com/",
+        children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+      },
+      {
+        label: "Surveys",
+        icon: icon("fileText"),
+        href: "https://surveys.politogyvrm.com/surveys",
+        children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+      },
+      {
+        label: "Polls",
+        icon: icon("barChart"),
+        href: "https://polls.politogyvrm.com/",
+        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+      },
+      {
+        label: "Organization Settings",
+        icon: icon("briefcase"),
+        href: abs("/organization-settings"),
+        children: branches(ORG_SETTINGS_CHILDREN)
+      }
+    ];
   };
-  const items = [
-    { label: "Dashboard", icon: icon("home"), href: abs("/relationship/dashboard") },
-    contacts,
-    {
-      label: "Email Broadcast",
-      icon: icon("mail"),
-      href: abs("/relationship/email/dashboard"),
-      children: leaves(EMAIL_CHILDREN)
-    },
-    {
-      label: "SMS/MMS Blast",
-      icon: icon("messageSquare"),
-      href: abs("/relationship/sms-mms-blast/dashboard"),
-      children: leaves(SMS_CHILDREN)
-    },
-    // 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) },
-    {
-      label: "Forms",
-      icon: icon("activity"),
-      href: "https://forms.politogyvrm.com/",
-      children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
-    },
-    {
-      label: "Surveys",
-      icon: icon("fileText"),
-      href: "https://surveys.politogyvrm.com/surveys",
-      children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
-    },
-    {
-      label: "Polls",
-      icon: icon("barChart"),
-      href: "https://polls.politogyvrm.com/",
-      children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
-    },
-    {
-      label: "Organization Settings",
-      icon: icon("briefcase"),
-      href: abs("/organization-settings"),
-      children: branches(ORG_SETTINGS_CHILDREN)
-    }
+  const buildCampaign = () => {
+    const avail = {
+      ...CAMPAIGN_FEATURE_AVAILABILITY,
+      ...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")) },
+      { label: "A2P", icon: icon("messageSquare"), href: withOrg(A2P_ORIGIN), flag: "a2p" },
+      { label: "Phone Banking", icon: icon("phone"), href: withOrg(PHONEBANK_ORIGIN), flag: "phonebank" },
+      { label: "Field Canvassing", icon: icon("map"), href: withOrg(CANVASS_ORIGIN), flag: "canvass" },
+      { label: "Sign Mapping", icon: icon("mapPin"), href: withOrg(SIGNS_ORIGIN), 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" }
+    ];
+    return rows.filter((r) => !r.flag || avail[r.flag]).map(({ flag: _flag, ...item }) => item);
+  };
+  const buildPetition = () => [
+    { label: "Dashboard", icon: icon("home"), href: withOrg(PETITION_MODE_ORIGIN) }
   ];
+  const mode = opts.mode ?? "relationship";
+  const items = mode === "campaign" ? buildCampaign() : mode === "petition" ? buildPetition() : buildRelationship();
   if (opts.supportItem) {
     items.push({
       label: "Support",
@@ -1840,14 +1881,13 @@ function NavBetaBanner({ text, linkLabel, href }) {
     "div",
     {
       role: "note",
-      className: "w-full border-y px-4 py-2 text-center text-sm",
+      className: "w-full px-4 py-2 text-center text-sm",
       style: {
-        // Warning amber with a darker border + text (HITL 2026-07-23). The
-        // --beta-banner-* tokens were never emitted, so the fallbacks are the
-        // real values: amber-100 fill, amber-500 border, amber-900 text.
-        background: "var(--beta-banner-bg, #FEF3C7)",
-        borderColor: "var(--beta-banner-border, #F59E0B)",
-        color: "var(--beta-banner-text, #78350F)"
+        // Brand red fill, white text, no borders (HITL 2026-07-24). The
+        // --beta-banner-* tokens still win when the Brand sheet emits them;
+        // otherwise the banner takes the brand accent red.
+        background: "var(--beta-banner-bg, var(--color-accent, #E63946))",
+        color: "var(--beta-banner-text, #FFFFFF)"
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: body }),
@@ -1858,7 +1898,7 @@ function NavBetaBanner({ text, linkLabel, href }) {
             target: "_blank",
             rel: "noreferrer",
             className: "font-bold underline",
-            style: { color: "var(--beta-banner-text, #78350F)" },
+            style: { color: "var(--beta-banner-text, #FFFFFF)" },
             children: label
           }
         )
@@ -1978,7 +2018,19 @@ var POLITOGY_APPS = {
   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" },
-  petitions: { title: "Petitions", origin: "https://petitions.politogyvrm.com", storagePrefix: "petitions" }
+  petitions: {
+    title: "Petitions",
+    origin: "https://petition-mode.politogyvrm.com",
+    storagePrefix: "petitions",
+    mode: "petition"
+  },
+  // Campaign Mode apps — each scoped to Campaign, so they render the Campaign
+  // tree and a static Campaign pill. Not yet deployed; hidden from the Campaign
+  // nav by CAMPAIGN_FEATURE_AVAILABILITY until their launch flips the flag.
+  a2p: { title: "A2P Messaging", origin: "https://a2p.politogyvrm.com", storagePrefix: "a2p", mode: "campaign" },
+  phonebank: { title: "Phone Banking", origin: "https://phonebank.politogyvrm.com", storagePrefix: "phonebank", mode: "campaign" },
+  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" }
 };
 function PolitogyAppFrame({
   app,
@@ -2042,19 +2094,24 @@ function FrameBody({
     email: identity.email
   });
   const footer = useChromeFooter(buildMeta ?? {});
-  const mode = useChromeMode();
+  const appMode = meta.mode;
+  const mode = useChromeMode(appMode ? { pinnedModeId: appMode } : void 0);
   const coreOrgs = chrome?.orgs ?? [];
   const activeCoreOrg = coreOrgs.find((o) => o.id === chrome?.orgId) ?? null;
   const navDisplay = chrome?.navDisplay ?? "both";
+  const navMode = appMode ?? "relationship";
+  const activeOrgId = chrome?.orgId ?? null;
   const navItems = react.useMemo(
     () => standardPolitogyNav({
       coreBaseUrl: POLITOGY_APPS.vrm.origin,
       icons: standardNavIcons,
       // An app that OWNS a standard nav entry (Contacts) nests its own routes
       // under it. This is routing data, not chrome configuration.
-      contactsItem: data?.contactsItem
+      contactsItem: data?.contactsItem,
+      mode: navMode,
+      activeOrgId
     }),
-    [data?.contactsItem]
+    [data?.contactsItem, navMode, activeOrgId]
   );
   const breadcrumbs = react.useMemo(
     () => deriveBreadcrumbs(navItems, pathname, { search, origin: meta.origin }),
@@ -2127,7 +2184,13 @@ var standardNavIcons = {
   settings: fi.FiSettings,
   creditCard: fi.FiCreditCard,
   dollarSign: fi.FiDollarSign,
-  share: fi.FiShare2
+  share: fi.FiShare2,
+  // Campaign / Petition mode slots.
+  phone: fi.FiPhone,
+  map: fi.FiMap,
+  mapPin: fi.FiMapPin,
+  target: fi.FiTarget,
+  flag: fi.FiFlag
 };
 var ORG_STORAGE_KEY = "vrm.activeOrg";
 var MODE_STORAGE_KEY = "vrm.activeMode";
@@ -2380,15 +2443,17 @@ var MODE_DEFS = [
     orgQuery: true
   },
   {
-    // Petition Mode lives in its own standalone app (HITL 2026-07-23).
+    // Petition Mode lives in its own standalone app on its own subdomain — the
+    // petitions repo deploys production to petition-mode.politogyvrm.com.
     id: "petition",
     label: "Petition Mode",
     icon: fi.FiFlag,
-    href: "https://petitions.politogyvrm.com/",
+    href: "https://petition-mode.politogyvrm.com/",
     orgQuery: true
   }
 ];
-function useChromeMode(fallbackModeId = "relationship") {
+function useChromeMode(arg = {}) {
+  const { fallbackModeId = "relationship", pinnedModeId } = typeof arg === "string" ? { fallbackModeId: arg, pinnedModeId: void 0 } : arg;
   const ctx = react.useContext(ChromeStateContext);
   const nav = useNavChromeFetcher();
   const orgId = ctx?.orgId ?? null;
@@ -2415,8 +2480,9 @@ function useChromeMode(fallbackModeId = "relationship") {
     };
   }, [nav, orgId]);
   const options = MODE_DEFS.filter((m) => entitled?.[m.id]);
+  const pinned = pinnedModeId ? MODE_DEFS.find((m) => m.id === pinnedModeId) ?? null : null;
   const selected = selectedModeId ? options.find((m) => m.id === selectedModeId) ?? null : null;
-  const current = selected ?? options[0] ?? MODE_DEFS.find((m) => m.id === fallbackModeId) ?? MODE_DEFS[0];
+  const current = pinned ?? selected ?? options[0] ?? MODE_DEFS.find((m) => m.id === fallbackModeId) ?? MODE_DEFS[0];
   const suffix = orgId ? `?org=${orgId.slice(-6)}` : "";
   return {
     label: current.label,