react-linear-feedback 0.3.0 → 0.4.0

package/README.md

@@ -4,7 +4,7 @@
 
 **A drop-in feedback widget that turns a drawn box + note into a Linear issue with an annotated screenshot.** Use it as a React component, or embed it on **any site** — Framer, Webflow, plain HTML — with a single script tag.
 
-A user opens the widget, **drags a box** over the page, picks a type (**Bug / Improvement**), writes a note — and it captures a screenshot and files a Linear issue. Self-contained styling, no design system required.
+A user opens the widget, **drags a box** over the page, picks a type (**Bug / Improvement**), writes a note — and it captures a screenshot and files a Linear issue. Self-contained styling, no design system required. While a region is being selected or the composer is open, the page behind is frozen — scrolling is locked and clicks outside the composer are blocked; Esc cancels.
 
 <!-- Demo: record a short GIF and drop it here → ![demo](docs/demo.gif) -->
 > _Draw a box anywhere → type a note → it lands in Linear with the annotated screenshot and page context._
@@ -147,7 +147,7 @@ No npm, no build step, no React on the page — the embed bundle (~23KB gz, serv
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/react-linear-feedback@0.3.0/dist/embed/linear-feedback.js"
+  src="https://cdn.jsdelivr.net/npm/react-linear-feedback@0.4.0/dist/embed/linear-feedback.js"
   data-endpoint="https://your-app.example.com/api/feedback"
   data-brand-color="#7f56d9"
   data-token="your-embed-token"
@@ -186,7 +186,7 @@ Options that aren't expressible as data attributes (like custom `types`) go thro
     ],
   };
 </script>
-<script src="https://cdn.jsdelivr.net/npm/react-linear-feedback@0.3.0/dist/embed/linear-feedback.js" data-endpoint="..." defer></script>
+<script src="https://cdn.jsdelivr.net/npm/react-linear-feedback@0.4.0/dist/embed/linear-feedback.js" data-endpoint="..." defer></script>
 ```
 
 ```js
@@ -338,6 +338,7 @@ Submissions never throw in the UI — failures are logged to the browser console
 - **CORS**: cross-origin pages (script-tag embeds) need their origin in `allowedOrigins`, and the browser must reach the endpoint with both `OPTIONS` and `POST`.
 - `runtime = "nodejs"` is set on the Next.js route (Edge has no `Buffer`).
 - On a **Vite SPA**, `POST /api/feedback` 404s under `vite dev` unless you add the [`linearFeedback` Vite plugin](#vite-spa) (or run `vercel dev`). In production it's served by your deployed function.
+- **`FUNCTION_INVOCATION_FAILED` on Vercel but local dev works?** Your function file itself may not parse — the Vite plugin serves the dev endpoint without ever loading it, so syntax errors there only surface when deployed. Check it directly: `node -e "import('./api/feedback.mjs')"`. (One real-world culprit: a `*/` sequence inside a block comment — e.g. a `**/*` glob — terminates the comment early.)
 - The expected Linear **labels exist** (otherwise the issue is created without a label, with a warning).
 
 ## License

package/dist/embed/index.js

@@ -2215,6 +2215,8 @@ var CSS2 = `
 
 .lfb-rect { position: absolute; border: 2px solid var(--lfb-rect); background: rgba(255,0,85,0.12); border-radius: 3px; pointer-events: none; }
 
+.lfb-shield { position: fixed; inset: 0; pointer-events: auto; cursor: default; }
+
 .lfb-anchor { position: absolute; pointer-events: auto; }
 
 .lfb-card {
@@ -2229,6 +2231,7 @@ var CSS2 = `
   line-height: 1.4;
 }
 .lfb-composer { position: absolute; top: 100%; left: 0; margin-top: 8px; width: 320px; max-width: calc(100vw - 32px); }
+.lfb-composer--above { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }
 
 .lfb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .lfb-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lfb-fg-tertiary); }
