@the-portland-company/shell 0.61.1 → 0.62.1

package/dist/app-chrome.cjs

@@ -1388,36 +1388,44 @@ function currentChromeTheme() {
 }
 var SPEC_OVERLAY_ROOT_ATTR = "data-spec-overlay-root";
 async function captureMyView(status, orgId, orgName) {
-  const { domToBlob } = await import('modern-screenshot');
+  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 blob = await domToBlob(document.body, {
+  const full = await domToCanvas(document.body, {
     width: w,
     height: h,
     scale: 1,
     backgroundColor: bg,
-    type: "image/png",
     // Cross-origin images that refuse CORS render blank instead of failing.
     fetch: { requestInit: { mode: "cors", credentials: "omit" }, placeholderImage: "" },
-    filter: (node) => !(node instanceof Element && node.hasAttribute(SPEC_OVERLAY_ROOT_ATTR)),
+    // 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)` }
   });
-  if (!blob) throw new Error("page raster failed");
-  let crop = null;
-  const el = status.live_selector ? document.querySelector(status.live_selector) : null;
+  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));
-    crop = { x, y, width: Math.min(w - x, Math.round(r.width)), height: Math.min(h - y, Math.round(r.height)) };
+    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 })
+    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",
@@ -3321,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 }) })
         ] })
       ]
     }