@the-portland-company/shell 0.54.0 → 0.56.0

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+## 0.56.0 — 2026-09-30
+
+### Fixed — mode continuity for dual-mode apps (a2p)
+
+a2p (Specs/A2P) is the SMS/MMS delivery engine for BOTH Relationship Mode and
+Campaign Mode, but it was registered `mode: 'campaign'` only, so the
+Relationship tree's "SMS/MMS Blast" row sent users into a2p and the whole left
+nav flipped to the Campaign tree + "Campaign Mode" pill — a jarring identity
+switch for a user who never left Relationship Mode.
+
+`POLITOGY_APPS[app]` now supports an optional `dual: { modes, defaultMode }`.
+a2p declares `dual: { modes: ['relationship', 'campaign'], defaultMode:
+'campaign' }`; its EFFECTIVE mode is resolved per-visit by the new
+`resolveActiveMode` (`src/mode-preference.ts`): `?mode=` query param → the new
+cross-subdomain `politogy_active_mode` cookie → the app's own default. Every
+pinned app and core writes that cookie with its own mode, so arriving at a2p
+after using Relationship Mode elsewhere resolves to Relationship even without
+an explicit `?mode=` link. The Relationship tree's "SMS/MMS Blast" row now
+links straight to a2p with `?mode=relationship` (the dead
+`/relationship/sms-mms-blast/*` core routes are removed); the Campaign tree's
+existing A2P row is unchanged.
+
+## 0.55.0 — 2026-09-30
+
+### Fixed — org pill body no longer takes the Mode accent (`./native`)
+
+Reference/UI-Platform ("Left bar" / "Per-mode branding") is explicit: the org
+pill sits on a **neutral surface** — only the circular org badge carries a
+brand or Mode color, never the pill body. The `./native` `NavSidebar`'s org
+pill (both the disabled single-org button and the multi-org `<details>`
+selector) resolved `var(--mode-accent, var(--panel-elevated))` as its own
+background and `var(--mode-on-accent, var(--foreground))` as its text color —
+so a Mode with its own accent (Campaign's `#8F1F2A`) painted the **whole
+pill** solid red instead of just the badge. Reported live as "V1 styling" on
+a2p.politogyvrm.com (shell 0.46.0, still present through 0.54.0). Both spots
+now render the neutral `--panel-elevated` / `--line` / `--foreground` chain
+unconditionally; the badge (unchanged) still resolves the org's brand color
+or, absent one, the chrome/Mode accent.
+
+### Fixed — mode pill resolves the semantic Mode accent, not the flat global one
+
+The mode pill (both the disabled single-mode button and the multi-mode
+selector) was hardcoded to `var(--color-accent)` / `text-white`, so a Mode
+that declares its own `chrome.accent` (Reference/UI-Platform → "Per-mode
+branding") never reached this pill — only the rail background did. It now
+resolves `var(--mode-accent, var(--color-accent))` with
+`var(--mode-on-accent, white)`, matching the org pill's badge and the active
+nav row's existing pattern.
+
+### Why
+
+Live audit against Reference/UI-Platform + the shared Relationship Mode UI
+design template (orchestrator rail-parity sweep, 2026-09-30).
+
 ## 0.53.0 — 2026-09-29
 
 ### Added — Loading Screen boot surface (Specs/Loading-Screen)

package/dist/app-chrome.cjs

@@ -1494,11 +1494,6 @@ var APP_EMAIL_CHILDREN = [
   { label: "Deliverability", icon: "activity", href: `${EMAIL_APP}/deliverability` }
 ];
 var EMAIL_V1_LEGACY = { label: "Email V1 (legacy)", icon: "clock", path: "/relationship/email/dashboard" };
-var SMS_CHILDREN = [
-  { label: "Dashboard", icon: "grid", path: "/relationship/sms-mms-blast/dashboard" },
-  { label: "Compose & Send", icon: "send", path: "/relationship/sms-mms-blast/compose-and-send" },
-  { label: "Conversations", icon: "messageSquare", path: "/relationship/sms-mms-blast/conversations" }
-];
 var CTA_CHILDREN = [
   { label: "Dashboard", icon: "grid", path: "/relationship/cta-database/dashboard" },
   { label: "Create & Edit", icon: "edit", path: "/relationship/cta-creator/create-and-edit" },
@@ -1579,6 +1574,14 @@ function standardPolitogyNav(opts) {
     href: withOrg(abs(c.path)),
     children: c.children ? leaves(c.children) : void 0
   }));
+  const appLeaves = (origin, children, modeParam) => {
+    const base2 = origin.replace(/\/+$/, "");
+    return children.map((c) => {
+      const url = c.path ? `${base2}/${c.path}` : `${base2}/`;
+      const withMode = modeParam ? `${url}${url.includes("?") ? "&" : "?"}mode=${modeParam}` : url;
+      return { label: c.label, icon: icon(c.icon), href: withOrg(withMode) };
+    });
+  };
   const buildRelationship = () => {
     const contacts = opts.contactsItem ? {
       label: "Contacts",
@@ -1607,11 +1610,17 @@ 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",
         icon: icon("messageSquare"),
-        href: withOrg(abs("/relationship/sms-mms-blast/dashboard")),
-        children: leaves(SMS_CHILDREN)
+        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) },
@@ -1652,14 +1661,6 @@ function standardPolitogyNav(opts) {
       ...CAMPAIGN_FEATURE_AVAILABILITY,
       ...opts.campaignAvailability
     };
-    const appLeaves = (origin, children) => {
-      const base2 = origin.replace(/\/+$/, "");
-      return children.map((c) => ({
-        label: c.label,
-        icon: icon(c.icon),
-        href: withOrg(c.path ? `${base2}/${c.path}` : `${base2}/`)
-      }));
-    };
     const rows = [
       { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/campaign/dashboard")) },
       { label: "Voter Contact", icon: icon("target"), href: withOrg(abs("/campaign/campaigns")) },
@@ -1932,7 +1933,7 @@ 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 items-center justify-between gap-2 rounded-md border border-[color:var(--mode-accent,var(--line))] bg-[color:var(--mode-accent,var(--panel-elevated))] px-2.5 py-2 text-left text-[color:var(--mode-on-accent,var(--foreground))] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--panel))] [&::-webkit-details-marker]:hidden", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)] [&::-webkit-details-marker]:hidden", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
@@ -2021,7 +2022,7 @@ function NavSidebar({
                 {
                   type: "button",
                   onClick: org.onClick,
-                  className: "flex w-full items-center justify-between gap-2 rounded-md border border-[color:var(--mode-accent,var(--line))] bg-[color:var(--mode-accent,var(--panel-elevated))] px-2.5 py-2 text-left text-[color:var(--mode-on-accent,var(--foreground))] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--panel))]",
+                  className: "flex w-full items-center justify-between gap-2 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)]",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2040,7 +2041,7 @@ function NavSidebar({
               )
             ] }) : null,
             mode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: mode.options && mode.options.length > 1 && mode.onSelect ? /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md bg-[color:var(--color-accent)] px-2.5 py-2 text-white shadow-sm transition hover:opacity-95 [&::-webkit-details-marker]:hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md bg-[color:var(--mode-accent,var(--color-accent))] px-2.5 py-2 text-[color:var(--mode-on-accent,white)] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--color-accent))] hover:opacity-95 [&::-webkit-details-marker]:hidden", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
                   ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tracking-[-0.01em]", children: mode.label })
