@sylergydigital/issue-pin-sdk 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +74 -0
- package/README.md +376 -0
- package/dist/index.cjs +2500 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +282 -0
- package/dist/index.d.ts +282 -0
- package/dist/index.js +2451 -0
- package/dist/index.js.map +1 -0
- package/package.json +48 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, Dispatch, SetStateAction } from 'react';
|
|
3
|
+
import { SupabaseClient } from '@supabase/supabase-js';
|
|
4
|
+
|
|
5
|
+
type CoordinateSpace = "document" | "container";
|
|
6
|
+
|
|
7
|
+
/** Pin interaction mode: `annotate` shows the click overlay to place a pin. */
|
|
8
|
+
type FeedbackMode = "view" | "annotate";
|
|
9
|
+
type AnnotationSurface = "host-dom" | "review-iframe";
|
|
10
|
+
interface ScrollContainerBinding {
|
|
11
|
+
key: string;
|
|
12
|
+
ref: React.RefObject<HTMLElement | null>;
|
|
13
|
+
}
|
|
14
|
+
interface AnchorResolution {
|
|
15
|
+
key: string;
|
|
16
|
+
selector?: string | null;
|
|
17
|
+
}
|
|
18
|
+
interface FeedbackConfig {
|
|
19
|
+
apiKey?: string;
|
|
20
|
+
supabaseUrl?: string;
|
|
21
|
+
supabaseAnonKey?: string;
|
|
22
|
+
workspaceId?: string;
|
|
23
|
+
userId?: string;
|
|
24
|
+
userEmail?: string;
|
|
25
|
+
userDisplayName?: string;
|
|
26
|
+
/** Pass the host app's Supabase client to auto-extract user identity from their auth session */
|
|
27
|
+
supabaseClient?: SupabaseClient;
|
|
28
|
+
/** Skip automatic federation of the host app's user into the workspace (default: false) */
|
|
29
|
+
skipFederation?: boolean;
|
|
30
|
+
/** Allow creating new pins by clicking page elements (default: true) */
|
|
31
|
+
allowPinOnPage?: boolean;
|
|
32
|
+
/** Allow screenshot capture flow (default: true) */
|
|
33
|
+
allowScreenshot?: boolean;
|
|
34
|
+
/** Show SDK-owned instructional hints / coachmarks (default: true) */
|
|
35
|
+
showHints?: boolean;
|
|
36
|
+
/** Optional host-owned scroll container for element-based pin placement/rendering */
|
|
37
|
+
scrollContainer?: ScrollContainerBinding;
|
|
38
|
+
/** Resolve a host-defined logical anchor key for a clicked element */
|
|
39
|
+
resolveAnchor?: (target: Element) => AnchorResolution | null;
|
|
40
|
+
/** Dedicated review surface URL rendered inside a managed iframe overlay */
|
|
41
|
+
reviewUrl?: string;
|
|
42
|
+
/** Where new annotations should be placed. Defaults to `review-iframe` when reviewUrl is provided. */
|
|
43
|
+
annotationSurface?: AnnotationSurface;
|
|
44
|
+
/** Controlled pin mode when used with `onModeChange`. */
|
|
45
|
+
mode?: FeedbackMode;
|
|
46
|
+
/** Called when pin mode changes. When set, `mode` is controlled. */
|
|
47
|
+
onModeChange?: (mode: FeedbackMode) => void;
|
|
48
|
+
/** @deprecated Use `mode` and `onModeChange` instead */
|
|
49
|
+
feedbackActive?: boolean;
|
|
50
|
+
/** @deprecated Use `onModeChange` instead */
|
|
51
|
+
onFeedbackActiveChange?: (active: boolean) => void;
|
|
52
|
+
debug?: boolean;
|
|
53
|
+
}
|
|
54
|
+
interface ThreadData {
|
|
55
|
+
annotation_surface: AnnotationSurface | null;
|
|
56
|
+
anchor_key: string | null;
|
|
57
|
+
coordinate_space: CoordinateSpace;
|
|
58
|
+
container_key: string | null;
|
|
59
|
+
id: string;
|
|
60
|
+
page_url: string;
|
|
61
|
+
review_url: string | null;
|
|
62
|
+
selector: string | null;
|
|
63
|
+
element_text: string | null;
|
|
64
|
+
element_tag: string | null;
|
|
65
|
+
x_position: number | null;
|
|
66
|
+
y_position: number | null;
|
|
67
|
+
viewport_width: number | null;
|
|
68
|
+
viewport_height: number | null;
|
|
69
|
+
modal_trigger_selector: string | null;
|
|
70
|
+
screenshot_path: string | null;
|
|
71
|
+
status: string;
|
|
72
|
+
visibility: string;
|
|
73
|
+
created_at: string;
|
|
74
|
+
}
|
|
75
|
+
interface PendingPin {
|
|
76
|
+
annotationSurface: AnnotationSurface;
|
|
77
|
+
anchorKey: string | null;
|
|
78
|
+
coordinateSpace: CoordinateSpace;
|
|
79
|
+
containerKey: string | null;
|
|
80
|
+
x: number;
|
|
81
|
+
y: number;
|
|
82
|
+
selector: string | null;
|
|
83
|
+
elementText: string;
|
|
84
|
+
elementTag: string;
|
|
85
|
+
pageUrl: string;
|
|
86
|
+
reviewUrl: string | null;
|
|
87
|
+
viewportLeft?: number;
|
|
88
|
+
viewportTop?: number;
|
|
89
|
+
}
|
|
90
|
+
interface PendingScreenshotPin {
|
|
91
|
+
x: number;
|
|
92
|
+
y: number;
|
|
93
|
+
width: number;
|
|
94
|
+
height: number;
|
|
95
|
+
pageUrl: string;
|
|
96
|
+
}
|
|
97
|
+
interface LauncherRenderProps {
|
|
98
|
+
mode: FeedbackMode;
|
|
99
|
+
setMode: (mode: FeedbackMode) => void;
|
|
100
|
+
/** @deprecated Use `mode === "annotate"` */
|
|
101
|
+
feedbackActive: boolean;
|
|
102
|
+
menuOpen: boolean;
|
|
103
|
+
canPinOnPage: boolean;
|
|
104
|
+
canScreenshot: boolean;
|
|
105
|
+
openMenu: () => void;
|
|
106
|
+
closeMenu: () => void;
|
|
107
|
+
toggleMenu: () => void;
|
|
108
|
+
enterPinMode: () => void;
|
|
109
|
+
exitPinMode: () => void;
|
|
110
|
+
startScreenshotCapture: () => Promise<void>;
|
|
111
|
+
}
|
|
112
|
+
interface ModalCaptureRenderProps {
|
|
113
|
+
captureScreenshot: () => Promise<void>;
|
|
114
|
+
closeLauncherMenu: () => void;
|
|
115
|
+
}
|
|
116
|
+
interface FeedbackContextType {
|
|
117
|
+
client: SupabaseClient;
|
|
118
|
+
workspaceId: string;
|
|
119
|
+
siteUrl?: string;
|
|
120
|
+
userId?: string;
|
|
121
|
+
userEmail?: string;
|
|
122
|
+
userDisplayName?: string;
|
|
123
|
+
authReady: boolean;
|
|
124
|
+
actorReady: boolean;
|
|
125
|
+
actorError: string | null;
|
|
126
|
+
debug: boolean;
|
|
127
|
+
canPinOnPage: boolean;
|
|
128
|
+
canScreenshot: boolean;
|
|
129
|
+
showHints: boolean;
|
|
130
|
+
annotationSurface: AnnotationSurface;
|
|
131
|
+
reviewUrl: string | null;
|
|
132
|
+
reviewOpen: boolean;
|
|
133
|
+
setReviewOpen: (open: boolean) => void;
|
|
134
|
+
scrollContainer?: ScrollContainerBinding;
|
|
135
|
+
resolveAnchor?: (target: Element) => AnchorResolution | null;
|
|
136
|
+
screenshotCapturing: boolean;
|
|
137
|
+
threads: ThreadData[];
|
|
138
|
+
isLoadingThreads: boolean;
|
|
139
|
+
mode: FeedbackMode;
|
|
140
|
+
setMode: (mode: FeedbackMode) => void;
|
|
141
|
+
feedbackActive: boolean;
|
|
142
|
+
setFeedbackActive: (active: boolean) => void;
|
|
143
|
+
menuOpen: boolean;
|
|
144
|
+
setMenuOpen: Dispatch<SetStateAction<boolean>>;
|
|
145
|
+
openMenu: () => void;
|
|
146
|
+
closeMenu: () => void;
|
|
147
|
+
toggleMenu: () => void;
|
|
148
|
+
enterPinMode: () => void;
|
|
149
|
+
exitPinMode: () => void;
|
|
150
|
+
startScreenshotCapture: () => Promise<void>;
|
|
151
|
+
pendingPin: PendingPin | null;
|
|
152
|
+
setPendingPin: (pin: PendingPin | null) => void;
|
|
153
|
+
screenshotDataUrl: string | null;
|
|
154
|
+
setScreenshotDataUrl: (url: string | null) => void;
|
|
155
|
+
pendingScreenshotPin: PendingScreenshotPin | null;
|
|
156
|
+
setPendingScreenshotPin: (pin: PendingScreenshotPin | null) => void;
|
|
157
|
+
submitThread: (body: string, visibility: "public" | "internal") => Promise<void>;
|
|
158
|
+
submitScreenshotThread: (body: string, visibility: "public" | "internal") => Promise<void>;
|
|
159
|
+
refreshThreads: () => Promise<void>;
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* SDK Entry Point — wrap your app to enable in-app feedback.
|
|
163
|
+
*/
|
|
164
|
+
declare function FeedbackProvider({ children, ...config }: FeedbackConfig & {
|
|
165
|
+
children?: ReactNode;
|
|
166
|
+
}): react_jsx_runtime.JSX.Element;
|
|
167
|
+
declare function useFeedback(): FeedbackContextType;
|
|
168
|
+
/**
|
|
169
|
+
* Safe version that returns null when outside FeedbackProvider (e.g. during HMR).
|
|
170
|
+
*/
|
|
171
|
+
declare function useFeedbackSafe(): FeedbackContextType | null;
|
|
172
|
+
|
|
173
|
+
interface IssuePinProps {
|
|
174
|
+
/** API key generated from the Issue Pin dashboard */
|
|
175
|
+
apiKey?: string;
|
|
176
|
+
/** Toggle SDK visibility without unmounting (default: true) */
|
|
177
|
+
enabled?: boolean;
|
|
178
|
+
/** Optional user info for attribution */
|
|
179
|
+
user?: {
|
|
180
|
+
id?: string;
|
|
181
|
+
email?: string;
|
|
182
|
+
displayName?: string;
|
|
183
|
+
};
|
|
184
|
+
/**
|
|
185
|
+
* Pass the host app's Supabase client to auto-extract user identity
|
|
186
|
+
* from their auth session. No manual user prop needed.
|
|
187
|
+
*
|
|
188
|
+
* @example
|
|
189
|
+
* import { supabase } from "./lib/supabase";
|
|
190
|
+
* <IssuePin apiKey="ew_live_..." supabaseClient={supabase} />
|
|
191
|
+
*/
|
|
192
|
+
supabaseClient?: SupabaseClient;
|
|
193
|
+
/** Allow creating element-based pins from the launcher */
|
|
194
|
+
allowPinOnPage?: boolean;
|
|
195
|
+
/** Allow screenshot capture flow from the launcher */
|
|
196
|
+
allowScreenshot?: boolean;
|
|
197
|
+
/** Show SDK-owned instructional hints and coachmarks */
|
|
198
|
+
showHints?: boolean;
|
|
199
|
+
/** Optional host-owned scroll container for element pins */
|
|
200
|
+
scrollContainer?: ScrollContainerBinding;
|
|
201
|
+
/** Resolve a stable logical anchor key for clicked elements */
|
|
202
|
+
resolveAnchor?: (target: Element) => AnchorResolution | null;
|
|
203
|
+
/** Dedicated review surface URL rendered inside a managed iframe overlay */
|
|
204
|
+
reviewUrl?: string;
|
|
205
|
+
/** Which surface new annotations should target */
|
|
206
|
+
annotationSurface?: AnnotationSurface;
|
|
207
|
+
/** Show historical thread pins independently from other SDK UI */
|
|
208
|
+
pinsVisible?: boolean;
|
|
209
|
+
/** Floating button position */
|
|
210
|
+
buttonPosition?: "bottom-right" | "bottom-left";
|
|
211
|
+
/** Replace the stock launcher with custom UI while keeping SDK-owned state/actions */
|
|
212
|
+
renderLauncher?: (props: LauncherRenderProps) => ReactNode;
|
|
213
|
+
/** Replace the default injected modal screenshot button */
|
|
214
|
+
renderModalCaptureButton?: (props: ModalCaptureRenderProps) => ReactNode;
|
|
215
|
+
/** Whether modal screenshot buttons should be injected into detected dialogs */
|
|
216
|
+
showModalCaptureButton?: boolean;
|
|
217
|
+
/** Controlled annotate mode — pair with `onModeChange` */
|
|
218
|
+
mode?: FeedbackMode;
|
|
219
|
+
/** Called when annotate mode changes (including from the floating SDK button) */
|
|
220
|
+
onModeChange?: (mode: FeedbackMode) => void;
|
|
221
|
+
/** @deprecated Use `mode` / `onModeChange` (`annotate` ↔ `true`) */
|
|
222
|
+
feedbackActive?: boolean;
|
|
223
|
+
/** @deprecated Use `onModeChange` */
|
|
224
|
+
onFeedbackActiveChange?: (active: boolean) => void;
|
|
225
|
+
/** Emit lifecycle/state logs for SDK troubleshooting */
|
|
226
|
+
debug?: boolean;
|
|
227
|
+
supabaseUrl?: string;
|
|
228
|
+
supabaseAnonKey?: string;
|
|
229
|
+
workspaceId?: string;
|
|
230
|
+
userId?: string;
|
|
231
|
+
userEmail?: string;
|
|
232
|
+
userDisplayName?: string;
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* Drop-in SDK component — mount anywhere in your app tree.
|
|
236
|
+
*
|
|
237
|
+
* Recommended (auto-detect identity from Supabase auth):
|
|
238
|
+
* <IssuePin apiKey="ew_live_..." supabaseClient={supabase} />
|
|
239
|
+
*
|
|
240
|
+
* Manual identity:
|
|
241
|
+
* <IssuePin apiKey="ew_live_..." user={{ email: "dev@co.com" }} />
|
|
242
|
+
*
|
|
243
|
+
* Toggle visibility without unmounting:
|
|
244
|
+
* <IssuePin apiKey="ew_live_..." enabled={showFeedback} supabaseClient={supabase} />
|
|
245
|
+
*/
|
|
246
|
+
declare function IssuePin({ apiKey, enabled, user, supabaseClient, allowPinOnPage, allowScreenshot, showHints, scrollContainer, resolveAnchor, reviewUrl, annotationSurface, pinsVisible, buttonPosition, renderLauncher, renderModalCaptureButton, showModalCaptureButton, mode, onModeChange, feedbackActive, onFeedbackActiveChange, debug, supabaseUrl, supabaseAnonKey, workspaceId, userId, userEmail, userDisplayName, }: IssuePinProps): react_jsx_runtime.JSX.Element;
|
|
247
|
+
|
|
248
|
+
declare function useIssuePinAnchor(anchorKey: string): (node: HTMLElement | null) => void;
|
|
249
|
+
|
|
250
|
+
interface FeedbackButtonProps {
|
|
251
|
+
position?: "bottom-right" | "bottom-left";
|
|
252
|
+
}
|
|
253
|
+
declare function FeedbackButton({ position }: FeedbackButtonProps): react_jsx_runtime.JSX.Element | null;
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* Transparent overlay for same-origin SDK usage.
|
|
257
|
+
* Stores pin position as document percentage (scrollWidth/scrollHeight); optional element metadata only.
|
|
258
|
+
*/
|
|
259
|
+
declare function FeedbackOverlay(): react_jsx_runtime.JSX.Element | null;
|
|
260
|
+
|
|
261
|
+
/**
|
|
262
|
+
* Renders thread pin markers in document or configured container coordinate space.
|
|
263
|
+
*/
|
|
264
|
+
declare function ThreadPins(): react_jsx_runtime.JSX.Element | null;
|
|
265
|
+
|
|
266
|
+
declare function ReviewSurfaceOverlay(): react_jsx_runtime.JSX.Element | null;
|
|
267
|
+
|
|
268
|
+
declare function SdkCommentPopover(): react_jsx_runtime.JSX.Element | null;
|
|
269
|
+
|
|
270
|
+
declare function ScreenshotFeedback(): react_jsx_runtime.JSX.Element | null;
|
|
271
|
+
|
|
272
|
+
/** Stacking order for SDK layers (host apps should avoid z-index above these). */
|
|
273
|
+
declare const Z: {
|
|
274
|
+
readonly pins: 99990;
|
|
275
|
+
readonly overlay: 99991;
|
|
276
|
+
readonly popover: 99992;
|
|
277
|
+
readonly launcher: 99993;
|
|
278
|
+
readonly screenshotModal: 99994;
|
|
279
|
+
readonly flash: 99998;
|
|
280
|
+
};
|
|
281
|
+
|
|
282
|
+
export { type AnchorResolution, type AnnotationSurface, IssuePin as ElementWhisperer, FeedbackButton, type FeedbackMode, FeedbackOverlay, FeedbackProvider, IssuePin, type LauncherRenderProps, type ModalCaptureRenderProps, type PendingPin, type PendingScreenshotPin, ReviewSurfaceOverlay, ScreenshotFeedback, type ScrollContainerBinding, SdkCommentPopover, type ThreadData, ThreadPins, Z, useFeedback, useFeedbackSafe, useIssuePinAnchor };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, Dispatch, SetStateAction } from 'react';
|
|
3
|
+
import { SupabaseClient } from '@supabase/supabase-js';
|
|
4
|
+
|
|
5
|
+
type CoordinateSpace = "document" | "container";
|
|
6
|
+
|
|
7
|
+
/** Pin interaction mode: `annotate` shows the click overlay to place a pin. */
|
|
8
|
+
type FeedbackMode = "view" | "annotate";
|
|
9
|
+
type AnnotationSurface = "host-dom" | "review-iframe";
|
|
10
|
+
interface ScrollContainerBinding {
|
|
11
|
+
key: string;
|
|
12
|
+
ref: React.RefObject<HTMLElement | null>;
|
|
13
|
+
}
|
|
14
|
+
interface AnchorResolution {
|
|
15
|
+
key: string;
|
|
16
|
+
selector?: string | null;
|
|
17
|
+
}
|
|
18
|
+
interface FeedbackConfig {
|
|
19
|
+
apiKey?: string;
|
|
20
|
+
supabaseUrl?: string;
|
|
21
|
+
supabaseAnonKey?: string;
|
|
22
|
+
workspaceId?: string;
|
|
23
|
+
userId?: string;
|
|
24
|
+
userEmail?: string;
|
|
25
|
+
userDisplayName?: string;
|
|
26
|
+
/** Pass the host app's Supabase client to auto-extract user identity from their auth session */
|
|
27
|
+
supabaseClient?: SupabaseClient;
|
|
28
|
+
/** Skip automatic federation of the host app's user into the workspace (default: false) */
|
|
29
|
+
skipFederation?: boolean;
|
|
30
|
+
/** Allow creating new pins by clicking page elements (default: true) */
|
|
31
|
+
allowPinOnPage?: boolean;
|
|
32
|
+
/** Allow screenshot capture flow (default: true) */
|
|
33
|
+
allowScreenshot?: boolean;
|
|
34
|
+
/** Show SDK-owned instructional hints / coachmarks (default: true) */
|
|
35
|
+
showHints?: boolean;
|
|
36
|
+
/** Optional host-owned scroll container for element-based pin placement/rendering */
|
|
37
|
+
scrollContainer?: ScrollContainerBinding;
|
|
38
|
+
/** Resolve a host-defined logical anchor key for a clicked element */
|
|
39
|
+
resolveAnchor?: (target: Element) => AnchorResolution | null;
|
|
40
|
+
/** Dedicated review surface URL rendered inside a managed iframe overlay */
|
|
41
|
+
reviewUrl?: string;
|
|
42
|
+
/** Where new annotations should be placed. Defaults to `review-iframe` when reviewUrl is provided. */
|
|
43
|
+
annotationSurface?: AnnotationSurface;
|
|
44
|
+
/** Controlled pin mode when used with `onModeChange`. */
|
|
45
|
+
mode?: FeedbackMode;
|
|
46
|
+
/** Called when pin mode changes. When set, `mode` is controlled. */
|
|
47
|
+
onModeChange?: (mode: FeedbackMode) => void;
|
|
48
|
+
/** @deprecated Use `mode` and `onModeChange` instead */
|
|
49
|
+
feedbackActive?: boolean;
|
|
50
|
+
/** @deprecated Use `onModeChange` instead */
|
|
51
|
+
onFeedbackActiveChange?: (active: boolean) => void;
|
|
52
|
+
debug?: boolean;
|
|
53
|
+
}
|
|
54
|
+
interface ThreadData {
|
|
55
|
+
annotation_surface: AnnotationSurface | null;
|
|
56
|
+
anchor_key: string | null;
|
|
57
|
+
coordinate_space: CoordinateSpace;
|
|
58
|
+
container_key: string | null;
|
|
59
|
+
id: string;
|
|
60
|
+
page_url: string;
|
|
61
|
+
review_url: string | null;
|
|
62
|
+
selector: string | null;
|
|
63
|
+
element_text: string | null;
|
|
64
|
+
element_tag: string | null;
|
|
65
|
+
x_position: number | null;
|
|
66
|
+
y_position: number | null;
|
|
67
|
+
viewport_width: number | null;
|
|
68
|
+
viewport_height: number | null;
|
|
69
|
+
modal_trigger_selector: string | null;
|
|
70
|
+
screenshot_path: string | null;
|
|
71
|
+
status: string;
|
|
72
|
+
visibility: string;
|
|
73
|
+
created_at: string;
|
|
74
|
+
}
|
|
75
|
+
interface PendingPin {
|
|
76
|
+
annotationSurface: AnnotationSurface;
|
|
77
|
+
anchorKey: string | null;
|
|
78
|
+
coordinateSpace: CoordinateSpace;
|
|
79
|
+
containerKey: string | null;
|
|
80
|
+
x: number;
|
|
81
|
+
y: number;
|
|
82
|
+
selector: string | null;
|
|
83
|
+
elementText: string;
|
|
84
|
+
elementTag: string;
|
|
85
|
+
pageUrl: string;
|
|
86
|
+
reviewUrl: string | null;
|
|
87
|
+
viewportLeft?: number;
|
|
88
|
+
viewportTop?: number;
|
|
89
|
+
}
|
|
90
|
+
interface PendingScreenshotPin {
|
|
91
|
+
x: number;
|
|
92
|
+
y: number;
|
|
93
|
+
width: number;
|
|
94
|
+
height: number;
|
|
95
|
+
pageUrl: string;
|
|
96
|
+
}
|
|
97
|
+
interface LauncherRenderProps {
|
|
98
|
+
mode: FeedbackMode;
|
|
99
|
+
setMode: (mode: FeedbackMode) => void;
|
|
100
|
+
/** @deprecated Use `mode === "annotate"` */
|
|
101
|
+
feedbackActive: boolean;
|
|
102
|
+
menuOpen: boolean;
|
|
103
|
+
canPinOnPage: boolean;
|
|
104
|
+
canScreenshot: boolean;
|
|
105
|
+
openMenu: () => void;
|
|
106
|
+
closeMenu: () => void;
|
|
107
|
+
toggleMenu: () => void;
|
|
108
|
+
enterPinMode: () => void;
|
|
109
|
+
exitPinMode: () => void;
|
|
110
|
+
startScreenshotCapture: () => Promise<void>;
|
|
111
|
+
}
|
|
112
|
+
interface ModalCaptureRenderProps {
|
|
113
|
+
captureScreenshot: () => Promise<void>;
|
|
114
|
+
closeLauncherMenu: () => void;
|
|
115
|
+
}
|
|
116
|
+
interface FeedbackContextType {
|
|
117
|
+
client: SupabaseClient;
|
|
118
|
+
workspaceId: string;
|
|
119
|
+
siteUrl?: string;
|
|
120
|
+
userId?: string;
|
|
121
|
+
userEmail?: string;
|
|
122
|
+
userDisplayName?: string;
|
|
123
|
+
authReady: boolean;
|
|
124
|
+
actorReady: boolean;
|
|
125
|
+
actorError: string | null;
|
|
126
|
+
debug: boolean;
|
|
127
|
+
canPinOnPage: boolean;
|
|
128
|
+
canScreenshot: boolean;
|
|
129
|
+
showHints: boolean;
|
|
130
|
+
annotationSurface: AnnotationSurface;
|
|
131
|
+
reviewUrl: string | null;
|
|
132
|
+
reviewOpen: boolean;
|
|
133
|
+
setReviewOpen: (open: boolean) => void;
|
|
134
|
+
scrollContainer?: ScrollContainerBinding;
|
|
135
|
+
resolveAnchor?: (target: Element) => AnchorResolution | null;
|
|
136
|
+
screenshotCapturing: boolean;
|
|
137
|
+
threads: ThreadData[];
|
|
138
|
+
isLoadingThreads: boolean;
|
|
139
|
+
mode: FeedbackMode;
|
|
140
|
+
setMode: (mode: FeedbackMode) => void;
|
|
141
|
+
feedbackActive: boolean;
|
|
142
|
+
setFeedbackActive: (active: boolean) => void;
|
|
143
|
+
menuOpen: boolean;
|
|
144
|
+
setMenuOpen: Dispatch<SetStateAction<boolean>>;
|
|
145
|
+
openMenu: () => void;
|
|
146
|
+
closeMenu: () => void;
|
|
147
|
+
toggleMenu: () => void;
|
|
148
|
+
enterPinMode: () => void;
|
|
149
|
+
exitPinMode: () => void;
|
|
150
|
+
startScreenshotCapture: () => Promise<void>;
|
|
151
|
+
pendingPin: PendingPin | null;
|
|
152
|
+
setPendingPin: (pin: PendingPin | null) => void;
|
|
153
|
+
screenshotDataUrl: string | null;
|
|
154
|
+
setScreenshotDataUrl: (url: string | null) => void;
|
|
155
|
+
pendingScreenshotPin: PendingScreenshotPin | null;
|
|
156
|
+
setPendingScreenshotPin: (pin: PendingScreenshotPin | null) => void;
|
|
157
|
+
submitThread: (body: string, visibility: "public" | "internal") => Promise<void>;
|
|
158
|
+
submitScreenshotThread: (body: string, visibility: "public" | "internal") => Promise<void>;
|
|
159
|
+
refreshThreads: () => Promise<void>;
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* SDK Entry Point — wrap your app to enable in-app feedback.
|
|
163
|
+
*/
|
|
164
|
+
declare function FeedbackProvider({ children, ...config }: FeedbackConfig & {
|
|
165
|
+
children?: ReactNode;
|
|
166
|
+
}): react_jsx_runtime.JSX.Element;
|
|
167
|
+
declare function useFeedback(): FeedbackContextType;
|
|
168
|
+
/**
|
|
169
|
+
* Safe version that returns null when outside FeedbackProvider (e.g. during HMR).
|
|
170
|
+
*/
|
|
171
|
+
declare function useFeedbackSafe(): FeedbackContextType | null;
|
|
172
|
+
|
|
173
|
+
interface IssuePinProps {
|
|
174
|
+
/** API key generated from the Issue Pin dashboard */
|
|
175
|
+
apiKey?: string;
|
|
176
|
+
/** Toggle SDK visibility without unmounting (default: true) */
|
|
177
|
+
enabled?: boolean;
|
|
178
|
+
/** Optional user info for attribution */
|
|
179
|
+
user?: {
|
|
180
|
+
id?: string;
|
|
181
|
+
email?: string;
|
|
182
|
+
displayName?: string;
|
|
183
|
+
};
|
|
184
|
+
/**
|
|
185
|
+
* Pass the host app's Supabase client to auto-extract user identity
|
|
186
|
+
* from their auth session. No manual user prop needed.
|
|
187
|
+
*
|
|
188
|
+
* @example
|
|
189
|
+
* import { supabase } from "./lib/supabase";
|
|
190
|
+
* <IssuePin apiKey="ew_live_..." supabaseClient={supabase} />
|
|
191
|
+
*/
|
|
192
|
+
supabaseClient?: SupabaseClient;
|
|
193
|
+
/** Allow creating element-based pins from the launcher */
|
|
194
|
+
allowPinOnPage?: boolean;
|
|
195
|
+
/** Allow screenshot capture flow from the launcher */
|
|
196
|
+
allowScreenshot?: boolean;
|
|
197
|
+
/** Show SDK-owned instructional hints and coachmarks */
|
|
198
|
+
showHints?: boolean;
|
|
199
|
+
/** Optional host-owned scroll container for element pins */
|
|
200
|
+
scrollContainer?: ScrollContainerBinding;
|
|
201
|
+
/** Resolve a stable logical anchor key for clicked elements */
|
|
202
|
+
resolveAnchor?: (target: Element) => AnchorResolution | null;
|
|
203
|
+
/** Dedicated review surface URL rendered inside a managed iframe overlay */
|
|
204
|
+
reviewUrl?: string;
|
|
205
|
+
/** Which surface new annotations should target */
|
|
206
|
+
annotationSurface?: AnnotationSurface;
|
|
207
|
+
/** Show historical thread pins independently from other SDK UI */
|
|
208
|
+
pinsVisible?: boolean;
|
|
209
|
+
/** Floating button position */
|
|
210
|
+
buttonPosition?: "bottom-right" | "bottom-left";
|
|
211
|
+
/** Replace the stock launcher with custom UI while keeping SDK-owned state/actions */
|
|
212
|
+
renderLauncher?: (props: LauncherRenderProps) => ReactNode;
|
|
213
|
+
/** Replace the default injected modal screenshot button */
|
|
214
|
+
renderModalCaptureButton?: (props: ModalCaptureRenderProps) => ReactNode;
|
|
215
|
+
/** Whether modal screenshot buttons should be injected into detected dialogs */
|
|
216
|
+
showModalCaptureButton?: boolean;
|
|
217
|
+
/** Controlled annotate mode — pair with `onModeChange` */
|
|
218
|
+
mode?: FeedbackMode;
|
|
219
|
+
/** Called when annotate mode changes (including from the floating SDK button) */
|
|
220
|
+
onModeChange?: (mode: FeedbackMode) => void;
|
|
221
|
+
/** @deprecated Use `mode` / `onModeChange` (`annotate` ↔ `true`) */
|
|
222
|
+
feedbackActive?: boolean;
|
|
223
|
+
/** @deprecated Use `onModeChange` */
|
|
224
|
+
onFeedbackActiveChange?: (active: boolean) => void;
|
|
225
|
+
/** Emit lifecycle/state logs for SDK troubleshooting */
|
|
226
|
+
debug?: boolean;
|
|
227
|
+
supabaseUrl?: string;
|
|
228
|
+
supabaseAnonKey?: string;
|
|
229
|
+
workspaceId?: string;
|
|
230
|
+
userId?: string;
|
|
231
|
+
userEmail?: string;
|
|
232
|
+
userDisplayName?: string;
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* Drop-in SDK component — mount anywhere in your app tree.
|
|
236
|
+
*
|
|
237
|
+
* Recommended (auto-detect identity from Supabase auth):
|
|
238
|
+
* <IssuePin apiKey="ew_live_..." supabaseClient={supabase} />
|
|
239
|
+
*
|
|
240
|
+
* Manual identity:
|
|
241
|
+
* <IssuePin apiKey="ew_live_..." user={{ email: "dev@co.com" }} />
|
|
242
|
+
*
|
|
243
|
+
* Toggle visibility without unmounting:
|
|
244
|
+
* <IssuePin apiKey="ew_live_..." enabled={showFeedback} supabaseClient={supabase} />
|
|
245
|
+
*/
|
|
246
|
+
declare function IssuePin({ apiKey, enabled, user, supabaseClient, allowPinOnPage, allowScreenshot, showHints, scrollContainer, resolveAnchor, reviewUrl, annotationSurface, pinsVisible, buttonPosition, renderLauncher, renderModalCaptureButton, showModalCaptureButton, mode, onModeChange, feedbackActive, onFeedbackActiveChange, debug, supabaseUrl, supabaseAnonKey, workspaceId, userId, userEmail, userDisplayName, }: IssuePinProps): react_jsx_runtime.JSX.Element;
|
|
247
|
+
|
|
248
|
+
declare function useIssuePinAnchor(anchorKey: string): (node: HTMLElement | null) => void;
|
|
249
|
+
|
|
250
|
+
interface FeedbackButtonProps {
|
|
251
|
+
position?: "bottom-right" | "bottom-left";
|
|
252
|
+
}
|
|
253
|
+
declare function FeedbackButton({ position }: FeedbackButtonProps): react_jsx_runtime.JSX.Element | null;
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* Transparent overlay for same-origin SDK usage.
|
|
257
|
+
* Stores pin position as document percentage (scrollWidth/scrollHeight); optional element metadata only.
|
|
258
|
+
*/
|
|
259
|
+
declare function FeedbackOverlay(): react_jsx_runtime.JSX.Element | null;
|
|
260
|
+
|
|
261
|
+
/**
|
|
262
|
+
* Renders thread pin markers in document or configured container coordinate space.
|
|
263
|
+
*/
|
|
264
|
+
declare function ThreadPins(): react_jsx_runtime.JSX.Element | null;
|
|
265
|
+
|
|
266
|
+
declare function ReviewSurfaceOverlay(): react_jsx_runtime.JSX.Element | null;
|
|
267
|
+
|
|
268
|
+
declare function SdkCommentPopover(): react_jsx_runtime.JSX.Element | null;
|
|
269
|
+
|
|
270
|
+
declare function ScreenshotFeedback(): react_jsx_runtime.JSX.Element | null;
|
|
271
|
+
|
|
272
|
+
/** Stacking order for SDK layers (host apps should avoid z-index above these). */
|
|
273
|
+
declare const Z: {
|
|
274
|
+
readonly pins: 99990;
|
|
275
|
+
readonly overlay: 99991;
|
|
276
|
+
readonly popover: 99992;
|
|
277
|
+
readonly launcher: 99993;
|
|
278
|
+
readonly screenshotModal: 99994;
|
|
279
|
+
readonly flash: 99998;
|
|
280
|
+
};
|
|
281
|
+
|
|
282
|
+
export { type AnchorResolution, type AnnotationSurface, IssuePin as ElementWhisperer, FeedbackButton, type FeedbackMode, FeedbackOverlay, FeedbackProvider, IssuePin, type LauncherRenderProps, type ModalCaptureRenderProps, type PendingPin, type PendingScreenshotPin, ReviewSurfaceOverlay, ScreenshotFeedback, type ScrollContainerBinding, SdkCommentPopover, type ThreadData, ThreadPins, Z, useFeedback, useFeedbackSafe, useIssuePinAnchor };
|