@sylergydigital/issue-pin-sdk 0.6.0

package/dist/index.cjs

@@ -0,0 +1,2500 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ElementWhisperer: () => IssuePin,
+  FeedbackButton: () => FeedbackButton,
+  FeedbackOverlay: () => FeedbackOverlay,
+  FeedbackProvider: () => FeedbackProvider,
+  IssuePin: () => IssuePin,
+  ReviewSurfaceOverlay: () => ReviewSurfaceOverlay,
+  ScreenshotFeedback: () => ScreenshotFeedback,
+  SdkCommentPopover: () => SdkCommentPopover,
+  ThreadPins: () => ThreadPins,
+  Z: () => Z,
+  useFeedback: () => useFeedback,
+  useFeedbackSafe: () => useFeedbackSafe,
+  useIssuePinAnchor: () => useIssuePinAnchor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/IssuePin.tsx
+var import_react11 = require("react");
+
+// src/FeedbackProvider.tsx
+var import_react2 = require("react");
+var import_supabase_js = require("@supabase/supabase-js");
+var import_html2canvas = __toESM(require("html2canvas"), 1);
+
+// src/useDocumentPathname.ts
+var import_react = require("react");
+var pathnameSubscribers = 0;
+var listeners = /* @__PURE__ */ new Set();
+var origPush;
+var origReplace;
+function notify() {
+  listeners.forEach((l) => l());
+}
+function subscribePathname(onChange) {
+  if (pathnameSubscribers === 0) {
+    origPush = history.pushState.bind(history);
+    origReplace = history.replaceState.bind(history);
+    history.pushState = (...args) => {
+      origPush(...args);
+      notify();
+    };
+    history.replaceState = (...args) => {
+      origReplace(...args);
+      notify();
+    };
+    window.addEventListener("popstate", notify);
+  }
+  pathnameSubscribers++;
+  listeners.add(onChange);
+  return () => {
+    listeners.delete(onChange);
+    pathnameSubscribers--;
+    if (pathnameSubscribers === 0) {
+      history.pushState = origPush;
+      history.replaceState = origReplace;
+      window.removeEventListener("popstate", notify);
+    }
+  };
+}
+function getLocationCombinedSnapshot() {
+  if (typeof window === "undefined") return "/\n";
+  return `${window.location.pathname}
+${window.location.search}`;
+}
+function getServerSnapshot() {
+  return "/\n";
+}
+function useDocumentLocationParts() {
+  const combined = (0, import_react.useSyncExternalStore)(subscribePathname, getLocationCombinedSnapshot, getServerSnapshot);
+  const [pathname, search] = combined.split("\n");
+  return { pathname, search: search ?? "" };
+}
+
+// src/theme.ts
+var Z = {
+  pins: 99990,
+  overlay: 99991,
+  popover: 99992,
+  launcher: 99993,
+  screenshotModal: 99994,
+  flash: 99998
+};
+var T = {
+  card: "#1a1a1f",
+  fg: "#e4e4e8",
+  border: "#2a2a30",
+  primary: "#6366f1",
+  primaryFg: "#ffffff",
+  accent: "#2e2e35",
+  muted: "#737380",
+  bg: "#141418",
+  input: "#2a2a30",
+  ring: "#6366f1"
+};
+
+// src/FeedbackProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FeedbackContext = (0, import_react2.createContext)(null);
+var MODERN_THREAD_SELECT = "id, page_url, annotation_surface, review_url, selector, anchor_key, coordinate_space, container_key, element_text, element_tag, x_position, y_position, viewport_width, viewport_height, modal_trigger_selector, screenshot_path, status, visibility, created_at";
+var LEGACY_THREAD_SELECT = "id, page_url, selector, element_text, element_tag, x_position, y_position, viewport_width, viewport_height, modal_trigger_selector, screenshot_path, status, visibility, created_at";
+var threadsSchemaModeByWorkspace = /* @__PURE__ */ new Map();
+function isMissingThreadsColumnError(error) {
+  if (!error || typeof error !== "object") return false;
+  const candidate = error;
+  if (candidate.code !== "PGRST204") return false;
+  return typeof candidate.message === "string" && candidate.message.includes("column");
+}
+function toLegacyThreadInsertPayload(payload) {
+  const legacy = { ...payload };
+  delete legacy.annotation_surface;
+  delete legacy.review_url;
+  delete legacy.anchor_key;
+  delete legacy.coordinate_space;
+  delete legacy.container_key;
+  return legacy;
+}
+function normalizeLegacyThread(data) {
+  return {
+    annotation_surface: "host-dom",
+    anchor_key: null,
+    coordinate_space: "document",
+    container_key: null,
+    id: String(data.id ?? ""),
+    page_url: String(data.page_url ?? ""),
+    review_url: null,
+    selector: typeof data.selector === "string" ? data.selector : null,
+    element_text: typeof data.element_text === "string" ? data.element_text : null,
+    element_tag: typeof data.element_tag === "string" ? data.element_tag : null,
+    x_position: typeof data.x_position === "number" ? data.x_position : data.x_position == null ? null : Number(data.x_position),
+    y_position: typeof data.y_position === "number" ? data.y_position : data.y_position == null ? null : Number(data.y_position),
+    viewport_width: typeof data.viewport_width === "number" ? data.viewport_width : data.viewport_width == null ? null : Number(data.viewport_width),
+    viewport_height: typeof data.viewport_height === "number" ? data.viewport_height : data.viewport_height == null ? null : Number(data.viewport_height),
+    modal_trigger_selector: typeof data.modal_trigger_selector === "string" ? data.modal_trigger_selector : null,
+    screenshot_path: typeof data.screenshot_path === "string" ? data.screenshot_path : null,
+    status: String(data.status ?? "open"),
+    visibility: String(data.visibility ?? "public"),
+    created_at: String(data.created_at ?? "")
+  };
+}
+function getThreadsSchemaMode(workspaceId) {
+  return threadsSchemaModeByWorkspace.get(workspaceId) ?? "modern";
+}
+function setThreadsSchemaMode(workspaceId, mode) {
+  threadsSchemaModeByWorkspace.set(workspaceId, mode);
+}
+function resolveIssuePinActorUserId(opts) {
+  if (opts.explicitUserId) return opts.explicitUserId;
+  if (opts.hasApiKey && !opts.skipFederation && opts.autoIdentityUserId) {
+    return opts.federatedLocalUserId;
+  }
+  return opts.autoIdentityUserId;
+}
+function resolveIssuePinActorReady(opts) {
+  if (!opts.authReady) return false;
+  if (opts.explicitUserId) return true;
+  if (opts.hasApiKey && !opts.skipFederation && opts.autoIdentityUserId) {
+    return !!opts.federatedLocalUserId;
+  }
+  return true;
+}
+function resolveAnnotationSurface(opts) {
+  if (opts.annotationSurface) return opts.annotationSurface;
+  return opts.reviewUrl ? "review-iframe" : "host-dom";
+}
+function resolveCanPinOnPage(opts) {
+  if (!opts.allowPinOnPage) return false;
+  if (opts.annotationSurface === "review-iframe") {
+    return !!opts.reviewUrl;
+  }
+  return true;
+}
+function buildThreadInsertPayload(opts) {
+  const { pendingPin } = opts;
+  const isReviewSurface = pendingPin.annotationSurface === "review-iframe";
+  return {
+    workspace_id: opts.workspaceId,
+    created_by: opts.userId || null,
+    page_url: pendingPin.pageUrl,
+    annotation_surface: pendingPin.annotationSurface,
+    review_url: isReviewSurface ? pendingPin.reviewUrl : null,
+    selector: isReviewSurface ? null : pendingPin.selector,
+    anchor_key: isReviewSurface ? null : pendingPin.anchorKey,
+    coordinate_space: pendingPin.coordinateSpace,
+    container_key: isReviewSurface ? null : pendingPin.containerKey,
+    element_text: pendingPin.elementText,
+    element_tag: pendingPin.elementTag,
+    x_position: pendingPin.x,
+    y_position: pendingPin.y,
+    viewport_width: window.innerWidth,
+    viewport_height: window.innerHeight,
+    modal_trigger_selector: null,
+    visibility: opts.visibility,
+    sdk_user_email: opts.userEmail || null,
+    sdk_user_name: opts.userDisplayName || null
+  };
+}
+async function resolveApiKey(apiKey) {
+  const res = await fetch(
+    `https://jzdvmfemzpmgmxupcamh.supabase.co/functions/v1/sdk-resolve`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ apiKey })
+    }
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Unknown error" }));
+    throw new Error(err.error || "Failed to resolve API key");
+  }
+  return res.json();
+}
+function getFunctionsBaseUrl(supabaseUrl) {
+  return `${supabaseUrl.replace(/\/+$/, "")}/functions/v1`;
+}
+async function uploadScreenshot(client, dataUrl, workspaceId) {
+  const res = await fetch(dataUrl);
+  const blob = await res.blob();
+  const fileName = `${workspaceId}/${Date.now()}-${Math.random().toString(36).slice(2, 8)}.jpg`;
+  const { error } = await client.storage.from("screenshots").upload(fileName, blob, {
+    contentType: "image/jpeg",
+    cacheControl: "31536000"
+  });
+  if (error) throw error;
+  return fileName;
+}
+async function uploadScreenshotBlob(client, blob, workspaceId) {
+  const fileName = `${workspaceId}/${Date.now()}-${Math.random().toString(36).slice(2, 8)}.jpg`;
+  const { error } = await client.storage.from("screenshots").upload(fileName, blob, {
+    contentType: "image/jpeg",
+    cacheControl: "31536000"
+  });
+  if (error) throw error;
+  return fileName;
+}
+function FeedbackProvider({
+  children,
+  ...config
+}) {
+  const directProps = config.supabaseUrl && config.supabaseAnonKey && config.workspaceId;
+  const [resolved, setResolved] = (0, import_react2.useState)(
+    directProps ? { supabaseUrl: config.supabaseUrl, supabaseAnonKey: config.supabaseAnonKey, workspaceId: config.workspaceId, autoScreenshotOnPin: false } : null
+  );
+  const [resolveError, setResolveError] = (0, import_react2.useState)(null);
+  const [autoIdentity, setAutoIdentity] = (0, import_react2.useState)({});
+  const [authReady, setAuthReady] = (0, import_react2.useState)(!config.supabaseClient || !!(config.userId || config.userEmail || config.userDisplayName));
+  (0, import_react2.useEffect)(() => {
+    if (!config.supabaseClient) {
+      setAuthReady(true);
+      return;
+    }
+    if (config.userId || config.userEmail || config.userDisplayName) {
+      setAuthReady(true);
+      return;
+    }
+    let cancelled = false;
+    const extractIdentity = (session) => ({
+      userId: session.user.id,
+      userEmail: session.user.email,
+      userDisplayName: session.user.user_metadata?.display_name ?? session.user.user_metadata?.full_name ?? session.user.user_metadata?.name ?? (session.user.email ? session.user.email.split("@")[0] : void 0),
+      accessToken: session.access_token
+    });
+    const initAuth = async () => {
+      try {
+        const { data: { session } } = await config.supabaseClient.auth.getSession();
+        if (cancelled) return;
+        if (session?.user) {
+          const identity = extractIdentity(session);
+          setAutoIdentity(identity);
+          console.log("[EW SDK] Auto-identity resolved:", { email: identity.userEmail, displayName: identity.userDisplayName });
+        } else {
+          console.log("[EW SDK] Auto-identity: no session found (user not logged in)");
+        }
+      } catch (err) {
+        console.warn("[IssuePin] Failed to auto-detect user from supabaseClient:", err);
+      } finally {
+        if (!cancelled) setAuthReady(true);
+      }
+    };
+    initAuth();
+    const { data: { subscription } } = config.supabaseClient.auth.onAuthStateChange(
+      (_event, session) => {
+        if (cancelled) return;
+        if (session?.user) {
+          const identity = extractIdentity(session);
+          setAutoIdentity(identity);
+          console.log("[EW SDK] Auth state changed \u2014 identity updated:", { email: identity.userEmail, displayName: identity.userDisplayName });
+        } else {
+          setAutoIdentity({});
+          console.log("[EW SDK] Auth state changed \u2014 user signed out");
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+      subscription.unsubscribe();
+    };
+  }, [config.supabaseClient, config.userId, config.userEmail, config.userDisplayName]);
+  const effectiveEmail = config.userEmail ?? autoIdentity.userEmail;
+  const effectiveDisplayName = config.userDisplayName ?? autoIdentity.userDisplayName;
+  const resolvedAnnotationSurface = resolveAnnotationSurface({
+    annotationSurface: config.annotationSurface,
+    reviewUrl: config.reviewUrl
+  });
+  (0, import_react2.useEffect)(() => {
+    if (resolved) return;
+    if (!config.apiKey) {
+      setResolveError("IssuePin: provide either apiKey or legacy supabase props");
+      return;
+    }
+    let cancelled = false;
+    resolveApiKey(config.apiKey).then((r) => {
+      if (cancelled) return;
+      if (!r.supabaseUrl || !r.supabaseAnonKey || !r.workspaceId) {
+        setResolveError("SDK resolved config is incomplete (missing supabaseUrl, supabaseAnonKey, or workspaceId)");
+        return;
+      }
+      setResolved(r);
+    }).catch((e) => {
+      if (!cancelled) setResolveError(e.message);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [config.apiKey, config.supabaseUrl, config.supabaseAnonKey, config.workspaceId]);
+  const [federationDone, setFederationDone] = (0, import_react2.useState)(false);
+  const [federatedLocalUserId, setFederatedLocalUserId] = (0, import_react2.useState)();
+  const [federationError, setFederationError] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (federationDone) return;
+    if (!resolved || !config.apiKey) return;
+    if (config.skipFederation) return;
+    if (!autoIdentity.userId || !autoIdentity.userEmail || !autoIdentity.accessToken) return;
+    let cancelled = false;
+    const federate = async () => {
+      try {
+        const functionsBaseUrl = getFunctionsBaseUrl(resolved.supabaseUrl);
+        const res = await fetch(
+          `${functionsBaseUrl}/sdk-federate`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${autoIdentity.accessToken}`
+            },
+            body: JSON.stringify({
+              apiKey: config.apiKey,
+              externalId: autoIdentity.userId,
+              email: autoIdentity.userEmail,
+              displayName: autoIdentity.userDisplayName || void 0
+            })
+          }
+        );
+        if (!cancelled) {
+          if (res.ok) {
+            const data = await res.json();
+            setFederatedLocalUserId(data.user_id || void 0);
+            setFederationError(null);
+            console.log("[EW SDK] Auto-federation complete:", { userId: data.user_id, isNew: data.is_new_user });
+          } else {
+            const err = await res.json().catch(() => ({}));
+            const message = err.error || `Auto-federation failed (${res.status})`;
+            setFederationError(message);
+            console.warn("[EW SDK] Auto-federation failed:", message);
+          }
+          setFederationDone(true);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : "Auto-federation error";
+          setFederationError(message);
+          console.warn("[EW SDK] Auto-federation error:", message);
+          setFederationDone(true);
+        }
+      }
+    };
+    federate();
+    return () => {
+      cancelled = true;
+    };
+  }, [resolved, config.apiKey, config.skipFederation, autoIdentity.userId, autoIdentity.userEmail, autoIdentity.userDisplayName, autoIdentity.accessToken, federationDone]);
+  const effectiveUserId = resolveIssuePinActorUserId({
+    explicitUserId: config.userId,
+    autoIdentityUserId: autoIdentity.userId,
+    federatedLocalUserId,
+    hasApiKey: !!config.apiKey,
+    skipFederation: config.skipFederation
+  });
+  const actorReady = resolveIssuePinActorReady({
+    authReady,
+    explicitUserId: config.userId,
+    autoIdentityUserId: autoIdentity.userId,
+    federatedLocalUserId,
+    hasApiKey: !!config.apiKey,
+    skipFederation: config.skipFederation
+  });
+  const actorError = federationDone && !actorReady && (federationError || "Unable to link your identity yet. Please retry in a moment.") ? federationError || "Unable to link your identity yet. Please retry in a moment." : null;
+  if (resolveError) {
+    console.error("[EW SDK]", resolveError);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  if (!resolved) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  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");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FeedbackProviderInner,
+    {
+      supabaseUrl: resolved.supabaseUrl,
+      supabaseAnonKey: resolved.supabaseAnonKey,
+      workspaceId: resolved.workspaceId,
+      siteUrl: resolved.siteUrl,
+      initialAutoScreenshot: resolved.autoScreenshotOnPin ?? false,
+      allowPinOnPage: config.allowPinOnPage ?? true,
+      allowScreenshot: config.allowScreenshot ?? true,
+      showHints: config.showHints ?? true,
+      annotationSurface: resolvedAnnotationSurface,
+      reviewUrl: config.reviewUrl ?? null,
+      scrollContainer: config.scrollContainer,
+      resolveAnchor: config.resolveAnchor,
+      isModeControlled: onModeChangeUnified !== void 0,
+      controlledMode: controlledModeFromProps,
+      onModeChange: onModeChangeUnified,
+      initialModeUncontrolled,
+      debug: config.debug ?? false,
+      authReady,
+      actorReady,
+      actorError,
+      userId: effectiveUserId,
+      userEmail: effectiveEmail,
+      userDisplayName: effectiveDisplayName,
+      children
+    }
+  );
+}
+function FeedbackProviderInner({
+  children,
+  supabaseUrl,
+  supabaseAnonKey,
+  workspaceId,
+  siteUrl,
+  initialAutoScreenshot,
+  allowPinOnPage,
+  allowScreenshot,
+  showHints,
+  annotationSurface,
+  reviewUrl,
+  scrollContainer,
+  resolveAnchor,
+  isModeControlled,
+  controlledMode,
+  onModeChange,
+  initialModeUncontrolled,
+  authReady,
+  actorReady,
+  actorError,
+  debug,
+  userId,
+  userEmail,
+  userDisplayName
+}) {
+  const debugLog = (0, import_react2.useCallback)((message, extra) => {
+    if (!debug) return;
+    if (extra === void 0) {
+      console.log(`[EW SDK] ${message}`);
+      return;
+    }
+    console.log(`[EW SDK] ${message}`, extra);
+  }, [debug]);
+  (0, import_react2.useEffect)(() => {
+    if (!userDisplayName && !userEmail) {
+      console.warn(
+        '[IssuePin] No user identity provided \u2014 comments will appear as "Unknown". Pass supabaseClient={supabase} for automatic identity, or user={{ email, displayName }} for manual attribution. See https://github.com/sylergydigital/issue-pin/blob/main/sdk/README.md#user-identity-avoiding-unknown-comments'
+      );
+    }
+  }, []);
+  const client = (0, import_react2.useMemo)(() => {
+    try {
+      return (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey, {
+        auth: {
+          persistSession: false,
+          autoRefreshToken: false,
+          detectSessionInUrl: false
+        }
+      });
+    } catch (err) {
+      console.error("[EW SDK] Failed to create Supabase client:", err);
+      return null;
+    }
+  }, [supabaseUrl, supabaseAnonKey]);
+  const [autoScreenshotOnPin, setAutoScreenshotOnPin] = (0, import_react2.useState)(initialAutoScreenshot);
+  (0, import_react2.useEffect)(() => {
+    if (!client) return;
+    client.from("workspaces").select("auto_screenshot_on_pin").eq("id", workspaceId).single().then(({ data }) => {
+      if (data) setAutoScreenshotOnPin(data.auto_screenshot_on_pin);
+    });
+  }, [client, workspaceId]);
+  const [threads, setThreads] = (0, import_react2.useState)([]);
+  const [isLoadingThreads, setIsLoadingThreads] = (0, import_react2.useState)(false);
+  const [reviewOpen, setReviewOpen] = (0, import_react2.useState)(false);
+  const [internalMode, setInternalMode] = (0, import_react2.useState)(
+    () => isModeControlled ? "view" : initialModeUncontrolled
+  );
+  const [menuOpen, setMenuOpen] = (0, import_react2.useState)(false);
+  const [pendingPin, setPendingPin] = (0, import_react2.useState)(null);
+  const [screenshotDataUrl, setScreenshotDataUrl] = (0, import_react2.useState)(null);
+  const [pendingScreenshotPin, setPendingScreenshotPin] = (0, import_react2.useState)(null);
+  const [screenshotCapturing, setScreenshotCapturing] = (0, import_react2.useState)(false);
+  const [flashing, setFlashing] = (0, import_react2.useState)(false);
+  const mode = isModeControlled ? controlledMode ?? "view" : internalMode;
+  const setMode = (0, import_react2.useCallback)(
+    (m) => {
+      if (!isModeControlled) setInternalMode(m);
+      onModeChange?.(m);
+    },
+    [isModeControlled, onModeChange]
+  );
+  const feedbackActive = mode === "annotate";
+  const setFeedbackActive = (0, import_react2.useCallback)(
+    (active) => {
+      setMode(active ? "annotate" : "view");
+    },
+    [setMode]
+  );
+  const canPinOnPage = resolveCanPinOnPage({
+    allowPinOnPage,
+    annotationSurface,
+    reviewUrl
+  });
+  const openMenu = (0, import_react2.useCallback)(() => {
+    setMenuOpen(true);
+  }, []);
+  const closeMenu = (0, import_react2.useCallback)(() => {
+    setMenuOpen(false);
+  }, []);
+  const toggleMenu = (0, import_react2.useCallback)(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);
+  const enterPinMode = (0, import_react2.useCallback)(() => {
+    if (!canPinOnPage) return;
+    setMode("annotate");
+    setMenuOpen(false);
+    if (annotationSurface === "review-iframe") {
+      setReviewOpen(true);
+    }
+  }, [annotationSurface, canPinOnPage, setMode]);
+  const exitPinMode = (0, import_react2.useCallback)(() => {
+    setMode("view");
+    setMenuOpen(false);
+    setPendingPin(null);
+    if (annotationSurface === "review-iframe") {
+      setReviewOpen(false);
+    }
+  }, [annotationSurface, setMode]);
+  (0, import_react2.useEffect)(() => {
+    if (annotationSurface !== "review-iframe") return;
+    if (mode === "view") {
+      setReviewOpen(false);
+    }
+  }, [annotationSurface, mode]);
+  const { pathname } = useDocumentLocationParts();
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute("data-ew-sdk", "true");
+  }
+  (0, import_react2.useEffect)(() => {
+    const handleSdkPointerDownCapture = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest('[data-ew-feedback-interactive="true"]')) return;
+      event.stopPropagation();
+    };
+    window.addEventListener("pointerdown", handleSdkPointerDownCapture, true);
+    return () => {
+      window.removeEventListener("pointerdown", handleSdkPointerDownCapture, true);
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    debugLog("FeedbackProvider mounted", { workspaceId, path: pathname });
+    return () => {
+      debugLog("FeedbackProvider unmounted", { workspaceId, path: pathname });
+    };
+  }, [debugLog, workspaceId, pathname]);
+  (0, import_react2.useEffect)(() => {
+    debugLog("mode / feedbackActive", { mode, feedbackActive });
+  }, [debugLog, mode, feedbackActive]);
+  (0, import_react2.useEffect)(() => {
+    debugLog("menuOpen =", menuOpen);
+  }, [debugLog, menuOpen]);
+  const fetchThreads = (0, import_react2.useCallback)(async () => {
+    if (!client) return;
+    setIsLoadingThreads(true);
+    try {
+      const pageUrl = pathname;
+      const schemaMode = getThreadsSchemaMode(workspaceId);
+      const runQuery = async (mode2) => {
+        const threadsTable = client.from("threads");
+        let query = threadsTable.select(mode2 === "modern" ? MODERN_THREAD_SELECT : LEGACY_THREAD_SELECT).eq("workspace_id", workspaceId).eq("page_url", pageUrl).neq("status", "resolved").order("created_at", { ascending: true });
+        if (mode2 === "modern") {
+          if (annotationSurface === "review-iframe") {
+            query = query.eq("annotation_surface", "review-iframe").eq("review_url", reviewUrl ?? "");
+          } else {
+            query = query.or("annotation_surface.is.null,annotation_surface.eq.host-dom");
+          }
+        } else if (annotationSurface === "review-iframe") {
+          return { data: [], error: null };
+        }
+        const result2 = await query;
+        if (result2.error) return { data: null, error: result2.error };
+        const rows = result2.data ?? [];
+        return {
+          data: mode2 === "modern" ? rows : rows.map(normalizeLegacyThread),
+          error: null
+        };
+      };
+      let result = await runQuery(schemaMode);
+      if (result.error && schemaMode === "modern" && isMissingThreadsColumnError(result.error)) {
+        console.warn("[EW SDK] Falling back to legacy threads schema compatibility mode.");
+        setThreadsSchemaMode(workspaceId, "legacy");
+        result = await runQuery("legacy");
+      }
+      if (result.error) throw result.error;
+      setThreads(result.data || []);
+    } catch (err) {
+      console.error("[EW SDK] Failed to fetch threads:", err);
+    } finally {
+      setIsLoadingThreads(false);
+    }
+  }, [annotationSurface, client, reviewUrl, workspaceId, pathname]);
+  (0, import_react2.useEffect)(() => {
+    fetchThreads();
+  }, [fetchThreads]);
+  (0, import_react2.useEffect)(() => {
+    if (!client) return;
+    const channel = client.channel(`sdk-threads-${workspaceId}`).on("postgres_changes", {
+      event: "*",
+      schema: "public",
+      table: "threads",
+      filter: `workspace_id=eq.${workspaceId}`
+    }, () => {
+      fetchThreads();
+    }).subscribe();
+    return () => {
+      client.removeChannel(channel);
+    };
+  }, [client, workspaceId, fetchThreads]);
+  const captureAndAttachScreenshot = (0, import_react2.useCallback)(async (threadId) => {
+    if (!client) return;
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      const canvas = await (0, import_html2canvas.default)(document.body, {
+        useCORS: true,
+        allowTaint: true,
+        logging: false,
+        scale: window.devicePixelRatio || 1,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        scrollX: window.scrollX,
+        scrollY: window.scrollY,
+        x: window.scrollX,
+        y: window.scrollY,
+        ignoreElements: (el) => {
+          return el.closest?.('[data-ew-feedback-interactive="true"]') !== null;
+        }
+      });
+      const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), "image/jpeg", 0.8);
+      });
+      const screenshotPath = await uploadScreenshotBlob(client, blob, workspaceId);
+      await client.from("threads").update({ screenshot_path: screenshotPath }).eq("id", threadId);
+      setFlashing(true);
+      setTimeout(() => setFlashing(false), 300);
+      console.log("[EW SDK] Auto-screenshot attached to thread", threadId);
+    } catch (err) {
+      console.error("[EW SDK] Auto-screenshot failed:", err);
+    }
+  }, [client, workspaceId]);
+  const startScreenshotCapture = (0, import_react2.useCallback)(async () => {
+    if (!allowScreenshot) return;
+    setMenuOpen(false);
+    setScreenshotCapturing(true);
+    try {
+      const canvas = await (0, import_html2canvas.default)(document.body, {
+        useCORS: true,
+        scale: window.devicePixelRatio,
+        logging: false,
+        ignoreElements: (el) => el.closest?.('[data-ew-feedback-interactive="true"]') !== null
+      });
+      const dataUrl = canvas.toDataURL("image/jpeg", 0.7);
+      setScreenshotDataUrl(dataUrl);
+    } catch (err) {
+      console.error("[EW SDK] Screenshot capture failed:", err);
+    } finally {
+      setScreenshotCapturing(false);
+    }
+  }, [allowScreenshot]);
+  const submitThread = (0, import_react2.useCallback)(
+    async (body, visibility) => {
+      if (!pendingPin || !client) return;
+      if (!actorReady) throw new Error(actorError || "Unable to link your identity yet. Please retry in a moment.");
+      const threadPayload = buildThreadInsertPayload({
+        workspaceId,
+        userId,
+        userEmail,
+        userDisplayName,
+        pendingPin,
+        visibility
+      });
+      const insertThread = async (payload) => client.from("threads").insert(payload).select().single();
+      let { data: thread, error: threadErr } = await insertThread(
+        getThreadsSchemaMode(workspaceId) === "legacy" ? toLegacyThreadInsertPayload(threadPayload) : threadPayload
+      );
+      if (threadErr && getThreadsSchemaMode(workspaceId) === "modern" && isMissingThreadsColumnError(threadErr)) {
+        if (pendingPin.annotationSurface === "review-iframe") {
+          throw new Error("This workspace is missing required review-surface thread columns. Apply the latest Issue Pin SDK migrations and retry.");
+        }
+        console.warn("[EW SDK] Retrying thread insert against legacy threads schema.");
+        setThreadsSchemaMode(workspaceId, "legacy");
+        ({ data: thread, error: threadErr } = await insertThread(toLegacyThreadInsertPayload(threadPayload)));
+      }
+      if (threadErr) throw threadErr;
+      const { error: commentErr } = await client.from("thread_comments").insert({
+        thread_id: thread.id,
+        author_id: userId || null,
+        body,
+        visibility,
+        sdk_user_email: userEmail || null,
+        sdk_user_name: userDisplayName || null
+      });
+      if (commentErr) throw commentErr;
+      setPendingPin(null);
+      if (pendingPin.annotationSurface === "review-iframe") {
+        setMode("view");
+      }
+      await fetchThreads();
+      debugLog("submitThread complete", { autoScreenshotOnPin, threadId: thread.id });
+      if (autoScreenshotOnPin) {
+        captureAndAttachScreenshot(thread.id);
+      }
+    },
+    [pendingPin, client, actorReady, actorError, workspaceId, userId, userEmail, userDisplayName, fetchThreads, autoScreenshotOnPin, captureAndAttachScreenshot, setMode]
+  );
+  const submitScreenshotThread = (0, import_react2.useCallback)(
+    async (body, visibility) => {
+      if (!pendingScreenshotPin || !screenshotDataUrl || !client) return;
+      if (!actorReady) throw new Error(actorError || "Unable to link your identity yet. Please retry in a moment.");
+      const { x, y, pageUrl } = pendingScreenshotPin;
+      const screenshotUrl = await uploadScreenshot(client, screenshotDataUrl, workspaceId);
+      const threadPayload = {
+        workspace_id: workspaceId,
+        created_by: userId || null,
+        page_url: pageUrl,
+        selector: null,
+        anchor_key: null,
+        annotation_surface: annotationSurface,
+        coordinate_space: "document",
+        container_key: null,
+        element_text: null,
+        element_tag: "screenshot",
+        review_url: annotationSurface === "review-iframe" ? reviewUrl : null,
+        x_position: x,
+        y_position: y,
+        viewport_width: window.innerWidth,
+        viewport_height: window.innerHeight,
+        screenshot_path: screenshotUrl,
+        visibility,
+        sdk_user_email: userEmail || null,
+        sdk_user_name: userDisplayName || null
+      };
+      const insertThread = async (payload) => client.from("threads").insert(payload).select().single();
+      let { data: thread, error: threadErr } = await insertThread(
+        getThreadsSchemaMode(workspaceId) === "legacy" ? toLegacyThreadInsertPayload(threadPayload) : threadPayload
+      );
+      if (threadErr && getThreadsSchemaMode(workspaceId) === "modern" && isMissingThreadsColumnError(threadErr)) {
+        if (annotationSurface === "review-iframe") {
+          throw new Error("This workspace is missing required review-surface thread columns. Apply the latest Issue Pin SDK migrations and retry.");
+        }
+        console.warn("[EW SDK] Retrying screenshot thread insert against legacy threads schema.");
+        setThreadsSchemaMode(workspaceId, "legacy");
+        ({ data: thread, error: threadErr } = await insertThread(toLegacyThreadInsertPayload(threadPayload)));
+      }
+      if (threadErr) throw threadErr;
+      const { error: commentErr } = await client.from("thread_comments").insert({
+        thread_id: thread.id,
+        author_id: userId || null,
+        body,
+        visibility,
+        sdk_user_email: userEmail || null,
+        sdk_user_name: userDisplayName || null
+      });
+      if (commentErr) throw commentErr;
+      setPendingScreenshotPin(null);
+      setScreenshotDataUrl(null);
+      await fetchThreads();
+    },
+    [pendingScreenshotPin, screenshotDataUrl, client, actorReady, actorError, workspaceId, userId, userEmail, userDisplayName, fetchThreads, annotationSurface, reviewUrl]
+  );
+  if (!client) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    FeedbackContext.Provider,
+    {
+      value: {
+        client,
+        workspaceId,
+        siteUrl,
+        userId,
+        userEmail,
+        userDisplayName,
+        authReady,
+        actorReady,
+        actorError,
+        debug,
+        canPinOnPage,
+        canScreenshot: allowScreenshot,
+        showHints,
+        annotationSurface,
+        reviewUrl,
+        reviewOpen,
+        setReviewOpen,
+        scrollContainer,
+        resolveAnchor,
+        screenshotCapturing,
+        threads,
+        isLoadingThreads,
+        mode,
+        setMode,
+        feedbackActive,
+        setFeedbackActive,
+        menuOpen,
+        setMenuOpen,
+        openMenu,
+        closeMenu,
+        toggleMenu,
+        enterPinMode,
+        exitPinMode,
+        startScreenshotCapture,
+        pendingPin,
+        setPendingPin,
+        screenshotDataUrl,
+        setScreenshotDataUrl,
+        pendingScreenshotPin,
+        setPendingScreenshotPin,
+        submitThread,
+        submitScreenshotThread,
+        refreshThreads: fetchThreads
+      },
+      children: [
+        children,
+        flashing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes ew-flash-fade { 0% { opacity: 0.85; } 100% { opacity: 0; } }` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                inset: 0,
+                background: "white",
+                pointerEvents: "none",
+                zIndex: Z.flash,
+                animation: "ew-flash-fade 300ms ease-out forwards"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function useFeedback() {
+  const ctx = (0, import_react2.useContext)(FeedbackContext);
+  if (!ctx) throw new Error("useFeedback must be used within <FeedbackProvider>");
+  return ctx;
+}
+function useFeedbackSafe() {
+  return (0, import_react2.useContext)(FeedbackContext);
+}
+
+// src/FeedbackOverlay.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/positioning.ts
+var positionedContainers = /* @__PURE__ */ new WeakMap();
+function clampPercent(value) {
+  return Math.min(100, Math.max(0, value));
+}
+function docPercentToViewport(xPct, yPct) {
+  const doc = document.documentElement;
+  const left = xPct / 100 * doc.scrollWidth - window.scrollX;
+  const top = yPct / 100 * doc.scrollHeight - window.scrollY;
+  return { left, top };
+}
+function getContainerContentSize(container) {
+  return {
+    width: Math.max(container.scrollWidth, 1),
+    height: Math.max(container.scrollHeight, 1)
+  };
+}
+function containerPercentToViewport(container, xPct, yPct) {
+  const rect = container.getBoundingClientRect();
+  const { width, height } = getContainerContentSize(container);
+  return {
+    left: rect.left + xPct / 100 * width - container.scrollLeft,
+    top: rect.top + yPct / 100 * height - container.scrollTop
+  };
+}
+function elementCenterToViewport(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: rect.left + rect.width / 2,
+    top: rect.top + rect.height / 2
+  };
+}
+function elementCenterToContainer(container, element) {
+  const containerRect = container.getBoundingClientRect();
+  const rect = element.getBoundingClientRect();
+  return {
+    left: rect.left - containerRect.left + container.scrollLeft + rect.width / 2,
+    top: rect.top - containerRect.top + container.scrollTop + rect.height / 2
+  };
+}
+function containerPercentToContent(container, xPct, yPct) {
+  const { width, height } = getContainerContentSize(container);
+  return {
+    left: xPct / 100 * width,
+    top: yPct / 100 * height
+  };
+}
+function ensurePositionedContainer(container) {
+  const computed = window.getComputedStyle(container);
+  if (computed.position !== "static") {
+    return () => {
+    };
+  }
+  const existing = positionedContainers.get(container);
+  if (existing) {
+    existing.count += 1;
+    return () => {
+      existing.count -= 1;
+      if (existing.count === 0) {
+        container.style.position = existing.previousInlinePosition;
+        positionedContainers.delete(container);
+      }
+    };
+  }
+  const state = {
+    count: 1,
+    previousInlinePosition: container.style.position
+  };
+  positionedContainers.set(container, state);
+  container.style.position = "relative";
+  return () => {
+    state.count -= 1;
+    if (state.count === 0) {
+      container.style.position = state.previousInlinePosition;
+      positionedContainers.delete(container);
+    }
+  };
+}
+
+// src/FeedbackOverlay.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getElementTag(el) {
+  let tag = el.tagName.toLowerCase();
+  if (el.className && typeof el.className === "string") {
+    const classes = el.className.trim().split(/\s+/).slice(0, 3).join(".");
+    if (classes) tag += `.${classes}`;
+  }
+  return tag;
+}
+function escapeSelectorValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/["\\]/g, "\\$&");
+}
+function generateFallbackSelector(el) {
+  if (!(el instanceof HTMLElement)) return null;
+  if (el.id) return `#${escapeSelectorValue(el.id)}`;
+  const stableAttr = ["data-testid", "data-qa", "data-cy"].find((name) => el.getAttribute(name));
+  if (stableAttr) {
+    return `[${stableAttr}="${escapeSelectorValue(el.getAttribute(stableAttr) || "")}"]`;
+  }
+  const segments = [];
+  let current = el;
+  while (current && current !== document.body && segments.length < 5) {
+    let segment = current.tagName.toLowerCase();
+    if (current.classList.length > 0) {
+      segment += `.${escapeSelectorValue(current.classList[0])}`;
+      segments.unshift(segment);
+      current = current.parentElement;
+      continue;
+    }
+    const parent = current.parentElement;
+    if (!parent) break;
+    const siblings = Array.from(parent.children).filter((child) => child.tagName === current.tagName);
+    const siblingIndex = siblings.indexOf(current) + 1;
+    segment += `:nth-of-type(${siblingIndex})`;
+    segments.unshift(segment);
+    current = parent;
+  }
+  return segments.length > 0 ? segments.join(" > ") : null;
+}
+function FeedbackOverlay() {
+  const ctx = useFeedbackSafe();
+  const [containerVersion, setContainerVersion] = (0, import_react3.useState)(0);
+  const scrollContainer = ctx?.scrollContainer;
+  const container = scrollContainer?.ref.current ?? null;
+  (0, import_react3.useEffect)(() => {
+    if (!container) return;
+    const restorePosition = ensurePositionedContainer(container);
+    const resizeObserver = new ResizeObserver(() => setContainerVersion((value) => value + 1));
+    resizeObserver.observe(container);
+    const schedule = () => setContainerVersion((value) => value + 1);
+    container.addEventListener("scroll", schedule, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", schedule);
+      resizeObserver.disconnect();
+      restorePosition();
+    };
+  }, [container]);
+  const containerLayerStyle = (0, import_react3.useMemo)(() => {
+    if (!container) return null;
+    const { width, height } = getContainerContentSize(container);
+    return {
+      position: "absolute",
+      inset: 0,
+      width,
+      height,
+      background: "transparent",
+      zIndex: Z.overlay,
+      cursor: "crosshair"
+    };
+  }, [container, containerVersion]);
+  const handleClick = (0, import_react3.useCallback)(
+    (e) => {
+      if (!ctx) return;
+      const { mode, setPendingPin, resolveAnchor } = ctx;
+      if (mode !== "annotate") return;
+      e.preventDefault();
+      e.stopPropagation();
+      const overlay2 = e.currentTarget;
+      overlay2.style.pointerEvents = "none";
+      let el = null;
+      try {
+        el = document.elementFromPoint(e.clientX, e.clientY);
+      } finally {
+        overlay2.style.pointerEvents = "auto";
+      }
+      if (!el || el === overlay2) return;
+      const anchor = resolveAnchor?.(el) ?? null;
+      const selector = anchor?.selector ?? generateFallbackSelector(el);
+      let x = 0;
+      let y = 0;
+      let coordinateSpace = "document";
+      let containerKey = null;
+      if (scrollContainer?.ref.current) {
+        const containerEl = scrollContainer.ref.current;
+        const { width, height } = getContainerContentSize(containerEl);
+        const rect = overlay2.getBoundingClientRect();
+        const localX = e.clientX - rect.left;
+        const localY = e.clientY - rect.top;
+        x = clampPercent(localX / width * 100);
+        y = clampPercent(localY / height * 100);
+        coordinateSpace = "container";
+        containerKey = scrollContainer.key;
+      } else {
+        const doc = document.documentElement;
+        const cw = Math.max(doc.scrollWidth, 1);
+        const ch = Math.max(doc.scrollHeight, 1);
+        const cx = e.clientX + window.scrollX;
+        const cy = e.clientY + window.scrollY;
+        x = clampPercent(cx / cw * 100);
+        y = clampPercent(cy / ch * 100);
+      }
+      const elementText = (el.textContent || "").trim().slice(0, 200);
+      const elementTag = getElementTag(el);
+      setPendingPin({
+        annotationSurface: "host-dom",
+        anchorKey: anchor?.key ?? null,
+        coordinateSpace,
+        containerKey,
+        x,
+        y,
+        selector,
+        elementText,
+        elementTag,
+        pageUrl: window.location.pathname,
+        reviewUrl: null
+      });
+    },
+    [ctx, scrollContainer]
+  );
+  if (!ctx || ctx.mode !== "annotate") return null;
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-ew-feedback-interactive": "true",
+      onPointerDownCapture: (e) => e.stopPropagation(),
+      className: container ? "" : "fixed inset-0 cursor-crosshair",
+      style: container ? containerLayerStyle ?? void 0 : { background: "transparent", zIndex: Z.overlay },
+      onClick: handleClick
+    }
+  );
+  if (container) {
+    return (0, import_react_dom.createPortal)(overlay, container);
+  }
+  return overlay;
+}
+
+// src/ThreadPins.tsx
+var import_react5 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_lucide_react = require("lucide-react");
+
+// src/anchorRegistry.ts
+var import_react4 = require("react");
+var anchors = /* @__PURE__ */ new Map();
+var listeners2 = /* @__PURE__ */ new Set();
+function emitChange() {
+  listeners2.forEach((listener) => listener());
+}
+function getRegisteredAnchor(anchorKey) {
+  if (!anchorKey) return null;
+  return anchors.get(anchorKey) ?? null;
+}
+function subscribeAnchorRegistry(listener) {
+  listeners2.add(listener);
+  return () => {
+    listeners2.delete(listener);
+  };
+}
+function useIssuePinAnchor(anchorKey) {
+  const currentNodeRef = (0, import_react4.useRef)(null);
+  return (0, import_react4.useCallback)((node) => {
+    const currentNode = currentNodeRef.current;
+    if (currentNode && currentNode !== node && anchors.get(anchorKey) === currentNode) {
+      anchors.delete(anchorKey);
+      emitChange();
+    }
+    currentNodeRef.current = node;
+    if (node && anchors.get(anchorKey) !== node) {
+      anchors.set(anchorKey, node);
+      emitChange();
+    }
+  }, [anchorKey]);
+}
+
+// src/ThreadPins.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EMPTY_THREADS = [];
+function resolveSelector(selector) {
+  if (!selector) return null;
+  try {
+    return document.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+function arePositionsEqual(prev, next) {
+  return prev.length === next.length && prev.every(
+    (pin, index) => pin.threadId === next[index].threadId && Math.round(pin.top) === Math.round(next[index].top) && Math.round(pin.left) === Math.round(next[index].left)
+  );
+}
+function PinMarker({
+  pin,
+  isHighlighted,
+  onClick,
+  containerMode
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-ew-feedback-interactive": "true",
+      className: `${containerMode ? "absolute" : "fixed"} pointer-events-auto`,
+      style: { top: pin.top - 12, left: pin.left - 12, zIndex: Z.pins },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          onClick,
+          className: `flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-bold shadow-lg cursor-pointer transition-transform hover:scale-125 ${pin.isScreenshot ? "bg-accent text-accent-foreground border border-border" : "bg-primary text-primary-foreground"} ${isHighlighted ? "scale-150 ring-4 ring-primary/50 animate-pulse" : ""}`,
+          title: pin.isScreenshot ? `Thread #${pin.index} (screenshot \u2014 click to preview)` : `Thread #${pin.index}`,
+          children: pin.isScreenshot ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Camera, { className: "h-3 w-3" }) : pin.index
+        }
+      )
+    },
+    pin.threadId
+  );
+}
+function ThreadPins() {
+  const ctx = useFeedbackSafe();
+  const [documentPositions, setDocumentPositions] = (0, import_react5.useState)([]);
+  const [containerPositions, setContainerPositions] = (0, import_react5.useState)([]);
+  const [containerVersion, setContainerVersion] = (0, import_react5.useState)(0);
+  const rafRef = (0, import_react5.useRef)();
+  const { search } = useDocumentLocationParts();
+  const [highlightedThreadId, setHighlightedThreadId] = (0, import_react5.useState)(null);
+  const highlightTimeoutRef = (0, import_react5.useRef)();
+  const lastHighlightedRef = (0, import_react5.useRef)(null);
+  const getSignedUrlRef = (0, import_react5.useRef)(() => Promise.resolve(null));
+  const [previewScreenshot, setPreviewScreenshot] = (0, import_react5.useState)(null);
+  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 scrollContainer = ctx?.scrollContainer;
+  const container = scrollContainer?.ref.current ?? null;
+  const getSignedUrl = (0, import_react5.useCallback)(async (path) => {
+    if (!client) return null;
+    const storagePath = path.includes("/object/public/screenshots/") ? path.split("/object/public/screenshots/")[1] : path.startsWith("http") ? null : path;
+    if (!storagePath) return path;
+    const cached = signedUrlCache.current[storagePath];
+    if (cached && cached.expires > Date.now()) return cached.url;
+    const { data, error } = await client.storage.from("screenshots").createSignedUrl(storagePath, 3600);
+    if (error || !data) return null;
+    signedUrlCache.current[storagePath] = { url: data.signedUrl, expires: Date.now() + 50 * 60 * 1e3 };
+    return data.signedUrl;
+  }, [client]);
+  getSignedUrlRef.current = getSignedUrl;
+  (0, import_react5.useEffect)(() => {
+    if (!container) return;
+    const restorePosition = ensurePositionedContainer(container);
+    const resizeObserver = new ResizeObserver(() => setContainerVersion((value) => value + 1));
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+      restorePosition();
+    };
+  }, [container]);
+  (0, import_react5.useEffect)(() => subscribeAnchorRegistry(() => {
+    setContainerVersion((value) => value + 1);
+  }), []);
+  (0, import_react5.useEffect)(() => {
+    const threadId = new URLSearchParams(search).get("highlight_thread");
+    if (!threadId || threads.length === 0) return;
+    if (lastHighlightedRef.current === threadId) return;
+    const thread = threads.find((t) => t.id === threadId);
+    if (!thread) return;
+    lastHighlightedRef.current = threadId;
+    const params = new URLSearchParams(search);
+    params.delete("highlight_thread");
+    const next = `${window.location.pathname}${params.toString() ? `?${params}` : ""}${window.location.hash}`;
+    window.history.replaceState({}, "", next);
+    setHighlightedThreadId(threadId);
+    if (thread.element_tag === "screenshot" && thread.screenshot_path && thread.x_position != null && thread.y_position != null) {
+      getSignedUrlRef.current(thread.screenshot_path).then((url) => {
+        if (url) {
+          setPreviewScreenshot({
+            url,
+            x: thread.x_position,
+            y: thread.y_position
+          });
+        }
+      });
+    }
+    highlightTimeoutRef.current = setTimeout(() => {
+      setHighlightedThreadId(null);
+    }, 3e3);
+    return () => {
+      if (highlightTimeoutRef.current) clearTimeout(highlightTimeoutRef.current);
+    };
+  }, [search, threads]);
+  const recalculate = (0, import_react5.useCallback)(() => {
+    const nextDocumentPins = [];
+    const nextContainerPins = [];
+    threads.forEach((thread, index) => {
+      const isScreenshot = thread.element_tag === "screenshot";
+      const x = thread.x_position ?? 0;
+      const y = thread.y_position ?? 0;
+      const pin = {
+        threadId: thread.id,
+        top: 0,
+        left: 0,
+        index: index + 1,
+        isScreenshot,
+        screenshotPath: thread.screenshot_path,
+        screenshotX: thread.x_position,
+        screenshotY: thread.y_position
+      };
+      if (!isScreenshot && thread.coordinate_space === "container") {
+        if (!container || !thread.container_key || thread.container_key !== scrollContainer?.key) {
+          return;
+        }
+        const anchorElement2 = getRegisteredAnchor(thread.anchor_key) ?? resolveSelector(thread.selector);
+        const resolved2 = anchorElement2 ? elementCenterToContainer(container, anchorElement2) : containerPercentToContent(container, x, y);
+        pin.left = resolved2.left;
+        pin.top = resolved2.top;
+        nextContainerPins.push(pin);
+        return;
+      }
+      const anchorElement = !isScreenshot ? getRegisteredAnchor(thread.anchor_key) ?? resolveSelector(thread.selector) : null;
+      const resolved = anchorElement ? elementCenterToViewport(anchorElement) : docPercentToViewport(x, y);
+      pin.left = resolved.left;
+      pin.top = resolved.top;
+      nextDocumentPins.push(pin);
+    });
+    setDocumentPositions((prev) => arePositionsEqual(prev, nextDocumentPins) ? prev : nextDocumentPins);
+    setContainerPositions((prev) => arePositionsEqual(prev, nextContainerPins) ? prev : nextContainerPins);
+  }, [container, scrollContainer?.key, threads]);
+  const scheduleRecalculate = (0, import_react5.useCallback)(() => {
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(recalculate);
+  }, [recalculate]);
+  (0, import_react5.useLayoutEffect)(() => {
+    recalculate();
+  }, [recalculate, containerVersion]);
+  (0, import_react5.useEffect)(() => {
+    window.addEventListener("scroll", scheduleRecalculate, true);
+    window.addEventListener("resize", scheduleRecalculate);
+    window.addEventListener("load", scheduleRecalculate);
+    container?.addEventListener("scroll", scheduleRecalculate, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", scheduleRecalculate, true);
+      window.removeEventListener("resize", scheduleRecalculate);
+      window.removeEventListener("load", scheduleRecalculate);
+      container?.removeEventListener("scroll", scheduleRecalculate);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [container, scheduleRecalculate]);
+  const handlePinClick = (0, import_react5.useCallback)((pin) => {
+    if (pin.isScreenshot && pin.screenshotPath && pin.screenshotX != null && pin.screenshotY != null) {
+      getSignedUrl(pin.screenshotPath).then((signedUrl) => {
+        if (signedUrl) {
+          setPreviewScreenshot({ url: signedUrl, x: pin.screenshotX, y: pin.screenshotY });
+        }
+      });
+      return;
+    }
+    window.open(`${threadBaseUrl}/threads/${pin.threadId}`, "_blank", "noopener,noreferrer");
+  }, [getSignedUrl, threadBaseUrl]);
+  const containerLayer = (0, import_react5.useMemo)(() => {
+    if (!container || containerPositions.length === 0) return null;
+    const { width, height } = getContainerContentSize(container);
+    return (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          "data-ew-feedback-interactive": "true",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width,
+            height,
+            pointerEvents: "none",
+            zIndex: Z.pins
+          },
+          children: containerPositions.map((pin) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            PinMarker,
+            {
+              pin,
+              isHighlighted: pin.threadId === highlightedThreadId,
+              onClick: () => handlePinClick(pin),
+              containerMode: true
+            },
+            pin.threadId
+          ))
+        }
+      ),
+      container
+    );
+  }, [container, containerPositions, handlePinClick, highlightedThreadId, containerVersion]);
+  if (!ctx || documentPositions.length === 0 && containerPositions.length === 0 && !previewScreenshot) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    documentPositions.map((pin) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PinMarker,
+      {
+        pin,
+        isHighlighted: pin.threadId === highlightedThreadId,
+        onClick: () => handlePinClick(pin),
+        containerMode: false
+      },
+      pin.threadId
+    )),
+    containerLayer,
+    previewScreenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        "data-ew-feedback-interactive": "true",
+        onPointerDownCapture: (e) => e.stopPropagation(),
+        className: "fixed inset-0 flex items-center justify-center bg-black/70",
+        style: { zIndex: Z.screenshotModal },
+        onClick: () => setPreviewScreenshot(null),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative max-h-[85vh] max-w-[90vw] overflow-hidden rounded-lg shadow-2xl", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              src: previewScreenshot.url,
+              alt: "Screenshot context",
+              className: "max-h-[85vh] max-w-[90vw] object-contain",
+              draggable: false
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "absolute pointer-events-none",
+              style: {
+                left: `${previewScreenshot.x}%`,
+                top: `${previewScreenshot.y}%`,
+                transform: "translate(-50%, -50%)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-6 w-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-[10px] font-bold shadow-lg ring-4 ring-primary/30 animate-pulse", children: "\u2022" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => setPreviewScreenshot(null),
+              className: "absolute top-2 right-2 text-[10px] px-2 py-1 rounded bg-card text-foreground border border-border hover:bg-accent",
+              children: "Close"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/ReviewSurfaceOverlay.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var EMPTY_THREADS2 = [];
+function PinMarker2({
+  index,
+  left,
+  top,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: "absolute pointer-events-auto",
+      style: { left: left - 12, top: top - 12, zIndex: Z.pins },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick,
+          className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground shadow-lg transition-transform hover:scale-125",
+          title: `Thread #${index}`,
+          children: index
+        }
+      )
+    }
+  );
+}
+function ReviewSurfaceOverlay() {
+  const ctx = useFeedbackSafe();
+  const iframeRef = (0, import_react6.useRef)(null);
+  const [metrics, setMetrics] = (0, import_react6.useState)({ width: 0, height: 0, scrollX: 0, scrollY: 0 });
+  const [frameReady, setFrameReady] = (0, import_react6.useState)(false);
+  const [frameError, setFrameError] = (0, import_react6.useState)(null);
+  const open = ctx?.reviewOpen ?? false;
+  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 updateMetrics = (0, import_react6.useCallback)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    try {
+      const doc = iframe.contentDocument;
+      const win = iframe.contentWindow;
+      const docEl = doc?.documentElement;
+      if (!doc || !win || !docEl) {
+        setFrameReady(false);
+        return;
+      }
+      setMetrics({
+        width: Math.max(docEl.scrollWidth, 1),
+        height: Math.max(docEl.scrollHeight, 1),
+        scrollX: win.scrollX,
+        scrollY: win.scrollY
+      });
+      setFrameReady(true);
+      setFrameError(null);
+    } catch {
+      setFrameReady(false);
+      setFrameError("Review URL must be same-origin and iframe-embeddable.");
+    }
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (!open) return;
+    if (!reviewUrl) {
+      setFrameReady(false);
+      setFrameError("Review mode requires a reviewUrl.");
+      return;
+    }
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    let cleanupResizeObserver;
+    let cleanupScrollListener;
+    const install = () => {
+      updateMetrics();
+      try {
+        const doc = iframe.contentDocument;
+        const win = iframe.contentWindow;
+        const docEl = doc?.documentElement;
+        if (!doc || !win || !docEl) {
+          setFrameError("Unable to access the review surface.");
+          return;
+        }
+        const handleScroll = () => updateMetrics();
+        win.addEventListener("scroll", handleScroll, { passive: true });
+        window.addEventListener("resize", updateMetrics);
+        cleanupScrollListener = () => {
+          win.removeEventListener("scroll", handleScroll);
+          window.removeEventListener("resize", updateMetrics);
+        };
+        const resizeObserver = new ResizeObserver(() => updateMetrics());
+        resizeObserver.observe(docEl);
+        if (doc.body) resizeObserver.observe(doc.body);
+        cleanupResizeObserver = () => resizeObserver.disconnect();
+      } catch {
+        setFrameReady(false);
+        setFrameError("Review URL must be same-origin and iframe-embeddable.");
+      }
+    };
+    const handleLoad = () => install();
+    iframe.addEventListener("load", handleLoad);
+    if (iframe.contentDocument?.readyState === "complete") {
+      install();
+    }
+    return () => {
+      iframe.removeEventListener("load", handleLoad);
+      cleanupResizeObserver?.();
+      cleanupScrollListener?.();
+    };
+  }, [open, reviewUrl, updateMetrics]);
+  const handleClose = (0, import_react6.useCallback)(() => {
+    if (!ctx) return;
+    ctx.setPendingPin(null);
+    ctx.setReviewOpen(false);
+    ctx.setMode("view");
+  }, [ctx]);
+  const handleOverlayClick = (0, import_react6.useCallback)((event) => {
+    if (!ctx || mode !== "annotate") return;
+    if (!reviewUrl || !frameReady || frameError) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = clampPercent((event.clientX - rect.left) / Math.max(metrics.width, 1) * 100);
+    const y = clampPercent((event.clientY - rect.top) / Math.max(metrics.height, 1) * 100);
+    ctx.setPendingPin({
+      annotationSurface: "review-iframe",
+      anchorKey: null,
+      coordinateSpace: "document",
+      containerKey: null,
+      x,
+      y,
+      selector: null,
+      elementText: reviewUrl,
+      elementTag: "iframe.review-surface",
+      pageUrl: window.location.pathname,
+      reviewUrl,
+      viewportLeft: event.clientX,
+      viewportTop: event.clientY
+    });
+  }, [ctx, frameError, frameReady, metrics.height, metrics.width, mode, reviewUrl]);
+  const handleWheel = (0, import_react6.useCallback)((event) => {
+    const win = iframeRef.current?.contentWindow;
+    if (!win) return;
+    win.scrollBy(event.deltaX, event.deltaY);
+    event.preventDefault();
+  }, []);
+  const layerStyle = (0, import_react6.useMemo)(() => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: metrics.width,
+    height: metrics.height,
+    transform: `translate(${-metrics.scrollX}px, ${-metrics.scrollY}px)`
+  }), [metrics.height, metrics.scrollX, metrics.scrollY, metrics.width]);
+  if (!ctx || ctx.annotationSurface !== "review-iframe" || !open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-ew-feedback-interactive": "true",
+      onPointerDownCapture: (e) => e.stopPropagation(),
+      className: "fixed inset-0",
+      style: { zIndex: Z.overlay, background: "rgba(8, 8, 10, 0.82)" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full flex-col p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            className: "mb-3 flex items-center justify-between rounded-lg border px-3 py-2",
+            style: { borderColor: T.border, background: T.card, color: T.fg },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm font-medium", children: "Review Surface" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "truncate text-xs", style: { color: T.muted }, children: reviewUrl ?? "Missing review URL" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClose,
+                  className: "rounded px-3 py-1 text-xs",
+                  style: { background: T.accent, color: T.fg },
+                  children: "Close"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative min-h-0 flex-1 overflow-hidden rounded-xl border", style: { borderColor: T.border, background: "#fff" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "iframe",
+            {
+              ref: iframeRef,
+              src: reviewUrl ?? void 0,
+              title: "Issue Pin review surface",
+              className: "h-full w-full border-0"
+            }
+          ),
+          reviewUrl && !frameError && mode === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              "data-ew-feedback-interactive": "true",
+              className: "absolute inset-0 cursor-crosshair overflow-hidden",
+              onClick: handleOverlayClick,
+              onWheel: handleWheel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: layerStyle })
+            }
+          ),
+          reviewUrl && !frameError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${mode === "annotate" ? "pointer-events-none " : ""}absolute inset-0 overflow-hidden`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: layerStyle, children: threads.map((thread, index) => {
+            const x = thread.x_position ?? 0;
+            const y = thread.y_position ?? 0;
+            const left = x / 100 * metrics.width;
+            const top = y / 100 * metrics.height;
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              PinMarker2,
+              {
+                index: index + 1,
+                left,
+                top,
+                onClick: () => window.open(`${threadBaseUrl}/threads/${thread.id}`, "_blank", "noopener,noreferrer")
+              },
+              thread.id
+            );
+          }) }) }),
+          !reviewUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 flex items-center justify-center p-6 text-center text-sm", style: { color: T.fg, background: "rgba(20,20,24,0.9)" }, children: "Review mode requires a `reviewUrl`." }),
+          reviewUrl && frameError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 flex items-center justify-center p-6 text-center text-sm", style: { color: T.fg, background: "rgba(20,20,24,0.9)" }, children: frameError }),
+          reviewUrl && !frameError && !frameReady && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 flex items-center justify-center p-6 text-center text-sm", style: { color: T.fg, background: "rgba(20,20,24,0.5)" }, children: "Loading review surface\u2026" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/SdkCommentPopover.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SdkCommentPopover() {
+  const ctx = useFeedbackSafe();
+  const [body, setBody] = (0, import_react7.useState)("");
+  const [visibility, setVisibility] = (0, import_react7.useState)("public");
+  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
+  const [pos, setPos] = (0, import_react7.useState)({ top: 0, left: 0 });
+  const pendingPin = ctx?.pendingPin ?? null;
+  const recalc = (0, import_react7.useCallback)(() => {
+    if (!pendingPin) return;
+    if (pendingPin.annotationSurface === "review-iframe" && pendingPin.viewportLeft != null && pendingPin.viewportTop != null) {
+      const pad2 = 16;
+      const w2 = 280;
+      const maxLeft2 = Math.max(pad2, window.innerWidth - w2 - pad2);
+      setPos({
+        top: pendingPin.viewportTop + pad2,
+        left: Math.min(Math.max(pad2, pendingPin.viewportLeft), maxLeft2)
+      });
+      return;
+    }
+    const container = ctx?.scrollContainer?.ref.current ?? null;
+    const { left, top } = pendingPin.coordinateSpace === "container" && pendingPin.containerKey && container && ctx?.scrollContainer?.key === pendingPin.containerKey ? containerPercentToViewport(container, pendingPin.x, pendingPin.y) : docPercentToViewport(pendingPin.x, pendingPin.y);
+    const pad = 16;
+    const w = 280;
+    const maxLeft = Math.max(pad, window.innerWidth - w - pad);
+    setPos({
+      top: top + pad,
+      left: Math.min(Math.max(pad, left), maxLeft)
+    });
+  }, [ctx, pendingPin]);
+  (0, import_react7.useLayoutEffect)(() => {
+    recalc();
+  }, [recalc]);
+  (0, import_react7.useEffect)(() => {
+    if (!pendingPin) return;
+    window.addEventListener("scroll", recalc, true);
+    window.addEventListener("resize", recalc);
+    return () => {
+      window.removeEventListener("scroll", recalc, true);
+      window.removeEventListener("resize", recalc);
+    };
+  }, [pendingPin, recalc]);
+  if (!ctx || !pendingPin) return null;
+  const { setPendingPin, submitThread, authReady, actorReady, actorError, userDisplayName, userEmail } = ctx;
+  const identityLabel = userDisplayName || userEmail || null;
+  const handleSubmit = async () => {
+    if (!body.trim() || submitting) return;
+    if (!actorReady) {
+      console.warn("[EW SDK] Cannot submit:", actorError || "still linking user identity\u2026");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await submitThread(body.trim(), visibility);
+      setBody("");
+    } catch (err) {
+      console.error("[EW SDK] Submit failed:", err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      "data-ew-feedback-interactive": "true",
+      onPointerDownCapture: (e) => e.stopPropagation(),
+      style: { position: "fixed", zIndex: Z.popover, top: pos.top, left: pos.left },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { width: 256, borderRadius: 8, border: `1px solid ${T.border}`, background: T.card, boxShadow: "0 10px 25px -5px rgba(0,0,0,.5)", padding: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: 8, fontSize: 10, color: T.muted, fontFamily: "monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+          pendingPin.elementTag,
+          pendingPin.elementText && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { marginLeft: 4, color: T.fg }, children: [
+            '"',
+            pendingPin.elementText.slice(0, 40),
+            '"'
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginBottom: 6, fontSize: 10, color: identityLabel ? T.fg : T.muted }, children: !authReady ? "Identifying\u2026" : !actorReady ? actorError || "Linking identity\u2026" : identityLabel ? `Commenting as ${identityLabel}` : "Anonymous" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "textarea",
+          {
+            style: {
+              width: "100%",
+              borderRadius: 6,
+              border: `1px solid ${T.input}`,
+              background: T.bg,
+              color: T.fg,
+              padding: "6px 8px",
+              fontSize: 12,
+              resize: "none",
+              outline: "none",
+              boxSizing: "border-box"
+            },
+            placeholder: "Add a comment\u2026",
+            rows: 3,
+            value: body,
+            onChange: (e) => setBody(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
+            },
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "select",
+            {
+              style: { fontSize: 10, background: T.bg, border: `1px solid ${T.input}`, borderRadius: 4, padding: "2px 4px", color: T.fg },
+              value: visibility,
+              onChange: (e) => setVisibility(e.target.value),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "public", children: "Public" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "internal", children: "Internal" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => setPendingPin(null),
+                style: { fontSize: 10, padding: "4px 8px", borderRadius: 4, background: T.accent, color: T.muted, border: "none", cursor: "pointer" },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: handleSubmit,
+                disabled: !body.trim() || submitting || !actorReady,
+                style: { fontSize: 10, padding: "4px 8px", borderRadius: 4, background: T.primary, color: T.primaryFg, border: "none", cursor: "pointer", opacity: !body.trim() || submitting || !actorReady ? 0.5 : 1 },
+                children: submitting ? "\u2026" : "Pin"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/ScreenshotFeedback.tsx
+var import_react8 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ScreenshotFeedback() {
+  const ctx = useFeedbackSafe();
+  const [body, setBody] = (0, import_react8.useState)("");
+  const [visibility, setVisibility] = (0, import_react8.useState)("public");
+  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
+  const containerRef = (0, import_react8.useRef)(null);
+  const [dragStart, setDragStart] = (0, import_react8.useState)(null);
+  const [dragEnd, setDragEnd] = (0, import_react8.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
+  const screenshotDataUrl = ctx?.screenshotDataUrl ?? null;
+  const setScreenshotDataUrl = ctx?.setScreenshotDataUrl;
+  const pendingScreenshotPin = ctx?.pendingScreenshotPin ?? null;
+  const setPendingScreenshotPin = ctx?.setPendingScreenshotPin;
+  const submitScreenshotThread = ctx?.submitScreenshotThread;
+  const actorReady = ctx?.actorReady ?? false;
+  const actorError = ctx?.actorError ?? null;
+  const authReady = ctx?.authReady ?? false;
+  const showHints = ctx?.showHints ?? true;
+  const getRelativeCoords = (0, import_react8.useCallback)(
+    (e) => {
+      const container = containerRef.current;
+      if (!container) return null;
+      const rect = container.getBoundingClientRect();
+      return {
+        x: (e.clientX - rect.left) / rect.width * 100,
+        y: (e.clientY - rect.top) / rect.height * 100
+      };
+    },
+    []
+  );
+  const handleMouseDown = (0, import_react8.useCallback)(
+    (e) => {
+      if (e.button !== 0) return;
+      const pt = getRelativeCoords(e);
+      if (!pt) return;
+      setDragStart(pt);
+      setDragEnd(pt);
+      setIsDragging(true);
+      setPendingScreenshotPin?.(null);
+      setBody("");
+    },
+    [getRelativeCoords, setPendingScreenshotPin]
+  );
+  const handleMouseMove = (0, import_react8.useCallback)(
+    (e) => {
+      if (!isDragging) return;
+      const pt = getRelativeCoords(e);
+      if (pt) setDragEnd(pt);
+    },
+    [isDragging, getRelativeCoords]
+  );
+  const handleMouseUp = (0, import_react8.useCallback)(() => {
+    if (!isDragging || !dragStart || !dragEnd) return;
+    setIsDragging(false);
+    const x = Math.min(dragStart.x, dragEnd.x);
+    const y = Math.min(dragStart.y, dragEnd.y);
+    const w = Math.abs(dragEnd.x - dragStart.x);
+    const h = Math.abs(dragEnd.y - dragStart.y);
+    if (w < 1 && h < 1) {
+      setPendingScreenshotPin?.({ x: dragStart.x, y: dragStart.y, width: 0, height: 0, pageUrl: window.location.pathname });
+    } else {
+      setPendingScreenshotPin?.({ x, y, width: w, height: h, pageUrl: window.location.pathname });
+    }
+  }, [isDragging, dragStart, dragEnd, setPendingScreenshotPin]);
+  const handleClose = () => {
+    setScreenshotDataUrl?.(null);
+    setPendingScreenshotPin?.(null);
+    setBody("");
+    setDragStart(null);
+    setDragEnd(null);
+  };
+  const handleSubmit = async () => {
+    if (!body.trim() || submitting || !submitScreenshotThread) return;
+    if (!actorReady) {
+      console.warn("[EW SDK] Cannot submit screenshot:", actorError || "still linking user identity\u2026");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await submitScreenshotThread(body.trim(), visibility);
+      setBody("");
+    } catch (err) {
+      console.error("[EW SDK] Screenshot submit failed:", err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  if (!ctx || !screenshotDataUrl) return null;
+  const selRect = isDragging && dragStart && dragEnd ? {
+    x: Math.min(dragStart.x, dragEnd.x),
+    y: Math.min(dragStart.y, dragEnd.y),
+    w: Math.abs(dragEnd.x - dragStart.x),
+    h: Math.abs(dragEnd.y - dragStart.y)
+  } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-ew-feedback-interactive": "true",
+      onPointerDownCapture: (e) => e.stopPropagation(),
+      style: { position: "fixed", inset: 0, zIndex: Z.screenshotModal, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.8)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            onClick: handleClose,
+            style: {
+              position: "absolute",
+              top: 16,
+              right: 16,
+              zIndex: 10,
+              display: "flex",
+              height: 32,
+              width: 32,
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "50%",
+              background: T.card,
+              color: T.fg,
+              border: `1px solid ${T.border}`,
+              cursor: "pointer"
+            },
+            title: "Cancel screenshot feedback",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.X, { style: { width: 16, height: 16 } })
+          }
+        ),
+        showHints && !pendingScreenshotPin && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          position: "absolute",
+          top: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 10,
+          borderRadius: 8,
+          background: T.card,
+          border: `1px solid ${T.border}`,
+          padding: "8px 16px",
+          boxShadow: "0 4px 12px rgba(0,0,0,.4)"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: 12, color: T.fg, fontWeight: 500, margin: 0 }, children: "Click and drag to select an area" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            ref: containerRef,
+            style: { position: "relative", maxHeight: "90vh", maxWidth: "95vw", overflow: "hidden", borderRadius: 8, boxShadow: "0 25px 50px -12px rgba(0,0,0,.5)", userSelect: "none", cursor: "crosshair" },
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: screenshotDataUrl, alt: "Screenshot for feedback", style: { display: "block", maxHeight: "90vh", maxWidth: "95vw", pointerEvents: "none" }, draggable: false }),
+              selRect && selRect.w + selRect.h > 0.5 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+                position: "absolute",
+                left: `${selRect.x}%`,
+                top: `${selRect.y}%`,
+                width: `${selRect.w}%`,
+                height: `${selRect.h}%`,
+                border: `2px solid ${T.primary}`,
+                background: `${T.primary}33`,
+                pointerEvents: "none"
+              } }),
+              pendingScreenshotPin && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: pendingScreenshotPin.width > 0 || pendingScreenshotPin.height > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+                position: "absolute",
+                left: `${pendingScreenshotPin.x}%`,
+                top: `${pendingScreenshotPin.y}%`,
+                width: `${pendingScreenshotPin.width}%`,
+                height: `${pendingScreenshotPin.height}%`,
+                border: `2px solid ${T.primary}`,
+                background: `${T.primary}33`,
+                pointerEvents: "none"
+              } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+                position: "absolute",
+                left: `${pendingScreenshotPin.x}%`,
+                top: `${pendingScreenshotPin.y}%`,
+                transform: "translate(-50%, -50%)",
+                pointerEvents: "none"
+              }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+                height: 24,
+                width: 24,
+                borderRadius: "50%",
+                background: T.primary,
+                color: T.primaryFg,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 10,
+                fontWeight: 700,
+                boxShadow: `0 0 0 4px ${T.primary}4d, 0 4px 12px rgba(0,0,0,.4)`
+              }, children: "\u2022" }) }) })
+            ]
+          }
+        ),
+        pendingScreenshotPin && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)", zIndex: 10, width: 288 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { borderRadius: 8, border: `1px solid ${T.border}`, background: T.card, boxShadow: "0 10px 25px -5px rgba(0,0,0,.5)", padding: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginBottom: 8, fontSize: 10, color: T.muted, fontFamily: "monospace" }, children: [
+            "\u{1F4F8}",
+            " ",
+            pendingScreenshotPin.width > 0 ? `Area (${Math.round(pendingScreenshotPin.x)}%, ${Math.round(pendingScreenshotPin.y)}%) ${Math.round(pendingScreenshotPin.width)}\xD7${Math.round(pendingScreenshotPin.height)}%` : `Pin at (${Math.round(pendingScreenshotPin.x)}%, ${Math.round(pendingScreenshotPin.y)}%)`
+          ] }),
+          !actorReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginBottom: 8, fontSize: 10, color: T.muted }, children: !authReady ? "Identifying\u2026" : actorError || "Linking identity\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "textarea",
+            {
+              style: {
+                width: "100%",
+                borderRadius: 6,
+                border: `1px solid ${T.input}`,
+                background: T.bg,
+                color: T.fg,
+                padding: "6px 8px",
+                fontSize: 12,
+                resize: "none",
+                outline: "none",
+                boxSizing: "border-box"
+              },
+              placeholder: "Add a comment\u2026",
+              rows: 3,
+              value: body,
+              onChange: (e) => setBody(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
+              },
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "select",
+              {
+                style: { fontSize: 10, background: T.bg, border: `1px solid ${T.input}`, borderRadius: 4, padding: "2px 4px", color: T.fg },
+                value: visibility,
+                onChange: (e) => setVisibility(e.target.value),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "public", children: "Public" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "internal", children: "Internal" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: () => {
+                    setPendingScreenshotPin?.(null);
+                    setDragStart(null);
+                    setDragEnd(null);
+                  },
+                  style: { fontSize: 10, padding: "4px 8px", borderRadius: 4, background: T.accent, color: T.muted, border: "none", cursor: "pointer" },
+                  children: "Re-select"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handleSubmit,
+                  disabled: !body.trim() || submitting || !actorReady,
+                  style: { fontSize: 10, padding: "4px 8px", borderRadius: 4, background: T.primary, color: T.primaryFg, border: "none", cursor: "pointer", opacity: !body.trim() || submitting || !actorReady ? 0.5 : 1 },
+                  children: submitting ? "\u2026" : "Submit"
+                }
+              )
+            ] })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/FeedbackButton.tsx
+var import_react9 = require("react");
+var import_lucide_react3 = require("lucide-react");
+
+// src/launcher.ts
+function getLauncherCapabilities({
+  allowPinOnPage = true,
+  allowScreenshot = true
+}) {
+  const canPinOnPage = allowPinOnPage;
+  const canScreenshot = allowScreenshot;
+  const actionCount = Number(canPinOnPage) + Number(canScreenshot);
+  const singleAction = actionCount === 1 ? canPinOnPage ? "pin" : "screenshot" : null;
+  return {
+    canPinOnPage,
+    canScreenshot,
+    actionCount,
+    singleAction
+  };
+}
+
+// src/FeedbackButton.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function FeedbackButton({ position = "bottom-right" }) {
+  const ctx = useFeedbackSafe();
+  const menuRef = (0, import_react9.useRef)(null);
+  const [hintDismissed, setHintDismissed] = (0, import_react9.useState)(false);
+  const menuOpenState = ctx?.menuOpen ?? false;
+  const debug = ctx?.debug ?? false;
+  (0, import_react9.useEffect)(() => {
+    if (!menuOpenState || !ctx) return;
+    const handler = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        ctx.setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [menuOpenState, ctx]);
+  (0, import_react9.useEffect)(() => {
+    if (!debug) return;
+    console.log("[EW SDK] FeedbackButton mounted");
+    return () => console.log("[EW SDK] FeedbackButton unmounted");
+  }, [debug]);
+  if (!ctx) return null;
+  const {
+    mode,
+    menuOpen,
+    canPinOnPage,
+    canScreenshot,
+    showHints,
+    screenshotCapturing,
+    toggleMenu,
+    enterPinMode,
+    exitPinMode,
+    startScreenshotCapture
+  } = 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 (debug) console.log("[EW SDK] handleToggle", { mode, menuOpen });
+    setHintDismissed(true);
+    if (annotate) {
+      exitPinMode();
+      return;
+    }
+    if (capabilities.actionCount === 1) {
+      if (capabilities.singleAction === "pin") {
+        enterPinMode();
+      } else if (capabilities.singleAction === "screenshot") {
+        void startScreenshotCapture();
+      }
+      return;
+    }
+    toggleMenu();
+  };
+  const capturing = screenshotCapturing;
+  const showLauncherHint = showHints && !hintDismissed && !annotate && !menuOpen;
+  if (capabilities.actionCount === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      ref: menuRef,
+      "data-ew-feedback-interactive": "true",
+      style: { position: "fixed", ...posStyle, zIndex: Z.launcher },
+      children: [
+        showLauncherHint && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              ...hintStyle,
+              width: 280,
+              borderRadius: 10,
+              border: `1px solid ${T.border}`,
+              background: T.card,
+              color: T.fg,
+              boxShadow: "0 10px 25px -5px rgba(0,0,0,.5)",
+              padding: "12px 14px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 16, fontWeight: 600, marginBottom: 6 }, children: "Open Issue Pin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 12, color: T.muted, lineHeight: 1.45 }, children: "Click the feedback bubble to pin comments on the page or capture a screenshot." })
+            ]
+          }
+        ),
+        menuOpen && !annotate && capabilities.actionCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 56,
+              right: 0,
+              marginBottom: 4,
+              width: 176,
+              borderRadius: 8,
+              border: `1px solid ${T.border}`,
+              background: T.card,
+              boxShadow: "0 10px 25px -5px rgba(0,0,0,.5)",
+              overflow: "hidden"
+            },
+            children: [
+              canPinOnPage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  onClick: enterPinMode,
+                  style: {
+                    display: "flex",
+                    width: "100%",
+                    alignItems: "center",
+                    gap: 10,
+                    padding: "10px 12px",
+                    fontSize: 12,
+                    color: T.fg,
+                    background: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    textAlign: "left"
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.background = T.accent,
+                  onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.MapPin, { 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: "Pin on page" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 10, color: T.muted }, children: "Click an element" })
+                    ] })
+                  ]
+                }
+              ),
+              canPinOnPage && canScreenshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { borderTop: `1px solid ${T.border}` } }),
+              canScreenshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  onClick: () => void startScreenshotCapture(),
+                  disabled: capturing,
+                  style: {
+                    display: "flex",
+                    width: "100%",
+                    alignItems: "center",
+                    gap: 10,
+                    padding: "10px 12px",
+                    fontSize: 12,
+                    color: T.fg,
+                    background: "transparent",
+                    border: "none",
+                    cursor: capturing ? "default" : "pointer",
+                    opacity: capturing ? 0.5 : 1,
+                    textAlign: "left"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!capturing) e.currentTarget.style.background = T.accent;
+                  },
+                  onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+                  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: { fontSize: 10, color: T.muted }, children: "Capture current view" })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: handleToggle,
+            style: {
+              display: "flex",
+              height: 48,
+              width: 48,
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "50%",
+              boxShadow: "0 4px 12px rgba(0,0,0,.4)",
+              transition: "all 200ms",
+              border: annotate ? "none" : `1px solid ${T.border}`,
+              background: annotate ? T.primary : T.card,
+              color: annotate ? T.primaryFg : T.fg,
+              cursor: "pointer",
+              transform: annotate ? "scale(1.1)" : "scale(1)"
+            },
+            title: annotate ? "Exit feedback mode" : "Open feedback menu",
+            "aria-label": "Toggle feedback mode",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.MessageSquarePlus, { style: { width: 20, height: 20 } })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ModalFeedbackInjector.tsx
+var import_react10 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ModalFeedbackInjector({
+  renderButton
+}) {
+  const ctx = useFeedbackSafe();
+  const [openModals, setOpenModals] = (0, import_react10.useState)([]);
+  (0, import_react10.useEffect)(() => {
+    const query = () => {
+      const modals = document.querySelectorAll('[role="dialog"], [data-radix-dialog-content]');
+      setOpenModals(Array.from(modals));
+    };
+    query();
+    const observer = new MutationObserver(query);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+  const handleCapture = (0, import_react10.useCallback)(async () => {
+    if (!ctx) return;
+    await ctx.startScreenshotCapture();
+  }, [ctx]);
+  if (!ctx || openModals.length === 0) return null;
+  const renderProps = {
+    captureScreenshot: handleCapture,
+    closeLauncherMenu: ctx.closeMenu
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: openModals.map(
+    (modal, i) => (0, import_react_dom3.createPortal)(
+      renderButton ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-ew-feedback-interactive": "true", onPointerDownCapture: (e) => e.stopPropagation(), children: renderButton(renderProps) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          "data-ew-feedback-interactive": "true",
+          onClick: (e) => {
+            e.stopPropagation();
+            void handleCapture();
+          },
+          style: {
+            position: "absolute",
+            bottom: 12,
+            right: 12,
+            zIndex: Z.launcher,
+            display: "flex",
+            height: 32,
+            width: 32,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "50%",
+            border: `1px solid ${T.border}`,
+            background: T.card,
+            color: T.fg,
+            boxShadow: "0 2px 8px rgba(0,0,0,.3)",
+            cursor: "pointer"
+          },
+          title: "Capture feedback screenshot",
+          "aria-label": "Capture feedback screenshot",
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Camera, { style: { width: 16, height: 16, color: T.primary } })
+        },
+        i
+      ),
+      modal,
+      `modal-feedback-${i}`
+    )
+  ) });
+}
+
+// src/IssuePin.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SdkErrorBoundary = class extends import_react11.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    console.warn(`[IssuePin] ${this.props.name} crashed and was disabled:`, error.message);
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+};
+function IssuePin({
+  apiKey,
+  enabled = false,
+  user,
+  supabaseClient,
+  allowPinOnPage = true,
+  allowScreenshot = true,
+  showHints = true,
+  scrollContainer,
+  resolveAnchor,
+  reviewUrl,
+  annotationSurface,
+  pinsVisible = true,
+  buttonPosition = "bottom-right",
+  renderLauncher,
+  renderModalCaptureButton,
+  showModalCaptureButton = true,
+  mode,
+  onModeChange,
+  feedbackActive,
+  onFeedbackActiveChange,
+  debug = false,
+  // Legacy props
+  supabaseUrl,
+  supabaseAnonKey,
+  workspaceId,
+  userId,
+  userEmail,
+  userDisplayName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    FeedbackProvider,
+    {
+      apiKey,
+      supabaseUrl,
+      supabaseAnonKey,
+      workspaceId,
+      supabaseClient,
+      debug,
+      allowPinOnPage,
+      allowScreenshot,
+      showHints,
+      scrollContainer,
+      resolveAnchor,
+      reviewUrl,
+      annotationSurface,
+      mode,
+      onModeChange,
+      feedbackActive,
+      onFeedbackActiveChange,
+      userId: user?.id ?? userId,
+      userEmail: user?.email ?? userEmail,
+      userDisplayName: user?.displayName ?? userDisplayName,
+      children: enabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        annotationSurface === "review-iframe" || !!reviewUrl && !annotationSurface ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ReviewSurfaceOverlay, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeedbackOverlay, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SdkCommentPopover, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScreenshotFeedback, {}),
+        pinsVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SdkErrorBoundary, { name: "ThreadPins", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PinsSlot, {}) }),
+        allowScreenshot && showModalCaptureButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalFeedbackInjector, { renderButton: renderModalCaptureButton }),
+        renderLauncher ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomLauncherSlot, { renderLauncher }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeedbackButton, { position: buttonPosition })
+      ] })
+    }
+  );
+}
+function CustomLauncherSlot({
+  renderLauncher
+}) {
+  const ctx = useFeedbackSafe();
+  if (!ctx) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-ew-feedback-interactive": "true", onPointerDownCapture: (e) => e.stopPropagation(), children: renderLauncher({
+    mode: ctx.mode,
+    setMode: ctx.setMode,
+    feedbackActive: ctx.feedbackActive,
+    menuOpen: ctx.menuOpen,
+    canPinOnPage: ctx.canPinOnPage,
+    canScreenshot: ctx.canScreenshot,
+    openMenu: ctx.openMenu,
+    closeMenu: ctx.closeMenu,
+    toggleMenu: ctx.toggleMenu,
+    enterPinMode: ctx.enterPinMode,
+    exitPinMode: ctx.exitPinMode,
+    startScreenshotCapture: ctx.startScreenshotCapture
+  }) });
+}
+function PinsSlot() {
+  const ctx = useFeedbackSafe();
+  if (!ctx) return null;
+  if (ctx.annotationSurface === "review-iframe") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThreadPins, {});
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ElementWhisperer,
+  FeedbackButton,
+  FeedbackOverlay,
+  FeedbackProvider,
+  IssuePin,
+  ReviewSurfaceOverlay,
+  ScreenshotFeedback,
+  SdkCommentPopover,
+  ThreadPins,
+  Z,
+  useFeedback,
+  useFeedbackSafe,
+  useIssuePinAnchor
+});
+//# sourceMappingURL=index.cjs.map