@the-portland-company/shell 0.40.0 → 0.41.0

package/dist/app-chrome.js

@@ -1,6 +1,6 @@
 "use client";
 import { broadcastLogout, watchLogout } from './chunk-LL6LSJAH.js';
-import { standardPolitogyNav, NavAppShell, NavChromeProvider, FuelAction, NavDisplayAction, TopBarWidgetSlot, SupportAction, NotificationsAction, useChromeMe, useThemePreference, useNavChromeFetcher, useChromeOrgs } from './chunk-HJOFMJDM.js';
+import { standardPolitogyNav, NavAppShell, NavChromeProvider, FuelAction, NavDisplayAction, TopBarWidgetSlot, SupportAction, NotificationsAction, useChromeMe, useThemePreference, useNavChromeFetcher, useChromeOrgs } from './chunk-IX664IMD.js';
 import './chunk-U4RZPZET.js';
 import { NAV_DISPLAY_DEFAULT, resolveNavDisplay, isNavDisplayPreference, writeNavDisplayCookie, writeNavDisplayLocal, NAV_DISPLAY_STORAGE_KEY, readNavDisplayCookie } from './chunk-6UHJV2FH.js';
 import { resolveActiveOrg, writeActiveOrgCookie, isOrgId, ACTIVE_ORG_QUERY_PARAM } from './chunk-W2HITMV5.js';

package/dist/chrome.css

@@ -283,13 +283,17 @@
   --skeleton-shine: var(--color-layer-1);
 
   /* Beta banner — a semantic NOTICE, not a chrome surface, so it keeps one
-     amber treatment in both themes (same reasoning as the warning alerts it now
-     matches, e.g. "10DLC Registration Required"). It previously fell through to
-     --color-accent, which is the brand RED, so the notice read as an error.
-     A Brand edit can still override these; they are only the defaults. */
+     amber treatment in both themes. It previously fell through to
+     --color-accent, which is the brand RED, so the notice read as an error. */
   --beta-banner-bg: #feebc8;
   --beta-banner-text: #1a202c;
   --beta-banner-accent: #dd6b20;
+
+  /* The expanded sub-menu panel and the row hover inside it — one step off
+     the left bar so nesting reads. Dark values are pinned by
+     Reference/UI-Platform → Styling (#212121 / #2B2B2B). */
+  --nav-submenu-bg: #F4F4F4;
+  --nav-row-hover: #E8E8E8;
 }
 .dark {
   --background: 222.2 84% 4.9%;
@@ -330,22 +334,39 @@
   --color-muted: #A3A3A3;
   --skeleton-base: #212121;
   --skeleton-shine: #2B2B2B;
+  --nav-submenu-bg: #212121;
+  --nav-row-hover: #2B2B2B;
+  --form-control-border: #333333;
+  --form-control-border-hover: #404040;
+  --form-control-focus: #A3A3A3;
+  --form-placeholder-color: #8A8A8A;
+  --form-value-color: #E8E8E8;
+  --form-label-bg: #161616;
+  --form-select-icon: #A3A3A3;
+  --app-field-bg: #1F1F1F;
+  --app-field-border: #333333;
+  --app-field-border-hover: #404040;
+  --app-floating-label-bg: #161616;
+  --app-color-gray-50: #1F1F1F;
+  --app-color-gray-100: #212121;
+  --app-color-gray-200: #333333;
+  --app-color-gray-300: #404040;
+  --app-color-gray-400: #6B6B6B;
+  --app-color-gray-500: #8A8A8A;
+  --app-color-gray-600: #A3A3A3;
+  --app-color-gray-700: #C6C6C6;
+  --app-color-gray-800: #E8E8E8;
+  --app-color-gray-900: #F5F5F5;
 }
 
 /* ---------------------------------------------------------------------------
    Third-party top-bar widget slots (<TopBarWidgetSlot>, e.g. DevNotes).
 
    Such a widget ships its OWN launcher button, so it does not carry
-   topBarIconButtonClass and rendered as a 6px rounded square beside four 32px
-   circles — measured on forms, contacts, polls, surveys AND app (2026-07-24).
-   VRM core used to hide it with an app-side `.vrm-topbar-actions` override,
-   which is precisely the app-side patching Reference/UI-Platform forbids: the
-   moment VRM moved onto the shared frame the override went away and the square
-   button reappeared. It belongs here, once, for every app.
-
-   These values are topBarIconButtonClass expressed as CSS. `!important` is
-   required because the widget's own utility classes (h-8 w-8 rounded-md …) are
-   authored by the third-party package and would otherwise win.
+   topBarIconButtonClass. These values are topBarIconButtonClass expressed as
+   CSS; `!important` is required because the widget's own utility classes and
+   inline styles are authored by the third-party package and would otherwise
+   win.
 --------------------------------------------------------------------------- */
 .topbar-widget-slot button {
   height: var(--topbar-icon-button-size, 32px) !important;
@@ -365,15 +386,15 @@
   color: var(--topbar-icon-hover-color, var(--foreground)) !important;
   background: var(--topbar-icon-hover-bg, transparent) !important;
 }
