@the-portland-company/shell 0.65.0 → 0.66.0

package/dist/native.cjs

@@ -1368,11 +1368,14 @@ function useLocationHref() {
   return href;
 }
 function specOverlayFetchJson(path) {
-  return fetch(`${SPECS_ORIGIN}${path}`, { credentials: "include" }).then((res) => {
+  return fetch(`${SPECS_ORIGIN}${path}`, { credentials: "include", signal: AbortSignal.timeout(1e4) }).then((res) => {
     if (!res.ok) throw new Error(`spec overlay ${path}: ${res.status}`);
     return res.json();
   });
 }
+function isAutomatedCaptureSession() {
+  return typeof navigator !== "undefined" && navigator.webdriver === true;
+}
 function currentChromeTheme() {
   const root = document.documentElement;
   if (root.classList.contains("dark") || root.getAttribute("data-theme") === "dark") return "dark";
@@ -1424,7 +1427,8 @@ async function captureMyView(status, orgId, orgName) {
     method: "POST",
     credentials: "include",
     headers: { "X-Spec-Capture": "1" },
-    body: form
+    body: form,
+    signal: AbortSignal.timeout(1e4)
   });
   if (!res.ok) throw new Error(`capture ${res.status}: ${(await res.text()).slice(0, 160)}`);
 }
@@ -1457,8 +1461,9 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
   const [frameKey, setFrameKey] = react.useState(0);
   const [copied, setCopied] = react.useState("idle");
   const href = useLocationHref();
+  const automated = isAutomatedCaptureSession();
   react.useEffect(() => {
-    if (access) return;
+    if (access || automated) return;
     let cancelled = false;
     specOverlayFetchJson("/api/overlay/access").then((data) => {
       if (cancelled) return;
@@ -1476,7 +1481,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
     };
   }, [access]);
   react.useEffect(() => {
-    if (!access?.allowed || typeof window === "undefined") return;
+    if (automated || !access?.allowed || typeof window === "undefined") return;
     const timer = window.setTimeout(() => {
       specOverlayFetchJson(specOverlayStatusPath()).then((data) => setStatus(data)).catch(() => setStatus(null));
     }, 300);
@@ -1507,13 +1512,13 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
     }
   };
   react.useEffect(() => {
-    if (!open || !status || !status.matched) return;
+    if (automated || !open || !status || !status.matched) return;
     void runCapture(status);
     return () => {
       captureRun.current++;
     };
   }, [open, status && status.matched ? status.target_id : null]);
-  if (!access?.allowed) return null;
+  if (automated || !access?.allowed) return null;
   const badgeLabel = status && status.matched ? `${Math.round(status.mismatch_pct)}%` : status ? "\u2014" : void 0;
   const badgeTone = status && status.matched ? status.passed ? "default" : "danger" : "default";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2209,8 +2214,8 @@ function NavSidebar({
   };
   const activeFn = nav.isActive ?? isNavItemActive;
   const ModeIcon = mode?.icon;
-  const orgBg = org?.brandColor || ORG_PILL_DEFAULT;
   const orgLogoSrc = resolveOrgLogoUrl(org?.logoUrl);
+  const orgGradient = org?.brandColor ? `linear-gradient(to right, ${org.brandColor}, ${org.brandColorSecondary || org.brandColor})` : "linear-gradient(to right, #007BFF, #A54B7A, #E63946)";
   const activeGroupKey = react.useMemo(() => {
     for (let i = 0; i < nav.items.length; i++) {
       const item = nav.items[i];
@@ -2306,29 +2311,33 @@ 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(--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",
+                /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--line)] bg-[color:var(--panel-elevated)] text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)] [&::-webkit-details-marker]:hidden", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[70px] w-full items-center justify-center bg-white px-3", children: [
+                    orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-[70px] max-w-full object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
                       {
-                        style: { backgroundColor: orgBg },
-                        className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-bold text-white",
-                        children: orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+                        href: org.uploadLogoHref ?? "#",
+                        onClick: (e) => e.stopPropagation(),
+                        className: "text-xs font-semibold text-[color:var(--color-accent)] underline",
+                        children: "Upload logo"
                       }
-                    ),
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2 px-2.5 py-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
                         {
                           title: org.name ?? void 0,
-                          className: "truncate text-sm font-semibold",
+                          className: "truncate text-[13px] font-semibold",
                           children: org.name ?? "No organizations"
                         }
                       ),
                       org.id && !org.loading ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                  ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
                   shouldShowOrgFilter(org.organizations.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-[color:var(--panel-elevated)] px-2 pb-1 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2398,60 +2407,76 @@ function NavSidebar({
                 {
                   type: "button",
                   onClick: org.onClick,
-                  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)]",
+                  className: "flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--line)] bg-[color:var(--panel-elevated)] 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(
-                        "span",
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[70px] w-full items-center justify-center bg-white px-3", children: [
+                      orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-[70px] max-w-full object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
                         {
-                          style: { backgroundColor: orgBg },
-                          className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-bold text-white",
-                          children: orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+                          href: org.uploadLogoHref ?? "#",
+                          onClick: (e) => e.stopPropagation(),
+                          className: "text-xs font-semibold text-[color:var(--color-accent)] underline",
+                          children: "Upload logo"
                         }
-                      ),
+                      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2 px-2.5 py-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
                           {
                             title: org.name ?? void 0,
-                            className: "truncate text-sm font-semibold",
+                            className: "truncate text-[13px] font-semibold",
                             children: org.name ?? "No organizations"
                           }
                         ),
                         org.id && !org.loading ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                    ] })
                   ]
                 }
               )
             ] }) : null,
             mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-2 rounded-md bg-[color:var(--panel-elevated)] p-1", children: (mode.options && mode.options.length > 0 ? mode.options : [{ id: mode.label, label: mode.label, icon: ModeIcon }]).map(
