@the-portland-company/shell 0.58.0 → 0.60.0

package/dist/native.cjs

@@ -1380,10 +1380,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] = react.useState(() => readSpecOverlayAccessCache());
   const [status, setStatus] = react.useState(null);
   const [open, setOpen] = react.useState(false);
+  const [capture, setCapture] = react.useState({ state: "idle" });
+  const [frameKey, setFrameKey] = react.useState(0);
   const href = useLocationHref();
   react.useEffect(() => {
     if (access) return;
@@ -1411,6 +1469,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";
@@ -1497,15 +1581,28 @@ function SpecOverlayAction({ orgId } = {}) {
                     className: "text-[color:var(--color-accent)] hover:underline",
                     children: "Compare tab \u2197"
                   }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                 "iframe",
                 {
                   src: status.overlay_url,
                   title: "Spec overlay",
                   className: "h-full w-full flex-1 border-0"
-                }
+                },
+                frameKey
               )
             ] }) : status && !status.matched ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-sm text-[color:var(--muted)]", children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No compare target covers this page." }),