@dropby/react 0.4.0

package/dist/components/index.js

@@ -0,0 +1,1095 @@
+"use client";
+import { t as useDropBy } from "../chunks/use-dropby-BW4iKpiA.js";
+import { a as useChatThread, i as useIdeas, n as useFeatureFlag, o as useChatThreads, r as usePendingAsks } from "../chunks/use-feature-gByQaSp1.js";
+import { n as chatAttachmentMaxByteSize, r as uuid } from "../chunks/chat-attachments-uP-PsyQf.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { DropByError, isVotableIdea, validateAskAnswers } from "@dropby/browser";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fetchChatAttachmentFile } from "@dropby/browser/attachments";
+function asDropByError(caught) {
+	return caught instanceof DropByError ? caught : new DropByError("request_failed", caught instanceof Error ? caught.message : "DropBy request failed", { cause: caught });
+}
+function paginate(fields, size) {
+	const limit = size && size > 0 ? size : fields.length;
+	if (limit >= fields.length) return [fields];
+	const pages = [];
+	for (let i = 0; i < fields.length; i += limit) pages.push(fields.slice(i, i + limit));
+	return pages;
+}
+function toRequest(answers) {
+	return { answers: Object.entries(answers).map(([fieldId, value]) => ({
+		fieldId,
+		value
+	})) };
+}
+function issuesFor(fields, answers) {
+	const map = {};
+	for (const issue of validateAskAnswers({ fields }, toRequest(answers)).issues) map[issue.fieldId] = issue.message;
+	return map;
+}
+function AskForm({ ask, fieldsPerStep, children, ...rest }) {
+	const { actions } = usePendingAsks();
+	const [answers, setAnswers] = useState({});
+	const [step, setStep] = useState(0);
+	const [submitting, setSubmitting] = useState(false);
+	const [issues, setIssues] = useState({});
+	const [failure, setFailure] = useState(null);
+	const pages = useMemo(() => paginate(ask.fields, fieldsPerStep), [ask.fields, fieldsPerStep]);
+	const stepCount = pages.length;
+	const safeStep = Math.min(step, stepCount - 1);
+	const fields = pages[safeStep] ?? [];
+	const isFirst = safeStep === 0;
+	const isLast = safeStep === stepCount - 1;
+	const stepped = stepCount > 1;
+	function setAnswer(fieldId, value) {
+		setAnswers((current) => ({
+			...current,
+			[fieldId]: value
+		}));
+		setIssues((current) => {
+			if (!(fieldId in current)) return current;
+			const next = { ...current };
+			delete next[fieldId];
+			return next;
+		});
+	}
+	function back() {
+		setIssues({});
+		setStep((value) => Math.max(0, value - 1));
+	}
+	function next() {
+		const stepIssues = issuesFor(fields, answers);
+		if (Object.keys(stepIssues).length > 0) {
+			setIssues(stepIssues);
+			return;
+		}
+		setIssues({});
+		setStep((value) => Math.min(stepCount - 1, value + 1));
+	}
+	async function submit() {
+		const allIssues = issuesFor(ask.fields, answers);
+		if (Object.keys(allIssues).length > 0) {
+			setIssues(allIssues);
+			const firstBadStep = pages.findIndex((page) => page.some((field) => allIssues[field.fieldId]));
+			if (firstBadStep >= 0) setStep(firstBadStep);
+			return;
+		}
+		await attempt("submit", () => actions.submit(ask.askId, toRequest(answers)));
+	}
+	async function dismiss() {
+		await attempt("dismiss", () => actions.dismiss(ask.askId));
+	}
+	async function attempt(action, run) {
+		setSubmitting(true);
+		setFailure(null);
+		try {
+			await run();
+		} catch (caught) {
+			setFailure({
+				action,
+				error: asDropByError(caught)
+			});
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		if (isLast) submit();
+		else next();
+	}
+	const state = {
+		ask,
+		fields,
+		answers,
+		setAnswer,
+		step: safeStep,
+		stepCount,
+		isFirst,
+		isLast,
+		back,
+		next,
+		submit,
+		dismiss,
+		submitting,
+		issues,
+		error: failure?.error ?? null
+	};
+	if (children) return /* @__PURE__ */ jsx("form", {
+		onSubmit: handleSubmit,
+		...rest,
+		children: children(state)
+	});
+	return /* @__PURE__ */ jsxs("form", {
+		"data-step": stepped ? safeStep + 1 : void 0,
+		"data-step-count": stepped ? stepCount : void 0,
+		onSubmit: handleSubmit,
+		...rest,
+		children: [
+			fields.map((field) => /* @__PURE__ */ jsx(AskFieldControl, {
+				field,
+				value: answers[field.fieldId],
+				issue: issues[field.fieldId],
+				onChange: (value) => setAnswer(field.fieldId, value)
+			}, field.fieldId)),
+			failure ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: failure.action === "submit" ? "couldn't send your answer. try again." : "couldn't dismiss this. try again."
+			}) : null,
+			/* @__PURE__ */ jsxs("div", { children: [
+				!isFirst ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: back,
+					children: "back"
+				}) : null,
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					"aria-busy": submitting || void 0,
+					"data-busy": submitting ? "" : void 0,
+					disabled: submitting,
+					children: isLast ? "submit" : "next"
+				}),
+				ask.dismissible ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => void dismiss(),
+					disabled: submitting,
+					children: "dismiss"
+				}) : null
+			] })
+		]
+	});
+}
+function AskFieldControl({ field, value, issue, onChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": field.label,
+		"aria-invalid": issue ? true : void 0,
+		"data-field-type": field.type,
+		children: [
+			/* @__PURE__ */ jsxs("span", { children: [field.label, field.required ? " *" : ""] }),
+			/* @__PURE__ */ jsx(AskFieldInput, {
+				field,
+				value,
+				onChange
+			}),
+			issue ? /* @__PURE__ */ jsx("span", {
+				role: "alert",
+				children: issue
+			}) : null
+		]
+	});
+}
+function AskFieldInput({ field, value, onChange }) {
+	if (field.type === "short_text" || field.type === "long_text") {
+		const text = typeof value === "string" ? value : "";
+		const props = {
+			"aria-label": field.label,
+			maxLength: field.maxLength,
+			value: text,
+			onChange: (event) => onChange(event.target.value)
+		};
+		return field.type === "long_text" ? /* @__PURE__ */ jsx("textarea", { ...props }) : /* @__PURE__ */ jsx("input", {
+			type: "text",
+			...props
+		});
+	}
+	if (field.type === "rating") {
+		const ratings = [];
+		for (let n = field.min; n <= field.max; n += 1) ratings.push(n);
+		return /* @__PURE__ */ jsx(Fragment, { children: ratings.map((n) => /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+			type: "radio",
+			name: field.fieldId,
+			checked: value === n,
+			onChange: () => onChange(n)
+		}), n] }, n)) });
+	}
+	const selected = Array.isArray(value) ? value : [];
+	const multiple = field.type === "multi_choice";
+	const atMax = multiple && selected.length >= field.maxSelections;
+	return /* @__PURE__ */ jsx(Fragment, { children: field.options.map((option) => {
+		const checked = selected.includes(option.optionId);
+		return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+			type: multiple ? "checkbox" : "radio",
+			name: field.fieldId,
+			checked,
+			disabled: multiple ? !checked && atMax : false,
+			onChange: () => {
+				if (!multiple) onChange([option.optionId]);
+				else onChange(checked ? selected.filter((id) => id !== option.optionId) : [...selected, option.optionId]);
+			}
+		}), option.label] }, option.optionId);
+	}) });
+}
+function Ask({ ask, fieldsPerStep, children, ...rest }) {
+	if (children) return /* @__PURE__ */ jsx("div", {
+		"data-pending": "",
+		...rest,
+		children: children({ ask })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-pending": "",
+		...rest,
+		children: [/* @__PURE__ */ jsx("strong", { children: ask.title }), /* @__PURE__ */ jsx(AskForm, {
+			ask,
+			...fieldsPerStep !== void 0 ? { fieldsPerStep } : {}
+		})]
+	});
+}
+function scrollPort(root) {
+	const doc = root.ownerDocument, win = doc.defaultView;
+	for (let element = root; element; element = element.parentElement) if (win && element.scrollHeight > element.clientHeight && /(auto|scroll|overlay)/.test(win.getComputedStyle(element).overflowY)) return {
+		element,
+		target: element,
+		top: () => element.getBoundingClientRect().top,
+		bottom: () => element.getBoundingClientRect().bottom
+	};
+	return {
+		element: doc.scrollingElement ?? doc.documentElement,
+		target: win ?? doc,
+		top: () => 0,
+		bottom: () => win?.innerHeight ?? doc.documentElement.clientHeight
+	};
+}
+function messages(root) {
+	return [...root.querySelectorAll("[data-message-id]")];
+}
+function watchChatScrollPosition(root) {
+	const port = scrollPort(root);
+	let anchorId, offset = 0;
+	const capture = () => {
+		const anchor = messages(root).find((message) => message.getBoundingClientRect().bottom > port.top());
+		anchorId = anchor?.dataset.messageId;
+		offset = anchor ? anchor.getBoundingClientRect().top - port.top() : 0;
+	};
+	capture();
+	port.target.addEventListener("scroll", capture, { passive: true });
+	const stop = () => port.target.removeEventListener("scroll", capture);
+	return {
+		stop,
+		restore: () => {
+			stop();
+			const retained = messages(root), anchor = retained.find((message) => message.dataset.messageId === anchorId);
+			if (anchor) port.element.scrollTop += anchor.getBoundingClientRect().top - port.top() - offset;
+			else if (anchorId && retained.length) scrollChatToLatest(root);
+		}
+	};
+}
+function scrollChatToLatest(root) {
+	const last = messages(root).at(-1);
+	if (!last) return;
+	const port = scrollPort(root);
+	if (port.element === root) {
+		root.scrollTop = root.scrollHeight;
+		return;
+	}
+	port.element.scrollTop += last.getBoundingClientRect().bottom - port.bottom();
+}
+function watchChatNavigationFocus(root, selector, signal) {
+	const doc = root.ownerDocument;
+	let focused = !!("activeElement" in root ? root.activeElement : doc.activeElement)?.matches(selector);
+	const capture = (event) => {
+		const element = event.composedPath()[0];
+		focused = element instanceof Element && root.contains(element) && element.matches(selector);
+	};
+	doc.addEventListener("focusin", capture, {
+		capture: true,
+		...signal ? { signal } : {}
+	});
+	const stop = () => doc.removeEventListener("focusin", capture, true);
+	return {
+		stop,
+		restore(fallback) {
+			stop();
+			if (focused) (root.querySelector(selector) ?? fallback)?.focus({ preventScroll: true });
+		}
+	};
+}
+const followSlack = 24;
+var ChatFollower = class {
+	root;
+	signal;
+	behind;
+	port = null;
+	stopListening = null;
+	end = null;
+	following = true;
+	triedLatestAt = null;
+	constructor(root, signal, behind = () => {}) {
+		this.root = root;
+		this.signal = signal;
+		this.behind = behind;
+		signal.addEventListener("abort", () => this.stopListening?.(), { once: true });
+	}
+	settle(state) {
+		if (this.signal.aborted) return;
+		const port = ownScrollContainer(this.root);
+		if (port !== this.port) this.listen(port);
+		const opened = this.end === null && state.end !== null;
+		const shownEnd = this.end;
+		const arrived = state.end !== null && this.end !== null && state.end > this.end;
+		if (port && (opened || arrived && (this.following || state.lastMine))) scrollForwardTo(port, messages(this.root).at(-1));
+		if (state.end !== null) this.end = Math.max(this.end ?? state.end, state.end);
+		this.measure();
+		const count = state.count;
+		if (port && this.following && !opened && state.end !== null && shownEnd !== null && state.end >= shownEnd && count !== null && count > state.end && this.triedLatestAt !== count) {
+			this.triedLatestAt = count;
+			this.behind();
+		}
+	}
+	listen(port) {
+		this.stopListening?.();
+		this.stopListening = null;
+		this.port = port;
+		if (!port) return;
+		const measure = () => this.measure();
+		port.addEventListener("scroll", measure, { passive: true });
+		this.stopListening = () => port.removeEventListener("scroll", measure);
+	}
+	measure() {
+		const last = messages(this.root).at(-1);
+		this.following = !this.port || !last || last.getBoundingClientRect().bottom - this.port.getBoundingClientRect().bottom <= followSlack;
+	}
+};
+function ownScrollContainer(root) {
+	const doc = root.ownerDocument;
+	const win = doc.defaultView;
+	for (let element = root; element; element = element.parentElement) {
+		if (element === doc.body || element === doc.documentElement) return null;
+		if (win && /(auto|scroll|overlay)/.test(win.getComputedStyle(element).overflowY)) return element;
+	}
+	return null;
+}
+function scrollForwardTo(port, message) {
+	if (!message) return;
+	const beyond = message.getBoundingClientRect().bottom - port.getBoundingClientRect().bottom;
+	if (beyond > 0) port.scrollTop += beyond;
+}
+const readEnd = 24;
+var ChatSeenTracker = class {
+	options;
+	observer = null;
+	observed = /* @__PURE__ */ new Map();
+	intersecting = /* @__PURE__ */ new Set();
+	renderGeneration = 0;
+	interactionGeneration = 0;
+	failedGeneration = -1;
+	inFlight = false;
+	frame = 0;
+	constructor(options) {
+		this.options = options;
+		const { root, signal } = options;
+		const interaction = () => this.interact();
+		for (const type of [
+			"pointerdown",
+			"wheel",
+			"keydown"
+		]) root.addEventListener(type, interaction, {
+			signal,
+			passive: true
+		});
+		document.addEventListener("visibilitychange", () => {
+			if (document.visibilityState === "visible") this.interact();
+		}, { signal });
+		const scroll = () => this.recheckSoon();
+		for (const target of /* @__PURE__ */ new Set([
+			root,
+			root.getRootNode(),
+			document
+		])) target.addEventListener("scroll", scroll, {
+			signal,
+			capture: true,
+			passive: true
+		});
+		signal.addEventListener("abort", () => this.disconnect(), { once: true });
+	}
+	interact() {
+		this.interactionGeneration++;
+		this.dispatch();
+	}
+	disconnect() {
+		this.renderGeneration++;
+		this.observer?.disconnect();
+		this.observer = null;
+		this.observed.clear();
+		this.intersecting.clear();
+		if (this.frame) cancelAnimationFrame(this.frame);
+		this.frame = 0;
+	}
+	observe() {
+		this.disconnect();
+		if (this.options.signal.aborted || !this.options.permitted() || typeof IntersectionObserver === "undefined") return;
+		const generation = this.renderGeneration;
+		this.observer = new IntersectionObserver((entries) => {
+			if (generation !== this.renderGeneration || !this.options.permitted()) return;
+			for (const entry of entries) if (entry.isIntersecting) this.intersecting.add(entry.target);
+			else this.intersecting.delete(entry.target);
+			this.dispatch();
+		}, { threshold: [0, 1] });
+		for (const element of this.options.root.querySelectorAll("[data-read-message-id]")) {
+			const id = element.dataset.readMessageId;
+			if (id) {
+				this.observed.set(id, element);
+				this.observer.observe(element);
+			}
+		}
+	}
+	recheckSoon() {
+		if (this.frame || this.observed.size === 0) return;
+		this.frame = requestAnimationFrame(() => {
+			this.frame = 0;
+			this.dispatch();
+		});
+	}
+	candidate() {
+		const thread = this.options.thread();
+		if (this.options.signal.aborted || !this.options.permitted() || document.visibilityState !== "visible" || !thread || thread.userSeen.unreadTeamMessageCount === 0) return null;
+		const { lastSeenTeamMessageId, unreadTeamMessageCount } = thread.userSeen;
+		const seenIndex = thread.messages.findIndex((message) => message.messageId === lastSeenTeamMessageId);
+		let unread = !thread.hasNewerMessages ? unreadTeamMessageCount : seenIndex === -1 ? 0 : Infinity;
+		for (let index = thread.messages.length - 1; index > seenIndex && unread > 0; index--) {
+			const message = thread.messages[index];
+			if (!message || message.authorType !== "team") continue;
+			unread--;
+			const element = this.observed.get(message.messageId);
+			if (element && this.intersecting.has(element) && this.options.root.contains(element) && endOnScreen(element)) return message.messageId;
+		}
+		return null;
+	}
+	dispatch() {
+		if (this.inFlight || this.failedGeneration === this.interactionGeneration) return;
+		const messageId = this.candidate();
+		const threadId = this.options.thread()?.threadId;
+		if (!messageId || !threadId) return;
+		this.inFlight = true;
+		this.options.markSeen(threadId, messageId).then(() => {
+			if (this.candidate() === messageId) this.failedGeneration = this.interactionGeneration;
+		}).catch(() => {
+			this.failedGeneration = this.interactionGeneration;
+		}).finally(() => {
+			this.inFlight = false;
+			this.dispatch();
+		});
+	}
+};
+function endOnScreen(element) {
+	if (!element.isConnected) return false;
+	const rect = element.getBoundingClientRect();
+	if (rect.width <= 0 || rect.height <= 0) return false;
+	let left = 0, top = 0, right = window.innerWidth, bottom = window.innerHeight;
+	let current = element;
+	while (current) {
+		const style = getComputedStyle(current);
+		if (current.hasAttribute("hidden") || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || Number.parseFloat(style.opacity) === 0) return false;
+		if (current !== element) {
+			const clip = current.getBoundingClientRect();
+			if (/hidden|clip|scroll|auto/.test(style.overflowX)) {
+				left = Math.max(left, clip.left);
+				right = Math.min(right, clip.right);
+			}
+			if (/hidden|clip|scroll|auto/.test(style.overflowY)) {
+				top = Math.max(top, clip.top);
+				bottom = Math.min(bottom, clip.bottom);
+			}
+		}
+		const tree = current.getRootNode();
+		current = current.parentElement ?? (tree instanceof ShadowRoot ? tree.host : null);
+	}
+	const endTop = rect.bottom - Math.min(readEnd, rect.height);
+	return rect.left >= left && rect.right <= right && endTop >= top && rect.bottom <= bottom;
+}
+function saveFile(file, fileName, container = document.body) {
+	const href = URL.createObjectURL(file);
+	const link = document.createElement("a");
+	link.href = href;
+	link.download = fileName;
+	link.target = "_self";
+	container.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(href), 6e4);
+}
+function attachmentFailureCopy(code) {
+	return `couldn't attach. ${code === "invalid_file_name" ? "that file name can't be used." : code === "unsupported_type" ? "that file type isn't supported." : code === "too_large" ? `that file is larger than ${chatAttachmentMaxByteSize / 1024 / 1024} MB.` : code === "classification_failed" || code === "type_mismatch" || code === "read_failed" || code === "size_mismatch" ? "that file couldn't be read." : "try again."}`;
+}
+function sameAttempt(kept, text, attachmentIds) {
+	return kept.text === text && kept.attachmentIds.length === attachmentIds.length && kept.attachmentIds.every((id, index) => id === attachmentIds[index]);
+}
+function ChatComposer({ threadId, attachments, children, ...rest }) {
+	const { actions } = useChatThread(threadId);
+	const [draft, setDraft] = useState("");
+	const [sending, setSending] = useState(false);
+	const [error, setError] = useState(null);
+	const attempts = useRef(/* @__PURE__ */ new Map());
+	async function send() {
+		const text = draft.trim();
+		if (!text || sending || (attachments?.pending ?? false)) return;
+		setSending(true);
+		setError(null);
+		try {
+			const references = attachments?.references() ?? [];
+			const attachmentIds = references.map((reference) => reference.attachmentId);
+			const kept = attempts.current.get(threadId);
+			const key = kept && sameAttempt(kept, text, attachmentIds) ? kept.key : uuid();
+			attempts.current.set(threadId, {
+				key,
+				text,
+				attachmentIds
+			});
+			await actions.sendMessage(references.length > 0 ? {
+				text,
+				attachments: references
+			} : { text }, { idempotencyKey: key });
+			attempts.current.delete(threadId);
+			setDraft("");
+			attachments?.clear();
+		} catch (caught) {
+			setError(asDropByError(caught));
+		} finally {
+			setSending(false);
+		}
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		send();
+	}
+	if (children) return /* @__PURE__ */ jsx("form", {
+		onSubmit: handleSubmit,
+		...rest,
+		children: children({
+			draft,
+			setDraft,
+			send,
+			sending,
+			error,
+			attachments
+		})
+	});
+	const sendDisabled = sending || draft.trim().length === 0 || (attachments?.pending ?? false);
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: handleSubmit,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("textarea", {
+				"aria-label": "message",
+				onChange: (event) => setDraft(event.target.value),
+				value: draft
+			}),
+			attachments ? /* @__PURE__ */ jsxs("div", {
+				"data-attachments": "",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "file",
+						multiple: true,
+						accept: attachments.accept,
+						"aria-label": "attach files",
+						onChange: (event) => {
+							const { files } = event.target;
+							if (files && files.length > 0) attachments.add(files);
+							event.target.value = "";
+						}
+					}),
+					attachments.notice ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						children: attachments.notice
+					}) : null,
+					attachments.drafts.length > 0 ? /* @__PURE__ */ jsx("ul", {
+						"aria-label": "attachments",
+						children: attachments.drafts.map((item) => /* @__PURE__ */ jsxs("li", {
+							"data-status": item.status,
+							"data-attachment-kind": item.kind,
+							children: [
+								item.previewUrl ? /* @__PURE__ */ jsx("img", {
+									src: item.previewUrl,
+									alt: "",
+									width: 48,
+									height: 48
+								}) : null,
+								/* @__PURE__ */ jsx("span", { children: item.fileName }),
+								item.error ? /* @__PURE__ */ jsx("span", {
+									role: "alert",
+									children: attachmentFailureCopy(item.error.code)
+								}) : null,
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": `remove ${item.fileName}`,
+									onClick: () => attachments.remove(item.localId),
+									children: "remove"
+								})
+							]
+						}, item.localId))
+					}) : null
+				]
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: "couldn't send. your message is still here."
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"aria-busy": sending || void 0,
+				"data-busy": sending ? "" : void 0,
+				disabled: sendDisabled,
+				children: "send"
+			})
+		]
+	});
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useChatNavigation(id, latest) {
+	const root = useRef(null);
+	const generation = useRef(0);
+	const [, settled] = useState(0);
+	const pending = useRef(null);
+	useEffect(() => () => {
+		generation.current++;
+		pending.current?.position.stop();
+		pending.current?.focus.stop();
+		pending.current = null;
+	}, [id]);
+	useIsomorphicLayoutEffect(() => {
+		const action = pending.current, element = root.current;
+		if (!action?.finished || !element) return;
+		pending.current = null;
+		if (action.kind === "latest" && latest?.status === "success") {
+			action.position.stop();
+			scrollChatToLatest(element);
+		} else action.position.restore();
+		action.focus.restore(element);
+	});
+	async function navigate(kind, run) {
+		const element = root.current;
+		if (!element) return;
+		const ticket = ++generation.current;
+		pending.current?.position.stop();
+		pending.current?.focus.stop();
+		pending.current = {
+			kind,
+			position: watchChatScrollPosition(element),
+			focus: watchChatNavigationFocus(element, `[data-history-action="${kind}"]`),
+			finished: false
+		};
+		try {
+			await run();
+		} finally {
+			if (ticket === generation.current && pending.current) {
+				pending.current.finished = true;
+				settled((value) => value + 1);
+			}
+		}
+	}
+	return {
+		root,
+		navigate
+	};
+}
+function mayAcknowledge(core) {
+	const capabilities = core.capabilities.getSnapshot();
+	return capabilities.chat.canRead && !capabilities.actionDisabled("chat.thread:seen");
+}
+function useChatSeen(core, root, id, enabled) {
+	const tracker = useRef(null);
+	useEffect(() => {
+		const element = root.current;
+		if (!enabled || !element) return;
+		const lifetime = new AbortController();
+		const current = new ChatSeenTracker({
+			root: element,
+			signal: lifetime.signal,
+			thread: () => core.chat.getSnapshot().threadsById[id]?.data ?? null,
+			permitted: () => mayAcknowledge(core),
+			markSeen: (threadId, messageId) => core.chat.markThreadSeen(threadId, { seenThroughMessageId: messageId })
+		});
+		tracker.current = current;
+		let permitted = mayAcknowledge(core);
+		const stopCapabilities = core.capabilities.subscribe(() => {
+			const now = mayAcknowledge(core);
+			if (now && !permitted) {
+				current.observe();
+				current.interact();
+			}
+			permitted = now;
+		});
+		const live = () => ["open", "polling"].includes(core.connection.getSnapshot().status);
+		let connected = live();
+		const stopConnection = core.connection.subscribe(() => {
+			const now = live();
+			if (now && !connected) current.interact();
+			connected = now;
+		});
+		current.observe();
+		return () => {
+			lifetime.abort();
+			stopCapabilities();
+			stopConnection();
+			tracker.current = null;
+		};
+	}, [
+		core,
+		root,
+		id,
+		enabled
+	]);
+	useEffect(() => {
+		tracker.current?.observe();
+	});
+}
+function useChatFollow(root, id, thread, enabled, loadLatest) {
+	const follower = useRef(null);
+	const latest = useRef(loadLatest);
+	latest.current = loadLatest;
+	useIsomorphicLayoutEffect(() => {
+		const element = root.current;
+		if (!enabled || !element) return;
+		const lifetime = new AbortController();
+		follower.current = new ChatFollower(element, lifetime.signal, () => latest.current());
+		return () => {
+			lifetime.abort();
+			follower.current = null;
+		};
+	}, [
+		root,
+		id,
+		enabled
+	]);
+	const end = thread?.messages.at(-1)?.sequence ?? null;
+	const lastMine = thread?.messages.at(-1)?.authorType === "user";
+	const count = thread?.messageCount ?? null;
+	useIsomorphicLayoutEffect(() => {
+		follower.current?.settle({
+			end,
+			lastMine,
+			count
+		});
+	}, [
+		id,
+		end,
+		lastMine,
+		count
+	]);
+}
+function ChatThread({ id, manualLoad, acknowledge = true, children, ...rest }) {
+	const { data, actions, olderMessages, latestMessages } = useChatThread(id);
+	const core = useDropBy();
+	const navigation = useChatNavigation(id, latestMessages);
+	const status = data?.status ?? "idle";
+	useChatSeen(core, navigation.root, id, acknowledge && !children);
+	useChatFollow(navigation.root, id, data?.data, !children, () => {
+		actions.loadLatestMessages();
+	});
+	useEffect(() => {
+		if (!manualLoad && status === "idle") actions.open();
+	}, [
+		manualLoad,
+		status,
+		actions
+	]);
+	if (children) return children({
+		thread: data,
+		actions,
+		olderMessages,
+		latestMessages
+	});
+	const thread = data?.data;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-status": status,
+		tabIndex: -1,
+		...rest,
+		ref: navigation.root,
+		children: [
+			thread?.hasOlderMessages ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-history-action": "older",
+				disabled: olderMessages?.status === "loading" || latestMessages?.status === "loading",
+				onClick: () => void navigation.navigate("older", () => actions.loadOlderMessages()),
+				children: olderMessages?.status === "loading" ? "loading older messages" : "load older messages"
+			}) : null,
+			status === "error" && !thread ? /* @__PURE__ */ jsxs("p", {
+				role: "alert",
+				children: [
+					"couldn't open this conversation.",
+					" ",
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => void actions.open(),
+						children: "try again"
+					})
+				]
+			}) : null,
+			olderMessages?.error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: "couldn't load older messages. try again."
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				"aria-live": "polite",
+				children: thread?.messages.map((message) => /* @__PURE__ */ jsxs("li", {
+					"data-message-id": message.messageId,
+					"data-read-message-id": message.authorType === "team" ? message.messageId : void 0,
+					"data-author": message.authorType,
+					children: [message.text, message.attachments.length > 0 ? /* @__PURE__ */ jsx("ul", { children: message.attachments.map((attachment) => /* @__PURE__ */ jsx(AttachmentDownload, {
+						attachment,
+						fetchFile: (attachmentId) => fetchChatAttachmentFile(core, attachmentId)
+					}, attachment.attachmentId)) }) : null]
+				}, message.messageId))
+			}),
+			thread && (thread.hasNewerMessages || latestMessages?.status === "loading" || latestMessages?.error) ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-history-action": "latest",
+				disabled: latestMessages?.status === "loading",
+				onClick: () => void navigation.navigate("latest", () => actions.loadLatestMessages()),
+				children: latestMessages?.status === "loading" ? "loading latest messages" : "back to latest"
+			}) : null,
+			latestMessages?.error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: "couldn't load latest messages. try again."
+			}) : null,
+			/* @__PURE__ */ jsx(ChatComposer, { threadId: id })
+		]
+	});
+}
+function AttachmentDownload({ attachment, fetchFile }) {
+	const [downloading, setDownloading] = useState(false);
+	const [error, setError] = useState(null);
+	async function download() {
+		setDownloading(true);
+		setError(null);
+		try {
+			saveFile(await fetchFile(attachment.attachmentId), attachment.fileName);
+		} catch (caught) {
+			setError(caught instanceof Error ? caught : new Error(String(caught)));
+		} finally {
+			setDownloading(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `download ${attachment.fileName}`,
+		"aria-busy": downloading || void 0,
+		"data-attachment-kind": attachment.kind,
+		"data-busy": downloading ? "" : void 0,
+		"data-error": error ? "" : void 0,
+		disabled: downloading,
+		onClick: () => void download(),
+		children: attachment.fileName
+	}), error ? /* @__PURE__ */ jsxs("span", {
+		role: "alert",
+		children: [
+			"couldn't download ",
+			attachment.fileName,
+			". try again."
+		]
+	}) : null] });
+}
+function ChatThreadList({ manualLoad, onSelect, selectedId, children, ...rest }) {
+	const { data, actions } = useChatThreads();
+	useEffect(() => {
+		if (!manualLoad && data.status === "idle") actions.listThreads();
+	}, [
+		manualLoad,
+		data.status,
+		actions
+	]);
+	if (children) return children({
+		threads: data,
+		actions
+	});
+	const empty = data.status === "success" && data.items.length === 0;
+	return /* @__PURE__ */ jsxs("ul", {
+		"aria-live": "polite",
+		"data-status": data.status,
+		"data-empty": empty ? "" : void 0,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("li", { children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: data.status === "loading",
+					onClick: () => void actions.listThreads({ filter: data.filter }),
+					children: "refresh"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-pressed": data.filter === "unread",
+					onClick: () => void actions.listThreads({ filter: data.filter === "unread" ? "all" : "unread" }),
+					children: "unread"
+				}),
+				data.status === "error" ? /* @__PURE__ */ jsx("span", {
+					role: "alert",
+					children: "couldn't load conversations. try again."
+				}) : null
+			] }),
+			data.items.map((thread) => {
+				const unread = thread.userSeen.unreadTeamMessageCount;
+				const summary = /* @__PURE__ */ jsxs(Fragment, { children: [thread.lastMessagePreview || "conversation", unread > 0 && /* @__PURE__ */ jsxs("span", { children: [
+					" · ",
+					unread,
+					" unread replies"
+				] })] });
+				return /* @__PURE__ */ jsx("li", {
+					"data-status": thread.status,
+					"data-unread": unread > 0 ? "" : void 0,
+					children: onSelect ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-current": thread.threadId === selectedId ? "true" : void 0,
+						onClick: () => onSelect(thread.threadId),
+						children: summary
+					}) : summary
+				}, thread.threadId);
+			}),
+			data.hasMore || data.status === "success" && data.error ? /* @__PURE__ */ jsxs("li", {
+				"data-load-more": "",
+				children: [data.status === "success" && data.error ? /* @__PURE__ */ jsx("span", {
+					role: "alert",
+					children: "couldn't load more conversations. try again."
+				}) : null, /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: data.loadingMore,
+					onClick: () => void actions.loadMoreThreads(),
+					children: data.loadingMore ? "loading more conversations" : "show more conversations"
+				})]
+			}) : null
+		]
+	});
+}
+function Feature({ name, equals, fallback = null, children }) {
+	const value = useFeatureFlag(name);
+	return (equals === void 0 ? Boolean(value) : value === equals) ? children : fallback;
+}
+function useIdeaVote(idea) {
+	const { actions } = useIdeas();
+	const [voting, setVoting] = useState(false);
+	const [error, setError] = useState(null);
+	const voted = idea.viewerHasVoted;
+	async function run(action) {
+		setVoting(true);
+		setError(null);
+		try {
+			await action();
+		} catch (caught) {
+			setError(asDropByError(caught));
+		} finally {
+			setVoting(false);
+		}
+	}
+	return {
+		idea,
+		voted,
+		votable: isVotableIdea(idea),
+		voting,
+		error,
+		vote: () => run(() => actions.vote(idea.ideaId)),
+		unvote: () => run(() => actions.unvote(idea.ideaId)),
+		toggle: () => run(() => voted ? actions.unvote(idea.ideaId) : actions.vote(idea.ideaId))
+	};
+}
+function IdeaVoteButton({ idea, children, onClick, disabled, ...rest }) {
+	const state = useIdeaVote(idea);
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		state.toggle();
+	}
+	const content = typeof children === "function" ? children(state) : children ?? idea.voteCount;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-pressed": state.voted,
+		"aria-busy": state.voting || void 0,
+		"data-voted": state.voted ? "" : void 0,
+		"data-busy": state.voting ? "" : void 0,
+		disabled: disabled ?? (state.voting || !state.votable),
+		onClick: handleClick,
+		...rest,
+		children: content
+	});
+}
+function Idea({ idea, children, ...rest }) {
+	const voted = idea.viewerHasVoted ? "" : void 0;
+	if (typeof children === "function") return /* @__PURE__ */ jsx("div", {
+		"data-voted": voted,
+		...rest,
+		children: children({ idea })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-voted": voted,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(IdeaVoteButton, { idea }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: idea.title }), idea.description ? /* @__PURE__ */ jsx("p", { children: idea.description }) : null] }),
+			children
+		]
+	});
+}
+function IdeaList({ view, manualLoad, children, ...rest }) {
+	const { data, actions } = useIdeas();
+	useEffect(() => {
+		if (!manualLoad && data.status === "idle") actions.list({ view });
+	}, [
+		manualLoad,
+		view,
+		data.status,
+		actions
+	]);
+	if (typeof children === "function") return children({
+		ideas: data,
+		actions
+	});
+	const empty = data.status === "success" && data.items.length === 0;
+	return /* @__PURE__ */ jsxs("ul", {
+		"aria-live": "polite",
+		"data-status": data.status,
+		"data-empty": empty ? "" : void 0,
+		...rest,
+		children: [data.items.map((idea) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Idea, { idea }) }, idea.ideaId)), data.hasMore ? /* @__PURE__ */ jsx("li", {
+			"data-load-more": "",
+			children: /* @__PURE__ */ jsx("button", {
+				disabled: data.loadingMore,
+				onClick: () => void actions.loadMore(),
+				type: "button",
+				children: data.loadingMore ? "loading more ideas" : "show more ideas"
+			})
+		}) : null]
+	});
+}
+function PendingAsks({ fieldsPerStep, manualLoad, children, ...rest }) {
+	const { data, actions } = usePendingAsks();
+	useEffect(() => {
+		if (!manualLoad && data.status === "idle") actions.listPending();
+	}, [
+		manualLoad,
+		data.status,
+		actions
+	]);
+	if (children) return children({
+		asks: data,
+		actions
+	});
+	const empty = data.status === "success" && data.items.length === 0;
+	return /* @__PURE__ */ jsxs("ul", {
+		"aria-live": "polite",
+		"data-status": data.status,
+		"data-empty": empty ? "" : void 0,
+		...rest,
+		children: [data.items.map((ask) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Ask, {
+			ask,
+			...fieldsPerStep !== void 0 ? { fieldsPerStep } : {}
+		}) }, ask.askId)), data.status === "error" ? /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+			role: "status",
+			children: "couldn’t load asks."
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => void actions.listPending(),
+			children: "retry"
+		})] }) : data.hasMore || data.error ? /* @__PURE__ */ jsxs("li", {
+			"data-load-more": "",
+			children: [data.error ? /* @__PURE__ */ jsx("span", {
+				role: "status",
+				children: "couldn’t load more asks."
+			}) : null, /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: data.loadingMore,
+				onClick: () => void actions.loadMorePending(),
+				children: data.loadingMore ? "loading more asks" : "show more asks"
+			})]
+		}) : null]
+	});
+}
+export { Ask, AskForm, ChatComposer, ChatThread, ChatThreadList, Feature, Idea, IdeaList, IdeaVoteButton, PendingAsks };