review-lens-react 0.1.1 → 0.1.2

package/dist/review-lens-react.js

@@ -1,97 +1,97 @@
-import { jsx as a, jsxs as S, Fragment as G } from "react/jsx-runtime";
-import { createContext as q, useMemo as $, useState as N, useCallback as F, useEffect as P, useContext as H } from "react";
-const D = [
+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(" "), Q = "https://www.googleapis.com/oauth2/v3/userinfo";
-function X(e) {
-  const o = e.feedbackSheetName ?? "Feedback", t = e.usersSheetName ?? "Users";
-  let n, r;
-  async function i() {
-    return n ?? (n = te(e.googleClientId)), n;
+].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 c() {
+    return r ?? (r = ce(e.googleClientId)), r;
   }
-  async function m(d, c) {
-    const s = await i(), l = await fetch(
-      `https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${d}`,
+  async function h(a, d) {
+    const l = await c(), u = await fetch(
+      `https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${a}`,
       {
-        ...c,
+        ...d,
         headers: {
-          Authorization: `Bearer ${s}`,
+          Authorization: `Bearer ${l}`,
           "Content-Type": "application/json",
-          ...c == null ? void 0 : c.headers
+          ...d == null ? void 0 : d.headers
         }
       }
     );
-    if (!l.ok)
-      throw new Error(`Google Sheets request failed with ${l.status}`);
-    return l.json();
+    if (!u.ok)
+      throw new Error(`Google Sheets request failed with ${u.status}`);
+    return u.json();
   }
-  async function v(d) {
-    return (await m(
-      `/values/${encodeURIComponent(d)}`
+  async function w(a) {
+    return (await h(
+      `/values/${encodeURIComponent(a)}`
     )).values ?? [];
   }
   return {
     async getCurrentUser() {
-      if (!r) {
-        const d = await i(), c = await fetch(Q, {
-          headers: { Authorization: `Bearer ${d}` }
+      if (!o) {
+        const a = await c(), d = await fetch(oe, {
+          headers: { Authorization: `Bearer ${a}` }
         });
-        if (!c.ok)
-          throw new Error(`Google userinfo request failed with ${c.status}`);
-        r = (await c.json()).email;
+        if (!d.ok)
+          throw new Error(`Google userinfo request failed with ${d.status}`);
+        o = (await d.json()).email;
       }
-      if (!r)
+      if (!o)
         throw new Error("Google account did not return an email address");
-      return { email: r };
+      return { email: o };
     },
-    async getPermissions(d) {
-      const [{ email: c }, s] = await Promise.all([this.getCurrentUser(), v(t)]), l = W(s), k = c.toLowerCase(), h = l.find(
-        (f) => {
-          var p;
-          return ((p = f.email) == null ? void 0 : p.toLowerCase()) === k && f.active !== "false" && (!f.projectKey || f.projectKey === d);
+    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 ee((h == null ? void 0 : h.role) ?? "designer");
+      return de((p == null ? void 0 : p.role) ?? "designer");
     },
-    async listFeedback(d) {
-      return W(await v(o)).map(j).filter((s) => s !== null).filter(
-        (s) => s.projectKey === d.projectKey && s.contentId === d.contentId && s.normalizedPath === d.normalizedPath
-      ).sort((s, l) => l.createdAt.localeCompare(s.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(d) {
-      const c = (/* @__PURE__ */ new Date()).toISOString(), s = {
-        ...d,
+    async createFeedback(a) {
+      const d = (/* @__PURE__ */ new Date()).toISOString(), l = {
+        ...a,
         id: crypto.randomUUID(),
         status: "open",
-        createdAt: c,
-        updatedAt: c
+        createdAt: d,
+        updatedAt: d
       };
-      return await m(`/values/${encodeURIComponent(o)}:append?valueInputOption=RAW`, {
+      return await h(`/values/${encodeURIComponent(n)}:append?valueInputOption=RAW`, {
         method: "POST",
-        body: JSON.stringify({ values: [V(s)] })
-      }), s;
+        body: JSON.stringify({ values: [se(l)] })
+      }), l;
     },
-    async resolveFeedback(d, c) {
-      const s = await v(o), l = s[0] ?? Y, k = l.indexOf("id"), h = l.indexOf("status"), f = l.indexOf("updatedAt"), p = l.indexOf("resolvedAt"), w = l.indexOf("resolvedBy"), g = s.findIndex((R, x) => x > 0 && R[k] === d);
-      if (g < 1)
-        throw new Error(`Feedback ${d} was not found`);
-      const b = [...s[g]], L = (/* @__PURE__ */ new Date()).toISOString();
-      b[h] = "resolved", b[f] = L, b[p] = L, b[w] = c, await m(
-        `/values/${encodeURIComponent(o)}!A${g + 1}:Q${g + 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: [b] })
+          body: JSON.stringify({ values: [S] })
         }
       );
-      const I = j(O(l, b));
-      if (!I)
-        throw new Error(`Feedback ${d} could not be parsed after resolving`);
-      return I;
+      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 V(e) {
+function se(e) {
   return [
     e.id,
     e.projectKey,
@@ -129,14 +129,14 @@ function V(e) {
     e.resolvedBy ?? ""
   ];
 }
-function W(e) {
-  const [o, ...t] = e;
-  return o ? t.map((n) => O(o, n)) : [];
+function z(e) {
+  const [n, ...t] = e;
+  return n ? t.map((r) => q(n, r)) : [];
 }
-function O(e, o) {
-  return Object.fromEntries(e.map((t, n) => [t, o[n] ?? ""]));
+function q(e, n) {
+  return Object.fromEntries(e.map((t, r) => [t, n[r] ?? ""]));
 }
-function j(e) {
+function K(e) {
   return e.id ? {
     id: e.id,
     projectKey: e.projectKey,
@@ -145,12 +145,12 @@ function j(e) {
     originalUrl: e.originalUrl,
     selector: e.selector,
     selectorStrategy: e.selectorStrategy === "stable-attribute" ? "stable-attribute" : "css-path",
-    elementFingerprint: K(e.elementFingerprintJson, {
+    elementFingerprint: G(e.elementFingerprintJson, {
       tagName: "",
       width: 0,
       height: 0
     }),
-    cssSnapshot: Z(e.cssSnapshotJson),
+    cssSnapshot: ae(e.cssSnapshotJson),
     comment: e.comment,
     status: e.status === "resolved" ? "resolved" : "open",
     authorEmail: e.authorEmail,
@@ -160,202 +160,202 @@ function j(e) {
     resolvedBy: e.resolvedBy || void 0
   } : null;
 }
-function K(e, o) {
+function G(e, n) {
   try {
-    return e ? JSON.parse(e) : o;
+    return e ? JSON.parse(e) : n;
   } catch {
-    return o;
+    return n;
   }
 }
-function Z(e) {
-  const o = K(e, {});
+function ae(e) {
+  const n = G(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
+    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 ee(e) {
+function de(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 n = (r = window.google) == null ? void 0 : r.accounts.oauth2.initTokenClient({
+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: D,
-      callback: (i) => {
-        if (i.error || !i.access_token) {
-          t(new Error(i.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;
         }
-        o(i.access_token);
+        n(c.access_token);
       }
     });
-    n == null || n.requestAccessToken({ prompt: "" });
+    r == null || r.requestAccessToken({ prompt: "" });
   });
 }
-function oe() {
+function le() {
   var e;
-  return (e = window.google) != null && e.accounts.oauth2 ? Promise.resolve() : new Promise((o, t) => {
-    const n = document.querySelector(
+  return (e = window.google) != null && e.accounts.oauth2 ? Promise.resolve() : new Promise((n, t) => {
+    const r = document.querySelector(
       'script[src="https://accounts.google.com/gsi/client"]'
     );
-    if (n) {
-      n.addEventListener("load", () => o(), { once: !0 }), n.addEventListener("error", () => t(new Error("Google Identity failed to load")), {
+    if (r) {
+      r.addEventListener("load", () => n(), { once: !0 }), r.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);
+    const o = document.createElement("script");
+    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 ne(e) {
+function he(e) {
   return new URL(e, window.location.href).pathname.replace(/\/+$/, "") || "/";
 }
-const _ = q(null);
-function we({ config: e, children: o }) {
-  const t = $(() => e.adapter ? e.adapter : X({
-    googleClientId: U(e.googleClientId, "googleClientId"),
-    spreadsheetId: U(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]), n = e.currentUrl ?? window.location.href, r = (e.normalizeUrl ?? ne)(n), [i, m] = N(), [v, d] = N([]), [c, s] = N([]), l = F(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: r
+      normalizedPath: o
     });
-    s(p);
-  }, [t, e.contentId, e.projectKey, r]);
-  P(() => {
-    let p = !0;
-    async function w() {
-      const [g, b] = await Promise.all([
+    l(m);
+  }, [t, e.contentId, e.projectKey, o]);
+  T(() => {
+    let m = !0;
+    async function k() {
+      const [v, S] = await Promise.all([
         t.getCurrentUser(),
         t.getPermissions(e.projectKey)
       ]);
-      p && (m(g), d(b), await l());
+      m && (h(v), a(S), await u());
     }
-    return w(), () => {
-      p = !1;
+    return k(), () => {
+      m = !1;
     };
-  }, [t, e.projectKey, l]);
-  const k = F(
-    async (p) => {
-      const w = await t.createFeedback(p);
-      return s((g) => [w, ...g]), w;
+  }, [t, e.projectKey, u]);
+  const y = P(
+    async (m) => {
+      const k = await t.createFeedback(m);
+      return l((v) => [k, ...v]), k;
     },
     [t]
-  ), h = F(
-    async (p) => {
-      const w = await t.resolveFeedback(p, (i == null ? void 0 : i.email) ?? "");
-      return s(
-        (g) => g.map((b) => b.id === p ? w : b)
-      ), 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, i == null ? void 0 : i.email]
-  ), f = $(
+    [t, c == null ? void 0 : c.email]
+  ), b = M(
     () => ({
       config: e,
       adapter: t,
-      currentUser: i,
-      permissions: v,
-      feedback: c,
-      normalizedPath: r,
-      refreshFeedback: l,
-      createFeedback: k,
-      resolveFeedback: h
+      currentUser: c,
+      permissions: w,
+      feedback: d,
+      normalizedPath: o,
+      refreshFeedback: u,
+      createFeedback: y,
+      resolveFeedback: p
     }),
     [
       t,
       e,
-      k,
-      i,
+      y,
       c,
-      r,
-      v,
-      l,
-      h
+      d,
+      o,
+      w,
+      u,
+      p
     ]
   );
-  return /* @__PURE__ */ a(_.Provider, { value: f, children: o });
+  return /* @__PURE__ */ i(J.Provider, { value: b, children: n });
 }
-function re() {
-  const e = H(_);
+function ue() {
+  const e = Z(J);
   if (!e)
     throw new Error("useReviewLens must be used inside ReviewLensProvider");
   return e;
 }
-function U(e, o) {
+function D(e, n) {
   if (!e)
-    throw new Error(`review-lens-react requires config.${o} when no adapter is provided`);
+    throw new Error(`review-lens-react requires config.${n} when no adapter is provided`);
   return e;
 }
-const ie = [
+const pe = [
   "data-review-id",
   "data-testid",
   "data-test-id",
   "aria-label",
   "name"
 ];
-function M(e) {
-  const o = e.getBoundingClientRect(), t = se(e);
+function _(e) {
+  const n = e.getBoundingClientRect(), t = me(e);
   return {
     selector: t.selector,
     selectorStrategy: t.strategy,
-    fingerprint: de(e, o),
-    cssSnapshot: ce(e, o),
-    rect: o
+    fingerprint: fe(e, n),
+    cssSnapshot: we(e, n),
+    rect: n
   };
 }
-function se(e) {
-  for (const o of ie) {
-    const t = e.getAttribute(o);
+function me(e) {
+  for (const n of pe) {
+    const t = e.getAttribute(n);
     if (t)
       return {
-        selector: `[${o}="${z(t)}"]`,
+        selector: `[${n}="${O(t)}"]`,
         strategy: "stable-attribute"
       };
   }
-  return e.id ? { selector: `#${z(e.id)}`, strategy: "stable-attribute" } : { selector: ae(e), strategy: "css-path" };
+  return e.id ? { selector: `#${O(e.id)}`, strategy: "stable-attribute" } : { selector: ge(e), strategy: "css-path" };
 }
-function ae(e) {
-  const o = [];
+function ge(e) {
+  const n = [];
   let t = e;
   for (; t && t.nodeType === Node.ELEMENT_NODE && t !== document.body; ) {
-    const n = t.parentElement, r = t.tagName.toLowerCase();
-    if (!n) {
-      o.unshift(r);
+    const r = t.parentElement, o = t.tagName.toLowerCase();
+    if (!r) {
+      n.unshift(o);
       break;
     }
-    const i = t.tagName, m = Array.from(n.children).filter(
-      (d) => d.tagName === i
-    ), v = m.indexOf(t) + 1;
-    o.unshift(m.length > 1 ? `${r}:nth-of-type(${v})` : r), t = n;
+    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 o.join(" > ");
+  return n.join(" > ");
 }
-function de(e, o) {
+function fe(e, n) {
   var t;
   return {
     tagName: e.tagName.toLowerCase(),
@@ -363,19 +363,19 @@ function de(e, o) {
     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)
+    width: Math.round(n.width),
+    height: Math.round(n.height)
   };
 }
-function ce(e, o) {
+function we(e, n) {
   const t = window.getComputedStyle(e);
   return {
-    margin: A(t.marginTop, t.marginRight, t.marginBottom, t.marginLeft),
+    margin: j(t.marginTop, t.marginRight, t.marginBottom, t.marginLeft),
     marginTop: t.marginTop,
     marginRight: t.marginRight,
     marginBottom: t.marginBottom,
     marginLeft: t.marginLeft,
-    padding: A(
+    padding: j(
       t.paddingTop,
       t.paddingRight,
       t.paddingBottom,
@@ -385,7 +385,7 @@ function ce(e, o) {
     paddingRight: t.paddingRight,
     paddingBottom: t.paddingBottom,
     paddingLeft: t.paddingLeft,
-    border: A(
+    border: j(
       t.borderTopWidth,
       t.borderRightWidth,
       t.borderBottomWidth,
@@ -400,145 +400,223 @@ function ce(e, o) {
     lineHeight: t.lineHeight,
     color: t.color,
     backgroundColor: t.backgroundColor,
-    width: Math.round(o.width),
-    height: Math.round(o.height)
+    width: Math.round(n.width),
+    height: Math.round(n.height)
   };
 }
-function A(e, o, t, n) {
-  return e === o && o === t && t === n ? e : `${e} ${o} ${t} ${n}`;
+function j(e, n, t, r) {
+  return e === n && n === t && t === r ? e : `${e} ${n} ${t} ${r}`;
 }
-function z(e) {
+function O(e) {
   return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&");
 }
-function be({
+function Le({
   open: e,
-  onOpenChange: o,
+  onOpenChange: n,
   placement: t = "top-right",
-  showResolved: n = !1
+  showResolved: r = !1
 }) {
   const {
-    config: r,
-    currentUser: i,
-    feedback: m,
-    normalizedPath: v,
-    permissions: d,
-    createFeedback: c,
-    resolveFeedback: s
-  } = re(), [l, k] = N(), [h, f] = N(), [p, w] = N(""), [g, b] = N(), L = d.includes("create"), I = d.includes("resolve"), R = $(
-    () => m.filter((u) => n || u.status !== "resolved"),
-    [m, n]
+    config: o,
+    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]
   );
-  P(() => {
-    e || (k(void 0), f(void 0), w(""));
-  }, [e]);
-  const x = F((u) => {
-    const E = u.target instanceof Element ? u.target : null;
-    if (E)
-      return E.closest("[data-review-lens-ui]") ? null : E;
-    const C = document.elementFromPoint(u.clientX, u.clientY);
-    return !C || C.closest("[data-review-lens-ui]") ? null : C;
+  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 (P(() => {
-    if (!e || h)
+  if (T(() => {
+    if (!e || !N)
       return;
-    function u(C) {
-      const B = x(C);
-      k(B ? M(B) : void 0);
+    function s(L) {
+      const A = $(L);
+      y(A ? _(A) : void 0);
     }
-    function E(C) {
-      const B = x(C);
-      B && (C.preventDefault(), C.stopPropagation(), f(M(B)));
+    function g(L) {
+      const A = $(L);
+      A && (L.preventDefault(), L.stopPropagation(), b(_(A)), C("review"));
     }
-    return window.addEventListener("mousemove", u, !0), window.addEventListener("click", E, !0), () => {
-      window.removeEventListener("mousemove", u, !0), window.removeEventListener("click", E, !0);
+    return window.addEventListener("mousemove", s, !0), window.addEventListener("click", g, !0), () => {
+      window.removeEventListener("mousemove", s, !0), window.removeEventListener("click", g, !0);
     };
-  }, [x, h, e]), !e)
+  }, [N, $, p, e]), !e)
     return null;
-  const T = h ?? l;
-  async function J() {
-    !h || !p.trim() || !i || !L || (await c({
-      projectKey: r.projectKey,
-      contentId: r.contentId,
-      normalizedPath: v,
-      originalUrl: r.currentUrl ?? window.location.href,
-      selector: h.selector,
-      selectorStrategy: h.selectorStrategy,
-      elementFingerprint: h.fingerprint,
-      cssSnapshot: h.cssSnapshot,
-      comment: p.trim(),
-      authorEmail: i.email
-    }), w(""), f(void 0));
+  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));
+    }));
   }
-  return /* @__PURE__ */ S("div", { className: "review-lens-root", "data-review-lens-ui": !0, children: [
-    T ? /* @__PURE__ */ a(le, { target: T, locked: !!h }) : null,
-    /* @__PURE__ */ a(
-      he,
+  async function U() {
+    !p || !m.trim() || !c || !x || (await d({
+      projectKey: o.projectKey,
+      contentId: o.contentId,
+      normalizedPath: w,
+      originalUrl: o.currentUrl ?? window.location.href,
+      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__ */ 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: R,
-        selectedFeedback: g,
-        onSelect: b
+        feedback: B,
+        selectedFeedback: v,
+        onSelect: W
       }
-    ),
-    /* @__PURE__ */ S("aside", { className: `review-lens-panel review-lens-panel--${t}`, "data-review-lens-ui": !0, children: [
-      /* @__PURE__ */ S("header", { className: "review-lens-panel__header", children: [
-        /* @__PURE__ */ S("div", { children: [
-          /* @__PURE__ */ a("p", { className: "review-lens-kicker", children: "Review Lens" }),
-          /* @__PURE__ */ a("h2", { children: h ? "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__ */ a("button", { type: "button", onClick: () => o == null ? void 0 : o(!1), children: "Close" })
+        /* @__PURE__ */ i("button", { type: "button", onClick: () => n == null ? void 0 : n(!1), children: "Close" })
       ] }),
-      T ? /* @__PURE__ */ a(ue, { target: T }) : /* @__PURE__ */ a("p", { children: "Move over the app to inspect." }),
-      h ? /* @__PURE__ */ S(
-        "form",
-        {
-          className: "review-lens-feedback-form",
-          onSubmit: (u) => {
-            u.preventDefault(), J();
-          },
-          children: [
-            /* @__PURE__ */ a("label", { htmlFor: "review-lens-comment", children: "Feedback" }),
-            /* @__PURE__ */ a(
-              "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: !L,
-                onChange: (u) => w(u.target.value),
-                placeholder: L ? "Describe the UX issue..." : "You do not have permission to comment."
-              }
-            ),
-            /* @__PURE__ */ S("div", { className: "review-lens-actions", children: [
-              /* @__PURE__ */ a("button", { type: "button", onClick: () => f(void 0), children: "Unlock" }),
-              /* @__PURE__ */ a("button", { type: "submit", disabled: !p.trim() || !L, children: "Save feedback" })
-            ] })
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ S("section", { className: "review-lens-comments", children: [
-        /* @__PURE__ */ a("h3", { children: "Page feedback" }),
-        R.length === 0 ? /* @__PURE__ */ a("p", { children: "No feedback for this view." }) : null,
-        R.map((u) => /* @__PURE__ */ S(
-          "article",
-          {
-            className: (g == null ? void 0 : g.id) === u.id ? "review-lens-comment review-lens-comment--selected" : "review-lens-comment",
-            children: [
-              /* @__PURE__ */ a("p", { children: u.comment }),
-              /* @__PURE__ */ a("span", { children: u.authorEmail }),
-              u.status === "open" && I ? /* @__PURE__ */ a("button", { type: "button", onClick: () => void s(u.id), children: "Resolve" }) : null
-            ]
-          },
-          u.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 le({ target: e, locked: o }) {
-  const t = me(e);
-  return /* @__PURE__ */ S(
+function ve({ target: e, locked: n }) {
+  const t = Se(e);
+  return /* @__PURE__ */ f(
     "div",
     {
-      className: o ? "review-lens-highlight review-lens-highlight--locked" : "review-lens-highlight",
+      className: n ? "review-lens-highlight review-lens-highlight--locked" : "review-lens-highlight",
       style: {
         top: t.margin.top,
         left: t.margin.left,
@@ -546,7 +624,7 @@ function le({ target: e, locked: o }) {
         height: t.margin.height
       },
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "div",
           {
             className: "review-lens-highlight__border",
@@ -558,7 +636,7 @@ function le({ target: e, locked: o }) {
             }
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "div",
           {
             className: "review-lens-highlight__padding",
@@ -570,7 +648,7 @@ function le({ target: e, locked: o }) {
             }
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "div",
           {
             className: "review-lens-highlight__content",
@@ -582,7 +660,7 @@ function le({ target: e, locked: o }) {
             }
           }
         ),
-        /* @__PURE__ */ S("div", { className: "review-lens-highlight__label", children: [
+        /* @__PURE__ */ f("div", { className: "review-lens-highlight__label", children: [
           Math.round(e.rect.width),
           " x ",
           Math.round(e.rect.height)
@@ -591,31 +669,52 @@ function le({ target: e, locked: o }) {
     }
   );
 }
-function he({
+function be({
   feedback: e,
-  selectedFeedback: o,
+  selectedFeedback: n,
   onSelect: t
 }) {
-  return /* @__PURE__ */ a(G, { children: e.map((n) => {
-    const r = pe(n.selector), i = r == null ? void 0 : r.getBoundingClientRect();
-    return i ? /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        className: (o == null ? void 0 : o.id) === n.id ? "review-lens-marker review-lens-marker--selected" : "review-lens-marker",
-        style: {
-          top: i.top,
-          left: i.left + i.width
-        },
-        onClick: () => t(n),
-        "aria-label": `Open feedback from ${n.authorEmail}`
-      },
-      n.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 ue({ target: e }) {
-  const o = [
+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 ke({ target: e }) {
+  const n = [
     ["Selector", e.selector],
     ["Size", `${e.cssSnapshot.width} x ${e.cssSnapshot.height}`],
     ["Margin", e.cssSnapshot.margin],
@@ -626,71 +725,71 @@ function ue({ target: e }) {
     ["Color", e.cssSnapshot.color],
     ["Background", e.cssSnapshot.backgroundColor]
   ];
-  return /* @__PURE__ */ a("dl", { className: "review-lens-metrics", children: o.map(([t, n]) => /* @__PURE__ */ S("div", { children: [
-    /* @__PURE__ */ a("dt", { children: t }),
-    /* @__PURE__ */ a("dd", { children: n })
+  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 pe(e) {
+function H(e) {
   try {
     return document.querySelector(e);
   } catch {
     return null;
   }
 }
-function me(e) {
-  const o = {
-    top: y(e.cssSnapshot.marginTop),
-    right: y(e.cssSnapshot.marginRight),
-    bottom: y(e.cssSnapshot.marginBottom),
-    left: y(e.cssSnapshot.marginLeft)
+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: y(e.cssSnapshot.borderTopWidth),
-    right: y(e.cssSnapshot.borderRightWidth),
-    bottom: y(e.cssSnapshot.borderBottomWidth),
-    left: y(e.cssSnapshot.borderLeftWidth)
-  }, n = {
-    top: y(e.cssSnapshot.paddingTop),
-    right: y(e.cssSnapshot.paddingRight),
-    bottom: y(e.cssSnapshot.paddingBottom),
-    left: y(e.cssSnapshot.paddingLeft)
+    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)
-  }, i = {
-    top: r.top - o.top,
-    left: r.left - o.left,
-    width: r.width + o.left + o.right,
-    height: r.height + o.top + o.bottom
-  }, m = {
-    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)
-  }, v = {
-    top: m.top + n.top,
-    left: m.left + n.left,
-    width: Math.max(m.width - n.left - n.right, 0),
-    height: Math.max(m.height - n.top - n.bottom, 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: i,
-    border: r,
-    padding: m,
-    content: v
+    margin: c,
+    border: o,
+    padding: h,
+    content: w
   };
 }
-function y(e) {
-  const o = Number.parseFloat(e || "0");
-  return Number.isFinite(o) ? o : 0;
+function E(e) {
+  const n = Number.parseFloat(e || "0");
+  return Number.isFinite(n) ? n : 0;
 }
 export {
-  be as ReviewLensOverlay,
-  we as ReviewLensProvider,
-  M as buildElementTarget,
-  X as createGoogleSheetsAdapter,
-  ne as normalizeReviewUrl,
-  re 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,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):(w=typeof globalThis<"u"?globalThis:w||self,n(w.ReviewLensReact={},w.jsxRuntime,w.React))})(this,(function(w,n,p){"use strict";const G=["https://www.googleapis.com/auth/spreadsheets","https://www.googleapis.com/auth/userinfo.email"].join(" "),J="https://www.googleapis.com/oauth2/v3/userinfo";function $(e){const o=e.feedbackSheetName??"Feedback",t=e.usersSheetName??"Users";let r,s;async function i(){return r??(r=X(e.googleClientId)),r}async function m(d,c){const a=await i(),l=await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${d}`,{...c,headers:{Authorization:`Bearer ${a}`,"Content-Type":"application/json",...c==null?void 0:c.headers}});if(!l.ok)throw new Error(`Google Sheets request failed with ${l.status}`);return l.json()}async function k(d){return(await m(`/values/${encodeURIComponent(d)}`)).values??[]}return{async getCurrentUser(){if(!s){const d=await i(),c=await fetch(J,{headers:{Authorization:`Bearer ${d}`}});if(!c.ok)throw new Error(`Google userinfo request failed with ${c.status}`);s=(await c.json()).email}if(!s)throw new Error("Google account did not return an email address");return{email:s}},async getPermissions(d){const[{email:c},a]=await Promise.all([this.getCurrentUser(),k(t)]),l=j(a),C=c.toLowerCase(),h=l.find(b=>{var g;return((g=b.email)==null?void 0:g.toLowerCase())===C&&b.active!=="false"&&(!b.projectKey||b.projectKey===d)});return Q((h==null?void 0:h.role)??"designer")},async listFeedback(d){return j(await k(o)).map(M).filter(a=>a!==null).filter(a=>a.projectKey===d.projectKey&&a.contentId===d.contentId&&a.normalizedPath===d.normalizedPath).sort((a,l)=>l.createdAt.localeCompare(a.createdAt))},async createFeedback(d){const c=new Date().toISOString(),a={...d,id:crypto.randomUUID(),status:"open",createdAt:c,updatedAt:c};return await m(`/values/${encodeURIComponent(o)}:append?valueInputOption=RAW`,{method:"POST",body:JSON.stringify({values:[H(a)]})}),a},async resolveFeedback(d,c){const a=await k(o),l=a[0]??R,C=l.indexOf("id"),h=l.indexOf("status"),b=l.indexOf("updatedAt"),g=l.indexOf("resolvedAt"),v=l.indexOf("resolvedBy"),f=a.findIndex((T,B)=>B>0&&T[C]===d);if(f<1)throw new Error(`Feedback ${d} was not found`);const y=[...a[f]],E=new Date().toISOString();y[h]="resolved",y[b]=E,y[g]=E,y[v]=c,await m(`/values/${encodeURIComponent(o)}!A${f+1}:Q${f+1}?valueInputOption=RAW`,{method:"PUT",body:JSON.stringify({values:[y]})});const F=M(W(l,y));if(!F)throw new Error(`Feedback ${d} could not be parsed after resolving`);return F}}}const R=["id","projectKey","contentId","normalizedPath","originalUrl","selector","selectorStrategy","elementFingerprintJson","cssSnapshotJson","comment","status","authorEmail","createdAt","updatedAt","resolvedAt","resolvedBy"];function H(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 j(e){const[o,...t]=e;return o?t.map(r=>W(o,r)):[]}function W(e,o){return Object.fromEntries(e.map((t,r)=>[t,o[r]??""]))}function M(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:U(e.elementFingerprintJson,{tagName:"",width:0,height:0}),cssSnapshot:D(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 U(e,o){try{return e?JSON.parse(e):o}catch{return o}}function D(e){const o=U(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 Q(e){return e==="admin"?["create","read","resolve"]:e==="developer"?["read","resolve"]:["create","read"]}async function X(e){return await Y(),new Promise((o,t)=>{var s;const r=(s=window.google)==null?void 0:s.accounts.oauth2.initTokenClient({client_id:e,scope:G,callback:i=>{if(i.error||!i.access_token){t(new Error(i.error??"Google OAuth did not return an access token"));return}o(i.access_token)}});r==null||r.requestAccessToken({prompt:""})})}function Y(){var e;return(e=window.google)!=null&&e.accounts.oauth2?Promise.resolve():new Promise((o,t)=>{const r=document.querySelector('script[src="https://accounts.google.com/gsi/client"]');if(r){r.addEventListener("load",()=>o(),{once:!0}),r.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=()=>o(),s.onerror=()=>t(new Error("Google Identity failed to load")),document.head.append(s)})}function O(e){return new URL(e,window.location.href).pathname.replace(/\/+$/,"")||"/"}const z=p.createContext(null);function V({config:e,children:o}){const t=p.useMemo(()=>e.adapter?e.adapter:$({googleClientId:_(e.googleClientId,"googleClientId"),spreadsheetId:_(e.spreadsheetId,"spreadsheetId"),feedbackSheetName:e.sheetName??"Feedback"}),[e.adapter,e.googleClientId,e.sheetName,e.spreadsheetId]),r=e.currentUrl??window.location.href,s=(e.normalizeUrl??O)(r),[i,m]=p.useState(),[k,d]=p.useState([]),[c,a]=p.useState([]),l=p.useCallback(async()=>{const g=await t.listFeedback({projectKey:e.projectKey,contentId:e.contentId,normalizedPath:s});a(g)},[t,e.contentId,e.projectKey,s]);p.useEffect(()=>{let g=!0;async function v(){const[f,y]=await Promise.all([t.getCurrentUser(),t.getPermissions(e.projectKey)]);g&&(m(f),d(y),await l())}return v(),()=>{g=!1}},[t,e.projectKey,l]);const C=p.useCallback(async g=>{const v=await t.createFeedback(g);return a(f=>[v,...f]),v},[t]),h=p.useCallback(async g=>{const v=await t.resolveFeedback(g,(i==null?void 0:i.email)??"");return a(f=>f.map(y=>y.id===g?v:y)),v},[t,i==null?void 0:i.email]),b=p.useMemo(()=>({config:e,adapter:t,currentUser:i,permissions:k,feedback:c,normalizedPath:s,refreshFeedback:l,createFeedback:C,resolveFeedback:h}),[t,e,C,i,c,s,k,l,h]);return n.jsx(z.Provider,{value:b,children:o})}function K(){const e=p.useContext(z);if(!e)throw new Error("useReviewLens must be used inside ReviewLensProvider");return e}function _(e,o){if(!e)throw new Error(`review-lens-react requires config.${o} when no adapter is provided`);return e}const Z=["data-review-id","data-testid","data-test-id","aria-label","name"];function A(e){const o=e.getBoundingClientRect(),t=ee(e);return{selector:t.selector,selectorStrategy:t.strategy,fingerprint:oe(e,o),cssSnapshot:ne(e,o),rect:o}}function ee(e){for(const o of Z){const t=e.getAttribute(o);if(t)return{selector:`[${o}="${q(t)}"]`,strategy:"stable-attribute"}}return e.id?{selector:`#${q(e.id)}`,strategy:"stable-attribute"}:{selector:te(e),strategy:"css-path"}}function te(e){const o=[];let t=e;for(;t&&t.nodeType===Node.ELEMENT_NODE&&t!==document.body;){const r=t.parentElement,s=t.tagName.toLowerCase();if(!r){o.unshift(s);break}const i=t.tagName,m=Array.from(r.children).filter(d=>d.tagName===i),k=m.indexOf(t)+1;o.unshift(m.length>1?`${s}:nth-of-type(${k})`:s),t=r}return o.join(" > ")}function oe(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 ne(e,o){const t=window.getComputedStyle(e);return{margin:P(t.marginTop,t.marginRight,t.marginBottom,t.marginLeft),marginTop:t.marginTop,marginRight:t.marginRight,marginBottom:t.marginBottom,marginLeft:t.marginLeft,padding:P(t.paddingTop,t.paddingRight,t.paddingBottom,t.paddingLeft),paddingTop:t.paddingTop,paddingRight:t.paddingRight,paddingBottom:t.paddingBottom,paddingLeft:t.paddingLeft,border:P(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 P(e,o,t,r){return e===o&&o===t&&t===r?e:`${e} ${o} ${t} ${r}`}function q(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/["\\]/g,"\\$&")}function re({open:e,onOpenChange:o,placement:t="top-right",showResolved:r=!1}){const{config:s,currentUser:i,feedback:m,normalizedPath:k,permissions:d,createFeedback:c,resolveFeedback:a}=K(),[l,C]=p.useState(),[h,b]=p.useState(),[g,v]=p.useState(""),[f,y]=p.useState(),E=d.includes("create"),F=d.includes("resolve"),T=p.useMemo(()=>m.filter(u=>r||u.status!=="resolved"),[m,r]);p.useEffect(()=>{e||(C(void 0),b(void 0),v(""))},[e]);const B=p.useCallback(u=>{const N=u.target instanceof Element?u.target:null;if(N)return N.closest("[data-review-lens-ui]")?null:N;const L=document.elementFromPoint(u.clientX,u.clientY);return!L||L.closest("[data-review-lens-ui]")?null:L},[]);if(p.useEffect(()=>{if(!e||h)return;function u(L){const I=B(L);C(I?A(I):void 0)}function N(L){const I=B(L);I&&(L.preventDefault(),L.stopPropagation(),b(A(I)))}return window.addEventListener("mousemove",u,!0),window.addEventListener("click",N,!0),()=>{window.removeEventListener("mousemove",u,!0),window.removeEventListener("click",N,!0)}},[B,h,e]),!e)return null;const x=h??l;async function le(){!h||!g.trim()||!i||!E||(await c({projectKey:s.projectKey,contentId:s.contentId,normalizedPath:k,originalUrl:s.currentUrl??window.location.href,selector:h.selector,selectorStrategy:h.selectorStrategy,elementFingerprint:h.fingerprint,cssSnapshot:h.cssSnapshot,comment:g.trim(),authorEmail:i.email}),v(""),b(void 0))}return n.jsxs("div",{className:"review-lens-root","data-review-lens-ui":!0,children:[x?n.jsx(se,{target:x,locked:!!h}):null,n.jsx(ie,{feedback:T,selectedFeedback:f,onSelect:y}),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:h?"Element locked":"Inspecting"})]}),n.jsx("button",{type:"button",onClick:()=>o==null?void 0:o(!1),children:"Close"})]}),x?n.jsx(ae,{target:x}):n.jsx("p",{children:"Move over the app to inspect."}),h?n.jsxs("form",{className:"review-lens-feedback-form",onSubmit:u=>{u.preventDefault(),le()},children:[n.jsx("label",{htmlFor:"review-lens-comment",children:"Feedback"}),n.jsx("textarea",{id:"review-lens-comment",value:g,disabled:!E,onChange:u=>v(u.target.value),placeholder:E?"Describe the UX issue...":"You do not have permission to comment."}),n.jsxs("div",{className:"review-lens-actions",children:[n.jsx("button",{type:"button",onClick:()=>b(void 0),children:"Unlock"}),n.jsx("button",{type:"submit",disabled:!g.trim()||!E,children:"Save feedback"})]})]}):null,n.jsxs("section",{className:"review-lens-comments",children:[n.jsx("h3",{children:"Page feedback"}),T.length===0?n.jsx("p",{children:"No feedback for this view."}):null,T.map(u=>n.jsxs("article",{className:(f==null?void 0:f.id)===u.id?"review-lens-comment review-lens-comment--selected":"review-lens-comment",children:[n.jsx("p",{children:u.comment}),n.jsx("span",{children:u.authorEmail}),u.status==="open"&&F?n.jsx("button",{type:"button",onClick:()=>void a(u.id),children:"Resolve"}):null]},u.id))]})]})]})}function se({target:e,locked:o}){const t=ce(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 ie({feedback:e,selectedFeedback:o,onSelect:t}){return n.jsx(n.Fragment,{children:e.map(r=>{const s=de(r.selector),i=s==null?void 0:s.getBoundingClientRect();return i?n.jsx("button",{type:"button",className:(o==null?void 0:o.id)===r.id?"review-lens-marker review-lens-marker--selected":"review-lens-marker",style:{top:i.top,left:i.left+i.width},onClick:()=>t(r),"aria-label":`Open feedback from ${r.authorEmail}`},r.id):null})})}function ae({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,r])=>n.jsxs("div",{children:[n.jsx("dt",{children:t}),n.jsx("dd",{children:r})]},t))})}function de(e){try{return document.querySelector(e)}catch{return null}}function ce(e){const o={top:S(e.cssSnapshot.marginTop),right:S(e.cssSnapshot.marginRight),bottom:S(e.cssSnapshot.marginBottom),left:S(e.cssSnapshot.marginLeft)},t={top:S(e.cssSnapshot.borderTopWidth),right:S(e.cssSnapshot.borderRightWidth),bottom:S(e.cssSnapshot.borderBottomWidth),left:S(e.cssSnapshot.borderLeftWidth)},r={top:S(e.cssSnapshot.paddingTop),right:S(e.cssSnapshot.paddingRight),bottom:S(e.cssSnapshot.paddingBottom),left:S(e.cssSnapshot.paddingLeft)},s={top:e.rect.top,left:e.rect.left,width:Math.max(e.rect.width,0),height:Math.max(e.rect.height,0)},i={top:s.top-o.top,left:s.left-o.left,width:s.width+o.left+o.right,height:s.height+o.top+o.bottom},m={top:s.top+t.top,left:s.left+t.left,width:Math.max(s.width-t.left-t.right,0),height:Math.max(s.height-t.top-t.bottom,0)},k={top:m.top+r.top,left:m.left+r.left,width:Math.max(m.width-r.left-r.right,0),height:Math.max(m.height-r.top-r.bottom,0)};return{margin:i,border:s,padding:m,content:k}}function S(e){const o=Number.parseFloat(e||"0");return Number.isFinite(o)?o:0}w.ReviewLensOverlay=re,w.ReviewLensProvider=V,w.buildElementTarget=A,w.createGoogleSheetsAdapter=$,w.normalizeReviewUrl=O,w.useReviewLens=K,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;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;max-height:calc(100vh - 32px);overflow:auto;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{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;pointer-events:auto;position:fixed;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/package.json

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