@the-portland-company/shell 0.40.0 → 0.41.1

package/CHANGELOG.md

@@ -1,3 +1,83 @@
+## 0.41.1 — 2026-08-03
+
+### Fixed — the Chakra tooltip override in 0.41.0 did not actually take
+
+0.41.0 pinned `Tooltip.baseStyle.bg`, but Chakra's own baseStyle sets
+`bg: var(--tooltip-bg)` and then assigns that VARIABLE from its palette — and it
+ships a `_dark` block that reassigns `--tooltip-bg` to `colors.gray.300`,
+deliberately inverting in dark mode. Overriding `bg` alone therefore lost, and
+the bubble still measured `#E8E8E8` live after the 0.41.0 deploy. Both the base
+and the `_dark` block now pin `--tooltip-bg` / `--tooltip-fg` /
+`--popper-arrow-bg` to the shared panel surface, with a test asserting it.
+
+## 0.41.0 — 2026-08-03
+
+### Fixed — the expanded sub-menu was the same colour as the left bar
+
+Reference/UI-Platform → Styling pins the nav ramp (page `#0A0A0A` → left/top bar
+`#161616` → **expanded sub-menu `#212121`** → row hover `#2B2B2B` → borders
+`#333333`). The expanded group painted `--panel`, which is `#161616` in dark —
+the same value as the bar behind it — so nesting read as flat. New tokens
+`--nav-submenu-bg` and `--nav-row-hover` carry the ramp's steps; the nested
+sub-group's hover no longer reuses `--panel-elevated` (`#1F1F1F`), which was
+DARKER than the panel it sits on and made a hovered row recede.
+
+### Fixed — quarantined-contact rows looked clickable and were not
+
+The rows in the Alerts panel carried a hover highlight on a non-interactive
+`<li>`, so a row advertised interactivity and then did nothing. Each row is now
+a real `<a>` — keyboard focusable, Enter-activatable, with a visible
+focus-visible ring — opening the quarantined-contacts view filtered to that
+number (`?phone=`), the same destination as "View all" but scoped. Counts cap at
+`99+` and match the shared badge geometry.
+
+### Fixed — the `.dark` block was missing whole token groups
+
+Global-Rules → Dark Mode: "A var can never exist in one block and not the
+other." The form-control, app-field, floating-label and `--app-color-gray-*`
+groups were declared in `:root` only, so a control in dark mode kept its LIGHT
+border, placeholder and label values — measured live as slate `#64748B` /
+`#475569` against black, which is also the forbidden blue-tinted family. All are
+now overridden, with the gray ramp INVERTED (pale surface → dark surface, dark
+text → light text).
+
+### Fixed — Chakra tooltips and subtle alerts in dark mode
+
+Chakra's stock `Tooltip` inverts, so in dark mode every `div#tooltip-*` rendered
+a near-white `#E8E8E8` slab against black chrome (15 of 29 pages). It is now
+pinned to the shared panel surface, so a Chakra tooltip and the native chrome's
+`TopBarTooltip` are one treatment, per UI-Platform. Chakra's `subtle` /
+`left-accent` alerts resolved `<scheme>.200` for BOTH the surface and the icon,
+so an error alert painted `#FEB2B2`; in dark they now use a neutral raised
+surface and carry meaning in the icon/text accent, with red reconciled to the
+brand ramp rather than Chakra's `#E53E3E`.
+
+### Fixed — `gen:tokens` silently deleted hand-written chrome rules
+
+`scripts/gen-tokens.mjs` rewrites `chrome.css` wholesale, but the widget-slot
+badge normalization and the beta-banner defaults had been appended to the
+committed file by hand. The next regeneration would have deleted them — 0.40.0's
+badge fix included. They now live in the generator (`STATIC_CHROME_CSS`), so the
+file regenerates losslessly.
+
+### Added
+
+`__tests__/darkTokenCompleteness.test.ts` asserts that every colour-valued
+`:root` var has a `.dark` override and that every dark chrome hex is hue-free
+(R = G = B) — the arithmetic check the spec asks for, rather than an eyeball.
+
+## 0.40.1 — 2026-08-03
+
+### Fixed — a top-bar nudge could still cover an open panel
+
+0.40.0 stopped the new-reply toast covering the notifications panel, but the
+same collision existed from a NEIGHBOURING trigger: the low-fuel nudge is wider
+than its own trigger and the panels are right-aligned, so with Notifications
+open the nudge sat on its header (measured live on contacts.politogyvrm.com
+after the 0.40.0 deploy). The top bar now keeps one module-scoped count of open
+panels (`useAnyTopBarPanelOpen`); both transient nudges yield while any panel is
+open and return when it closes. Still no z-index changes.
+
 ## 0.40.0 — 2026-08-03
 
 ### Fixed — the DevNotes badge was a second badge definition

package/dist/app-chrome.cjs

@@ -154,6 +154,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;
@@ -169,6 +173,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 react.useSyncExternalStore(
+    (cb) => {
+      panelListeners.add(cb);
+      return () => panelListeners.delete(cb);
+    },
+    () => openPanelCount > 0,
+    () => false
+  );
+}
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
   return /* @__PURE__ */ jsxRuntime.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 });
@@ -352,6 +373,9 @@ function TopBarPopover({
   onOpenChangeRef.current = onOpenChange;
   react.useEffect(() => {
     onOpenChangeRef.current?.(open);
+    if (!open) return;
+    setPanelOpenGlobal(true);
+    return () => setPanelOpenGlobal(false);
   }, [open]);
   const rootRef = react.useRef(null);
   const lastOpenTokenRef = react.useRef(openToken);
@@ -530,7 +554,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");
@@ -764,6 +789,7 @@ function NotificationsAction({ orgId }) {
   const [toastReply, setToastReply] = react.useState(null);
   const [openToken, setOpenToken] = react.useState(0);
   const [panelOpen, setPanelOpen] = react.useState(false);
+  const anyPanelOpen = useAnyTopBarPanelOpen();
   react.useEffect(() => {
     setNotif(readNotifState(orgId));
     setToastReply(null);
@@ -947,19 +973,27 @@ function NotificationsAction({ orgId }) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: quarantined.map((q) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: formatPhone(q.phone) }),
-                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: new Date(q.latestAt).toLocaleString() }) : null
-                ] }, q.phone)) })
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: quarantined.map((q) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: formatPhone(q.phone) }),
+                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: new Date(q.latestAt).toLocaleString() }) : null
+                    ]
+                  }
+                ) }, q.phone)) })
               ] }) : null
             ] })
           ] })
         }
       ),
-      toastReply && !panelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+      toastReply && !panelOpen && !anyPanelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
         NewReplyToast,
         {
           reply: toastReply,
@@ -2001,7 +2035,7 @@ function NavGroup({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--panel)] p-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
+    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -2049,7 +2083,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__ */ jsxRuntime.jsx(Icon, { size: 15, className: "shrink-0 text-current" }) : null,