@@ -2314,6 +2317,8 @@ function ensureStyles() {
 // src/react/feedback-widget.tsx
 var MIN_DRAG = 12;
 var DEFAULT_BOX = { width: 220, height: 130 };
+var COMPOSER_WIDTH = 320;
+var COMPOSER_EST_HEIGHT = 320;
 var DEFAULT_TYPES = [
   { id: "bug", label: "Bug", color: "#ef4444", icon: "bug" },
   { id: "improvement", label: "Improvement", color: "#22c55e", icon: "improvement" }
@@ -2342,6 +2347,11 @@ function FeedbackWidget({
   const [drag, setDrag] = d2(null);
   const textareaRef = A2(null);
   const nameInputRef = A2(null);
+  const nameEditRef = A2(null);
+  const submittingRef = A2(false);
+  submittingRef.current = submitting;
+  const editingNameRef = A2(false);
+  editingNameRef.current = editingName;
   y2(() => {
     ensureStyles();
     try {
@@ -2351,12 +2361,19 @@ function FeedbackWidget({
     }
   }, [nameStorageKey]);
   y2(() => {
-    if (mode.kind !== "drawing" && mode.kind !== "naming") return;
+    if (mode.kind === "idle") return;
     const onKey = (e3) => {
-      if (e3.key === "Escape") {
-        setMode({ kind: "idle" });
-        setDrag(null);
+      if (e3.key !== "Escape" || submittingRef.current) return;
+      if (editingNameRef.current) {
+        setEditingName(false);
+        return;
       }
+      setMode({ kind: "idle" });
+      setDrag(null);
+      setText("");
+      setError(null);
+      setSubmitting(false);
+      setEditingName(false);
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
@@ -2371,6 +2388,22 @@ function FeedbackWidget({
       return () => window.clearTimeout(t3);
     }
   }, [mode.kind]);
+  y2(() => {
+    if (editingName) nameEditRef.current?.focus();
+  }, [editingName]);
+  y2(() => {
+    if (mode.kind !== "drawing" && mode.kind !== "composing") return;
+    const el = document.documentElement;
+    const prevOverflow = el.style.overflow;
+    const prevPaddingRight = el.style.paddingRight;
+    const scrollbar = window.innerWidth - el.clientWidth;
+    el.style.overflow = "hidden";
+    if (scrollbar > 0) el.style.paddingRight = `${scrollbar}px`;
+    return () => {
+      el.style.overflow = prevOverflow;
+      el.style.paddingRight = prevPaddingRight;
+    };
+  }, [mode.kind]);
   const persistName = (value) => {
     try {
       window.localStorage.setItem(nameStorageKey, value);
@@ -2424,12 +2457,17 @@ function FeedbackWidget({
       vy = end.y - vh / 2;
     }
     const rect = { x: Math.max(0, vx + window.scrollX), y: Math.max(0, vy + window.scrollY), width: vw, height: vh };
+    const fitsBelow = vy + vh + COMPOSER_EST_HEIGHT <= window.innerHeight;
+    const fitsAbove = vy >= COMPOSER_EST_HEIGHT;
+    const placement = !fitsBelow && fitsAbove ? "above" : "below";
+    const maxAnchorX = window.scrollX + Math.max(16, window.innerWidth - COMPOSER_WIDTH - 16);
+    const anchorX = Math.min(rect.x, maxAnchorX);
     setDrag(null);
     setText("");
     setIssueType(types[0]?.id ?? "bug");
     setError(null);
     setEditingName(false);
-    setMode({ kind: "composing", rect });
+    setMode({ kind: "composing", rect, placement, anchorX });
   };
   const cancelComposer = () => {
     setMode({ kind: "idle" });
@@ -2476,93 +2514,102 @@ function FeedbackWidget({
   } : null;
   return /* @__PURE__ */ u3("div", { className: "lfb-root", style: rootStyle, children: [
     /* @__PURE__ */ u3("div", { ...overlayProps, className: "lfb-doc-layer", children: mode.kind === "composing" && /* @__PURE__ */ u3(S, { children: [
+      /* @__PURE__ */ u3("div", { className: "lfb-shield", "aria-hidden": "true" }),
       /* @__PURE__ */ u3("div", { className: "lfb-rect", style: { left: mode.rect.x, top: mode.rect.y, width: mode.rect.width, height: mode.rect.height } }),
-      /* @__PURE__ */ u3("div", { className: "lfb-anchor", style: { left: mode.rect.x, top: mode.rect.y + mode.rect.height }, children: /* @__PURE__ */ u3("form", { className: "lfb-card lfb-composer", onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ u3("div", { className: "lfb-row", children: [
-          /* @__PURE__ */ u3("span", { className: "lfb-eyebrow", children: "New feedback" }),
-          /* @__PURE__ */ u3("button", { type: "button", className: "lfb-iconbtn", "aria-label": "Cancel", onClick: cancelComposer, children: /* @__PURE__ */ u3(XIcon, {}) })
-        ] }),
-        /* @__PURE__ */ u3("div", { style: { marginTop: 12 }, children: [
-          /* @__PURE__ */ u3("span", { className: "lfb-field-label", children: "Issue type" }),
-          /* @__PURE__ */ u3("div", { className: "lfb-types", children: types.map((t3) => {
-            const Icon = TYPE_ICONS[t3.icon ?? "dot"];
-            return /* @__PURE__ */ u3(
-              "button",
+      /* @__PURE__ */ u3(
+        "div",
+        {
+          className: "lfb-anchor",
+          style: { left: mode.anchorX, top: mode.placement === "below" ? mode.rect.y + mode.rect.height : mode.rect.y },
+          children: /* @__PURE__ */ u3("form", { className: `lfb-card lfb-composer${mode.placement === "above" ? " lfb-composer--above" : ""}`, onSubmit: handleSubmit, children: [
+            /* @__PURE__ */ u3("div", { className: "lfb-row", children: [
+              /* @__PURE__ */ u3("span", { className: "lfb-eyebrow", children: "New feedback" }),
+              /* @__PURE__ */ u3("button", { type: "button", className: "lfb-iconbtn", "aria-label": "Cancel", onClick: cancelComposer, children: /* @__PURE__ */ u3(XIcon, {}) })
+            ] }),
+            /* @__PURE__ */ u3("div", { style: { marginTop: 12 }, children: [
+              /* @__PURE__ */ u3("span", { className: "lfb-field-label", children: "Issue type" }),
+              /* @__PURE__ */ u3("div", { className: "lfb-types", children: types.map((t3) => {
+                const Icon = TYPE_ICONS[t3.icon ?? "dot"];
+                return /* @__PURE__ */ u3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lfb-type",
+                    "aria-pressed": issueType === t3.id,
+                    onClick: () => setIssueType(t3.id),
+                    children: [
+                      /* @__PURE__ */ u3("span", { className: "lfb-swatch", style: { background: t3.color }, children: /* @__PURE__ */ u3(Icon, { size: 14 }) }),
+                      t3.label
+                    ]
+                  },
+                  t3.id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ u3(
+              "textarea",
               {
-                type: "button",
-                className: "lfb-type",
-                "aria-pressed": issueType === t3.id,
-                onClick: () => setIssueType(t3.id),
-                children: [
-                  /* @__PURE__ */ u3("span", { className: "lfb-swatch", style: { background: t3.color }, children: /* @__PURE__ */ u3(Icon, { size: 14 }) }),
-                  t3.label
-                ]
-              },
-              t3.id
-            );
-          }) })
-        ] }),
-        /* @__PURE__ */ u3(
-          "textarea",
-          {
-            ref: textareaRef,
-            className: "lfb-textarea",
-            placeholder: "What's on your mind?",
-            value: text,
-            onChange: (e3) => setText(e3.target.value),
-            maxLength: 5e3,
-            required: true,
-            disabled: submitting,
-            rows: 3,
-            onKeyDown: (e3) => {
-              if (e3.key === "Enter" && (e3.metaKey || e3.ctrlKey)) {
-                e3.preventDefault();
-                handleSubmit(e3);
+                ref: textareaRef,
+                className: "lfb-textarea",
+                placeholder: "What's on your mind?",
+                value: text,
+                onChange: (e3) => setText(e3.target.value),
+                maxLength: 5e3,
+                required: true,
+                disabled: submitting,
+                rows: 3,
+                onKeyDown: (e3) => {
+                  if (e3.key === "Enter" && (e3.metaKey || e3.ctrlKey)) {
+                    e3.preventDefault();
+                    handleSubmit(e3);
+                  }
+                }
               }
-            }
-          }
-        ),
-        editingName ? /* @__PURE__ */ u3(
-          "input",
-          {
-            className: "lfb-input",
-            type: "text",
-            value: name,
-            autoFocus: true,
-            maxLength: 80,
-            onChange: (e3) => setName(e3.target.value),
-            onBlur: () => {
-              const t3 = name.trim();
-              if (t3) persistName(t3);
-              setEditingName(false);
-            },
-            onKeyDown: (e3) => {
-              if (e3.key === "Enter") {
-                e3.preventDefault();
-                e3.target.blur();
-              }
-              if (e3.key === "Escape") {
-                e3.preventDefault();
-                setEditingName(false);
+            ),
+            editingName ? /* @__PURE__ */ u3(
+              "input",
+              {
+                ref: nameEditRef,
+                className: "lfb-input",
+                type: "text",
+                value: name,
+                maxLength: 80,
+                onChange: (e3) => setName(e3.target.value),
+                onBlur: () => {
+                  const t3 = name.trim();
+                  if (t3) persistName(t3);
+                  setEditingName(false);
+                },
+                onKeyDown: (e3) => {
+                  if (e3.key === "Enter") {
+                    e3.preventDefault();
+                    e3.target.blur();
+                  }
+                  if (e3.key === "Escape") {
+                    e3.preventDefault();
+                    e3.stopPropagation();
+                    setEditingName(false);
+                  }
+                }
               }
-            }
-          }
-        ) : /* @__PURE__ */ u3("div", { className: "lfb-namerow", children: [
-          /* @__PURE__ */ u3("span", { children: [
-            "Posting as ",
-            /* @__PURE__ */ u3("span", { className: "lfb-name", children: name || "anonymous" })
-          ] }),
-          /* @__PURE__ */ u3("button", { type: "button", className: "lfb-link", onClick: () => setEditingName(true), children: [
-            /* @__PURE__ */ u3(EditIcon, { size: 12 }),
-            "change"
+            ) : /* @__PURE__ */ u3("div", { className: "lfb-namerow", children: [
+              /* @__PURE__ */ u3("span", { children: [
+                "Posting as ",
+                /* @__PURE__ */ u3("span", { className: "lfb-name", children: name || "anonymous" })
+              ] }),
+              /* @__PURE__ */ u3("button", { type: "button", className: "lfb-link", onClick: () => setEditingName(true), children: [
+                /* @__PURE__ */ u3(EditIcon, { size: 12 }),
+                "change"
+              ] })
+            ] }),
+            error && /* @__PURE__ */ u3("p", { className: "lfb-error", children: error }),
+            /* @__PURE__ */ u3("div", { className: "lfb-actions", children: [
+              /* @__PURE__ */ u3("button", { type: "button", className: "lfb-btn lfb-btn-ghost", onClick: cancelComposer, disabled: submitting, children: "Cancel" }),
+              /* @__PURE__ */ u3("button", { type: "submit", className: "lfb-btn lfb-btn-primary", disabled: submitting || !text.trim(), children: submitting ? "Sending\u2026" : "Send to Linear" })
+            ] })
           ] })
-        ] }),
-        error && /* @__PURE__ */ u3("p", { className: "lfb-error", children: error }),
-        /* @__PURE__ */ u3("div", { className: "lfb-actions", children: [
-          /* @__PURE__ */ u3("button", { type: "button", className: "lfb-btn lfb-btn-ghost", onClick: cancelComposer, disabled: submitting, children: "Cancel" }),
-          /* @__PURE__ */ u3("button", { type: "submit", className: "lfb-btn lfb-btn-primary", disabled: submitting || !text.trim(), children: submitting ? "Sending\u2026" : "Send to Linear" })
-        ] })
-      ] }) })
+        }
+      )
     ] }) }),
     /* @__PURE__ */ u3("div", { ...overlayProps, className: "lfb-fixed-layer", children: [
       mode.kind === "drawing" && /* @__PURE__ */ u3("div", { className: "lfb-draw", role: "presentation", onMouseDown: onDrawMouseDown, onMouseMove: onDrawMouseMove, onMouseUp: onDrawMouseUp, children: [