@the-portland-company/shell 0.16.1 → 0.16.3

package/dist/chrome.css

@@ -349,3 +349,38 @@
   font-weight: 400;
   line-height: 1;
 }
+
+/* DevNotes (and any widget-slot popover) — dark-theme inheritance. The
+   package's compiled sheet hardcodes light utility colors (bg-white,
+   text-gray-*, border-gray-*), so its dropdown rendered light-on-dark. Remap
+   those inside the slot to the chrome tokens under `.dark`. */
+.dark .topbar-widget-slot [class*="bg-white"] {
+  background-color: var(--panel-elevated);
+}
+.dark .topbar-widget-slot [class*="text-gray-9"],
+.dark .topbar-widget-slot [class*="text-gray-8"],
+.dark .topbar-widget-slot [class*="text-gray-7"],
+.dark .topbar-widget-slot [class*="text-slate-9"],
+.dark .topbar-widget-slot [class*="text-slate-8"] {
+  color: var(--foreground);
+}
+.dark .topbar-widget-slot [class*="text-gray-6"],
+.dark .topbar-widget-slot [class*="text-gray-5"],
+.dark .topbar-widget-slot [class*="text-gray-4"],
+.dark .topbar-widget-slot [class*="text-slate-5"] {
+  color: var(--muted);
+}
+.dark .topbar-widget-slot [class*="border-gray-"],
+.dark .topbar-widget-slot [class*="border-slate-"] {
+  border-color: var(--line);
+}
+.dark .topbar-widget-slot [class*="bg-gray-50"],
+.dark .topbar-widget-slot [class*="bg-gray-100"],
+.dark .topbar-widget-slot [class*="bg-slate-50"],
+.dark .topbar-widget-slot [class*="bg-slate-100"] {
+  background-color: var(--panel);
+}
+.dark .topbar-widget-slot [class*="hover:bg-gray-"]:hover,
+.dark .topbar-widget-slot [class*="hover:bg-slate-"]:hover {
+  background-color: var(--panel);
+}

package/dist/native.cjs

@@ -3,6 +3,7 @@
 
 var react = require('react');
 var fi = require('react-icons/fi');
+var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/native/index.tsx
@@ -153,6 +154,15 @@ function TopBarTooltip({
     }
   );
 }
+function TopBarPanelArrow() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 border-l border-t border-[color:var(--line)] bg-[color:var(--panel-elevated)]"
+    }
+  );
+}
 function TopBarWidgetSlot({
   title,
   description,
@@ -311,14 +321,17 @@ function TopBarPopover({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx(
+    open ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: [
-          "absolute right-0 z-40 mt-2 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]",
+          "absolute right-0 z-40 mt-2 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]",
           panelClassName ?? "w-80"
         ].join(" "),
-        children
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-xl", children })
+        ]
       }
     ) : null
   ] });
@@ -545,66 +558,69 @@ function SupportAction() {
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Support request",
-        onMouseDown: (e) => {
-          if (e.target === e.currentTarget) close();
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
-          state === "sent" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: close,
-                className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
-                children: "Done"
-              }
-            ) })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "textarea",
-              {
-                value: message,
-                onChange: (e) => setMessage(e.target.value),
-                rows: 5,
-                placeholder: "How can we help?",
-                className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
-              }
-            ),
-            state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+    open && typeof document !== "undefined" ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Support request",
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) close();
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
+            state === "sent" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
                   onClick: close,
-                  className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
-                  children: "Cancel"
+                  className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
+                  children: "Done"
                 }
-              ),
+              ) })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                "textarea",
                 {
-                  type: "button",
-                  onClick: submit,
-                  disabled: !message.trim() || state === "sending",
-                  className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
-                  children: state === "sending" ? "Sending\u2026" : "Send request"
+                  value: message,
+                  onChange: (e) => setMessage(e.target.value),
+                  rows: 5,
+                  placeholder: "How can we help?",
+                  className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
                 }
-              )
+              ),
+              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: close,
+                    className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: submit,
+                    disabled: !message.trim() || state === "sending",
+                    className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+                    children: state === "sending" ? "Sending\u2026" : "Send request"
+                  }
+                )
+              ] })
             ] })
           ] })
-        ] })
-      }
+        }
+      ),
+      document.body
     ) : null
   ] });
 }
@@ -1229,7 +1245,7 @@ function NavTopBar({
       themeToggle,
       /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group/acct relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "group/tbtip relative flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white", children: user?.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)] items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white", children: user?.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-col leading-tight md:flex", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: user?.name ?? "Signed in" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--muted)]", children: secondary })
@@ -1251,7 +1267,8 @@ function NavTopBar({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-30 mt-2 w-72 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-30 mt-2 w-72 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
           userMenu?.myProfileHref ? /* @__PURE__ */ jsxRuntime.jsxs(
             "a",
             {
@@ -1572,6 +1589,7 @@ exports.NavTopBar = NavTopBar;
 exports.NotificationsAction = NotificationsAction;
 exports.SupportAction = SupportAction;
 exports.TopBarCountBadge = TopBarCountBadge;
+exports.TopBarPanelArrow = TopBarPanelArrow;
 exports.TopBarTooltip = TopBarTooltip;
 exports.TopBarWidgetSlot = TopBarWidgetSlot;
 exports.envChipClasses = envChipClasses;