@the-portland-company/shell 0.59.0 → 0.60.0

package/dist/app-chrome.js

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

package/dist/{chunk-BV2QF7NY.js → chunk-AZB46QJH.js}

@@ -1280,10 +1280,68 @@ function specOverlayFetchJson(path) {
     return res.json();
   });
 }
+function currentChromeTheme() {
+  const root = document.documentElement;
+  if (root.classList.contains("dark") || root.getAttribute("data-theme") === "dark") return "dark";
+  if (root.classList.contains("light") || root.getAttribute("data-theme") === "light") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+async function captureMyView(status, orgId) {
+  const md = navigator.mediaDevices;
+  const stream = await md.getDisplayMedia({
+    video: { displaySurface: "browser" },
+    audio: false,
+    preferCurrentTab: true,
+    selfBrowserSurface: "include",
+    surfaceSwitching: "exclude"
+  });
+  try {
+    const video = document.createElement("video");
+    video.muted = true;
+    video.srcObject = stream;
+    await video.play();
+    await new Promise((r) => setTimeout(r, 600));
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("canvas unavailable");
+    ctx.drawImage(video, 0, 0, w, h);
+    const blob = await new Promise((r) => canvas.toBlob(r, "image/png"));
+    if (!blob) throw new Error("frame encode failed");
+    let crop = null;
+    const el = status.live_selector ? document.querySelector(status.live_selector) : null;
+    if (el) {
+      const b = el.getBoundingClientRect();
+      const x = Math.max(0, Math.round(b.left));
+      const y = Math.max(0, Math.round(b.top));
+      crop = { x, y, width: Math.min(w - x, Math.round(b.width)), height: Math.min(h - y, Math.round(b.height)) };
+    }
+    const form = new FormData();
+    form.append("image", blob, "live.png");
+    form.append(
+      "meta",
+      JSON.stringify({ url: window.location.href, theme: currentChromeTheme(), org_id: orgId ?? null, crop })
+    );
+    const res = await fetch(status.capture_url ?? `${SPECS_ORIGIN}/api/overlay/capture`, {
+      method: "POST",
+      credentials: "include",
+      headers: { "X-Spec-Capture": "1" },
+      body: form
+    });
+    if (!res.ok) throw new Error(`capture ${res.status}: ${(await res.text()).slice(0, 160)}`);
+  } finally {
+    stream.getTracks().forEach((t) => t.stop());
+  }
+}
 function SpecOverlayAction({ orgId } = {}) {
   const [access, setAccess] = useState(() => readSpecOverlayAccessCache());
   const [status, setStatus] = useState(null);
   const [open, setOpen] = useState(false);
+  const [capture, setCapture] = useState({ state: "idle" });
+  const [frameKey, setFrameKey] = useState(0);
   const href = useLocationHref();
   useEffect(() => {
     if (access) return;
@@ -1311,6 +1369,32 @@ function SpecOverlayAction({ orgId } = {}) {
     }, 300);
     return () => window.clearTimeout(timer);
   }, [access?.allowed, href, orgId]);
+  const onCaptureMyView = async () => {
+    if (!status || !status.matched) return;
+    const before = status.finished_at;
+    setCapture({ state: "busy" });
+    setOpen(false);
+    try {
+      await new Promise((r) => setTimeout(r, 250));
+      await captureMyView(status, orgId);
+      setOpen(true);
+      const url = `/api/overlay/status?url=${encodeURIComponent(window.location.href)}`;
+      for (let i = 0; i < 45; i++) {
+        await new Promise((r) => setTimeout(r, 4e3));
+        const next = await specOverlayFetchJson(url).catch(() => null);
+        if (next && next.matched && next.finished_at !== before) {
+          setStatus(next);
+          setFrameKey((k) => k + 1);
+          setCapture({ state: "idle" });
+          return;
+        }
+      }
+      setCapture({ state: "error", message: "Compare did not finish in 3 min." });
+    } catch (e) {
+      setOpen(true);
+      setCapture({ state: "error", message: e instanceof Error ? e.message : String(e) });
+    }
+  };
   if (!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";
@@ -1397,15 +1481,28 @@ function SpecOverlayAction({ orgId } = {}) {
                     className: "text-[color:var(--color-accent)] hover:underline",
                     children: "Compare tab \u2197"
                   }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: capture.state === "busy",
+                    onClick: onCaptureMyView,
+                    className: "ml-auto rounded-md border border-[color:var(--line)] px-2 py-1 text-[color:var(--foreground)] hover:bg-[color:var(--panel)] disabled:opacity-60",
+                    title: "Compare the design against this tab exactly as you see it (your org, data and theme).",
+                    children: capture.state === "busy" ? "Comparing\u2026" : "Capture my view"
+                  }
                 )
               ] }),
+              capture.state === "error" ? /* @__PURE__ */ jsx("p", { className: "border-b border-[color:var(--line)] px-4 py-2 text-xs text-[color:var(--chrome-danger)]", children: capture.message }) : null,
               /* @__PURE__ */ jsx(
                 "iframe",
                 {
                   src: status.overlay_url,
                   title: "Spec overlay",
                   className: "h-full w-full flex-1 border-0"
-                }
+                },
+                frameKey
               )
             ] }) : status && !status.matched ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-[color:var(--muted)]", children: [
               /* @__PURE__ */ jsx("p", { children: "No compare target covers this page." }),
@@ -3220,5 +3317,5 @@ function NavAppShell({
 }
 
 export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, resolveOrgLogoUrl, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
-//# sourceMappingURL=chunk-BV2QF7NY.js.map
-//# sourceMappingURL=chunk-BV2QF7NY.js.map
+//# sourceMappingURL=chunk-AZB46QJH.js.map
+//# sourceMappingURL=chunk-AZB46QJH.js.map