react-linear-feedback 0.2.0 → 0.4.0

package/dist/react/index.d.ts

@@ -84,8 +84,12 @@ type FeedbackWidgetProps = {
     nameStorageKey?: string;
     /** Label on the floating button (default "Give feedback"). */
     fabLabel?: string;
+    /** Stacking context for the widget's layers — sugar for the `--lfb-z` CSS variable. */
+    zIndex?: number;
+    /** Extra headers sent with the submission (e.g. x-feedback-token for `headerGate`). */
+    requestHeaders?: Record<string, string>;
 };
-declare function FeedbackWidget({ endpoint, brandColor, position, types, nameRequired, nameStorageKey, fabLabel, }: FeedbackWidgetProps): react.JSX.Element;
+declare function FeedbackWidget({ endpoint, brandColor, position, types, nameRequired, nameStorageKey, fabLabel, zIndex, requestHeaders, }: FeedbackWidgetProps): react.JSX.Element;
 
 type FeedbackGateProps = FeedbackWidgetProps & {
     /** URL param that toggles the tool: `?feedback` / `?feedback=1` on, `?feedback=0` off. */
@@ -105,6 +109,8 @@ declare function FeedbackGate({ urlParam, cookieName, cookieValue, cookieMaxAgeS
 type SubmitOptions = {
     /** Endpoint that runs the server handler (default "/api/feedback"). */
     endpoint?: string;
+    /** Extra request headers (e.g. the embed's x-feedback-token for `headerGate`). */
+    headers?: Record<string, string>;
 };
 declare function submitFeedback(annotation: FeedbackAnnotation, opts?: SubmitOptions): Promise<FeedbackResult | null>;
 

package/dist/react/index.js

@@ -57,7 +57,7 @@ async function submitFeedback(annotation, opts = {}) {
   try {
     const res = await fetch(endpoint, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...opts.headers },
       body: JSON.stringify(payload)
     });
     if (!res.ok) {
@@ -193,6 +193,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 {
@@ -207,6 +209,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); }
@@ -290,6 +293,8 @@ function ensureStyles() {
 }
 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" }
@@ -301,7 +306,9 @@ function FeedbackWidget({
   types = DEFAULT_TYPES,
   nameRequired = true,
   nameStorageKey = "wh_feedback_name",
-  fabLabel = "Give feedback"
+  fabLabel = "Give feedback",
+  zIndex,
+  requestHeaders
 }) {
   const isEdge = position === "right" || position === "left";
   const [mode, setMode] = useState({ kind: "idle" });
@@ -316,6 +323,11 @@ function FeedbackWidget({
   const [drag, setDrag] = useState(null);
   const textareaRef = useRef(null);
   const nameInputRef = useRef(null);
+  const nameEditRef = useRef(null);
+  const submittingRef = useRef(false);
+  submittingRef.current = submitting;
+  const editingNameRef = useRef(false);
+  editingNameRef.current = editingName;
   useEffect(() => {
     ensureStyles();
     try {
@@ -325,12 +337,19 @@ function FeedbackWidget({
     }
   }, [nameStorageKey]);
   useEffect(() => {
-    if (mode.kind !== "drawing" && mode.kind !== "naming") return;
+    if (mode.kind === "idle") return;
     const onKey = (e) => {
-      if (e.key === "Escape") {
-        setMode({ kind: "idle" });
-        setDrag(null);
+      if (e.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);
@@ -345,6 +364,22 @@ function FeedbackWidget({
       return () => window.clearTimeout(t);
     }
   }, [mode.kind]);
+  useEffect(() => {
+    if (editingName) nameEditRef.current?.focus();
+  }, [editingName]);
+  useEffect(() => {
+    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);
@@ -398,12 +433,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" });
@@ -424,7 +464,7 @@ function FeedbackWidget({
     if (trimmedName) persistName(trimmedName);
     const res = await submitFeedback(
       { rect: mode.rect, note: trimmedNote, type: issueType, typeLabel: selected?.label, name: trimmedName || void 0 },
-      { endpoint }
+      { endpoint, headers: requestHeaders }
     );
     setSubmitting(false);
     if (res) {
@@ -436,7 +476,11 @@ function FeedbackWidget({
       setError("Couldn't send \u2014 please try again.");
     }
   };
-  const rootStyle = { display: "contents", ...brandColor ? { "--lfb-brand": brandColor } : {} };
+  const rootStyle = {
+    display: "contents",
+    ...brandColor ? { "--lfb-brand": brandColor } : {},
+    ...zIndex != null ? { "--lfb-z": String(zIndex) } : {}
+  };
   const overlayProps = { [FEEDBACK_OVERLAY_ATTR]: "" };
   const live = drag ? {
     left: Math.min(drag.start.x, drag.current.x),
@@ -446,93 +490,102 @@ function FeedbackWidget({
   } : null;
   return /* @__PURE__ */ jsxs("div", { className: "lfb-root", style: rootStyle, children: [
     /* @__PURE__ */ jsx("div", { ...overlayProps, className: "lfb-doc-layer", children: mode.kind === "composing" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "lfb-shield", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("div", { className: "lfb-rect", style: { left: mode.rect.x, top: mode.rect.y, width: mode.rect.width, height: mode.rect.height } }),
-      /* @__PURE__ */ jsx("div", { className: "lfb-anchor", style: { left: mode.rect.x, top: mode.rect.y + mode.rect.height }, children: /* @__PURE__ */ jsxs("form", { className: "lfb-card lfb-composer", onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ jsxs("div", { className: "lfb-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "lfb-eyebrow", children: "New feedback" }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "lfb-iconbtn", "aria-label": "Cancel", onClick: cancelComposer, children: /* @__PURE__ */ jsx(XIcon, {}) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
-          /* @__PURE__ */ jsx("span", { className: "lfb-field-label", children: "Issue type" }),
-          /* @__PURE__ */ jsx("div", { className: "lfb-types", children: types.map((t) => {
-            const Icon = TYPE_ICONS[t.icon ?? "dot"];
-            return /* @__PURE__ */ jsxs(
-              "button",
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "lfb-anchor",
+          style: { left: mode.anchorX, top: mode.placement === "below" ? mode.rect.y + mode.rect.height : mode.rect.y },
+          children: /* @__PURE__ */ jsxs("form", { className: `lfb-card lfb-composer${mode.placement === "above" ? " lfb-composer--above" : ""}`, onSubmit: handleSubmit, children: [
+            /* @__PURE__ */ jsxs("div", { className: "lfb-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "lfb-eyebrow", children: "New feedback" }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "lfb-iconbtn", "aria-label": "Cancel", onClick: cancelComposer, children: /* @__PURE__ */ jsx(XIcon, {}) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+              /* @__PURE__ */ jsx("span", { className: "lfb-field-label", children: "Issue type" }),
+              /* @__PURE__ */ jsx("div", { className: "lfb-types", children: types.map((t) => {
+                const Icon = TYPE_ICONS[t.icon ?? "dot"];
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lfb-type",
+                    "aria-pressed": issueType === t.id,
+                    onClick: () => setIssueType(t.id),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "lfb-swatch", style: { background: t.color }, children: /* @__PURE__ */ jsx(Icon, { size: 14 }) }),
+                      t.label
+                    ]
+                  },
+                  t.id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "textarea",
               {
-                type: "button",
-                className: "lfb-type",
-                "aria-pressed": issueType === t.id,
-                onClick: () => setIssueType(t.id),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "lfb-swatch", style: { background: t.color }, children: /* @__PURE__ */ jsx(Icon, { size: 14 }) }),
-                  t.label
-                ]
-              },
-              t.id
-            );
-          }) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ref: textareaRef,
-            className: "lfb-textarea",
-            placeholder: "What's on your mind?",
-            value: text,
-            onChange: (e) => setText(e.target.value),
-            maxLength: 5e3,
-            required: true,
-            disabled: submitting,
-            rows: 3,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault();
-                handleSubmit(e);
-              }
-            }
-          }
-        ),
-        editingName ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: "lfb-input",
-            type: "text",
-            value: name,
-            autoFocus: true,
-            maxLength: 80,
-            onChange: (e) => setName(e.target.value),
-            onBlur: () => {
-              const t = name.trim();
-              if (t) persistName(t);
-              setEditingName(false);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                e.target.blur();
+                ref: textareaRef,
+                className: "lfb-textarea",
+                placeholder: "What's on your mind?",
+                value: text,
+                onChange: (e) => setText(e.target.value),
+                maxLength: 5e3,
+                required: true,
+                disabled: submitting,
+                rows: 3,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    handleSubmit(e);
+                  }
+                }
               }
-              if (e.key === "Escape") {
-                e.preventDefault();
-                setEditingName(false);
+            ),
+            editingName ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: nameEditRef,
+                className: "lfb-input",
+                type: "text",
+                value: name,
+                maxLength: 80,
+                onChange: (e) => setName(e.target.value),
+                onBlur: () => {
+                  const t = name.trim();
+                  if (t) persistName(t);
+                  setEditingName(false);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    e.target.blur();
+                  }
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setEditingName(false);
+                  }
+                }
               }
-            }
-          }
-        ) : /* @__PURE__ */ jsxs("div", { className: "lfb-namerow", children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Posting as ",
-            /* @__PURE__ */ jsx("span", { className: "lfb-name", children: name || "anonymous" })
-          ] }),
-          /* @__PURE__ */ jsxs("button", { type: "button", className: "lfb-link", onClick: () => setEditingName(true), children: [
-            /* @__PURE__ */ jsx(EditIcon, { size: 12 }),
-            "change"
+            ) : /* @__PURE__ */ jsxs("div", { className: "lfb-namerow", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Posting as ",
+                /* @__PURE__ */ jsx("span", { className: "lfb-name", children: name || "anonymous" })
+              ] }),
+              /* @__PURE__ */ jsxs("button", { type: "button", className: "lfb-link", onClick: () => setEditingName(true), children: [
+                /* @__PURE__ */ jsx(EditIcon, { size: 12 }),
+                "change"
+              ] })
+            ] }),
+            error && /* @__PURE__ */ jsx("p", { className: "lfb-error", children: error }),
+            /* @__PURE__ */ jsxs("div", { className: "lfb-actions", children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: "lfb-btn lfb-btn-ghost", onClick: cancelComposer, disabled: submitting, children: "Cancel" }),
+              /* @__PURE__ */ jsx("button", { type: "submit", className: "lfb-btn lfb-btn-primary", disabled: submitting || !text.trim(), children: submitting ? "Sending\u2026" : "Send to Linear" })
+            ] })
           ] })
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { className: "lfb-error", children: error }),
-        /* @__PURE__ */ jsxs("div", { className: "lfb-actions", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: "lfb-btn lfb-btn-ghost", onClick: cancelComposer, disabled: submitting, children: "Cancel" }),
-          /* @__PURE__ */ jsx("button", { type: "submit", className: "lfb-btn lfb-btn-primary", disabled: submitting || !text.trim(), children: submitting ? "Sending\u2026" : "Send to Linear" })
-        ] })
-      ] }) })
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs("div", { ...overlayProps, className: "lfb-fixed-layer", children: [
       mode.kind === "drawing" && /* @__PURE__ */ jsxs("div", { className: "lfb-draw", role: "presentation", onMouseDown: onDrawMouseDown, onMouseMove: onDrawMouseMove, onMouseUp: onDrawMouseUp, children: [

package/dist/server/index.cjs

@@ -4,6 +4,12 @@ var sdk = require('@linear/sdk');
 
 // src/server/core.ts
 var MAX_NOTE = 5e3;
+var DEFAULT_LABEL_TTL_MS = 10 * 60 * 1e3;
+var MISS_TTL_MS = 60 * 1e3;
+var labelCache = /* @__PURE__ */ new Map();
+function labelCacheKey(teamId, name) {
+  return `${teamId}:${name.toLowerCase()}`;
+}
 async function createFeedbackIssue(payload, config) {
   const { apiKey, teamId } = config;
   if (!apiKey || !teamId) throw new Error("not_configured");
@@ -36,7 +42,8 @@ async function createFeedbackIssue(payload, config) {
   ].filter(Boolean).join("\n");
   const title = `${typeLabel}: ${note.slice(0, 60)}${note.length > 60 ? "\u2026" : ""}`;
   const labelName = config.labels?.[annotation.type] ?? annotation.type;
-  const labelId = labelName ? await resolveLabelId(linear, labelName, teamId) : null;
+  const ttl = config.labelCacheTtlMs ?? DEFAULT_LABEL_TTL_MS;
+  const labelId = labelName ? await resolveLabelIdCached(linear, labelName, teamId, ttl) : null;
   if (labelName && !labelId) console.warn(`[feedback] label "${labelName}" not found \u2014 creating issue without it`);
   const create = async (ids) => {
     const created = await linear.createIssue({ teamId, title, description, labelIds: ids.length ? ids : void 0 });
@@ -44,6 +51,7 @@ async function createFeedbackIssue(payload, config) {
   };
   const issue = await create(labelId ? [labelId] : []).catch((err) => {
     if (!labelId) throw err;
+    if (labelName) labelCache.delete(labelCacheKey(teamId, labelName));
     console.warn("[feedback] create failed with label, retrying without it", err);
     return create([]);
   });
@@ -52,6 +60,15 @@ async function createFeedbackIssue(payload, config) {
 function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
+async function resolveLabelIdCached(linear, name, teamId, ttlMs) {
+  if (ttlMs <= 0) return resolveLabelId(linear, name, teamId);
+  const key = labelCacheKey(teamId, name);
+  const hit = labelCache.get(key);
+  if (hit && hit.expires > Date.now()) return hit.id;
+  const id = await resolveLabelId(linear, name, teamId);
+  labelCache.set(key, { id, expires: Date.now() + (id ? ttlMs : Math.min(ttlMs, MISS_TTL_MS)) });
+  return id;
+}
 async function resolveLabelId(linear, name, teamId) {
   try {
     const { nodes } = await linear.issueLabels({ filter: { name: { eqIgnoreCase: name } }, first: 50 });
@@ -90,32 +107,51 @@ async function uploadScreenshot(linear, dataUrl) {
   return upload.uploadFile.assetUrl;
 }
 
-// src/server/next.ts
-var BAD_REQUEST = /* @__PURE__ */ new Set(["note_required", "note_too_long", "bad_type", "not_configured"]);
-function json(body, status) {
-  return new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
+// src/server/web.ts
+var BAD_REQUEST = /* @__PURE__ */ new Set(["note_required", "note_too_long", "bad_type", "bad_json", "not_configured"]);
+function json(body, status, headers = {}) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json", ...headers }
+  });
 }
-function createNextRoute(config) {
-  return async function POST(req) {
-    if (config.authorize && !await config.authorize(req)) return json({ error: "unauthorized" }, 404);
-    if (config.allowedOrigin) {
-      const origin = req.headers.get("origin") ?? "";
-      if (origin && origin !== config.allowedOrigin) return json({ error: "forbidden_origin" }, 403);
-    }
+function corsHeaders(req, allowed) {
+  const origin = req.headers.get("origin");
+  if (!origin || allowed.length === 0) return {};
+  if (!allowed.includes("*") && !allowed.includes(origin)) return {};
+  return {
+    "access-control-allow-origin": allowed.includes("*") ? "*" : origin,
+    vary: "Origin",
+    "access-control-allow-methods": "POST, OPTIONS",
+    "access-control-allow-headers": "content-type, x-feedback-token",
+    "access-control-max-age": "86400"
+  };
+}
+function createWebHandler(config) {
+  const allowed = config.allowedOrigins ?? (config.allowedOrigin ? [config.allowedOrigin] : []);
+  if (!config.apiKey || !config.teamId)
+    console.warn("[feedback] LINEAR apiKey/teamId missing \u2014 submissions will fail with 500 not_configured");
+  return async function handler(req) {
+    const cors = corsHeaders(req, allowed);
+    const origin = req.headers.get("origin");
+    if (origin && allowed.length > 0 && !allowed.includes("*") && !allowed.includes(origin))
+      return json({ error: "forbidden_origin" }, 403);
+    if (req.method === "OPTIONS") return new Response(null, { status: 204, headers: cors });
+    if (config.authorize && !await config.authorize(req)) return json({ error: "unauthorized" }, 404, cors);
     let payload;
     try {
       payload = await req.json();
     } catch {
-      return json({ error: "bad_json" }, 400);
+      return json({ error: "bad_json" }, 400, cors);
     }
     try {
       const issue = await createFeedbackIssue(payload, config);
-      return json({ ok: true, ...issue }, 200);
+      return json({ ok: true, ...issue }, 200, cors);
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
-      if (BAD_REQUEST.has(message)) return json({ error: message }, message === "not_configured" ? 500 : 400);
+      if (BAD_REQUEST.has(message)) return json({ error: message }, message === "not_configured" ? 500 : 400, cors);
       console.error("[feedback] issue create failed", err);
-      return json({ error: "issue_create_failed", message }, 502);
+      return json({ error: "issue_create_failed", message }, 502, cors);
     }
   };
 }
@@ -126,46 +162,55 @@ function cookieGate(name, value = "1") {
     return cookie.split(";").map((c) => c.trim()).some((c) => c === `${name}=${value}`);
   };
 }
+function headerGate(value, headerName = "x-feedback-token") {
+  const wanted = headerName.toLowerCase();
+  return (req) => {
+    const { headers } = req;
+    const got = typeof headers.get === "function" ? headers.get(wanted) : headers[wanted];
+    return got === value;
+  };
+}
 
 // src/server/node.ts
-var BAD_REQUEST2 = /* @__PURE__ */ new Set(["note_required", "note_too_long", "bad_type", "bad_json", "not_configured"]);
-function send(res, status, body) {
-  res.statusCode = status;
-  res.setHeader("content-type", "application/json");
-  res.end(JSON.stringify(body));
-}
-async function readJson(req) {
-  const chunks = [];
-  for await (const chunk of req) chunks.push(Buffer.from(chunk));
-  const raw = Buffer.concat(chunks).toString("utf8");
-  if (!raw) throw new Error("bad_json");
-  try {
-    return JSON.parse(raw);
-  } catch {
-    throw new Error("bad_json");
-  }
-}
 function createNodeHandler(config) {
+  const originals = /* @__PURE__ */ new WeakMap();
+  const web = createWebHandler({
+    ...config,
+    authorize: config.authorize ? (request) => config.authorize(originals.get(request)) : void 0
+  });
   return async function handler(req, res) {
-    try {
-      if (config.authorize && !await config.authorize(req)) return send(res, 404, { error: "unauthorized" });
-      if (config.allowedOrigin) {
-        const origin = req.headers.origin ?? "";
-        if (origin && origin !== config.allowedOrigin) return send(res, 403, { error: "forbidden_origin" });
-      }
-      const payload = req.body ?? await readJson(req);
-      const issue = await createFeedbackIssue(payload, config);
-      send(res, 200, { ok: true, ...issue });
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      if (BAD_REQUEST2.has(message)) return send(res, message === "not_configured" ? 500 : 400, { error: message });
-      console.error("[feedback] issue create failed", err);
-      send(res, 502, { error: "issue_create_failed", message });
-    }
+    const request = await toWebRequest(req);
+    originals.set(request, req);
+    const response = await web(request);
+    res.statusCode = response.status;
+    response.headers.forEach((value, key) => res.setHeader(key, value));
+    res.end(await response.text());
   };
 }
+async function toWebRequest(req) {
+  const url = `http://${req.headers.host ?? "localhost"}${req.url ?? "/"}`;
+  const headers = new Headers();
+  for (const [key, value] of Object.entries(req.headers)) {
+    if (value == null) continue;
+    headers.set(key, Array.isArray(value) ? value.join(", ") : value);
+  }
+  const method = req.method ?? "POST";
+  let body;
+  if (method !== "GET" && method !== "HEAD" && method !== "OPTIONS") {
+    if (req.body !== void 0) {
+      body = typeof req.body === "string" ? req.body : JSON.stringify(req.body);
+    } else {
+      const chunks = [];
+      for await (const chunk of req) chunks.push(Buffer.from(chunk));
+      body = Buffer.concat(chunks).toString("utf8");
+    }
+  }
+  return new Request(url, { method, headers, body });
+}
 
 exports.cookieGate = cookieGate;
 exports.createFeedbackIssue = createFeedbackIssue;
-exports.createNextRoute = createNextRoute;
+exports.createNextRoute = createWebHandler;
 exports.createNodeHandler = createNodeHandler;
+exports.createWebHandler = createWebHandler;
+exports.headerGate = headerGate;

package/dist/server/index.d.cts

@@ -55,6 +55,11 @@ type FeedbackServerConfig = {
      * "bug" looks for a label named "bug". Labels are resolved by name at request time.
      */
     labels?: Record<string, string>;
+    /**
+     * How long resolved label name→ID lookups are cached (module scope, so warm serverless
+     * invocations reuse them). Default 10 minutes; 0 disables caching.
+     */
+    labelCacheTtlMs?: number;
 };
 type CreatedIssue = {
     id?: string;
@@ -63,26 +68,41 @@ type CreatedIssue = {
 };
 declare function createFeedbackIssue(payload: FeedbackPayload, config: FeedbackServerConfig): Promise<CreatedIssue>;
 
-type NextRouteConfig = FeedbackServerConfig & {
-    /** Restrict to a single site origin (cheap extra; not a hard auth boundary). */
+type WebHandlerConfig = FeedbackServerConfig & {
+    /**
+     * Origins allowed to call this endpoint cross-origin (exact origins, or "*"). Enables
+     * CORS (preflight + response headers) — required when the widget is embedded via the
+     * script tag on a different domain than the handler.
+     */
+    allowedOrigins?: string[];
+    /** @deprecated Use `allowedOrigins`. Restrict to a single site origin. */
     allowedOrigin?: string;
-    /** Return false to reject the request (e.g. a cookie/session check). */
+    /** Return false to reject the request (e.g. a cookie/session/token check). */
     authorize?: (req: Request) => boolean | Promise<boolean>;
 };
-declare function createNextRoute(config: NextRouteConfig): (req: Request) => Promise<Response>;
+declare function createWebHandler(config: WebHandlerConfig): (req: Request) => Promise<Response>;
 /**
  * Authorize helper: allow only requests carrying `name=value` in the Cookie header.
  *
- * Works with BOTH a Web `Request` (Next.js App Router via `createNextRoute`) and a Node
- * `IncomingMessage` (Vercel / Express via `createNodeHandler`). The two runtimes expose
- * headers differently — `headers.get("cookie")` vs the plain `headers.cookie` string — so
- * we feature-detect instead of assuming one shape. (Previously this only handled the Web
- * `Request`, so the documented `createNodeHandler` usage threw `headers.get is not a function`.)
+ * Works with BOTH a Web `Request` (createWebHandler/createNextRoute) and a Node
+ * `IncomingMessage` (createNodeHandler). The two runtimes expose headers differently —
+ * `headers.get("cookie")` vs the plain `headers.cookie` string — so we feature-detect
+ * instead of assuming one shape.
+ *
+ * Same-origin only: the gate cookie is written by `FeedbackGate` on the PAGE's origin, so it
+ * is never sent with cross-origin embed submissions. Gate embedded widgets with `headerGate`.
  */
 declare function cookieGate(name: string, value?: string): (req: Request | IncomingMessage) => boolean;
+/**
+ * Authorize helper for embedded (cross-origin) widgets: allow only requests carrying
+ * `headerName: value`. Pair it with the embed's `token` / `data-token` config, which sends
+ * the token as `x-feedback-token`. The token is visible in the page source — treat it as a
+ * tripwire against drive-by spam, not as authentication.
+ */
+declare function headerGate(value: string, headerName?: string): (req: Request | IncomingMessage) => boolean;
 
-type NodeHandlerConfig = FeedbackServerConfig & {
-    allowedOrigin?: string;
+type NodeHandlerConfig = Omit<WebHandlerConfig, "authorize"> & {
+    /** Return false to reject the request. Receives the original Node `IncomingMessage`. */
     authorize?: (req: IncomingMessage) => boolean | Promise<boolean>;
 };
 type NodeReq = IncomingMessage & {
@@ -90,4 +110,4 @@ type NodeReq = IncomingMessage & {
 };
 declare function createNodeHandler(config: NodeHandlerConfig): (req: NodeReq, res: ServerResponse) => Promise<void>;
 
-export { type CreatedIssue, type FeedbackAnnotation, type FeedbackContext, type FeedbackPayload, type FeedbackRect, type FeedbackServerConfig, type NextRouteConfig, type NodeHandlerConfig, cookieGate, createFeedbackIssue, createNextRoute, createNodeHandler };
+export { type CreatedIssue, type FeedbackAnnotation, type FeedbackContext, type FeedbackPayload, type FeedbackRect, type FeedbackServerConfig, type WebHandlerConfig as NextRouteConfig, type NodeHandlerConfig, type WebHandlerConfig, cookieGate, createFeedbackIssue, createWebHandler as createNextRoute, createNodeHandler, createWebHandler, headerGate };