@the-portland-company/shell 0.60.1 → 0.62.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.61.0 — 2026-09-30
+
+### Changed
+
+- **Spec drawer shows YOUR view on open.** Opening the drawer now rasterizes the current page in the browser (`modern-screenshot`, DOM → PNG, viewport size, drawer excluded) and sends it as the LIVE side of the compare — your org, data, theme and full frame. No click and no screen-share prompt (the 0.60.0 `getDisplayMedia` path is removed). Status is requested with `&theme=` so Specs renders the design in your theme; the active org name is sent for the label. "Recapture" re-runs it.
+
 ## 0.60.1 — 2026-09-30
 
 ### Fixed

package/dist/app-chrome.cjs

@@ -1386,57 +1386,59 @@ function currentChromeTheme() {
   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"
+var SPEC_OVERLAY_ROOT_ATTR = "data-spec-overlay-root";
+async function captureMyView(status, orgId, orgName) {
+  const { domToCanvas } = await import('modern-screenshot');
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const theme = currentChromeTheme();
+  const bg = getComputedStyle(document.body).backgroundColor || (theme === "dark" ? "#0b0b0c" : "#ffffff");
+  const full = await domToCanvas(document.body, {
+    width: w,
+    height: h,
+    scale: 1,
+    backgroundColor: bg,
+    // Cross-origin images that refuse CORS render blank instead of failing.
+    fetch: { requestInit: { mode: "cors", credentials: "omit" }, placeholderImage: "" },
+    // Drop the Spec drawer and everything fixed (sidebar, toasts, popovers):
+    // the design is the page body only, so chrome would only add noise.
+    filter: (node) => !(node instanceof Element) || !node.hasAttribute(SPEC_OVERLAY_ROOT_ATTR) && getComputedStyle(node).position !== "fixed",
+    style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)` }
   });
-  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());
+  const el = (status.live_selector ? document.querySelector(status.live_selector) : null) ?? document.querySelector("[data-shell-content]");
+  let region = { x: 0, y: 0, width: w, height: h };
+  if (el) {
+    const r = el.getBoundingClientRect();
+    const x = Math.max(0, Math.round(r.left));
+    const y = Math.max(0, Math.round(r.top));
+    region = { x, y, width: Math.min(w - x, Math.round(r.width)), height: Math.min(h - y, Math.round(r.height)) };
   }
+  const out = document.createElement("canvas");
+  out.width = region.width;
+  out.height = region.height;
+  const ctx = out.getContext("2d");
+  if (!ctx) throw new Error("page raster failed");
+  ctx.drawImage(full, region.x, region.y, region.width, region.height, 0, 0, region.width, region.height);
+  const blob = await new Promise((resolve) => out.toBlob(resolve, "image/png"));
+  if (!blob) throw new Error("page raster failed");
+  const form = new FormData();
+  form.append("image", blob, "live.png");
+  form.append(
+    "meta",
+    JSON.stringify({ url: window.location.href, theme, org_id: orgId ?? null, org_name: orgName ?? null, crop: null })
+  );
+  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)}`);
 }
-function SpecOverlayAction({ orgId } = {}) {
+function specOverlayStatusPath() {
+  return `/api/overlay/status?url=${encodeURIComponent(window.location.href)}&theme=${currentChromeTheme()}`;
+}
+function SpecOverlayAction({ orgId, orgName } = {}) {
   const [access, setAccess] = react.useState(() => readSpecOverlayAccessCache());
   const [status, setStatus] = react.useState(null);
   const [open, setOpen] = react.useState(false);
@@ -1464,37 +1466,41 @@ function SpecOverlayAction({ orgId } = {}) {
   react.useEffect(() => {
     if (!access?.allowed || typeof window === "undefined") return;
     const timer = window.setTimeout(() => {
-      const url = `/api/overlay/status?url=${encodeURIComponent(window.location.href)}`;
-      specOverlayFetchJson(url).then((data) => setStatus(data)).catch(() => setStatus(null));
+      specOverlayFetchJson(specOverlayStatusPath()).then((data) => setStatus(data)).catch(() => setStatus(null));
     }, 300);
     return () => window.clearTimeout(timer);
   }, [access?.allowed, href, orgId]);
-  const onCaptureMyView = async () => {
-    if (!status || !status.matched) return;
-    const before = status.finished_at;
+  const captureRun = react.useRef(0);
+  const runCapture = async (s) => {
+    const run = ++captureRun.current;
+    const before = s.live_source === "viewer" ? s.finished_at : null;
     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)}`;
+      await new Promise((r) => setTimeout(r, 150));
+      await captureMyView(s, orgId, orgName);
       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) {
+        await new Promise((r) => setTimeout(r, 3e3));
+        if (run !== captureRun.current) return;
+        const next = await specOverlayFetchJson(specOverlayStatusPath()).catch(() => null);
+        if (next && next.matched && next.live_source === "viewer" && 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." });
+      setCapture({ state: "error", message: "Compare did not finish in 2 min." });
     } catch (e) {
-      setOpen(true);
-      setCapture({ state: "error", message: e instanceof Error ? e.message : String(e) });
+      if (run === captureRun.current) setCapture({ state: "error", message: e instanceof Error ? e.message : String(e) });
     }
   };
+  react.useEffect(() => {
+    if (!open || !status || !status.matched) return;
+    void runCapture(status);
+    return () => {
+      captureRun.current++;
+    };
+  }, [open, status && status.matched ? status.target_id : null]);
   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";
@@ -1534,6 +1540,7 @@ function SpecOverlayAction({ orgId } = {}) {
         "div",
         {
           className: "fixed inset-0 z-50 flex justify-end bg-black/40",
+          ...{ [SPEC_OVERLAY_ROOT_ATTR]: "" },
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Spec overlay",
@@ -1587,13 +1594,17 @@ function SpecOverlayAction({ orgId } = {}) {
                   {
                     type: "button",
                     disabled: capture.state === "busy",
-                    onClick: onCaptureMyView,
+                    onClick: () => void runCapture(status),
                     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"
+                    title: "Your view is captured when the drawer opens. Recapture after changing the page.",
+                    children: capture.state === "busy" ? "Capturing your view\u2026" : "Recapture"
                   }
                 )
               ] }),
+              capture.state === "busy" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-[color:var(--line)] px-4 py-2 text-xs text-[color:var(--muted)]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-3 w-3 rounded-full" }),
+                "Capturing your view and comparing\u2026"
+              ] }) : null,
               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",
@@ -3318,7 +3329,7 @@ function NavAppShell({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[240px]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(NavTopBar, { ...topBar, onOpenNav: () => setNavOpen(true), navOpen }),
           betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,
-          contentWrapper === "bare" ? children : /* @__PURE__ */ jsxRuntime.jsx("main", { className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
+          contentWrapper === "bare" ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-content": "", children }) : /* @__PURE__ */ jsxRuntime.jsx("main", { "data-shell-content": "", className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
         ] })
       ]
     }
@@ -4673,7 +4684,7 @@ function ChromeTopBarActions() {
         children: /* @__PURE__ */ jsxRuntime.jsx(ChromeDevNotesMenu, {})
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(SpecOverlayAction, { orgId: state.orgId }),
+    /* @__PURE__ */ jsxRuntime.jsx(SpecOverlayAction, { orgId: state.orgId, orgName: state.orgs.find((o) => o.id === state.orgId)?.name ?? null }),
     /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId }),
     /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId })
   ] });