@sylergydigital/issue-pin-sdk 0.6.4 → 0.6.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to `@sylergydigital/issue-pin-sdk` are documented here.
 
+## [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

@@ -2168,10 +2168,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 +2231,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 +2319,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 +2345,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 +2409,7 @@ function FeedbackButton({ position = "bottom-right" }) {
           {
             style: {
               position: "absolute",
-              bottom: 56,
-              right: 0,
+              ...menuPositionStyle,
               marginBottom: 4,
               width: 176,
               borderRadius: 8,
@@ -2324,7 +2474,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 +2489,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 +2499,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",