@getpinax/widget 0.0.0-stage → 1.0.0-beta.1

package/dist/chunks/widget-CkR1Ptzb.mjs

@@ -0,0 +1,961 @@
+import { n as e, t } from "./text-8QYEyRYs.mjs";
+// src/report.ts
+var n = {
+	message: 5e3,
+	email: 320,
+	entries: 50,
+	annotations: 200,
+	screenshotChars: 6e6,
+	screenshotBytes: 4718592,
+	breadcrumbs: 20,
+	followUpQuestion: 300,
+	followUpAnswer: 2e3,
+	replayChars: 45e5,
+	fields: 10,
+	fieldId: 40,
+	fieldText: 200,
+	bodyBytes: 11534336
+}, r = 65536, i = /^[A-Za-z0-9+/=]+$/, a = /^(?!\.)(?!.*\.\.)([A-Za-z0-9_'+\-.]*)[A-Za-z0-9_+-]@([A-Za-z0-9][A-Za-z0-9-]*\.)+[A-Za-z]{2,}$/, o = /^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/;
+function s(e) {
+	return e.length <= n.email && a.test(e);
+}
+function c(e) {
+	let t = e.slice(e.indexOf(",") + 1), n = t.endsWith("==") ? 2 : +!!t.endsWith("=");
+	return Math.floor(t.length * 3 / 4) - n;
+}
+function l(e) {
+	return e.length <= n.screenshotChars && o.test(e) && c(e) <= n.screenshotBytes;
+}
+function u(e) {
+	return e.message.trim().length > 0 || e.type === "GENERAL" && e.rating !== void 0 || e.screenshot !== void 0;
+}
+var d = (e, t) => Number.isFinite(e) ? Math.round(Math.min(1, Math.max(t, e)) * 1e4) / 1e4 : 0;
+function f(n) {
+	let r = e(n);
+	if (r.length <= 2e3) return r;
+	try {
+		let e = new URL(r);
+		return e.toString().length > 2e3 && (e.search = ""), t(e.toString(), 2e3);
+	} catch {
+		return r.slice(0, 2e3);
+	}
+}
+function p(e) {
+	if (!e) return;
+	let n = {};
+	e.id != null && String(e.id) && (n.id = t(String(e.id), 200)), e.name && (n.name = t(String(e.name), 200));
+	let r = e.email?.trim();
+	return r && s(r) && (n.email = r), Object.keys(n).length ? n : void 0;
+}
+function m(e, r) {
+	let i = {
+		type: e.type,
+		message: t(e.message.trim(), n.message),
+		page: {
+			url: f(r.page.url),
+			title: r.page.title ? t(r.page.title, 500) : void 0
+		},
+		environment: r.environment
+	};
+	e.type === "GENERAL" && e.rating !== void 0 && Number.isInteger(e.rating) && e.rating >= 1 && e.rating <= 5 && (i.rating = e.rating);
+	let a = e.email?.trim().toLowerCase();
+	a && s(a) && (i.email = a);
+	let o = p(e.user);
+	o && (i.user = o), r.console.length && (i.console = r.console.slice(-n.entries)), r.network.length && (i.network = r.network.slice(-n.entries)), r.breadcrumbs?.length && (i.breadcrumbs = r.breadcrumbs.slice(-n.breadcrumbs).map((e) => {
+		let n = {
+			kind: e.kind,
+			at: t(e.at, 40),
+			path: t(e.path, 500)
+		};
+		return e.target && (n.target = t(e.target, 200)), n;
+	}));
+	let c = e.followUp?.question.trim(), u = e.followUp?.answer.trim();
+	c && u && (i.followUp = {
+		question: t(c, n.followUpQuestion),
+		answer: t(u, n.followUpAnswer)
+	});
+	let m = (e.fields ?? []).filter((e) => typeof e.id == "string" && e.id.length <= n.fieldId && (typeof e.value == "boolean" || typeof e.value == "string" && e.value.trim())).slice(0, n.fields).map((e) => ({
+		id: e.id,
+		value: typeof e.value == "boolean" ? e.value : t(e.value.trim(), n.fieldText)
+	}));
+	return m.length && (i.fields = m), e.hp && (i.hp = t(e.hp, 500)), e.elapsedMs !== void 0 && Number.isFinite(e.elapsedMs) && e.elapsedMs >= 0 && (i.elapsedMs = Math.min(Math.round(e.elapsedMs), 864e5)), e.screenshot && l(e.screenshot) && (i.screenshot = e.screenshot, e.annotations?.length && (i.annotations = e.annotations.slice(0, n.annotations).map((e) => {
+		let n = e.type === "arrow" ? -1 : 0, r = {
+			type: e.type,
+			x: d(e.x, 0),
+			y: d(e.y, 0),
+			w: d(e.w, n),
+			h: d(e.h, n)
+		};
+		return e.type === "text" && e.text && (r.text = t(e.text, 500)), r;
+	}))), i;
+}
+function h(e) {
+	return new TextEncoder().encode(JSON.stringify(e)).length;
+}
+function g(e, t) {
+	return !t || t.length > n.replayChars || !i.test(t) || h(e) + t.length + 12 > n.bodyBytes - r ? !1 : (e.replay = t, !0);
+}
+// src/settings.ts
+var _ = {
+	color: "#B8F35C",
+	text: "Feedback",
+	position: "bottom-right",
+	types: {
+		problem: !0,
+		idea: !0,
+		general: !0
+	},
+	rating: !0,
+	hidePaths: [],
+	smallOnMobile: !1,
+	hideButton: !1,
+	segment: !1,
+	wording: {
+		chooserTitle: "",
+		problemTitle: "",
+		ideaTitle: "",
+		generalTitle: "",
+		messagePlaceholder: "",
+		confirmation: ""
+	},
+	fields: [],
+	capture: {
+		console: !0,
+		network: !0
+	}
+}, v = {
+	fields: 10,
+	label: 80,
+	options: 20,
+	option: 80,
+	text: 200
+}, y = [
+	"bottom-right",
+	"bottom-left",
+	"right-edge"
+], b = Object.keys(_.wording), x = (e, t) => typeof e == "string" ? e.trim().slice(0, t) : "", S = (e, t) => typeof e == "boolean" ? e : t, C = [
+	"select",
+	"text",
+	"checkbox"
+];
+function w(e) {
+	if (!Array.isArray(e)) return [];
+	let t = [], n = /* @__PURE__ */ new Set();
+	for (let r of e) {
+		if (!r || typeof r != "object") continue;
+		let e = r, i = typeof e.id == "string" ? e.id.slice(0, 40) : "", a = e.type, o = x(e.label, v.label);
+		if (!i || n.has(i) || !C.includes(a) || !o) continue;
+		let s = a === "select" && Array.isArray(e.options) ? [...new Set(e.options.map((e) => x(e, v.option)).filter(Boolean))].slice(0, v.options) : [];
+		if (a === "select" && !s.length) continue;
+		let c = e.types ?? {};
+		if (n.add(i), t.push({
+			id: i,
+			type: a,
+			label: o,
+			required: e.required === !0,
+			options: s,
+			types: {
+				problem: S(c.problem, !0),
+				idea: S(c.idea, !0),
+				general: S(c.general, !0)
+			}
+		}), t.length >= v.fields) break;
+	}
+	return t;
+}
+function T(e) {
+	let t = e ?? {}, n = _, r = t.types ?? {}, i = {
+		problem: S(r.problem, !0),
+		idea: S(r.idea, !0),
+		general: S(r.general, !0)
+	}, a = i.problem || i.idea || i.general, o = t.wording ?? {}, s = { ...n.wording };
+	for (let e of b) s[e] = x(o[e], 120);
+	return {
+		color: typeof t.color == "string" ? t.color : n.color,
+		text: x(t.text, 40) || n.text,
+		position: y.includes(t.position) ? t.position : n.position,
+		types: a ? i : { ...n.types },
+		rating: S(t.rating, n.rating),
+		hidePaths: Array.isArray(t.hidePaths) ? t.hidePaths.filter((e) => typeof e == "string") : [],
+		smallOnMobile: S(t.smallOnMobile, n.smallOnMobile),
+		hideButton: S(t.hideButton, n.hideButton),
+		segment: S(t.segment, n.segment),
+		wording: s,
+		fields: w(t.fields),
+		capture: {
+			console: S(t.capture?.console, !0),
+			network: S(t.capture?.network, !0)
+		}
+	};
+}
+var E = /^#[0-9a-fA-F]{6}$/, D = (e) => typeof e == "string" && E.test(e) ? e : null;
+function O(e) {
+	let t = e && typeof e == "object" ? e : {}, n = typeof t.logoUrl == "string" && /^https?:\/\//i.test(t.logoUrl) ? t.logoUrl.slice(0, 2e3) : null;
+	return {
+		poweredBy: t.poweredBy === !0,
+		logoUrl: n,
+		primary: D(t.primary),
+		accent: D(t.accent)
+	};
+}
+var k = (e) => typeof e == "number" && Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : 0;
+function A(e, t) {
+	let n = e && typeof e == "object" ? e : {}, r = typeof t == "number" ? k(t) : 1, i = Array.isArray(n.fixChecks) ? n.fixChecks : [];
+	return {
+		followUp: n.followUp === !0,
+		autoBlur: n.autoBlur === !0,
+		replay: n.replay === !0,
+		replaySampleRate: Math.min(n.replaySampleRate === void 0 ? 1 : k(n.replaySampleRate), r),
+		fixChecks: i.filter((e) => !!e && typeof e.id == "string" && typeof e.path == "string" && typeof e.signature == "string"),
+		fixCheckSampleRate: Math.min(k(n.fixCheckSampleRate), r)
+	};
+}
+// src/ui/color.ts
+function j(e) {
+	let t = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+	if (!t) return null;
+	let n = t[1];
+	n.length === 3 && (n = [...n].map((e) => e + e).join(""));
+	let [r, i, a] = [
+		0,
+		2,
+		4
+	].map((e) => {
+		let t = Number.parseInt(n.slice(e, e + 2), 16) / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * i + .0722 * a;
+}
+function M(e, t) {
+	let [n, r] = e > t ? [e, t] : [t, e];
+	return (n + .05) / (r + .05);
+}
+function N(e) {
+	let t = j(e);
+	return t === null ? "#FFFFFF" : M(t, j("#0B1300")) >= M(t, 1) ? "#0B1300" : "#FFFFFF";
+}
+function P(e, t = "#B8F35C") {
+	return typeof e == "string" && j(e) !== null ? e.trim() : t;
+}
+// src/ui/dom.ts
+function F(e, t = {}, ...n) {
+	let r = document.createElement(e);
+	for (let [e, n] of Object.entries(t)) n != null && n !== !1 && r.setAttribute(e, n === !0 ? "" : String(n));
+	for (let e of n) e != null && e !== !1 && r.append(e);
+	return r;
+}
+var I = "http://www.w3.org/2000/svg";
+function L(e, t = 16) {
+	let n = document.createElementNS(I, "svg");
+	n.setAttribute("width", String(t)), n.setAttribute("height", String(t)), n.setAttribute("viewBox", "0 0 24 24"), n.setAttribute("fill", "none"), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", "2.2"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n.setAttribute("aria-hidden", "true");
+	let r = document.createElementNS(I, "path");
+	return r.setAttribute("d", e), n.append(r), n;
+}
+var R = {
+	close: "M18 6L6 18M6 6l12 12",
+	back: "M15 18l-6-6 6-6",
+	pen: "M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z",
+	camera: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2zM12 17a4 4 0 100-8 4 4 0 000 8z",
+	trash: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"
+}, z = "\n  $ .panel, $.pos-bottom-right .panel, $.pos-bottom-left .panel, $.pos-right-edge .panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 88vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }\n  $.open .launcher { display: none; }\n  $ .field textarea, $ .field input, $ .field select { font-size: 16px; }\n  $ .launcher { padding: 11px 16px; font-size: 14px; }\n  $.pos-bottom-right .launcher { right: 16px; bottom: 16px; }\n  $.pos-bottom-left .launcher { left: 16px; bottom: 16px; }\n  $.small .launcher { padding: 8px 12px; font-size: 13px; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.35); }\n  $.small.pos-bottom-right .launcher { right: 12px; bottom: 12px; }\n  $.small.pos-bottom-left .launcher { left: 12px; bottom: 12px; }\n  $.small.pos-right-edge .launcher { padding: 8px 10px; }\n";
+function B(e, t) {
+	let n = z.replace(/\$/g, t);
+	return e ? `${e}${n}}` : n;
+}
+var V = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.pnx { font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #111827; font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
+button { font: inherit; color: inherit; cursor: pointer; }
+button:disabled { cursor: default; }
+:focus-visible { outline: 3px solid #2E46BF; outline-offset: 2px; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+.launcher { position: fixed; z-index: 2; border: 0; padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.2; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.35); background: var(--pnx-brand); color: var(--pnx-ink); transition: transform .15s ease; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.launcher:hover { transform: translateY(-1px); }
+.pos-bottom-right .launcher { right: 24px; bottom: 24px; }
+.pos-bottom-left .launcher { left: 24px; bottom: 24px; }
+.pos-right-edge .launcher { right: 0; top: 45%; border-radius: 10px 0 0 10px; }
+.pos-right-edge .launcher:hover { transform: translateX(-2px); }
+.pos-right-edge.open .launcher { visibility: hidden; }
+.launcher[hidden] { display: none; }
+
+.panel { position: fixed; z-index: 3; bottom: 84px; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 108px); overflow: auto; padding: 18px; border-radius: 16px; background: #FFFFFF; color: #111827; box-shadow: 0 30px 60px -18px rgba(0,0,0,0.45), 0 0 0 1px rgba(17,24,39,0.06); display: flex; flex-direction: column; gap: 12px; }
+.panel[hidden] { display: none; }
+.pos-bottom-right .panel { right: 24px; }
+.pos-bottom-left .panel { left: 24px; }
+.pos-right-edge .panel { right: 24px; bottom: 24px; max-height: calc(100vh - 48px); }
+.no-button .panel { bottom: 24px; max-height: calc(100vh - 48px); }
+
+.head { display: flex; align-items: center; gap: 8px; }
+.title { margin: 0; flex: 1; font-size: 15px; font-weight: 700; }
+.icon-btn { flex: none; width: 32px; height: 32px; margin: -6px; border: 0; border-radius: 8px; background: transparent; color: #5B6474; display: inline-flex; align-items: center; justify-content: center; }
+.icon-btn:hover { background: #F2F4F8; color: #111827; }
+.head .icon-btn:first-child { margin-right: 0; }
+
+.choices { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
+.choice { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 10px; background: #F2F4F8; font-size: 14px; font-weight: 600; text-align: left; }
+.choice:hover { background: #FFF1EC; box-shadow: inset 0 0 0 2px var(--dot); }
+.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
+.choice small { display: block; font-size: 12px; font-weight: 500; color: #5B6474; }
+
+.shot { position: relative; border-radius: 10px; background: #F4EDE2; overflow: hidden; min-height: 72px; display: flex; align-items: center; justify-content: center; }
+.shot img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; background: #F2F4F8; }
+.shot .tag { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: #111827; color: #FFFFFF; font-size: 11px; font-weight: 700; }
+.shot .wait { font-size: 13px; color: #5B6474; padding: 20px; }
+.shot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 7px 11px; border: 0; border-radius: 8px; background: #F2F4F8; color: #111827; font-size: 13px; font-weight: 700; }
+.chip:hover { background: #E3E8F0; }
+.chip.primary { background: #111827; color: #FFFFFF; }
+.chip.primary:hover { background: #1F2937; }
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field label, .legend { font-size: 12px; font-weight: 600; color: #5B6474; }
+.field textarea, .field input { width: 100%; border: 0; border-radius: 10px; padding: 11px 12px; background: #F2F4F8; color: #111827; font: inherit; font-size: 14px; line-height: 1.5; box-shadow: inset 0 0 0 1px transparent; }
+.field textarea { min-height: 84px; resize: vertical; }
+.field textarea::placeholder, .field input::placeholder { color: #5B6474; opacity: 1; }
+.field textarea:focus, .field input:focus { outline: none; box-shadow: inset 0 0 0 2px #2E46BF; background: #FFFFFF; }
+.field .hint { font-size: 12px; color: #5B6474; }
+.field select { width: 100%; border: 0; border-radius: 10px; padding: 11px 12px; background: #F2F4F8; color: #111827; font: inherit; font-size: 14px; line-height: 1.5; }
+.field select:focus { outline: none; box-shadow: inset 0 0 0 2px #2E46BF; background: #FFFFFF; }
+.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B42318; }
+.field .optional { font-weight: 500; }
+.field.check { flex-direction: row; align-items: flex-start; gap: 10px; }
+.field.check input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: #2E46BF; box-shadow: none; }
+.field.check label { font-size: 13px; color: #111827; font-weight: 600; line-height: 1.45; }
+.field.check input[aria-invalid="true"] { outline: 2px solid #B42318; outline-offset: 2px; }
+.brand { display: flex; align-items: center; min-height: 28px; }
+.brand .logo { display: block; max-height: 32px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
+.accented .panel { border-top: 4px solid var(--pnx-accent); }
+.accented .choice:hover { box-shadow: inset 0 0 0 2px var(--pnx-accent); }
+.accented .tick { background: var(--pnx-accent); color: var(--pnx-accent-ink); }
+
+.stars { display: flex; gap: 4px; border: 0; margin: 0; padding: 0; }
+.star { width: 40px; height: 40px; border: 0; border-radius: 10px; font-size: 24px; line-height: 1; background: #F2F4F8; color: #6B7280; }
+.star.on { background: #FFF6DF; color: #B9800F; }
+
+.error { margin: 0; font-size: 13px; color: #B42318; font-weight: 600; }
+.error:empty { display: none; }
+.send { width: 100%; padding: 12px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 800; background: var(--type); color: var(--type-ink); }
+.send:disabled { opacity: .7; }
+.powered { font-size: 11px; color: #5B6474; text-align: center; }
+.powered a { color: inherit; text-decoration: none; }
+.powered a:hover { text-decoration: underline; }
+
+.done { text-align: center; padding: 18px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
+.tick { width: 46px; height: 46px; border-radius: 50%; background: #B8F35C; color: #0B1300; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
+.done p { margin: 0; font-size: 13px; color: #5B6474; }
+.link { border: 0; background: transparent; color: #5B6474; font-size: 13px; font-weight: 700; padding: 6px 8px; border-radius: 6px; }
+.link:hover { color: #111827; }
+
+.note { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #F2F4F8; color: #5B6474; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
+.note .dot { transform: translateY(-1px); }
+.field label.question { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.4; }
+.field textarea.answer { min-height: 64px; }
+.skip { width: 100%; padding: 8px; text-align: center; }
+.skip:disabled, .send:disabled + .skip { opacity: .7; }
+.hint.auto-blur { display: flex; align-items: center; gap: 6px; }
+.hint.auto-blur i { flex: none; width: 16px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #D8DEE9 0 4px, #C7CFDC 4px 8px); box-shadow: 0 0 0 1px #C7CFDC; }
+
+${B("@media (max-width: 520px) {", ".pnx")}
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+@media (forced-colors: active) { .launcher, .choice, .send, .chip, .star { border: 1px solid ButtonText; } }
+`, H = [
+	{
+		type: "PROBLEM",
+		key: "problem",
+		label: "Report a problem",
+		desc: "Point at what is broken",
+		dot: "#FF5C35",
+		send: "#CC3F1B",
+		ink: "#FFFFFF"
+	},
+	{
+		type: "IDEA",
+		key: "idea",
+		label: "Share an idea",
+		desc: "Suggest something better",
+		dot: "#7C9CFF",
+		send: "#7C9CFF",
+		ink: "#0B1122"
+	},
+	{
+		type: "GENERAL",
+		key: "general",
+		label: "General feedback",
+		desc: "A rating and a few words",
+		dot: "#3DBF6E",
+		send: "#3DBF6E",
+		ink: "#0B1300"
+	}
+], U = 4e3, W = "What would you like to do?", G = "Thanks! We've got it.", K = {
+	problem: "problemTitle",
+	idea: "ideaTitle",
+	general: "generalTitle"
+}, q = class {
+	constructor(e, t, n, r = {}) {
+		this.root = e, this.config = t, this.handlers = n, this.kind = null, this.shot = { kind: "none" }, this.message = "", this.email = "", this.answers = {}, this.sendColour = null, this.sending = !1, this.openedAt = 0, this.hp = "", this.uid = Math.random().toString(36).slice(2, 8), this.pathHidden = !1, this.returnFocus = null, this.view = "choose", this.queued = !1, this.asked = null, this.answer = "";
+		let i = t.settings, a = t.branding?.primary ? P(t.branding.primary, "") : "", o = t.branding?.accent ? P(t.branding.accent, "") : "", s = a || P(i.color);
+		this.sendColour = a || null, this.kinds = H.filter((e) => i.types?.[e.key] !== !1), this.kinds.length || (this.kinds = H);
+		let c = F("style");
+		c.textContent = r.css ? V + r.css : V, this.launcher = F("button", {
+			type: "button",
+			class: "launcher",
+			"aria-haspopup": "dialog",
+			"aria-expanded": "false",
+			"aria-controls": `pnx-panel-${this.uid}`
+		}, (i.text || "Feedback").slice(0, 40)), this.launcher.addEventListener("click", () => this.isOpen() ? this.close() : this.open()), this.panel = F("div", {
+			class: "panel",
+			id: `pnx-panel-${this.uid}`,
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-labelledby": `pnx-title-${this.uid}`,
+			hidden: !0
+		}), this.panel.addEventListener("keydown", (e) => {
+			e.key === "Escape" && (e.stopPropagation(), this.close());
+		}), this.panel.addEventListener("pointerdown", () => this.holdOpen()), this.panel.addEventListener("focusin", () => this.holdOpen()), this.live = F("div", {
+			class: "sr",
+			role: "status",
+			"aria-live": "polite"
+		});
+		let l = [
+			"bottom-right",
+			"bottom-left",
+			"right-edge"
+		].includes(i.position) ? i.position : "bottom-right";
+		this.wrap = F("div", { class: `pnx pos-${l}${r.className ? ` ${r.className}` : ""}` }), i.smallOnMobile && this.wrap.classList.add("small"), this.updateButton(), this.wrap.style.setProperty("--pnx-brand", s), this.wrap.style.setProperty("--pnx-ink", N(s)), o && (this.wrap.classList.add("accented"), this.wrap.style.setProperty("--pnx-accent", o), this.wrap.style.setProperty("--pnx-accent-ink", N(o))), this.wrap.append(this.launcher, this.panel, this.live), e.append(c, this.wrap);
+	}
+	isOpen() {
+		return !this.panel.hidden;
+	}
+	hasButton() {
+		return !this.launcher.hidden;
+	}
+	setPathHidden(e) {
+		this.pathHidden = e, this.updateButton();
+	}
+	updateButton() {
+		let e = this.config.settings.hideButton || this.pathHidden;
+		this.launcher.hidden = e, this.wrap.classList.toggle("no-button", e);
+	}
+	open(e = !0) {
+		if (this.isOpen()) {
+			e && this.focusFirst();
+			return;
+		}
+		let t = document.activeElement;
+		this.returnFocus = t instanceof HTMLElement && t !== this.root.host ? t : null, this.openedAt || (this.openedAt = Date.now()), this.panel.hidden = !1, this.wrap.classList.add("open"), this.launcher.setAttribute("aria-expanded", "true"), !this.kind && this.kinds.length === 1 && this.pick(this.kinds[0], !1), this.render(), e && this.focusFirst();
+		try {
+			this.handlers.opened?.();
+		} catch {}
+	}
+	close(e = !0) {
+		clearTimeout(this.closeTimer), this.isOpen() && (this.panel.hidden = !0, this.wrap.classList.remove("open"), this.launcher.setAttribute("aria-expanded", "false"), this.view === "done" && this.reset(), e && (this.hasButton() ? this.launcher.focus() : this.returnFocus?.isConnected && this.returnFocus.focus(), this.returnFocus = null));
+	}
+	currentView() {
+		return this.isOpen() ? this.view === "done" ? "done" : (this.view === "form" || this.view === "question") && this.kind ? this.kind.key : "choose" : "button";
+	}
+	showView(e) {
+		if (clearTimeout(this.closeTimer), e === "button") this.close(!1);
+		else {
+			if (this.reset(), e === "done") this.view = "done";
+			else if (e !== "choose") {
+				let t = this.kinds.find((t) => t.key === e);
+				t && this.pick(t, !1);
+			}
+			this.isOpen() ? this.render() : this.open(!1);
+		}
+	}
+	word(e, t) {
+		return this.config.settings.wording?.[e]?.trim() || t;
+	}
+	kindTitle(e, t = e.label) {
+		return this.word(K[e.key], t);
+	}
+	setSuspended(e) {
+		this.wrap.style.display = e ? "none" : "";
+	}
+	destroy() {
+		clearTimeout(this.closeTimer), this.wrap.remove();
+	}
+	reset() {
+		this.view = "choose", this.kind = null, this.shot = { kind: "none" }, this.message = "", this.rating = void 0, this.answers = {}, this.queued = !1, this.asked = null, this.answer = "", this.openedAt = this.isOpen() ? Date.now() : 0, this.hp = "", this.kinds.length === 1 && this.pick(this.kinds[0], !1);
+	}
+	holdOpen() {
+		clearTimeout(this.closeTimer);
+	}
+	focusFirst() {
+		for (let e of [
+			"[data-autofocus]",
+			".choice",
+			"textarea",
+			"button"
+		]) {
+			let t = this.panel.querySelector(e);
+			if (t) {
+				t.focus();
+				return;
+			}
+		}
+	}
+	announce(e) {
+		this.live.textContent = "", setTimeout(() => {
+			this.live.textContent = e;
+		}, 30);
+	}
+	pick(e, t = !0) {
+		this.kind = e, this.view = "form", this.rating = void 0, this.email = this.email || this.handlers.user()?.email || "", e.type === "PROBLEM" && this.shot.kind === "none" && this.capture(), e.type !== "PROBLEM" && this.shot.kind === "busy" && (this.shot = { kind: "none" }), t && (this.render(), this.focusFirst());
+	}
+	async capture() {
+		this.shot = { kind: "busy" }, this.render();
+		try {
+			let e = await this.handlers.takeScreenshot();
+			if (this.shot.kind !== "busy") return;
+			this.shot = {
+				kind: "ready",
+				shot: e
+			}, this.announce("Screenshot added.");
+		} catch {
+			if (this.shot.kind !== "busy") return;
+			this.shot = { kind: "failed" }, this.announce("Couldn't take a screenshot.");
+		}
+		this.renderKeepingFocus();
+	}
+	async markUp() {
+		if (this.shot.kind === "ready") {
+			this.setSuspended(!0);
+			try {
+				let e = await this.handlers.markUp(this.shot.shot);
+				e && (this.shot = {
+					kind: "ready",
+					shot: e
+				}, this.announce(e.annotations.length ? `Screenshot marked up with ${e.annotations.length} ${e.annotations.length === 1 ? "mark" : "marks"}.` : "Screenshot updated."));
+			} catch {} finally {
+				this.setSuspended(!1), this.render(), this.panel.querySelector("[data-markup]")?.focus();
+			}
+		}
+	}
+	renderKeepingFocus() {
+		let e = this.root.activeElement, t = e?.dataset?.key, n = e?.tagName === "TEXTAREA" ? [e.selectionStart, e.selectionEnd] : null;
+		if (this.render(), t) {
+			let e = this.panel.querySelector(`[data-key="${t}"]`);
+			e?.focus(), n && e instanceof HTMLTextAreaElement && e.setSelectionRange(n[0], n[1]);
+		}
+	}
+	header(e, t, n) {
+		let r = F("div", { class: "head" });
+		if (t) {
+			let e = F("button", {
+				type: "button",
+				class: "icon-btn",
+				"aria-label": "Back",
+				"data-key": "back"
+			});
+			e.append(L(R.back)), e.addEventListener("click", () => {
+				n ? n() : (this.view = "choose", this.kind = null, this.render(), this.focusFirst());
+			}), r.append(e);
+		}
+		r.append(F("h2", {
+			class: "title",
+			id: `pnx-title-${this.uid}`
+		}, e));
+		let i = F("button", {
+			type: "button",
+			class: "icon-btn",
+			"aria-label": "Close feedback",
+			"data-key": "close"
+		});
+		return i.append(L(R.close)), i.addEventListener("click", () => this.close()), r.append(i), r;
+	}
+	powered() {
+		return this.config.branding?.poweredBy ? F("div", { class: "powered" }, F("a", {
+			href: "https://getpinax.com",
+			target: "_blank",
+			rel: "noopener"
+		}, "Powered by Pinax")) : null;
+	}
+	logo() {
+		let e = this.config.branding?.logoUrl;
+		if (!e || !/^https?:\/\//i.test(e)) return null;
+		let t = F("img", {
+			src: e,
+			alt: "",
+			class: "logo",
+			referrerpolicy: "no-referrer"
+		});
+		return t.addEventListener("error", () => t.remove()), F("div", { class: "brand" }, t);
+	}
+	render() {
+		let e = [], t = this.logo();
+		t && e.push(t), this.view === "done" ? e.push(...this.renderDone()) : this.view === "question" && this.kind && this.asked?.question ? e.push(...this.renderQuestion(this.kind, this.asked.question)) : this.view === "form" && this.kind ? e.push(...this.renderForm(this.kind)) : e.push(...this.renderChoose());
+		let n = this.powered();
+		n && e.push(n), this.panel.replaceChildren(...e);
+	}
+	renderChoose() {
+		let e = F("ul", { class: "choices" });
+		for (let t of this.kinds) {
+			let n = F("button", {
+				type: "button",
+				class: "choice"
+			}, F("span", {
+				class: "dot",
+				"aria-hidden": "true"
+			}), F("span", {}, this.kindTitle(t), F("small", {}, t.desc)));
+			n.style.setProperty("--dot", t.dot), n.addEventListener("click", () => this.pick(t)), e.append(F("li", {}, n));
+		}
+		return [this.header(this.word("chooserTitle", W), !1), e];
+	}
+	renderShot(e) {
+		let t = this.shot;
+		if (t.kind === "none") {
+			if (e.type === "GENERAL") return null;
+			let t = F("button", {
+				type: "button",
+				class: "chip",
+				"data-key": "add-shot"
+			}, L(R.camera), "Add a screenshot");
+			return t.addEventListener("click", () => this.capture()), F("div", { class: "shot-actions" }, t);
+		}
+		if (t.kind === "busy") return F("div", {
+			class: "shot",
+			"aria-busy": "true"
+		}, F("span", { class: "wait" }, "Taking a screenshot…"));
+		if (t.kind === "failed") {
+			let e = F("button", {
+				type: "button",
+				class: "chip",
+				"data-key": "retry-shot"
+			}, "Try again");
+			return e.addEventListener("click", () => this.capture()), F("div", { class: "field" }, F("span", { class: "hint" }, "Couldn't take a screenshot of this page."), F("div", { class: "shot-actions" }, e));
+		}
+		let n = t.shot.annotations.length, r = t.shot.autoBlurred ?? 0, i = F("img", {
+			src: t.shot.dataUrl,
+			alt: `Screenshot of this page${n ? ` with ${n} ${n === 1 ? "mark" : "marks"}` : ""}${r ? `, ${r} private ${r === 1 ? "detail" : "details"} blurred` : ""}`
+		}), a = F("button", {
+			type: "button",
+			class: "chip primary",
+			"data-markup": !0,
+			"data-key": "markup"
+		}, L(R.pen), n ? "Edit marks" : "Mark up");
+		a.addEventListener("click", () => this.markUp());
+		let o = F("button", {
+			type: "button",
+			class: "chip",
+			"data-key": "remove-shot"
+		}, L(R.trash), "Remove");
+		return o.addEventListener("click", () => {
+			this.shot = { kind: "none" }, this.announce("Screenshot removed."), this.render(), this.panel.querySelector("[data-key=\"add-shot\"]")?.focus();
+		}), F("div", { class: "field" }, F("div", { class: "shot" }, i, F("span", {
+			class: "tag",
+			"aria-hidden": "true"
+		}, "Screenshot")), F("div", { class: "shot-actions" }, a, o), r ? F("span", { class: "hint auto-blur" }, F("i", { "aria-hidden": "true" }), `We blurred ${r === 1 ? "1 private detail" : `${r} private details`} for you.`) : null);
+	}
+	renderStars() {
+		let e = F("div", {
+			class: "stars",
+			role: "radiogroup",
+			"aria-labelledby": `pnx-rate-${this.uid}`
+		}), t = [], n = (this.rating ?? 1) - 1;
+		for (let e = 1; e <= 5; e++) {
+			let r = F("button", {
+				type: "button",
+				class: this.rating !== void 0 && e <= this.rating ? "star on" : "star",
+				role: "radio",
+				"aria-checked": this.rating === e ? "true" : "false",
+				"aria-label": `${e} ${e === 1 ? "star" : "stars"}`,
+				tabindex: e - 1 === n ? 0 : -1,
+				"data-key": `star-${e}`
+			}, "★");
+			r.addEventListener("click", () => {
+				this.rating = this.rating === e ? void 0 : e, this.renderKeepingFocus();
+			}), r.addEventListener("keydown", (e) => {
+				let t = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : 0;
+				if (!t) return;
+				e.preventDefault();
+				let n = Math.min(5, Math.max(1, (this.rating ?? 0) + t || 1));
+				this.rating = n, this.render(), this.panel.querySelector(`[data-key="star-${n}"]`)?.focus();
+			}), t.push(r);
+		}
+		return e.append(...t), F("div", { class: "field" }, F("span", {
+			class: "legend",
+			id: `pnx-rate-${this.uid}`
+		}, "How's your visit so far? (optional)"), e);
+	}
+	renderForm(e) {
+		let t = e.type === "GENERAL" && this.config.settings.rating !== !1, n = this.kindTitle(e, t ? "How was your visit?" : e.label), r = [this.header(n, this.kinds.length > 1)], i = this.renderShot(e);
+		i && r.push(i), t && r.push(this.renderStars());
+		let a = `pnx-msg-${this.uid}`, o = F("textarea", {
+			id: a,
+			maxlength: 5e3,
+			"data-key": "message",
+			"data-autofocus": e.type !== "PROBLEM" && !t || void 0,
+			placeholder: this.word("messagePlaceholder", e.type === "PROBLEM" ? "What happened?" : e.type === "IDEA" ? "What would make this better?" : "Tell us what you think")
+		});
+		o.value = this.message, o.addEventListener("input", () => {
+			this.message = o.value;
+		}), r.push(F("div", { class: "field" }, F("label", { for: a }, e.type === "PROBLEM" ? "What went wrong?" : e.type === "IDEA" ? "Your idea" : "Anything to add?"), o)), r.push(...this.renderFields(e));
+		let s = `pnx-email-${this.uid}`, c = `pnx-email-hint-${this.uid}`, l = F("input", {
+			id: s,
+			type: "email",
+			inputmode: "email",
+			autocomplete: "email",
+			maxlength: 320,
+			"aria-describedby": c,
+			"data-key": "email",
+			placeholder: "you@example.com"
+		});
+		l.value = this.email, l.addEventListener("input", () => {
+			this.email = l.value;
+		}), r.push(F("div", { class: "field" }, F("label", { for: s }, "Your email (optional)"), l, F("span", {
+			class: "hint",
+			id: c
+		}, "So we can let you know when it's sorted.")));
+		let u = F("p", {
+			class: "error",
+			role: "alert",
+			id: `pnx-err-${this.uid}`
+		}), d = F("button", {
+			type: "button",
+			class: "send",
+			"data-key": "send",
+			disabled: this.sending
+		}, this.sending ? "Sending…" : "Send");
+		return this.colourSend(d, e), d.addEventListener("click", () => this.send(e, u, l, o)), r.push(this.honeypot(), u, d), r;
+	}
+	honeypot() {
+		let e = F("input", {
+			type: "text",
+			name: "website",
+			tabindex: -1,
+			autocomplete: "off",
+			"aria-label": "Leave this empty"
+		});
+		e.value = this.hp, e.addEventListener("input", () => {
+			this.hp = e.value;
+		});
+		let t = F("div", { "aria-hidden": "true" }, e);
+		return t.style.cssText = "position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden", t;
+	}
+	async send(e, t, n, r) {
+		if (this.sending) return;
+		t.textContent = "", n.removeAttribute("aria-invalid");
+		let i = this.email.trim();
+		if (i && !s(i)) {
+			t.textContent = "Please check your email address, or leave it empty.", n.setAttribute("aria-invalid", "true"), n.setAttribute("aria-errormessage", t.id), n.focus();
+			return;
+		}
+		if (this.shot.kind === "busy") {
+			t.textContent = "One moment, the screenshot is still being taken.";
+			return;
+		}
+		for (let n of this.fieldsFor(e)) {
+			let e = this.answers[n.id];
+			if (!n.required || (n.type === "checkbox" ? e === !0 : e)) continue;
+			let r = this.panel.querySelector(`[data-key="field-${n.id}"]`);
+			t.textContent = n.type === "checkbox" ? `Please tick “${n.label}”.` : n.type === "select" ? `Please choose an answer for “${n.label}”.` : `Please fill in “${n.label}”.`, r?.setAttribute("aria-invalid", "true"), r?.setAttribute("aria-errormessage", t.id), r?.focus();
+			return;
+		}
+		let a = this.shot.kind === "ready" ? this.shot.shot : void 0, o = e.type === "GENERAL" ? this.rating : void 0;
+		if (!u({
+			type: e.type,
+			message: this.message,
+			rating: o,
+			screenshot: a?.dataUrl
+		})) {
+			t.textContent = e.type === "GENERAL" && this.config.settings.rating !== !1 ? "Add a few words or a star rating." : "Add a few words so we know what you mean.", r.focus();
+			return;
+		}
+		this.sending = !0, this.renderKeepingFocus(), this.announce("Sending…");
+		let c = await this.askFollowUp(e);
+		this.view !== "form" || this.kind !== e || !this.isOpen() ? (this.sending = !1, this.isOpen() && this.renderKeepingFocus()) : c ? (this.sending = !1, this.view = "question", this.render(), this.focusFirst()) : await this.submitNow(e, i, o, a);
+	}
+	async askFollowUp(e) {
+		let t = this.handlers.followUp, n = this.message.trim();
+		if (!t || e.type === "GENERAL" || !n || n.length > 140) return null;
+		if (this.asked?.message === n) return this.asked.question;
+		let r = null;
+		try {
+			r = (await t({
+				type: e.type,
+				message: n
+			}))?.trim() || null;
+		} catch {
+			r = null;
+		}
+		return this.asked = {
+			message: n,
+			question: r?.slice(0, 300) || null
+		}, this.asked.question;
+	}
+	async submitNow(e, t, n, r, i) {
+		this.sending = !0, this.renderKeepingFocus();
+		let a;
+		try {
+			a = await this.handlers.submit({
+				type: e.type,
+				message: this.message,
+				rating: n,
+				email: t || void 0,
+				shot: r,
+				followUp: i,
+				fields: this.fieldAnswers(e),
+				hp: this.hp || void 0,
+				elapsedMs: this.openedAt ? Math.max(0, Date.now() - this.openedAt) : void 0
+			});
+		} catch {
+			a = {
+				status: "error",
+				message: "Something went wrong. Please try again."
+			};
+		}
+		if (this.sending = !1, a.status === "error") {
+			this.view = "form", this.render();
+			let e = this.panel.querySelector(".error");
+			e && (e.textContent = a.message), this.panel.querySelector("[data-key=\"send\"]")?.focus();
+		} else this.queued = a.status === "queued", this.view = "done", this.render(), this.focusFirst(), this.announce(this.queued ? "Saved. We'll send it when you're back online." : this.word("confirmation", G)), this.closeTimer = setTimeout(() => this.close(this.panel.contains(this.root.activeElement)), U);
+	}
+	renderQuestion(e, t) {
+		let n = [this.header("One quick question", !0, () => {
+			this.view = "form", this.render(), this.panel.querySelector("[data-key=\"message\"]")?.focus();
+		})], r = F("div", { class: "note" }, F("span", {
+			class: "dot",
+			"aria-hidden": "true"
+		}), F("span", {}, F("span", { class: "sr" }, "Your note: "), `“${this.message.trim()}”`));
+		r.style.setProperty("--dot", e.dot), n.push(r);
+		let i = `pnx-answer-${this.uid}`, a = `pnx-answer-hint-${this.uid}`, o = F("textarea", {
+			id: i,
+			class: "answer",
+			maxlength: 2e3,
+			"data-key": "answer",
+			"data-autofocus": !0,
+			"aria-describedby": a,
+			placeholder: "Your answer"
+		});
+		o.value = this.answer, o.addEventListener("input", () => {
+			this.answer = o.value;
+		}), n.push(F("div", { class: "field" }, F("label", {
+			for: i,
+			class: "question"
+		}, t), o, F("span", {
+			class: "hint",
+			id: a
+		}, "Optional. It helps us fix it faster.")));
+		let s = F("p", {
+			class: "error",
+			role: "alert"
+		}), c = this.email.trim(), l = e.type === "GENERAL" ? this.rating : void 0, u = this.shot.kind === "ready" ? this.shot.shot : void 0, d = F("button", {
+			type: "button",
+			class: "send",
+			"data-key": "send",
+			disabled: this.sending
+		}, this.sending ? "Sending…" : "Send");
+		this.colourSend(d, e), d.addEventListener("click", () => {
+			if (this.sending) return;
+			let n = this.answer.trim();
+			this.announce("Sending…"), this.submitNow(e, c, l, u, n ? {
+				question: t,
+				answer: n.slice(0, 2e3)
+			} : void 0);
+		});
+		let f = F("button", {
+			type: "button",
+			class: "link skip",
+			"data-key": "skip",
+			disabled: this.sending
+		}, "Skip and send");
+		return f.addEventListener("click", () => {
+			this.sending || (this.announce("Sending…"), this.submitNow(e, c, l, u));
+		}), n.push(s, d, f), n;
+	}
+	colourSend(e, t) {
+		let n = this.sendColour ?? t.send;
+		e.style.setProperty("--type", n), e.style.setProperty("--type-ink", this.sendColour ? N(n) : t.ink);
+	}
+	fieldsFor(e) {
+		return (this.config.settings.fields ?? []).filter((t) => t.types?.[e.key] !== !1);
+	}
+	fieldAnswers(e) {
+		let t = [];
+		for (let n of this.fieldsFor(e)) {
+			let e = this.answers[n.id];
+			n.type === "checkbox" ? t.push({
+				id: n.id,
+				value: e === !0
+			}) : typeof e == "string" && e.trim() && t.push({
+				id: n.id,
+				value: e.trim()
+			});
+		}
+		return t.length ? t : void 0;
+	}
+	renderFields(e) {
+		return this.fieldsFor(e).map((e, t) => {
+			let n = `pnx-f${t}-${this.uid}`, r = `field-${e.id}`, i = (e) => {
+				e.removeAttribute("aria-invalid"), e.removeAttribute("aria-errormessage");
+			}, a = (t) => F("label", {
+				for: n,
+				class: t
+			}, e.label, e.required ? null : F("span", { class: "optional" }, " (optional)"));
+			if (e.type === "checkbox") {
+				let t = F("input", {
+					id: n,
+					type: "checkbox",
+					"data-key": r,
+					"aria-required": e.required ? "true" : void 0
+				});
+				return t.checked = this.answers[e.id] === !0, t.addEventListener("change", () => {
+					this.answers[e.id] = t.checked, i(t);
+				}), F("div", { class: "field check" }, t, a());
+			}
+			if (e.type === "select") {
+				let t = F("select", {
+					id: n,
+					"data-key": r,
+					"aria-required": e.required ? "true" : void 0
+				}, F("option", { value: "" }, "Choose…"), ...e.options.map((e) => F("option", { value: e }, e)));
+				return t.value = String(this.answers[e.id] ?? ""), t.addEventListener("change", () => {
+					this.answers[e.id] = t.value, i(t);
+				}), F("div", { class: "field" }, a(), t);
+			}
+			let o = F("input", {
+				id: n,
+				type: "text",
+				maxlength: 200,
+				"data-key": r,
+				"aria-required": e.required ? "true" : void 0
+			});
+			return o.value = String(this.answers[e.id] ?? ""), o.addEventListener("input", () => {
+				this.answers[e.id] = o.value, i(o);
+			}), F("div", { class: "field" }, a(), o);
+		});
+	}
+	renderDone() {
+		let e = F("button", {
+			type: "button",
+			class: "link",
+			"data-key": "again"
+		}, "Send another");
+		e.addEventListener("click", () => {
+			this.reset(), this.render(), this.focusFirst();
+		});
+		let t = F("div", { class: "head" });
+		t.append(F("span", { class: "title" }));
+		let n = F("button", {
+			type: "button",
+			class: "icon-btn",
+			"aria-label": "Close feedback"
+		});
+		return n.append(L(R.close)), n.addEventListener("click", () => this.close()), t.append(n), [t, F("div", { class: "done" }, F("span", {
+			class: "tick",
+			"aria-hidden": "true"
+		}, "✓"), F("h2", {
+			class: "title",
+			id: `pnx-title-${this.uid}`,
+			tabindex: -1,
+			"data-autofocus": !0
+		}, this.queued ? "Saved for later" : this.word("confirmation", G)), this.queued ? F("p", {}, "You're offline. We'll send it as soon as you're back.") : null, e)];
+	}
+};
+export { O as a, g as c, A as i, m as l, B as n, T as o, F as r, n as s, q as t, f as u };
+
+//# sourceMappingURL=widget-CkR1Ptzb.mjs.map