@the-portland-company/shell 0.61.1 → 0.63.0

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",
@@ -1427,6 +1435,24 @@ async function captureMyView(status, orgId, orgName) {
   });
   if (!res.ok) throw new Error(`capture ${res.status}: ${(await res.text()).slice(0, 160)}`);
 }
+function SpecCaptureLoading() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-spec-capture-loading": "", role: "status", "aria-live": "polite", className: "flex-1 overflow-hidden px-4 py-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-3 text-sm text-[color:var(--foreground)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "inline-block h-5 w-5 animate-spin rounded-full border-2 border-[color:var(--line)] border-t-[color:var(--color-accent)] motion-reduce:animate-none"
+        }
+      ),
+      "Capturing your view and comparing\u2026"
+    ] }),
+    ["Live \u2014 your view", "Diff"].map((label) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--muted)]", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "h-40 w-full animate-pulse rounded border border-[color:var(--line)] bg-[color:var(--panel)] motion-reduce:animate-none" })
+    ] }, label))
+  ] });
+}
 function specOverlayStatusPath() {
   return `/api/overlay/status?url=${encodeURIComponent(window.location.href)}&theme=${currentChromeTheme()}`;
 }
@@ -1436,6 +1462,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
   const [open, setOpen] = react.useState(false);
   const [capture, setCapture] = react.useState({ state: "idle" });
   const [frameKey, setFrameKey] = react.useState(0);
+  const [copied, setCopied] = react.useState("idle");
   const href = useLocationHref();
   react.useEffect(() => {
     if (access) return;
@@ -1589,16 +1616,49 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
                     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: "Your view is captured when the drawer opens. Recapture after changing the page.",
-                    children: capture.state === "busy" ? "Capturing your view\u2026" : "Recapture"
+                    children: capture.state === "busy" ? "Capturing\u2026" : "Recapture"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-spec-copy-prompt": "",
+                    disabled: capture.state === "busy" || !status.prompt,
+                    onClick: () => {
+                      const text = status.prompt;
+                      if (!text) return;
+                      navigator.clipboard.writeText(text).then(() => setCopied("copied")).catch(() => setCopied("failed")).finally(() => window.setTimeout(() => setCopied("idle"), 2e3));
+                    },
+                    className: "rounded-md border border-[color:var(--line)] px-2 py-1 text-[color:var(--foreground)] hover:bg-[color:var(--panel)] disabled:opacity-60",
+                    title: "Copy a repair prompt for an AI agent: spec, score, image links, top mismatched regions and instructions.",
+                    children: copied === "copied" ? "Copied \u2713" : copied === "failed" ? "Copy failed" : "Copy prompt"
                   }
                 )
               ] }),
-              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,
+              status.live_size && status.design_size && capture.state !== "busy" ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
+                {
+                  "data-spec-sizes": "",
+                  className: [
+                    "border-b border-[color:var(--line)] px-4 py-1.5 text-xs",
+                    status.live_size.width === status.design_size.width && status.live_size.height === status.design_size.height ? "text-[color:var(--muted)]" : "font-semibold text-[color:var(--chrome-danger)]"
+                  ].join(" "),
+                  children: [
+                    "Live ",
+                    status.live_size.width,
+                    "\xD7",
+                    status.live_size.height,
+                    " \xB7 Design ",
+                    status.design_size.width,
+                    "\xD7",
+                    status.design_size.height,
+                    status.live_size.width === status.design_size.width && status.live_size.height === status.design_size.height ? " \xB7 sizes match" : " \xB7 SIZE MISMATCH"
+                  ]
+                }
+              ) : 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(
+              capture.state === "busy" ? /* @__PURE__ */ jsxRuntime.jsx(SpecCaptureLoading, {}) : /* @__PURE__ */ jsxRuntime.jsx(
                 "iframe",
                 {
                   src: status.overlay_url,
@@ -3321,7 +3381,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 }) })
         ] })
       ]
     }