@hitslop/slurp-sdk 0.1.1 → 0.1.2

package/README.md

@@ -111,7 +111,7 @@ init({ key: 'slurp_pk_…', endpoint: 'https://slurp.YOUR-SUBDOMAIN.workers.dev/
 mountFeedback({ askEmail: true, data: () => ({ plan: currentPlan() }) });
 ```
 
-The event is `{ event: 'feedback', data: { message, rating?, email?, ...data() } }` with the usual page context, so in SQL: `SELECT timestamp, data->>'message', data->>'rating' FROM events WHERE event = 'feedback'`. Options: `client` (default: the client from `init`), `label`, `title`, `placeholder`, `ratings` (default true), `askEmail` (default false), `position` (`bottom-right` or `bottom-left`), `accent`, `theme` (`auto` follows the visitor's dark mode; `light` or `dark` match your page), `event`, `data`, `button: false` (open it from your own button with the returned `open()`), `container`. It returns `{ open, close, destroy }`. Text a person types is only ever set as text, never parsed as HTML, and the styles live in a shadow root so they neither affect nor inherit from your page. Browser only.
+The event is `{ event: 'feedback', data: { message, rating?, email?, ...data() } }` with the usual page context, so in SQL: `SELECT timestamp, data->>'message', data->>'rating' FROM events WHERE event = 'feedback'`. Options: `client` (default: the client from `init`), `label`, `title`, `placeholder`, `ratings` (default true), `askEmail` (default false), `position` (`bottom-right` or `bottom-left`), `accent`, `theme` (`auto` follows the visitor's dark mode; `light` or `dark` match your page), `event`, `data`, `button: false` (open it from your own button with the returned `open()`), `container`, `poweredBy` (default true: a small "Powered by Slurp" link under the form, opening slurp.run in a new tab without sending your site's address; `false` hides it). It returns `{ open, close, destroy }`. Text a person types is only ever set as text, never parsed as HTML, and the styles live in a shadow root so they neither affect nor inherit from your page. Browser only.
 
 ## Contributing
 

package/dist/event.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.1.1";
+export declare const version = "0.1.2";
 export declare const encoder: {
     encode(text: string): Uint8Array;
 };

package/dist/event.js

@@ -1,4 +1,4 @@
-export const version = '0.1.1';
+export const version = '0.1.2';
 /** UTF-8 for runtimes without TextEncoder (React Native before Hermes shipped it). */
 function utf8Encode(text) {
     const out = [];

package/dist/feedback.d.ts

@@ -26,6 +26,8 @@ export interface FeedbackOptions {
     button?: boolean;
     /** Where to attach the widget. Default `document.body`. */
     container?: HTMLElement;
+    /** Show the small "Powered by Slurp" link under the form. Default true; set false to hide it. */
+    poweredBy?: boolean;
 }
 export interface FeedbackHandle {
     open(): void;

package/dist/feedback.js

@@ -1,6 +1,8 @@
 import { track as defaultTrack } from "./index.js";
 const MAX_MESSAGE = 5000;
 const HOST_ATTRIBUTE = 'data-slurp-feedback';
+/** The "Powered by" link opens in a new tab without telling slurp.run which site it came from; the utm tag says only that it was this widget. */
+const POWERED_BY_URL = 'https://slurp.run/?utm_source=feedback-widget';
 const STYLE = `
 :host { all: initial; }
 * { box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
@@ -22,17 +24,24 @@ textarea:focus-visible, input:focus-visible, button:focus-visible { outline: 2px
 .row button { border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid #c9ced6; background: #fff; color: #17191c; }
 .row .send { background: var(--accent); border-color: var(--accent); color: #fff; }
 .error { margin: 8px 0 0; font-size: 13px; color: #b3001f; }
+.powered { margin: 12px 0 0; text-align: center; font-size: 11px; color: #8a919b; }
+.powered a { color: inherit; text-decoration: none; }
+.powered a:hover, .powered a:focus-visible { color: var(--accent); text-decoration: underline; }
 .thanks { margin: 6px 0 2px; font-size: 15px; }
 @media (prefers-color-scheme: dark) {
   :host([data-theme=auto]) .panel { background: #1f2327; color: #f2f4f6; border-color: #3a4048; }
   :host([data-theme=auto]) textarea, :host([data-theme=auto]) input[type=email] { background: #15181b; border-color: #3a4048; }
   :host([data-theme=auto]) .rating button, :host([data-theme=auto]) .row button { background: #15181b; border-color: #3a4048; color: #f2f4f6; }
   :host([data-theme=auto]) .rating legend { color: #9aa1aa; }
+  :host([data-theme=auto]) .row .send { background: var(--accent); border-color: var(--accent); color: #fff; }
+  :host([data-theme=auto]) .powered { color: #7d858f; }
 }
 :host([data-theme=dark]) .panel { background: #1f2327; color: #f2f4f6; border-color: #3a4048; }
 :host([data-theme=dark]) textarea, :host([data-theme=dark]) input[type=email] { background: #15181b; border-color: #3a4048; }
 :host([data-theme=dark]) .rating button, :host([data-theme=dark]) .row button { background: #15181b; border-color: #3a4048; color: #f2f4f6; }
 :host([data-theme=dark]) .rating legend { color: #9aa1aa; }
+:host([data-theme=dark]) .row .send { background: var(--accent); border-color: var(--accent); color: #fff; }
+:host([data-theme=dark]) .powered { color: #7d858f; }
 `;
 function element(tag, attributes = {}, text) {
     const node = document.createElement(tag);
@@ -50,7 +59,7 @@ function element(tag, attributes = {}, text) {
 export function mountFeedback(options = {}) {
     if (typeof document === 'undefined')
         throw new Error('mountFeedback needs a browser document');
-    const { label = 'Feedback', title = 'Send feedback', placeholder = 'What is working, and what is not?', ratings = true, askEmail = false, position = 'bottom-right', accent = '#e8002a', event = 'feedback', button = true, theme = 'auto', } = options;
+    const { label = 'Feedback', title = 'Send feedback', placeholder = 'What is working, and what is not?', ratings = true, askEmail = false, position = 'bottom-right', accent = '#e8002a', event = 'feedback', button = true, theme = 'auto', poweredBy = true, } = options;
     const container = options.container ?? document.body;
     for (const old of container.querySelectorAll(`[${HOST_ATTRIBUTE}]`))
         old.remove(); // mounting twice replaces, never stacks
@@ -88,6 +97,12 @@ export function mountFeedback(options = {}) {
     row.append(cancel, send);
     form.append(...[ratingGroup, message, email, error, row].filter((node) => node !== undefined));
     panel.append(heading, form);
+    let credit;
+    if (poweredBy) {
+        credit = element('p', { class: 'powered' });
+        credit.append('Powered by ', element('a', { href: POWERED_BY_URL, target: '_blank', rel: 'noopener noreferrer' }, 'Slurp'));
+        panel.append(credit);
+    }
     root.append(...(button ? [fab, panel] : [panel]));
     let timer;
     let thanks;
@@ -158,7 +173,7 @@ export function mountFeedback(options = {}) {
         }
         form.setAttribute('hidden', '');
         thanks = element('p', { class: 'thanks', role: 'status' }, 'Thank you! We read every message.');
-        panel.appendChild(thanks);
+        panel.insertBefore(thanks, credit ?? null); // the thank-you sits above the credit line
         timer = setTimeout(() => { show(false); reset(); }, 2500);
     });
     container.appendChild(host);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitslop/slurp-sdk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Browser and Node event capture for Slurp: durable queue, byte-identical retries and batching. No runtime dependencies.",
   "keywords": [
     "analytics",