@qaiddev/thumbs-embed 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,393 @@
+# @qaiddev/thumbs-embed
+
+A zero-dependency, lightweight feedback embed that adds thumbs up/down buttons to any website. Users can optionally target specific page elements, leave messages, and capture screenshots — all submitted to your API endpoint or the [QAid.dev hosted dashboard](https://qaid.dev).
+
+## Install
+
+### npm
+
+```bash
+npm install @qaiddev/thumbs-embed
+```
+
+```typescript
+import { FeedbackEmbed } from '@qaiddev/thumbs-embed';
+
+const feedback = new FeedbackEmbed({
+  endpoint: 'https://qaid.dev/api/feedback',
+  apiKey: 'YOUR_API_KEY',
+});
+```
+
+### CDN / Script Tag
+
+```html
+<script
+  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/qaid.umd.cjs"
+  data-endpoint="https://qaid.dev/api/feedback"
+  data-api-key="YOUR_API_KEY"
+></script>
+```
+
+The embed auto-initializes when it detects a `data-endpoint` attribute on its script tag.
+
+### JSON Config (Script Tag)
+
+For complex configurations, use a separate JSON config element:
+
+```html
+<script type="application/json" data-feedback-config>
+{
+  "endpoint": "https://qaid.dev/api/feedback",
+  "apiKey": "YOUR_API_KEY",
+  "position": "bottom-left",
+  "colors": {
+    "positive": "#22c55e",
+    "negative": "#ef4444",
+    "marker": "#8b5cf6"
+  },
+  "text": {
+    "modalTitle": "How are we doing?",
+    "placeholder": "Tell us what you think..."
+  }
+}
+</script>
+<script src="https://unpkg.com/@qaiddev/thumbs-embed/dist/qaid.umd.cjs"></script>
+```
+
+## How It Works
+
+1. Thumbs up/down buttons appear on your page
+2. User clicks a thumb button
+3. A targeting overlay activates — the user clicks on any page element to attach their feedback to it
+4. Optional permission to save a screenshot of the current tab.
+4. A modal appears where the user can optionally leave a more detailed message
+5. Feedback is submitted to your endpoint as a JSON POST.
+
+If `skipTargeting` is `true`, step 3 is skipped and the modal opens immediately.
+
+If `captureScreenshot` is `false`, we skip step 4. 
+
+## Configuration
+
+All are optional except `endpoint`.  
+
+We offer a Free Plan for a compatible endpoint and a dashboard to manage your site's feedback.
+
+### Core Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `endpoint` | `string` | **(required)** | API endpoint URL for submitting feedback data |
+| `apiKey` | `string` | `""` | API key for authenticating with the feedback service |
+| `skipTargeting` | `boolean` | `false` | Skip element targeting and go directly to the feedback modal |
+
+### Positioning
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `position` | `string` | `"bottom-right"` | Button position: `"bottom-right"`, `"bottom-left"`, `"top-right"`, `"top-left"` |
+| `offset` | `{ x?: number, y?: number }` | `{ x: 16, y: 16 }` | Distance from viewport edge in pixels |
+| `container` | `string` | `""` | CSS selector for a custom container element. When set, `position`, `offset`, and `zIndex` are ignored |
+| `zIndex` | `number` | `50` | z-index for the embed elements |
+
+### Appearance
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `buttonSize` | `string` | `"medium"` | Button size: `"small"` (36px), `"medium"` (48px), `"large"` (64px) |
+| `buttonClass` | `string` | `""` | Custom CSS class for buttons. When set, default button styles are not applied |
+| `incognito` | `boolean` | `false` | Buttons are invisible until hovered |
+| `modalWidth` | `number` | `400` | Width of the feedback modal in pixels |
+| `backdropOpacity` | `number` | `0.3` | Opacity of the dark backdrop behind the modal (0-1) |
+| `fontFamily` | `string` | `"system-ui, -apple-system, sans-serif"` | Font family for all text |
+| `fontSize` | `number` | `16` | Base font size in pixels |
+
+### Colors
+
+Pass a `colors` object to customize the color scheme:
+
+```typescript
+new FeedbackEmbed({
+  endpoint: '/api/feedback',
+  colors: {
+    positive: 'rgb(0, 200, 83)',  // Thumbs up color (default: green)
+    negative: 'rgb(255, 0, 0)',   // Thumbs down color (default: red)
+    marker: '#6366f1',            // Selected element outline & submit button (default: indigo)
+  },
+});
+```
+
+Colors accept hex (`#ABC`, `#AABBCC`) or `rgb(r, g, b)` format.
+
+### Custom Icons
+
+Replace the default thumb icons with SVG strings or emoji:
+
+```typescript
+new FeedbackEmbed({
+  endpoint: '/api/feedback',
+  positiveIcon: '<svg viewBox="0 0 24 24">...</svg>',
+  negativeIcon: '<svg viewBox="0 0 24 24">...</svg>',
+});
+```
+
+### Text Customization
+
+Every user-facing string can be overridden via the `text` object:
+
+```typescript
+new FeedbackEmbed({
+  endpoint: '/api/feedback',
+  text: {
+    tooltip: 'Any feedback? Click to start, Esc to cancel',
+    bannerText: 'Click on any element to target it with your feedback',
+    bannerHint: '(Press Escape to cancel)',
+    modalTitle: 'Thank you for your feedback!',
+    modalSubtitle: 'Would you like to add a message to help us understand your feedback better?',
+    placeholder: 'Optional: Tell us more about your experience...',
+    submitButton: 'Submit',
+    skipButton: 'Skip',
+  },
+});
+```
+
+### Screenshots
+
+Enable automatic screenshot capture with feedback submissions:
+
+```typescript
+new FeedbackEmbed({
+  endpoint: '/api/feedback',
+  captureScreenshot: true,
+  screenshotOptions: {
+    quality: 0.8,      // WebP compression quality (0-1)
+    maxWidth: 1280,    // Max screenshot width in pixels
+    maxHeight: 800,    // Max screenshot height in pixels
+  },
+});
+```
+
+Screenshots use the browser's Screen Capture API. The user will see a permission dialog. If they decline or the API is unavailable, the feedback is still submitted without a screenshot.
+
+## Script Tag Data Attributes
+
+When using the script tag method, all config options are available as `data-*` attributes:
+
+| Attribute | Maps To |
+|-----------|---------|
+| `data-endpoint` | `endpoint` |
+| `data-api-key` | `apiKey` |
+| `data-position` | `position` |
+| `data-zindex` | `zIndex` |
+| `data-button-size` | `buttonSize` |
+| `data-button-class` | `buttonClass` |
+| `data-modal-width` | `modalWidth` |
+| `data-backdrop-opacity` | `backdropOpacity` |
+| `data-offset-x` | `offset.x` |
+| `data-offset-y` | `offset.y` |
+| `data-positive-color` | `colors.positive` |
+| `data-negative-color` | `colors.negative` |
+| `data-marker-color` | `colors.marker` |
+| `data-container` | `container` |
+| `data-skip-targeting` | `skipTargeting` |
+| `data-incognito` | `incognito` |
+| `data-font-family` | `fontFamily` |
+| `data-font-size` | `fontSize` |
+| `data-tooltip` | `text.tooltip` |
+| `data-banner-text` | `text.bannerText` |
+| `data-banner-hint` | `text.bannerHint` |
+| `data-modal-title` | `text.modalTitle` |
+| `data-modal-subtitle` | `text.modalSubtitle` |
+| `data-placeholder` | `text.placeholder` |
+| `data-submit-button` | `text.submitButton` |
+| `data-skip-button` | `text.skipButton` |
+| `data-positive-icon` | `positiveIcon` |
+| `data-negative-icon` | `negativeIcon` |
+
+## Custom Button Container
+
+By default, the embed creates a fixed-position container in the viewport corner. To place the buttons inside your own element:
+
+```html
+<div id="my-feedback-spot"></div>
+
+<script>
+new FeedbackEmbed({
+  endpoint: '/api/feedback',
+  container: '#my-feedback-spot',
+});
+</script>
+```
+
+When `container` is set, the `position`, `offset`, and `zIndex` options are ignored. You control the layout.
+
+## Custom Button Styling
+
+Use `buttonClass` to apply your own CSS instead of the default button styles:
+
+```typescript
+new FeedbackEmbed({
+  endpoint: '/api/feedback',
+  buttonClass: 'my-feedback-btn',
+});
+```
+
+When `buttonClass` is provided, default button colors, sizing, and shadows are not applied. Structural styles (display, alignment, cursor) are still applied via `.qaid-btn-structural`. Your class controls everything visual.
+
+```css
+.my-feedback-btn {
+  width: 40px;
+  height: 40px;
+  background: #1a1a2e;
+  border: 2px solid #e94560;
+  border-radius: 8px;
+}
+
+.my-feedback-btn:hover {
+  background: #e94560;
+}
+```
+
+## API
+
+### Constructor
+
+```typescript
+const feedback = new FeedbackEmbed(config: FeedbackConfig);
+```
+
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| `destroy()` | Remove all DOM elements, event listeners, and injected styles. Safe to call multiple times. |
+
+### Payload
+
+The embed submits feedback in two steps:
+
+**1. Initial submission** — `POST` to your endpoint:
+
+```json
+{
+  "feedbackType": "up",
+  "pageUrl": "https://example.com/page",
+  "apiKey": "YOUR_API_KEY",
+  "elementSelector": "body > main:nth-child(2) > button:nth-child(3)",
+  "elementText": "Submit Order",
+  "consoleErrors": [
+    { "message": "TypeError: Cannot read properties of undefined", "timestamp": 1704067200000, "level": "error" }
+  ],
+  "screenWidth": 1920,
+  "screenHeight": 1080,
+  "clickX": 450,
+  "clickY": 320,
+  "scrollX": 0,
+  "scrollY": 150,
+  "screenshot": "data:image/webp;base64,...",
+  "visitorId": "a1b2c3d4-...",
+  "elementBounds": { "x": 400, "y": 300, "width": 120, "height": 40 },
+  "userAgent": "Mozilla/5.0 ..."
+}
+```
+
+Your endpoint should return `{ "id": 123 }`.
+
+**2. Message update** — `PATCH` to `{endpoint}/{id}`:
+
+```json
+{
+  "message": "The submit button doesn't work on mobile"
+}
+```
+
+## Console Capture
+
+The embed automatically captures up to 20 recent `console.error`, `console.warn`, and `console.log` calls during the user's session. These are included in the feedback payload as `consoleErrors`, giving you context about what went wrong before the user submitted feedback.
+
+Console methods are restored to their originals when `destroy()` is called.
+
+## Element Targeting
+
+When the user clicks on an element during targeting mode, the embed generates a stable CSS selector using this priority:
+
+1. **Data attributes** — `data-comp`, `data-qa`, `data-testid`, `data-id` (checked on the element and its ancestors)
+2. **Element ID** — e.g. `#submit-button`
+3. **nth-child path** — e.g. `body > main:nth-child(2) > button:nth-child(3)` (always unique, always valid)
+
+The first 100 characters of the element's text content are also captured.
+
+## Responsive Behavior
+
+- **Desktop**: The feedback modal is positioned near the selected element with an arrow pointing at the click location
+- **Mobile** (viewport < 640px): The modal displays as a bottom sheet, sliding up from the bottom of the screen with safe-area inset support
+
+## CSS Custom Properties
+
+The embed injects CSS custom properties you can use or override:
+
+```css
+:root {
+  --qaid-positive: rgb(0, 200, 83);
+  --qaid-negative: rgb(255, 0, 0);
+  --qaid-marker: #6366f1;
+  --qaid-btn-size: 48px;
+  --qaid-icon-size: 24px;
+  --qaid-modal-width: 400px;
+  --qaid-backdrop-opacity: 0.3;
+  --qaid-font-family: system-ui, -apple-system, sans-serif;
+  --qaid-font-size: 16px;
+}
+```
+
+The embed also supports dark mode automatically via the `light-dark()` CSS function.
+
+## Hosted Dashboard
+
+[Qaid](https://qaid.dev) provides a hosted dashboard for managing feedback collected by this embed:
+
+- **Feedback inbox** with archiving and admin notes
+- **Project management** with multiple API keys
+- **Team collaboration** with owners, members, and invitations
+- **Browser context** — console errors, viewport info, user agent captured with each submission
+- **Screenshot viewing** for visual bug reports
+- **Analytics** and data retention
+
+### Plans
+
+| | Cadet (Free) | Commander ($9/mo) | Admiral (Enterprise) |
+|---|---|---|---|
+| Projects | 1 | Unlimited | Unlimited |
+| Messages | 100/mo | Unlimited | Unlimited |
+| Data retention | 7 days | 1 year | Unlimited |
+| Screenshots | - | Yes | Yes |
+| Notifications | - | Email/Text | Email/Text |
+| Integrations | - | GitHub + more | Custom |
+
+Sign up at [qaid.dev](https://qaid.dev). You can also self-host — the embed works with any endpoint that accepts the payload format described above.
+
+## Self-Hosting
+
+The embed is endpoint-agnostic. Point it at your own server:
+
+```typescript
+new FeedbackEmbed({
+  endpoint: 'https://your-server.com/api/feedback',
+});
+```
+
+Your server needs to handle:
+
+1. `POST /api/feedback` — Accept the feedback payload, return `{ "id": number }`
+2. `PATCH /api/feedback/:id` — Accept `{ "message": string | null }` or `{ "feedbackType": "up" | "down" }`
+
+## Project Badges
+
+<a href="https://www.npmjs.com/package/@qaiddev/thumbs-embed">
+<img alt="npm version" src="https://img.shields.io/npm/v/@qaiddev/thumbs-embed" />
+</a> 
+
+<a href="https://github.com/qaiddev/thumbs-embed/blob/prod/LICENSE">
+  <img alt="license" src="https://img.shields.io/npm/l/@qaiddev/thumbs-embed"/>
+</a>

package/dist/qaid.js

@@ -5,7 +5,7 @@ const y = `<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" fill="none"
   <path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
 </svg>`, q = `<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
   <path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.737 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.095c.5 0 .905-.405.905-.905 0-.714.211-1.412.608-2.006L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
-</svg>`, P = "body.qaid-targeting,body.qaid-targeting *{cursor:none!important}.qaid-widget,.qaid-widget *,.qaid-modal-container,.qaid-modal-container *{cursor:pointer!important}.qaid-widget.qaid-auto-container{position:fixed;z-index:50;display:flex;gap:.5rem}.qaid-widget.qaid-auto-container.qaid-bottom-right{bottom:1rem;right:1rem}.qaid-widget.qaid-auto-container.qaid-bottom-left{bottom:1rem;left:1rem}.qaid-widget.qaid-auto-container.qaid-top-right{top:1rem;right:1rem}.qaid-widget.qaid-auto-container.qaid-top-left{top:1rem;left:1rem}.qaid-widget.qaid-incognito{opacity:0;transition:opacity .2s ease-in-out}.qaid-widget.qaid-incognito:hover{opacity:1}.qaid-btn-structural{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.qaid-icon{width:24px;height:24px}.qaid-btn-structural:not(:has(svg)),.qaid-btn:not(:has(svg)){font-size:var(--qaid-icon-size, 24px);line-height:1}.qaid-emoji-icon{font-size:var(--qaid-icon-size, 24px);line-height:1}.qaid-tooltip-wrapper{position:relative}.qaid-tooltip-text{position:fixed;padding:.5rem .75rem;background:#1f2937;color:#fff;font-size:1rem;font-weight:600;border-radius:.5rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:99999}.qaid-tooltip-text.qaid-tooltip-visible{opacity:1}.qaid-targeting-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none}.qaid-capture-layer{position:fixed;top:0;right:0;bottom:0;left:0;cursor:crosshair;pointer-events:auto;z-index:9999}.qaid-banner{position:fixed;top:0;left:0;right:0;padding:.75rem 1rem;text-align:center;z-index:10000;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px);animation:qaid-slideDown .2s ease-out}.qaid-banner-up{background:color-mix(in srgb,var(--qaid-positive) 90%,transparent);color:#fff}.qaid-banner-down{background:color-mix(in srgb,var(--qaid-negative) 90%,transparent);color:#fff}.qaid-banner-text{font-weight:500}.qaid-banner-hint{margin-left:.5rem;opacity:.75}@keyframes qaid-slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.qaid-vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%);z-index:41}.qaid-crosshair-h,.qaid-crosshair-v{position:fixed;pointer-events:none;z-index:42}.qaid-crosshair-h{left:0;right:0;height:1px;background:color-mix(in srgb,var(--qaid-negative) 60%,transparent)}.qaid-crosshair-v{top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--qaid-negative) 60%,transparent)}.qaid-type-up .qaid-crosshair-h,.qaid-type-up .qaid-crosshair-v{background:color-mix(in srgb,var(--qaid-positive) 60%,transparent)}.qaid-scope{position:fixed;width:80px;height:80px;pointer-events:none;z-index:43;transform:translate(-50%,-50%)}.qaid-scope-ring{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:2px solid color-mix(in srgb,var(--qaid-negative) 80%,transparent);border-radius:50%}.qaid-type-up .qaid-scope-ring{border-color:color-mix(in srgb,var(--qaid-positive) 80%,transparent)}.qaid-scope-ring-inner{position:absolute;top:20px;right:20px;bottom:20px;left:20px;border:1px solid color-mix(in srgb,var(--qaid-negative) 50%,transparent);border-radius:50%}.qaid-type-up .qaid-scope-ring-inner{border-color:color-mix(in srgb,var(--qaid-positive) 50%,transparent)}.qaid-scope-dot{position:absolute;top:50%;left:50%;width:4px;height:4px;background:var(--qaid-negative);border-radius:50%;transform:translate(-50%,-50%)}.qaid-type-up .qaid-scope-dot{background:var(--qaid-positive)}.qaid-highlight{outline:3px solid color-mix(in srgb,var(--qaid-negative) 80%,transparent)!important;outline-offset:2px!important;background-color:color-mix(in srgb,var(--qaid-negative) 10%,transparent)!important;transition:outline .1s ease,background-color .1s ease}body.qaid-targeting.qaid-type-up .qaid-highlight{outline-color:color-mix(in srgb,var(--qaid-positive) 80%,transparent)!important;background-color:color-mix(in srgb,var(--qaid-positive) 10%,transparent)!important}.qaid-selected-marker{position:fixed;border:3px solid var(--qaid-marker, #6366f1);border-radius:50%;pointer-events:none;z-index:44;animation:qaid-markerPulse 1.5s ease-in-out infinite}@keyframes qaid-markerPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.qaid-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:#0000004d}.qaid-modal-container{position:fixed;z-index:50;display:flex;flex-direction:column;align-items:flex-start;max-height:calc(100vh - 32px);font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px)}.qaid-modal-container.qaid-above{flex-direction:column-reverse}.qaid-modal-arrow{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;position:relative;align-self:flex-start}.qaid-modal-container.qaid-below .qaid-modal-arrow{border-bottom:12px solid light-dark(#ffffff,#1f2937)}.qaid-modal-container.qaid-above .qaid-modal-arrow{border-top:12px solid light-dark(#ffffff,#1f2937)}.qaid-modal-box{color-scheme:inherit;background:light-dark(#ffffff,#1f2937);border-radius:1rem;padding:1.5rem;box-shadow:0 25px 50px -12px light-dark(rgba(0,0,0,.25),rgba(0,0,0,.5));width:var(--qaid-modal-width, 400px);max-width:calc(100vw - 32px);max-height:calc(100vh - 60px);overflow-y:auto}.qaid-modal-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.qaid-type-toggle{border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.qaid-type-toggle:hover{transform:scale(1.1)}.qaid-type-toggle:not(.qaid-type-toggle-custom){width:2.5rem;height:2.5rem;border-radius:50%}.qaid-type-toggle:not(.qaid-type-toggle-custom) svg{width:1.25rem;height:1.25rem}.qaid-type-toggle.qaid-type-up{background:var(--qaid-positive);color:#fff}.qaid-type-toggle.qaid-type-down{background:var(--qaid-negative);color:#fff}.qaid-modal-header-text{flex:1;min-width:0}.qaid-modal-title{font-size:1.125rem;font-weight:700;margin:0 0 .25rem;color:light-dark(#1f2937,#f9fafb)}.qaid-modal-subtitle{color:light-dark(#6b7280,#9ca3af);margin:0;font-size:.875rem}.qaid-textarea{width:100%;height:6rem;padding:.75rem;border:1px solid light-dark(#d1d5db,#374151);border-radius:.5rem;font-family:inherit;font-size:1rem;resize:vertical;margin-bottom:1rem;box-sizing:border-box;background:light-dark(#ffffff,#111827);color:light-dark(#1f2937,#f9fafb)}.qaid-textarea:focus{outline:none;border-color:var(--qaid-marker);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker) 20%,transparent)}.qaid-btn-row{display:flex;gap:.5rem;justify-content:flex-end}.qaid-btn-submit{padding:.5rem 1rem;background:var(--qaid-marker);color:var(--qaid-marker-text, white);border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s,filter .2s}.qaid-btn-submit:hover{filter:brightness(.85)}.qaid-btn-submit:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker) 30%,transparent)}.qaid-bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:50;animation:qaid-slideUpSheet .3s ease-out;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px)}.qaid-bottom-sheet-content{background:light-dark(#ffffff,#1f2937);border-radius:1rem 1rem 0 0;padding:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}.qaid-bottom-sheet-handle{width:36px;height:4px;background:light-dark(rgba(0,0,0,.2),rgba(255,255,255,.2));border-radius:2px;margin:0 auto 1rem}@keyframes qaid-slideUpSheet{0%{transform:translateY(100%)}to{transform:translateY(0)}}";
+</svg>`, P = "body.qaid-targeting,body.qaid-targeting *{cursor:none!important}.qaid-widget,.qaid-widget *,.qaid-modal-container,.qaid-modal-container *{cursor:pointer!important}.qaid-widget.qaid-auto-container{position:fixed;z-index:50;display:flex;gap:.5rem}.qaid-widget.qaid-auto-container.qaid-bottom-right{bottom:1rem;right:1rem}.qaid-widget.qaid-auto-container.qaid-bottom-left{bottom:1rem;left:1rem}.qaid-widget.qaid-auto-container.qaid-top-right{top:1rem;right:1rem}.qaid-widget.qaid-auto-container.qaid-top-left{top:1rem;left:1rem}.qaid-widget.qaid-incognito{opacity:0;transition:opacity .2s ease-in-out}.qaid-widget.qaid-incognito:hover{opacity:1}button.qaid-btn-structural{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.qaid-icon{width:24px;height:24px}.qaid-btn-structural:not(:has(svg)),.qaid-btn:not(:has(svg)){font-size:var(--qaid-icon-size, 24px);line-height:1}.qaid-emoji-icon{font-size:var(--qaid-icon-size, 24px);line-height:1}.qaid-tooltip-wrapper{position:relative}.qaid-tooltip-text{position:fixed;padding:.5rem .75rem;background:#1f2937;color:#fff;font-size:1rem;font-weight:600;border-radius:.5rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:99999}.qaid-tooltip-text.qaid-tooltip-visible{opacity:1}.qaid-targeting-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none}.qaid-capture-layer{position:fixed;top:0;right:0;bottom:0;left:0;cursor:crosshair;pointer-events:auto;z-index:9999}.qaid-banner{position:fixed;top:0;left:0;right:0;padding:.75rem 1rem;text-align:center;z-index:10000;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px);animation:qaid-slideDown .2s ease-out}.qaid-banner-up{background:color-mix(in srgb,var(--qaid-positive) 90%,transparent);color:#fff}.qaid-banner-down{background:color-mix(in srgb,var(--qaid-negative) 90%,transparent);color:#fff}.qaid-banner-text{font-weight:500}.qaid-banner-hint{margin-left:.5rem;opacity:.75}@keyframes qaid-slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.qaid-vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%);z-index:41}.qaid-crosshair-h,.qaid-crosshair-v{position:fixed;pointer-events:none;z-index:42}.qaid-crosshair-h{left:0;right:0;height:1px;background:color-mix(in srgb,var(--qaid-negative) 60%,transparent)}.qaid-crosshair-v{top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--qaid-negative) 60%,transparent)}.qaid-type-up .qaid-crosshair-h,.qaid-type-up .qaid-crosshair-v{background:color-mix(in srgb,var(--qaid-positive) 60%,transparent)}.qaid-scope{position:fixed;width:80px;height:80px;pointer-events:none;z-index:43;transform:translate(-50%,-50%)}.qaid-scope-ring{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:2px solid color-mix(in srgb,var(--qaid-negative) 80%,transparent);border-radius:50%}.qaid-type-up .qaid-scope-ring{border-color:color-mix(in srgb,var(--qaid-positive) 80%,transparent)}.qaid-scope-ring-inner{position:absolute;top:20px;right:20px;bottom:20px;left:20px;border:1px solid color-mix(in srgb,var(--qaid-negative) 50%,transparent);border-radius:50%}.qaid-type-up .qaid-scope-ring-inner{border-color:color-mix(in srgb,var(--qaid-positive) 50%,transparent)}.qaid-scope-dot{position:absolute;top:50%;left:50%;width:4px;height:4px;background:var(--qaid-negative);border-radius:50%;transform:translate(-50%,-50%)}.qaid-type-up .qaid-scope-dot{background:var(--qaid-positive)}.qaid-highlight{outline:3px solid color-mix(in srgb,var(--qaid-negative) 80%,transparent)!important;outline-offset:2px!important;background-color:color-mix(in srgb,var(--qaid-negative) 10%,transparent)!important;transition:outline .1s ease,background-color .1s ease}body.qaid-targeting.qaid-type-up .qaid-highlight{outline-color:color-mix(in srgb,var(--qaid-positive) 80%,transparent)!important;background-color:color-mix(in srgb,var(--qaid-positive) 10%,transparent)!important}.qaid-selected-marker{position:fixed;border:3px solid var(--qaid-marker, #6366f1);border-radius:50%;pointer-events:none;z-index:44;animation:qaid-markerPulse 1.5s ease-in-out infinite}@keyframes qaid-markerPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.qaid-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:#0000004d}.qaid-modal-container{position:fixed;z-index:50;display:flex;flex-direction:column;align-items:flex-start;max-height:calc(100vh - 32px);font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px)}.qaid-modal-container.qaid-above{flex-direction:column-reverse}.qaid-modal-arrow{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;position:relative;align-self:flex-start}.qaid-modal-container.qaid-below .qaid-modal-arrow{border-bottom:12px solid light-dark(#ffffff,#1f2937)}.qaid-modal-container.qaid-above .qaid-modal-arrow{border-top:12px solid light-dark(#ffffff,#1f2937)}.qaid-modal-box{color-scheme:inherit;background:light-dark(#ffffff,#1f2937);border-radius:1rem;padding:1.5rem;box-shadow:0 25px 50px -12px light-dark(rgba(0,0,0,.25),rgba(0,0,0,.5));width:var(--qaid-modal-width, 400px);max-width:calc(100vw - 32px);max-height:calc(100vh - 60px);overflow-y:auto}.qaid-modal-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}button.qaid-type-toggle{border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.qaid-type-toggle:hover{transform:scale(1.1)}button.qaid-type-toggle:not(.qaid-type-toggle-custom){width:2.5rem;height:2.5rem;border-radius:50%}button.qaid-type-toggle:not(.qaid-type-toggle-custom) svg{width:1.25rem;height:1.25rem}button.qaid-type-toggle.qaid-type-up{background:var(--qaid-positive);color:#fff}button.qaid-type-toggle.qaid-type-down{background:var(--qaid-negative);color:#fff}.qaid-modal-header-text{flex:1;min-width:0}.qaid-modal-title{font-size:1.125rem;font-weight:700;margin:0 0 .25rem;color:light-dark(#1f2937,#f9fafb)}.qaid-modal-subtitle{color:light-dark(#6b7280,#9ca3af);margin:0;font-size:.875rem}.qaid-textarea{width:100%;height:6rem;padding:.75rem;border:1px solid light-dark(#d1d5db,#374151);border-radius:.5rem;font-family:inherit;font-size:1rem;resize:vertical;margin-bottom:1rem;box-sizing:border-box;background:light-dark(#ffffff,#111827);color:light-dark(#1f2937,#f9fafb)}.qaid-textarea:focus{outline:none;border-color:var(--qaid-marker);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker) 20%,transparent)}.qaid-btn-row{display:flex;gap:.5rem;justify-content:flex-end}button.qaid-btn-submit{padding:.5rem 1rem;background:var(--qaid-marker);color:var(--qaid-marker-text, white);border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s,filter .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.qaid-btn-submit:hover{filter:brightness(.85)}button.qaid-btn-submit:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker) 30%,transparent)}.qaid-bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:50;animation:qaid-slideUpSheet .3s ease-out;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px)}.qaid-bottom-sheet-content{background:light-dark(#ffffff,#1f2937);border-radius:1rem 1rem 0 0;padding:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}.qaid-bottom-sheet-handle{width:36px;height:4px;background:light-dark(rgba(0,0,0,.2),rgba(255,255,255,.2));border-radius:2px;margin:0 auto 1rem}@keyframes qaid-slideUpSheet{0%{transform:translateY(100%)}to{transform:translateY(0)}}";
 let k = !1;
 const U = {
   small: 36,
@@ -53,7 +53,7 @@ function R(i = {}) {
     backdropOpacity: s = 0.3,
     fontFamily: l = "system-ui, -apple-system, sans-serif",
     fontSize: r = 16
-  } = i, c = U[n], p = W[n], f = Y(o), h = `:root{--qaid-positive:${t};--qaid-negative:${e};--qaid-marker:${o};--qaid-marker-text:${f};--qaid-btn-size:${c}px;--qaid-icon-size:${p}px;--qaid-modal-width:${a}px;--qaid-backdrop-opacity:${s};--qaid-font-family:${l};--qaid-font-size:${r}px}`, u = ".qaid-btn{width:var(--qaid-btn-size);height:var(--qaid-btn-size);border-radius:50%;border:none;background:#f3f4f6;color:#374151;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);transition:background-color .2s,color .2s,transform .2s}.qaid-btn:hover{transform:scale(1.05)}.qaid-btn-up:hover{background:var(--qaid-positive);color:#fff}.qaid-btn-down:hover{background:var(--qaid-negative);color:#fff}.qaid-btn svg{width:var(--qaid-icon-size);height:var(--qaid-icon-size)}", m = document.createElement("style");
+  } = i, c = U[n], p = W[n], f = Y(o), h = `:root{--qaid-positive:${t};--qaid-negative:${e};--qaid-marker:${o};--qaid-marker-text:${f};--qaid-btn-size:${c}px;--qaid-icon-size:${p}px;--qaid-modal-width:${a}px;--qaid-backdrop-opacity:${s};--qaid-font-family:${l};--qaid-font-size:${r}px}`, u = "button.qaid-btn{width:var(--qaid-btn-size);height:var(--qaid-btn-size);border-radius:50%;border:none;background:#f3f4f6;color:#374151;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);transition:background-color .2s,color .2s,transform .2s;-webkit-appearance:none;appearance:none}button.qaid-btn:hover{transform:scale(1.05)}button.qaid-btn-up:hover{background:var(--qaid-positive);color:#fff}button.qaid-btn-down:hover{background:var(--qaid-negative);color:#fff}button.qaid-btn svg{width:var(--qaid-icon-size);height:var(--qaid-icon-size)}", m = document.createElement("style");
   m.id = "qaid-styles", m.textContent = h + P + u, document.head.appendChild(m);
 }
 function K() {