visual-feedback 0.1.0 → 0.3.0

package/dist/widget-CVnusNlY.mjs

@@ -1,278 +0,0 @@
-
-//#region src/widget.ts
-const SVG = "http://www.w3.org/2000/svg";
-function supported() {
-	return typeof document !== "undefined" && "adoptedStyleSheets" in Document.prototype && "adoptedStyleSheets" in ShadowRoot.prototype && CSS.supports("color", "color-mix(in srgb, red, red)");
-}
-function sheet(text) {
-	const result = new CSSStyleSheet();
-	result.replaceSync(text);
-	return result;
-}
-function variables() {
-	return `.vf{--_r:var(--vf-radius,12px);--_s:var(--vf-surface,Canvas);--_t:var(--vf-text,CanvasText);--_m:var(--vf-muted,color-mix(in srgb,var(--_t) 60%,transparent));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,${CSS.supports("color", "AccentColor") ? "AccentColor" : "#0b57d0"});--_at:var(--vf-accent-text,#fff);--_f:var(--vf-focus,var(--_a));--_mark:var(--vf-mark,#e5243b);--_bd:var(--vf-backdrop,rgb(0 0 0/45%));--_sh:var(--vf-shadow,0 4px 16px rgb(0 0 0/12%));--_size:var(--vf-trigger-size,36px);--_off:var(--vf-offset,16px);--_z:var(--vf-z,2147483000)}`;
-}
-const LAYOUT = `.vf{display:contents;font-family:var(--vf-font,inherit);color-scheme:light dark}.trigger{position:fixed;z-index:var(--_z);box-sizing:border-box;width:var(--_size);height:var(--_size);margin:0;padding:0;display:grid;place-items:center}.trigger[data-y=bottom]{bottom:calc(var(--_off) + env(safe-area-inset-bottom,0px))}.trigger[data-y=top]{top:calc(var(--_off) + env(safe-area-inset-top,0px))}.trigger[data-x=right]{right:calc(var(--_off) + env(safe-area-inset-right,0px))}.trigger[data-x=left]{left:calc(var(--_off) + env(safe-area-inset-left,0px))}.trigger svg{width:55%;height:55%}.capturing,.capturing .backdrop{visibility:hidden}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
-const THEME = `.trigger{border:1px solid var(--_b);border-radius:50%;background:var(--_s);color:var(--_t);box-shadow:var(--_sh);cursor:pointer;transition:background-color .15s}.trigger:hover{background:color-mix(in srgb,var(--_s) 90%,var(--_t))}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}`;
-function icon() {
-	const svg = document.createElementNS(SVG, "svg");
-	const path = document.createElementNS(SVG, "path");
-	for (const [name, value] of Object.entries({
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linejoin": "round",
-		part: "trigger-icon"
-	})) svg.setAttribute(name, value);
-	path.setAttribute("d", "M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z");
-	svg.append(path);
-	return svg;
-}
-function field(element) {
-	return element.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName);
-}
-function deepActive() {
-	let active = document.activeElement;
-	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
-	return active;
-}
-const DISCONNECTED = Symbol.for("visual-feedback.disconnected");
-const noop = {
-	open: async () => {},
-	close() {},
-	destroy() {},
-	update() {},
-	on: () => () => {}
-};
-function createFeedback(options = {}) {
-	if (!supported()) return noop;
-	const tag = options.tagName ?? "visual-feedback";
-	if (!customElements.get(tag)) customElements.define(tag, class extends HTMLElement {
-		disconnectedCallback() {
-			this[DISCONNECTED]?.();
-		}
-	});
-	const host = document.createElement(tag);
-	const root = host.attachShadow({ mode: "open" });
-	const wrapper = document.createElement("div");
-	wrapper.className = "vf";
-	root.append(wrapper);
-	let view;
-	const handlers = /* @__PURE__ */ new Map();
-	const call = (fns, args) => {
-		for (const fn of [...fns]) try {
-			fn(...args);
-		} catch (error) {
-			reportError(error);
-		}
-	};
-	const emit = (event, ...args) => call(handlers.get(event) ?? [], args);
-	const start = () => void widget.open().catch(() => {});
-	let state = "idle";
-	let dialog;
-	let session = 0;
-	let returnFocus = null;
-	let pending;
-	let trigger;
-	let unlisten;
-	function listen(shortcut) {
-		const parts = shortcut.toLowerCase().split("+");
-		const key = parts.pop();
-		const names = [
-			"alt",
-			"shift",
-			"control",
-			"meta"
-		];
-		const mods = names.map((name) => parts.includes(name)).join();
-		const typing = !/control|meta/.test(shortcut.toLowerCase());
-		const on = (event) => {
-			if (event instanceof KeyboardEvent && state === "idle" && !event.repeat && !event.isComposing && !event.getModifierState("AltGraph") && parts.every((part) => names.includes(part)) && [
-				event.altKey,
-				event.shiftKey,
-				event.ctrlKey,
-				event.metaKey
-			].join() === mods && [event.code.replace(/^(Key|Digit)/, ""), event.key].some((name) => name.toLowerCase() === key) && !(typing && field(event.composedPath()[0]))) {
-				event.preventDefault();
-				start();
-			}
-		};
-		addEventListener("keydown", on);
-		return () => removeEventListener("keydown", on);
-	}
-	let base = [];
-	let extra = [];
-	function sheets() {
-		const dialogCss = view?.css(Boolean(options.unstyled)).map(sheet) ?? [];
-		root.adoptedStyleSheets = [
-			...base,
-			...dialogCss,
-			...extra
-		];
-	}
-	function apply() {
-		wrapper.style.colorScheme = options.theme?.replace("auto", "") ?? "";
-		base = [sheet(variables() + LAYOUT), ...options.unstyled ? [] : [sheet(THEME)]];
-		extra = options.css ? [sheet(options.css)] : [];
-		sheets();
-		if (options.trigger === "none") {
-			trigger?.remove();
-			trigger = void 0;
-		} else {
-			if (!trigger) {
-				trigger = document.createElement("button");
-				trigger.type = "button";
-				trigger.className = "trigger";
-				trigger.setAttribute("part", "trigger");
-				trigger.append(icon());
-				trigger.addEventListener("click", start);
-				wrapper.prepend(trigger);
-			}
-			const [y, x] = (options.position ?? "bottom-right").split("-");
-			trigger.dataset.y = y;
-			trigger.dataset.x = x;
-			trigger.setAttribute("aria-label", options.strings?.trigger ?? "Send feedback");
-		}
-		unlisten?.();
-		unlisten = options.shortcut ? listen(options.shortcut) : void 0;
-	}
-	apply();
-	(options.container ?? document.body ?? document.documentElement).append(host);
-	function hide(on) {
-		wrapper.classList.toggle("capturing", on);
-	}
-	function requestDisplay() {
-		const media = navigator.mediaDevices;
-		if (options.capture?.mode !== "display" || typeof media?.getDisplayMedia !== "function") return;
-		hide(true);
-		const stream = media.getDisplayMedia({ video: true });
-		stream.catch(() => {});
-		return stream;
-	}
-	function stop(stream) {
-		stream?.then((media) => {
-			for (const track of media.getTracks()) track.stop();
-		}, () => {});
-	}
-	async function grab(module, mine, stream) {
-		hide(true);
-		const quiet = view?.announce(root, options.strings);
-		try {
-			return await module.capture(options.capture, stream);
-		} catch {
-			return null;
-		} finally {
-			quiet?.();
-			if (mine === session) hide(false);
-		}
-	}
-	function cancel() {
-		session++;
-		hide(false);
-	}
-	function teardown() {
-		dialog?.unmount();
-		dialog = void 0;
-		const target = returnFocus?.isConnected && returnFocus !== document.body ? returnFocus : trigger;
-		returnFocus = null;
-		target?.focus?.();
-	}
-	async function show(mine) {
-		returnFocus = deepActive();
-		const stream = requestDisplay();
-		try {
-			const [loaded, capture] = await Promise.all([import("./dialog-BTY6FKLo.mjs"), import("./capture-CufRosj3.mjs")]);
-			if (mine !== session) return stop(stream);
-			view = loaded;
-			sheets();
-			const image = await grab(capture, mine, stream);
-			if (mine !== session) return;
-			if (!host.isConnected) {
-				state = "idle";
-				return;
-			}
-			dialog = view.mount(wrapper, {
-				close: () => widget.close(),
-				retry: () => void retry(capture).catch((error) => {
-					widget.close();
-					emit("error", error);
-				}),
-				emit,
-				options: () => options
-			}, options);
-			dialog.capture(image);
-		} catch (error) {
-			stop(stream);
-			if (mine === session) {
-				state = "idle";
-				hide(false);
-				teardown();
-			}
-			emit("error", error);
-			throw error;
-		}
-		state = "open";
-		emit("open");
-	}
-	async function retry(capture) {
-		if (wrapper.classList.contains("capturing")) return;
-		const mine = session;
-		dialog?.lock(false);
-		const image = await grab(capture, mine, requestDisplay());
-		if (mine !== session) return;
-		dialog?.capture(image);
-	}
-	const widget = {
-		open() {
-			if (state === "opening" && pending) return pending;
-			if (state !== "idle") return Promise.resolve();
-			state = "opening";
-			pending = show(++session);
-			return pending;
-		},
-		close() {
-			if (state !== "open" && state !== "opening") return;
-			const wasOpen = state === "open";
-			state = "idle";
-			cancel();
-			teardown();
-			if (wasOpen) emit("close");
-		},
-		destroy() {
-			if (state === "destroyed") return;
-			const wasOpen = state === "open";
-			state = "destroyed";
-			cancel();
-			unlisten?.();
-			if (wasOpen) teardown();
-			const closers = wasOpen ? [...handlers.get("close") ?? []] : [];
-			handlers.clear();
-			host.remove();
-			call(closers, []);
-		},
-		update(next) {
-			if (state === "destroyed") return;
-			options = {
-				...options,
-				...next
-			};
-			apply();
-		},
-		on(event, fn) {
-			if (state === "destroyed") return () => {};
-			const set = handlers.get(event) ?? /* @__PURE__ */ new Set();
-			handlers.set(event, set);
-			const handler = fn;
-			set.add(handler);
-			return () => set.delete(handler);
-		}
-	};
-	host[DISCONNECTED] = () => queueMicrotask(() => {
-		if (!host.isConnected) widget.close();
-	});
-	return widget;
-}
-//#endregion
-export { createFeedback as t };