@the-portland-company/shell 0.59.0 → 0.60.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.60.1 — 2026-09-30
+
+### Fixed
+
+- **Meta footer contrast (WCAG 2.2 AA).** The commit / version / date / author rows inherited `--muted` (#718096, 4.02:1 on the light rail) and, since 0.58.0 renders Meta for every viewer, tripped Petitions' contrast regression gate (+4 fails per route). New token `--sidebar-meta-text` (light #696D72 = 5.2:1, dark #A3A3A3 = 7.2:1) scoped to the Meta block (`data-shell-meta`); separators and the env chip unchanged.
+
+## 0.60.0 — 2026-09-30
+
+### Added
+
+- **Spec overlay: Capture my view** — compare the design against this tab (own org/theme) (#79).
+
 ## 0.59.0 — 2026-09-30
 
 ### Fixed — parent nav row stays active on child routes when the 'tabs' nav preference strips children (`src/app-chrome/frame.tsx`, DevNotes ebb036a1)

package/dist/app-chrome.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." }),
@@ -2389,39 +2486,46 @@ function NavSidebar({
                 }
               )
             ] }, l.label)) }) : null,
-            footer.envLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: [
-                      "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
-                      envChipClasses(footer.envLabel)
-                    ].join(" "),
-                    children: footer.envLabel
-                  }
-                ),
-                footer.commit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commit.slice(-4) })
-                ] }) : null,
-                footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    "v",
-                    footer.version
-                  ] })
-                ] }) : null
-              ] }),
-              footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                footer.commitDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
-                  month: "short",
-                  day: "numeric"
-                }) }) : null,
-                footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
-                footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
-              ] }) : null
-            ] }) : null
+            footer.envLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-shell-meta": true,
+                className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: [
+                          "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
+                          envChipClasses(footer.envLabel)
+                        ].join(" "),
+                        children: footer.envLabel
+                      }
+                    ),
+                    footer.commit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commit.slice(-4) })
+                    ] }) : null,
+                    footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        "v",
+                        footer.version
+                      ] })
+                    ] }) : null
+                  ] }),
+                  footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    footer.commitDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
+                      month: "short",
+                      day: "numeric"
+                    }) }) : null,
+                    footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+                    footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
+                  ] }) : null
+                ]
+              }
+            ) : null
           ] }) : null
         ]
       }