@sylergydigital/issue-pin-sdk 0.6.3 → 0.6.5

package/CHANGELOG.md

@@ -0,0 +1,245 @@
+# Changelog
+
+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
+- **UUID normalization for non-UUID auth providers** — SDK auto-converts Firebase, Auth0, Cognito, and other non-UUID user IDs to deterministic UUID v5 format at the SDK boundary. Existing UUID-format IDs pass through unchanged.
+- `normalizeUserId()` / `toSupabaseUuid()` — public utility export for converting user IDs outside the SDK component lifecycle.
+- `CSP_REQUIREMENTS` — typed constant exporting all Content Security Policy directives required by the SDK (`connect-src`, `img-src`, `style-src`), usable in server middleware or build-time CSP generation.
+- Runtime CSP violation detection — `subscribeCspDetection()` automatically activates on SDK mount and logs actionable `[IssuePin]` console warnings when CSP blocks SDK functionality. Per-directive deduplication prevents warning spam.
+- CSP documentation section in SDK README with copy-paste directive block, per-directive explanation table, and programmatic access example.
+- Debug logging for ID conversions — when `debug={true}`, logs `[EW SDK] User ID normalized: "{raw}" -> "{effective}"` for converted IDs.
+
+### Fixed
+- Stale closure in identity warning gated on `authReady` state.
+- Missing SSR guard in `subscribeCspDetection` (safe for server-side rendering).
+
+### Dependencies
+- Added `uuid@^11.0.3` as bundled dependency (CommonJS-compatible).
+
+## [0.6.2] - 2026-04-02
+
+### Fixed
+- Replaced `html2canvas` with `html2canvas-pro` to support modern CSS features like `oklab` color space.
+
+## [0.6.1] - 2026-03-24
+
+### Changed
+- Set up public SDK mirror and npm release pipeline.
+
+## [0.6.0] - 2026-03-24
+
+### Changed
+- Set up public SDK mirror and npm release pipeline.
+
+## [0.5.9] - 2026-03-24
+
+### Changed
+- Public SDK mirror and npm registry setup.
+
+## [0.5.8] - 2026-03-23
+
+### Added
+- `showHints` toggle for instructional UI hints in the SDK.
+
+## [0.5.7] - 2026-03-23
+
+### Added
+- Verified LMS federation rollout (patch).
+
+## [0.5.6] - 2026-03-23
+
+### Added
+- LMS federation rollout with verification.
+
+## [0.5.5] - 2026-03-22
+
+### Fixed
+- SDK build and packaging fixes.
+
+## [0.5.4] - 2026-03-22
+
+### Fixed
+- SDK build and packaging fixes.
+
+## [0.5.3] - 2026-03-22
+
+### Changed
+- Aligned SDK docs and package metadata with router-free integration.
+
+## [0.5.2] - 2026-03-22
+
+### Added
+- Iframe review mode for SDK pins (canvas review surface).
+
+## [0.5.1] - 2026-03-22
+
+### Added
+- Anonymous screenshot reads for SDK workspaces via Supabase RLS.
+- ThreadPins test coverage.
+- npm registry publishing.
+
+## [0.5.0] - 2026-03-22
+
+### Changed
+- npm versioning aligned with git tags.
+
+## [0.4.9] - 2026-03-22
+
+### Changed
+- Vite host allowlist and gitignore for local tooling.
+
+## [0.4.8] - 2026-03-17
+
+### Added
+- SDK customization APIs for launcher visibility and pin visibility control.
+
+## [0.4.7] - 2026-03-17
+
+### Fixed
+- SDK publish build for controlled pin mode.
+
+## [0.4.6] - 2026-03-17
+
+### Changed
+- Thread pins open in a new tab.
+
+## [0.4.5] - 2026-03-17
+
+### Changed
+- Rewrote SDK pin positioning lifecycle for stability.
+
+## [0.4.4] - 2026-03-17
+
+### Fixed
+- Stabilized SDK pin rehydration observer.
+
+## [0.4.3] - 2026-03-17
+
+### Changed
+- Allow anonymous `sdk-resolve` calls.
+
+## [0.4.2] - 2026-03-17
+
+### Changed
+- Allow commenter workspace memberships.
+
+## [0.4.1] - 2026-03-17
+
+### Added
+- Documentation for federated first-write gating.
+
+## [0.4.0] - 2026-03-17
+
+### Fixed
+- Federated SDK author attribution.
+
+## [0.3.4] - 2026-03-16
+
+### Added
+- Anonymous update RLS policy.
+
+## [0.3.3] - 2026-03-16
+
+### Changed
+- Enabled React Router v7 future flag.
+
+## [0.3.2] - 2026-03-16
+
+### Changed
+- Relaxed thread comments foreign key constraint.
+
+## [0.3.1] - 2026-03-16
+
+### Added
+- RLS policies for anonymous inserts.
+
+## [0.3.0] - 2026-03-16
+
+### Fixed
+- SDK feedback launcher click behavior.
+
+## [0.2.9] - 2026-03-16
+
+### Added
+- Hardcoded SDK theme for consistent styling.
+
+## [0.2.8] - 2026-03-16
+
+### Fixed
+- FeedbackButton `.d.ts` build ordering.
+
+## [0.2.7] - 2026-03-16
+
+### Added
+- Debug logging for SDK menu state.
+
+### Fixed
+- SDK menu state management hardened.
+
+## [0.2.6] - 2026-03-16
+
+### Fixed
+- SDK feedback launcher click handling.
+
+## [0.2.5] - 2026-03-16
+
+### Fixed
+- FeedbackButton interaction reliability.
+
+## [0.2.4] - 2026-03-16
+
+### Fixed
+- Stabilized `getSignedUrlRef` for screenshot storage.
+
+## [0.2.3] - 2026-03-16
+
+### Added
+- Error boundary wrapping for ThreadPins.
+
+## [0.2.0] - 2026-03-16
+
+### Changed
+- Renamed SDK package to `@sylergydigital/issue-pin-sdk`.
+
+## [0.1.8] - 2026-03-16
+
+### Fixed
+- TS2722 error in ScreenshotFeedback component.
+
+## [0.1.6] - 2026-03-16
+
+### Fixed
+- Viewport auto-screenshot capture.
+
+## [0.1.5] - 2026-03-16
+
+### Fixed
+- Auto-screenshot fetch reliability.
+
+## [0.1.0] - 2026-03-16
+
+### Added
+- Initial SDK release as `@sylergydigital/issue-pin-sdk`.
+- `<IssuePin />` drop-in component with pin annotations, screenshot capture, and threaded discussions.
+- Supabase-backed real-time data layer.
+- Federated user identity for SDK consumers.

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",