@soubiran/ui 0.9.2 → 0.10.1

package/dist/index.js

@@ -1,4 +1,2717 @@
-/* empty css      */
-import useTableOfContents_default from "./composables/useTableOfContents.js";
-import useUmami from "./composables/useUmami.js";
-export { useTableOfContents_default as useTableOfContents, useUmami };
+import { prose } from "./wrapper-classes.js";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, readonly, ref, renderList, renderSlot, toDisplayString, toRef, toValue, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { buildLocaleContext } from "@nuxt/ui/utils/locale";
+import UAlert from "@nuxt/ui/components/Alert.vue";
+import { defineQueryOptions, useMutation, useQuery, useQueryCache } from "@pinia/colada";
+import { AnimatePresence, Motion, motion, useReducedMotion } from "motion-v";
+import { tv } from "tailwind-variants";
+import { FetchError, ofetch } from "ofetch";
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useToast } from "@nuxt/ui/composables/useToast";
+import UFormField from "@nuxt/ui/components/FormField.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UTextarea from "@nuxt/ui/components/Textarea.vue";
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UModal from "@nuxt/ui/components/Modal.vue";
+import { createSharedComposable, useTimeAgoIntl } from "@vueuse/core";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import UCard from "@nuxt/ui/components/Card.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
+import USeparator from "@nuxt/ui/components/Separator.vue";
+import PartySocket from "partysocket";
+//#region src/composables/comments/context.ts
+const commentsContextInjectionKey = Symbol("soubiran-ui.comments-context");
+function provideCommentsContext(context) {
+	provide(commentsContextInjectionKey, context);
+}
+function useCommentsContext() {
+	const context = inject(commentsContextInjectionKey);
+	if (!context) throw new Error("Comments components must be rendered inside <Comments>.");
+	return context;
+}
+//#endregion
+//#region src/composables/comments/useCommentsBanner.ts
+function useCommentsBanner() {
+	const banner = ref();
+	let timeout;
+	function dismiss() {
+		if (timeout !== void 0) {
+			clearTimeout(timeout);
+			timeout = void 0;
+		}
+		banner.value = void 0;
+	}
+	function show(nextBanner) {
+		dismiss();
+		banner.value = nextBanner;
+		timeout = setTimeout(() => {
+			banner.value = void 0;
+			timeout = void 0;
+		}, 4e3);
+	}
+	onScopeDispose(dismiss);
+	return {
+		banner: readonly(banner),
+		isActive: computed(() => banner.value !== void 0),
+		dismiss,
+		show
+	};
+}
+//#endregion
+//#region src/locale/en.ts
+var en_default = defineLocale({
+	name: "English",
+	code: "en",
+	dir: "ltr",
+	messages: {
+		Editor: {
+			placeholder: "Write something...",
+			write: { help: "You can use Markdown syntax to format the content." },
+			preview: {
+				loading: "Loading preview...",
+				placeholder: "No content to preview."
+			},
+			tabs: {
+				write: "Write",
+				preview: "Preview"
+			}
+		},
+		LoginRequired: {
+			text: "You need to be logged in to access this feature.",
+			action: "Log in",
+			errors: {
+				popupBlocked: "The login window was blocked. Allow popups and try again.",
+				popupClosed: "The login window was closed before authentication finished.",
+				refreshFailed: "You are logged in, but your session could not be refreshed. Please try again."
+			}
+		},
+		LoginCallback: {
+			success: "Login complete. You can close this window.",
+			error: "The login could not be completed. Close this window and try again."
+		},
+		ConfirmModal: { actions: {
+			cancel: "Cancel",
+			confirm: "Confirm"
+		} },
+		Feedback: { action: "Give feedback" },
+		FeedbackCard: {
+			placeholder: "Your feedback...",
+			action: "Send",
+			ratings: {
+				hate: "Hate it",
+				poor: "Not great",
+				okay: "It's ok",
+				love: "Love it"
+			},
+			success: {
+				received: "Your feedback has been received.",
+				thanks: "Thanks for your help!"
+			},
+			errors: {
+				notFound: "Page not found. Cannot send feedback. It's us, not you!",
+				unavailable: "Service is currently unavailable. Please try again later.",
+				unexpected: "An unexpected error occurred."
+			}
+		},
+		comments: {
+			Comment: {
+				actions: {
+					edit: "Edit",
+					delete: "Delete"
+				},
+				actionMenu: "Comment actions"
+			},
+			CommentDeleteConfirmModal: {
+				title: "Delete comment",
+				description: "Are you sure you want to delete this comment? This action cannot be undone."
+			},
+			CommentFormSection: { title: "Add a comment" },
+			CommentHeader: {
+				author: "Author",
+				publishedAt: "Published at"
+			},
+			CommentLike: { title: "Like this comment" },
+			CommentUnlike: { title: "Remove your like" },
+			CommentRepliesCount: {
+				replies: "{count} replies",
+				reply: "{count} reply"
+			},
+			CommentForm: { actions: {
+				add: "Comment",
+				reply: "Reply",
+				edit: "Edit",
+				cancel: "Cancel"
+			} },
+			errors: {
+				create: "An error occurred while adding the comment.",
+				update: "An error occurred while editing the comment.",
+				delete: "An error occurred while deleting the comment.",
+				like: "An error occurred while adding the like.",
+				unlike: "An error occurred while removing the like."
+			},
+			success: { delete: "The comment was deleted successfully." }
+		},
+		discussions: {
+			DiscussionReply: { reply: "Reply to this discussion..." },
+			DiscussionsSection: { empty: "No discussions yet." },
+			DiscussionsSectionTitle: { title: "Discussions" },
+			DiscussionsSectionSubtitle: {
+				comments: {
+					plural: "{count} comments",
+					singular: "{count} comment"
+				},
+				replies: {
+					plural: "{count} replies",
+					singular: "{count} reply"
+				}
+			}
+		},
+		state: {
+			empty: "No data to display.",
+			error: "An error occurred while loading the data.",
+			pending: "Loading data..."
+		}
+	}
+});
+//#endregion
+//#region src/composables/useLocale.ts
+const localeContextInjectionKey = Symbol.for("soubiran-ui.locale-context");
+function useLocale(localeOverrides) {
+	const locale = localeOverrides || inject(localeContextInjectionKey);
+	return buildLocaleContext(computed(() => locale?.value || en_default));
+}
+//#endregion
+//#region src/locale/fr.ts
+var fr_default = defineLocale({
+	name: "Français",
+	code: "fr",
+	dir: "ltr",
+	messages: {
+		Editor: {
+			placeholder: "Écrivez quelque chose...",
+			write: { help: "Vous pouvez utiliser la syntaxe Markdown pour formater le contenu." },
+			preview: {
+				loading: "Chargement de l’aperçu...",
+				placeholder: "Aucun contenu à prévisualiser."
+			},
+			tabs: {
+				write: "Écrire",
+				preview: "Aperçu"
+			}
+		},
+		LoginRequired: {
+			text: "Vous devez être connecté pour accéder à cette fonctionnalité.",
+			action: "Se connecter",
+			errors: {
+				popupBlocked: "La fenêtre de connexion a été bloquée. Autorisez les fenêtres contextuelles et réessayez.",
+				popupClosed: "La fenêtre de connexion a été fermée avant la fin de l’authentification.",
+				refreshFailed: "Vous êtes connecté, mais votre session n’a pas pu être actualisée. Veuillez réessayer."
+			}
+		},
+		LoginCallback: {
+			success: "Connexion terminée. Vous pouvez fermer cette fenêtre.",
+			error: "La connexion n’a pas pu être terminée. Fermez cette fenêtre et réessayez."
+		},
+		ConfirmModal: { actions: {
+			cancel: "Annuler",
+			confirm: "Confirmer"
+		} },
+		Feedback: { action: "Donner mon avis" },
+		FeedbackCard: {
+			placeholder: "Votre avis...",
+			action: "Envoyer",
+			ratings: {
+				hate: "Je déteste",
+				poor: "Pas terrible",
+				okay: "Ça va",
+				love: "J’adore"
+			},
+			success: {
+				received: "Votre avis a bien été reçu.",
+				thanks: "Merci pour votre aide !"
+			},
+			errors: {
+				notFound: "Page introuvable. Impossible d’envoyer votre avis.",
+				unavailable: "Le service est indisponible. Veuillez réessayer plus tard.",
+				unexpected: "Une erreur inattendue est survenue."
+			}
+		},
+		comments: {
+			Comment: {
+				actions: {
+					edit: "Modifier",
+					delete: "Supprimer"
+				},
+				actionMenu: "Actions du commentaire"
+			},
+			CommentDeleteConfirmModal: {
+				title: "Supprimer le commentaire",
+				description: "Êtes-vous sûr de vouloir supprimer ce commentaire ? Cette action ne peut pas être annulée."
+			},
+			CommentFormSection: { title: "Ajouter un commentaire" },
+			CommentHeader: {
+				author: "Auteur",
+				publishedAt: "Publié le"
+			},
+			CommentLike: { title: "Aimer ce commentaire" },
+			CommentUnlike: { title: "Retirer votre like" },
+			CommentRepliesCount: {
+				replies: "{count} réponses",
+				reply: "{count} réponse"
+			},
+			CommentForm: { actions: {
+				add: "Commenter",
+				reply: "Répondre",
+				edit: "Modifier",
+				cancel: "Annuler"
+			} },
+			errors: {
+				create: "Une erreur est survenue lors de l’ajout du commentaire.",
+				update: "Une erreur est survenue lors de la modification du commentaire.",
+				delete: "Une erreur est survenue lors de la suppression du commentaire.",
+				like: "Une erreur est survenue lors de l’ajout du like.",
+				unlike: "Une erreur est survenue lors de la suppression du like."
+			},
+			success: { delete: "Le commentaire a bien été supprimé." }
+		},
+		discussions: {
+			DiscussionReply: { reply: "Répondre à cette discussion..." },
+			DiscussionsSection: { empty: "Aucune discussion pour le moment." },
+			DiscussionsSectionTitle: { title: "Discussions" },
+			DiscussionsSectionSubtitle: {
+				comments: {
+					plural: "{count} commentaires",
+					singular: "{count} commentaire"
+				},
+				replies: {
+					plural: "{count} réponses",
+					singular: "{count} réponse"
+				}
+			}
+		},
+		state: {
+			empty: "Aucune donnée à afficher.",
+			error: "Une erreur est survenue lors du chargement des données.",
+			pending: "Chargement des données..."
+		}
+	}
+});
+//#endregion
+//#region src/utils/api.ts
+const api = ofetch.create({
+	baseURL: import.meta.env.VITE_API_URL,
+	headers: { Accept: "application/json" },
+	credentials: "include",
+	onRequest: [async ({ options }) => {
+		const method = options.method?.toUpperCase() || "GET";
+		if ([
+			"GET",
+			"HEAD",
+			"OPTIONS"
+		].includes(method)) return;
+		if (typeof document === "undefined") return;
+		if (!getCookie("XSRF-TOKEN")) await ofetch("/sanctum/csrf-cookie", {
+			baseURL: import.meta.env.VITE_API_URL,
+			credentials: "include"
+		});
+		options.headers.set("X-Xsrf-Token", decodeURIComponent(getCookie("XSRF-TOKEN") || ""));
+	}]
+});
+function getCookie(name) {
+	if (typeof document === "undefined") return null;
+	const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+	return match ? match[2] : null;
+}
+function isUnprocessableEntityError(error) {
+	return error instanceof FetchError && error.response?.status === 422;
+}
+//#endregion
+//#region src/api/comments.ts
+const localizedHeaders = (locale) => ({ "Accept-Language": locale });
+const getMarkdown = (content, locale) => api("/api/markdown", {
+	method: "POST",
+	body: { content },
+	headers: localizedHeaders(locale)
+});
+const getComments = (pageId, locale) => api(`/api/pages/${pageId}/comments`, { headers: localizedHeaders(locale) });
+const postComment = (pageId, content, locale, parentCommentId) => api(`/api/pages/${pageId}/comments`, {
+	method: "POST",
+	body: {
+		content,
+		parent_id: parentCommentId
+	},
+	headers: localizedHeaders(locale)
+});
+const putComment = (commentId, content, locale) => api(`/api/comments/${commentId}`, {
+	method: "PUT",
+	body: { content },
+	headers: localizedHeaders(locale)
+});
+const deleteComment = (commentId, locale) => api(`/api/comments/${commentId}`, {
+	method: "DELETE",
+	headers: localizedHeaders(locale)
+});
+const postCommentLike = (commentId, locale) => api(`/api/comments/${commentId}/likes`, {
+	method: "POST",
+	headers: localizedHeaders(locale)
+});
+const deleteCommentLike = (commentId, locale) => api(`/api/comments/${commentId}/likes`, {
+	method: "DELETE",
+	headers: localizedHeaders(locale)
+});
+//#endregion
+//#region src/keys/comments.ts
+const COMMENT_QUERY_KEYS = {
+	root: ["comments"],
+	byPageId: (pageId, locale) => [
+		"pages",
+		pageId,
+		locale,
+		...COMMENT_QUERY_KEYS.root
+	]
+};
+//#endregion
+//#region src/api/users.ts
+const getCurrentUser = () => api("/api/user");
+//#endregion
+//#region src/keys/user.ts
+const USER_QUERY_KEYS = { current: ["user"] };
+//#endregion
+//#region src/queries/users.ts
+const currentUserQuery = defineQueryOptions(() => ({
+	key: USER_QUERY_KEYS.current,
+	query: () => getCurrentUser().then((response) => response.data),
+	enabled: typeof window !== "undefined"
+}));
+//#endregion
+//#region src/utils/login.ts
+const LOGIN_CALLBACK_MESSAGE_TYPE = "soubiran:login-complete";
+const LOGIN_CALLBACK_NONCE_PARAM = "login_attempt";
+function buildLoginCallbackUrl(currentUrl, callbackPath, nonce) {
+	const callback = new URL(callbackPath, currentUrl);
+	callback.searchParams.set(LOGIN_CALLBACK_NONCE_PARAM, nonce);
+	return callback;
+}
+function isLoginCallbackMessage(data) {
+	if (!data || typeof data !== "object") return false;
+	const message = data;
+	return message.type === "soubiran:login-complete" && typeof message.nonce === "string";
+}
+//#endregion
+//#region src/composables/useLogin.ts
+const LOGIN_ERROR_MESSAGE_KEYS = {
+	"popup-blocked": "LoginRequired.errors.popupBlocked",
+	"popup-closed": "LoginRequired.errors.popupClosed",
+	"refresh-failed": "LoginRequired.errors.refreshFailed"
+};
+const DEFAULT_CALLBACK_PATH = "/auth/callback";
+const POPUP_WIDTH = 800;
+const POPUP_HEIGHT = 600;
+const LOGIN_POPUP_NAME = "soubiran-login";
+function getLoginErrorMessageKey(error) {
+	return LOGIN_ERROR_MESSAGE_KEYS[error];
+}
+function buildLoginLink(apiUrl, currentUrl, fragment) {
+	const redirect = new URL(currentUrl);
+	redirect.hash = "";
+	const login = new URL("/login", apiUrl);
+	login.searchParams.set("redirect", redirect.toString());
+	login.hash = fragment ?? "";
+	return login.toString();
+}
+function createNonce() {
+	return crypto.randomUUID();
+}
+function getPopupFeatures() {
+	const left = Math.max(0, window.screenX + (window.outerWidth - POPUP_WIDTH) / 2);
+	const top = Math.max(0, window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2);
+	return [
+		"popup=yes",
+		`width=${POPUP_WIDTH}`,
+		`height=${POPUP_HEIGHT}`,
+		`left=${Math.round(left)}`,
+		`top=${Math.round(top)}`
+	].join(",");
+}
+function useLogin(options = {}) {
+	const queryCache = useQueryCache();
+	const error = ref();
+	const isPending = ref(false);
+	let popup = null;
+	let closeTimer;
+	let removeMessageListener;
+	let resolveAttempt;
+	let activeAttempt;
+	function stopMonitoring() {
+		if (closeTimer) {
+			clearInterval(closeTimer);
+			closeTimer = void 0;
+		}
+		removeMessageListener?.();
+		removeMessageListener = void 0;
+		popup = null;
+	}
+	function cleanup(success) {
+		stopMonitoring();
+		isPending.value = false;
+		resolveAttempt?.(success);
+		resolveAttempt = void 0;
+		activeAttempt = void 0;
+	}
+	function openLoginWindow() {
+		if (typeof window === "undefined") return Promise.resolve(false);
+		if (popup && !popup.closed && activeAttempt) {
+			popup.focus();
+			return activeAttempt;
+		}
+		error.value = void 0;
+		isPending.value = true;
+		const nonce = createNonce();
+		const callback = buildLoginCallbackUrl(window.location.href, toValue(options.callbackPath) ?? DEFAULT_CALLBACK_PATH, nonce);
+		const loginUrl = buildLoginLink(import.meta.env.VITE_API_URL, callback.toString());
+		activeAttempt = new Promise((resolve) => {
+			resolveAttempt = resolve;
+		});
+		const onMessage = async (event) => {
+			if (event.origin !== callback.origin || event.source !== popup || !isLoginCallbackMessage(event.data) || event.data.type !== "soubiran:login-complete" || event.data.nonce !== nonce) return;
+			stopMonitoring();
+			try {
+				await queryCache.invalidateQueries({
+					key: USER_QUERY_KEYS.current,
+					exact: true
+				});
+				cleanup(true);
+			} catch {
+				error.value = "refresh-failed";
+				cleanup(false);
+			}
+		};
+		window.addEventListener("message", onMessage);
+		removeMessageListener = () => window.removeEventListener("message", onMessage);
+		popup = window.open(loginUrl, LOGIN_POPUP_NAME, getPopupFeatures());
+		if (!popup) {
+			error.value = "popup-blocked";
+			cleanup(false);
+			return Promise.resolve(false);
+		}
+		popup.focus();
+		closeTimer = setInterval(() => {
+			if (popup?.closed) {
+				error.value = "popup-closed";
+				cleanup(false);
+			}
+		}, 500);
+		return activeAttempt;
+	}
+	onBeforeUnmount(() => cleanup(false));
+	return {
+		error: computed(() => error.value),
+		isPending: computed(() => isPending.value),
+		openLoginWindow
+	};
+}
+//#endregion
+//#region src/components/LoginRequired.vue
+const loginRequired = tv({ slots: {
+	base: "flex flex-col gap-4 items-center",
+	prose: "text-sm",
+	actions: "flex flex-row items-center justify-center gap-2"
+} });
+const _sfc_main$35 = /* @__PURE__ */ defineComponent({
+	__name: "LoginRequired",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const toast = useToast();
+		const { error, isPending, openLoginWindow } = useLogin();
+		async function login() {
+			if (!await openLoginWindow() && error.value) toast.add({
+				color: "error",
+				description: t(getLoginErrorMessageKey(error.value))
+			});
+		}
+		const ui = computed(() => loginRequired());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("p", { class: normalizeClass(ui.value.prose({ class: props.ui?.prose })) }, toDisplayString(unref(t)("LoginRequired.text")), 3), createElementVNode("div", { class: normalizeClass(ui.value.actions({ class: props.ui?.actions })) }, [createVNode(UButton, {
+				color: "neutral",
+				variant: "solid",
+				label: unref(t)("LoginRequired.action"),
+				loading: unref(isPending),
+				disabled: unref(isPending),
+				onClick: login
+			}, null, 8, [
+				"label",
+				"loading",
+				"disabled"
+			])], 2)], 2);
+		};
+	}
+});
+//#endregion
+//#region ~icons/ph/info-duotone
+const _hoisted_1$21 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$12(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$21, [..._cache[0] || (_cache[0] = [createElementVNode("g", { fill: "currentColor" }, [createElementVNode("path", {
+		d: "M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96",
+		opacity: ".2"
+	}), createElementVNode("path", { d: "M144 176a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m88-48A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88m-92-32a12 12 0 1 0-12-12a12 12 0 0 0 12 12" })], -1)])]);
+}
+var info_duotone_default = markRaw({
+	name: "ph-info-duotone",
+	render: render$12
+});
+//#endregion
+//#region src/components/Editor.vue
+const _hoisted_1$20 = ["innerHTML"];
+const editor = tv({ slots: {
+	root: "overflow-hidden border border-muted rounded-md",
+	tabs: "mb-[-1px] ml-[-1px] mt-[-1px] bg-muted text-sm space-x-1",
+	tab: "relative border-x rounded-t-md px-4 py-2 text-sm text-dimmed data-[state=active]:border-t data-[state=active]:border-muted data-[state=inactive]:border-transparent data-[state=active]:bg-default data-[state=active]:text-default hover:text-default focus-visible:outline-2 focus-visible:outline-offset-[-6px] focus-visible:ring-inverted",
+	content: "data-[state=active]:p-2 flex flex-col gap-1 border-t border-muted bg-default",
+	preview: "",
+	prose: "w-full rounded-md p-2 text-sm"
+} });
+const _sfc_main$34 = /* @__PURE__ */ defineComponent({
+	__name: "Editor",
+	props: /* @__PURE__ */ mergeModels({
+		class: {},
+		textarea: {},
+		error: {},
+		ui: {}
+	}, {
+		"content": {
+			default: "",
+			required: true
+		},
+		"contentModifiers": {}
+	}),
+	emits: ["update:content"],
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const content = useModel(__props, "content");
+		const { code, t } = useLocale();
+		const { data: preview, isLoading: isPreviewLoading, refresh: refreshPreview } = useQuery({
+			enabled: false,
+			staleTime: 1e3 * 60 * 5,
+			key: () => [
+				"preview",
+				code.value,
+				content.value
+			],
+			query: async () => {
+				if (!content.value) return Promise.resolve(`<p>${t("Editor.preview.placeholder")}</p>`);
+				return getMarkdown(content.value, code.value === "fr" ? "fr" : "en").then((response) => response.data);
+			}
+		});
+		function onFetchPreview() {
+			refreshPreview();
+		}
+		function onUpdateModelValue(value) {
+			if (value === "write") setTimeout(() => {
+				focus();
+			}, 0);
+		}
+		const textarea = useTemplateRef("textarea");
+		function focus() {
+			nextTick(() => {
+				textarea.value?.textareaRef?.focus();
+			});
+		}
+		__expose({ focus });
+		const ui = computed(() => editor());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TabsRoot), {
+				"default-value": "write",
+				class: normalizeClass(ui.value.root({ class: [props.ui?.root, props.class] })),
+				"onUpdate:modelValue": onUpdateModelValue
+			}, {
+				default: withCtx(() => [
+					createVNode(unref(TabsList), { class: normalizeClass(ui.value.tabs({ class: props.ui?.tabs })) }, {
+						default: withCtx(() => [createVNode(unref(TabsTrigger), {
+							value: "write",
+							class: normalizeClass(ui.value.tab({ class: props.ui?.tab }))
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("Editor.tabs.write")), 1)]),
+							_: 1
+						}, 8, ["class"]), createVNode(unref(TabsTrigger), {
+							value: "preview",
+							class: normalizeClass(ui.value.tab({ class: props.ui?.tab })),
+							onMouseenter: onFetchPreview,
+							onFocus: onFetchPreview
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("Editor.tabs.preview")), 1)]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					}, 8, ["class"]),
+					createVNode(unref(TabsContent), {
+						value: "write",
+						class: normalizeClass(ui.value.content({ class: props.ui?.content })),
+						tabindex: "-1"
+					}, {
+						default: withCtx(() => [createVNode(UFormField, {
+							ui: { help: "flex items-center gap-1" },
+							error: props.error,
+							help: unref(t)("Editor.write.help")
+						}, {
+							help: withCtx(({ help }) => [createVNode(UIcon, {
+								name: unref(info_duotone_default),
+								class: "inline-block size-4"
+							}, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(help), 1)]),
+							default: withCtx(() => [createVNode(UTextarea, mergeProps({
+								ref_key: "textarea",
+								ref: textarea,
+								modelValue: content.value,
+								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => content.value = $event),
+								variant: "none",
+								ui: {
+									root: "flex",
+									base: "w-full resize-none"
+								},
+								rows: 4,
+								placeholder: unref(t)("Editor.placeholder")
+							}, props.textarea), null, 16, ["modelValue", "placeholder"])]),
+							_: 1
+						}, 8, ["error", "help"])]),
+						_: 1
+					}, 8, ["class"]),
+					createVNode(unref(TabsContent), {
+						value: "preview",
+						class: normalizeClass(ui.value.content({ class: props.ui?.content })),
+						tabindex: "-1"
+					}, {
+						default: withCtx(() => [unref(isPreviewLoading) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(ui.value.prose({ class: [unref(prose), props.ui?.prose] }))
+						}, [createElementVNode("p", null, toDisplayString(unref(t)("Editor.preview.loading")), 1)], 2)) : (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(ui.value.prose({ class: [unref(prose), props.ui?.prose] })),
+							innerHTML: unref(preview)
+						}, null, 10, _hoisted_1$20))]),
+						_: 1
+					}, 8, ["class"])
+				]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Form.vue
+const form = tv({ slots: {
+	base: "space-y-4",
+	wrapper: "space-y-4",
+	actions: "flex items-center justify-end gap-2"
+} });
+const _sfc_main$33 = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: {
+		class: {},
+		ui: {}
+	},
+	emits: ["submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		function onSubmit(event) {
+			emit("submit", event);
+		}
+		const ui = computed(() => form());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+				onSubmit: withModifiers(onSubmit, ["prevent"])
+			}, [createElementVNode("div", { class: normalizeClass(ui.value.wrapper({ class: props.ui?.wrapper })) }, [renderSlot(_ctx.$slots, "default")], 2), createElementVNode("div", { class: normalizeClass(ui.value.actions({ class: props.ui?.actions })) }, [renderSlot(_ctx.$slots, "actions")], 2)], 34);
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments/CommentForm.vue
+const commentForm = tv({ base: "space-y-2" });
+const _sfc_main$32 = /* @__PURE__ */ defineComponent({
+	__name: "CommentForm",
+	props: {
+		cancelable: { type: Boolean },
+		parentComment: {},
+		comment: {},
+		class: {}
+	},
+	emits: ["cancel", "success"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const formData = ref({ content: props.comment?.content || "" });
+		const { t } = useLocale();
+		const { locale, pageId } = useCommentsContext();
+		const contentError = ref();
+		const queryCache = useQueryCache();
+		const { mutate: createComment, isLoading: isCreateCommentLoading } = useMutation({
+			mutation: ({ pageId, content, locale, parentCommentId }) => postComment(pageId, content, locale, parentCommentId),
+			onError: (error) => {
+				if (isUnprocessableEntityError(error)) contentError.value = error.data.message;
+				else contentError.value = t("comments.errors.create");
+			},
+			onSuccess: () => {
+				clearFormData();
+				emits("success");
+			},
+			onSettled: () => {
+				queryCache.invalidateQueries({ key: COMMENT_QUERY_KEYS.byPageId(pageId.value, locale.value) });
+			}
+		});
+		const { mutate: updateComment, isLoading: isUpdateCommentLoading } = useMutation({
+			mutation: ({ commentId, content, locale }) => putComment(commentId, content, locale),
+			onError: (error) => {
+				if (isUnprocessableEntityError(error)) contentError.value = error.data.message;
+				else contentError.value = t("comments.errors.update");
+			},
+			onSuccess: () => {
+				clearFormData();
+				emits("success");
+			},
+			onSettled: () => {
+				queryCache.invalidateQueries({ key: COMMENT_QUERY_KEYS.byPageId(pageId.value, locale.value) });
+			}
+		});
+		const isLoading = computed(() => isCreateCommentLoading.value || isUpdateCommentLoading.value);
+		async function onSubmit() {
+			if (isLoading.value || !formData.value.content) return;
+			contentError.value = void 0;
+			if (props.comment) updateComment({
+				locale: locale.value,
+				commentId: props.comment.id,
+				content: formData.value.content
+			});
+			else createComment({
+				pageId: pageId.value,
+				locale: locale.value,
+				content: formData.value.content,
+				parentCommentId: props.parentComment?.id
+			});
+		}
+		function onEditorKeydown(event) {
+			if (event.key !== "Enter" || !event.ctrlKey && !event.metaKey) return;
+			event.preventDefault();
+			onSubmit();
+		}
+		function clearFormData() {
+			formData.value = { content: "" };
+		}
+		function onCancel() {
+			if (!isLoading.value) emits("cancel");
+		}
+		const editor = useTemplateRef("editor");
+		function focus() {
+			editor.value?.focus();
+		}
+		__expose({ focus });
+		const ui = computed(() => commentForm({ class: props.class }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$33, {
+				class: normalizeClass(ui.value),
+				onSubmit
+			}, {
+				actions: withCtx(() => [props.cancelable ? (openBlock(), createBlock(UButton, {
+					key: 0,
+					variant: "link",
+					label: unref(t)("comments.CommentForm.actions.cancel"),
+					disabled: isLoading.value,
+					onClick: onCancel
+				}, null, 8, ["label", "disabled"])) : createCommentVNode("v-if", true), createVNode(UButton, {
+					disabled: !formData.value.content,
+					loading: isLoading.value,
+					type: "submit",
+					label: props.comment ? unref(t)("comments.CommentForm.actions.edit") : props.parentComment ? unref(t)("comments.CommentForm.actions.reply") : unref(t)("comments.CommentForm.actions.add")
+				}, null, 8, [
+					"disabled",
+					"loading",
+					"label"
+				])]),
+				default: withCtx(() => [createVNode(_sfc_main$34, {
+					ref_key: "editor",
+					ref: editor,
+					content: formData.value.content,
+					"onUpdate:content": _cache[0] || (_cache[0] = ($event) => formData.value.content = $event),
+					error: contentError.value,
+					onKeydown: onEditorKeydown
+				}, null, 8, ["content", "error"])]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments/CommentFormSection.vue
+const commentFormSection = tv({ slots: {
+	base: "space-y-2",
+	header: "flex items-center gap-2",
+	title: "font-medium text-default"
+} });
+const _sfc_main$31 = /* @__PURE__ */ defineComponent({
+	__name: "CommentFormSection",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const { data: user } = useQuery(currentUserQuery);
+		const ui = computed(() => commentFormSection());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.header({ class: props.ui?.header })) }, [unref(user) ? (openBlock(), createBlock(UAvatar, {
+				key: 0,
+				src: unref(user).avatar,
+				title: unref(user).name
+			}, null, 8, ["src", "title"])) : createCommentVNode("v-if", true), createElementVNode("h3", { class: normalizeClass(ui.value.title({ class: props.ui?.title })) }, toDisplayString(unref(t)("comments.CommentFormSection.title")), 3)], 2), !unref(user) ? (openBlock(), createBlock(_sfc_main$35, { key: 0 })) : (openBlock(), createBlock(_sfc_main$32, { key: 1 }))], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/State/StateEmpty.vue
+const stateEmpty = tv({ slots: { base: "" } });
+const _sfc_main$30 = /* @__PURE__ */ defineComponent({
+	__name: "StateEmpty",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const ui = computed(() => stateEmpty());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, toDisplayString(unref(t)("state.empty")), 3);
+		};
+	}
+});
+//#endregion
+//#region src/components/State/StateError.vue
+const stateError = tv({ slots: { base: "" } });
+const _sfc_main$29 = /* @__PURE__ */ defineComponent({
+	__name: "StateError",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const ui = computed(() => stateError());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, toDisplayString(unref(t)("state.error")), 3);
+		};
+	}
+});
+//#endregion
+//#region src/components/State/StatePending.vue
+const statePending = tv({ slots: { base: "" } });
+const _sfc_main$28 = /* @__PURE__ */ defineComponent({
+	__name: "StatePending",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const ui = computed(() => statePending());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, toDisplayString(unref(t)("state.pending")), 3);
+		};
+	}
+});
+//#endregion
+//#region ~icons/ph/note-pencil-duotone
+const _hoisted_1$19 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$11(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$19, [..._cache[0] || (_cache[0] = [createElementVNode("g", { fill: "currentColor" }, [createElementVNode("path", {
+		d: "m200 88l-72 72H96v-32l72-72Z",
+		opacity: ".2"
+	}), createElementVNode("path", { d: "m229.66 58.34l-32-32a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 88 128v32a8 8 0 0 0 8 8h32a8 8 0 0 0 5.66-2.34l96-96a8 8 0 0 0 0-11.32M124.69 152H104v-20.69l64-64L188.69 88ZM200 76.69L179.31 56L192 43.31L212.69 64ZM224 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v160h160v-80a8 8 0 0 1 16 0" })], -1)])]);
+}
+var note_pencil_duotone_default = markRaw({
+	name: "ph-note-pencil-duotone",
+	render: render$11
+});
+//#endregion
+//#region ~icons/ph/trash-duotone
+const _hoisted_1$18 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$10(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$18, [..._cache[0] || (_cache[0] = [createElementVNode("g", { fill: "currentColor" }, [createElementVNode("path", {
+		d: "M200 56v152a8 8 0 0 1-8 8H64a8 8 0 0 1-8-8V56Z",
+		opacity: ".2"
+	}), createElementVNode("path", { d: "M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0" })], -1)])]);
+}
+var trash_duotone_default = markRaw({
+	name: "ph-trash-duotone",
+	render: render$10
+});
+//#endregion
+//#region src/components/ConfirmModal.vue
+const confirmModal = tv({ slots: { base: "" } });
+const _sfc_main$27 = /* @__PURE__ */ defineComponent({
+	__name: "ConfirmModal",
+	props: {
+		title: {},
+		description: {},
+		cancelLabel: {},
+		confirmLabel: {},
+		loading: { type: Boolean },
+		class: {},
+		ui: {}
+	},
+	emits: ["confirm", "close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useLocale();
+		function onClose() {
+			emit("close");
+		}
+		function onConfirm() {
+			emit("confirm");
+		}
+		const ui = computed(() => confirmModal());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(UModal, {
+				title: __props.title,
+				description: __props.description,
+				ui: {
+					content: "space-y-4",
+					footer: "justify-end"
+				},
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] }))
+			}, {
+				footer: withCtx(() => [createVNode(UButton, {
+					label: props.cancelLabel ?? unref(t)("ConfirmModal.actions.cancel"),
+					variant: "ghost",
+					color: "neutral",
+					onClick: onClose
+				}, null, 8, ["label"]), createVNode(UButton, {
+					label: props.confirmLabel ?? unref(t)("ConfirmModal.actions.confirm"),
+					variant: "solid",
+					color: "neutral",
+					loading: props.loading,
+					onClick: _cache[0] || (_cache[0] = ($event) => onConfirm())
+				}, null, 8, ["label", "loading"])]),
+				_: 1
+			}, 8, [
+				"title",
+				"description",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments/CommentDeleteConfirmModal.vue
+const commentDeleteConfirmModal = tv({ slots: { base: "" } });
+const _sfc_main$26 = /* @__PURE__ */ defineComponent({
+	__name: "CommentDeleteConfirmModal",
+	props: {
+		pageId: {},
+		commentId: {},
+		locale: {},
+		show: { type: Function },
+		class: {},
+		ui: {}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useLocale();
+		const queryCache = useQueryCache();
+		const { mutate, isLoading } = useMutation({
+			mutation: ({ commentId, locale }) => deleteComment(commentId, locale),
+			onSuccess: () => {
+				props.show({
+					kind: "success",
+					message: t("comments.success.delete")
+				});
+			},
+			onError: () => {
+				props.show({
+					kind: "error",
+					message: t("comments.errors.delete")
+				});
+			},
+			onSettled: async () => {
+				await queryCache.invalidateQueries({ key: COMMENT_QUERY_KEYS.byPageId(props.pageId, props.locale) });
+				emit("close");
+			}
+		});
+		function onClose() {
+			emit("close");
+		}
+		function onConfirm() {
+			mutate({
+				commentId: props.commentId,
+				locale: props.locale
+			});
+		}
+		const ui = computed(() => commentDeleteConfirmModal());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$27, {
+				title: unref(t)("comments.CommentDeleteConfirmModal.title"),
+				description: unref(t)("comments.CommentDeleteConfirmModal.description"),
+				loading: unref(isLoading),
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+				onClose,
+				onConfirm
+			}, null, 8, [
+				"title",
+				"description",
+				"loading",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/comments/useComments.ts
+function useComments() {
+	const overlay = useOverlay();
+	const { banner } = useCommentsContext();
+	function confirmDeleteComment(pageId, commentId, locale) {
+		overlay.create(_sfc_main$26, {
+			destroyOnClose: true,
+			props: {
+				pageId,
+				commentId,
+				locale,
+				show: banner.show
+			}
+		}).open();
+	}
+	return {
+		confirmDeleteComment,
+		show: banner.show
+	};
+}
+//#endregion
+//#region src/components/Comments/CommentContent.vue
+const _hoisted_1$17 = ["innerHTML"];
+const commentContent = tv({ base: "" });
+const _sfc_main$25 = /* @__PURE__ */ defineComponent({
+	__name: "CommentContent",
+	props: /* @__PURE__ */ mergeModels({
+		parentComment: {},
+		comment: {},
+		class: {}
+	}, {
+		"viewEditor": { type: Boolean },
+		"viewEditorModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["success"], ["update:viewEditor"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const editor = ref(null);
+		const viewEditor = useModel(__props, "viewEditor");
+		watch(viewEditor, (value) => {
+			if (value) nextTick(() => {
+				editor.value?.focus();
+			});
+		});
+		function onSuccess() {
+			emit("success");
+			viewEditor.value = false;
+		}
+		const ui = computed(() => commentContent({ class: props.class }));
+		return (_ctx, _cache) => {
+			return viewEditor.value ? (openBlock(), createBlock(_sfc_main$32, {
+				key: 0,
+				ref_key: "editor",
+				ref: editor,
+				cancelable: "",
+				comment: __props.comment,
+				"parent-comment": __props.parentComment,
+				class: normalizeClass(ui.value),
+				onSuccess,
+				onCancel: _cache[0] || (_cache[0] = ($event) => viewEditor.value = false)
+			}, null, 8, [
+				"comment",
+				"parent-comment",
+				"class"
+			])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(["text-sm", unref(prose)]),
+				innerHTML: __props.comment.content_html
+			}, null, 10, _hoisted_1$17));
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments/CommentHeader.vue
+const _hoisted_1$16 = { class: "sr-only" };
+const _hoisted_2$1 = { class: "sr-only" };
+const _hoisted_3 = ["datetime"];
+const commentHeader = tv({ slots: {
+	root: "flex flex-col items-start text-sm",
+	wrapper: "flex items-center gap-2",
+	username: "text-default font-semibold tracking-wide",
+	time: "text-dimmed",
+	link: "text-xs"
+} });
+const _sfc_main$24 = /* @__PURE__ */ defineComponent({
+	__name: "CommentHeader",
+	props: {
+		comment: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { code, t } = useLocale();
+		const englishTimeAgo = useTimeAgoIntl(() => props.comment.created_at, { locale: "en" });
+		const frenchTimeAgo = useTimeAgoIntl(() => props.comment.created_at, { locale: "fr" });
+		const timeAgo = computed(() => code.value === "fr" ? frenchTimeAgo.value : englishTimeAgo.value);
+		const ui = computed(() => commentHeader());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.root({ class: [props.ui?.root, props.class] })) }, [createElementVNode("dl", { class: normalizeClass(ui.value.wrapper({ class: props.ui?.wrapper })) }, [
+				createElementVNode("dt", _hoisted_1$16, toDisplayString(unref(t)("comments.CommentHeader.author")), 1),
+				createElementVNode("dd", { class: normalizeClass(ui.value.username({ class: props.ui?.username })) }, toDisplayString(props.comment.user.name), 3),
+				createElementVNode("dt", _hoisted_2$1, toDisplayString(unref(t)("comments.CommentHeader.publishedAt")), 1),
+				createElementVNode("dd", { class: normalizeClass(ui.value.time({ class: props.ui?.time })) }, [createElementVNode("time", { datetime: new Date(props.comment.created_at).toISOString() }, toDisplayString(timeAgo.value), 9, _hoisted_3)], 2)
+			], 2)], 2);
+		};
+	}
+});
+//#endregion
+//#region ~icons/ph/heart-duotone
+const _hoisted_1$15 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$9(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$15, [..._cache[0] || (_cache[0] = [createElementVNode("g", { fill: "currentColor" }, [createElementVNode("path", {
+		d: "M232 102c0 66-104 122-104 122S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32c8.06-19.69 27.41-32 50-32a54 54 0 0 1 54 54",
+		opacity: ".2"
+	}), createElementVNode("path", { d: "M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.66 108.21 129a8 8 0 0 0 7.58 0C136.21 228.66 240 172 240 102a62.07 62.07 0 0 0-62-62m-50 174.8c-18.26-10.64-96-59.11-96-112.8a46.06 46.06 0 0 1 46-46c19.45 0 35.78 10.36 42.6 27a8 8 0 0 0 14.8 0c6.82-16.67 23.15-27 42.6-27a46.06 46.06 0 0 1 46 46c0 53.61-77.76 102.15-96 112.8" })], -1)])]);
+}
+var heart_duotone_default = markRaw({
+	name: "ph-heart-duotone",
+	render: render$9
+});
+//#endregion
+//#region ~icons/ph/heart-fill
+const _hoisted_1$14 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$8(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$14, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M240 102c0 70-103.79 126.66-108.21 129a8 8 0 0 1-7.58 0C119.79 228.66 16 172 16 102a62.07 62.07 0 0 1 62-62c20.65 0 38.73 8.88 50 23.89C139.27 48.88 157.35 40 178 40a62.07 62.07 0 0 1 62 62"
+	}, null, -1)])]);
+}
+var heart_fill_default = markRaw({
+	name: "ph-heart-fill",
+	render: render$8
+});
+//#endregion
+//#region src/components/Comments/CommentLike.vue
+const commentLike = tv({ slots: { base: "" } });
+function isToggleCommentLikeContext(context) {
+	return typeof context === "object" && context !== null && "oldComments" in context && "newComments" in context;
+}
+function getCachedComment(comments, commentId, parentCommentId) {
+	if (parentCommentId === void 0) return comments.find((comment) => comment.id === commentId);
+	return comments.find((comment) => comment.id === parentCommentId)?.replies?.find((comment) => comment.id === commentId);
+}
+function replaceCachedComment(comments, commentId, nextComment, parentCommentId) {
+	const replace = (comment) => {
+		if (comment.id !== commentId) return comment;
+		return nextComment;
+	};
+	if (parentCommentId === void 0) return comments.map(replace);
+	return comments.map((comment) => {
+		if (comment.id !== parentCommentId || !comment.replies) return comment;
+		const replies = comment.replies.map(replace);
+		return replies.every((reply, index) => reply === comment.replies?.[index]) ? comment : {
+			...comment,
+			replies
+		};
+	});
+}
+const _sfc_main$23 = /* @__PURE__ */ defineComponent({
+	__name: "CommentLike",
+	props: {
+		parentComment: {},
+		comment: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const toast = useToast();
+		const queryCache = useQueryCache();
+		const { banner, locale, pageId } = useCommentsContext();
+		const { error: loginError, openLoginWindow } = useLogin();
+		const { data: user } = useQuery(currentUserQuery);
+		const { mutate: toggleLike } = useMutation({
+			onMutate(variables) {
+				const key = COMMENT_QUERY_KEYS.byPageId(variables.pageId, variables.locale);
+				const oldComments = queryCache.getQueryData(key);
+				const oldComment = getCachedComment(oldComments, variables.commentId, variables.parentCommentId);
+				const newComment = {
+					...oldComment,
+					likes: Math.max(0, oldComment.likes + (variables.shouldLike ? 1 : -1)),
+					can: {
+						...oldComment.can,
+						like: !variables.shouldLike,
+						unlike: variables.shouldLike
+					}
+				};
+				const newComments = replaceCachedComment(oldComments, variables.commentId, newComment, variables.parentCommentId);
+				queryCache.setQueryData(key, newComments);
+				queryCache.cancelQueries({
+					key,
+					exact: true
+				});
+				return {
+					oldComments,
+					newComments
+				};
+			},
+			mutation: (variables) => variables.shouldLike ? postCommentLike(variables.commentId, variables.locale) : deleteCommentLike(variables.commentId, variables.locale),
+			onError(_error, variables, context) {
+				const key = COMMENT_QUERY_KEYS.byPageId(variables.pageId, variables.locale);
+				if (isToggleCommentLikeContext(context) && context.newComments === queryCache.getQueryData(key)) queryCache.setQueryData(key, context.oldComments);
+				banner.show({
+					kind: "error",
+					message: t(variables.shouldLike ? "comments.errors.like" : "comments.errors.unlike")
+				});
+			},
+			onSettled(_data, _error, variables) {
+				queryCache.invalidateQueries({
+					key: COMMENT_QUERY_KEYS.byPageId(variables.pageId, variables.locale),
+					exact: true
+				});
+			}
+		});
+		async function onClick() {
+			if (!user.value) {
+				if (!await openLoginWindow() && loginError.value) toast.add({
+					color: "error",
+					description: t(getLoginErrorMessageKey(loginError.value))
+				});
+				return;
+			}
+			if (!props.comment.can.like && !props.comment.can.unlike) return;
+			toggleLike({
+				pageId: pageId.value,
+				locale: locale.value,
+				commentId: props.comment.id,
+				parentCommentId: props.parentComment?.id,
+				shouldLike: props.comment.can.like
+			});
+		}
+		const ui = computed(() => commentLike());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(UButton, {
+				variant: "link",
+				color: "neutral",
+				title: unref(t)(props.comment.can.unlike ? "comments.CommentUnlike.title" : "comments.CommentLike.title"),
+				label: props.comment.likes.toString(),
+				icon: props.comment.can.unlike ? unref(heart_fill_default) : unref(heart_duotone_default),
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+				onClick
+			}, null, 8, [
+				"title",
+				"label",
+				"icon",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments/CommentRepliesCount.vue
+const commentRepliesCount = tv({ base: "text-xs text-dimmed" });
+const _sfc_main$22 = /* @__PURE__ */ defineComponent({
+	__name: "CommentRepliesCount",
+	props: {
+		comment: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const replies = computed(() => {
+			if (props.comment.replies && props.comment.replies?.length > 1) return t("comments.CommentRepliesCount.replies", { count: props.comment.replies.length });
+			return t("comments.CommentRepliesCount.reply", { count: props.comment.replies?.length ?? 0 });
+		});
+		const ui = computed(() => commentRepliesCount({ class: props.class }));
+		return (_ctx, _cache) => {
+			return props.comment.replies?.length ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(ui.value)
+			}, toDisplayString(replies.value), 3)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments/Comment.vue
+const _hoisted_1$13 = ["id"];
+const comment = tv({
+	slots: {
+		base: "comment relative before:content-['']",
+		wrapper: "flex items-start justify-between",
+		header: "flex items-center gap-2",
+		headerAvatar: "",
+		contentWrapper: "",
+		contentFooter: "flex items-center justify-between",
+		like: "-mx-3 -my-1.5"
+	},
+	variants: { isReply: {
+		true: {
+			base: "space-y-2 px-4 pb-2 pt-4 before:absolute before:bottom-0 before:left-[calc((var(--avatar-size)/2)-1px+1rem)] before:top-0 before:w-[2px] before:bg-border",
+			headerAvatar: "size-[var(--avatar-size)]",
+			contentWrapper: "ml-[calc(var(--avatar-size)+0.5rem)] space-y-2"
+		},
+		false: {
+			base: "p-4 space-y-4",
+			contentWrapper: "space-y-4"
+		}
+	} }
+});
+const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+	__name: "Comment",
+	props: {
+		parentComment: {},
+		comment: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const { pageId, locale } = useCommentsContext();
+		const { confirmDeleteComment } = useComments();
+		const { data: user } = useQuery(currentUserQuery);
+		const viewEditCommentEditor = ref(false);
+		function onCommentEdited() {
+			viewEditCommentEditor.value = false;
+		}
+		const showActions = computed(() => user.value && (props.comment.can.update || props.comment.can.delete));
+		const actions = computed(() => {
+			const items = [];
+			if (props.comment.can.update) items.push({
+				icon: note_pencil_duotone_default,
+				label: t("comments.Comment.actions.edit"),
+				onSelect: () => {
+					viewEditCommentEditor.value = true;
+				}
+			});
+			if (props.comment.can.delete) items.push({
+				icon: trash_duotone_default,
+				label: t("comments.Comment.actions.delete"),
+				onSelect: () => confirmDeleteComment(pageId.value, props.comment.id, locale.value)
+			});
+			return items;
+		});
+		const ui = computed(() => comment({ isReply: !!props.parentComment }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("article", {
+				id: props.comment.html_id,
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+				style: { "--avatar-size": "1.875rem" }
+			}, [createElementVNode("div", { class: normalizeClass(ui.value.wrapper({ class: props.ui?.wrapper })) }, [createElementVNode("div", { class: normalizeClass(ui.value.header({ class: props.ui?.header })) }, [createVNode(UAvatar, {
+				src: props.comment.user.avatar,
+				alt: props.comment.user.name,
+				size: props.parentComment ? "sm" : "md",
+				class: normalizeClass(["z-1", ui.value.headerAvatar({ class: props.ui?.headerAvatar })])
+			}, null, 8, [
+				"src",
+				"alt",
+				"size",
+				"class"
+			]), createVNode(_sfc_main$24, { comment: props.comment }, null, 8, ["comment"])], 2), showActions.value ? (openBlock(), createBlock(UDropdownMenu, {
+				key: 0,
+				items: actions.value,
+				content: { align: "end" }
+			}, {
+				default: withCtx(() => [createVNode(UButton, {
+					icon: "i-ph-dots-three-bold",
+					variant: "link",
+					"aria-label": unref(t)("comments.Comment.actionMenu")
+				}, null, 8, ["aria-label"])]),
+				_: 1
+			}, 8, ["items"])) : createCommentVNode("v-if", true)], 2), createElementVNode("div", { class: normalizeClass(ui.value.contentWrapper({ class: props.ui?.contentWrapper })) }, [createVNode(_sfc_main$25, {
+				"view-editor": viewEditCommentEditor.value,
+				"onUpdate:viewEditor": _cache[0] || (_cache[0] = ($event) => viewEditCommentEditor.value = $event),
+				"parent-comment": props.parentComment,
+				comment: props.comment,
+				onSuccess: onCommentEdited
+			}, null, 8, [
+				"view-editor",
+				"parent-comment",
+				"comment"
+			]), createElementVNode("div", { class: normalizeClass(ui.value.contentFooter({ class: props.ui?.contentFooter })) }, [props.comment.can.like || props.comment.can.unlike ? (openBlock(), createBlock(_sfc_main$23, {
+				key: 0,
+				"parent-comment": props.parentComment,
+				comment: props.comment,
+				class: normalizeClass(ui.value.like({ class: props.ui?.like }))
+			}, null, 8, [
+				"parent-comment",
+				"comment",
+				"class"
+			])) : createCommentVNode("v-if", true), !props.parentComment && props.comment.replies?.length ? (openBlock(), createBlock(_sfc_main$22, {
+				key: 1,
+				comment: props.comment
+			}, null, 8, ["comment"])) : createCommentVNode("v-if", true)], 2)], 2)], 10, _hoisted_1$13);
+		};
+	}
+});
+//#endregion
+//#region src/components/Discussions/DiscussionReply.vue
+const discussionReply = tv({ slots: { button: "justify-start text-muted" } });
+const _sfc_main$20 = /* @__PURE__ */ defineComponent({
+	__name: "DiscussionReply",
+	props: {
+		parentComment: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const toast = useToast();
+		const { data: user } = useQuery(currentUserQuery);
+		const { error: loginError, openLoginWindow } = useLogin();
+		const form = useTemplateRef("form");
+		const isFormShown = ref(false);
+		async function showForm() {
+			if (!user.value) {
+				if (!await openLoginWindow() && loginError.value) toast.add({
+					color: "error",
+					description: t(getLoginErrorMessageKey(loginError.value))
+				});
+				return;
+			}
+			isFormShown.value = true;
+			nextTick(() => form.value?.focus());
+		}
+		function hideForm() {
+			isFormShown.value = false;
+		}
+		function onSuccess() {
+			isFormShown.value = false;
+		}
+		const ui = computed(() => discussionReply());
+		return (_ctx, _cache) => {
+			return isFormShown.value ? (openBlock(), createBlock(_sfc_main$32, {
+				key: 0,
+				ref_key: "form",
+				ref: form,
+				cancelable: "",
+				"parent-comment": props.parentComment,
+				onSuccess,
+				onCancel: hideForm
+			}, null, 8, ["parent-comment"])) : (openBlock(), createBlock(UButton, {
+				key: 1,
+				color: "neutral",
+				variant: "link",
+				block: "",
+				class: normalizeClass(ui.value.button({ class: props.ui?.button })),
+				onClick: showForm
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("discussions.DiscussionReply.reply")), 1)]),
+				_: 1
+			}, 8, ["class"]));
+		};
+	}
+});
+//#endregion
+//#region src/components/Discussions/Discussion.vue
+const discussion = tv({ slots: {
+	base: "overflow-hidden border border-muted rounded-md",
+	answers: "bg-muted",
+	reply: "p-2"
+} });
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+	__name: "Discussion",
+	props: {
+		comment: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => discussion());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.class, props.ui?.base] })) }, [
+				createVNode(_sfc_main$21, { comment: __props.comment }, null, 8, ["comment"]),
+				__props.comment.replies?.length ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(ui.value.answers({ class: props.ui?.answers }))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.comment.replies, (reply) => {
+					return openBlock(), createBlock(_sfc_main$21, {
+						key: reply.id,
+						"parent-comment": __props.comment,
+						comment: reply
+					}, null, 8, ["parent-comment", "comment"]);
+				}), 128))], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(ui.value.reply({ class: props.ui?.reply })) }, [createVNode(_sfc_main$20, { "parent-comment": __props.comment }, null, 8, ["parent-comment"])], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Discussions/DiscussionsList.vue
+const discussionsList = tv({ slots: {
+	base: "space-y-8",
+	discussion: ""
+} });
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+	__name: "DiscussionsList",
+	props: {
+		comments: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => discussionsList());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.class, props.ui?.base] })) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.comments, (comment) => {
+				return openBlock(), createBlock(_sfc_main$19, {
+					key: comment.id,
+					comment,
+					class: normalizeClass(ui.value.discussion({ class: props.ui?.discussion }))
+				}, null, 8, ["comment", "class"]);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Subtitle.vue
+const subtitle = tv({ base: "text-sm text-dimmed" });
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+	__name: "Subtitle",
+	props: {
+		text: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => subtitle({ class: props.class }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value) }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(props.text), 1)])], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Discussions/DiscussionsSectionSubtitle.vue
+const discussionsSectionSubtitle = tv({ base: "" });
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+	__name: "DiscussionsSectionSubtitle",
+	props: {
+		comments: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const commentsSubtitle = computed(() => {
+			const count = props.comments.length;
+			if (count !== 1) return t("discussions.DiscussionsSectionSubtitle.comments.plural", { count });
+			return t("discussions.DiscussionsSectionSubtitle.comments.singular", { count });
+		});
+		const repliesSubtitle = computed(() => {
+			const count = props.comments.reduce((acc, comment) => acc + (comment.replies?.length ?? 0), 0);
+			if (count !== 1) return t("discussions.DiscussionsSectionSubtitle.replies.plural", { count });
+			return t("discussions.DiscussionsSectionSubtitle.replies.singular", { count });
+		});
+		const ui = computed(() => discussionsSectionSubtitle({ class: props.class }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$17, { class: normalizeClass(ui.value) }, {
+				default: withCtx(() => [createTextVNode(toDisplayString(commentsSubtitle.value) + " · " + toDisplayString(repliesSubtitle.value), 1)]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Section/SectionTitle.vue
+const sectionTitle = tv({ slots: { base: "text-lg font-semibold text-default" } });
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+	__name: "SectionTitle",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => sectionTitle());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("h2", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Discussions/DiscussionsSectionTitle.vue
+const discussionsSectionTitle = tv({ slots: { base: "" } });
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+	__name: "DiscussionsSectionTitle",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const ui = computed(() => discussionsSectionTitle());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$15, { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("discussions.DiscussionsSectionTitle.title")), 1)]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Discussions/DiscussionsSection.vue
+const _hoisted_1$12 = { id: "comments" };
+const _hoisted_2 = {
+	key: 0,
+	class: "mt-6"
+};
+const discussionsSection = tv({ slots: {
+	base: "",
+	alert: "",
+	header: "mb-6",
+	content: "mt-6"
+} });
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+	__name: "DiscussionsSection",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const reducedMotion = useReducedMotion();
+		const { pageId, locale, banner: bannerController } = useCommentsContext();
+		const { banner, isActive, dismiss } = bannerController;
+		const { data: comments, error: commentsError, isPending: isCommentsPending } = useQuery({
+			key: COMMENT_QUERY_KEYS.byPageId(pageId.value, locale.value),
+			query: () => getComments(pageId.value, locale.value).then((response) => response.data),
+			enabled: typeof window !== "undefined"
+		});
+		const ui = computed(() => discussionsSection());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", _hoisted_1$12, [createElementVNode("div", { class: normalizeClass(ui.value.base({ class: [props.class, props.ui?.base] })) }, [
+				createElementVNode("div", { class: normalizeClass(ui.value.header({ class: props.ui?.header })) }, [createVNode(_sfc_main$14), createVNode(_sfc_main$16, { comments: unref(comments) ?? [] }, null, 8, ["comments"])], 2),
+				createVNode(unref(AnimatePresence), null, {
+					default: withCtx(() => [unref(banner) && unref(isActive) ? (openBlock(), createBlock(unref(Motion), {
+						key: 0,
+						initial: unref(reducedMotion) ? false : {
+							height: 0,
+							opacity: 0
+						},
+						animate: {
+							height: "auto",
+							opacity: 1,
+							transition: {
+								duration: unref(reducedMotion) ? 0 : .2,
+								ease: "easeOut"
+							}
+						},
+						exit: unref(reducedMotion) ? void 0 : {
+							height: 0,
+							opacity: 0
+						}
+					}, {
+						default: withCtx(() => [createVNode(UAlert, {
+							title: unref(banner).message,
+							class: normalizeClass(ui.value.alert({ class: props.ui?.alert })),
+							color: unref(banner).kind === "error" ? "error" : "success",
+							variant: "subtle",
+							close: "",
+							role: unref(banner).kind === "error" ? "alert" : "status",
+							"onUpdate:open": unref(dismiss)
+						}, null, 8, [
+							"title",
+							"class",
+							"color",
+							"role",
+							"onUpdate:open"
+						])]),
+						_: 1
+					}, 8, [
+						"initial",
+						"animate",
+						"exit"
+					])) : createCommentVNode("v-if", true)]),
+					_: 1
+				}),
+				createCommentVNode("\n        Spacer to preserve layout during the Alert height animation.\n        Adding margin to the Alert breaks the smooth transition because\n        the animated element collapses abruptly. We render an empty\n        div with `mt-6` while the Alert is active to keep the animation smooth.\n      "),
+				unref(banner) && unref(isActive) ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("v-if", true),
+				unref(isCommentsPending) ? (openBlock(), createBlock(_sfc_main$28, { key: 1 })) : unref(commentsError) ? (openBlock(), createBlock(_sfc_main$29, { key: 2 })) : !(unref(comments) ?? []).length ? (openBlock(), createBlock(_sfc_main$30, {
+					key: 3,
+					text: unref(t)("discussions.DiscussionsSection.empty")
+				}, null, 8, ["text"])) : (openBlock(), createBlock(_sfc_main$18, {
+					key: 4,
+					comments: unref(comments) ?? []
+				}, null, 8, ["comments"])),
+				createVNode(_sfc_main$31, { class: "mt-12" })
+			], 2)]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Comments.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "Comments",
+	props: {
+		pageId: {},
+		locale: { default: "en" },
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		provide(localeContextInjectionKey, computed(() => extendLocale(props.locale === "fr" ? fr_default : en_default, { messages: {} })));
+		const banner = useCommentsBanner();
+		provideCommentsContext({
+			pageId: toRef(() => props.pageId),
+			locale: toRef(() => props.locale),
+			banner
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$13, {
+				class: normalizeClass(props.class),
+				ui: props.ui
+			}, null, 8, ["class", "ui"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Container.vue
+const container = tv({ slots: {
+	base: "px-4 sm:px-6 lg:px-8",
+	inner: "w-full max-w-7xl mx-auto"
+} });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "Container",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => container());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.inner({ class: props.ui?.inner })) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
+		};
+	}
+});
+//#endregion
+//#region ~icons/ph/thumbs-up
+const _hoisted_1$11 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$7(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$11, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M234 80.12A24 24 0 0 0 216 72h-56V56a40 40 0 0 0-40-40a8 8 0 0 0-7.16 4.42L75.06 96H32a16 16 0 0 0-16 16v88a16 16 0 0 0 16 16h172a24 24 0 0 0 23.82-21l12-96A24 24 0 0 0 234 80.12M32 112h40v88H32Zm191.94-15l-12 96a8 8 0 0 1-7.94 7H88v-94.11l36.71-73.43A24 24 0 0 1 144 56v24a8 8 0 0 0 8 8h64a8 8 0 0 1 7.94 9"
+	}, null, -1)])]);
+}
+var thumbs_up_default = markRaw({
+	name: "ph-thumbs-up",
+	render: render$7
+});
+//#endregion
+//#region src/composables/useUmami.ts
+function useUmami() {
+	function track(event, data) {
+		if (typeof window === "undefined") return;
+		window.umami?.track(event, {
+			...data,
+			page_path: window.location.pathname
+		});
+	}
+	return { track };
+}
+//#endregion
+//#region ~icons/ph/check-circle
+const _hoisted_1$10 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$6(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$10, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+	}, null, -1)])]);
+}
+var check_circle_default = markRaw({
+	name: "ph-check-circle",
+	render: render$6
+});
+//#endregion
+//#region src/api/feedback.ts
+function postFeedback(pageId, rating, content) {
+	return api(`/api/pages/${pageId}/feedback`, {
+		method: "POST",
+		body: {
+			rating,
+			content
+		}
+	});
+}
+//#endregion
+//#region src/components/Feedback/FeedbackCard.vue
+const _hoisted_1$9 = ["for"];
+const feedbackCard = tv({ slots: {
+	base: "relative w-64",
+	successfullySentOverlay: "absolute z-10 inset-0 bg-default",
+	successfullySentContent: "absolute z-20 inset-0 flex flex-col justify-center items-center text-muted text-xs",
+	successfullySentIcon: "size-5",
+	input: "w-full",
+	radioGroup: "flex flex-row gap-2 text-lg",
+	radioGroupItem: "peer",
+	radioGroupLabel: "grayscale-100 hover:grayscale-0 peer-data-[state=checked]:grayscale-0"
+} });
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+	__name: "FeedbackCard",
+	props: /* @__PURE__ */ mergeModels({
+		id: {},
+		class: {},
+		ui: {}
+	}, {
+		"content": { required: true },
+		"contentModifiers": {},
+		"rating": { required: true },
+		"ratingModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["success"], ["update:content", "update:rating"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const content = useModel(__props, "content");
+		const rating = useModel(__props, "rating");
+		const ratings = [
+			{
+				label: "😭",
+				value: "Hate it",
+				title: "FeedbackCard.ratings.hate"
+			},
+			{
+				label: "🙁",
+				value: "Not great",
+				title: "FeedbackCard.ratings.poor"
+			},
+			{
+				label: "🙂",
+				value: "It's ok",
+				title: "FeedbackCard.ratings.okay"
+			},
+			{
+				label: "🤩",
+				value: "Love it",
+				title: "FeedbackCard.ratings.love"
+			}
+		];
+		const successfullySent = ref(false);
+		const { t } = useLocale();
+		const { track } = useUmami();
+		const { mutate, isLoading, error } = useMutation({
+			mutation: ({ rating, content }) => postFeedback(props.id, rating, content),
+			onSuccess: () => {
+				successfullySent.value = true;
+				track("feedback_submit");
+				setTimeout(emits, 200, "success");
+			}
+		});
+		function sendFeedback() {
+			mutate({
+				rating: rating.value,
+				content: content.value
+			});
+		}
+		const formattedError = computed(() => {
+			if (!error.value) return void 0;
+			if (error.value.data?.errors) return error.value.data.errors.content?.[0] || error.value.data.errors.rating?.[0];
+			if (error.value.status === 404) return t("FeedbackCard.errors.notFound");
+			if (error.value.status === 503) return t("FeedbackCard.errors.unavailable");
+			return t("FeedbackCard.errors.unexpected");
+		});
+		const ui = computed(() => feedbackCard());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(UCard, {
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+				ui: {
+					body: "p-2 sm:p-2",
+					footer: "p-2 sm:p-2 flex items-center justify-between"
+				}
+			}, {
+				footer: withCtx(() => [createVNode(unref(RadioGroupRoot), {
+					modelValue: rating.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => rating.value = $event),
+					class: normalizeClass(ui.value.radioGroup({ class: props.ui?.radioGroup }))
+				}, {
+					default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(ratings, (item) => {
+						return createElementVNode("div", { key: item.value }, [createVNode(unref(RadioGroupItem), {
+							id: item.value,
+							value: item.value,
+							class: normalizeClass(ui.value.radioGroupItem({ class: props.ui?.radioGroupItem }))
+						}, {
+							default: withCtx(() => [createVNode(unref(RadioGroupIndicator))]),
+							_: 1
+						}, 8, [
+							"id",
+							"value",
+							"class"
+						]), createVNode(UTooltip, { text: unref(t)(item.title) }, {
+							default: withCtx(() => [createElementVNode("label", {
+								for: item.value,
+								class: normalizeClass(ui.value.radioGroupLabel({ class: props.ui?.radioGroupLabel }))
+							}, toDisplayString(item.label), 11, _hoisted_1$9)]),
+							_: 2
+						}, 1032, ["text"])]);
+					}), 64))]),
+					_: 1
+				}, 8, ["modelValue", "class"]), createVNode(UButton, {
+					size: "sm",
+					label: unref(t)("FeedbackCard.action"),
+					loading: unref(isLoading),
+					onClick: sendFeedback
+				}, null, 8, ["label", "loading"])]),
+				default: withCtx(() => [successfullySent.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(motion).div, {
+					initial: { opacity: 0 },
+					animate: {
+						opacity: 1,
+						transition: { duration: .2 }
+					},
+					class: normalizeClass(ui.value.successfullySentOverlay({ class: props.ui?.successfullySentOverlay }))
+				}, null, 8, ["class"]), createElementVNode("div", { class: normalizeClass(ui.value.successfullySentContent({ class: props.ui?.successfullySentContent })) }, [
+					createVNode(unref(motion).div, {
+						initial: {
+							opacity: 0,
+							transform: "translateY(4px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateY(0)",
+							transition: {
+								delay: .1,
+								duration: .3
+							}
+						}
+					}, {
+						default: withCtx(() => [createVNode(UIcon, {
+							name: unref(check_circle_default),
+							class: normalizeClass(ui.value.successfullySentIcon({ class: props.ui?.successfullySentIcon }))
+						}, null, 8, ["name", "class"])]),
+						_: 1
+					}),
+					createVNode(unref(motion).p, {
+						initial: {
+							opacity: 0,
+							transform: "translateY(4px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateY(0)",
+							transition: {
+								delay: .2,
+								duration: .3
+							}
+						},
+						class: "mt-3"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("FeedbackCard.success.received")), 1)]),
+						_: 1
+					}),
+					createVNode(unref(motion).p, {
+						initial: {
+							opacity: 0,
+							transform: "translateY(4px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateY(0)",
+							transition: {
+								delay: .3,
+								duration: .3
+							}
+						},
+						class: "mt-1"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("FeedbackCard.success.thanks")), 1)]),
+						_: 1
+					})
+				], 2)], 64)) : createCommentVNode("v-if", true), createVNode(UFormField, { error: formattedError.value }, {
+					error: withCtx(({ error: formFieldError }) => [formFieldError ? (openBlock(), createBlock(unref(motion).div, {
+						key: 0,
+						initial: { height: 0 },
+						animate: { height: "auto" },
+						class: "text-sm"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(formFieldError), 1)]),
+						_: 2
+					}, 1024)) : createCommentVNode("v-if", true)]),
+					default: withCtx(() => [createVNode(UTextarea, {
+						modelValue: content.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => content.value = $event),
+						placeholder: unref(t)("FeedbackCard.placeholder"),
+						variant: "soft",
+						class: normalizeClass(ui.value.input({ class: props.ui?.input }))
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"class"
+					])]),
+					_: 1
+				}, 8, ["error"])]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Feedback/Feedback.vue
+const feedback = tv({ slots: { base: "px-0 py-1 text-dimmed text-sm" } });
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	__name: "Feedback",
+	props: {
+		id: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const { track } = useUmami();
+		function onClick() {
+			track("feedback_click");
+		}
+		const content = ref("");
+		const rating = ref("");
+		function onSuccess() {
+			content.value = "";
+			rating.value = "";
+		}
+		const ui = computed(() => feedback());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(UPopover, { ui: { content: "ring-0 data-[state=open]:animate-[scale-up_100ms_ease-out]" } }, {
+				content: withCtx(() => [createVNode(_sfc_main$3, {
+					id: props.id,
+					rating: rating.value,
+					"onUpdate:rating": _cache[0] || (_cache[0] = ($event) => rating.value = $event),
+					content: content.value,
+					"onUpdate:content": _cache[1] || (_cache[1] = ($event) => content.value = $event),
+					onSuccess
+				}, null, 8, [
+					"id",
+					"rating",
+					"content"
+				])]),
+				default: withCtx(() => [createVNode(UButton, {
+					variant: "link",
+					color: "neutral",
+					label: unref(t)("Feedback.action"),
+					size: "sm",
+					icon: unref(thumbs_up_default),
+					class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+					onClick
+				}, null, 8, [
+					"label",
+					"icon",
+					"class"
+				])]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+//#region ~icons/simple-icons/discord
+const _hoisted_1$8 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$5(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0a13 13 0 0 0-.617-1.25a.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.08.08 0 0 0 .084-.028a14 14 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13 13 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10 10 0 0 0 .372-.292a.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01q.181.149.373.292a.077.077 0 0 1-.006.127a12.3 12.3 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028a19.8 19.8 0 0 0 6.002-3.03a.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418"
+	}, null, -1)])]);
+}
+var discord_default = markRaw({
+	name: "simple-icons-discord",
+	render: render$5
+});
+//#endregion
+//#region ~icons/simple-icons/github
+const _hoisted_1$7 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$4(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+	}, null, -1)])]);
+}
+var github_default = markRaw({
+	name: "simple-icons-github",
+	render: render$4
+});
+//#endregion
+//#region ~icons/simple-icons/linkedin
+const _hoisted_1$6 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$3(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"
+	}, null, -1)])]);
+}
+var linkedin_default = markRaw({
+	name: "simple-icons-linkedin",
+	render: render$3
+});
+//#endregion
+//#region ~icons/simple-icons/twitch
+const _hoisted_1$5 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$2(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"
+	}, null, -1)])]);
+}
+var twitch_default = markRaw({
+	name: "simple-icons-twitch",
+	render: render$2
+});
+//#endregion
+//#region ~icons/simple-icons/x
+const _hoisted_1$4 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z"
+	}, null, -1)])]);
+}
+var x_default = markRaw({
+	name: "simple-icons-x",
+	render: render$1
+});
+//#endregion
+//#region src/components/Header.vue
+const header = tv({ slots: {
+	base: "h-(--ui-header-height) flex flex-row gap-4 items-center justify-end",
+	link: "p-0 text-dimmed"
+} });
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+	__name: "Header",
+	props: {
+		links: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { track } = useUmami();
+		function trackClick(label) {
+			track("header_click", { label });
+		}
+		const ui = computed(() => header());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$1, { ui: { inner: "max-w-5xl" } }, {
+				default: withCtx(() => [createElementVNode("header", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(props.links, (link) => {
+						return openBlock(), createBlock(UTooltip, {
+							key: link.label,
+							text: link.label
+						}, {
+							default: withCtx(() => [createVNode(UButton, {
+								variant: "link",
+								color: "neutral",
+								to: link.to,
+								href: link.href,
+								"aria-label": link.label,
+								icon: link.icon,
+								target: link.target,
+								rel: link.rel,
+								class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+								onClick: ($event) => trackClick(link.label)
+							}, null, 8, [
+								"to",
+								"href",
+								"aria-label",
+								"icon",
+								"target",
+								"rel",
+								"class",
+								"onClick"
+							])]),
+							_: 2
+						}, 1032, ["text"]);
+					}), 128)),
+					createVNode(USeparator, {
+						orientation: "vertical",
+						class: "h-5"
+					}),
+					createVNode(UTooltip, { text: "LinkedIn" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://www.linkedin.com/in/esteban25/",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "LinkedIn",
+							icon: unref(linkedin_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[0] || (_cache[0] = ($event) => trackClick("LinkedIn"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "X" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://x.com/soubiran_",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "X",
+							icon: unref(x_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[1] || (_cache[1] = ($event) => trackClick("X"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "Twitch" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://www.twitch.tv/barbapapazes",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "Twitch",
+							icon: unref(twitch_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[2] || (_cache[2] = ($event) => trackClick("Twitch"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "GitHub" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://github.com/barbapapazes",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "GitHub",
+							icon: unref(github_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[3] || (_cache[3] = ($event) => trackClick("GitHub"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "Discord" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://discord.gg/q2ghCGUuFR",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "Discord",
+							icon: unref(discord_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[4] || (_cache[4] = ($event) => trackClick("Discord"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					})
+				], 2)]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+//#region src/components/LoginCallback.vue
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+	__name: "LoginCallback",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const status = ref("pending");
+		onMounted(() => {
+			const nonce = new URL(window.location.href).searchParams.get(LOGIN_CALLBACK_NONCE_PARAM);
+			if (!nonce || !window.opener || window.opener.closed) {
+				status.value = "error";
+				return;
+			}
+			try {
+				window.opener.postMessage({
+					type: LOGIN_CALLBACK_MESSAGE_TYPE,
+					nonce
+				}, window.location.origin);
+				status.value = "success";
+				window.close();
+			} catch {
+				status.value = "error";
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(props.class) }, [status.value === "error" ? renderSlot(_ctx.$slots, "error", {
+				key: 0,
+				message: unref(t)("LoginCallback.error")
+			}, () => [createElementVNode("p", null, toDisplayString(unref(t)("LoginCallback.error")), 1)]) : renderSlot(_ctx.$slots, "success", {
+				key: 1,
+				message: unref(t)("LoginCallback.success")
+			}, () => [createElementVNode("p", null, toDisplayString(unref(t)("LoginCallback.success")), 1)])], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Page/Page.vue
+const page = tv({ slots: {
+	base: "py-12",
+	header: "max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px]",
+	headerInner: "xl:col-start-2",
+	content: "mt-6 max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px] xl:mx-auto",
+	contentInner: "xl:col-start-2",
+	right: "hidden xl:block xl:col-start-3 xl:pl-8 xl:h-full",
+	rightInner: "sticky top-4"
+} });
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+	__name: "Page",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => page());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createVNode(_sfc_main$1, null, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(ui.value.header({ class: props.ui?.header })) }, [createElementVNode("div", { class: normalizeClass(ui.value.headerInner({ class: props.ui?.headerInner })) }, [renderSlot(_ctx.$slots, "header")], 2)], 2), createElementVNode("div", { class: normalizeClass(ui.value.content({ class: props.ui?.content })) }, [createElementVNode("div", { class: normalizeClass(ui.value.contentInner({ class: props.ui?.contentInner })) }, [renderSlot(_ctx.$slots, "default")], 2), createElementVNode("div", { class: normalizeClass(ui.value.right({ class: props.ui?.right })) }, [createElementVNode("div", { class: normalizeClass(ui.value.rightInner({ class: props.ui?.rightInner })) }, [renderSlot(_ctx.$slots, "right")], 2)], 2)], 2)]),
+				_: 3
+			}), renderSlot(_ctx.$slots, "bottom")], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Page/PageTitle.vue
+const pageTitle = tv({ slots: { base: "text-xl font-bold text-highlighted" } });
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+	__name: "PageTitle",
+	props: {
+		title: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => pageTitle());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("h1", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, toDisplayString(__props.title), 3);
+		};
+	}
+});
+//#endregion
+//#region src/components/Page/PageHeader.vue
+const pageHeader = tv({ slots: { base: "" } });
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+	__name: "PageHeader",
+	props: {
+		title: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => pageHeader());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createVNode(_sfc_main$8, { title: props.title }, null, 8, ["title"]), renderSlot(_ctx.$slots, "after")], 2);
+		};
+	}
+});
+//#endregion
+//#region ~icons/simple-icons/youtube
+const _hoisted_1$3 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"
+	}, null, -1)])]);
+}
+var youtube_default = markRaw({
+	name: "simple-icons-youtube",
+	render
+});
+//#endregion
+//#region src/components/Socials.vue
+const socials = tv({ slots: {
+	base: "flex flex-wrap gap-2",
+	link: "flex items-center gap-1",
+	icon: "size-4"
+} });
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+	__name: "Socials",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => socials());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [
+				createElementVNode("a", {
+					href: "https://www.linkedin.com/in/esteban25/",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(linkedin_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[0] || (_cache[0] = createElementVNode("span", null, "LinkedIn", -1))], 2),
+				createElementVNode("a", {
+					href: "https://x.com/soubiran_",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(x_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[1] || (_cache[1] = createElementVNode("span", null, "X (Twitter)", -1))], 2),
+				createElementVNode("a", {
+					href: "https://github.com/barbapapazes",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(github_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[2] || (_cache[2] = createElementVNode("span", null, "GitHub", -1))], 2),
+				createElementVNode("a", {
+					href: "https://www.twitch.tv/barbapapazes",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(twitch_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[3] || (_cache[3] = createElementVNode("span", null, "Twitch", -1))], 2),
+				createElementVNode("a", {
+					href: "https://www.youtube.com/@barbapapazes",
+					target: "_blank",
+					rel: "noopener noreferrer",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(youtube_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[4] || (_cache[4] = createElementVNode("span", null, "YouTube", -1))], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/Sponsors.vue
+const _hoisted_1$2 = {
+	href: "https://soubiran.dev/sponsorship?utm_source=infra.soubiran.dev&utm_medium=link",
+	target: "_blank"
+};
+const sponsors = tv({ slots: {
+	base: "not-prose",
+	img: "border-0"
+} });
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+	__name: "Sponsors",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => sponsors());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("a", _hoisted_1$2, [createElementVNode("img", {
+				src: "https://raw.githubusercontent.com/Barbapapazes/static/refs/heads/main/sponsors.svg",
+				alt: "Sponsors",
+				class: normalizeClass(ui.value.img({ class: props.ui?.img }))
+			}, null, 2)])], 2);
+		};
+	}
+});
+//#endregion
+//#region src/composables/useTableOfContents.ts
+function _useTableOfContents() {
+	const activeHeadings = ref([]);
+	function setActive(id) {
+		activeHeadings.value.push(id);
+	}
+	function unsetActive(id) {
+		activeHeadings.value = activeHeadings.value.filter((h) => h !== id);
+	}
+	return {
+		setActive,
+		unsetActive,
+		activeHeadings: readonly(activeHeadings)
+	};
+}
+var useTableOfContents_default = createSharedComposable(_useTableOfContents);
+//#endregion
+//#region src/components/TableOfContents.vue
+const _hoisted_1$1 = [
+	"href",
+	"data-active",
+	"onClick"
+];
+const tableOfContents = tv({ slots: {
+	base: "space-y-1 text-sm text-dimmed font-medium",
+	title: "",
+	list: "font-sofia",
+	link: "flex gap-1 px-0 py-1 text-dimmed hover:text-default active:text-default transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted data-active:text-default rounded-md"
+} });
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+	__name: "TableOfContents",
+	props: {
+		toc: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { track } = useUmami();
+		function trackClick(text, hash) {
+			track("table_of_contents_click", {
+				toc_text: text,
+				toc_hash: hash
+			});
+		}
+		const { activeHeadings } = useTableOfContents_default();
+		const ui = computed(() => tableOfContents());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.title({ class: props.ui?.title })) }, " Table of Contents ", 2), createElementVNode("ul", { class: normalizeClass(ui.value.list({ class: props.ui?.list })) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.toc, (item, index) => {
+				return openBlock(), createElementBlock("li", { key: item.anchor || index }, [createCommentVNode(" Cannot use RouterLink as the anchor will be prefixed with the route path. "), item.anchor ? (openBlock(), createElementBlock("a", {
+					key: 0,
+					custom: "",
+					variant: "link",
+					color: "neutral",
+					href: `#${item.anchor}`,
+					"data-active": unref(activeHeadings).includes(item.anchor || "") ? true : void 0,
+					class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+					onClick: ($event) => trackClick(item.text, item.anchor)
+				}, [createElementVNode("span", null, toDisplayString(index + 1) + ".", 1), createTextVNode(" " + toDisplayString(item.text), 1)], 10, _hoisted_1$1)) : createCommentVNode("v-if", true)]);
+			}), 128))], 2)], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/ViewersCounter.vue
+const _hoisted_1 = ["title"];
+const viewersCounter = tv({ slots: {
+	base: "flex items-center justify-center gap-[0.375rem] border border-green-400 rounded-full px-[0.375rem] py-[0.125rem] text-xs text-muted font-light leading-3 dark:border-green-700",
+	dot: "inline-block h-[0.375rem] w-[0.375rem] animate-[pulse_4s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] rounded-full bg-green-400 ring ring-2 ring-green-200 dark:bg-green-700 dark:ring-green-500"
+} });
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+	__name: "ViewersCounter",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const count = ref(0);
+		const connections = ref({});
+		let socket;
+		function connect() {
+			return new PartySocket({
+				host: import.meta.env.VITE_PARTYKIT_URL,
+				room: "soubiran-dev"
+			});
+		}
+		function handleMessage(event) {
+			if (typeof event.data !== "string") return;
+			let data;
+			try {
+				data = JSON.parse(event.data);
+			} catch {
+				return;
+			}
+			count.value = data.count;
+			connections.value = data.connections;
+		}
+		onMounted(() => {
+			socket = connect();
+			socket.addEventListener("message", handleMessage);
+		});
+		onBeforeUnmount(() => {
+			if (!socket) return;
+			socket.removeEventListener("message", handleMessage);
+			socket.close();
+			socket = void 0;
+		});
+		const title = computed(() => {
+			return `${count.value} viewer${count.value > 1 ? "s" : ""} currently online (${Object.keys(connections.value).map((host) => `${connections.value[host]} from ${host}`).join(", ")})`;
+		});
+		const ui = computed(() => viewersCounter());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "fade" }, {
+				default: withCtx(() => [count.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					title: title.value,
+					class: normalizeClass(ui.value.base({ class: [props.class, props.ui?.base] }))
+				}, [createElementVNode("span", null, toDisplayString(count.value), 1), createElementVNode("span", {
+					class: normalizeClass(ui.value.dot({ class: props.ui?.dot })),
+					"aria-hidden": "true"
+				}, null, 2)], 10, _hoisted_1)) : createCommentVNode("v-if", true)]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { _sfc_main as Comments, _sfc_main$1 as Container, _sfc_main$2 as Feedback, _sfc_main$3 as FeedbackCard, _sfc_main$4 as Header, _sfc_main$5 as LoginCallback, _sfc_main$6 as Page, _sfc_main$7 as PageHeader, _sfc_main$8 as PageTitle, _sfc_main$9 as Socials, _sfc_main$10 as Sponsors, _sfc_main$11 as TableOfContents, _sfc_main$12 as ViewersCounter, useLogin, useTableOfContents_default as useTableOfContents, useUmami };