review-lens-react 0.1.0 → 0.1.1

package/dist/review-lens-react.js

@@ -1,93 +1,93 @@
-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 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 = [
   "https://www.googleapis.com/auth/spreadsheets",
   "https://www.googleapis.com/auth/userinfo.email"
-].join(" "), _ = "https://www.googleapis.com/oauth2/v3/userinfo";
+].join(" "), Q = "https://www.googleapis.com/oauth2/v3/userinfo";
 function X(e) {
-  const n = e.feedbackSheetName ?? "Feedback", t = e.usersSheetName ?? "Users";
-  let r, o;
-  async function s() {
-    return r ?? (r = Z(e.googleClientId)), r;
+  const o = e.feedbackSheetName ?? "Feedback", t = e.usersSheetName ?? "Users";
+  let n, r;
+  async function i() {
+    return n ?? (n = te(e.googleClientId)), n;
   }
-  async function v(i, l) {
-    const a = await s(), d = await fetch(
-      `https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${i}`,
+  async function m(d, c) {
+    const s = await i(), l = await fetch(
+      `https://sheets.googleapis.com/v4/spreadsheets/${e.spreadsheetId}${d}`,
       {
-        ...l,
+        ...c,
         headers: {
-          Authorization: `Bearer ${a}`,
+          Authorization: `Bearer ${s}`,
           "Content-Type": "application/json",
-          ...l == null ? void 0 : l.headers
+          ...c == null ? void 0 : c.headers
         }
       }
     );
-    if (!d.ok)
-      throw new Error(`Google Sheets request failed with ${d.status}`);
-    return d.json();
+    if (!l.ok)
+      throw new Error(`Google Sheets request failed with ${l.status}`);
+    return l.json();
   }
-  async function b(i) {
-    return (await v(
-      `/values/${encodeURIComponent(i)}`
+  async function v(d) {
+    return (await m(
+      `/values/${encodeURIComponent(d)}`
     )).values ?? [];
   }
   return {
     async getCurrentUser() {
-      if (!o) {
-        const i = await s(), l = await fetch(_, {
-          headers: { Authorization: `Bearer ${i}` }
+      if (!r) {
+        const d = await i(), c = await fetch(Q, {
+          headers: { Authorization: `Bearer ${d}` }
         });
-        if (!l.ok)
-          throw new Error(`Google userinfo request failed with ${l.status}`);
-        o = (await l.json()).email;
+        if (!c.ok)
+          throw new Error(`Google userinfo request failed with ${c.status}`);
+        r = (await c.json()).email;
       }
-      if (!o)
+      if (!r)
         throw new Error("Google account did not return an email address");
-      return { email: o };
+      return { email: r };
     },
-    async getPermissions(i) {
-      const [{ email: l }, a] = await Promise.all([this.getCurrentUser(), b(t)]), d = U(a), y = l.toLowerCase(), u = d.find(
+    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()) === y && f.active !== "false" && (!f.projectKey || f.projectKey === i);
+          return ((p = f.email) == null ? void 0 : p.toLowerCase()) === k && f.active !== "false" && (!f.projectKey || f.projectKey === d);
         }
       );
-      return V((u == null ? void 0 : u.role) ?? "designer");
+      return ee((h == null ? void 0 : h.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(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 createFeedback(i) {
-      const l = (/* @__PURE__ */ new Date()).toISOString(), a = {
-        ...i,
+    async createFeedback(d) {
+      const c = (/* @__PURE__ */ new Date()).toISOString(), s = {
+        ...d,
         id: crypto.randomUUID(),
         status: "open",
-        createdAt: l,
-        updatedAt: l
+        createdAt: c,
+        updatedAt: c
       };
-      return await v(`/values/${encodeURIComponent(n)}:append?valueInputOption=RAW`, {
+      return await m(`/values/${encodeURIComponent(o)}:append?valueInputOption=RAW`, {
         method: "POST",
-        body: JSON.stringify({ values: [Q(a)] })
-      }), a;
+        body: JSON.stringify({ values: [V(s)] })
+      }), s;
     },
-    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(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`,
         {
           method: "PUT",
-          body: JSON.stringify({ values: [g] })
+          body: JSON.stringify({ values: [b] })
         }
       );
-      const $ = T(M(d, g));
-      if (!$)
-        throw new Error(`Feedback ${i} could not be parsed after resolving`);
-      return $;
+      const I = j(O(l, b));
+      if (!I)
+        throw new Error(`Feedback ${d} could not be parsed after resolving`);
+      return I;
     }
   };
 }
@@ -109,7 +109,7 @@ const Y = [
   "resolvedAt",
   "resolvedBy"
 ];
-function Q(e) {
+function V(e) {
   return [
     e.id,
     e.projectKey,
@@ -129,14 +129,14 @@ function Q(e) {
     e.resolvedBy ?? ""
   ];
 }
-function U(e) {
-  const [n, ...t] = e;
-  return n ? t.map((r) => M(n, r)) : [];
+function W(e) {
+  const [o, ...t] = e;
+  return o ? t.map((n) => O(o, n)) : [];
 }
-function M(e, n) {
-  return Object.fromEntries(e.map((t, r) => [t, n[r] ?? ""]));
+function O(e, o) {
+  return Object.fromEntries(e.map((t, n) => [t, o[n] ?? ""]));
 }
-function T(e) {
+function j(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: K(e.elementFingerprintJson, {
       tagName: "",
       width: 0,
       height: 0
     }),
-    cssSnapshot: O(e.cssSnapshotJson, {
-      margin: "",
-      padding: "",
-      border: "",
-      fontFamily: "",
-      fontSize: "",
-      lineHeight: "",
-      color: "",
-      backgroundColor: "",
-      width: 0,
-      height: 0
-    }),
+    cssSnapshot: Z(e.cssSnapshotJson),
     comment: e.comment,
     status: e.status === "resolved" ? "resolved" : "open",
     authorEmail: e.authorEmail,
@@ -171,175 +160,202 @@ function T(e) {
     resolvedBy: e.resolvedBy || void 0
   } : null;
 }
-function O(e, n) {
+function K(e, o) {
   try {
-    return e ? JSON.parse(e) : n;
+    return e ? JSON.parse(e) : o;
   } catch {
-    return n;
+    return o;
   }
 }
-function V(e) {
+function Z(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 Z(e) {
-  return await ee(), new Promise((n, t) => {
-    var o;
-    const r = (o = window.google) == null ? void 0 : o.accounts.oauth2.initTokenClient({
+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({
       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: D,
+      callback: (i) => {
+        if (i.error || !i.access_token) {
+          t(new Error(i.error ?? "Google OAuth did not return an access token"));
           return;
         }
-        n(s.access_token);
+        o(i.access_token);
       }
     });
-    r == null || r.requestAccessToken({ prompt: "" });
+    n == null || n.requestAccessToken({ prompt: "" });
   });
 }
-function ee() {
+function oe() {
   var e;
-  return (e = window.google) != null && e.accounts.oauth2 ? Promise.resolve() : new Promise((n, t) => {
-    const r = document.querySelector(
+  return (e = window.google) != null && e.accounts.oauth2 ? Promise.resolve() : new Promise((o, t) => {
+    const n = document.querySelector(
       'script[src="https://accounts.google.com/gsi/client"]'
     );
-    if (r) {
-      r.addEventListener("load", () => n(), { once: !0 }), r.addEventListener("error", () => t(new Error("Google Identity failed to load")), {
+    if (n) {
+      n.addEventListener("load", () => o(), { once: !0 }), n.addEventListener("error", () => t(new Error("Google Identity failed to load")), {
         once: !0
       });
       return;
     }
-    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);
+    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 te(e) {
+function ne(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 _ = 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"),
     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 () => {
+  }), [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({
       projectKey: e.projectKey,
       contentId: e.contentId,
-      normalizedPath: o
+      normalizedPath: r
     });
-    a(p);
-  }, [t, e.contentId, e.projectKey, o]);
-  R(() => {
+    s(p);
+  }, [t, e.contentId, e.projectKey, r]);
+  P(() => {
     let p = !0;
     async function w() {
-      const [m, g] = await Promise.all([
+      const [g, b] = await Promise.all([
         t.getCurrentUser(),
         t.getPermissions(e.projectKey)
       ]);
-      p && (v(m), i(g), await d());
+      p && (m(g), d(b), await l());
     }
     return w(), () => {
       p = !1;
     };
-  }, [t, e.projectKey, d]);
-  const y = L(
+  }, [t, e.projectKey, l]);
+  const k = F(
     async (p) => {
       const w = await t.createFeedback(p);
-      return a((m) => [w, ...m]), w;
+      return s((g) => [w, ...g]), w;
     },
     [t]
-  ), u = L(
+  ), h = F(
     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)
+      const w = await t.resolveFeedback(p, (i == null ? void 0 : i.email) ?? "");
+      return s(
+        (g) => g.map((b) => b.id === p ? w : b)
       ), w;
     },
-    [t, s == null ? void 0 : s.email]
-  ), f = x(
+    [t, i == null ? void 0 : i.email]
+  ), f = $(
     () => ({
       config: e,
       adapter: t,
-      currentUser: s,
-      permissions: b,
-      feedback: l,
-      normalizedPath: o,
-      refreshFeedback: d,
-      createFeedback: y,
-      resolveFeedback: u
+      currentUser: i,
+      permissions: v,
+      feedback: c,
+      normalizedPath: r,
+      refreshFeedback: l,
+      createFeedback: k,
+      resolveFeedback: h
     }),
     [
       t,
       e,
-      y,
-      s,
+      k,
+      i,
+      c,
+      r,
+      v,
       l,
-      o,
-      b,
-      d,
-      u
+      h
     ]
   );
-  return /* @__PURE__ */ c(J.Provider, { value: f, children: n });
+  return /* @__PURE__ */ a(_.Provider, { value: f, children: o });
 }
-function ne() {
-  const e = H(J);
+function re() {
+  const e = H(_);
   if (!e)
     throw new Error("useReviewLens must be used inside ReviewLensProvider");
   return e;
 }
-function z(e, n) {
+function U(e, o) {
   if (!e)
-    throw new Error(`review-lens-react requires config.${n} when no adapter is provided`);
+    throw new Error(`review-lens-react requires config.${o} when no adapter is provided`);
   return e;
 }
-const re = [
+const ie = [
   "data-review-id",
   "data-testid",
   "data-test-id",
   "aria-label",
   "name"
 ];
-function B(e) {
-  const n = e.getBoundingClientRect(), t = oe(e);
+function M(e) {
+  const o = e.getBoundingClientRect(), t = se(e);
   return {
     selector: t.selector,
     selectorStrategy: t.strategy,
-    fingerprint: ae(e, n),
-    cssSnapshot: ie(e, n),
-    rect: n
+    fingerprint: de(e, o),
+    cssSnapshot: ce(e, o),
+    rect: o
   };
 }
-function oe(e) {
-  for (const n of re) {
-    const t = e.getAttribute(n);
+function se(e) {
+  for (const o of ie) {
+    const t = e.getAttribute(o);
     if (t)
       return {
-        selector: `[${n}="${K(t)}"]`,
+        selector: `[${o}="${z(t)}"]`,
         strategy: "stable-attribute"
       };
   }
-  return e.id ? { selector: `#${K(e.id)}`, strategy: "stable-attribute" } : { selector: se(e), strategy: "css-path" };
+  return e.id ? { selector: `#${z(e.id)}`, strategy: "stable-attribute" } : { selector: ae(e), strategy: "css-path" };
 }
-function se(e) {
-  const n = [];
+function ae(e) {
+  const o = [];
   let t = e;
   for (; t && t.nodeType === Node.ELEMENT_NODE && t !== document.body; ) {
-    const r = t.parentElement, o = t.tagName.toLowerCase();
-    if (!r) {
-      n.unshift(o);
+    const n = t.parentElement, r = t.tagName.toLowerCase();
+    if (!n) {
+      o.unshift(r);
       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 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;
   }
-  return n.join(" > ");
+  return o.join(" > ");
 }
-function ae(e, n) {
+function de(e, o) {
   var t;
   return {
     tagName: e.tagName.toLowerCase(),
@@ -347,203 +363,259 @@ function ae(e, n) {
     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)
+    width: Math.round(o.width),
+    height: Math.round(o.height)
   };
 }
-function ie(e, n) {
+function ce(e, o) {
   const t = window.getComputedStyle(e);
   return {
-    margin: j(t.marginTop, t.marginRight, t.marginBottom, t.marginLeft),
-    padding: j(
+    margin: A(t.marginTop, t.marginRight, t.marginBottom, t.marginLeft),
+    marginTop: t.marginTop,
+    marginRight: t.marginRight,
+    marginBottom: t.marginBottom,
+    marginLeft: t.marginLeft,
+    padding: A(
       t.paddingTop,
       t.paddingRight,
       t.paddingBottom,
       t.paddingLeft
     ),
-    border: j(
+    paddingTop: t.paddingTop,
+    paddingRight: t.paddingRight,
+    paddingBottom: t.paddingBottom,
+    paddingLeft: t.paddingLeft,
+    border: A(
       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(n.width),
-    height: Math.round(n.height)
+    width: Math.round(o.width),
+    height: Math.round(o.height)
   };
 }
-function j(e, n, t, r) {
-  return e === n && n === t && t === r ? e : `${e} ${n} ${t} ${r}`;
+function A(e, o, t, n) {
+  return e === o && o === t && t === n ? e : `${e} ${o} ${t} ${n}`;
 }
-function K(e) {
+function z(e) {
   return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&");
 }
-function fe({
+function be({
   open: e,
-  onOpenChange: n,
+  onOpenChange: o,
   placement: t = "top-right",
-  showResolved: r = !1
+  showResolved: n = !1
 }) {
   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]
+    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]
   );
-  R(() => {
-    e || (y(void 0), f(void 0), w(""));
+  P(() => {
+    e || (k(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;
+  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;
   }, []);
-  if (R(() => {
-    if (!e || u)
+  if (P(() => {
+    if (!e || h)
       return;
-    function h(S) {
-      const F = A(S);
-      F && y(B(F));
+    function u(C) {
+      const B = x(C);
+      k(B ? M(B) : void 0);
     }
-    function I(S) {
-      const F = A(S);
-      F && (S.preventDefault(), S.stopPropagation(), f(B(F)));
+    function E(C) {
+      const B = x(C);
+      B && (C.preventDefault(), C.stopPropagation(), f(M(B)));
     }
-    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", u, !0), window.addEventListener("click", E, !0), () => {
+      window.removeEventListener("mousemove", u, !0), window.removeEventListener("click", E, !0);
     };
-  }, [A, u, e]), !e)
+  }, [x, h, e]), !e)
     return null;
-  const P = u ?? d;
-  async function G() {
-    !u || !p.trim() || !s || !C || (await l({
-      projectKey: o.projectKey,
-      contentId: o.contentId,
-      normalizedPath: b,
-      originalUrl: o.currentUrl ?? window.location.href,
-      selector: u.selector,
-      selectorStrategy: u.selectorStrategy,
-      elementFingerprint: u.fingerprint,
-      cssSnapshot: u.cssSnapshot,
+  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: s.email
+      authorEmail: i.email
     }), w(""), f(void 0));
   }
-  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__ */ S("div", { className: "review-lens-root", "data-review-lens-ui": !0, children: [
+    T ? /* @__PURE__ */ a(le, { target: T, locked: !!h }) : null,
+    /* @__PURE__ */ a(
+      he,
       {
-        feedback: N,
-        selectedFeedback: m,
-        onSelect: g
+        feedback: R,
+        selectedFeedback: g,
+        onSelect: b
       }
     ),
-    /* @__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" })
+    /* @__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" })
         ] }),
-        /* @__PURE__ */ c("button", { type: "button", onClick: () => n == null ? void 0 : n(!1), children: "Close" })
+        /* @__PURE__ */ a("button", { type: "button", onClick: () => o == null ? void 0 : o(!1), children: "Close" })
       ] }),
-      P ? /* @__PURE__ */ c(de, { target: P }) : /* @__PURE__ */ c("p", { children: "Move over the app to inspect." }),
-      u ? /* @__PURE__ */ k(
+      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: (h) => {
-            h.preventDefault(), G();
+          onSubmit: (u) => {
+            u.preventDefault(), J();
           },
           children: [
-            /* @__PURE__ */ c("label", { htmlFor: "review-lens-comment", children: "Feedback" }),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ a("label", { htmlFor: "review-lens-comment", children: "Feedback" }),
+            /* @__PURE__ */ a(
               "textarea",
               {
                 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."
+                disabled: !L,
+                onChange: (u) => w(u.target.value),
+                placeholder: L ? "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" })
+            /* @__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__ */ 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(
+      /* @__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: (m == null ? void 0 : m.id) === h.id ? "review-lens-comment review-lens-comment--selected" : "review-lens-comment",
+            className: (g == null ? void 0 : g.id) === u.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
+              /* @__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
             ]
           },
-          h.id
+          u.id
         ))
       ] })
     ] })
   ] });
 }
-function ce({ target: e, locked: n }) {
-  return /* @__PURE__ */ c(
+function le({ target: e, locked: o }) {
+  const t = me(e);
+  return /* @__PURE__ */ S(
     "div",
     {
-      className: n ? "review-lens-highlight review-lens-highlight--locked" : "review-lens-highlight",
+      className: o ? "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__ */ a(
+          "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__ */ a(
+          "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__ */ a(
+          "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__ */ S("div", { className: "review-lens-highlight__label", children: [
+          Math.round(e.rect.width),
+          " x ",
+          Math.round(e.rect.height)
+        ] })
+      ]
     }
   );
 }
-function le({
+function he({
   feedback: e,
-  selectedFeedback: n,
+  selectedFeedback: o,
   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(
+  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: (n == null ? void 0 : n.id) === r.id ? "review-lens-marker review-lens-marker--selected" : "review-lens-marker",
+        className: (o == null ? void 0 : o.id) === n.id ? "review-lens-marker review-lens-marker--selected" : "review-lens-marker",
         style: {
-          top: s.top + window.scrollY,
-          left: s.left + window.scrollX + s.width
+          top: i.top,
+          left: i.left + i.width
         },
-        onClick: () => t(r),
-        "aria-label": `Open feedback from ${r.authorEmail}`
+        onClick: () => t(n),
+        "aria-label": `Open feedback from ${n.authorEmail}`
       },
-      r.id
+      n.id
     ) : null;
   }) });
 }
-function de({ target: e }) {
-  const n = [
+function ue({ target: e }) {
+  const o = [
     ["Selector", e.selector],
     ["Size", `${e.cssSnapshot.width} x ${e.cssSnapshot.height}`],
     ["Margin", e.cssSnapshot.margin],
@@ -554,23 +626,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__ */ 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 })
   ] }, t)) });
 }
-function ue(e) {
+function pe(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)
+  }, 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)
+  }, r = {
+    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)
+  };
+  return {
+    margin: i,
+    border: r,
+    padding: m,
+    content: v
+  };
+}
+function y(e) {
+  const o = Number.parseFloat(e || "0");
+  return Number.isFinite(o) ? o : 0;
+}
 export {
-  fe as ReviewLensOverlay,
-  me as ReviewLensProvider,
-  B as buildElementTarget,
+  be as ReviewLensOverlay,
+  we as ReviewLensProvider,
+  M as buildElementTarget,
   X as createGoogleSheetsAdapter,
-  te as normalizeReviewUrl,
-  ne as useReviewLens
+  ne as normalizeReviewUrl,
+  re 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(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"})}));

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;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}

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.1",
   "description": "React overlay for UX review feedback backed by Google Sheets.",
   "type": "module",
   "main": "./dist/review-lens-react.umd.cjs",