@the-portland-company/shell 0.39.1 → 0.41.0

package/CHANGELOG.md

@@ -1,3 +1,100 @@
+## 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
+
+Reference/UI-Platform "Badge Counters" allows exactly ONE badge definition, and
+`.topbar-widget-slot` in `chrome.css` is supposed to restate it for a launcher
+that brings its own badge markup. It did not: the only rule was
+`.topbar-widget-slot button > span.relative { position: static }`, and DevNotes
+0.6.x writes that wrapper with an INLINE `position: relative` and **no class**,
+so the selector matched nothing. The badge kept anchoring to the glyph instead
+of the 32px trigger, and its own inline styles (`top:-4 right:-8`, `#dc2626`,
+`font-weight:700`, no `height`) rendered a visibly different bubble — measured
+different on app.politogyvrm.com vs contacts.politogyvrm.com.
+
+The slot CSS now (a) matches every direct span child of the launcher, not a
+class, and (b) restates the whole badge definition — 16px circle, `#E63946`
+via `--color-race-red`, 10px / weight 400 / line-height 1, `top:-4px`
+`right:-4px` — with `!important` so inline styles cannot win. `TopBarCountBadge`
+pins `font-weight: 400` and `line-height: 1` explicitly rather than inheriting.
+
+### Fixed — the new-reply toast rendered on top of the notifications panel
+
+Both the toast and the panel anchor to the bell trigger, and nothing suppressed
+one while the other was up, so opening Notifications put a message preview over
+the panel's "NOTIFICATIONS" header and first row. `TopBarPopover` gained
+`onOpenChange`; `NotificationsAction` clears the toast when the panel opens,
+refuses to raise a new one while it is open, and does not render it when open.
+One surface per trigger, per Reference/UI-Platform. No z-index was changed.
+
 ## 0.37.1 — 2026-07-27
 
 ### Fixed — cross-app navigation kept the user's active organization

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,9 +173,26 @@ 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] text-white", children: count > 99 ? "99+" : count });
+  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 });
 }
 function TopBarTooltip({
   title,
@@ -343,10 +364,19 @@ function TopBarPopover({
   tone,
   onOpen,
   openToken,
+  onOpenChange,
   children,
   panelClassName
 }) {
   const [open, setOpen] = react.useState(false);
+  const onOpenChangeRef = react.useRef(onOpenChange);
+  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);
   react.useEffect(() => {
@@ -524,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");
@@ -757,6 +788,8 @@ function NotificationsAction({ orgId }) {
   const [notif, setNotif] = react.useState(() => readNotifState(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);
@@ -824,6 +857,7 @@ function NotificationsAction({ orgId }) {
     [orgId]
   );
   const onOpen = react.useCallback(() => {
+    setToastReply(null);
     setNotif((prev) => {
       const next = { ...prev, lastSeenAt: (/* @__PURE__ */ new Date()).toISOString() };
       writeNotifState(orgId, next);
@@ -835,7 +869,7 @@ function NotificationsAction({ orgId }) {
   const imports = payload?.imports ?? [];
   const quarantined = payload?.quarantined ?? [];
   react.useEffect(() => {
-    if (!payload || toastReply) return;
+    if (!payload || toastReply || panelOpen) return;
     const candidate = replies.filter((r) => {
       if (!r.createdAt) return false;
       if (notif.lastSeenAt && r.createdAt <= notif.lastSeenAt) return false;
@@ -851,7 +885,7 @@ function NotificationsAction({ orgId }) {
       writeNotifState(orgId, next);
       return next;
     });
-  }, [payload, replies, toastReply, notif.lastSeenAt, notif.toastedReplyIds, orgId]);
+  }, [payload, replies, toastReply, panelOpen, notif.lastSeenAt, notif.toastedReplyIds, orgId]);
   const onToastActivate = react.useCallback(() => {
     const href = toastReply?.href;
     setToastReply(null);
@@ -883,6 +917,7 @@ function NotificationsAction({ orgId }) {
           badge: loading ? 0 : badgeCount,
           onOpen,
           openToken,
+          onOpenChange: setPanelOpen,
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
             loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
@@ -938,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 ? /* @__PURE__ */ jsxRuntime.jsx(
+      toastReply && !panelOpen && !anyPanelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
         NewReplyToast,
         {
           reply: toastReply,
@@ -1992,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(
@@ -2040,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,