+
 /* The launcher's own count bubble nests in an inner span around just the glyph.
    Neutralize that so the badge anchors to the 32px trigger like every other
    slot's (UI-Platform "Badge Counters": one universal placement).
 
    The selector must NOT depend on a class: DevNotes 0.6.x writes that wrapper
-   with an INLINE `position: relative` and no class at all, so the old
+   with an INLINE `position: relative` and no class at all, so an earlier
    `span.relative` selector matched nothing and the badge silently kept
-   anchoring to the glyph. Match every direct span child of the launcher
-   instead, and use !important so it beats the inline style. */
+   anchoring to the glyph. */
 .topbar-widget-slot button > span {
   position: static !important;
 }

package/dist/{chunk-HJOFMJDM.js → chunk-IX664IMD.js}

@@ -1,5 +1,5 @@
 import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-U4RZPZET.js';
-import { createContext, useState, useEffect, useContext, useRef, useCallback, useMemo } from 'react';
+import { createContext, useState, useEffect, useContext, useRef, useCallback, useMemo, useSyncExternalStore } from 'react';
 import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap, FiBatteryCharging, FiBattery } from 'react-icons/fi';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -58,6 +58,10 @@ function withOrgParam(url, orgId) {
   if (!orgId) return url;
   return `${url}${url.includes("?") ? "&" : "?"}org=${orgId}`;
 }
