@the-portland-company/shell 0.62.1 → 0.63.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-CFSA73PR.js';
+import { clearBetaBannerDismissal, standardPolitogyNav, isNavItemActive, NavAppShell, NavChromeProvider, FuelAction, NavDisplayAction, TopBarWidgetSlot, SpecOverlayAction, SupportAction, NotificationsAction, useChromeMe, useThemePreference, useNavChromeFetcher, useChromeOrgs } from './chunk-2SF25TVU.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-CFSA73PR.js → chunk-2SF25TVU.js}

@@ -1335,6 +1335,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__ */ jsxs("div", { "data-spec-capture-loading": "", role: "status", "aria-live": "polite", className: "flex-1 overflow-hidden px-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-3 text-sm text-[color:var(--foreground)]", children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--muted)]", children: label }),
+      /* @__PURE__ */ 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()}`;
 }
@@ -1344,6 +1362,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
   const [open, setOpen] = useState(false);
   const [capture, setCapture] = useState({ state: "idle" });
   const [frameKey, setFrameKey] = useState(0);
+  const [copied, setCopied] = useState("idle");
   const href = useLocationHref();
   useEffect(() => {
     if (access) return;
@@ -1497,16 +1516,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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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(
+              capture.state === "busy" ? /* @__PURE__ */ jsx(SpecCaptureLoading, {}) : /* @__PURE__ */ jsx(
                 "iframe",
                 {
                   src: status.overlay_url,
@@ -3335,5 +3387,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-CFSA73PR.js.map
-//# sourceMappingURL=chunk-CFSA73PR.js.map
+//# sourceMappingURL=chunk-2SF25TVU.js.map
+//# sourceMappingURL=chunk-2SF25TVU.js.map