camox 0.44.0 → 0.46.0

package/dist/features/studio/components/LocalePicker.js

@@ -0,0 +1,785 @@
+import { useProjectUuid } from "../../../lib/auth.js";
+import { localizedPath } from "../../../lib/locale-path.js";
+import { useCurrentDraftId } from "../../../lib/draft-scope.js";
+import { useViewLocale } from "../../../lib/view-locale-context.js";
+import { useLocation, useNavigate } from "../../navigation/navigation.js";
+import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
+import { localeMutations } from "../../../lib/queries.js";
+import { usePageDestinations } from "../../../hooks/use-page-destinations.js";
+import { useLocalePath } from "../../../lib/view-locale.js";
+import { studioStore } from "../studioStore.js";
+import { localeLabel, localeOptions } from "../localeOptions.js";
+import { pathInLocale } from "../localeSwitch.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { ChevronsUpDown, Languages, Plus, Trash2 } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { toast } from "@camox/ui/toaster";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Combobox } from "@base-ui/react/combobox";
+import { Spinner } from "@camox/ui/spinner";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
+
+//#region src/features/studio/components/LocalePicker.tsx
+/**
+* The studio's languages (GLOSSARY: Locale): the one viewed, the others to switch to, and adding
+* and removing them. Switching keeps the page shown when the other language has it, and goes to
+* that language's home otherwise; the URL names the language by its prefix. Adding and removing
+* languages are content writes, so on Live they start a draft. While Camox translates the draft
+* into its languages, the picker shows a spinner, and nothing else does.
+*/
+function LocalePicker(t0) {
+	const $ = c(69);
+	const { recordPage } = t0;
+	const projectUuid = useProjectUuid();
+	const view = useViewLocale();
+	const dialog = useSelector(studioStore, _temp);
+	let t1;
+	if ($[0] !== projectUuid) {
+		t1 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = !!projectUuid;
+	let t3;
+	if ($[2] !== t2) {
+		t3 = { enabled: t2 };
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const projectId = useReadQuery(t1, t3).data?.id;
+	let t4;
+	if ($[4] !== projectId) {
+		t4 = reads.localeList({ projectId: projectId ?? 0 });
+		$[4] = projectId;
+		$[5] = t4;
+	} else t4 = $[5];
+	const t5 = !!projectId;
+	let t6;
+	if ($[6] !== t5) {
+		t6 = { enabled: t5 };
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	const locales = useReadQuery(t4, t6).data ?? view.locales;
+	let t7;
+	if ($[8] !== locales || $[9] !== view) {
+		t7 = locales.find((locale) => view.locale.isDefault ? locale.isDefault : locale.tag === view.locale.tag) ?? view.locale;
+		$[8] = locales;
+		$[9] = view;
+		$[10] = t7;
+	} else t7 = $[10];
+	const viewed = t7;
+	const switchTo = useSwitchLocale(recordPage);
+	const draftId = useCurrentDraftId();
+	let t8;
+	if ($[11] !== draftId || $[12] !== projectId) {
+		t8 = reads.draft({
+			projectId: projectId ?? 0,
+			draftId: draftId ?? ""
+		});
+		$[11] = draftId;
+		$[12] = projectId;
+		$[13] = t8;
+	} else t8 = $[13];
+	const t9 = !!projectId && !!draftId;
+	let t10;
+	if ($[14] !== t9) {
+		t10 = { enabled: t9 };
+		$[14] = t9;
+		$[15] = t10;
+	} else t10 = $[15];
+	const draft = useReadQuery(t8, t10);
+	let t11;
+	if ($[16] !== draft.data?.translatingLocales) {
+		t11 = draft.data?.translatingLocales ?? [];
+		$[16] = draft.data?.translatingLocales;
+		$[17] = t11;
+	} else t11 = $[17];
+	const translatingLocales = t11;
+	let t12;
+	if ($[18] !== viewed.tag) {
+		t12 = [viewed.tag];
+		$[18] = viewed.tag;
+		$[19] = t12;
+	} else t12 = $[19];
+	React.useEffect(_temp2, t12);
+	let t13;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost"
+		});
+		$[20] = t13;
+	} else t13 = $[20];
+	let t14;
+	if ($[21] !== translatingLocales) {
+		t14 = translatingLocales.length > 0 ? /* @__PURE__ */ jsx(TranslatingSpinner, { tags: translatingLocales }) : /* @__PURE__ */ jsx(Languages, {
+			"aria-hidden": true,
+			className: "text-muted-foreground size-4"
+		});
+		$[21] = translatingLocales;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== viewed.tag) {
+		t15 = localeLabel(viewed.tag);
+		$[23] = viewed.tag;
+		$[24] = t15;
+	} else t15 = $[24];
+	let t16;
+	if ($[25] !== t15) {
+		t16 = /* @__PURE__ */ jsx("span", {
+			className: "max-w-40 truncate",
+			children: t15
+		});
+		$[25] = t15;
+		$[26] = t16;
+	} else t16 = $[26];
+	let t17;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(ChevronsUpDown, {
+			"aria-hidden": true,
+			className: "size-4 opacity-50"
+		});
+		$[27] = t17;
+	} else t17 = $[27];
+	let t18;
+	if ($[28] !== t14 || $[29] !== t16) {
+		t18 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: t13,
+			children: [
+				t14,
+				t16,
+				t17
+			]
+		});
+		$[28] = t14;
+		$[29] = t16;
+		$[30] = t18;
+	} else t18 = $[30];
+	const t19 = viewed.tag;
+	let t20;
+	if ($[31] !== locales || $[32] !== switchTo) {
+		t20 = (tag) => {
+			const next = locales.find((locale_0) => locale_0.tag === tag);
+			if (next) switchTo(next);
+		};
+		$[31] = locales;
+		$[32] = switchTo;
+		$[33] = t20;
+	} else t20 = $[33];
+	let t21;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Languages" });
+		$[34] = t21;
+	} else t21 = $[34];
+	let t22;
+	if ($[35] !== locales) {
+		t22 = locales.map(_temp3);
+		$[35] = locales;
+		$[36] = t22;
+	} else t22 = $[36];
+	let t23;
+	if ($[37] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [t21, t22] });
+		$[37] = t22;
+		$[38] = t23;
+	} else t23 = $[38];
+	let t24;
+	if ($[39] !== t20 || $[40] !== t23 || $[41] !== viewed.tag) {
+		t24 = /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value: t19,
+			onValueChange: t20,
+			children: t23
+		});
+		$[39] = t20;
+		$[40] = t23;
+		$[41] = viewed.tag;
+		$[42] = t24;
+	} else t24 = $[42];
+	let t25;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[43] = t25;
+	} else t25 = $[43];
+	const t26 = !projectId;
+	let t27;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ jsx(Plus, {});
+		$[44] = t27;
+	} else t27 = $[44];
+	let t28;
+	if ($[45] !== t26) {
+		t28 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: t26,
+			onClick: _temp4,
+			children: [t27, "Add language…"]
+		});
+		$[45] = t26;
+		$[46] = t28;
+	} else t28 = $[46];
+	let t29;
+	if ($[47] !== projectId || $[48] !== viewed.isDefault || $[49] !== viewed.tag) {
+		t29 = !viewed.isDefault && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			variant: "destructive",
+			disabled: !projectId,
+			onClick: _temp5,
+			children: [
+				/* @__PURE__ */ jsx(Trash2, {}),
+				"Remove ",
+				localeLabel(viewed.tag),
+				"…"
+			]
+		});
+		$[47] = projectId;
+		$[48] = viewed.isDefault;
+		$[49] = viewed.tag;
+		$[50] = t29;
+	} else t29 = $[50];
+	let t30;
+	if ($[51] !== t28 || $[52] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [t28, t29] });
+		$[51] = t28;
+		$[52] = t29;
+		$[53] = t30;
+	} else t30 = $[53];
+	let t31;
+	if ($[54] !== t24 || $[55] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			className: "w-64",
+			align: "start",
+			children: [
+				t24,
+				t25,
+				t30
+			]
+		});
+		$[54] = t24;
+		$[55] = t30;
+		$[56] = t31;
+	} else t31 = $[56];
+	let t32;
+	if ($[57] !== t18 || $[58] !== t31) {
+		t32 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t18, t31] });
+		$[57] = t18;
+		$[58] = t31;
+		$[59] = t32;
+	} else t32 = $[59];
+	let t33;
+	if ($[60] !== dialog || $[61] !== locales || $[62] !== projectId || $[63] !== switchTo || $[64] !== viewed) {
+		t33 = projectId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddLocaleDialog, {
+			projectId,
+			locales,
+			open: dialog === "add",
+			onAdded: (added) => void switchTo(added)
+		}), !viewed.isDefault && /* @__PURE__ */ jsx(RemoveLocaleDialog, {
+			projectId,
+			locale: viewed,
+			open: dialog === "remove",
+			onRemoved: () => {
+				const fallback = locales.find(_temp6);
+				if (fallback) switchTo(fallback);
+			}
+		})] });
+		$[60] = dialog;
+		$[61] = locales;
+		$[62] = projectId;
+		$[63] = switchTo;
+		$[64] = viewed;
+		$[65] = t33;
+	} else t33 = $[65];
+	let t34;
+	if ($[66] !== t32 || $[67] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(Fragment, { children: [t32, t33] });
+		$[66] = t32;
+		$[67] = t33;
+		$[68] = t34;
+	} else t34 = $[68];
+	return t34;
+}
+function _temp6(locale_2) {
+	return locale_2.isDefault;
+}
+function _temp5() {
+	return studioStore.send({
+		type: "openLocaleDialog",
+		dialog: "remove"
+	});
+}
+function _temp4() {
+	return studioStore.send({
+		type: "openLocaleDialog",
+		dialog: "add"
+	});
+}
+function _temp3(locale_1) {
+	return /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+		value: locale_1.tag,
+		closeOnClick: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: localeLabel(locale_1.tag)
+			}), locale_1.isDefault && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: "Default language"
+			})]
+		})
+	}, locale_1.tag);
+}
+function _temp2() {
+	return closeLocaleDialog;
+}
+function _temp(state) {
+	return state.context.localeDialog;
+}
+/** Stands for the languages icon while Camox translates the draft, naming them on hover. */
+function TranslatingSpinner(t0) {
+	const $ = c(5);
+	const { tags } = t0;
+	let t1;
+	if ($[0] !== tags) {
+		t1 = tags.map(localeLabel).join(", ");
+		$[0] = tags;
+		$[1] = t1;
+	} else t1 = $[1];
+	const label = `Translating into ${t1}…`;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("span", { className: "flex" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== label) {
+		t3 = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: t2,
+			children: /* @__PURE__ */ jsx(Spinner, {
+				"aria-label": label,
+				className: "text-muted-foreground size-4"
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "bottom",
+			children: label
+		})] });
+		$[3] = label;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+/**
+* Switches the studio to another locale, on the same page when that locale has it (ADR 0015:
+* localizations share their original's id) or the same record when it shows a record page, or on
+* its home.
+*/
+function useSwitchLocale(recordPage) {
+	const $ = c(10);
+	const navigate = useNavigate();
+	const cache = useStudioCache();
+	const projectUuid = useProjectUuid();
+	const view = useViewLocale();
+	const path = useLocalePath();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select: _temp7 };
+		$[0] = t0;
+	} else t0 = $[0];
+	const search = useLocation(t0);
+	const destinations = usePageDestinations();
+	let t1;
+	if ($[1] !== cache || $[2] !== destinations || $[3] !== navigate || $[4] !== path || $[5] !== projectUuid || $[6] !== recordPage || $[7] !== search || $[8] !== view.locale) {
+		t1 = async (target) => {
+			if (target.tag === view.locale.tag && target.isDefault === view.locale.isDefault) return;
+			const pagesIn = (locale) => cache.ensure(reads.pageList({ projectUuid }), { locale }).catch(_temp8);
+			const recordPath = recordPage ? cache.reload(reads.discoveredPath({
+				projectUuid,
+				...recordPage
+			}), { locale: target }).catch(_temp9) : null;
+			const [shown, other] = await Promise.all([pagesIn(view.locale), pagesIn(target)]);
+			const next = pathInLocale(path, {
+				shown,
+				target: other,
+				singleton: (candidate) => destinations.some((destination) => destination.kind === "singleton" && destination.fullPath === candidate),
+				recordPath: await recordPath
+			});
+			await navigate({ to: `${localizedPath(next, target)}${search}` });
+		};
+		$[1] = cache;
+		$[2] = destinations;
+		$[3] = navigate;
+		$[4] = path;
+		$[5] = projectUuid;
+		$[6] = recordPage;
+		$[7] = search;
+		$[8] = view.locale;
+		$[9] = t1;
+	} else t1 = $[9];
+	return t1;
+}
+function _temp9() {
+	return null;
+}
+function _temp8() {
+	return [];
+}
+function _temp7(location) {
+	return location.search;
+}
+function closeLocaleDialog() {
+	studioStore.send({ type: "closeLocaleDialog" });
+}
+/** Asks which language to add, then adds the locale, which Camox translates the website into. */
+function AddLocaleDialog(t0) {
+	const $ = c(38);
+	const { projectId, locales, open, onAdded } = t0;
+	const cache = useStudioCache();
+	let t1;
+	if ($[0] !== locales) {
+		t1 = localeOptions(locales);
+		$[0] = locales;
+		$[1] = t1;
+	} else t1 = $[1];
+	const options = t1;
+	const [picked, setPicked] = React.useState(null);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = localeMutations.add();
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== cache || $[4] !== onAdded || $[5] !== projectId) {
+		t3 = {
+			...t2,
+			onSuccess: (added) => {
+				closeLocaleDialog();
+				setPicked(null);
+				toast.success(`Added ${localeLabel(added.tag)}`);
+				cache.invalidate(reads.localeList({ projectId }));
+				onAdded(added);
+			},
+			onError: _temp10
+		};
+		$[3] = cache;
+		$[4] = onAdded;
+		$[5] = projectId;
+		$[6] = t3;
+	} else t3 = $[6];
+	const add = useMutation(t3);
+	let t4;
+	if ($[7] !== add.isPending) {
+		t4 = (next) => {
+			if (!next && !add.isPending) closeLocaleDialog();
+		};
+		$[7] = add.isPending;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== add || $[10] !== picked || $[11] !== projectId) {
+		t5 = (event) => {
+			event.preventDefault();
+			if (picked) add.mutate({
+				projectId,
+				tag: picked.tag
+			});
+		};
+		$[9] = add;
+		$[10] = picked;
+		$[11] = projectId;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Add a language" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Camox translates the whole website into the new language in a draft. It goes live when the draft is published." })] });
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: "camox-locale-tag",
+			children: "Language"
+		});
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Combobox.Input, {
+			render: /* @__PURE__ */ jsx(Input, { id: "camox-locale-tag" }),
+			placeholder: "Search languages…",
+			autoFocus: true
+		});
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			sideOffset: 4,
+			align: "start",
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: "bg-popover text-popover-foreground ring-foreground/10 flex max-h-(--available-height) w-(--anchor-width) flex-col rounded-md p-1 shadow-md ring-1",
+				children: [/* @__PURE__ */ jsx(Combobox.Empty, {
+					className: "text-muted-foreground text-sm",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "p-2",
+						children: "No languages found."
+					})
+				}), /* @__PURE__ */ jsx(Combobox.List, {
+					className: "max-h-64 min-h-0 overflow-y-auto",
+					children: _temp14
+				})]
+			})
+		}) });
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== options || $[18] !== picked) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t7, /* @__PURE__ */ jsxs(Combobox.Root, {
+				items: options,
+				value: picked,
+				onValueChange: setPicked,
+				itemToStringLabel: _temp11,
+				itemToStringValue: _temp12,
+				isItemEqualToValue: _temp13,
+				autoHighlight: true,
+				children: [t8, t9]
+			})]
+		});
+		$[17] = options;
+		$[18] = picked;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== add.isPending) {
+		t11 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			disabled: add.isPending,
+			onClick: closeLocaleDialog,
+			children: "Cancel"
+		});
+		$[20] = add.isPending;
+		$[21] = t11;
+	} else t11 = $[21];
+	const t12 = !picked || add.isPending;
+	let t13;
+	if ($[22] !== add.isPending) {
+		t13 = add.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[22] = add.isPending;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== t12 || $[25] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Button, {
+			type: "submit",
+			disabled: t12,
+			children: [t13, "Add language"]
+		});
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t11 || $[28] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(DialogFooter, { children: [t11, t14] });
+		$[27] = t11;
+		$[28] = t14;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t10 || $[31] !== t15 || $[32] !== t5) {
+		t16 = /* @__PURE__ */ jsx(DialogContent, {
+			className: "sm:max-w-md",
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: t5,
+				children: [
+					t6,
+					t10,
+					t15
+				]
+			})
+		});
+		$[30] = t10;
+		$[31] = t15;
+		$[32] = t5;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== open || $[35] !== t16 || $[36] !== t4) {
+		t17 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange: t4,
+			children: t16
+		});
+		$[34] = open;
+		$[35] = t16;
+		$[36] = t4;
+		$[37] = t17;
+	} else t17 = $[37];
+	return t17;
+}
+function _temp14(option_2) {
+	return /* @__PURE__ */ jsx(Combobox.Item, {
+		value: option_2,
+		className: "data-highlighted:bg-accent data-highlighted:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: option_2.label
+		})
+	}, option_2.tag);
+}
+function _temp13(option_1, value) {
+	return option_1.tag === value.tag;
+}
+function _temp12(option_0) {
+	return option_0.tag;
+}
+function _temp11(option) {
+	return option.label;
+}
+function _temp10(error) {
+	return toast.error(error.message || "Could not add the language");
+}
+/** Asks before removing a locale with all its content, then removes it in the draft. */
+function RemoveLocaleDialog(t0) {
+	const $ = c(34);
+	const { projectId, locale, open, onRemoved } = t0;
+	const cache = useStudioCache();
+	let t1;
+	if ($[0] !== locale.tag) {
+		t1 = localeLabel(locale.tag);
+		$[0] = locale.tag;
+		$[1] = t1;
+	} else t1 = $[1];
+	const label = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = localeMutations.remove();
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== cache || $[4] !== label || $[5] !== onRemoved || $[6] !== projectId) {
+		t3 = {
+			...t2,
+			onSuccess: () => {
+				closeLocaleDialog();
+				toast.success(`Removed ${label}`);
+				cache.invalidate(reads.localeList({ projectId }));
+				onRemoved();
+			},
+			onError: _temp15
+		};
+		$[3] = cache;
+		$[4] = label;
+		$[5] = onRemoved;
+		$[6] = projectId;
+		$[7] = t3;
+	} else t3 = $[7];
+	const remove = useMutation(t3);
+	let t4;
+	if ($[8] !== remove.isPending) {
+		t4 = (next) => {
+			if (!next && !remove.isPending) closeLocaleDialog();
+		};
+		$[8] = remove.isPending;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== label) {
+		t5 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+			"Remove ",
+			label,
+			"?"
+		] }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+			"Its pages and content in ",
+			label,
+			" are removed in this draft. Once the draft is published, its content will be gone for good."
+		] })] });
+		$[10] = label;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== remove.isPending) {
+		t6 = /* @__PURE__ */ jsx(AlertDialogCancel, {
+			variant: "outline",
+			size: "default",
+			disabled: remove.isPending,
+			children: "Cancel"
+		});
+		$[12] = remove.isPending;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== locale.tag || $[15] !== projectId || $[16] !== remove) {
+		t7 = () => remove.mutate({
+			projectId,
+			tag: locale.tag
+		});
+		$[14] = locale.tag;
+		$[15] = projectId;
+		$[16] = remove;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== remove.isPending) {
+		t8 = remove.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[18] = remove.isPending;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== remove.isPending || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(AlertDialogAction, {
+			variant: "destructive",
+			disabled: remove.isPending,
+			onClick: t7,
+			children: [t8, "Remove language"]
+		});
+		$[20] = remove.isPending;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t6 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t6, t9] });
+		$[24] = t6;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t5) {
+		t11 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t5, t10] });
+		$[27] = t10;
+		$[28] = t5;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== open || $[31] !== t11 || $[32] !== t4) {
+		t12 = /* @__PURE__ */ jsx(AlertDialog, {
+			open,
+			onOpenChange: t4,
+			children: t11
+		});
+		$[30] = open;
+		$[31] = t11;
+		$[32] = t4;
+		$[33] = t12;
+	} else t12 = $[33];
+	return t12;
+}
+function _temp15(error) {
+	return toast.error(error.message || "Could not remove the language");
+}
+
+//#endregion
+export { LocalePicker };