+function withPhoneParam(url, phone) {
+  if (!phone) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}phone=${encodeURIComponent(phone)}`;
+}
 function resolveOrgLogoUrl(url) {
   const raw = url?.trim();
   if (!raw) return void 0;
@@ -73,6 +77,23 @@ function topBarIconButtonClass(tone = "default") {
     toneClass
   ].join(" ");
 }
+var openPanelCount = 0;
+var panelListeners = /* @__PURE__ */ new Set();
+var emitPanelChange = () => panelListeners.forEach((l) => l());
+function setPanelOpenGlobal(open) {
+  openPanelCount = Math.max(0, openPanelCount + (open ? 1 : -1));
+  emitPanelChange();
+}
+function useAnyTopBarPanelOpen() {
+  return useSyncExternalStore(
+    (cb) => {
+      panelListeners.add(cb);
+      return () => panelListeners.delete(cb);
+    },
+    () => openPanelCount > 0,
+    () => false
+  );
+}
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
   return /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
@@ -256,6 +277,9 @@ function TopBarPopover({
   onOpenChangeRef.current = onOpenChange;
   useEffect(() => {
     onOpenChangeRef.current?.(open);
+    if (!open) return;
+    setPanelOpenGlobal(true);
+    return () => setPanelOpenGlobal(false);
   }, [open]);
   const rootRef = useRef(null);
   const lastOpenTokenRef = useRef(openToken);
@@ -434,7 +458,8 @@ function LowFuelHint({ lowFuel, orgId }) {
     } catch {
     }
   }, [lowFuel]);
-  if (!lowFuel || dismissed) return null;
+  const panelOpen = useAnyTopBarPanelOpen();
+  if (!lowFuel || dismissed || panelOpen) return null;
   const dismiss = () => {
     try {
       window.sessionStorage.setItem(LOW_FUEL_HINT_DISMISSED_KEY, "1");
@@ -668,6 +693,7 @@ function NotificationsAction({ orgId }) {
   const [toastReply, setToastReply] = useState(null);
   const [openToken, setOpenToken] = useState(0);
   const [panelOpen, setPanelOpen] = useState(false);
+  const anyPanelOpen = useAnyTopBarPanelOpen();
   useEffect(() => {
     setNotif(readNotifState(orgId));
     setToastReply(null);
@@ -851,19 +877,27 @@ function NotificationsAction({ orgId }) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: quarantined.map((q) => /* @__PURE__ */ jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: formatPhone(q.phone) }),
-                    /* @__PURE__ */ jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--panel)] px-1 text-[10px] tabular-nums text-[color:var(--muted)]", children: q.count })
-                  ] }),
-                  q.latestAt ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--muted)]", children: new Date(q.latestAt).toLocaleString() }) : null
-                ] }, q.phone)) })
+                /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: quarantined.map((q) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: withPhoneParam(withOrgParam(QUARANTINED_CONTACTS_URL, orgId), q.phone),
+                    "aria-label": `Review ${q.count} quarantined message${q.count === 1 ? "" : "s"} from ${formatPhone(q.phone)}`,
+                    className: "block rounded-lg px-2 py-2 transition hover:bg-[color:var(--nav-row-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-race-red)]",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: formatPhone(q.phone) }),
+                        /* @__PURE__ */ jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--panel)] px-1 text-[10px] font-normal leading-none tabular-nums text-[color:var(--muted)]", children: q.count > 99 ? "99+" : q.count })
+                      ] }),
+                      q.latestAt ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--muted)]", children: new Date(q.latestAt).toLocaleString() }) : null
+                    ]
+                  }
+                ) }, q.phone)) })
               ] }) : null
             ] })
           ] })
         }
       ),
-      toastReply && !panelOpen ? /* @__PURE__ */ jsx(
+      toastReply && !panelOpen && !anyPanelOpen ? /* @__PURE__ */ jsx(
         NewReplyToast,
         {
           reply: toastReply,
@@ -1905,7 +1939,7 @@ function NavGroup({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--panel)] p-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
+    open ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
       const childActive = child.href ? activeFn(pathname, child.href) : false;
       if (child.children && child.children.length > 0) {
         return /* @__PURE__ */ jsx(
@@ -1953,7 +1987,7 @@ function NavSubGroup({
         "aria-expanded": open,
         className: [
           "flex w-full items-center gap-2.5 rounded px-3 py-1.5 text-left text-[13px] font-medium transition",
-          ownsActive ? "text-[color:var(--color-race-red)]" : "text-[color:var(--muted)] hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)]"
+          ownsActive ? "text-[color:var(--color-race-red)]" : "text-[color:var(--muted)] hover:bg-[color:var(--nav-row-hover)] hover:text-[color:var(--foreground)]"
         ].join(" "),
         children: [
           Icon ? /* @__PURE__ */ jsx(Icon, { size: 15, className: "shrink-0 text-current" }) : null,
@@ -2520,5 +2554,5 @@ function NavAppShell({
 }
 
 export { CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, resolveOrgLogoUrl, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
-//# sourceMappingURL=chunk-HJOFMJDM.js.map
-//# sourceMappingURL=chunk-HJOFMJDM.js.map
+//# sourceMappingURL=chunk-IX664IMD.js.map
+//# sourceMappingURL=chunk-IX664IMD.js.map