@sylergydigital/issue-pin-sdk 0.6.4 → 0.6.6

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to `@sylergydigital/issue-pin-sdk` are documented here.
 
+## [0.6.6] - 2026-04-15
+
+### Fixed
+- **SSO handoff for federated pin click-through** — clicking a pin on a 3rd-party app now auto-logs the user into the IssuePin dashboard via `external-sso-launch` magic link, instead of landing on the login page. Falls back to direct link when not in a federated context.
+
+## [0.6.5] - 2026-04-15
+
+### Added
+- **Draggable launcher button** — the feedback launcher can now be freely dragged across the viewport using mouse, touch, or pen input (iOS AssistiveTouch pattern). On release, the button smoothly snaps to the nearest left or right viewport edge.
+- Position persistence — launcher position (edge + Y offset) is saved to `localStorage` and restored across page reloads.
+- Menu and hint toast auto-flip to the opposite side of the docked edge so they never render off-screen.
+- Viewport resize clamping — button repositions to stay within bounds when the window is resized.
+- Click vs. drag disambiguation — short interactions (< 5px movement) still toggle the menu normally.
+
+## [0.6.4] - 2026-04-14
+
+### Fixed
+- Included `CHANGELOG.md` in the SDK npm publish pipeline (`files` array in package.json).
+
+### Added
+- SDK CHANGELOG.md with full release history.
+
 ## [0.6.3] - 2026-04-14
 
 ### Added

package/dist/index.cjs

@@ -487,6 +487,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 = (0, import_react2.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__ */ (0, import_jsx_runtime.jsx)(
     FeedbackProviderInner,
     {
@@ -513,6 +541,7 @@ function FeedbackProvider({
       userId: effectiveUserId,
       userEmail: effectiveEmail,
       userDisplayName: effectiveDisplayName,
+      openThreadInDashboard,
       children
     }
   );
@@ -541,7 +570,8 @@ function FeedbackProviderInner({
   debug,
   userId,
   userEmail,
-  userDisplayName
+  userDisplayName,
+  openThreadInDashboard
 }) {
   const debugLog = (0, import_react2.useCallback)((message, extra) => {
     if (!debug) return;
@@ -932,7 +962,8 @@ function FeedbackProviderInner({
         setPendingScreenshotPin,
         submitThread,
         submitScreenshotThread,
-        refreshThreads: fetchThreads
+        refreshThreads: fetchThreads,
+        openThreadInDashboard
       },
       children: [
         children,
@@ -1292,7 +1323,7 @@ function ThreadPins() {
   const signedUrlCache = (0, import_react5.useRef)({});
   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 = (0, import_react5.useCallback)(async (path) => {
@@ -1416,8 +1447,8 @@ function ThreadPins() {
       });
       return;
     }
-    window.open(`${threadBaseUrl}/threads/${pin.threadId}`, "_blank", "noopener,noreferrer");
-  }, [getSignedUrl, threadBaseUrl]);
+    openThreadInDashboard?.(pin.threadId);
+  }, [getSignedUrl, openThreadInDashboard]);
   const containerLayer = (0, import_react5.useMemo)(() => {
     if (!container || containerPositions.length === 0) return null;
     const { width, height } = getContainerContentSize(container);
@@ -1544,7 +1575,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 = (0, import_react6.useCallback)(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -1722,7 +1753,7 @@ function ReviewSurfaceOverlay() {
                 index: index + 1,
                 left,
                 top,
-                onClick: () => window.open(`${threadBaseUrl}/threads/${thread.id}`, "_blank", "noopener,noreferrer")
+                onClick: () => openThreadInDashboard?.(thread.id)
               },
               thread.id
             );
@@ -2168,10 +2199,52 @@ function getLauncherCapabilities({
 
 // src/FeedbackButton.tsx
 var import_jsx_runtime7 = require("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 = (0, import_react9.useRef)(null);
   const [hintDismissed, setHintDismissed] = (0, import_react9.useState)(false);
+  const [pos, setPos] = (0, import_react9.useState)(() => loadPos(position));
+  const [dragXY, setDragXY] = (0, import_react9.useState)(null);
+  const [snapping, setSnapping] = (0, import_react9.useState)(false);
+  const dragStateRef = (0, import_react9.useRef)(null);
+  const snapTimerRef = (0, import_react9.useRef)(null);
   const menuOpenState = ctx?.menuOpen ?? false;
   const debug = ctx?.debug ?? false;
   (0, import_react9.useEffect)(() => {
@@ -2189,6 +2262,79 @@ function FeedbackButton({ position = "bottom-right" }) {
     console.log("[EW SDK] FeedbackButton mounted");
     return () => console.log("[EW SDK] FeedbackButton unmounted");
   }, [debug]);
+  (0, import_react9.useEffect)(() => {
+    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);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
+    };
+  }, []);
+  const handlePointerDown = (0, import_react9.useCallback)((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 = (0, import_react9.useCallback)((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 = (0, import_react9.useCallback)((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,
@@ -2204,9 +2350,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) {
@@ -2226,12 +2376,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__ */ (0, import_jsx_runtime7.jsxs)(
     "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__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
@@ -2258,8 +2440,7 @@ function FeedbackButton({ position = "bottom-right" }) {
           {
             style: {
               position: "absolute",
-              bottom: 56,
-              right: 0,
+              ...menuPositionStyle,
               marginBottom: 4,
               width: 176,
               borderRadius: 8,
@@ -2324,7 +2505,7 @@ function FeedbackButton({ position = "bottom-right" }) {
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Camera, { style: { width: 16, height: 16, color: T.primary, flexShrink: 0 } }),
                     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontWeight: 500 }, children: capturing ? "Capturing\u2026" : "Screenshot" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontWeight: 500 }, children: capturing ? "Capturing..." : "Screenshot" }),
                       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 10, color: T.muted }, children: "Capture current view" })
                     ] })
                   ]
@@ -2339,8 +2520,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%",
@@ -2349,7 +2530,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",