@sylergydigital/issue-pin-sdk 0.6.4 → 0.6.6

package/dist/index.d.cts

@@ -157,6 +157,7 @@ interface FeedbackContextType {
     submitThread: (body: string, visibility: "public" | "internal") => Promise<void>;
     submitScreenshotThread: (body: string, visibility: "public" | "internal") => Promise<void>;
     refreshThreads: () => Promise<void>;
+    openThreadInDashboard: (threadId: string) => void;
 }
 /**
  * SDK Entry Point — wrap your app to enable in-app feedback.

package/dist/index.d.ts

@@ -157,6 +157,7 @@ interface FeedbackContextType {
     submitThread: (body: string, visibility: "public" | "internal") => Promise<void>;
     submitScreenshotThread: (body: string, visibility: "public" | "internal") => Promise<void>;
     refreshThreads: () => Promise<void>;
+    openThreadInDashboard: (threadId: string) => void;
 }
 /**
  * SDK Entry Point — wrap your app to enable in-app feedback.

package/dist/index.js

@@ -437,6 +437,34 @@ function FeedbackProvider({
   const onModeChangeUnified = config.onModeChange ?? (config.onFeedbackActiveChange ? ((m) => config.onFeedbackActiveChange(m === "annotate")) : void 0);
   const controlledModeFromProps = config.mode !== void 0 ? config.mode : config.feedbackActive !== void 0 ? config.feedbackActive ? "annotate" : "view" : void 0;
   const initialModeUncontrolled = config.mode ?? (config.feedbackActive !== void 0 ? config.feedbackActive ? "annotate" : "view" : "view");
+  const openThreadInDashboard = useCallback((threadId) => {
+    const threadPath = `/threads/${threadId}`;
+    const baseUrl = resolved.siteUrl?.replace(/\/+$/, "") || window.location.origin;
+    if (config.apiKey && autoIdentity.accessToken) {
+      const functionsBaseUrl = getFunctionsBaseUrl(resolved.supabaseUrl);
+      fetch(`${functionsBaseUrl}/external-sso-launch`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${autoIdentity.accessToken}`
+        },
+        body: JSON.stringify({
+          apiKey: config.apiKey,
+          nextPath: threadPath
+        })
+      }).then((res) => res.ok ? res.json() : null).then((data) => {
+        if (data?.redirect_url) {
+          window.open(data.redirect_url, "_blank", "noopener,noreferrer");
+        } else {
+          window.open(`${baseUrl}${threadPath}`, "_blank", "noopener,noreferrer");
+        }
+      }).catch(() => {
+        window.open(`${baseUrl}${threadPath}`, "_blank", "noopener,noreferrer");
+      });
+      return;
+    }
+    window.open(`${baseUrl}${threadPath}`, "_blank", "noopener,noreferrer");
+  }, [resolved.supabaseUrl, resolved.siteUrl, config.apiKey, autoIdentity.accessToken]);
   return /* @__PURE__ */ jsx(
     FeedbackProviderInner,
     {
@@ -463,6 +491,7 @@ function FeedbackProvider({
       userId: effectiveUserId,
       userEmail: effectiveEmail,
       userDisplayName: effectiveDisplayName,
+      openThreadInDashboard,
       children
     }
   );
@@ -491,7 +520,8 @@ function FeedbackProviderInner({
   debug,
   userId,
   userEmail,
-  userDisplayName
+  userDisplayName,
+  openThreadInDashboard
 }) {
   const debugLog = useCallback((message, extra) => {
     if (!debug) return;
@@ -882,7 +912,8 @@ function FeedbackProviderInner({
         setPendingScreenshotPin,
         submitThread,
         submitScreenshotThread,
-        refreshThreads: fetchThreads
+        refreshThreads: fetchThreads,
+        openThreadInDashboard
       },
       children: [
         children,
@@ -1242,7 +1273,7 @@ function ThreadPins() {
   const signedUrlCache = useRef2({});
   const threads = ctx?.threads ?? EMPTY_THREADS;
   const client = ctx?.client;
-  const threadBaseUrl = ctx?.siteUrl?.replace(/\/+$/, "") || window.location.origin;
+  const openThreadInDashboard = ctx?.openThreadInDashboard;
   const scrollContainer = ctx?.scrollContainer;
   const container = scrollContainer?.ref.current ?? null;
   const getSignedUrl = useCallback4(async (path) => {
@@ -1366,8 +1397,8 @@ function ThreadPins() {
       });
       return;
     }
-    window.open(`${threadBaseUrl}/threads/${pin.threadId}`, "_blank", "noopener,noreferrer");
-  }, [getSignedUrl, threadBaseUrl]);
+    openThreadInDashboard?.(pin.threadId);
+  }, [getSignedUrl, openThreadInDashboard]);
   const containerLayer = useMemo3(() => {
     if (!container || containerPositions.length === 0) return null;
     const { width, height } = getContainerContentSize(container);
@@ -1494,7 +1525,7 @@ function ReviewSurfaceOverlay() {
   const mode = ctx?.mode ?? "view";
   const reviewUrl = ctx?.reviewUrl ?? null;
   const threads = ctx?.threads ?? EMPTY_THREADS2;
-  const threadBaseUrl = ctx?.siteUrl?.replace(/\/+$/, "") || window.location.origin;
+  const openThreadInDashboard = ctx?.openThreadInDashboard;
   const updateMetrics = useCallback5(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -1672,7 +1703,7 @@ function ReviewSurfaceOverlay() {
                 index: index + 1,
                 left,
                 top,
-                onClick: () => window.open(`${threadBaseUrl}/threads/${thread.id}`, "_blank", "noopener,noreferrer")
+                onClick: () => openThreadInDashboard?.(thread.id)
               },
               thread.id
             );
@@ -2096,7 +2127,7 @@ function ScreenshotFeedback() {
 }
 
 // src/FeedbackButton.tsx
-import { useRef as useRef5, useEffect as useEffect6, useState as useState7 } from "react";
+import { useRef as useRef5, useEffect as useEffect6, useState as useState7, useCallback as useCallback8 } from "react";
 import { MessageSquarePlus, MapPin, Camera as Camera2 } from "lucide-react";
 
 // src/launcher.ts
@@ -2118,10 +2149,52 @@ function getLauncherCapabilities({
 
 // src/FeedbackButton.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var LAUNCHER_POS_KEY = "issue-pin:launcher-pos";
+var DRAG_THRESHOLD = 5;
+var EDGE_MARGIN = 20;
+var BTN_SIZE = 48;
+var SNAP_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+var SNAP_TRANSITION = `left 0.3s ${SNAP_EASING}, top 0.3s ${SNAP_EASING}`;
+function loadPos(initialEdge) {
+  try {
+    const raw = localStorage.getItem(LAUNCHER_POS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if ((parsed.edge === "left" || parsed.edge === "right") && typeof parsed.y === "number") {
+        return { edge: parsed.edge, y: parsed.y };
+      }
+    }
+  } catch {
+  }
+  return {
+    edge: initialEdge === "bottom-left" ? "left" : "right",
+    y: window.innerHeight - BTN_SIZE - EDGE_MARGIN
+  };
+}
+function savePos(pos) {
+  try {
+    localStorage.setItem(LAUNCHER_POS_KEY, JSON.stringify(pos));
+  } catch {
+  }
+}
+function clampY(y) {
+  return Math.min(
+    Math.max(y, EDGE_MARGIN),
+    window.innerHeight - BTN_SIZE - EDGE_MARGIN
+  );
+}
+function snapXForEdge(edge) {
+  return edge === "left" ? EDGE_MARGIN : window.innerWidth - BTN_SIZE - EDGE_MARGIN;
+}
 function FeedbackButton({ position = "bottom-right" }) {
   const ctx = useFeedbackSafe();
   const menuRef = useRef5(null);
   const [hintDismissed, setHintDismissed] = useState7(false);
+  const [pos, setPos] = useState7(() => loadPos(position));
+  const [dragXY, setDragXY] = useState7(null);
+  const [snapping, setSnapping] = useState7(false);
+  const dragStateRef = useRef5(null);
+  const snapTimerRef = useRef5(null);
   const menuOpenState = ctx?.menuOpen ?? false;
   const debug = ctx?.debug ?? false;
   useEffect6(() => {
@@ -2139,6 +2212,79 @@ function FeedbackButton({ position = "bottom-right" }) {
     console.log("[EW SDK] FeedbackButton mounted");
     return () => console.log("[EW SDK] FeedbackButton unmounted");
   }, [debug]);
+  useEffect6(() => {
+    const handleResize = () => {
+      setPos((prev) => {
+        const newPos = {
+          edge: prev.edge,
+          y: clampY(prev.y)
+        };
+        savePos(newPos);
+        return newPos;
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect6(() => {
+    return () => {
+      if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
+    };
+  }, []);
+  const handlePointerDown = useCallback8((e) => {
+    if (e.button != null && e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragStateRef.current = {
+      active: false,
+      startX: e.clientX,
+      startY: e.clientY,
+      currentX: e.clientX,
+      currentY: e.clientY,
+      didDrag: false
+    };
+  }, []);
+  const handlePointerMove = useCallback8((e) => {
+    const ds = dragStateRef.current;
+    if (!ds) return;
+    const dx = e.clientX - ds.startX;
+    const dy = e.clientY - ds.startY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (!ds.active && distance >= DRAG_THRESHOLD) {
+      ds.active = true;
+      ds.didDrag = true;
+    }
+    if (ds.active) {
+      ds.currentX = e.clientX;
+      ds.currentY = e.clientY;
+      const x = e.clientX - BTN_SIZE / 2;
+      const y = clampY(e.clientY - BTN_SIZE / 2);
+      setDragXY({ x, y });
+    }
+  }, []);
+  const handlePointerUp = useCallback8((e) => {
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const ds = dragStateRef.current;
+    if (!ds || !ds.didDrag) {
+      dragStateRef.current = null;
+      return;
+    }
+    const centerX = ds.currentX;
+    const edge = centerX < window.innerWidth / 2 ? "left" : "right";
+    const y = clampY(ds.currentY - BTN_SIZE / 2);
+    const newPos = { edge, y };
+    setSnapping(true);
+    setPos(newPos);
+    savePos(newPos);
+    setDragXY(null);
+    if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
+    snapTimerRef.current = setTimeout(() => {
+      setSnapping(false);
+      snapTimerRef.current = null;
+    }, 300);
+  }, []);
   if (!ctx) return null;
   const {
     mode,
@@ -2154,9 +2300,13 @@ function FeedbackButton({ position = "bottom-right" }) {
   } = ctx;
   const annotate = mode === "annotate";
   const capabilities = getLauncherCapabilities({ allowPinOnPage: canPinOnPage, allowScreenshot: canScreenshot });
-  const posStyle = position === "bottom-left" ? { left: 20, bottom: 20 } : { right: 20, bottom: 20 };
-  const hintStyle = position === "bottom-left" ? { left: 56, bottom: 8 } : { right: 56, bottom: 8 };
   const handleToggle = () => {
+    if (dragStateRef.current?.didDrag) {
+      dragStateRef.current.didDrag = false;
+      dragStateRef.current = null;
+      return;
+    }
+    dragStateRef.current = null;
     if (debug) console.log("[EW SDK] handleToggle", { mode, menuOpen });
     setHintDismissed(true);
     if (annotate) {
@@ -2176,12 +2326,44 @@ function FeedbackButton({ position = "bottom-right" }) {
   const capturing = screenshotCapturing;
   const showLauncherHint = showHints && !hintDismissed && !annotate && !menuOpen;
   if (capabilities.actionCount === 0) return null;
+  const restX = snapXForEdge(pos.edge);
+  let wrapperStyle;
+  if (dragXY !== null) {
+    wrapperStyle = {
+      position: "fixed",
+      left: dragXY.x,
+      top: dragXY.y,
+      transition: "none",
+      zIndex: Z.launcher
+    };
+  } else if (snapping) {
+    wrapperStyle = {
+      position: "fixed",
+      left: restX,
+      top: pos.y,
+      transition: SNAP_TRANSITION,
+      zIndex: Z.launcher
+    };
+  } else {
+    wrapperStyle = {
+      position: "fixed",
+      left: restX,
+      top: pos.y,
+      transition: "none",
+      zIndex: Z.launcher
+    };
+  }
+  const hintStyle = pos.edge === "right" ? { right: BTN_SIZE + 8, top: "50%", transform: "translateY(-50%)" } : { left: BTN_SIZE + 8, top: "50%", transform: "translateY(-50%)" };
+  const menuPositionStyle = pos.edge === "right" ? { right: 0, bottom: BTN_SIZE + 4 } : { left: 0, bottom: BTN_SIZE + 4 };
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: menuRef,
       "data-ew-feedback-interactive": "true",
-      style: { position: "fixed", ...posStyle, zIndex: Z.launcher },
+      style: { ...wrapperStyle, touchAction: "none" },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
       children: [
         showLauncherHint && /* @__PURE__ */ jsxs6(
           "div",
@@ -2208,8 +2390,7 @@ function FeedbackButton({ position = "bottom-right" }) {
           {
             style: {
               position: "absolute",
-              bottom: 56,
-              right: 0,
+              ...menuPositionStyle,
               marginBottom: 4,
               width: 176,
               borderRadius: 8,
@@ -2274,7 +2455,7 @@ function FeedbackButton({ position = "bottom-right" }) {
                   children: [
                     /* @__PURE__ */ jsx7(Camera2, { style: { width: 16, height: 16, color: T.primary, flexShrink: 0 } }),
                     /* @__PURE__ */ jsxs6("div", { children: [
-                      /* @__PURE__ */ jsx7("div", { style: { fontWeight: 500 }, children: capturing ? "Capturing\u2026" : "Screenshot" }),
+                      /* @__PURE__ */ jsx7("div", { style: { fontWeight: 500 }, children: capturing ? "Capturing..." : "Screenshot" }),
                       /* @__PURE__ */ jsx7("div", { style: { fontSize: 10, color: T.muted }, children: "Capture current view" })
                     ] })
                   ]
@@ -2289,8 +2470,8 @@ function FeedbackButton({ position = "bottom-right" }) {
             onClick: handleToggle,
             style: {
               display: "flex",
-              height: 48,
-              width: 48,
+              height: BTN_SIZE,
+              width: BTN_SIZE,
               alignItems: "center",
               justifyContent: "center",
               borderRadius: "50%",
@@ -2299,7 +2480,7 @@ function FeedbackButton({ position = "bottom-right" }) {
               border: annotate ? "none" : `1px solid ${T.border}`,
               background: annotate ? T.primary : T.card,
               color: annotate ? T.primaryFg : T.fg,
-              cursor: "pointer",
+              cursor: dragXY !== null ? "grabbing" : "pointer",
               transform: annotate ? "scale(1.1)" : "scale(1)"
             },
             title: annotate ? "Exit feedback mode" : "Open feedback menu",
@@ -2313,7 +2494,7 @@ function FeedbackButton({ position = "bottom-right" }) {
 }
 
 // src/ModalFeedbackInjector.tsx
-import { useState as useState8, useEffect as useEffect7, useCallback as useCallback8 } from "react";
+import { useState as useState8, useEffect as useEffect7, useCallback as useCallback9 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Camera as Camera3 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx8 } from "react/jsx-runtime";
@@ -2332,7 +2513,7 @@ function ModalFeedbackInjector({
     observer.observe(document.body, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, []);
-  const handleCapture = useCallback8(async () => {
+  const handleCapture = useCallback9(async () => {
     if (!ctx) return;
     await ctx.startScreenshotCapture();
   }, [ctx]);