review-lens-react 0.1.0 → 0.1.2

package/dist/review-lens-react.js

@@ -1,97 +1,97 @@
-import { jsx as c, jsxs as k, Fragment as q } from "react/jsx-runtime";
-import { createContext as D, useMemo as x, useState as E, useCallback as L, useEffect as R, useContext as H } from "react";
-const W = [
+import { jsx as i, jsxs as f, Fragment as Y } from "react/jsx-runtime";
+import { createContext as V, useMemo as M, useState as R, useCallback as P, useEffect as T, useContext as Z, useRef as ee, useLayoutEffect as te } from "react";
+const ne = [
   "https://www.googleapis.com/auth/spreadsheets",
   "https://www.googleapis.com/auth/userinfo.email"
-].join(" "), _ = "https://www.googleapis.com/oauth2/v3/userinfo";
-function X(e) {
+].join(" "), oe = "https://www.googleapis.com/oauth2/v3/userinfo";
+function re(e) {
   const n = e.feedbackSheetName ?? "Feedback", t = e.usersSheetName ?? "Users";
   let r, o;
-  async function s() {
-    return r ?? (r = Z(e.googleClientId)), r;
+  async function c() {
+    return r ?? (r = ce(e.googleClientId)), r;
   }
-  async function v(i, l) {
-    const a = await s(), d = await fetch(
-      `https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${i}`,
+  async function h(a, d) {
+    const l = await c(), u = await fetch(
+      `https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${a}`,
       {
-        ...l,
+        ...d,
         headers: {
-          Authorization: `Bearer ${a}`,
+          Authorization: `Bearer ${l}`,
           "Content-Type": "application/json",
-          ...l == null ? void 0 : l.headers
+          ...d == null ? void 0 : d.headers
         }
       }
     );
-    if (!d.ok)
-      throw new Error(`Google Sheets request failed with ${d.status}`);
-    return d.json();
+    if (!u.ok)
+      throw new Error(`Google Sheets request failed with ${u.status}`);
+    return u.json();
   }
-  async function b(i) {
-    return (await v(
-      `/values/${encodeURIComponent(i)}`
+  async function w(a) {
+    return (await h(
+      `/values/${encodeURIComponent(a)}`
     )).values ?? [];
   }
   return {
     async getCurrentUser() {
       if (!o) {
-        const i = await s(), l = await fetch(_, {
-          headers: { Authorization: `Bearer ${i}` }
+        const a = await c(), d = await fetch(oe, {
+          headers: { Authorization: `Bearer ${a}` }
         });
-        if (!l.ok)
-          throw new Error(`Google userinfo request failed with ${l.status}`);
-        o = (await l.json()).email;
+        if (!d.ok)
+          throw new Error(`Google userinfo request failed with ${d.status}`);
+        o = (await d.json()).email;
       }
       if (!o)
         throw new Error("Google account did not return an email address");
       return { email: o };
     },
-    async getPermissions(i) {
-      const [{ email: l }, a] = await Promise.all([this.getCurrentUser(), b(t)]), d = U(a), y = l.toLowerCase(), u = d.find(
-        (f) => {
-          var p;
-          return ((p = f.email) == null ? void 0 : p.toLowerCase()) === y && f.active !== "false" && (!f.projectKey || f.projectKey === i);
+    async getPermissions(a) {
+      const [{ email: d }, l] = await Promise.all([this.getCurrentUser(), w(t)]), u = z(l), y = d.toLowerCase(), p = u.find(
+        (b) => {
+          var m;
+          return ((m = b.email) == null ? void 0 : m.toLowerCase()) === y && b.active !== "false" && (!b.projectKey || b.projectKey === a);
         }
       );
-      return V((u == null ? void 0 : u.role) ?? "designer");
+      return de((p == null ? void 0 : p.role) ?? "designer");
     },
-    async listFeedback(i) {
-      return U(await b(n)).map(T).filter((a) => a !== null).filter(
-        (a) => a.projectKey === i.projectKey && a.contentId === i.contentId && a.normalizedPath === i.normalizedPath
-      ).sort((a, d) => d.createdAt.localeCompare(a.createdAt));
+    async listFeedback(a) {
+      return z(await w(n)).map(K).filter((l) => l !== null).filter(
+        (l) => l.projectKey === a.projectKey && l.contentId === a.contentId && l.normalizedPath === a.normalizedPath
+      ).sort((l, u) => u.createdAt.localeCompare(l.createdAt));
     },
-    async createFeedback(i) {
-      const l = (/* @__PURE__ */ new Date()).toISOString(), a = {
-        ...i,
+    async createFeedback(a) {
+      const d = (/* @__PURE__ */ new Date()).toISOString(), l = {
+        ...a,
         id: crypto.randomUUID(),
         status: "open",
-        createdAt: l,
-        updatedAt: l
+        createdAt: d,
+        updatedAt: d
       };
-      return await v(`/values/${encodeURIComponent(n)}:append?valueInputOption=RAW`, {
+      return await h(`/values/${encodeURIComponent(n)}:append?valueInputOption=RAW`, {
         method: "POST",
-        body: JSON.stringify({ values: [Q(a)] })
-      }), a;
+        body: JSON.stringify({ values: [se(l)] })
+      }), l;
     },
-    async resolveFeedback(i, l) {
-      const a = await b(n), d = a[0] ?? Y, y = d.indexOf("id"), u = d.indexOf("status"), f = d.indexOf("updatedAt"), p = d.indexOf("resolvedAt"), w = d.indexOf("resolvedBy"), m = a.findIndex((N, A) => A > 0 && N[y] === i);
-      if (m < 1)
-        throw new Error(`Feedback ${i} was not found`);
-      const g = [...a[m]], C = (/* @__PURE__ */ new Date()).toISOString();
-      g[u] = "resolved", g[f] = C, g[p] = C, g[w] = l, await v(
-        `/values/${encodeURIComponent(n)}!A${m + 1}:Q${m + 1}?valueInputOption=RAW`,
+    async resolveFeedback(a, d) {
+      const l = await w(n), u = l[0] ?? ie, y = u.indexOf("id"), p = u.indexOf("status"), b = u.indexOf("updatedAt"), m = u.indexOf("resolvedAt"), k = u.indexOf("resolvedBy"), v = l.findIndex((N, x) => x > 0 && N[y] === a);
+      if (v < 1)
+        throw new Error(`Feedback ${a} was not found`);
+      const S = [...l[v]], F = (/* @__PURE__ */ new Date()).toISOString();
+      S[p] = "resolved", S[b] = F, S[m] = F, S[k] = d, await h(
+        `/values/${encodeURIComponent(n)}!A${v + 1}:Q${v + 1}?valueInputOption=RAW`,
         {
           method: "PUT",
-          body: JSON.stringify({ values: [g] })
+          body: JSON.stringify({ values: [S] })
         }
       );
-      const $ = T(M(d, g));
-      if (!$)
-        throw new Error(`Feedback ${i} could not be parsed after resolving`);
-      return $;
+      const C = K(q(u, S));
+      if (!C)
+        throw new Error(`Feedback ${a} could not be parsed after resolving`);
+      return C;
     }
   };
 }
-const Y = [
+const ie = [
   "id",
   "projectKey",
   "contentId",
@@ -109,7 +109,7 @@ const Y = [
   "resolvedAt",
   "resolvedBy"
 ];
-function Q(e) {
+function se(e) {
   return [
     e.id,
     e.projectKey,
@@ -129,14 +129,14 @@ function Q(e) {
     e.resolvedBy ?? ""
   ];
 }
-function U(e) {
+function z(e) {
   const [n, ...t] = e;
-  return n ? t.map((r) => M(n, r)) : [];
+  return n ? t.map((r) => q(n, r)) : [];
 }
-function M(e, n) {
+function q(e, n) {
   return Object.fromEntries(e.map((t, r) => [t, n[r] ?? ""]));
 }
-function T(e) {
+function K(e) {
   return e.id ? {
     id: e.id,
     projectKey: e.projectKey,
@@ -145,23 +145,12 @@ function T(e) {
     originalUrl: e.originalUrl,
     selector: e.selector,
     selectorStrategy: e.selectorStrategy === "stable-attribute" ? "stable-attribute" : "css-path",
-    elementFingerprint: O(e.elementFingerprintJson, {
+    elementFingerprint: G(e.elementFingerprintJson, {
       tagName: "",
       width: 0,
       height: 0
     }),
-    cssSnapshot: O(e.cssSnapshotJson, {
-      margin: "",
-      padding: "",
-      border: "",
-      fontFamily: "",
-      fontSize: "",
-      lineHeight: "",
-      color: "",
-      backgroundColor: "",
-      width: 0,
-      height: 0
-    }),
+    cssSnapshot: ae(e.cssSnapshotJson),
     comment: e.comment,
     status: e.status === "resolved" ? "resolved" : "open",
     authorEmail: e.authorEmail,
@@ -171,34 +160,61 @@ function T(e) {
     resolvedBy: e.resolvedBy || void 0
   } : null;
 }
-function O(e, n) {
+function G(e, n) {
   try {
     return e ? JSON.parse(e) : n;
   } catch {
     return n;
   }
 }
-function V(e) {
+function ae(e) {
+  const n = G(e, {});
+  return {
+    margin: n.margin ?? "",
+    marginTop: n.marginTop ?? "",
+    marginRight: n.marginRight ?? "",
+    marginBottom: n.marginBottom ?? "",
+    marginLeft: n.marginLeft ?? "",
+    padding: n.padding ?? "",
+    paddingTop: n.paddingTop ?? "",
+    paddingRight: n.paddingRight ?? "",
+    paddingBottom: n.paddingBottom ?? "",
+    paddingLeft: n.paddingLeft ?? "",
+    border: n.border ?? "",
+    borderTopWidth: n.borderTopWidth ?? "",
+    borderRightWidth: n.borderRightWidth ?? "",
+    borderBottomWidth: n.borderBottomWidth ?? "",
+    borderLeftWidth: n.borderLeftWidth ?? "",
+    fontFamily: n.fontFamily ?? "",
+    fontSize: n.fontSize ?? "",
+    lineHeight: n.lineHeight ?? "",
+    color: n.color ?? "",
+    backgroundColor: n.backgroundColor ?? "",
+    width: n.width ?? 0,
+    height: n.height ?? 0
+  };
+}
+function de(e) {
   return e === "admin" ? ["create", "read", "resolve"] : e === "developer" ? ["read", "resolve"] : ["create", "read"];
 }
-async function Z(e) {
-  return await ee(), new Promise((n, t) => {
+async function ce(e) {
+  return await le(), new Promise((n, t) => {
     var o;
     const r = (o = window.google) == null ? void 0 : o.accounts.oauth2.initTokenClient({
       client_id: e,
-      scope: W,
-      callback: (s) => {
-        if (s.error || !s.access_token) {
-          t(new Error(s.error ?? "Google OAuth did not return an access token"));
+      scope: ne,
+      callback: (c) => {
+        if (c.error || !c.access_token) {
+          t(new Error(c.error ?? "Google OAuth did not return an access token"));
           return;
         }
-        n(s.access_token);
+        n(c.access_token);
       }
     });
     r == null || r.requestAccessToken({ prompt: "" });
   });
 }
-function ee() {
+function le() {
   var e;
   return (e = window.google) != null && e.accounts.oauth2 ? Promise.resolve() : new Promise((n, t) => {
     const r = document.querySelector(
@@ -214,116 +230,116 @@ function ee() {
     o.src = "https://accounts.google.com/gsi/client", o.async = !0, o.defer = !0, o.onload = () => n(), o.onerror = () => t(new Error("Google Identity failed to load")), document.head.append(o);
   });
 }
-function te(e) {
+function he(e) {
   return new URL(e, window.location.href).pathname.replace(/\/+$/, "") || "/";
 }
-const J = D(null);
-function me({ config: e, children: n }) {
-  const t = x(() => e.adapter ? e.adapter : X({
-    googleClientId: z(e.googleClientId, "googleClientId"),
-    spreadsheetId: z(e.spreadsheetId, "spreadsheetId"),
+const J = V(null);
+function Ce({ config: e, children: n }) {
+  const t = M(() => e.adapter ? e.adapter : re({
+    googleClientId: D(e.googleClientId, "googleClientId"),
+    spreadsheetId: D(e.spreadsheetId, "spreadsheetId"),
     feedbackSheetName: e.sheetName ?? "Feedback"
-  }), [e.adapter, e.googleClientId, e.sheetName, e.spreadsheetId]), r = e.currentUrl ?? window.location.href, o = (e.normalizeUrl ?? te)(r), [s, v] = E(), [b, i] = E([]), [l, a] = E([]), d = L(async () => {
-    const p = await t.listFeedback({
+  }), [e.adapter, e.googleClientId, e.sheetName, e.spreadsheetId]), r = e.currentUrl ?? window.location.href, o = (e.normalizeUrl ?? he)(r), [c, h] = R(), [w, a] = R([]), [d, l] = R([]), u = P(async () => {
+    const m = await t.listFeedback({
       projectKey: e.projectKey,
       contentId: e.contentId,
       normalizedPath: o
     });
-    a(p);
+    l(m);
   }, [t, e.contentId, e.projectKey, o]);
-  R(() => {
-    let p = !0;
-    async function w() {
-      const [m, g] = await Promise.all([
+  T(() => {
+    let m = !0;
+    async function k() {
+      const [v, S] = await Promise.all([
         t.getCurrentUser(),
         t.getPermissions(e.projectKey)
       ]);
-      p && (v(m), i(g), await d());
+      m && (h(v), a(S), await u());
     }
-    return w(), () => {
-      p = !1;
+    return k(), () => {
+      m = !1;
     };
-  }, [t, e.projectKey, d]);
-  const y = L(
-    async (p) => {
-      const w = await t.createFeedback(p);
-      return a((m) => [w, ...m]), w;
+  }, [t, e.projectKey, u]);
+  const y = P(
+    async (m) => {
+      const k = await t.createFeedback(m);
+      return l((v) => [k, ...v]), k;
     },
     [t]
-  ), u = L(
-    async (p) => {
-      const w = await t.resolveFeedback(p, (s == null ? void 0 : s.email) ?? "");
-      return a(
-        (m) => m.map((g) => g.id === p ? w : g)
-      ), w;
+  ), p = P(
+    async (m) => {
+      const k = await t.resolveFeedback(m, (c == null ? void 0 : c.email) ?? "");
+      return l(
+        (v) => v.map((S) => S.id === m ? k : S)
+      ), k;
     },
-    [t, s == null ? void 0 : s.email]
-  ), f = x(
+    [t, c == null ? void 0 : c.email]
+  ), b = M(
     () => ({
       config: e,
       adapter: t,
-      currentUser: s,
-      permissions: b,
-      feedback: l,
+      currentUser: c,
+      permissions: w,
+      feedback: d,
       normalizedPath: o,
-      refreshFeedback: d,
+      refreshFeedback: u,
       createFeedback: y,
-      resolveFeedback: u
+      resolveFeedback: p
     }),
     [
       t,
       e,
       y,
-      s,
-      l,
-      o,
-      b,
+      c,
       d,
-      u
+      o,
+      w,
+      u,
+      p
     ]
   );
-  return /* @__PURE__ */ c(J.Provider, { value: f, children: n });
+  return /* @__PURE__ */ i(J.Provider, { value: b, children: n });
 }
-function ne() {
-  const e = H(J);
+function ue() {
+  const e = Z(J);
   if (!e)
     throw new Error("useReviewLens must be used inside ReviewLensProvider");
   return e;
 }
-function z(e, n) {
+function D(e, n) {
   if (!e)
     throw new Error(`review-lens-react requires config.${n} when no adapter is provided`);
   return e;
 }
-const re = [
+const pe = [
   "data-review-id",
   "data-testid",
   "data-test-id",
   "aria-label",
   "name"
 ];
-function B(e) {
-  const n = e.getBoundingClientRect(), t = oe(e);
+function _(e) {
+  const n = e.getBoundingClientRect(), t = me(e);
   return {
     selector: t.selector,
     selectorStrategy: t.strategy,
-    fingerprint: ae(e, n),
-    cssSnapshot: ie(e, n),
+    fingerprint: fe(e, n),
+    cssSnapshot: we(e, n),
     rect: n
   };
 }
-function oe(e) {
-  for (const n of re) {
+function me(e) {
+  for (const n of pe) {
     const t = e.getAttribute(n);
     if (t)
       return {
-        selector: `[${n}="${K(t)}"]`,
+        selector: `[${n}="${O(t)}"]`,
         strategy: "stable-attribute"
       };
   }
-  return e.id ? { selector: `#${K(e.id)}`, strategy: "stable-attribute" } : { selector: se(e), strategy: "css-path" };
+  return e.id ? { selector: `#${O(e.id)}`, strategy: "stable-attribute" } : { selector: ge(e), strategy: "css-path" };
 }
-function se(e) {
+function ge(e) {
   const n = [];
   let t = e;
   for (; t && t.nodeType === Node.ELEMENT_NODE && t !== document.body; ) {
@@ -332,14 +348,14 @@ function se(e) {
       n.unshift(o);
       break;
     }
-    const s = t.tagName, v = Array.from(r.children).filter(
-      (i) => i.tagName === s
-    ), b = v.indexOf(t) + 1;
-    n.unshift(v.length > 1 ? `${o}:nth-of-type(${b})` : o), t = r;
+    const c = t.tagName, h = Array.from(r.children).filter(
+      (a) => a.tagName === c
+    ), w = h.indexOf(t) + 1;
+    n.unshift(h.length > 1 ? `${o}:nth-of-type(${w})` : o), t = r;
   }
   return n.join(" > ");
 }
-function ae(e, n) {
+function fe(e, n) {
   var t;
   return {
     tagName: e.tagName.toLowerCase(),
@@ -351,22 +367,34 @@ function ae(e, n) {
     height: Math.round(n.height)
   };
 }
-function ie(e, n) {
+function we(e, n) {
   const t = window.getComputedStyle(e);
   return {
     margin: j(t.marginTop, t.marginRight, t.marginBottom, t.marginLeft),
+    marginTop: t.marginTop,
+    marginRight: t.marginRight,
+    marginBottom: t.marginBottom,
+    marginLeft: t.marginLeft,
     padding: j(
       t.paddingTop,
       t.paddingRight,
       t.paddingBottom,
       t.paddingLeft
     ),
+    paddingTop: t.paddingTop,
+    paddingRight: t.paddingRight,
+    paddingBottom: t.paddingBottom,
+    paddingLeft: t.paddingLeft,
     border: j(
       t.borderTopWidth,
       t.borderRightWidth,
       t.borderBottomWidth,
       t.borderLeftWidth
     ),
+    borderTopWidth: t.borderTopWidth,
+    borderRightWidth: t.borderRightWidth,
+    borderBottomWidth: t.borderBottomWidth,
+    borderLeftWidth: t.borderLeftWidth,
     fontFamily: t.fontFamily,
     fontSize: t.fontSize,
     lineHeight: t.lineHeight,
@@ -379,10 +407,10 @@ function ie(e, n) {
 function j(e, n, t, r) {
   return e === n && n === t && t === r ? e : `${e} ${n} ${t} ${r}`;
 }
-function K(e) {
+function O(e) {
   return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&");
 }
-function fe({
+function Le({
   open: e,
   onOpenChange: n,
   placement: t = "top-right",
@@ -390,159 +418,302 @@ function fe({
 }) {
   const {
     config: o,
-    currentUser: s,
-    feedback: v,
-    normalizedPath: b,
-    permissions: i,
-    createFeedback: l,
-    resolveFeedback: a
-  } = ne(), [d, y] = E(), [u, f] = E(), [p, w] = E(""), [m, g] = E(), C = i.includes("create"), $ = i.includes("resolve"), N = x(
-    () => v.filter((h) => r || h.status !== "resolved"),
-    [v, r]
+    currentUser: c,
+    feedback: h,
+    normalizedPath: w,
+    permissions: a,
+    createFeedback: d,
+    resolveFeedback: l
+  } = ue(), [u, y] = R(), [p, b] = R(), [m, k] = R(""), [v, S] = R(), [F, C] = R("review"), N = !!c, x = a.includes("create"), Q = a.includes("resolve"), B = M(
+    () => h.filter((s) => r || s.status !== "resolved"),
+    [h, r]
   );
-  R(() => {
-    e || (y(void 0), f(void 0), w(""));
-  }, [e]);
-  const A = L((h) => {
-    const I = h.target instanceof Element ? h.target : null;
-    if (I)
-      return I.closest("[data-review-lens-ui]") ? null : I;
-    const S = document.elementFromPoint(h.clientX, h.clientY);
-    return !S || S.closest("[data-review-lens-ui]") ? null : S;
+  T(() => {
+    e || (y(void 0), b(void 0), k(""), C("review"));
+  }, [e]), T(() => {
+    N || (y(void 0), b(void 0));
+  }, [N]), T(() => {
+    if (!e)
+      return;
+    function s(g) {
+      g.key === "Escape" && (g.preventDefault(), n == null || n(!1));
+    }
+    return window.addEventListener("keydown", s), () => {
+      window.removeEventListener("keydown", s);
+    };
+  }, [n, e]);
+  const $ = P((s) => {
+    const g = s.target instanceof Element ? s.target : null;
+    if (g)
+      return g.closest("[data-review-lens-ui]") ? null : g;
+    const L = document.elementFromPoint(s.clientX, s.clientY);
+    return !L || L.closest("[data-review-lens-ui]") ? null : L;
   }, []);
-  if (R(() => {
-    if (!e || u)
+  if (T(() => {
+    if (!e || !N)
       return;
-    function h(S) {
-      const F = A(S);
-      F && y(B(F));
+    function s(L) {
+      const A = $(L);
+      y(A ? _(A) : void 0);
     }
-    function I(S) {
-      const F = A(S);
-      F && (S.preventDefault(), S.stopPropagation(), f(B(F)));
+    function g(L) {
+      const A = $(L);
+      A && (L.preventDefault(), L.stopPropagation(), b(_(A)), C("review"));
     }
-    return window.addEventListener("mousemove", h, !0), window.addEventListener("click", I, !0), () => {
-      window.removeEventListener("mousemove", h, !0), window.removeEventListener("click", I, !0);
+    return window.addEventListener("mousemove", s, !0), window.addEventListener("click", g, !0), () => {
+      window.removeEventListener("mousemove", s, !0), window.removeEventListener("click", g, !0);
     };
-  }, [A, u, e]), !e)
+  }, [N, $, p, e]), !e)
     return null;
-  const P = u ?? d;
-  async function G() {
-    !u || !p.trim() || !s || !C || (await l({
+  const I = u ?? p, X = !!p;
+  function W(s) {
+    S(s), b(void 0), C("feedback");
+    const g = H(s.selector);
+    g && (g.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }), window.requestAnimationFrame(() => {
+      y(_(g));
+    }));
+  }
+  async function U() {
+    !p || !m.trim() || !c || !x || (await d({
       projectKey: o.projectKey,
       contentId: o.contentId,
-      normalizedPath: b,
+      normalizedPath: w,
       originalUrl: o.currentUrl ?? window.location.href,
-      selector: u.selector,
-      selectorStrategy: u.selectorStrategy,
-      elementFingerprint: u.fingerprint,
-      cssSnapshot: u.cssSnapshot,
-      comment: p.trim(),
-      authorEmail: s.email
-    }), w(""), f(void 0));
+      selector: p.selector,
+      selectorStrategy: p.selectorStrategy,
+      elementFingerprint: p.fingerprint,
+      cssSnapshot: p.cssSnapshot,
+      comment: m.trim(),
+      authorEmail: c.email
+    }), k(""), b(void 0), y(void 0), C("feedback"));
   }
-  return /* @__PURE__ */ k("div", { className: "review-lens-root", "data-review-lens-ui": !0, children: [
-    P ? /* @__PURE__ */ c(ce, { target: P, locked: !!u }) : null,
-    /* @__PURE__ */ c(
-      le,
+  return /* @__PURE__ */ f("div", { className: "review-lens-root", "data-review-lens-ui": !0, children: [
+    N && I ? /* @__PURE__ */ i(ve, { target: I, locked: !!p }) : null,
+    N ? /* @__PURE__ */ i(
+      be,
       {
-        feedback: N,
-        selectedFeedback: m,
-        onSelect: g
+        feedback: B,
+        selectedFeedback: v,
+        onSelect: W
       }
-    ),
-    /* @__PURE__ */ k("aside", { className: `review-lens-panel review-lens-panel--${t}`, "data-review-lens-ui": !0, children: [
-      /* @__PURE__ */ k("header", { className: "review-lens-panel__header", children: [
-        /* @__PURE__ */ k("div", { children: [
-          /* @__PURE__ */ c("p", { className: "review-lens-kicker", children: "Review Lens" }),
-          /* @__PURE__ */ c("h2", { children: u ? "Element locked" : "Inspecting" })
+    ) : null,
+    /* @__PURE__ */ f("aside", { className: `review-lens-panel review-lens-panel--${t}`, "data-review-lens-ui": !0, children: [
+      /* @__PURE__ */ f("header", { className: "review-lens-panel__header", children: [
+        /* @__PURE__ */ f("div", { children: [
+          /* @__PURE__ */ i("p", { className: "review-lens-kicker", children: "Review Lens" }),
+          /* @__PURE__ */ i("h2", { children: F === "feedback" ? "Feedback" : p ? "Element locked" : "Inspecting" })
         ] }),
-        /* @__PURE__ */ c("button", { type: "button", onClick: () => n == null ? void 0 : n(!1), children: "Close" })
+        /* @__PURE__ */ i("button", { type: "button", onClick: () => n == null ? void 0 : n(!1), children: "Close" })
       ] }),
-      P ? /* @__PURE__ */ c(de, { target: P }) : /* @__PURE__ */ c("p", { children: "Move over the app to inspect." }),
-      u ? /* @__PURE__ */ k(
-        "form",
-        {
-          className: "review-lens-feedback-form",
-          onSubmit: (h) => {
-            h.preventDefault(), G();
-          },
-          children: [
-            /* @__PURE__ */ c("label", { htmlFor: "review-lens-comment", children: "Feedback" }),
-            /* @__PURE__ */ c(
-              "textarea",
+      /* @__PURE__ */ f("div", { className: "review-lens-panel__body", children: [
+        /* @__PURE__ */ f("div", { className: "review-lens-mode-switch", role: "tablist", "aria-label": "Review Lens mode", children: [
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": F === "review",
+              onClick: () => C("review"),
+              children: "Review"
+            }
+          ),
+          /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": F === "feedback",
+              onClick: () => C("feedback"),
+              children: [
+                "Feedback ",
+                /* @__PURE__ */ i("span", { children: B.length })
+              ]
+            }
+          )
+        ] }),
+        F === "review" ? /* @__PURE__ */ f("div", { className: "review-lens-review-pane", role: "tabpanel", children: [
+          /* @__PURE__ */ f("div", { className: "review-lens-inspection", children: [
+            N ? null : /* @__PURE__ */ i("p", { children: "Authenticate with Google to inspect this page." }),
+            N && I ? /* @__PURE__ */ i(ke, { target: I }) : null,
+            N && !I ? /* @__PURE__ */ i("p", { children: "Move over the app to inspect." }) : null
+          ] }),
+          X ? /* @__PURE__ */ f(
+            "form",
+            {
+              className: "review-lens-feedback-form",
+              onSubmit: (s) => {
+                s.preventDefault(), U();
+              },
+              children: [
+                /* @__PURE__ */ i("label", { htmlFor: "review-lens-comment", children: "New feedback" }),
+                /* @__PURE__ */ i(
+                  "textarea",
+                  {
+                    id: "review-lens-comment",
+                    value: m,
+                    disabled: !x,
+                    onChange: (s) => k(s.target.value),
+                    onKeyDown: (s) => {
+                      s.key === "Enter" && s.metaKey && (s.preventDefault(), U());
+                    },
+                    placeholder: x ? "Describe the UX issue..." : "You do not have permission to comment."
+                  }
+                ),
+                x ? /* @__PURE__ */ f("p", { className: "review-lens-feedback-form__hint", children: [
+                  "Press ",
+                  /* @__PURE__ */ i("kbd", { children: "Command" }),
+                  " + ",
+                  /* @__PURE__ */ i("kbd", { children: "Enter" }),
+                  " to submit."
+                ] }) : null,
+                /* @__PURE__ */ i("div", { className: "review-lens-actions", children: /* @__PURE__ */ i("button", { type: "submit", disabled: !m.trim() || !x, children: "Save feedback" }) })
+              ]
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ f("div", { className: "review-lens-comments", children: [
+          /* @__PURE__ */ f("div", { className: "review-lens-comments__header", children: [
+            /* @__PURE__ */ i("h3", { children: "Page feedback" }),
+            /* @__PURE__ */ i("span", { children: B.length })
+          ] }),
+          /* @__PURE__ */ f("div", { className: "review-lens-comments__list", children: [
+            B.length === 0 ? /* @__PURE__ */ i("p", { children: "No feedback for this view." }) : null,
+            B.map((s) => /* @__PURE__ */ f(
+              "article",
               {
-                id: "review-lens-comment",
-                value: p,
-                disabled: !C,
-                onChange: (h) => w(h.target.value),
-                placeholder: C ? "Describe the UX issue..." : "You do not have permission to comment."
-              }
-            ),
-            /* @__PURE__ */ k("div", { className: "review-lens-actions", children: [
-              /* @__PURE__ */ c("button", { type: "button", onClick: () => f(void 0), children: "Unlock" }),
-              /* @__PURE__ */ c("button", { type: "submit", disabled: !p.trim() || !C, children: "Save feedback" })
-            ] })
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ k("section", { className: "review-lens-comments", children: [
-        /* @__PURE__ */ c("h3", { children: "Page feedback" }),
-        N.length === 0 ? /* @__PURE__ */ c("p", { children: "No feedback for this view." }) : null,
-        N.map((h) => /* @__PURE__ */ k(
-          "article",
-          {
-            className: (m == null ? void 0 : m.id) === h.id ? "review-lens-comment review-lens-comment--selected" : "review-lens-comment",
-            children: [
-              /* @__PURE__ */ c("p", { children: h.comment }),
-              /* @__PURE__ */ c("span", { children: h.authorEmail }),
-              h.status === "open" && $ ? /* @__PURE__ */ c("button", { type: "button", onClick: () => void a(h.id), children: "Resolve" }) : null
-            ]
-          },
-          h.id
-        ))
+                tabIndex: 0,
+                className: (v == null ? void 0 : v.id) === s.id ? "review-lens-comment review-lens-comment--selected" : "review-lens-comment",
+                onClick: () => W(s),
+                onKeyDown: (g) => {
+                  (g.key === "Enter" || g.key === " ") && (g.preventDefault(), W(s));
+                },
+                children: [
+                  /* @__PURE__ */ f("div", { className: "review-lens-comment__content", children: [
+                    /* @__PURE__ */ i("p", { children: s.comment }),
+                    /* @__PURE__ */ i("span", { children: s.authorEmail })
+                  ] }),
+                  s.status === "open" && Q ? /* @__PURE__ */ i("div", { className: "review-lens-comment__actions", children: /* @__PURE__ */ i(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (g) => {
+                        g.stopPropagation(), l(s.id);
+                      },
+                      children: "Resolve"
+                    }
+                  ) }) : null
+                ]
+              },
+              s.id
+            ))
+          ] })
+        ] })
       ] })
     ] })
   ] });
 }
-function ce({ target: e, locked: n }) {
-  return /* @__PURE__ */ c(
+function ve({ target: e, locked: n }) {
+  const t = Se(e);
+  return /* @__PURE__ */ f(
     "div",
     {
       className: n ? "review-lens-highlight review-lens-highlight--locked" : "review-lens-highlight",
       style: {
-        top: e.rect.top + window.scrollY,
-        left: e.rect.left + window.scrollX,
-        width: e.rect.width,
-        height: e.rect.height
-      }
+        top: t.margin.top,
+        left: t.margin.left,
+        width: t.margin.width,
+        height: t.margin.height
+      },
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: "review-lens-highlight__border",
+            style: {
+              top: t.border.top - t.margin.top,
+              left: t.border.left - t.margin.left,
+              width: t.border.width,
+              height: t.border.height
+            }
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: "review-lens-highlight__padding",
+            style: {
+              top: t.padding.top - t.margin.top,
+              left: t.padding.left - t.margin.left,
+              width: t.padding.width,
+              height: t.padding.height
+            }
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: "review-lens-highlight__content",
+            style: {
+              top: t.content.top - t.margin.top,
+              left: t.content.left - t.margin.left,
+              width: t.content.width,
+              height: t.content.height
+            }
+          }
+        ),
+        /* @__PURE__ */ f("div", { className: "review-lens-highlight__label", children: [
+          Math.round(e.rect.width),
+          " x ",
+          Math.round(e.rect.height)
+        ] })
+      ]
     }
   );
 }
-function le({
+function be({
   feedback: e,
   selectedFeedback: n,
   onSelect: t
 }) {
-  return /* @__PURE__ */ c(q, { children: e.map((r) => {
-    const o = ue(r.selector), s = o == null ? void 0 : o.getBoundingClientRect();
-    return s ? /* @__PURE__ */ c(
-      "button",
-      {
-        type: "button",
-        className: (n == null ? void 0 : n.id) === r.id ? "review-lens-marker review-lens-marker--selected" : "review-lens-marker",
-        style: {
-          top: s.top + window.scrollY,
-          left: s.left + window.scrollX + s.width
-        },
-        onClick: () => t(r),
-        "aria-label": `Open feedback from ${r.authorEmail}`
-      },
-      r.id
-    ) : null;
-  }) });
+  return /* @__PURE__ */ i(Y, { children: e.map((r) => /* @__PURE__ */ i(
+    ye,
+    {
+      feedback: r,
+      selected: (n == null ? void 0 : n.id) === r.id,
+      onSelect: t
+    },
+    r.id
+  )) });
+}
+function ye({
+  feedback: e,
+  selected: n,
+  onSelect: t
+}) {
+  const r = ee(null);
+  return te(() => {
+    let o = 0;
+    const c = () => {
+      o = 0;
+      const w = r.current, a = H(e.selector), d = a == null ? void 0 : a.getBoundingClientRect();
+      !w || !d || (w.style.top = `${d.top}px`, w.style.left = `${d.right}px`, w.hidden = d.bottom < 0 || d.top > window.innerHeight);
+    }, h = () => {
+      o || (o = window.requestAnimationFrame(c));
+    };
+    return c(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      o && window.cancelAnimationFrame(o), window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
+    };
+  }, [e.selector]), /* @__PURE__ */ i(
+    "button",
+    {
+      ref: r,
+      type: "button",
+      className: n ? "review-lens-marker review-lens-marker--selected" : "review-lens-marker",
+      onClick: () => t(e),
+      "aria-label": `Open feedback from ${e.authorEmail}`
+    }
+  );
 }
-function de({ target: e }) {
+function ke({ target: e }) {
   const n = [
     ["Selector", e.selector],
     ["Size", `${e.cssSnapshot.width} x ${e.cssSnapshot.height}`],
@@ -554,23 +725,71 @@ function de({ target: e }) {
     ["Color", e.cssSnapshot.color],
     ["Background", e.cssSnapshot.backgroundColor]
   ];
-  return /* @__PURE__ */ c("dl", { className: "review-lens-metrics", children: n.map(([t, r]) => /* @__PURE__ */ k("div", { children: [
-    /* @__PURE__ */ c("dt", { children: t }),
-    /* @__PURE__ */ c("dd", { children: r })
+  return /* @__PURE__ */ i("dl", { className: "review-lens-metrics", children: n.map(([t, r]) => /* @__PURE__ */ f("div", { children: [
+    /* @__PURE__ */ i("dt", { children: t }),
+    /* @__PURE__ */ i("dd", { children: r })
   ] }, t)) });
 }
-function ue(e) {
+function H(e) {
   try {
     return document.querySelector(e);
   } catch {
     return null;
   }
 }
+function Se(e) {
+  const n = {
+    top: E(e.cssSnapshot.marginTop),
+    right: E(e.cssSnapshot.marginRight),
+    bottom: E(e.cssSnapshot.marginBottom),
+    left: E(e.cssSnapshot.marginLeft)
+  }, t = {
+    top: E(e.cssSnapshot.borderTopWidth),
+    right: E(e.cssSnapshot.borderRightWidth),
+    bottom: E(e.cssSnapshot.borderBottomWidth),
+    left: E(e.cssSnapshot.borderLeftWidth)
+  }, r = {
+    top: E(e.cssSnapshot.paddingTop),
+    right: E(e.cssSnapshot.paddingRight),
+    bottom: E(e.cssSnapshot.paddingBottom),
+    left: E(e.cssSnapshot.paddingLeft)
+  }, o = {
+    top: e.rect.top,
+    left: e.rect.left,
+    width: Math.max(e.rect.width, 0),
+    height: Math.max(e.rect.height, 0)
+  }, c = {
+    top: o.top - n.top,
+    left: o.left - n.left,
+    width: o.width + n.left + n.right,
+    height: o.height + n.top + n.bottom
+  }, h = {
+    top: o.top + t.top,
+    left: o.left + t.left,
+    width: Math.max(o.width - t.left - t.right, 0),
+    height: Math.max(o.height - t.top - t.bottom, 0)
+  }, w = {
+    top: h.top + r.top,
+    left: h.left + r.left,
+    width: Math.max(h.width - r.left - r.right, 0),
+    height: Math.max(h.height - r.top - r.bottom, 0)
+  };
+  return {
+    margin: c,
+    border: o,
+    padding: h,
+    content: w
+  };
+}
+function E(e) {
+  const n = Number.parseFloat(e || "0");
+  return Number.isFinite(n) ? n : 0;
+}
 export {
-  fe as ReviewLensOverlay,
-  me as ReviewLensProvider,
-  B as buildElementTarget,
-  X as createGoogleSheetsAdapter,
-  te as normalizeReviewUrl,
-  ne as useReviewLens
+  Le as ReviewLensOverlay,
+  Ce as ReviewLensProvider,
+  _ as buildElementTarget,
+  re as createGoogleSheetsAdapter,
+  he as normalizeReviewUrl,
+  ue as useReviewLens
 };

package/dist/review-lens-react.umd.cjs

@@ -1 +1 @@
-(function(w,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],r):(w=typeof globalThis<"u"?globalThis:w||self,r(w.ReviewLensReact={},w.jsxRuntime,w.React))})(this,(function(w,r,p){"use strict";const J=["https://www.googleapis.com/auth/spreadsheets","https://www.googleapis.com/auth/userinfo.email"].join(" "),D="https://www.googleapis.com/oauth2/v3/userinfo";function T(e){const n=e.feedbackSheetName??"Feedback",t=e.usersSheetName??"Users";let o,s;async function a(){return o??(o=X(e.googleClientId)),o}async function y(c,l){const i=await a(),d=await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${c}`,{...l,headers:{Authorization:`Bearer ${i}`,"Content-Type":"application/json",...l==null?void 0:l.headers}});if(!d.ok)throw new Error(`Google Sheets request failed with ${d.status}`);return d.json()}async function S(c){return(await y(`/values/${encodeURIComponent(c)}`)).values??[]}return{async getCurrentUser(){if(!s){const c=await a(),l=await fetch(D,{headers:{Authorization:`Bearer ${c}`}});if(!l.ok)throw new Error(`Google userinfo request failed with ${l.status}`);s=(await l.json()).email}if(!s)throw new Error("Google account did not return an email address");return{email:s}},async getPermissions(c){const[{email:l},i]=await Promise.all([this.getCurrentUser(),S(t)]),d=U(i),k=l.toLowerCase(),u=d.find(g=>{var f;return((f=g.email)==null?void 0:f.toLowerCase())===k&&g.active!=="false"&&(!g.projectKey||g.projectKey===c)});return _((u==null?void 0:u.role)??"designer")},async listFeedback(c){return U(await S(n)).map(x).filter(i=>i!==null).filter(i=>i.projectKey===c.projectKey&&i.contentId===c.contentId&&i.normalizedPath===c.normalizedPath).sort((i,d)=>d.createdAt.localeCompare(i.createdAt))},async createFeedback(c){const l=new Date().toISOString(),i={...c,id:crypto.randomUUID(),status:"open",createdAt:l,updatedAt:l};return await y(`/values/${encodeURIComponent(n)}:append?valueInputOption=RAW`,{method:"POST",body:JSON.stringify({values:[W(i)]})}),i},async resolveFeedback(c,l){const i=await S(n),d=i[0]??H,k=d.indexOf("id"),u=d.indexOf("status"),g=d.indexOf("updatedAt"),f=d.indexOf("resolvedAt"),v=d.indexOf("resolvedBy"),m=i.findIndex((A,N)=>N>0&&A[k]===c);if(m<1)throw new Error(`Feedback ${c} was not found`);const b=[...i[m]],E=new Date().toISOString();b[u]="resolved",b[g]=E,b[f]=E,b[v]=l,await y(`/values/${encodeURIComponent(n)}!A${m+1}:Q${m+1}?valueInputOption=RAW`,{method:"PUT",body:JSON.stringify({values:[b]})});const P=x(O(d,b));if(!P)throw new Error(`Feedback ${c} could not be parsed after resolving`);return P}}}const H=["id","projectKey","contentId","normalizedPath","originalUrl","selector","selectorStrategy","elementFingerprintJson","cssSnapshotJson","comment","status","authorEmail","createdAt","updatedAt","resolvedAt","resolvedBy"];function W(e){return[e.id,e.projectKey,e.contentId,e.normalizedPath,e.originalUrl,e.selector,e.selectorStrategy,JSON.stringify(e.elementFingerprint),JSON.stringify(e.cssSnapshot),e.comment,e.status,e.authorEmail,e.createdAt,e.updatedAt,e.resolvedAt??"",e.resolvedBy??""]}function U(e){const[n,...t]=e;return n?t.map(o=>O(n,o)):[]}function O(e,n){return Object.fromEntries(e.map((t,o)=>[t,n[o]??""]))}function x(e){return e.id?{id:e.id,projectKey:e.projectKey,contentId:e.contentId,normalizedPath:e.normalizedPath,originalUrl:e.originalUrl,selector:e.selector,selectorStrategy:e.selectorStrategy==="stable-attribute"?"stable-attribute":"css-path",elementFingerprint:z(e.elementFingerprintJson,{tagName:"",width:0,height:0}),cssSnapshot:z(e.cssSnapshotJson,{margin:"",padding:"",border:"",fontFamily:"",fontSize:"",lineHeight:"",color:"",backgroundColor:"",width:0,height:0}),comment:e.comment,status:e.status==="resolved"?"resolved":"open",authorEmail:e.authorEmail,createdAt:e.createdAt,updatedAt:e.updatedAt,resolvedAt:e.resolvedAt||void 0,resolvedBy:e.resolvedBy||void 0}:null}function z(e,n){try{return e?JSON.parse(e):n}catch{return n}}function _(e){return e==="admin"?["create","read","resolve"]:e==="developer"?["read","resolve"]:["create","read"]}async function X(e){return await Y(),new Promise((n,t)=>{var s;const o=(s=window.google)==null?void 0:s.accounts.oauth2.initTokenClient({client_id:e,scope:J,callback:a=>{if(a.error||!a.access_token){t(new Error(a.error??"Google OAuth did not return an access token"));return}n(a.access_token)}});o==null||o.requestAccessToken({prompt:""})})}function Y(){var e;return(e=window.google)!=null&&e.accounts.oauth2?Promise.resolve():new Promise((n,t)=>{const o=document.querySelector('script[src="https://accounts.google.com/gsi/client"]');if(o){o.addEventListener("load",()=>n(),{once:!0}),o.addEventListener("error",()=>t(new Error("Google Identity failed to load")),{once:!0});return}const s=document.createElement("script");s.src="https://accounts.google.com/gsi/client",s.async=!0,s.defer=!0,s.onload=()=>n(),s.onerror=()=>t(new Error("Google Identity failed to load")),document.head.append(s)})}function B(e){return new URL(e,window.location.href).pathname.replace(/\/+$/,"")||"/"}const K=p.createContext(null);function Q({config:e,children:n}){const t=p.useMemo(()=>e.adapter?e.adapter:T({googleClientId:q(e.googleClientId,"googleClientId"),spreadsheetId:q(e.spreadsheetId,"spreadsheetId"),feedbackSheetName:e.sheetName??"Feedback"}),[e.adapter,e.googleClientId,e.sheetName,e.spreadsheetId]),o=e.currentUrl??window.location.href,s=(e.normalizeUrl??B)(o),[a,y]=p.useState(),[S,c]=p.useState([]),[l,i]=p.useState([]),d=p.useCallback(async()=>{const f=await t.listFeedback({projectKey:e.projectKey,contentId:e.contentId,normalizedPath:s});i(f)},[t,e.contentId,e.projectKey,s]);p.useEffect(()=>{let f=!0;async function v(){const[m,b]=await Promise.all([t.getCurrentUser(),t.getPermissions(e.projectKey)]);f&&(y(m),c(b),await d())}return v(),()=>{f=!1}},[t,e.projectKey,d]);const k=p.useCallback(async f=>{const v=await t.createFeedback(f);return i(m=>[v,...m]),v},[t]),u=p.useCallback(async f=>{const v=await t.resolveFeedback(f,(a==null?void 0:a.email)??"");return i(m=>m.map(b=>b.id===f?v:b)),v},[t,a==null?void 0:a.email]),g=p.useMemo(()=>({config:e,adapter:t,currentUser:a,permissions:S,feedback:l,normalizedPath:s,refreshFeedback:d,createFeedback:k,resolveFeedback:u}),[t,e,k,a,l,s,S,d,u]);return r.jsx(K.Provider,{value:g,children:n})}function M(){const e=p.useContext(K);if(!e)throw new Error("useReviewLens must be used inside ReviewLensProvider");return e}function q(e,n){if(!e)throw new Error(`review-lens-react requires config.${n} when no adapter is provided`);return e}const V=["data-review-id","data-testid","data-test-id","aria-label","name"];function L(e){const n=e.getBoundingClientRect(),t=Z(e);return{selector:t.selector,selectorStrategy:t.strategy,fingerprint:ee(e,n),cssSnapshot:te(e,n),rect:n}}function Z(e){for(const n of V){const t=e.getAttribute(n);if(t)return{selector:`[${n}="${G(t)}"]`,strategy:"stable-attribute"}}return e.id?{selector:`#${G(e.id)}`,strategy:"stable-attribute"}:{selector:R(e),strategy:"css-path"}}function R(e){const n=[];let t=e;for(;t&&t.nodeType===Node.ELEMENT_NODE&&t!==document.body;){const o=t.parentElement,s=t.tagName.toLowerCase();if(!o){n.unshift(s);break}const a=t.tagName,y=Array.from(o.children).filter(c=>c.tagName===a),S=y.indexOf(t)+1;n.unshift(y.length>1?`${s}:nth-of-type(${S})`:s),t=o}return n.join(" > ")}function ee(e,n){var t;return{tagName:e.tagName.toLowerCase(),id:e.id||void 0,className:e.getAttribute("class")||void 0,textSnippet:((t=e.textContent)==null?void 0:t.trim().slice(0,80))||void 0,ariaLabel:e.getAttribute("aria-label")||void 0,width:Math.round(n.width),height:Math.round(n.height)}}function te(e,n){const t=window.getComputedStyle(e);return{margin:j(t.marginTop,t.marginRight,t.marginBottom,t.marginLeft),padding:j(t.paddingTop,t.paddingRight,t.paddingBottom,t.paddingLeft),border:j(t.borderTopWidth,t.borderRightWidth,t.borderBottomWidth,t.borderLeftWidth),fontFamily:t.fontFamily,fontSize:t.fontSize,lineHeight:t.lineHeight,color:t.color,backgroundColor:t.backgroundColor,width:Math.round(n.width),height:Math.round(n.height)}}function j(e,n,t,o){return e===n&&n===t&&t===o?e:`${e} ${n} ${t} ${o}`}function G(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/["\\]/g,"\\$&")}function ne({open:e,onOpenChange:n,placement:t="top-right",showResolved:o=!1}){const{config:s,currentUser:a,feedback:y,normalizedPath:S,permissions:c,createFeedback:l,resolveFeedback:i}=M(),[d,k]=p.useState(),[u,g]=p.useState(),[f,v]=p.useState(""),[m,b]=p.useState(),E=c.includes("create"),P=c.includes("resolve"),A=p.useMemo(()=>y.filter(h=>o||h.status!=="resolved"),[y,o]);p.useEffect(()=>{e||(k(void 0),g(void 0),v(""))},[e]);const N=p.useCallback(h=>{const I=h.target instanceof Element?h.target:null;if(I)return I.closest("[data-review-lens-ui]")?null:I;const C=document.elementFromPoint(h.clientX,h.clientY);return!C||C.closest("[data-review-lens-ui]")?null:C},[]);if(p.useEffect(()=>{if(!e||u)return;function h(C){const F=N(C);F&&k(L(F))}function I(C){const F=N(C);F&&(C.preventDefault(),C.stopPropagation(),g(L(F)))}return window.addEventListener("mousemove",h,!0),window.addEventListener("click",I,!0),()=>{window.removeEventListener("mousemove",h,!0),window.removeEventListener("click",I,!0)}},[N,u,e]),!e)return null;const $=u??d;async function ie(){!u||!f.trim()||!a||!E||(await l({projectKey:s.projectKey,contentId:s.contentId,normalizedPath:S,originalUrl:s.currentUrl??window.location.href,selector:u.selector,selectorStrategy:u.selectorStrategy,elementFingerprint:u.fingerprint,cssSnapshot:u.cssSnapshot,comment:f.trim(),authorEmail:a.email}),v(""),g(void 0))}return r.jsxs("div",{className:"review-lens-root","data-review-lens-ui":!0,children:[$?r.jsx(re,{target:$,locked:!!u}):null,r.jsx(oe,{feedback:A,selectedFeedback:m,onSelect:b}),r.jsxs("aside",{className:`review-lens-panel review-lens-panel--${t}`,"data-review-lens-ui":!0,children:[r.jsxs("header",{className:"review-lens-panel__header",children:[r.jsxs("div",{children:[r.jsx("p",{className:"review-lens-kicker",children:"Review Lens"}),r.jsx("h2",{children:u?"Element locked":"Inspecting"})]}),r.jsx("button",{type:"button",onClick:()=>n==null?void 0:n(!1),children:"Close"})]}),$?r.jsx(se,{target:$}):r.jsx("p",{children:"Move over the app to inspect."}),u?r.jsxs("form",{className:"review-lens-feedback-form",onSubmit:h=>{h.preventDefault(),ie()},children:[r.jsx("label",{htmlFor:"review-lens-comment",children:"Feedback"}),r.jsx("textarea",{id:"review-lens-comment",value:f,disabled:!E,onChange:h=>v(h.target.value),placeholder:E?"Describe the UX issue...":"You do not have permission to comment."}),r.jsxs("div",{className:"review-lens-actions",children:[r.jsx("button",{type:"button",onClick:()=>g(void 0),children:"Unlock"}),r.jsx("button",{type:"submit",disabled:!f.trim()||!E,children:"Save feedback"})]})]}):null,r.jsxs("section",{className:"review-lens-comments",children:[r.jsx("h3",{children:"Page feedback"}),A.length===0?r.jsx("p",{children:"No feedback for this view."}):null,A.map(h=>r.jsxs("article",{className:(m==null?void 0:m.id)===h.id?"review-lens-comment review-lens-comment--selected":"review-lens-comment",children:[r.jsx("p",{children:h.comment}),r.jsx("span",{children:h.authorEmail}),h.status==="open"&&P?r.jsx("button",{type:"button",onClick:()=>void i(h.id),children:"Resolve"}):null]},h.id))]})]})]})}function re({target:e,locked:n}){return r.jsx("div",{className:n?"review-lens-highlight review-lens-highlight--locked":"review-lens-highlight",style:{top:e.rect.top+window.scrollY,left:e.rect.left+window.scrollX,width:e.rect.width,height:e.rect.height}})}function oe({feedback:e,selectedFeedback:n,onSelect:t}){return r.jsx(r.Fragment,{children:e.map(o=>{const s=ae(o.selector),a=s==null?void 0:s.getBoundingClientRect();return a?r.jsx("button",{type:"button",className:(n==null?void 0:n.id)===o.id?"review-lens-marker review-lens-marker--selected":"review-lens-marker",style:{top:a.top+window.scrollY,left:a.left+window.scrollX+a.width},onClick:()=>t(o),"aria-label":`Open feedback from ${o.authorEmail}`},o.id):null})})}function se({target:e}){const n=[["Selector",e.selector],["Size",`${e.cssSnapshot.width} x ${e.cssSnapshot.height}`],["Margin",e.cssSnapshot.margin],["Padding",e.cssSnapshot.padding],["Border",e.cssSnapshot.border],["Font",`${e.cssSnapshot.fontSize} / ${e.cssSnapshot.lineHeight}`],["Family",e.cssSnapshot.fontFamily],["Color",e.cssSnapshot.color],["Background",e.cssSnapshot.backgroundColor]];return r.jsx("dl",{className:"review-lens-metrics",children:n.map(([t,o])=>r.jsxs("div",{children:[r.jsx("dt",{children:t}),r.jsx("dd",{children:o})]},t))})}function ae(e){try{return document.querySelector(e)}catch{return null}}w.ReviewLensOverlay=ne,w.ReviewLensProvider=Q,w.buildElementTarget=L,w.createGoogleSheetsAdapter=T,w.normalizeReviewUrl=B,w.useReviewLens=M,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})}));
+(function(y,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(y=typeof globalThis<"u"?globalThis:y||self,n(y.ReviewLensReact={},y.jsxRuntime,y.React))})(this,(function(y,n,h){"use strict";const X=["https://www.googleapis.com/auth/spreadsheets","https://www.googleapis.com/auth/userinfo.email"].join(" "),Y="https://www.googleapis.com/oauth2/v3/userinfo";function W(e){const o=e.feedbackSheetName??"Feedback",t=e.usersSheetName??"Users";let s,r;async function c(){return s??(s=te(e.googleClientId)),s}async function u(a,d){const l=await c(),p=await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${a}`,{...d,headers:{Authorization:`Bearer ${l}`,"Content-Type":"application/json",...d==null?void 0:d.headers}});if(!p.ok)throw new Error(`Google Sheets request failed with ${p.status}`);return p.json()}async function w(a){return(await u(`/values/${encodeURIComponent(a)}`)).values??[]}return{async getCurrentUser(){if(!r){const a=await c(),d=await fetch(Y,{headers:{Authorization:`Bearer ${a}`}});if(!d.ok)throw new Error(`Google userinfo request failed with ${d.status}`);r=(await d.json()).email}if(!r)throw new Error("Google account did not return an email address");return{email:r}},async getPermissions(a){const[{email:d},l]=await Promise.all([this.getCurrentUser(),w(t)]),p=_(l),k=d.toLowerCase(),f=p.find(b=>{var g;return((g=b.email)==null?void 0:g.toLowerCase())===k&&b.active!=="false"&&(!b.projectKey||b.projectKey===a)});return ee((f==null?void 0:f.role)??"designer")},async listFeedback(a){return _(await w(o)).map(z).filter(l=>l!==null).filter(l=>l.projectKey===a.projectKey&&l.contentId===a.contentId&&l.normalizedPath===a.normalizedPath).sort((l,p)=>p.createdAt.localeCompare(l.createdAt))},async createFeedback(a){const d=new Date().toISOString(),l={...a,id:crypto.randomUUID(),status:"open",createdAt:d,updatedAt:d};return await u(`/values/${encodeURIComponent(o)}:append?valueInputOption=RAW`,{method:"POST",body:JSON.stringify({values:[Z(l)]})}),l},async resolveFeedback(a,d){const l=await w(o),p=l[0]??V,k=p.indexOf("id"),f=p.indexOf("status"),b=p.indexOf("updatedAt"),g=p.indexOf("resolvedAt"),S=p.indexOf("resolvedBy"),v=l.findIndex((C,B)=>B>0&&C[k]===a);if(v<1)throw new Error(`Feedback ${a} was not found`);const E=[...l[v]],T=new Date().toISOString();E[f]="resolved",E[b]=T,E[g]=T,E[S]=d,await u(`/values/${encodeURIComponent(o)}!A${v+1}:Q${v+1}?valueInputOption=RAW`,{method:"PUT",body:JSON.stringify({values:[E]})});const N=z(U(p,E));if(!N)throw new Error(`Feedback ${a} could not be parsed after resolving`);return N}}}const V=["id","projectKey","contentId","normalizedPath","originalUrl","selector","selectorStrategy","elementFingerprintJson","cssSnapshotJson","comment","status","authorEmail","createdAt","updatedAt","resolvedAt","resolvedBy"];function Z(e){return[e.id,e.projectKey,e.contentId,e.normalizedPath,e.originalUrl,e.selector,e.selectorStrategy,JSON.stringify(e.elementFingerprint),JSON.stringify(e.cssSnapshot),e.comment,e.status,e.authorEmail,e.createdAt,e.updatedAt,e.resolvedAt??"",e.resolvedBy??""]}function _(e){const[o,...t]=e;return o?t.map(s=>U(o,s)):[]}function U(e,o){return Object.fromEntries(e.map((t,s)=>[t,o[s]??""]))}function z(e){return e.id?{id:e.id,projectKey:e.projectKey,contentId:e.contentId,normalizedPath:e.normalizedPath,originalUrl:e.originalUrl,selector:e.selector,selectorStrategy:e.selectorStrategy==="stable-attribute"?"stable-attribute":"css-path",elementFingerprint:K(e.elementFingerprintJson,{tagName:"",width:0,height:0}),cssSnapshot:R(e.cssSnapshotJson),comment:e.comment,status:e.status==="resolved"?"resolved":"open",authorEmail:e.authorEmail,createdAt:e.createdAt,updatedAt:e.updatedAt,resolvedAt:e.resolvedAt||void 0,resolvedBy:e.resolvedBy||void 0}:null}function K(e,o){try{return e?JSON.parse(e):o}catch{return o}}function R(e){const o=K(e,{});return{margin:o.margin??"",marginTop:o.marginTop??"",marginRight:o.marginRight??"",marginBottom:o.marginBottom??"",marginLeft:o.marginLeft??"",padding:o.padding??"",paddingTop:o.paddingTop??"",paddingRight:o.paddingRight??"",paddingBottom:o.paddingBottom??"",paddingLeft:o.paddingLeft??"",border:o.border??"",borderTopWidth:o.borderTopWidth??"",borderRightWidth:o.borderRightWidth??"",borderBottomWidth:o.borderBottomWidth??"",borderLeftWidth:o.borderLeftWidth??"",fontFamily:o.fontFamily??"",fontSize:o.fontSize??"",lineHeight:o.lineHeight??"",color:o.color??"",backgroundColor:o.backgroundColor??"",width:o.width??0,height:o.height??0}}function ee(e){return e==="admin"?["create","read","resolve"]:e==="developer"?["read","resolve"]:["create","read"]}async function te(e){return await oe(),new Promise((o,t)=>{var r;const s=(r=window.google)==null?void 0:r.accounts.oauth2.initTokenClient({client_id:e,scope:X,callback:c=>{if(c.error||!c.access_token){t(new Error(c.error??"Google OAuth did not return an access token"));return}o(c.access_token)}});s==null||s.requestAccessToken({prompt:""})})}function oe(){var e;return(e=window.google)!=null&&e.accounts.oauth2?Promise.resolve():new Promise((o,t)=>{const s=document.querySelector('script[src="https://accounts.google.com/gsi/client"]');if(s){s.addEventListener("load",()=>o(),{once:!0}),s.addEventListener("error",()=>t(new Error("Google Identity failed to load")),{once:!0});return}const r=document.createElement("script");r.src="https://accounts.google.com/gsi/client",r.async=!0,r.defer=!0,r.onload=()=>o(),r.onerror=()=>t(new Error("Google Identity failed to load")),document.head.append(r)})}function O(e){return new URL(e,window.location.href).pathname.replace(/\/+$/,"")||"/"}const D=h.createContext(null);function ne({config:e,children:o}){const t=h.useMemo(()=>e.adapter?e.adapter:W({googleClientId:G(e.googleClientId,"googleClientId"),spreadsheetId:G(e.spreadsheetId,"spreadsheetId"),feedbackSheetName:e.sheetName??"Feedback"}),[e.adapter,e.googleClientId,e.sheetName,e.spreadsheetId]),s=e.currentUrl??window.location.href,r=(e.normalizeUrl??O)(s),[c,u]=h.useState(),[w,a]=h.useState([]),[d,l]=h.useState([]),p=h.useCallback(async()=>{const g=await t.listFeedback({projectKey:e.projectKey,contentId:e.contentId,normalizedPath:r});l(g)},[t,e.contentId,e.projectKey,r]);h.useEffect(()=>{let g=!0;async function S(){const[v,E]=await Promise.all([t.getCurrentUser(),t.getPermissions(e.projectKey)]);g&&(u(v),a(E),await p())}return S(),()=>{g=!1}},[t,e.projectKey,p]);const k=h.useCallback(async g=>{const S=await t.createFeedback(g);return l(v=>[S,...v]),S},[t]),f=h.useCallback(async g=>{const S=await t.resolveFeedback(g,(c==null?void 0:c.email)??"");return l(v=>v.map(E=>E.id===g?S:E)),S},[t,c==null?void 0:c.email]),b=h.useMemo(()=>({config:e,adapter:t,currentUser:c,permissions:w,feedback:d,normalizedPath:r,refreshFeedback:p,createFeedback:k,resolveFeedback:f}),[t,e,k,c,d,r,w,p,f]);return n.jsx(D.Provider,{value:b,children:o})}function q(){const e=h.useContext(D);if(!e)throw new Error("useReviewLens must be used inside ReviewLensProvider");return e}function G(e,o){if(!e)throw new Error(`review-lens-react requires config.${o} when no adapter is provided`);return e}const re=["data-review-id","data-testid","data-test-id","aria-label","name"];function P(e){const o=e.getBoundingClientRect(),t=se(e);return{selector:t.selector,selectorStrategy:t.strategy,fingerprint:ae(e,o),cssSnapshot:de(e,o),rect:o}}function se(e){for(const o of re){const t=e.getAttribute(o);if(t)return{selector:`[${o}="${J(t)}"]`,strategy:"stable-attribute"}}return e.id?{selector:`#${J(e.id)}`,strategy:"stable-attribute"}:{selector:ie(e),strategy:"css-path"}}function ie(e){const o=[];let t=e;for(;t&&t.nodeType===Node.ELEMENT_NODE&&t!==document.body;){const s=t.parentElement,r=t.tagName.toLowerCase();if(!s){o.unshift(r);break}const c=t.tagName,u=Array.from(s.children).filter(a=>a.tagName===c),w=u.indexOf(t)+1;o.unshift(u.length>1?`${r}:nth-of-type(${w})`:r),t=s}return o.join(" > ")}function ae(e,o){var t;return{tagName:e.tagName.toLowerCase(),id:e.id||void 0,className:e.getAttribute("class")||void 0,textSnippet:((t=e.textContent)==null?void 0:t.trim().slice(0,80))||void 0,ariaLabel:e.getAttribute("aria-label")||void 0,width:Math.round(o.width),height:Math.round(o.height)}}function de(e,o){const t=window.getComputedStyle(e);return{margin:$(t.marginTop,t.marginRight,t.marginBottom,t.marginLeft),marginTop:t.marginTop,marginRight:t.marginRight,marginBottom:t.marginBottom,marginLeft:t.marginLeft,padding:$(t.paddingTop,t.paddingRight,t.paddingBottom,t.paddingLeft),paddingTop:t.paddingTop,paddingRight:t.paddingRight,paddingBottom:t.paddingBottom,paddingLeft:t.paddingLeft,border:$(t.borderTopWidth,t.borderRightWidth,t.borderBottomWidth,t.borderLeftWidth),borderTopWidth:t.borderTopWidth,borderRightWidth:t.borderRightWidth,borderBottomWidth:t.borderBottomWidth,borderLeftWidth:t.borderLeftWidth,fontFamily:t.fontFamily,fontSize:t.fontSize,lineHeight:t.lineHeight,color:t.color,backgroundColor:t.backgroundColor,width:Math.round(o.width),height:Math.round(o.height)}}function $(e,o,t,s){return e===o&&o===t&&t===s?e:`${e} ${o} ${t} ${s}`}function J(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/["\\]/g,"\\$&")}function ce({open:e,onOpenChange:o,placement:t="top-right",showResolved:s=!1}){const{config:r,currentUser:c,feedback:u,normalizedPath:w,permissions:a,createFeedback:d,resolveFeedback:l}=q(),[p,k]=h.useState(),[f,b]=h.useState(),[g,S]=h.useState(""),[v,E]=h.useState(),[T,N]=h.useState("review"),C=!!c,B=a.includes("create"),ge=a.includes("resolve"),I=h.useMemo(()=>u.filter(i=>s||i.status!=="resolved"),[u,s]);h.useEffect(()=>{e||(k(void 0),b(void 0),S(""),N("review"))},[e]),h.useEffect(()=>{C||(k(void 0),b(void 0))},[C]),h.useEffect(()=>{if(!e)return;function i(m){m.key==="Escape"&&(m.preventDefault(),o==null||o(!1))}return window.addEventListener("keydown",i),()=>{window.removeEventListener("keydown",i)}},[o,e]);const j=h.useCallback(i=>{const m=i.target instanceof Element?i.target:null;if(m)return m.closest("[data-review-lens-ui]")?null:m;const F=document.elementFromPoint(i.clientX,i.clientY);return!F||F.closest("[data-review-lens-ui]")?null:F},[]);if(h.useEffect(()=>{if(!e||!C)return;function i(F){const x=j(F);k(x?P(x):void 0)}function m(F){const x=j(F);x&&(F.preventDefault(),F.stopPropagation(),b(P(x)),N("review"))}return window.addEventListener("mousemove",i,!0),window.addEventListener("click",m,!0),()=>{window.removeEventListener("mousemove",i,!0),window.removeEventListener("click",m,!0)}},[C,j,f,e]),!e)return null;const A=p??f,me=!!f;function M(i){E(i),b(void 0),N("feedback");const m=H(i.selector);m&&(m.scrollIntoView({behavior:"smooth",block:"center",inline:"center"}),window.requestAnimationFrame(()=>{k(P(m))}))}async function Q(){!f||!g.trim()||!c||!B||(await d({projectKey:r.projectKey,contentId:r.contentId,normalizedPath:w,originalUrl:r.currentUrl??window.location.href,selector:f.selector,selectorStrategy:f.selectorStrategy,elementFingerprint:f.fingerprint,cssSnapshot:f.cssSnapshot,comment:g.trim(),authorEmail:c.email}),S(""),b(void 0),k(void 0),N("feedback"))}return n.jsxs("div",{className:"review-lens-root","data-review-lens-ui":!0,children:[C&&A?n.jsx(le,{target:A,locked:!!f}):null,C?n.jsx(he,{feedback:I,selectedFeedback:v,onSelect:M}):null,n.jsxs("aside",{className:`review-lens-panel review-lens-panel--${t}`,"data-review-lens-ui":!0,children:[n.jsxs("header",{className:"review-lens-panel__header",children:[n.jsxs("div",{children:[n.jsx("p",{className:"review-lens-kicker",children:"Review Lens"}),n.jsx("h2",{children:T==="feedback"?"Feedback":f?"Element locked":"Inspecting"})]}),n.jsx("button",{type:"button",onClick:()=>o==null?void 0:o(!1),children:"Close"})]}),n.jsxs("div",{className:"review-lens-panel__body",children:[n.jsxs("div",{className:"review-lens-mode-switch",role:"tablist","aria-label":"Review Lens mode",children:[n.jsx("button",{type:"button",role:"tab","aria-selected":T==="review",onClick:()=>N("review"),children:"Review"}),n.jsxs("button",{type:"button",role:"tab","aria-selected":T==="feedback",onClick:()=>N("feedback"),children:["Feedback ",n.jsx("span",{children:I.length})]})]}),T==="review"?n.jsxs("div",{className:"review-lens-review-pane",role:"tabpanel",children:[n.jsxs("div",{className:"review-lens-inspection",children:[C?null:n.jsx("p",{children:"Authenticate with Google to inspect this page."}),C&&A?n.jsx(pe,{target:A}):null,C&&!A?n.jsx("p",{children:"Move over the app to inspect."}):null]}),me?n.jsxs("form",{className:"review-lens-feedback-form",onSubmit:i=>{i.preventDefault(),Q()},children:[n.jsx("label",{htmlFor:"review-lens-comment",children:"New feedback"}),n.jsx("textarea",{id:"review-lens-comment",value:g,disabled:!B,onChange:i=>S(i.target.value),onKeyDown:i=>{i.key==="Enter"&&i.metaKey&&(i.preventDefault(),Q())},placeholder:B?"Describe the UX issue...":"You do not have permission to comment."}),B?n.jsxs("p",{className:"review-lens-feedback-form__hint",children:["Press ",n.jsx("kbd",{children:"Command"})," + ",n.jsx("kbd",{children:"Enter"})," to submit."]}):null,n.jsx("div",{className:"review-lens-actions",children:n.jsx("button",{type:"submit",disabled:!g.trim()||!B,children:"Save feedback"})})]}):null]}):n.jsxs("div",{className:"review-lens-comments",children:[n.jsxs("div",{className:"review-lens-comments__header",children:[n.jsx("h3",{children:"Page feedback"}),n.jsx("span",{children:I.length})]}),n.jsxs("div",{className:"review-lens-comments__list",children:[I.length===0?n.jsx("p",{children:"No feedback for this view."}):null,I.map(i=>n.jsxs("article",{tabIndex:0,className:(v==null?void 0:v.id)===i.id?"review-lens-comment review-lens-comment--selected":"review-lens-comment",onClick:()=>M(i),onKeyDown:m=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),M(i))},children:[n.jsxs("div",{className:"review-lens-comment__content",children:[n.jsx("p",{children:i.comment}),n.jsx("span",{children:i.authorEmail})]}),i.status==="open"&&ge?n.jsx("div",{className:"review-lens-comment__actions",children:n.jsx("button",{type:"button",onClick:m=>{m.stopPropagation(),l(i.id)},children:"Resolve"})}):null]},i.id))]})]})]})]})]})}function le({target:e,locked:o}){const t=fe(e);return n.jsxs("div",{className:o?"review-lens-highlight review-lens-highlight--locked":"review-lens-highlight",style:{top:t.margin.top,left:t.margin.left,width:t.margin.width,height:t.margin.height},children:[n.jsx("div",{className:"review-lens-highlight__border",style:{top:t.border.top-t.margin.top,left:t.border.left-t.margin.left,width:t.border.width,height:t.border.height}}),n.jsx("div",{className:"review-lens-highlight__padding",style:{top:t.padding.top-t.margin.top,left:t.padding.left-t.margin.left,width:t.padding.width,height:t.padding.height}}),n.jsx("div",{className:"review-lens-highlight__content",style:{top:t.content.top-t.margin.top,left:t.content.left-t.margin.left,width:t.content.width,height:t.content.height}}),n.jsxs("div",{className:"review-lens-highlight__label",children:[Math.round(e.rect.width)," x ",Math.round(e.rect.height)]})]})}function he({feedback:e,selectedFeedback:o,onSelect:t}){return n.jsx(n.Fragment,{children:e.map(s=>n.jsx(ue,{feedback:s,selected:(o==null?void 0:o.id)===s.id,onSelect:t},s.id))})}function ue({feedback:e,selected:o,onSelect:t}){const s=h.useRef(null);return h.useLayoutEffect(()=>{let r=0;const c=()=>{r=0;const w=s.current,a=H(e.selector),d=a==null?void 0:a.getBoundingClientRect();!w||!d||(w.style.top=`${d.top}px`,w.style.left=`${d.right}px`,w.hidden=d.bottom<0||d.top>window.innerHeight)},u=()=>{r||(r=window.requestAnimationFrame(c))};return c(),window.addEventListener("scroll",u,!0),window.addEventListener("resize",u),()=>{r&&window.cancelAnimationFrame(r),window.removeEventListener("scroll",u,!0),window.removeEventListener("resize",u)}},[e.selector]),n.jsx("button",{ref:s,type:"button",className:o?"review-lens-marker review-lens-marker--selected":"review-lens-marker",onClick:()=>t(e),"aria-label":`Open feedback from ${e.authorEmail}`})}function pe({target:e}){const o=[["Selector",e.selector],["Size",`${e.cssSnapshot.width} x ${e.cssSnapshot.height}`],["Margin",e.cssSnapshot.margin],["Padding",e.cssSnapshot.padding],["Border",e.cssSnapshot.border],["Font",`${e.cssSnapshot.fontSize} / ${e.cssSnapshot.lineHeight}`],["Family",e.cssSnapshot.fontFamily],["Color",e.cssSnapshot.color],["Background",e.cssSnapshot.backgroundColor]];return n.jsx("dl",{className:"review-lens-metrics",children:o.map(([t,s])=>n.jsxs("div",{children:[n.jsx("dt",{children:t}),n.jsx("dd",{children:s})]},t))})}function H(e){try{return document.querySelector(e)}catch{return null}}function fe(e){const o={top:L(e.cssSnapshot.marginTop),right:L(e.cssSnapshot.marginRight),bottom:L(e.cssSnapshot.marginBottom),left:L(e.cssSnapshot.marginLeft)},t={top:L(e.cssSnapshot.borderTopWidth),right:L(e.cssSnapshot.borderRightWidth),bottom:L(e.cssSnapshot.borderBottomWidth),left:L(e.cssSnapshot.borderLeftWidth)},s={top:L(e.cssSnapshot.paddingTop),right:L(e.cssSnapshot.paddingRight),bottom:L(e.cssSnapshot.paddingBottom),left:L(e.cssSnapshot.paddingLeft)},r={top:e.rect.top,left:e.rect.left,width:Math.max(e.rect.width,0),height:Math.max(e.rect.height,0)},c={top:r.top-o.top,left:r.left-o.left,width:r.width+o.left+o.right,height:r.height+o.top+o.bottom},u={top:r.top+t.top,left:r.left+t.left,width:Math.max(r.width-t.left-t.right,0),height:Math.max(r.height-t.top-t.bottom,0)},w={top:u.top+s.top,left:u.left+s.left,width:Math.max(u.width-s.left-s.right,0),height:Math.max(u.height-s.top-s.bottom,0)};return{margin:c,border:r,padding:u,content:w}}function L(e){const o=Number.parseFloat(e||"0");return Number.isFinite(o)?o:0}y.ReviewLensOverlay=ce,y.ReviewLensProvider=ne,y.buildElementTarget=P,y.createGoogleSheetsAdapter=W,y.normalizeReviewUrl=O,y.useReviewLens=q,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));

package/dist/styles.css

@@ -1 +1 @@
-.review-lens-root{color:#171717;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;position:fixed;z-index:2147483647}.review-lens-highlight{border:2px solid #2563eb;box-shadow:0 0 0 9999px #0f172a14,0 0 0 4px #2563eb2e;pointer-events:none;position:absolute}.review-lens-highlight--locked{border-color:#f97316;box-shadow:0 0 0 9999px #0f172a1f,0 0 0 4px #f9731638}.review-lens-panel{background:#fafafa;border:1px solid #d4d4d4;border-radius:8px;box-shadow:0 24px 70px #0f172a38;box-sizing:border-box;max-height:calc(100vh - 32px);overflow:auto;padding:16px;position:fixed;width:min(380px,calc(100vw - 32px))}.review-lens-panel--top-left{left:16px;top:16px}.review-lens-panel--top-right{right:16px;top:16px}.review-lens-panel--bottom-left{bottom:16px;left:16px}.review-lens-panel--bottom-right{bottom:16px;right:16px}.review-lens-panel__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.review-lens-panel h2,.review-lens-panel h3,.review-lens-panel p{margin:0}.review-lens-panel h2{font-size:18px;line-height:1.25}.review-lens-panel h3{font-size:14px;margin-top:18px}.review-lens-kicker{color:#525252;font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.review-lens-panel button{background:#171717;border:1px solid #171717;border-radius:6px;color:#fff;cursor:pointer;font:inherit;font-size:13px;min-height:32px;padding:6px 10px}.review-lens-panel button:disabled{cursor:not-allowed;opacity:.45}.review-lens-metrics{border:1px solid #e5e5e5;border-radius:8px;display:grid;gap:0;margin:16px 0 0;overflow:hidden}.review-lens-metrics div{display:grid;grid-template-columns:96px minmax(0,1fr)}.review-lens-metrics dt,.review-lens-metrics dd{border-bottom:1px solid #e5e5e5;font-size:12px;margin:0;min-width:0;padding:8px}.review-lens-metrics dt{background:#f5f5f5;color:#525252;font-weight:700}.review-lens-metrics dd{overflow-wrap:anywhere}.review-lens-feedback-form{display:grid;gap:8px;margin-top:16px}.review-lens-feedback-form label{font-size:13px;font-weight:700}.review-lens-feedback-form textarea{border:1px solid #d4d4d4;border-radius:8px;box-sizing:border-box;font:inherit;min-height:96px;padding:10px;resize:vertical;width:100%}.review-lens-actions{display:flex;gap:8px;justify-content:flex-end}.review-lens-comments{display:grid;gap:8px}.review-lens-comment{border:1px solid #e5e5e5;border-radius:8px;display:grid;gap:6px;padding:10px}.review-lens-comment--selected{border-color:#2563eb}.review-lens-comment span{color:#525252;font-size:12px}.review-lens-marker{background:#f97316;border:2px solid #ffffff;border-radius:999px;box-shadow:0 8px 20px #0f172a3d;cursor:pointer;height:18px;position:absolute;transform:translate(-50%,-50%);width:18px}.review-lens-marker--selected{background:#2563eb}
+.review-lens-root{color:#171717;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;top:0;right:0;bottom:0;left:0;pointer-events:none;position:fixed;z-index:2147483647}.review-lens-highlight{background:#f9731633;box-shadow:0 0 0 9999px #0f172a14;box-sizing:border-box;pointer-events:none;position:fixed}.review-lens-highlight--locked{box-shadow:0 0 0 9999px #0f172a1f}.review-lens-highlight__border,.review-lens-highlight__padding,.review-lens-highlight__content{box-sizing:border-box;position:absolute}.review-lens-highlight__border{border:2px solid #facc15;background:#facc1538}.review-lens-highlight__padding{border:2px solid #22c55e;background:#22c55e38}.review-lens-highlight__content{border:2px solid #2563eb;background:#2563eb29}.review-lens-highlight--locked .review-lens-highlight__content{border-color:#f97316}.review-lens-highlight__label{background:#171717;border-radius:4px;color:#fff;font-size:11px;font-weight:700;left:0;line-height:1;padding:4px 6px;position:absolute;top:-24px;white-space:nowrap}.review-lens-panel{background:#fafafa;border:1px solid #d4d4d4;border-radius:8px;box-shadow:0 24px 70px #0f172a38;box-sizing:border-box;display:flex;flex-direction:column;height:min(680px,calc(100vh - 32px));min-height:min(520px,calc(100vh - 32px));overflow:hidden;padding:16px;pointer-events:auto;position:fixed;width:min(380px,calc(100vw - 32px))}.review-lens-panel--top-left{left:16px;top:16px}.review-lens-panel--top-right{right:16px;top:16px}.review-lens-panel--bottom-left{bottom:16px;left:16px}.review-lens-panel--bottom-right{bottom:16px;right:16px}.review-lens-panel__header{flex:0 0 auto;align-items:flex-start;display:flex;gap:16px;justify-content:space-between;margin-bottom:12px}.review-lens-panel__body{display:flex;flex:1 1 auto;flex-direction:column;gap:16px;min-height:0;overflow:hidden}.review-lens-panel h2,.review-lens-panel h3,.review-lens-panel p{margin:0}.review-lens-panel h2{font-size:18px;line-height:1.25}.review-lens-panel h3{font-size:14px;margin-top:18px}.review-lens-kicker{color:#525252;font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.review-lens-panel button{background:#171717;border:1px solid #171717;border-radius:6px;color:#fff;cursor:pointer;font:inherit;font-size:13px;min-height:32px;padding:6px 10px;transition:transform .14s cubic-bezier(.23,1,.32,1)}.review-lens-panel button:active{transform:scale(.97)}.review-lens-panel button:disabled{cursor:not-allowed;opacity:.45}.review-lens-mode-switch{background:#eee;border:1px solid #d4d4d4;border-radius:7px;display:grid;flex:0 0 auto;gap:2px;grid-template-columns:repeat(2,minmax(0,1fr));padding:2px}.review-lens-mode-switch button{background:transparent;border:0;color:#525252;min-height:30px}.review-lens-mode-switch button[aria-selected=true]{background:#fff;box-shadow:0 1px 4px #0f172a1f;color:#171717}.review-lens-mode-switch span{color:#737373;font-size:11px}.review-lens-metrics{border:1px solid #e5e5e5;border-radius:8px;display:grid;gap:0;margin:0;overflow:hidden}.review-lens-metrics div{display:grid;grid-template-columns:96px minmax(0,1fr)}.review-lens-metrics dt,.review-lens-metrics dd{border-bottom:1px solid #e5e5e5;font-size:11px;margin:0;min-width:0;padding:6px 8px}.review-lens-metrics dt{background:#f5f5f5;color:#525252;font-weight:700}.review-lens-metrics dd{overflow-wrap:anywhere}.review-lens-inspection{display:grid;flex:0 0 auto;gap:16px}.review-lens-review-pane{display:flex;flex:1 1 auto;flex-direction:column;gap:16px;min-height:0}.review-lens-feedback-form{display:grid;flex:1 1 auto;gap:8px;grid-template-rows:auto minmax(96px,1fr) auto auto;margin-top:0;min-height:0}.review-lens-feedback-form label{font-size:13px;font-weight:700}.review-lens-feedback-form textarea{border:1px solid #d4d4d4;border-radius:8px;box-sizing:border-box;flex:1 1 auto;font:inherit;min-height:96px;padding:10px;resize:vertical;width:100%}.review-lens-feedback-form__hint{color:#737373;font-size:12px;line-height:1.4}.review-lens-feedback-form__hint kbd{background:#f5f5f5;border:1px solid #d4d4d4;border-radius:4px;color:#404040;font-family:inherit;font-size:11px;padding:1px 4px}.review-lens-actions{display:flex;gap:8px;justify-content:flex-end}.review-lens-comments{border-top:1px solid #e5e5e5;display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:0;padding-top:12px}.review-lens-comments__header{align-items:center;color:#171717;display:flex;gap:8px;justify-content:space-between}.review-lens-comments__header h3{font-size:13px;margin:0}.review-lens-comments__header span{align-items:center;background:#e5e5e5;border-radius:999px;color:#404040;display:inline-flex;font-size:11px;justify-content:center;min-width:22px;padding:2px 7px}.review-lens-comments__list{align-content:start;display:grid;gap:10px;min-height:0;overflow:auto;padding-right:4px}.review-lens-comment{background:linear-gradient(180deg,#fffffffa,#fafafafa);border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 1px 2px #0f172a0a;cursor:pointer;display:grid;gap:10px;padding:12px;position:relative;text-align:left}.review-lens-comment:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.review-lens-comment--selected{background:#eff6ff;border-color:#2563eb;box-shadow:inset 3px 0 #2563eb,0 8px 18px #2563eb1f}.review-lens-comment__content{display:grid;gap:6px}.review-lens-comment__content p{color:#171717;font-size:14px;line-height:1.35}.review-lens-comment__content span{color:#525252;font-size:11px;line-height:1}.review-lens-comment__actions{display:flex;justify-content:flex-end}.review-lens-comment__actions button{background:transparent;border-color:#d4d4d4;color:#404040;min-height:28px;padding:4px 10px}.review-lens-comment__actions button:hover{background:#171717;border-color:#171717;color:#fff}.review-lens-marker{background:#f97316;border:2px solid #ffffff;border-radius:999px;box-shadow:0 8px 20px #0f172a3d;cursor:pointer;height:18px;pointer-events:auto;position:fixed;transform:translate(-50%,-50%);width:18px}.review-lens-marker--selected{background:#2563eb}

package/dist/types.d.ts

@@ -4,8 +4,20 @@ export type ReviewLensRole = "designer" | "developer" | "admin";
 export type ReviewLensPermission = "create" | "read" | "resolve";
 export type CssSnapshot = {
     margin: string;
+    marginTop: string;
+    marginRight: string;
+    marginBottom: string;
+    marginLeft: string;
     padding: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
     border: string;
+    borderTopWidth: string;
+    borderRightWidth: string;
+    borderBottomWidth: string;
+    borderLeftWidth: string;
     fontFamily: string;
     fontSize: string;
     lineHeight: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "review-lens-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React overlay for UX review feedback backed by Google Sheets.",
   "type": "module",
   "main": "./dist/review-lens-react.umd.cjs",