@loupeink/web-sdk 1.0.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 +21 -0
- package/README.md +82 -0
- package/dist/index.cjs +499 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.mts +44 -0
- package/dist/index.d.ts +44 -0
- package/dist/index.global.js +437 -0
- package/dist/index.global.js.map +1 -0
- package/dist/index.js +457 -0
- package/dist/index.js.map +1 -0
- package/package.json +46 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Loupe
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# @loupeink/web-sdk
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@loupeink/web-sdk)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
6
|
+
Floating feedback widget for web apps — captures screenshots, annotations, and page context, then submits directly to your [Loupe](https://loupe.ink) dashboard.
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- **Floating button** — non-intrusive feedback trigger, configurable position and color
|
|
11
|
+
- **In-browser screenshot** — captures the visible viewport, no browser extension required
|
|
12
|
+
- **Annotation canvas** — draw, highlight, and blur regions on the screenshot before submitting
|
|
13
|
+
- **Context capture** — automatically records current URL, page title, viewport size, and user agent
|
|
14
|
+
- **Shadow DOM isolated** — widget styles never conflict with your app's CSS
|
|
15
|
+
- **Works everywhere** — npm/bundler or plain `<script>` tag (CDN)
|
|
16
|
+
|
|
17
|
+
## Install
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @loupeink/web-sdk
|
|
21
|
+
# or
|
|
22
|
+
yarn add @loupeink/web-sdk
|
|
23
|
+
# or
|
|
24
|
+
pnpm add @loupeink/web-sdk
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Quick Start
|
|
28
|
+
|
|
29
|
+
### npm / bundler
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { init } from '@loupeink/web-sdk';
|
|
33
|
+
|
|
34
|
+
init({
|
|
35
|
+
apiKey: 'lp_your_project_api_key',
|
|
36
|
+
});
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### CDN / script tag
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<script src="https://cdn.jsdelivr.net/npm/@loupeink/web-sdk/dist/index.global.js"></script>
|
|
43
|
+
<script>
|
|
44
|
+
Loupe.init({ apiKey: 'lp_your_project_api_key' });
|
|
45
|
+
</script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Place the snippet before `</body>`. The widget mounts automatically.
|
|
49
|
+
|
|
50
|
+
## Configuration
|
|
51
|
+
|
|
52
|
+
| Option | Type | Default | Description |
|
|
53
|
+
|--------|------|---------|-------------|
|
|
54
|
+
| `apiKey` | `string` | **required** | Project API key from Loupe dashboard |
|
|
55
|
+
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Button position |
|
|
56
|
+
| `color` | `string` | `'#10b981'` | Button background color (any CSS color) |
|
|
57
|
+
| `buttonLabel` | `string` | `'Feedback'` | Button text |
|
|
58
|
+
| `endpoint` | `string` | Loupe production URL | Override Edge Function URL (self-hosted) |
|
|
59
|
+
|
|
60
|
+
## Getting an API key
|
|
61
|
+
|
|
62
|
+
1. Sign in to your [Loupe dashboard](https://loupe.ink)
|
|
63
|
+
2. Open a project → **API Keys**
|
|
64
|
+
3. Click **Generate key** — copy the `lp_…` key
|
|
65
|
+
4. Pass it to `init({ apiKey: '...' })`
|
|
66
|
+
|
|
67
|
+
## How it works
|
|
68
|
+
|
|
69
|
+
1. User clicks the floating button
|
|
70
|
+
2. Widget captures the visible viewport via `html2canvas`
|
|
71
|
+
3. Annotation overlay opens — user can draw, highlight, or blur regions on the screenshot
|
|
72
|
+
4. User adds a comment and optionally sets severity (`critical`, `major`, `minor`, `suggestion`)
|
|
73
|
+
5. Annotated screenshot + metadata POST to the Loupe Edge Function, authenticated with the API key
|
|
74
|
+
6. Feedback appears instantly in the Loupe dashboard
|
|
75
|
+
|
|
76
|
+
## Development
|
|
77
|
+
|
|
78
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md).
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
[MIT](./LICENSE)
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,499 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
LoupeWidget: () => LoupeWidget,
|
|
34
|
+
capturePageContext: () => capturePageContext,
|
|
35
|
+
captureScreenshot: () => captureScreenshot,
|
|
36
|
+
destroy: () => destroy,
|
|
37
|
+
init: () => init,
|
|
38
|
+
submitFeedback: () => submitFeedback
|
|
39
|
+
});
|
|
40
|
+
module.exports = __toCommonJS(index_exports);
|
|
41
|
+
|
|
42
|
+
// src/styles.ts
|
|
43
|
+
var WIDGET_CSS = `
|
|
44
|
+
.loupe-btn {
|
|
45
|
+
position: fixed;
|
|
46
|
+
z-index: 2147483647;
|
|
47
|
+
background-color: #10b981;
|
|
48
|
+
color: #ffffff;
|
|
49
|
+
border: none;
|
|
50
|
+
border-radius: 9999px;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
padding: 8px 16px;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.loupe-btn:hover {
|
|
60
|
+
opacity: 0.9;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.bottom-right {
|
|
64
|
+
bottom: 24px;
|
|
65
|
+
right: 24px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.bottom-left {
|
|
69
|
+
bottom: 24px;
|
|
70
|
+
left: 24px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.top-right {
|
|
74
|
+
top: 24px;
|
|
75
|
+
right: 24px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.top-left {
|
|
79
|
+
top: 24px;
|
|
80
|
+
left: 24px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.loupe-modal {
|
|
84
|
+
display: none;
|
|
85
|
+
position: fixed;
|
|
86
|
+
z-index: 2147483646;
|
|
87
|
+
bottom: 80px;
|
|
88
|
+
right: 24px;
|
|
89
|
+
background: #18181b;
|
|
90
|
+
border: 1px solid #3f3f46;
|
|
91
|
+
border-radius: 12px;
|
|
92
|
+
padding: 24px;
|
|
93
|
+
min-width: 320px;
|
|
94
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
|
95
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
96
|
+
color: #f4f4f5;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.loupe-modal.modal--visible {
|
|
100
|
+
display: block;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.loupe-modal textarea {
|
|
104
|
+
width: 100%;
|
|
105
|
+
box-sizing: border-box;
|
|
106
|
+
background: #27272a;
|
|
107
|
+
border: 1px solid #3f3f46;
|
|
108
|
+
border-radius: 6px;
|
|
109
|
+
color: #f4f4f5;
|
|
110
|
+
font-size: 14px;
|
|
111
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
112
|
+
padding: 8px;
|
|
113
|
+
margin-bottom: 12px;
|
|
114
|
+
resize: vertical;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.loupe-modal select {
|
|
118
|
+
width: 100%;
|
|
119
|
+
box-sizing: border-box;
|
|
120
|
+
background: #27272a;
|
|
121
|
+
border: 1px solid #3f3f46;
|
|
122
|
+
border-radius: 6px;
|
|
123
|
+
color: #f4f4f5;
|
|
124
|
+
font-size: 14px;
|
|
125
|
+
padding: 8px;
|
|
126
|
+
margin-bottom: 16px;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.loupe-modal-actions {
|
|
131
|
+
display: flex;
|
|
132
|
+
gap: 8px;
|
|
133
|
+
justify-content: flex-end;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.loupe-modal-submit {
|
|
137
|
+
background: #10b981;
|
|
138
|
+
color: #fff;
|
|
139
|
+
border: none;
|
|
140
|
+
border-radius: 6px;
|
|
141
|
+
padding: 8px 16px;
|
|
142
|
+
font-size: 14px;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.loupe-modal-cancel {
|
|
147
|
+
background: transparent;
|
|
148
|
+
color: #a1a1aa;
|
|
149
|
+
border: 1px solid #3f3f46;
|
|
150
|
+
border-radius: 6px;
|
|
151
|
+
padding: 8px 16px;
|
|
152
|
+
font-size: 14px;
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
}
|
|
155
|
+
`;
|
|
156
|
+
|
|
157
|
+
// src/screenshot.ts
|
|
158
|
+
var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
|
|
159
|
+
async function captureScreenshot(widgetHostEl) {
|
|
160
|
+
widgetHostEl.style.display = "none";
|
|
161
|
+
try {
|
|
162
|
+
const canvas = await (0, import_html2canvas_pro.default)(document.documentElement, {
|
|
163
|
+
useCORS: true,
|
|
164
|
+
allowTaint: false,
|
|
165
|
+
logging: false,
|
|
166
|
+
x: window.scrollX,
|
|
167
|
+
y: window.scrollY,
|
|
168
|
+
width: window.innerWidth,
|
|
169
|
+
height: window.innerHeight,
|
|
170
|
+
windowWidth: window.innerWidth,
|
|
171
|
+
windowHeight: window.innerHeight
|
|
172
|
+
});
|
|
173
|
+
return canvas.toDataURL("image/jpeg", 0.8);
|
|
174
|
+
} finally {
|
|
175
|
+
widgetHostEl.style.display = "";
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// src/context.ts
|
|
180
|
+
function capturePageContext() {
|
|
181
|
+
return {
|
|
182
|
+
url: window.location.href,
|
|
183
|
+
title: document.title,
|
|
184
|
+
viewportWidth: window.innerWidth,
|
|
185
|
+
viewportHeight: window.innerHeight,
|
|
186
|
+
userAgent: navigator.userAgent,
|
|
187
|
+
capturedAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// src/submit.ts
|
|
192
|
+
async function submitFeedback(opts) {
|
|
193
|
+
const response = await fetch(opts.edgeFunctionUrl, {
|
|
194
|
+
method: "POST",
|
|
195
|
+
headers: {
|
|
196
|
+
"Content-Type": "application/json",
|
|
197
|
+
"X-API-Key": opts.apiKey
|
|
198
|
+
},
|
|
199
|
+
body: JSON.stringify({
|
|
200
|
+
comment: opts.comment,
|
|
201
|
+
severity: opts.severity,
|
|
202
|
+
screenshot: opts.screenshotDataUrl,
|
|
203
|
+
context: opts.context
|
|
204
|
+
})
|
|
205
|
+
});
|
|
206
|
+
if (!response.ok) {
|
|
207
|
+
throw new Error("Submit failed: " + response.status);
|
|
208
|
+
}
|
|
209
|
+
return response.json();
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// src/annotation-step.tsx
|
|
213
|
+
var import_react = __toESM(require("react"));
|
|
214
|
+
var import_client = require("react-dom/client");
|
|
215
|
+
var import_ui = require("@loupeink/ui");
|
|
216
|
+
var ANNOTATION_CSS = `
|
|
217
|
+
/* \u2500\u2500 Design tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
218
|
+
.loupe-annotation-wrap {
|
|
219
|
+
--color-surface-0: #09090b;
|
|
220
|
+
--color-surface-1: #121215;
|
|
221
|
+
--color-surface-2: #1a1a1f;
|
|
222
|
+
--color-surface-3: #222228;
|
|
223
|
+
--color-text-primary: #fafafa;
|
|
224
|
+
--color-text-secondary: #a1a1aa;
|
|
225
|
+
--color-border-default: #27272a;
|
|
226
|
+
--color-accent: #34d399;
|
|
227
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
228
|
+
font-size: 14px;
|
|
229
|
+
color: var(--color-text-primary);
|
|
230
|
+
box-sizing: border-box;
|
|
231
|
+
}
|
|
232
|
+
.loupe-annotation-wrap *, .loupe-annotation-wrap *::before, .loupe-annotation-wrap *::after {
|
|
233
|
+
box-sizing: border-box;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
237
|
+
.flex { display: flex; }
|
|
238
|
+
.flex-col { flex-direction: column; }
|
|
239
|
+
.flex-wrap { flex-wrap: wrap; }
|
|
240
|
+
.flex-1 { flex: 1 1 0%; }
|
|
241
|
+
.flex-shrink-0 { flex-shrink: 0; }
|
|
242
|
+
.items-center { align-items: center; }
|
|
243
|
+
.justify-between { justify-content: space-between; }
|
|
244
|
+
.gap-1 { gap: 4px; }
|
|
245
|
+
.gap-0\\.5 { gap: 2px; }
|
|
246
|
+
.space-y-1 > * + * { margin-top: 4px; }
|
|
247
|
+
.min-w-0 { min-width: 0; }
|
|
248
|
+
|
|
249
|
+
/* \u2500\u2500 Sizing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
250
|
+
.h-full { height: 100%; }
|
|
251
|
+
.h-4 { height: 16px; }
|
|
252
|
+
.h-6 { height: 24px; }
|
|
253
|
+
.h-8 { height: 32px; }
|
|
254
|
+
.w-4 { width: 16px; }
|
|
255
|
+
.w-6 { width: 24px; }
|
|
256
|
+
.w-8 { width: 32px; }
|
|
257
|
+
.w-px { width: 1px; }
|
|
258
|
+
.w-72 { width: 288px; }
|
|
259
|
+
|
|
260
|
+
/* \u2500\u2500 Spacing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
261
|
+
.p-0 { padding: 0; }
|
|
262
|
+
.p-3 { padding: 12px; }
|
|
263
|
+
.p-4 { padding: 16px; }
|
|
264
|
+
.px-1\\.5 { padding-left: 6px; padding-right: 6px; }
|
|
265
|
+
.px-2 { padding-left: 8px; padding-right: 8px; }
|
|
266
|
+
.px-3 { padding-left: 12px; padding-right: 12px; }
|
|
267
|
+
.px-4 { padding-left: 16px; padding-right: 16px; }
|
|
268
|
+
.py-0\\.5 { padding-top: 2px; padding-bottom: 2px; }
|
|
269
|
+
.py-2 { padding-top: 8px; padding-bottom: 8px; }
|
|
270
|
+
.m-0 { margin: 0; }
|
|
271
|
+
.mx-1 { margin-left: 4px; margin-right: 4px; }
|
|
272
|
+
.mr-1 { margin-right: 4px; }
|
|
273
|
+
.mt-1 { margin-top: 4px; }
|
|
274
|
+
.mb-2 { margin-bottom: 8px; }
|
|
275
|
+
|
|
276
|
+
/* \u2500\u2500 Position \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
277
|
+
.relative { position: relative; }
|
|
278
|
+
.absolute { position: absolute; }
|
|
279
|
+
.right-0 { right: 0; }
|
|
280
|
+
.top-full { top: 100%; }
|
|
281
|
+
.z-50 { z-index: 50; }
|
|
282
|
+
.overflow-hidden { overflow: hidden; }
|
|
283
|
+
|
|
284
|
+
/* \u2500\u2500 Colours \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
285
|
+
.bg-surface-1 { background-color: var(--color-surface-1); }
|
|
286
|
+
.bg-surface-2 { background-color: var(--color-surface-2); }
|
|
287
|
+
.bg-surface-3 { background-color: var(--color-surface-3); }
|
|
288
|
+
.bg-transparent { background-color: transparent; }
|
|
289
|
+
.bg-accent { background-color: var(--color-accent); }
|
|
290
|
+
.text-text-primary { color: var(--color-text-primary); }
|
|
291
|
+
.text-text-secondary { color: var(--color-text-secondary); }
|
|
292
|
+
.text-white { color: #fff; }
|
|
293
|
+
|
|
294
|
+
/* \u2500\u2500 Borders \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
295
|
+
.border { border-width: 1px; border-style: solid; }
|
|
296
|
+
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
|
|
297
|
+
.border-none { border: none; }
|
|
298
|
+
.border-border-default { border-color: var(--color-border-default); }
|
|
299
|
+
.border-accent { border-color: var(--color-accent); }
|
|
300
|
+
.rounded { border-radius: 4px; }
|
|
301
|
+
.rounded-full { border-radius: 9999px; }
|
|
302
|
+
.rounded-lg { border-radius: 8px; }
|
|
303
|
+
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.2); }
|
|
304
|
+
|
|
305
|
+
/* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
306
|
+
.text-xs { font-size: 12px; line-height: 16px; }
|
|
307
|
+
.text-sm { font-size: 14px; line-height: 20px; }
|
|
308
|
+
.font-mono { font-family: ui-monospace, monospace; }
|
|
309
|
+
.font-semibold { font-weight: 600; }
|
|
310
|
+
.font-bold { font-weight: 700; }
|
|
311
|
+
.uppercase { text-transform: uppercase; }
|
|
312
|
+
.tracking-wide { letter-spacing: 0.025em; }
|
|
313
|
+
.outline-none { outline: none; }
|
|
314
|
+
.resize-none { resize: none; }
|
|
315
|
+
.transition-colors { transition: color 150ms, background-color 150ms, border-color 150ms; }
|
|
316
|
+
|
|
317
|
+
/* \u2500\u2500 Hover states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
318
|
+
.hover\\:text-text-primary:hover { color: var(--color-text-primary); }
|
|
319
|
+
.hover\\:bg-surface-2:hover { background-color: var(--color-surface-2); }
|
|
320
|
+
|
|
321
|
+
/* \u2500\u2500 Ring (active color swatch outline) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
322
|
+
.ring-2.ring-white.ring-offset-1 {
|
|
323
|
+
box-shadow: 0 0 0 1px var(--color-surface-1), 0 0 0 3px #fff;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* \u2500\u2500 Button base reset (so host-page styles don't bleed) \u2500\u2500\u2500 */
|
|
327
|
+
.loupe-annotation-wrap button {
|
|
328
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
329
|
+
cursor: pointer; border: 1px solid var(--color-border-default);
|
|
330
|
+
background: var(--color-surface-2); color: var(--color-text-primary);
|
|
331
|
+
font-family: inherit; font-size: 14px; line-height: 1;
|
|
332
|
+
}
|
|
333
|
+
.loupe-annotation-wrap button:hover {
|
|
334
|
+
background: var(--color-surface-3);
|
|
335
|
+
}
|
|
336
|
+
`;
|
|
337
|
+
function mountAnnotationStep(shadow, screenshotUrl, callbacks) {
|
|
338
|
+
const styleEl = document.createElement("style");
|
|
339
|
+
styleEl.textContent = ANNOTATION_CSS;
|
|
340
|
+
shadow.appendChild(styleEl);
|
|
341
|
+
const container = document.createElement("div");
|
|
342
|
+
container.className = "loupe-annotation-wrap";
|
|
343
|
+
container.style.cssText = "position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;";
|
|
344
|
+
shadow.appendChild(container);
|
|
345
|
+
const root = (0, import_client.createRoot)(container);
|
|
346
|
+
function cleanup() {
|
|
347
|
+
root.unmount();
|
|
348
|
+
container.remove();
|
|
349
|
+
styleEl.remove();
|
|
350
|
+
}
|
|
351
|
+
root.render(
|
|
352
|
+
import_react.default.createElement(import_ui.KonvaCanvas, {
|
|
353
|
+
screenshotUrl,
|
|
354
|
+
existingAnnotations: [],
|
|
355
|
+
onSave: (annotations, dataUrl) => {
|
|
356
|
+
cleanup();
|
|
357
|
+
callbacks.onSave(annotations, dataUrl);
|
|
358
|
+
},
|
|
359
|
+
onCancel: () => {
|
|
360
|
+
cleanup();
|
|
361
|
+
callbacks.onCancel();
|
|
362
|
+
}
|
|
363
|
+
})
|
|
364
|
+
);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
// src/widget.ts
|
|
368
|
+
var LoupeWidget = class {
|
|
369
|
+
constructor(config) {
|
|
370
|
+
this.hostEl = null;
|
|
371
|
+
this.shadow = null;
|
|
372
|
+
this.config = {
|
|
373
|
+
apiKey: config.apiKey,
|
|
374
|
+
edgeFunctionUrl: config.edgeFunctionUrl ?? "https://etdekhjnkevmrkgqixow.supabase.co/functions/v1/submit-sdk-feedback",
|
|
375
|
+
position: config.position ?? "bottom-right",
|
|
376
|
+
color: config.color ?? "#10b981",
|
|
377
|
+
buttonLabel: config.buttonLabel ?? "Feedback"
|
|
378
|
+
};
|
|
379
|
+
}
|
|
380
|
+
mount(container) {
|
|
381
|
+
this.hostEl = document.createElement("div");
|
|
382
|
+
this.hostEl.id = "loupe-widget-host";
|
|
383
|
+
this.shadow = this.hostEl.attachShadow({ mode: "open" });
|
|
384
|
+
const style = document.createElement("style");
|
|
385
|
+
style.textContent = WIDGET_CSS;
|
|
386
|
+
this.shadow.appendChild(style);
|
|
387
|
+
const button = document.createElement("button");
|
|
388
|
+
button.className = `loupe-btn ${this.config.position}`;
|
|
389
|
+
button.textContent = this.config.buttonLabel;
|
|
390
|
+
if (this.config.color) {
|
|
391
|
+
button.style.backgroundColor = this.config.color;
|
|
392
|
+
}
|
|
393
|
+
const modal = document.createElement("div");
|
|
394
|
+
modal.className = "loupe-modal";
|
|
395
|
+
modal.setAttribute("data-loupe-modal", "");
|
|
396
|
+
modal.setAttribute("aria-modal", "true");
|
|
397
|
+
modal.setAttribute("role", "dialog");
|
|
398
|
+
const textarea = document.createElement("textarea");
|
|
399
|
+
textarea.placeholder = "Describe the issue...";
|
|
400
|
+
textarea.rows = 4;
|
|
401
|
+
const select = document.createElement("select");
|
|
402
|
+
const severities = ["critical", "major", "minor", "suggestion"];
|
|
403
|
+
for (const s of severities) {
|
|
404
|
+
const opt = document.createElement("option");
|
|
405
|
+
opt.value = s;
|
|
406
|
+
opt.textContent = s.charAt(0).toUpperCase() + s.slice(1);
|
|
407
|
+
select.appendChild(opt);
|
|
408
|
+
}
|
|
409
|
+
const actions = document.createElement("div");
|
|
410
|
+
actions.className = "loupe-modal-actions";
|
|
411
|
+
const submitBtn = document.createElement("button");
|
|
412
|
+
submitBtn.className = "loupe-modal-submit";
|
|
413
|
+
submitBtn.textContent = "Send Feedback";
|
|
414
|
+
const cancelBtn = document.createElement("button");
|
|
415
|
+
cancelBtn.className = "loupe-modal-cancel";
|
|
416
|
+
cancelBtn.textContent = "Cancel";
|
|
417
|
+
actions.appendChild(cancelBtn);
|
|
418
|
+
actions.appendChild(submitBtn);
|
|
419
|
+
modal.appendChild(textarea);
|
|
420
|
+
modal.appendChild(select);
|
|
421
|
+
modal.appendChild(actions);
|
|
422
|
+
this.shadow.appendChild(button);
|
|
423
|
+
this.shadow.appendChild(modal);
|
|
424
|
+
container.appendChild(this.hostEl);
|
|
425
|
+
button.addEventListener("click", () => {
|
|
426
|
+
modal.classList.toggle("modal--visible");
|
|
427
|
+
});
|
|
428
|
+
cancelBtn.addEventListener("click", () => {
|
|
429
|
+
modal.classList.remove("modal--visible");
|
|
430
|
+
});
|
|
431
|
+
submitBtn.addEventListener("click", async () => {
|
|
432
|
+
const comment = textarea.value.trim();
|
|
433
|
+
const severity = select.value;
|
|
434
|
+
const originalLabel = submitBtn.textContent;
|
|
435
|
+
submitBtn.textContent = "Capturing...";
|
|
436
|
+
submitBtn.setAttribute("disabled", "");
|
|
437
|
+
try {
|
|
438
|
+
const rawDataUrl = await captureScreenshot(this.hostEl).catch(() => null);
|
|
439
|
+
modal.classList.remove("modal--visible");
|
|
440
|
+
mountAnnotationStep(this.shadow, rawDataUrl ?? "", {
|
|
441
|
+
onSave: async (_annotations, annotatedDataUrl) => {
|
|
442
|
+
const context = capturePageContext();
|
|
443
|
+
try {
|
|
444
|
+
await submitFeedback({
|
|
445
|
+
apiKey: this.config.apiKey,
|
|
446
|
+
edgeFunctionUrl: this.config.edgeFunctionUrl,
|
|
447
|
+
comment,
|
|
448
|
+
severity,
|
|
449
|
+
screenshotDataUrl: annotatedDataUrl,
|
|
450
|
+
context
|
|
451
|
+
});
|
|
452
|
+
textarea.value = "";
|
|
453
|
+
} catch {
|
|
454
|
+
alert("Failed to send feedback. Please try again.");
|
|
455
|
+
} finally {
|
|
456
|
+
submitBtn.textContent = originalLabel;
|
|
457
|
+
submitBtn.removeAttribute("disabled");
|
|
458
|
+
}
|
|
459
|
+
},
|
|
460
|
+
onCancel: () => {
|
|
461
|
+
modal.classList.add("modal--visible");
|
|
462
|
+
submitBtn.textContent = originalLabel;
|
|
463
|
+
submitBtn.removeAttribute("disabled");
|
|
464
|
+
}
|
|
465
|
+
});
|
|
466
|
+
} catch {
|
|
467
|
+
alert("Failed to capture screenshot. Please try again.");
|
|
468
|
+
submitBtn.textContent = originalLabel;
|
|
469
|
+
submitBtn.removeAttribute("disabled");
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
}
|
|
473
|
+
destroy() {
|
|
474
|
+
this.hostEl?.remove();
|
|
475
|
+
this.hostEl = null;
|
|
476
|
+
this.shadow = null;
|
|
477
|
+
}
|
|
478
|
+
};
|
|
479
|
+
|
|
480
|
+
// src/index.ts
|
|
481
|
+
var currentWidget = null;
|
|
482
|
+
function init(config) {
|
|
483
|
+
currentWidget = new LoupeWidget(config);
|
|
484
|
+
currentWidget.mount(document.body);
|
|
485
|
+
}
|
|
486
|
+
function destroy() {
|
|
487
|
+
currentWidget?.destroy();
|
|
488
|
+
currentWidget = null;
|
|
489
|
+
}
|
|
490
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
491
|
+
0 && (module.exports = {
|
|
492
|
+
LoupeWidget,
|
|
493
|
+
capturePageContext,
|
|
494
|
+
captureScreenshot,
|
|
495
|
+
destroy,
|
|
496
|
+
init,
|
|
497
|
+
submitFeedback
|
|
498
|
+
});
|
|
499
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/styles.ts","../src/screenshot.ts","../src/context.ts","../src/submit.ts","../src/annotation-step.tsx","../src/widget.ts"],"sourcesContent":["import { LoupeWidget, type LoupeWidgetConfig } from './widget';\n\nexport { LoupeWidget };\nexport type { LoupeWidgetConfig };\nexport { capturePageContext } from './context';\nexport { submitFeedback } from './submit';\nexport { captureScreenshot } from './screenshot';\n\nlet currentWidget: LoupeWidget | null = null;\n\nexport function init(config: LoupeWidgetConfig): void {\n currentWidget = new LoupeWidget(config);\n currentWidget.mount(document.body);\n}\n\nexport function destroy(): void {\n currentWidget?.destroy();\n currentWidget = null;\n}\n","export const WIDGET_CSS = `\n .loupe-btn {\n position: fixed;\n z-index: 2147483647;\n background-color: #10b981;\n color: #ffffff;\n border: none;\n border-radius: 9999px;\n cursor: pointer;\n padding: 8px 16px;\n font-size: 14px;\n font-family: system-ui, -apple-system, sans-serif;\n font-weight: 500;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n }\n\n .loupe-btn:hover {\n opacity: 0.9;\n }\n\n .bottom-right {\n bottom: 24px;\n right: 24px;\n }\n\n .bottom-left {\n bottom: 24px;\n left: 24px;\n }\n\n .top-right {\n top: 24px;\n right: 24px;\n }\n\n .top-left {\n top: 24px;\n left: 24px;\n }\n\n .loupe-modal {\n display: none;\n position: fixed;\n z-index: 2147483646;\n bottom: 80px;\n right: 24px;\n background: #18181b;\n border: 1px solid #3f3f46;\n border-radius: 12px;\n padding: 24px;\n min-width: 320px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n font-family: system-ui, -apple-system, sans-serif;\n color: #f4f4f5;\n }\n\n .loupe-modal.modal--visible {\n display: block;\n }\n\n .loupe-modal textarea {\n width: 100%;\n box-sizing: border-box;\n background: #27272a;\n border: 1px solid #3f3f46;\n border-radius: 6px;\n color: #f4f4f5;\n font-size: 14px;\n font-family: system-ui, -apple-system, sans-serif;\n padding: 8px;\n margin-bottom: 12px;\n resize: vertical;\n }\n\n .loupe-modal select {\n width: 100%;\n box-sizing: border-box;\n background: #27272a;\n border: 1px solid #3f3f46;\n border-radius: 6px;\n color: #f4f4f5;\n font-size: 14px;\n padding: 8px;\n margin-bottom: 16px;\n cursor: pointer;\n }\n\n .loupe-modal-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n }\n\n .loupe-modal-submit {\n background: #10b981;\n color: #fff;\n border: none;\n border-radius: 6px;\n padding: 8px 16px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .loupe-modal-cancel {\n background: transparent;\n color: #a1a1aa;\n border: 1px solid #3f3f46;\n border-radius: 6px;\n padding: 8px 16px;\n font-size: 14px;\n cursor: pointer;\n }\n`;\n","import html2canvas from 'html2canvas-pro';\n\nexport async function captureScreenshot(widgetHostEl: HTMLElement): Promise<string> {\n widgetHostEl.style.display = 'none';\n try {\n const canvas = await html2canvas(document.documentElement, {\n useCORS: true,\n allowTaint: false,\n logging: false,\n x: window.scrollX,\n y: window.scrollY,\n width: window.innerWidth,\n height: window.innerHeight,\n windowWidth: window.innerWidth,\n windowHeight: window.innerHeight,\n });\n return canvas.toDataURL('image/jpeg', 0.8);\n } finally {\n widgetHostEl.style.display = '';\n }\n}\n","export interface PageContext {\n url: string;\n title: string;\n viewportWidth: number;\n viewportHeight: number;\n userAgent: string;\n capturedAt: string;\n}\n\nexport function capturePageContext(): PageContext {\n return {\n url: window.location.href,\n title: document.title,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n userAgent: navigator.userAgent,\n capturedAt: new Date().toISOString(),\n };\n}\n","import type { PageContext } from './context';\n\nexport interface SubmitFeedbackOpts {\n apiKey: string;\n edgeFunctionUrl: string;\n comment: string;\n severity: 'critical' | 'major' | 'minor' | 'suggestion';\n screenshotDataUrl: string | null;\n context: PageContext;\n}\n\nexport async function submitFeedback(opts: SubmitFeedbackOpts): Promise<{ ok: boolean }> {\n const response = await fetch(opts.edgeFunctionUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': opts.apiKey,\n },\n body: JSON.stringify({\n comment: opts.comment,\n severity: opts.severity,\n screenshot: opts.screenshotDataUrl,\n context: opts.context,\n }),\n });\n\n if (!response.ok) {\n throw new Error('Submit failed: ' + response.status);\n }\n\n return response.json();\n}\n","import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { KonvaCanvas } from '@loupeink/ui';\nimport type { AnnotationShape } from '@loupeink/ui';\n\n// Full Tailwind + design-token CSS injected into Shadow DOM.\n// KonvaCanvas and KonvaToolbar use Tailwind utility classes and custom tokens\n// (bg-surface-1, border-border-default, etc.) that don't exist in the IIFE\n// bundle. We translate every class they use into explicit rules here.\nconst ANNOTATION_CSS = `\n /* ── Design tokens ─────────────────────────────────────── */\n .loupe-annotation-wrap {\n --color-surface-0: #09090b;\n --color-surface-1: #121215;\n --color-surface-2: #1a1a1f;\n --color-surface-3: #222228;\n --color-text-primary: #fafafa;\n --color-text-secondary: #a1a1aa;\n --color-border-default: #27272a;\n --color-accent: #34d399;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 14px;\n color: var(--color-text-primary);\n box-sizing: border-box;\n }\n .loupe-annotation-wrap *, .loupe-annotation-wrap *::before, .loupe-annotation-wrap *::after {\n box-sizing: border-box;\n }\n\n /* ── Layout ─────────────────────────────────────────────── */\n .flex { display: flex; }\n .flex-col { flex-direction: column; }\n .flex-wrap { flex-wrap: wrap; }\n .flex-1 { flex: 1 1 0%; }\n .flex-shrink-0 { flex-shrink: 0; }\n .items-center { align-items: center; }\n .justify-between { justify-content: space-between; }\n .gap-1 { gap: 4px; }\n .gap-0\\\\.5 { gap: 2px; }\n .space-y-1 > * + * { margin-top: 4px; }\n .min-w-0 { min-width: 0; }\n\n /* ── Sizing ──────────────────────────────────────────────── */\n .h-full { height: 100%; }\n .h-4 { height: 16px; }\n .h-6 { height: 24px; }\n .h-8 { height: 32px; }\n .w-4 { width: 16px; }\n .w-6 { width: 24px; }\n .w-8 { width: 32px; }\n .w-px { width: 1px; }\n .w-72 { width: 288px; }\n\n /* ── Spacing ─────────────────────────────────────────────── */\n .p-0 { padding: 0; }\n .p-3 { padding: 12px; }\n .p-4 { padding: 16px; }\n .px-1\\\\.5 { padding-left: 6px; padding-right: 6px; }\n .px-2 { padding-left: 8px; padding-right: 8px; }\n .px-3 { padding-left: 12px; padding-right: 12px; }\n .px-4 { padding-left: 16px; padding-right: 16px; }\n .py-0\\\\.5 { padding-top: 2px; padding-bottom: 2px; }\n .py-2 { padding-top: 8px; padding-bottom: 8px; }\n .m-0 { margin: 0; }\n .mx-1 { margin-left: 4px; margin-right: 4px; }\n .mr-1 { margin-right: 4px; }\n .mt-1 { margin-top: 4px; }\n .mb-2 { margin-bottom: 8px; }\n\n /* ── Position ────────────────────────────────────────────── */\n .relative { position: relative; }\n .absolute { position: absolute; }\n .right-0 { right: 0; }\n .top-full { top: 100%; }\n .z-50 { z-index: 50; }\n .overflow-hidden { overflow: hidden; }\n\n /* ── Colours ─────────────────────────────────────────────── */\n .bg-surface-1 { background-color: var(--color-surface-1); }\n .bg-surface-2 { background-color: var(--color-surface-2); }\n .bg-surface-3 { background-color: var(--color-surface-3); }\n .bg-transparent { background-color: transparent; }\n .bg-accent { background-color: var(--color-accent); }\n .text-text-primary { color: var(--color-text-primary); }\n .text-text-secondary { color: var(--color-text-secondary); }\n .text-white { color: #fff; }\n\n /* ── Borders ─────────────────────────────────────────────── */\n .border { border-width: 1px; border-style: solid; }\n .border-b { border-bottom-width: 1px; border-bottom-style: solid; }\n .border-none { border: none; }\n .border-border-default { border-color: var(--color-border-default); }\n .border-accent { border-color: var(--color-accent); }\n .rounded { border-radius: 4px; }\n .rounded-full { border-radius: 9999px; }\n .rounded-lg { border-radius: 8px; }\n .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.2); }\n\n /* ── Typography ──────────────────────────────────────────── */\n .text-xs { font-size: 12px; line-height: 16px; }\n .text-sm { font-size: 14px; line-height: 20px; }\n .font-mono { font-family: ui-monospace, monospace; }\n .font-semibold { font-weight: 600; }\n .font-bold { font-weight: 700; }\n .uppercase { text-transform: uppercase; }\n .tracking-wide { letter-spacing: 0.025em; }\n .outline-none { outline: none; }\n .resize-none { resize: none; }\n .transition-colors { transition: color 150ms, background-color 150ms, border-color 150ms; }\n\n /* ── Hover states ────────────────────────────────────────── */\n .hover\\\\:text-text-primary:hover { color: var(--color-text-primary); }\n .hover\\\\:bg-surface-2:hover { background-color: var(--color-surface-2); }\n\n /* ── Ring (active color swatch outline) ──────────────────── */\n .ring-2.ring-white.ring-offset-1 {\n box-shadow: 0 0 0 1px var(--color-surface-1), 0 0 0 3px #fff;\n }\n\n /* ── Button base reset (so host-page styles don't bleed) ─── */\n .loupe-annotation-wrap button {\n display: inline-flex; align-items: center; justify-content: center;\n cursor: pointer; border: 1px solid var(--color-border-default);\n background: var(--color-surface-2); color: var(--color-text-primary);\n font-family: inherit; font-size: 14px; line-height: 1;\n }\n .loupe-annotation-wrap button:hover {\n background: var(--color-surface-3);\n }\n`;\n\ninterface AnnotationCallbacks {\n onSave: (annotations: AnnotationShape[], annotatedDataUrl: string) => void;\n onCancel: () => void;\n}\n\n/**\n * Mount a KonvaCanvas annotation step inside the widget's Shadow DOM.\n *\n * Creates a full-screen overlay, renders KonvaCanvas with the provided\n * screenshot, and calls callbacks on save/cancel. React root and DOM nodes\n * are cleaned up after either action.\n */\nexport function mountAnnotationStep(\n shadow: ShadowRoot,\n screenshotUrl: string,\n callbacks: AnnotationCallbacks\n): void {\n // Inject annotation styles into the shadow root\n const styleEl = document.createElement('style');\n styleEl.textContent = ANNOTATION_CSS;\n shadow.appendChild(styleEl);\n\n // Create full-screen overlay container\n const container = document.createElement('div');\n container.className = 'loupe-annotation-wrap';\n container.style.cssText =\n 'position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;';\n shadow.appendChild(container);\n\n const root = createRoot(container);\n\n function cleanup() {\n root.unmount();\n container.remove();\n styleEl.remove();\n }\n\n root.render(\n React.createElement(KonvaCanvas, {\n screenshotUrl,\n existingAnnotations: [],\n onSave: (annotations: AnnotationShape[], dataUrl: string) => {\n cleanup();\n callbacks.onSave(annotations, dataUrl);\n },\n onCancel: () => {\n cleanup();\n callbacks.onCancel();\n },\n } as any)\n );\n}\n","import { WIDGET_CSS } from './styles';\nimport { captureScreenshot } from './screenshot';\nimport { capturePageContext } from './context';\nimport { submitFeedback } from './submit';\nimport { mountAnnotationStep } from './annotation-step';\n\nexport interface LoupeWidgetConfig {\n apiKey: string;\n edgeFunctionUrl?: string;\n position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n color?: string;\n buttonLabel?: string;\n}\n\nexport class LoupeWidget {\n private config: Required<LoupeWidgetConfig>;\n private hostEl: HTMLElement | null = null;\n private shadow: ShadowRoot | null = null;\n\n constructor(config: LoupeWidgetConfig) {\n this.config = {\n apiKey: config.apiKey,\n edgeFunctionUrl: config.edgeFunctionUrl ?? 'https://etdekhjnkevmrkgqixow.supabase.co/functions/v1/submit-sdk-feedback',\n position: config.position ?? 'bottom-right',\n color: config.color ?? '#10b981',\n buttonLabel: config.buttonLabel ?? 'Feedback',\n };\n }\n\n mount(container: HTMLElement): void {\n // Create shadow host\n this.hostEl = document.createElement('div');\n this.hostEl.id = 'loupe-widget-host';\n\n // Attach open shadow DOM (open mode allows test querying via shadowRoot)\n this.shadow = this.hostEl.attachShadow({ mode: 'open' });\n\n // Inject styles\n const style = document.createElement('style');\n style.textContent = WIDGET_CSS;\n this.shadow.appendChild(style);\n\n // Create feedback button\n const button = document.createElement('button');\n button.className = `loupe-btn ${this.config.position}`;\n button.textContent = this.config.buttonLabel;\n if (this.config.color) {\n button.style.backgroundColor = this.config.color;\n }\n\n // Create modal\n const modal = document.createElement('div');\n modal.className = 'loupe-modal';\n modal.setAttribute('data-loupe-modal', '');\n modal.setAttribute('aria-modal', 'true');\n modal.setAttribute('role', 'dialog');\n\n const textarea = document.createElement('textarea');\n textarea.placeholder = 'Describe the issue...';\n textarea.rows = 4;\n\n const select = document.createElement('select');\n const severities: Array<'critical' | 'major' | 'minor' | 'suggestion'> = ['critical', 'major', 'minor', 'suggestion'];\n for (const s of severities) {\n const opt = document.createElement('option');\n opt.value = s;\n opt.textContent = s.charAt(0).toUpperCase() + s.slice(1);\n select.appendChild(opt);\n }\n\n const actions = document.createElement('div');\n actions.className = 'loupe-modal-actions';\n\n const submitBtn = document.createElement('button');\n submitBtn.className = 'loupe-modal-submit';\n submitBtn.textContent = 'Send Feedback';\n\n const cancelBtn = document.createElement('button');\n cancelBtn.className = 'loupe-modal-cancel';\n cancelBtn.textContent = 'Cancel';\n\n actions.appendChild(cancelBtn);\n actions.appendChild(submitBtn);\n\n modal.appendChild(textarea);\n modal.appendChild(select);\n modal.appendChild(actions);\n\n // Append elements to shadow\n this.shadow.appendChild(button);\n this.shadow.appendChild(modal);\n\n // Append host to container\n container.appendChild(this.hostEl);\n\n // Wire up button click — toggle modal visibility\n button.addEventListener('click', () => {\n modal.classList.toggle('modal--visible');\n });\n\n // Wire up cancel\n cancelBtn.addEventListener('click', () => {\n modal.classList.remove('modal--visible');\n });\n\n // Wire up submit\n submitBtn.addEventListener('click', async () => {\n const comment = textarea.value.trim();\n const severity = select.value as 'critical' | 'major' | 'minor' | 'suggestion';\n const originalLabel = submitBtn.textContent;\n submitBtn.textContent = 'Capturing...';\n submitBtn.setAttribute('disabled', '');\n\n try {\n // 1. Take screenshot of the page\n const rawDataUrl = await captureScreenshot(this.hostEl!).catch(() => null);\n\n // 2. Hide the modal while annotation canvas is open\n modal.classList.remove('modal--visible');\n\n // 3. Open annotation step inside the shadow DOM\n mountAnnotationStep(this.shadow!, rawDataUrl ?? '', {\n onSave: async (_annotations, annotatedDataUrl) => {\n // 4. Submit with annotated screenshot\n const context = capturePageContext();\n try {\n await submitFeedback({\n apiKey: this.config.apiKey,\n edgeFunctionUrl: this.config.edgeFunctionUrl,\n comment,\n severity,\n screenshotDataUrl: annotatedDataUrl,\n context,\n });\n textarea.value = '';\n } catch {\n alert('Failed to send feedback. Please try again.');\n } finally {\n submitBtn.textContent = originalLabel;\n submitBtn.removeAttribute('disabled');\n }\n },\n onCancel: () => {\n // User cancelled annotation — restore modal\n modal.classList.add('modal--visible');\n submitBtn.textContent = originalLabel;\n submitBtn.removeAttribute('disabled');\n },\n });\n } catch {\n alert('Failed to capture screenshot. Please try again.');\n submitBtn.textContent = originalLabel;\n submitBtn.removeAttribute('disabled');\n }\n });\n }\n\n destroy(): void {\n this.hostEl?.remove();\n this.hostEl = null;\n this.shadow = null;\n }\n}\n"],"mappings":"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","names":["html2canvas","React"]}
|