@vite-hub/ui 0.0.3 → 0.1.0

package/dist/comment-layer-CBlxJ8eK.js

@@ -0,0 +1,1113 @@
+import { t as uiErrorDiagnostics } from "./error-diagnostics-B4hMpJRL.js";
+import { t as Markdown } from "./markdown-BoLBN0qH.js";
+import { t as PromptInput } from "./prompt-input-BbnCb80O.js";
+import { t as AvatarStack } from "./avatar-stack-DM6HRnc0.js";
+import { a as consumedPointerEvents, c as shakeEventName, i as useCommentsContext, l as swallowNextClick, n as provideComments, o as pathOf, r as useComments, s as shakeDirtyComposers, u as useDocumentPointerDown } from "./comments-C08J3z4e.js";
+import { n as MarkerContent, t as Marker } from "./marker-Di2ZG_k1.js";
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, resolveComponent, useId, watch } from "vue";
+//#region src/internal/comment-person.ts
+const displayName = (user) => user.name ?? user.id;
+function toPerson(user) {
+	return {
+		id: user.id,
+		image: user.image,
+		name: displayName(user)
+	};
+}
+/** One line of a message for a label: Markdown marks and line breaks gone, and cut at `length`. */
+function excerpt(body, length = 60) {
+	const line = body.replace(/\s+/g, " ").trim();
+	return line.length > length ? `${line.slice(0, length - 1)}…` : line;
+}
+//#endregion
+//#region src/components/comment-composer.ts
+const placeholders = {
+	comment: "Add a comment",
+	edit: "Edit your comment",
+	reply: "Reply"
+};
+/** The name of the send button. A comment on a page is sent as a comment, and an answer in a thread as a reply. */
+const sendLabels = {
+	comment: "Comment",
+	edit: "Save",
+	reply: "Reply"
+};
+const labels = {
+	comment: "Comment",
+	edit: "Edit comment",
+	reply: "Reply"
+};
+const CommentComposer = defineComponent({
+	name: "CommentComposer",
+	props: {
+		modelValue: {
+			default: "",
+			type: String
+		},
+		/** The ids of the people mentioned so far. */
+		mentions: {
+			default: () => [],
+			type: Array
+		},
+		/** Whose avatar shows beside the box. */
+		user: { type: Object },
+		variant: {
+			default: "comment",
+			type: String
+		},
+		placeholder: { type: String },
+		/** A send is running. The box keeps its text and cannot send again. */
+		busy: {
+			default: false,
+			type: Boolean
+		},
+		/** Why the last send failed. */
+		error: { type: String },
+		/** Focus the box when it appears. */
+		autofocus: {
+			default: true,
+			type: Boolean
+		},
+		/** Treat a click outside as a close, or as a shake when there is text. Turn it off when the parent decides. */
+		guard: {
+			default: true,
+			type: Boolean
+		},
+		/** People whose names the text may hold, such as the authors of a thread. Only mentions of a person whose `@name` is still in the text are sent. */
+		people: {
+			default: () => [],
+			type: Array
+		},
+		/** Finds people for `@mentions`. Without it the box has no mention menu. */
+		users: { type: Function }
+	},
+	emits: [
+		"update:modelValue",
+		"update:mentions",
+		"submit",
+		"cancel"
+	],
+	setup(props, { emit, expose }) {
+		const root = ref(null);
+		const shaking = ref(null);
+		const menu = ref(null);
+		const picked = /* @__PURE__ */ new Map();
+		const menuId = useId();
+		const optionId = (index) => `${menuId}-option-${index}`;
+		let timer;
+		let lookup = 0;
+		let mentionCaret;
+		const nameOf = (id) => {
+			const person = props.people.find((entry) => entry.id === id);
+			return picked.get(id) ?? (person ? displayName(person) : void 0);
+		};
+		const textarea = () => root.value?.querySelector("textarea") ?? null;
+		const hasText = () => props.modelValue.trim().length > 0;
+		const focus = () => textarea()?.focus();
+		async function shake() {
+			const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			shaking.value = null;
+			await nextTick();
+			root.value?.offsetWidth;
+			shaking.value = reduced ? "flash" : "shake";
+			clearTimeout(timer);
+			timer = setTimeout(() => shaking.value = null, 450);
+			focus();
+		}
+		const onShake = () => void shake();
+		onMounted(() => {
+			root.value?.addEventListener(shakeEventName, onShake);
+			if (props.autofocus) nextTick(focus);
+		});
+		onBeforeUnmount(() => {
+			root.value?.removeEventListener(shakeEventName, onShake);
+			clearTimeout(timer);
+		});
+		expose({
+			focus,
+			shake
+		});
+		watch(menu, (open) => {
+			const field = textarea();
+			if (!field) return;
+			field.setAttribute("role", "combobox");
+			field.setAttribute("aria-autocomplete", "list");
+			field.setAttribute("aria-expanded", String(open !== null));
+			if (open) {
+				field.setAttribute("aria-controls", `${menuId}-list`);
+				field.setAttribute("aria-activedescendant", optionId(open.index));
+			} else {
+				field.removeAttribute("aria-controls");
+				field.removeAttribute("aria-activedescendant");
+			}
+		}, { deep: true });
+		useDocumentPointerDown((event) => {
+			if (!props.guard || !root.value || pathOf(event).includes(root.value)) return;
+			consumedPointerEvents.add(event);
+			if (hasText()) {
+				event.stopPropagation();
+				swallowNextClick();
+				shake();
+			} else emit("cancel");
+		});
+		function checkSelection() {
+			const field = textarea();
+			if (!field || field.selectionStart === mentionCaret && field.selectionEnd === mentionCaret) return;
+			lookup++;
+			mentionCaret = void 0;
+			menu.value = null;
+		}
+		function choose(person) {
+			checkSelection();
+			const field = textarea();
+			const current = menu.value;
+			if (!field || !current) return;
+			if (field.selectionStart !== field.selectionEnd || field.value.slice(0, field.selectionStart) !== current.before) {
+				menu.value = null;
+				return;
+			}
+			const caret = field.selectionStart;
+			const insert = `@${displayName(person)} `;
+			const next = props.modelValue.slice(0, current.start) + insert + props.modelValue.slice(caret);
+			picked.set(person.id, displayName(person));
+			emit("update:modelValue", next);
+			if (!props.mentions.includes(person.id)) emit("update:mentions", [...props.mentions, person.id]);
+			menu.value = null;
+			nextTick(() => {
+				const position = current.start + insert.length;
+				field.setSelectionRange(position, position);
+				field.focus();
+			});
+		}
+		async function findPeople(field) {
+			const run = ++lookup;
+			mentionCaret = field.selectionStart;
+			const search = props.users;
+			const before = field.value.slice(0, field.selectionStart);
+			const match = /(^|\s)@([^\s@]*)$/.exec(before);
+			if (!search || !match || field.selectionStart !== field.selectionEnd) {
+				menu.value = null;
+				return;
+			}
+			const start = before.length - match[2].length - 1;
+			const items = await search(match[2]).catch(() => []);
+			checkSelection();
+			if (run !== lookup) return;
+			const sameToken = field.selectionStart === field.selectionEnd && field.value.slice(0, field.selectionStart) === before;
+			menu.value = sameToken && items.length > 0 ? {
+				before,
+				index: 0,
+				items,
+				start
+			} : null;
+		}
+		function submit(payload) {
+			if (props.busy || !payload.text) return;
+			const mentions = props.mentions.filter((id) => {
+				const name = nameOf(id);
+				if (name === void 0) return false;
+				const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+				return new RegExp(`(^|[^\\p{L}\\p{N}\\p{M}_])@${escaped}(?=$|[^\\p{L}\\p{N}\\p{M}_])`, "iu").test(payload.text);
+			});
+			emit("submit", {
+				body: payload.text,
+				mentions: [...mentions]
+			});
+		}
+		function keydown(event) {
+			if (event.isComposing) return;
+			const open = menu.value;
+			if (open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+				event.preventDefault();
+				const step = event.key === "ArrowDown" ? 1 : -1;
+				open.index = (open.index + step + open.items.length) % open.items.length;
+				return;
+			}
+			if (open && (event.key === "Enter" || event.key === "Tab") && !event.shiftKey) {
+				event.preventDefault();
+				event.stopPropagation();
+				choose(open.items[open.index]);
+				return;
+			}
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (open) menu.value = null;
+			else if (hasText()) shake();
+			else emit("cancel");
+		}
+		return () => h("div", {
+			"data-busy": props.busy ? "true" : void 0,
+			"data-dirty": hasText() ? "true" : void 0,
+			"data-shake": shaking.value ?? void 0,
+			"data-slot": "comment-composer",
+			"data-variant": props.variant,
+			onKeydownCapture: keydown,
+			onKeyupCapture: checkSelection,
+			onClickCapture: checkSelection,
+			onSelectCapture: checkSelection,
+			onInputCapture: (event) => {
+				if (event.target instanceof HTMLTextAreaElement) findPeople(event.target);
+			},
+			ref: root
+		}, [props.user ? h(AvatarStack, {
+			"aria-hidden": "true",
+			people: [toPerson(props.user)],
+			size: "sm"
+		}) : null, h("div", { "data-slot": "comment-composer-box" }, [
+			h(PromptInput, {
+				"aria-label": labels[props.variant],
+				attachments: false,
+				modelValue: props.modelValue,
+				placeholder: props.placeholder ?? placeholders[props.variant],
+				submitLabel: sendLabels[props.variant],
+				onSubmit: submit,
+				"onUpdate:modelValue": (value) => emit("update:modelValue", value)
+			}),
+			menu.value ? h("ul", {
+				"aria-label": "People",
+				"data-slot": "comment-composer-mentions",
+				id: `${menuId}-list`,
+				role: "listbox"
+			}, menu.value.items.map((person, index) => h("li", {
+				"aria-selected": String(index === menu.value?.index),
+				"data-slot": "comment-composer-mention",
+				id: optionId(index),
+				key: person.id,
+				onMousedown: (event) => {
+					event.preventDefault();
+					choose(person);
+				},
+				role: "option"
+			}, displayName(person)))) : null,
+			props.error ? h("p", {
+				"data-slot": "comment-composer-error",
+				role: "alert"
+			}, props.error) : null
+		])]);
+	}
+});
+//#endregion
+//#region src/internal/comment-time.ts
+const units = [
+	["day", 864e5],
+	["hour", 36e5],
+	["minute", 6e4]
+];
+/** "5 minutes ago", "yesterday", or "now" for under a minute. */
+function timeAgo(at, now = Date.now()) {
+	const difference = at - now;
+	for (const [unit, size] of units) if (Math.abs(difference) >= size) return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(Math.round(difference / size), unit);
+	return "now";
+}
+//#endregion
+//#region src/components/comment-list.ts
+const commentsProp = { type: Object };
+const CommentFilters = defineComponent({
+	name: "CommentFilters",
+	props: { comments: commentsProp },
+	setup(props) {
+		const UButton = resolveComponent("UButton");
+		const comments = useCommentsContext(props.comments);
+		return () => {
+			const button = (key, label, count) => h(UButton, {
+				"aria-pressed": String(comments.filters[key]),
+				color: "neutral",
+				"data-slot": "comment-filter",
+				"data-state": comments.filters[key] ? "on" : "off",
+				key,
+				label: count === void 0 ? label : `${label} ${count}`,
+				onClick: () => comments.filters[key] = !comments.filters[key],
+				size: "xs",
+				variant: comments.filters[key] ? "soft" : "ghost"
+			});
+			return h("div", {
+				"aria-label": "Filter comments",
+				"data-slot": "comment-filters",
+				role: "group"
+			}, [
+				button("open", "Open", comments.counts.value.open),
+				button("resolved", "Resolved", comments.counts.value.resolved),
+				button("mine", "Mine")
+			]);
+		};
+	}
+});
+function preview(thread) {
+	const text = thread.anchor.kind === "text" ? thread.anchor.exact : "";
+	return thread.messages[0]?.body ?? text;
+}
+const CommentList = defineComponent({
+	name: "CommentList",
+	props: {
+		comments: commentsProp,
+		/** Goes to the page of a thread that is not on this page. Defaults to `location.assign`. */
+		navigate: { type: Function }
+	},
+	emits: ["select"],
+	setup(props, { emit }) {
+		const UButton = resolveComponent("UButton");
+		const comments = useCommentsContext(props.comments);
+		function select(thread, event) {
+			emit("select", thread);
+			if (event && (event.ctrlKey || event.metaKey || event.shiftKey || event.button !== 0)) return;
+			event?.preventDefault();
+			if (thread.subject.kind === comments.subject.value.kind && thread.subject.id === comments.subject.value.id) comments.open(thread, { scroll: true });
+			else if (comments.close()) (props.navigate ?? ((href) => window.location.assign(href)))(comments.link(thread));
+		}
+		return () => {
+			const scopeButton = (value, label) => h(UButton, {
+				"aria-pressed": String(comments.scope.value === value),
+				color: "neutral",
+				"data-slot": "comment-list-scope",
+				label,
+				onClick: () => comments.scope.value = value,
+				size: "xs",
+				variant: comments.scope.value === value ? "soft" : "ghost"
+			});
+			const rows = comments.listed.value;
+			return h("section", {
+				"aria-label": "Comments",
+				"data-comments-ui": "",
+				"data-slot": "comment-list"
+			}, [h("header", { "data-slot": "comment-list-header" }, [h("div", {
+				"data-slot": "comment-list-scopes",
+				role: "group",
+				"aria-label": "Scope"
+			}, [scopeButton("page", "This page"), scopeButton("site", "All pages")]), h(CommentFilters, { comments })]), rows.length === 0 ? h("p", {
+				"data-slot": "comment-list-empty",
+				role: "status"
+			}, comments.status.value === "loading" && comments.threads.value.length === 0 ? "Loading comments." : comments.status.value === "error" ? "The comments could not load." : "No comments here.") : h("ol", { "data-slot": "comment-list-items" }, rows.map((thread) => {
+				const detached = comments.positions.value.get(thread.id)?.detached === true;
+				const replies = thread.messages.length - 1;
+				const person = toPerson(thread.author);
+				return h("li", { key: thread.id }, [h("a", {
+					"aria-current": comments.openId.value === thread.id ? "true" : void 0,
+					"data-detached": detached ? "true" : void 0,
+					"data-slot": "comment-list-item",
+					"data-status": thread.status,
+					href: comments.link(thread),
+					onClick: (event) => select(thread, event)
+				}, [
+					h("span", { "data-slot": "comment-list-number" }, String(thread.n)),
+					h(AvatarStack, {
+						"aria-hidden": "true",
+						people: [person],
+						size: "sm"
+					}),
+					h("span", { "data-slot": "comment-list-body" }, [h("span", { "data-slot": "comment-list-text" }, preview(thread)), h("span", { "data-slot": "comment-list-meta" }, [
+						h("span", displayName(thread.author)),
+						h("span", timeAgo(thread.updatedAt)),
+						replies > 0 ? h("span", `${replies} ${replies === 1 ? "reply" : "replies"}`) : null,
+						thread.status === "resolved" ? h("span", "Resolved") : null,
+						detached ? h("span", { "data-slot": "comment-list-detached" }, "Detached") : null,
+						comments.scope.value === "site" && thread.subject.kind === "page" ? h("span", thread.subject.id) : null
+					])])
+				])]);
+			}))]);
+		};
+	}
+});
+const CommentToolbar = defineComponent({
+	name: "CommentToolbar",
+	props: {
+		comments: commentsProp,
+		/** The people on this page, from Realtime. Shown as a stack of avatars. */
+		people: {
+			default: () => [],
+			type: Array
+		}
+	},
+	setup(props, { slots }) {
+		const UButton = resolveComponent("UButton");
+		const comments = useCommentsContext(props.comments);
+		return () => {
+			const open = comments.pageThreads.value.length;
+			return h("div", {
+				"aria-label": "Comments",
+				"data-comments-ui": "",
+				"data-slot": "comment-toolbar",
+				role: "toolbar"
+			}, [
+				h(UButton, {
+					"aria-keyshortcuts": "C",
+					"aria-label": "Comment mode",
+					"aria-pressed": String(comments.active.value),
+					color: "neutral",
+					"data-slot": "comment-toolbar-mode",
+					icon: "i-ph-chat-circle",
+					onClick: comments.toggle,
+					size: "sm",
+					title: "Comment (C)",
+					variant: comments.active.value ? "solid" : "ghost"
+				}),
+				h(UButton, {
+					"aria-label": `Comment list, ${open} on this page`,
+					"aria-pressed": String(comments.listOpen.value),
+					color: "neutral",
+					"data-slot": "comment-toolbar-list",
+					icon: "i-ph-list-bullets",
+					label: String(open),
+					onClick: () => comments.listOpen.value = !comments.listOpen.value,
+					size: "sm",
+					variant: comments.listOpen.value ? "solid" : "ghost"
+				}),
+				h(UButton, {
+					"aria-label": "Comment on page",
+					color: "neutral",
+					"data-slot": "comment-toolbar-page",
+					icon: "i-ph-note-pencil",
+					onClick: () => {
+						comments.startDraft("page");
+					},
+					size: "sm",
+					title: "Comment on the whole page",
+					variant: "ghost"
+				}),
+				props.people.length > 0 ? h(AvatarStack, {
+					people: props.people,
+					size: "sm",
+					variant: "outline"
+				}) : null,
+				slots.default?.()
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/comment-pin.ts
+const CommentPin = defineComponent({
+	name: "CommentPin",
+	props: {
+		/** The thread number. A draft has none. */
+		n: { type: Number },
+		author: { type: Object },
+		status: {
+			default: "open",
+			type: String
+		},
+		/** A short piece of the comment. It is part of the label that a screen reader says. */
+		excerpt: { type: String },
+		/** The thread of this pin is open. */
+		active: {
+			default: false,
+			type: Boolean
+		},
+		/** The comment is still being written. */
+		draft: {
+			default: false,
+			type: Boolean
+		}
+	},
+	emits: [
+		"select",
+		"hover",
+		"leave"
+	],
+	setup(props, { emit }) {
+		const label = () => {
+			if (props.draft) return "New comment";
+			const by = props.author ? ` by ${displayName(props.author)}` : "";
+			const text = props.excerpt ? `: ${props.excerpt}` : "";
+			return `Comment ${props.n}${by}${text}${props.status === "resolved" ? ", resolved" : ""}`;
+		};
+		return () => h("button", {
+			"aria-expanded": props.draft ? void 0 : String(props.active),
+			"aria-label": label(),
+			"data-active": props.active ? "true" : void 0,
+			"data-draft": props.draft ? "true" : void 0,
+			"data-slot": "comment-pin",
+			"data-status": props.status,
+			onBlur: () => emit("leave"),
+			onClick: () => emit("select"),
+			onFocus: () => emit("hover"),
+			onPointerenter: () => emit("hover"),
+			onPointerleave: () => emit("leave"),
+			type: "button"
+		}, [props.author ? h(AvatarStack, {
+			"aria-hidden": "true",
+			people: [toPerson(props.author)],
+			size: "sm"
+		}) : null, props.draft || props.n === void 0 ? null : h("span", { "data-slot": "comment-pin-number" }, String(props.n))]);
+	}
+});
+//#endregion
+//#region src/components/comment-thread.ts
+function reason(error) {
+	return error instanceof Error ? error.message : "That did not work. Try again.";
+}
+const CommentReply = defineComponent({
+	name: "CommentReply",
+	props: {
+		message: {
+			required: true,
+			type: Object
+		},
+		/** The signed-in user may edit and delete this message. */
+		editable: {
+			default: false,
+			type: Boolean
+		},
+		/** The message, and its author, show in one line without actions. */
+		compact: {
+			default: false,
+			type: Boolean
+		},
+		/** Deleting asks first. Deleting the first message of a thread deletes the whole thread, so a thread sets it there. */
+		confirmDelete: {
+			default: false,
+			type: Boolean
+		},
+		/** People whose `@name` the message may hold, so an edit keeps their mentions. */
+		people: {
+			default: () => [],
+			type: Array
+		},
+		users: { type: Function },
+		/** Saves an edit. Gets `(messageId, body, mentions)`. */
+		onEdit: { type: Function },
+		/** Deletes the message. Gets `(messageId)`. */
+		onDelete: { type: Function }
+	},
+	setup(props) {
+		const UButton = resolveComponent("UButton");
+		const editing = ref(false);
+		const confirming = ref(false);
+		const busy = ref(false);
+		const error = ref();
+		const draft = ref("");
+		const mentions = ref([]);
+		async function run(task) {
+			if (busy.value) return false;
+			busy.value = true;
+			error.value = void 0;
+			try {
+				await task();
+				return true;
+			} catch (cause) {
+				error.value = reason(cause);
+				return false;
+			} finally {
+				busy.value = false;
+			}
+		}
+		function startEdit() {
+			draft.value = props.message.body;
+			mentions.value = [...props.message.mentions];
+			error.value = void 0;
+			editing.value = true;
+		}
+		async function save(submit) {
+			if (!props.onEdit) return;
+			const submitted = draft.value;
+			const submittedMentions = mentions.value;
+			const savedMentions = submit.body === props.message.body ? [.../* @__PURE__ */ new Set([...props.message.mentions, ...submit.mentions])] : submit.mentions;
+			if (await run(() => props.onEdit?.(props.message.id, submit.body, savedMentions)) && draft.value === submitted && mentions.value === submittedMentions) editing.value = false;
+		}
+		async function remove() {
+			if (!props.onDelete) return;
+			if (await run(() => props.onDelete?.(props.message.id))) confirming.value = false;
+		}
+		return () => {
+			const { message } = props;
+			return h("div", {
+				"data-compact": props.compact ? "true" : void 0,
+				"data-editing": editing.value ? "true" : void 0,
+				"data-slot": "comment-reply"
+			}, [
+				h(AvatarStack, {
+					"aria-hidden": "true",
+					people: [toPerson(message.author)],
+					size: "sm"
+				}),
+				h("div", { "data-slot": "comment-reply-content" }, [
+					h("div", { "data-slot": "comment-reply-header" }, [
+						h("span", { "data-slot": "comment-reply-author" }, displayName(message.author)),
+						message.actor ? h("span", { "data-slot": "comment-reply-actor" }, `via ${message.actor.name ?? message.actor.id}`) : null,
+						h("time", {
+							"data-slot": "comment-reply-time",
+							datetime: new Date(message.createdAt).toISOString(),
+							title: new Date(message.createdAt).toLocaleString()
+						}, timeAgo(message.createdAt)),
+						message.editedAt ? h("span", { "data-slot": "comment-reply-edited" }, "edited") : null
+					]),
+					editing.value ? h(CommentComposer, {
+						autofocus: true,
+						busy: busy.value,
+						error: error.value,
+						mentions: mentions.value,
+						modelValue: draft.value,
+						onCancel: () => {
+							if (!busy.value) editing.value = false;
+						},
+						onSubmit: save,
+						"onUpdate:mentions": (value) => mentions.value = value,
+						"onUpdate:modelValue": (value) => draft.value = value,
+						people: props.people,
+						users: props.users,
+						variant: "edit"
+					}) : h(Markdown, {
+						"data-slot": "comment-reply-body",
+						value: message.body
+					}),
+					confirming.value ? h("div", {
+						"aria-label": "Confirm delete",
+						"data-slot": "comment-reply-confirm",
+						role: "group"
+					}, [
+						h("p", "Delete this comment and every reply to it?"),
+						h(UButton, {
+							color: "error",
+							label: "Delete thread",
+							loading: busy.value,
+							onClick: remove,
+							size: "xs"
+						}),
+						h(UButton, {
+							color: "neutral",
+							label: "Cancel",
+							onClick: () => confirming.value = false,
+							size: "xs",
+							variant: "ghost"
+						})
+					]) : null,
+					!editing.value && error.value ? h("p", {
+						"data-slot": "comment-reply-error",
+						role: "alert"
+					}, error.value) : null
+				]),
+				props.editable && !editing.value && !confirming.value && !props.compact ? h("div", { "data-slot": "comment-reply-actions" }, [props.onEdit ? h(UButton, {
+					"aria-label": "Edit",
+					color: "neutral",
+					icon: "i-ph-pencil-simple-light",
+					onClick: startEdit,
+					size: "xs",
+					variant: "ghost"
+				}) : null, props.onDelete ? h(UButton, {
+					"aria-label": "Delete",
+					color: "neutral",
+					icon: "i-ph-trash-light",
+					onClick: () => props.confirmDelete ? confirming.value = true : void remove(),
+					size: "xs",
+					variant: "ghost"
+				}) : null]) : null
+			]);
+		};
+	}
+});
+const CommentThread = defineComponent({
+	name: "CommentThread",
+	props: {
+		thread: {
+			required: true,
+			type: Object
+		},
+		/** The signed-in user. Their messages can be edited and deleted. */
+		user: { type: Object },
+		/** A read-only card for hovering a pin. */
+		preview: {
+			default: false,
+			type: Boolean
+		},
+		/** Keep the full thread readable without reply, edit, delete, or status controls. */
+		readOnly: {
+			default: false,
+			type: Boolean
+		},
+		/** Show a reply as being sent, on top of the thread's own tracking. */
+		busy: {
+			default: false,
+			type: Boolean
+		},
+		/** An error to show, on top of the ones from the handlers. */
+		error: { type: String },
+		/** The thread is no longer on the page, so no pin shows where it was. */
+		detached: {
+			default: false,
+			type: Boolean
+		},
+		users: { type: Function },
+		/** Sends a reply. Gets `(body, mentions)`. */
+		onReply: { type: Function },
+		/** Saves an edited message. Gets `(messageId, body, mentions)`. */
+		onEdit: { type: Function },
+		/** Deletes a message. Gets `(messageId)`. Deleting the first message deletes the thread. */
+		onDelete: { type: Function },
+		onResolve: { type: Function },
+		onReopen: { type: Function }
+	},
+	emits: ["close"],
+	setup(props, { emit }) {
+		const UButton = resolveComponent("UButton");
+		const root = ref(null);
+		const reply = ref("");
+		const mentions = ref([]);
+		const sending = ref(false);
+		const failure = ref();
+		const composer = ref(null);
+		const people = computed(() => {
+			const seen = /* @__PURE__ */ new Map();
+			for (const person of [
+				props.thread.author,
+				...props.thread.messages.map((message) => message.author),
+				...props.user ? [props.user] : []
+			]) seen.set(person.id, person);
+			return [...seen.values()];
+		});
+		useDocumentPointerDown((event) => {
+			const path = pathOf(event);
+			if (props.preview || !root.value || path.includes(root.value)) return;
+			if (path.some((element) => element.matches("[data-slot='comment-pin']")) || consumedPointerEvents.has(event)) return;
+			consumedPointerEvents.add(event);
+			const where = root.value.getRootNode();
+			if (shakeDirtyComposers(where instanceof ShadowRoot ? where : document)) {
+				event.stopPropagation();
+				swallowNextClick();
+			} else emit("close");
+		});
+		async function send(submit) {
+			if (sending.value || !props.onReply) return;
+			sending.value = true;
+			failure.value = void 0;
+			const submitted = reply.value;
+			const submittedMentions = mentions.value;
+			try {
+				await props.onReply(submit.body, [...submit.mentions]);
+				if (reply.value === submitted && mentions.value === submittedMentions) {
+					reply.value = "";
+					mentions.value = [];
+				}
+				nextTick(() => composer.value?.focus());
+			} catch (cause) {
+				failure.value = reason(cause);
+			} finally {
+				sending.value = false;
+			}
+		}
+		async function act(task) {
+			if (root.value && shakeDirtyComposers(root.value)) return;
+			failure.value = void 0;
+			try {
+				await task?.();
+			} catch (cause) {
+				failure.value = reason(cause);
+			}
+		}
+		function close() {
+			if (root.value && shakeDirtyComposers(root.value)) return;
+			emit("close");
+		}
+		return () => {
+			const { thread } = props;
+			const resolved = thread.status === "resolved";
+			const first = thread.messages[0];
+			const quote = thread.anchor.kind === "text" ? thread.anchor.exact : void 0;
+			if (props.preview) {
+				const replies = thread.messages.length - 1;
+				return h("div", {
+					"data-slot": "comment-thread",
+					"data-preview": "true",
+					"data-status": thread.status
+				}, [first ? h(CommentReply, {
+					compact: true,
+					message: first
+				}) : null, replies > 0 ? h("p", { "data-slot": "comment-thread-count" }, `${replies} ${replies === 1 ? "reply" : "replies"}`) : null]);
+			}
+			return h("section", {
+				"aria-label": `Comment ${thread.n}`,
+				"data-slot": "comment-thread",
+				"data-status": thread.status,
+				ref: root,
+				role: "dialog",
+				tabindex: -1
+			}, [
+				h("header", { "data-slot": "comment-thread-header" }, [
+					h("span", { "data-slot": "comment-thread-title" }, `Comment ${thread.n}`),
+					h("span", { "data-slot": "comment-thread-spacer" }),
+					props.readOnly ? null : h(UButton, {
+						"aria-label": resolved ? "Reopen" : "Resolve",
+						color: "neutral",
+						icon: resolved ? "i-ph-arrow-counter-clockwise" : "i-ph-check",
+						onClick: () => void act(resolved ? props.onReopen : props.onResolve),
+						size: "xs",
+						variant: "ghost"
+					}),
+					h(UButton, {
+						"aria-label": "Close",
+						color: "neutral",
+						icon: "i-ph-x-light",
+						onClick: close,
+						size: "xs",
+						variant: "ghost"
+					})
+				]),
+				h("div", { "data-slot": "comment-thread-messages" }, [
+					quote ? h("blockquote", { "data-slot": "comment-thread-quote" }, quote) : null,
+					props.detached ? h("p", {
+						"data-slot": "comment-thread-detached",
+						role: "status"
+					}, "The place of this comment is no longer on the page.") : null,
+					...thread.messages.map((message, index) => h(CommentReply, {
+						confirmDelete: index === 0,
+						editable: !props.readOnly && message.author.id === props.user?.id,
+						key: message.id,
+						message,
+						onDelete: props.onDelete,
+						onEdit: props.onEdit,
+						people: people.value,
+						users: props.users
+					})),
+					resolved ? h(Marker, { variant: "separator" }, () => h(MarkerContent, () => `Resolved${thread.resolvedBy ? ` by ${displayName(thread.resolvedBy)}` : ""}`)) : null
+				]),
+				props.readOnly ? null : h(CommentComposer, {
+					autofocus: false,
+					busy: props.busy || sending.value,
+					error: failure.value ?? props.error,
+					guard: false,
+					mentions: mentions.value,
+					modelValue: reply.value,
+					onCancel: close,
+					onSubmit: send,
+					"onUpdate:mentions": (value) => mentions.value = value,
+					"onUpdate:modelValue": (value) => reply.value = value,
+					people: people.value,
+					ref: composer,
+					user: props.user,
+					users: props.users,
+					variant: "reply"
+				})
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/comment-layer.ts
+const popoverWidth = 360;
+const popoverHeight = 420;
+const clickSlop = 6;
+const CommentLayer = defineComponent({
+	name: "CommentLayer",
+	props: {
+		client: { type: Object },
+		/** What the threads of this page are about. For a page, `{ kind: "page", id: "/pricing" }`. */
+		subject: { type: Object },
+		/** The signed-in user. Defaults to the client's user. */
+		user: { type: Object },
+		/** A state from `useComments()`, instead of `client` and `subject`. */
+		comments: { type: Object },
+		/** The people on this page, shown in the toolbar. */
+		people: {
+			default: () => [],
+			type: Array
+		},
+		/** The key that toggles comment mode. `false` turns it off. */
+		hotkey: {
+			default: "c",
+			type: [String, Boolean]
+		},
+		/** Hide thread mutation controls when the viewer may only read. */
+		readOnly: {
+			default: false,
+			type: Boolean
+		},
+		/** The URL of the page that a subject lives on, for the links of threads that are not page threads. */
+		subjectUrl: { type: Function },
+		/** Navigates to the page of a thread from the list. Defaults to `location.assign`. */
+		navigate: { type: Function }
+	},
+	setup(props, { slots }) {
+		const { client, subject } = props;
+		if (!props.comments && (!client || !subject)) throw uiErrorDiagnostics.UI_R0002({ message: "CommentLayer needs a `client` and a `subject`, or the `comments` state from useComments()." });
+		const layer = ref(null);
+		const uiRoot = () => {
+			const node = layer.value?.getRootNode();
+			return node instanceof ShadowRoot ? node : document;
+		};
+		const state = props.comments ?? useComments({
+			client,
+			hotkey: props.hotkey,
+			subject: () => props.subject,
+			subjectUrl: props.subjectUrl,
+			uiRoot,
+			user: () => props.user
+		});
+		provideComments(state);
+		const user = computed(() => state.user.value);
+		const pinned = computed(() => {
+			const threads = [...state.pageThreads.value];
+			const opened = state.opened.value;
+			if (opened && opened.subject.kind === state.subject.value.kind && opened.subject.id === state.subject.value.id && !threads.includes(opened)) threads.push(opened);
+			return threads;
+		});
+		let down = null;
+		const press = (event) => {
+			down = consumedPointerEvents.has(event) || event.button !== 0 ? null : {
+				x: event.clientX,
+				y: event.clientY
+			};
+		};
+		const release = (event) => {
+			const start = down;
+			down = null;
+			if (!start || Math.hypot(event.clientX - start.x, event.clientY - start.y) > clickSlop) return;
+			event.preventDefault();
+			try {
+				state.startDraft({
+					x: event.clientX,
+					y: event.clientY
+				});
+			} catch {}
+		};
+		let returnTo = null;
+		let restoring = false;
+		watch(() => state.openId.value, (id, previous) => {
+			if (id) {
+				nextTick(() => layer.value?.querySelector("[data-slot='comment-thread']:not([data-preview])")?.focus());
+				return;
+			}
+			returnTo = null;
+			const active = uiRoot().activeElement;
+			const thread = layer.value?.querySelector("[data-slot='comment-thread']:not([data-preview])");
+			if (previous && (!active || active === document.body || thread?.contains(active))) returnTo = previous;
+		}, { flush: "pre" });
+		watch(() => state.openId.value, (id) => {
+			if (id || !returnTo) return;
+			const target = returnTo;
+			returnTo = null;
+			nextTick(() => {
+				const pins = layer.value?.querySelectorAll("[data-slot='comment-pin']") ?? [];
+				restoring = true;
+				([...pins].find((pin) => pin.getAttribute("data-thread-id") === target) ?? layer.value?.querySelector("[data-slot='comment-toolbar-mode']"))?.focus();
+				restoring = false;
+			});
+		}, { flush: "post" });
+		const side = (x, y) => ({
+			"data-flip-x": x + popoverWidth > window.innerWidth ? "true" : void 0,
+			"data-flip-y": y + popoverHeight > window.innerHeight ? "true" : void 0
+		});
+		const threadView = (thread) => h(CommentThread, {
+			key: thread.id,
+			detached: state.positions.value.get(thread.id)?.detached === true,
+			readOnly: props.readOnly,
+			onClose: () => state.close(),
+			onDelete: (messageId) => state.remove(thread.id, messageId),
+			onEdit: (messageId, body, mentions) => state.edit(thread.id, messageId, body, mentions),
+			onReopen: () => state.reopen(thread.id),
+			onReply: (body, mentions) => state.reply(thread.id, body, mentions),
+			onResolve: async () => {
+				await state.resolve(thread.id);
+				state.close();
+			},
+			thread,
+			user: user.value,
+			users: state.users
+		});
+		return () => {
+			const items = pinned.value.flatMap((thread) => {
+				const position = state.positions.value.get(thread.id);
+				if (!position || position.detached || position.clipped || thread.anchor.kind === "page") return [];
+				const open = state.openId.value === thread.id;
+				const hover = state.hoverId.value === thread.id && !open && !state.draft.value;
+				return [h("div", {
+					...side(position.x, position.y),
+					"data-slot": "comment-layer-item",
+					key: thread.id,
+					style: {
+						left: `${position.x}px`,
+						top: `${position.y}px`
+					}
+				}, [h(CommentPin, {
+					active: open,
+					author: thread.author,
+					"data-thread-id": thread.id,
+					excerpt: excerpt(thread.messages[0]?.body ?? ""),
+					n: thread.n,
+					onHover: () => {
+						if (!open && !restoring && !state.draft.value) state.hoverId.value = thread.id;
+					},
+					onLeave: () => {
+						if (state.hoverId.value === thread.id) state.hoverId.value = null;
+					},
+					onSelect: () => open ? state.close() : state.open(thread),
+					status: thread.status
+				}), hover ? h("div", {
+					"data-preview": "true",
+					"data-slot": "comment-layer-popover"
+				}, h(CommentThread, {
+					preview: true,
+					thread
+				})) : null])];
+			});
+			const opened = state.opened.value;
+			const openedPosition = opened && state.positions.value.get(opened.id);
+			const pointForThread = openedPosition && !openedPosition.detached && !openedPosition.clipped && opened?.anchor.kind !== "page" ? openedPosition : void 0;
+			const openThread = opened ? h("div", {
+				...pointForThread ? side(pointForThread.x, pointForThread.y) : {},
+				"data-slot": "comment-layer-item",
+				key: "opened-thread",
+				style: pointForThread ? {
+					left: `${pointForThread.x}px`,
+					top: `${pointForThread.y}px`
+				} : void 0
+			}, h("div", {
+				"data-floating": pointForThread ? void 0 : "true",
+				"data-slot": "comment-layer-popover"
+			}, threadView(opened))) : null;
+			const draft = state.draft.value;
+			const draftPosition = draft && state.positions.value.get("draft");
+			const point = draftPosition && !draftPosition.detached && draft?.anchor.kind !== "page" ? draftPosition : draft?.point;
+			const composing = draft && point ? h("div", {
+				...side(point.x, point.y),
+				"data-draft": "true",
+				"data-slot": "comment-layer-item",
+				style: {
+					left: `${point.x}px`,
+					top: `${point.y}px`
+				}
+			}, [h(CommentPin, {
+				author: user.value,
+				draft: true
+			}), h("div", { "data-slot": "comment-layer-popover" }, h(CommentComposer, {
+				busy: draft.busy,
+				error: draft.error,
+				mentions: draft.mentions,
+				modelValue: draft.body,
+				onCancel: () => state.cancelDraft(),
+				onSubmit: (submit) => {
+					draft.mentions = submit.mentions;
+					state.send();
+				},
+				"onUpdate:mentions": (value) => draft.mentions = value,
+				"onUpdate:modelValue": (value) => draft.body = value,
+				people: user.value ? [user.value] : [],
+				user: user.value,
+				users: state.users
+			}))]) : null;
+			return h("div", {
+				"data-active": state.active.value ? "true" : void 0,
+				"data-comments-ui": "",
+				"data-slot": "comment-layer",
+				ref: layer
+			}, [
+				state.active.value ? h("div", {
+					"data-slot": "comment-layer-overlay",
+					onPointercancel: () => down = null,
+					onPointerdown: press,
+					onPointerup: release
+				}) : null,
+				...items,
+				composing,
+				openThread,
+				slots.default?.({ comments: state }) ?? [h(CommentToolbar, {
+					comments: state,
+					people: props.people
+				}), state.listOpen.value ? h(CommentList, {
+					comments: state,
+					navigate: props.navigate
+				}) : null]
+			]);
+		};
+	}
+});
+//#endregion
+export { CommentFilters as a, CommentComposer as c, CommentPin as i, CommentReply as n, CommentList as o, CommentThread as r, CommentToolbar as s, CommentLayer as t };