-                (opt) => {
-                  const selected = opt.label === mode.label;
-                  const OptIcon = opt.icon;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      title: opt.label,
-                      "aria-label": opt.label,
-                      "aria-current": selected ? "true" : void 0,
-                      onClick: () => {
-                        if (!selected) mode.onSelect?.(opt.id);
-                      },
-                      disabled: !mode.onSelect && !selected,
-                      className: [
-                        "flex h-9 flex-1 items-center justify-center rounded transition",
-                        selected ? "bg-[color:var(--mode-accent,var(--color-accent))] text-[color:var(--mode-on-accent,white)] shadow-sm" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-[color:var(--panel)] hover:text-[color:var(--sidebar-text,var(--foreground))]"
-                      ].join(" "),
-                      children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 16, className: "shrink-0" }) : null
-                    },
-                    opt.id
-                  );
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "radiogroup",
+                  "aria-label": "Mode",
+                  className: "flex items-center justify-start gap-0.5 rounded-lg border border-[color:var(--border-inverse,var(--line))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px]",
+                  children: (mode.options && mode.options.length > 0 ? mode.options : [{ id: mode.label, label: mode.label, icon: ModeIcon }]).map(
+                    (opt) => {
+                      const selected = opt.label === mode.label;
+                      const OptIcon = opt.icon;
+                      const available = opt.available ?? true;
+                      const title = !available ? opt.unavailableTooltip ?? `${opt.label} isn't active for this organization.` : opt.label;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          role: "radio",
+                          title,
+                          "aria-label": title,
+                          "aria-checked": selected,
+                          "aria-current": selected ? "true" : void 0,
+                          onClick: () => {
+                            if (available && !selected) mode.onSelect?.(opt.id);
+                          },
+                          disabled: !available,
+                          className: [
+                            "flex h-9 items-center justify-center rounded px-[9px] py-[6px] transition",
+                            !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--mode-accent,var(--color-accent))] text-[color:var(--mode-on-accent,white)] shadow-sm" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-white/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
+                          ].join(" "),
+                          children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
+                        },
+                        opt.id
+                      );
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-center text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]", children: mode.label })
             ] }) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-1", children: [