@@ -2075,7 +2076,7 @@ function NavSidebar({
               "button",
               {
                 type: "button",
-                className: "flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-accent)] px-2.5 py-2 text-white shadow-sm",
+                className: "flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--mode-accent,var(--color-accent))] px-2.5 py-2 text-[color:var(--mode-on-accent,white)] shadow-sm",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
                     ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
@@ -3256,6 +3257,58 @@ function watchLogout(onLogout, options = {}) {
   }
   return cleanup;
 }
+
+// src/mode-preference.ts
+var ACTIVE_MODE_COOKIE = "politogy_active_mode";
+var VALID_MODES = ["relationship", "campaign", "petition"];
+function isStandardNavMode(v) {
+  return typeof v === "string" && VALID_MODES.includes(v);
+}
+function readActiveModeCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${ACTIVE_MODE_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isStandardNavMode(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeActiveModeCookie(mode) {
+  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" : "";
+  document.cookie = `${ACTIVE_MODE_COOKIE}=${encodeURIComponent(
+    mode
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function modeFromSearch(search) {
+  if (!search) return null;
+  try {
+    const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+    return params.get("mode");
+  } catch {
+    return null;
+  }
+}
+function resolveActiveMode({
+  search,
+  modes,
+  defaultMode
+}) {
+  const fromQuery = modeFromSearch(search);
+  if (fromQuery && isStandardNavMode(fromQuery) && modes.includes(fromQuery)) {
+    return fromQuery;
+  }
+  const fromCookie = readActiveModeCookie();
+  if (fromCookie && modes.includes(fromCookie)) {
+    return fromCookie;
+  }
+  return defaultMode;
+}
 var BOOT_STAGE_TABLE = [
   { id: "s0_session", weight: 5, critical: true, waitsOn: "Politogy ID session resolution" },
   { id: "s1_org", weight: 10, critical: true, waitsOn: "Chrome API /api/chrome/me + orgs" },
@@ -3625,7 +3678,17 @@ var POLITOGY_APPS = {
   // 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" },
+  // Dual-mode: a2p is the SMS/MMS delivery engine for BOTH Relationship Mode
+  // and Campaign Mode (Specs/A2P). `mode: 'campaign'` stays the fallback for
+  // anything reading `meta.mode` directly; the effective mode a user sees is
+  // resolved per-visit (see `dual`, resolveActiveMode).
+  a2p: {
+    title: "A2P Messaging",
+    origin: "https://a2p.politogyvrm.com",
+    storagePrefix: "a2p",
+    mode: "campaign",
+    dual: { modes: ["relationship", "campaign"], defaultMode: "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" }
@@ -3762,9 +3825,19 @@ function FrameBody({
   });
   const userMenu = core?.userMenu ?? derivedUserMenu;
   const footer = useChromeFooter(buildMeta ?? {});
-  const appMode = meta.mode;
+  const resolvedDualMode = meta.dual ? resolveActiveMode({
+    search: search ?? (typeof window !== "undefined" ? window.location.search : void 0),
+    modes: meta.dual.modes,
+    defaultMode: meta.dual.defaultMode
+  }) : void 0;
+  const appMode = resolvedDualMode ?? meta.mode;
   const derivedMode = useChromeMode(appMode ? { pinnedModeId: appMode } : void 0);
   const mode = core?.mode ?? derivedMode;
+  const coreLiveMode = app === CORE_APP ? pathname.startsWith("/campaign") ? "campaign" : pathname.startsWith("/relationship") ? "relationship" : void 0 : void 0;
+  const cookieMode = coreLiveMode ?? (meta.dual ? void 0 : meta.mode);
+  react.useEffect(() => {
+    if (cookieMode) writeActiveModeCookie(cookieMode);
+  }, [cookieMode]);
   const coreOrgs = chrome?.orgs ?? [];
   const activeCoreOrg = coreOrgs.find((o) => o.id === chrome?.orgId) ?? null;
   const navDisplay = chrome?.navDisplay ?? "both";