@phtngyn/cms 0.2.0-beta.7 → 0.3.0

package/studio/chunks/PeoplePage-CWIXitBD.js

@@ -0,0 +1,783 @@
+import { Qt as e, m as t, nn as n, s as r, t as i, zt as a } from "./Button-BT3ztSPx.js";
+import { st as o } from "./Search-BEgCe9Aj.js";
+import { a as s, d as c, n as l, r as u } from "./studioContext-I8HozGU1.js";
+import { A as d, Ar as f, B as p, Ci as m, E as h, K as g, M as _, N as v, Nn as y, Or as b, R as x, V as S, fa as C, gn as w, hr as T, k as E, o as D, ra as O, ui as k, ur as A } from "./runtime-core.esm-bundler-DKFA9Rep.js";
+import { t as j } from "./Select-B50WZMW-.js";
+import { n as M } from "./overlay-DnqFLZTc.js";
+import { t as N } from "./FormField-CgM6l2Yn.js";
+import { t as P } from "./Tooltip-Bu15m_DB.js";
+import { t as F } from "./Badge-BBFs88TI.js";
+import { t as I } from "./notifications-OKOLc40v.js";
+import { t as L } from "./Alert-D0D24z_a.js";
+import { t as R } from "./Modal-D6hSvxHd.js";
+import { t as z } from "./studioQueries-BR-9NT5F.js";
+import { t as B } from "./Slideover-QMMHAAys.js";
+import { t as V } from "./StudioPage-ngEIDr5d.js";
+import { n as H, r as ee, t as te } from "./StudioPageToolbar-BwHnqyr6.js";
+import { t as ne } from "./Skeleton-COz8dcrw.js";
+import { t as U } from "./useStudioPages-DR9qmYLg.js";
+import { t as W } from "./useLinkCopy-CMjQteCy.js";
+//#region src/people/internal/CreatePersonDialog.vue?vue&type=script&setup=true&lang.ts
+var G = { class: "space-y-4" }, K = { class: "text-sm text-muted" }, q = { class: "space-y-3 border-t border-default pt-4" }, J = { class: "sr-only" }, Y = {
+	"aria-hidden": "true",
+	class: "text-sm font-medium"
+}, X = { class: "space-y-2" }, Z = ["value", "disabled"], Q = { class: "min-w-0 flex-1" }, re = { class: "block text-sm font-medium" }, ie = { class: "block text-xs leading-5 text-muted" }, ae = { class: "flex w-full justify-end gap-2" }, oe = /* @__PURE__ */ g({
+	__name: "CreatePersonDialog",
+	emits: ["close", "invited"],
+	setup(r, { emit: a }) {
+		let { t: l } = o(), p = s(), g = u(), x = c().requests.people, T = a, A = k(""), j = k(""), P = k("editor"), F = k(null), I = k(!1), z = k(""), B = h(() => !!A.value.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/u.test(j.value.trim())), V = h(() => [
+			{
+				value: "editor",
+				label: l("people-view.editor"),
+				icon: "i-lucide-pencil-line",
+				description: l("create-person-dialog.edit-and-publish-pages-and-manage-images")
+			},
+			{
+				value: "administrator",
+				label: l("people-view.administrator"),
+				icon: "i-lucide-shield-check",
+				description: l("create-person-dialog.manage-everything-including-team-access")
+			},
+			{
+				value: "viewer",
+				label: l("people-view.viewer"),
+				icon: "i-lucide-eye",
+				description: l("create-person-dialog.view-pages-without-making-changes")
+			}
+		]);
+		async function H() {
+			if (!(I.value || !F.value && !B.value)) {
+				I.value = !0, z.value = "";
+				try {
+					let e = F.value ?? await x.create({ payload: {
+						name: A.value.trim(),
+						email: j.value.trim(),
+						role: P.value
+					} });
+					F.value = e, T("invited", await x.invite({ params: { id: e.id } }));
+				} catch (e) {
+					z.value = p(e, l("create-person-dialog.could-not-add-this-person"));
+				} finally {
+					I.value = !1;
+				}
+			}
+		}
+		return (r, a) => {
+			let o = L, s = M, c = N, u = t, p = i, h = R;
+			return w(), d(h, {
+				open: !0,
+				title: m(l)("people-view.add-person"),
+				description: m(l)("create-person-dialog.give-someone-access-to-your-website"),
+				dismissible: !I.value,
+				close: !I.value && void 0,
+				ui: { content: "max-w-xl" },
+				"onUpdate:open": a[4] ||= (e) => !e && T("close")
+			}, {
+				body: b(() => [E("form", {
+					id: "create-person-form",
+					class: "space-y-5",
+					onSubmit: n(H, ["prevent"])
+				}, [
+					z.value ? (w(), d(o, {
+						key: 0,
+						description: z.value,
+						color: "error",
+						variant: "subtle",
+						role: "alert"
+					}, null, 8, ["description"])) : _("", !0),
+					F.value ? (w(), d(o, {
+						key: 1,
+						description: m(l)("create-person-dialog.the-account-was-created-retry-to-generate"),
+						color: "warning",
+						variant: "subtle"
+					}, null, 8, ["description"])) : _("", !0),
+					E("div", G, [S(c, {
+						label: m(l)("create-person-dialog.full-name"),
+						required: ""
+					}, {
+						default: b(() => [S(s, {
+							modelValue: A.value,
+							"onUpdate:modelValue": a[0] ||= (e) => A.value = e,
+							autofocus: "",
+							autocomplete: "name",
+							placeholder: m(l)("create-person-dialog.enter-their-name"),
+							disabled: I.value || !!F.value,
+							class: "w-full"
+						}, null, 8, [
+							"modelValue",
+							"placeholder",
+							"disabled"
+						])]),
+						_: 1
+					}, 8, ["label"]), S(c, {
+						label: m(l)("session-gate.email-address"),
+						required: ""
+					}, {
+						default: b(() => [S(s, {
+							modelValue: j.value,
+							"onUpdate:modelValue": a[1] ||= (e) => j.value = e,
+							type: "email",
+							autocomplete: "email",
+							placeholder: m(l)("create-person-dialog.nameexamplecom"),
+							disabled: I.value || !!F.value,
+							class: "w-full"
+						}, null, 8, [
+							"modelValue",
+							"placeholder",
+							"disabled"
+						])]),
+						_: 1
+					}, 8, ["label"])]),
+					E("p", K, C(m(l)("create-person-dialog.they-will-choose-their-password-from-an")), 1),
+					E("fieldset", q, [
+						E("legend", J, C(m(l)("create-person-dialog.website-access")), 1),
+						E("p", Y, C(m(l)("create-person-dialog.what-can-they-do")), 1),
+						E("div", X, [(w(!0), v(D, null, y(V.value, (t) => (w(), v("label", {
+							key: t.value,
+							class: O(["flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-default", P.value === t.value ? "border-inverted bg-muted/40" : "border-default hover:bg-muted/20"])
+						}, [
+							f(E("input", {
+								"onUpdate:modelValue": a[2] ||= (e) => P.value = e,
+								type: "radio",
+								name: "create-person-role",
+								value: t.value,
+								disabled: I.value || !!F.value,
+								class: "sr-only"
+							}, null, 8, Z), [[e, P.value]]),
+							S(u, {
+								name: t.icon,
+								class: "size-4 shrink-0 text-muted"
+							}, null, 8, ["name"]),
+							E("span", Q, [E("span", re, C(t.label), 1), E("span", ie, C(t.description), 1)]),
+							P.value === t.value ? (w(), d(u, {
+								key: 0,
+								name: "i-lucide-check",
+								class: "size-4 shrink-0"
+							})) : _("", !0)
+						], 2))), 128))])
+					])
+				], 32)]),
+				footer: b(() => [E("div", ae, [S(p, {
+					label: m(g).actions.cancel,
+					color: "neutral",
+					variant: "ghost",
+					disabled: I.value,
+					onClick: a[3] ||= (e) => T("close")
+				}, null, 8, ["label", "disabled"]), S(p, {
+					form: "create-person-form",
+					type: "submit",
+					label: F.value ? m(l)("create-person-dialog.retry-invitation") : m(l)("people-view.add-person"),
+					color: "neutral",
+					loading: I.value,
+					disabled: !F.value && !B.value
+				}, null, 8, [
+					"label",
+					"loading",
+					"disabled"
+				])])]),
+				_: 1
+			}, 8, [
+				"title",
+				"description",
+				"dismissible",
+				"close"
+			]);
+		};
+	}
+}), se = { class: "space-y-3" }, $ = { class: "text-sm text-muted" }, ce = ["id"], le = { class: "text-xs text-muted" }, ue = { class: "flex w-full justify-end gap-2" }, de = /* @__PURE__ */ g({
+	__name: "InvitationDialog",
+	props: { invitation: {} },
+	emits: ["close"],
+	setup(e, { emit: t }) {
+		let { t: n, date: r } = o(), a = e, s = t, c = T("linkInput"), l = A(), u = h(() => {
+			let e = new URL("/_cms/app", location.origin);
+			return e.hash = new URLSearchParams({
+				invite: a.invitation.token,
+				email: a.invitation.email
+			}).toString(), e.href;
+		}), f = h(() => r(a.invitation.expiresAt, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		})), { copied: p, error: g, copy: y, select: x } = W(u, () => c.value?.inputRef);
+		return (t, r) => {
+			let a = M, o = i, h = R;
+			return w(), d(h, {
+				open: !0,
+				title: m(n)("invitation-dialog.invitation-link"),
+				description: m(n)("invitation-dialog.share-this-link-with-the-person-you"),
+				"onUpdate:open": r[1] ||= (e) => !e && s("close")
+			}, {
+				body: b(() => [E("div", se, [
+					E("p", $, C(m(n)("invitation.for", { email: e.invitation.email })), 1),
+					S(a, {
+						ref_key: "linkInput",
+						ref: c,
+						"model-value": u.value,
+						readonly: "",
+						class: "w-full",
+						"aria-label": m(n)("invitation-dialog.invitation-link"),
+						"aria-describedby": m(g) ? m(l) : void 0,
+						onFocus: m(x)
+					}, null, 8, [
+						"model-value",
+						"aria-label",
+						"aria-describedby",
+						"onFocus"
+					]),
+					m(g) ? (w(), v("p", {
+						key: 0,
+						id: m(l),
+						role: "status",
+						class: "text-sm leading-6 text-muted"
+					}, C(m(g)), 9, ce)) : _("", !0),
+					E("p", le, C(m(n)("invitation.expires", { date: f.value })), 1)
+				])]),
+				footer: b(() => [E("div", ue, [S(o, {
+					color: "neutral",
+					variant: "ghost",
+					label: m(n)("invitation-dialog.done"),
+					onClick: r[0] ||= (e) => s("close")
+				}, null, 8, ["label"]), S(o, {
+					color: "neutral",
+					icon: "i-lucide-copy",
+					label: m(p) ? m(n)("invitation-dialog.copied") : m(n)("media-asset-actions.copy-link"),
+					onClick: m(y)
+				}, null, 8, ["label", "onClick"])])]),
+				_: 1
+			}, 8, ["title", "description"]);
+		};
+	}
+}), fe = { class: "mt-4 wrap-break-word text-lg font-medium" }, pe = {
+	key: 0,
+	class: "text-xs text-muted"
+}, me = { class: "mt-1 break-all text-sm text-muted" }, he = { class: "mt-2 text-xs text-muted" }, ge = { class: "mb-3 mt-7 text-sm font-medium" }, _e = { class: "space-y-2" }, ve = [
+	"disabled",
+	"aria-pressed",
+	"onClick"
+], ye = { class: "flex-1" }, be = { class: "block text-sm font-medium" }, xe = { class: "mt-1 block text-xs leading-5 text-muted" }, Se = {
+	key: 1,
+	class: "mt-3 text-xs text-muted"
+}, Ce = { class: "mt-7 flex flex-col items-start gap-3 border-t border-default pt-5" }, we = { class: "flex w-full items-center justify-between gap-3" }, Te = { class: "text-xs text-muted" }, Ee = { class: "flex w-full justify-end gap-2" }, De = { class: "wrap-break-word text-sm" }, Oe = { class: "mt-1 break-all text-xs text-muted" }, ke = { class: "flex w-full justify-end gap-2" }, Ae = { class: "wrap-break-word text-sm font-medium" }, je = { class: "mt-1 break-all text-xs text-muted" }, Me = { class: "mt-4 text-sm text-muted" }, Ne = { class: "flex w-full justify-end gap-2" }, Pe = /* @__PURE__ */ g({
+	__name: "ManagePersonDialog",
+	props: { person: {} },
+	emits: [
+		"close",
+		"updated",
+		"invited"
+	],
+	setup(e, { emit: n }) {
+		let { t: a, date: f } = o(), g = s(), x = u(), T = l(), A = c().requests.people, j = e, M = n, N = k(j.person.role), P = k(null), F = k(!1), I = k(!1), z = k(""), V = h(() => j.person.id === T.user.id), H = h(() => N.value !== j.person.role), ee = h(() => [
+			{
+				value: "editor",
+				label: a("people-view.editor"),
+				icon: "i-lucide-pencil-line",
+				description: a("people.editor-description")
+			},
+			{
+				value: "administrator",
+				label: a("people-view.administrator"),
+				icon: "i-lucide-shield-check",
+				description: a("manage-person-dialog.manage-content-publishing-and-who-has-access")
+			},
+			{
+				value: "viewer",
+				label: a("people-view.viewer"),
+				icon: "i-lucide-eye",
+				description: a("manage-person-dialog.browse-content-and-preview-pages-without-making")
+			}
+		]), te = h(() => f(j.person.createdAt)), ne = h(() => j.person.name.split(/\s+/u).map((e) => e[0]).join("").slice(0, 2).toLocaleUpperCase());
+		async function U(e) {
+			I.value = !0, z.value = "";
+			try {
+				await e();
+			} catch (e) {
+				z.value = g(e, a("manage-person-dialog.could-not-update-this-person"));
+			} finally {
+				I.value = !1;
+			}
+		}
+		function W(e) {
+			e || I.value || (H.value ? F.value = !0 : M("close"));
+		}
+		function G() {
+			U(async () => M("invited", await A.invite({ params: { id: j.person.id } })));
+		}
+		function K() {
+			!V.value && H.value && U(async () => {
+				await A.changeRole({
+					params: { id: j.person.id },
+					payload: { role: N.value }
+				}), M("updated", a("people.role-changed", {
+					name: j.person.name,
+					role: ee.value.find((e) => e.value === N.value)?.label ?? N.value
+				}));
+			});
+		}
+		function q() {
+			U(async () => {
+				await A.revokeSessions({ params: { id: j.person.id } }), M("updated", a("people.signed-out", { name: j.person.name }));
+			});
+		}
+		function J() {
+			V.value || U(async () => {
+				await A.remove({ params: { id: j.person.id } }), M("updated", a("people.removed", { name: j.person.name }));
+			});
+		}
+		return (n, o) => {
+			let s = r, c = L, l = t, u = i, f = B, h = R;
+			return w(), v(D, null, [
+				S(f, {
+					open: !0,
+					title: m(a)("manage-person-dialog.person-details"),
+					description: m(a)("manage-person-dialog.review-and-manage-this-persons-access"),
+					dismissible: !I.value,
+					close: !I.value && void 0,
+					"onUpdate:open": W
+				}, {
+					body: b(() => [
+						S(s, {
+							text: ne.value,
+							alt: e.person.name,
+							size: "xl"
+						}, null, 8, ["text", "alt"]),
+						E("h2", fe, [p(C(e.person.name) + " ", 1), V.value ? (w(), v("span", pe, C(m(a)("people-view.you")), 1)) : _("", !0)]),
+						E("p", me, C(e.person.email), 1),
+						E("p", he, C(m(a)("people.joined", { date: te.value })), 1),
+						z.value ? (w(), d(c, {
+							key: 0,
+							role: "alert",
+							class: "mt-5",
+							title: m(a)("manage-person-dialog.access-could-not-be-updated"),
+							description: z.value,
+							color: "error",
+							variant: "subtle"
+						}, null, 8, ["title", "description"])) : _("", !0),
+						E("h3", ge, C(m(a)("create-person-dialog.website-access")), 1),
+						E("div", _e, [(w(!0), v(D, null, y(ee.value, (e) => (w(), v("button", {
+							key: e.value,
+							type: "button",
+							disabled: V.value || I.value,
+							"aria-pressed": N.value === e.value,
+							class: O(["flex w-full items-start gap-3 rounded-lg border p-4 text-left disabled:cursor-default", N.value === e.value ? "border-inverted bg-muted/40" : "border-default hover:bg-muted/20"]),
+							onClick: (t) => N.value = e.value
+						}, [
+							S(l, {
+								name: e.icon,
+								class: "mt-0.5 size-4 shrink-0 text-muted"
+							}, null, 8, ["name"]),
+							E("span", ye, [E("span", be, C(e.label), 1), E("span", xe, C(e.description), 1)]),
+							N.value === e.value ? (w(), d(l, {
+								key: 0,
+								name: "i-lucide-check",
+								class: "size-4 shrink-0"
+							})) : _("", !0)
+						], 10, ve))), 128))]),
+						V.value ? (w(), v("p", Se, C(m(a)("manage-person-dialog.another-administrator-can-change-your-role")), 1)) : _("", !0),
+						E("div", Ce, [
+							V.value ? _("", !0) : (w(), d(u, {
+								key: 0,
+								label: m(a)("manage-person-dialog.create-invitation-link"),
+								icon: "i-lucide-link",
+								color: "neutral",
+								variant: "ghost",
+								loading: I.value,
+								disabled: H.value,
+								onClick: G
+							}, null, 8, [
+								"label",
+								"loading",
+								"disabled"
+							])),
+							S(u, {
+								label: m(a)("manage-person-dialog.sign-out-on-all-devices"),
+								icon: "i-lucide-log-out",
+								color: "neutral",
+								variant: "ghost",
+								disabled: H.value || I.value,
+								onClick: o[0] ||= (e) => P.value = "revoke"
+							}, null, 8, ["label", "disabled"]),
+							V.value ? _("", !0) : (w(), d(u, {
+								key: 1,
+								label: m(a)("manage-person-dialog.remove-person"),
+								icon: "i-lucide-user-round-x",
+								color: "error",
+								variant: "ghost",
+								disabled: H.value || I.value,
+								onClick: o[1] ||= (e) => P.value = "remove"
+							}, null, 8, ["label", "disabled"]))
+						])
+					]),
+					footer: b(() => [E("div", we, [E("span", Te, C(H.value ? m(a)("manage-person-dialog.unsaved-access-change") : m(a)("manage-person-dialog.no-unsaved-changes")), 1), S(u, {
+						label: m(x).publication.save,
+						color: "neutral",
+						loading: I.value,
+						disabled: V.value || !H.value,
+						onClick: K
+					}, null, 8, [
+						"label",
+						"loading",
+						"disabled"
+					])])]),
+					_: 1
+				}, 8, [
+					"title",
+					"description",
+					"dismissible",
+					"close"
+				]),
+				S(h, {
+					open: F.value,
+					"onUpdate:open": o[4] ||= (e) => F.value = e,
+					title: m(a)("manage-person-dialog.discard-access-change"),
+					description: m(a)("manage-person-dialog.the-persons-current-role-will-stay-the")
+				}, {
+					footer: b(() => [E("div", Ee, [S(u, {
+						label: m(a)("account-view.keep-editing"),
+						color: "neutral",
+						variant: "ghost",
+						onClick: o[2] ||= (e) => F.value = !1
+					}, null, 8, ["label"]), S(u, {
+						label: m(a)("manage-person-dialog.discard-change"),
+						color: "neutral",
+						onClick: o[3] ||= (e) => M("close")
+					}, null, 8, ["label"])])]),
+					_: 1
+				}, 8, [
+					"open",
+					"title",
+					"description"
+				]),
+				S(h, {
+					open: P.value === "revoke",
+					title: m(a)("manage-person-dialog.sign-out-on-all-devices-2"),
+					description: m(a)("manage-person-dialog.theyll-need-to-sign-in-again-to"),
+					dismissible: !I.value,
+					close: !I.value && void 0,
+					"onUpdate:open": o[6] ||= (e) => !e && (P.value = null)
+				}, {
+					body: b(() => [E("p", De, C(e.person.name), 1), E("p", Oe, C(e.person.email), 1)]),
+					footer: b(() => [E("div", ke, [S(u, {
+						label: m(x).actions.cancel,
+						color: "neutral",
+						variant: "ghost",
+						disabled: I.value,
+						onClick: o[5] ||= (e) => P.value = null
+					}, null, 8, ["label", "disabled"]), S(u, {
+						label: m(a)("manage-person-dialog.sign-out-devices"),
+						color: "neutral",
+						loading: I.value,
+						onClick: q
+					}, null, 8, ["label", "loading"])])]),
+					_: 1
+				}, 8, [
+					"open",
+					"title",
+					"description",
+					"dismissible",
+					"close"
+				]),
+				S(h, {
+					open: P.value === "remove",
+					title: m(a)("manage-person-dialog.remove-person-2"),
+					description: m(a)("manage-person-dialog.they-will-lose-access-and-be-signed"),
+					dismissible: !I.value,
+					close: !I.value && void 0,
+					"onUpdate:open": o[8] ||= (e) => !e && (P.value = null)
+				}, {
+					body: b(() => [
+						E("p", Ae, C(e.person.name), 1),
+						E("p", je, C(e.person.email), 1),
+						E("p", Me, C(m(a)("manage-person-dialog.the-account-is-removed-permanently-you-can")), 1)
+					]),
+					footer: b(() => [E("div", Ne, [S(u, {
+						label: m(x).actions.cancel,
+						color: "neutral",
+						variant: "ghost",
+						disabled: I.value,
+						onClick: o[7] ||= (e) => P.value = null
+					}, null, 8, ["label", "disabled"]), S(u, {
+						label: m(a)("manage-person-dialog.remove-person"),
+						color: "error",
+						loading: I.value,
+						onClick: J
+					}, null, 8, ["label", "loading"])])]),
+					_: 1
+				}, 8, [
+					"open",
+					"title",
+					"description",
+					"dismissible",
+					"close"
+				])
+			], 64);
+		};
+	}
+}), Fe = {
+	key: 1,
+	class: "min-w-0 overflow-hidden rounded-lg border border-default"
+}, Ie = { class: "flex min-w-0 items-center gap-3" }, Le = { class: "flex min-w-0 flex-wrap items-center gap-2" }, Re = ["onClick"], ze = { class: "block truncate text-sm text-muted" }, Be = { class: "text-sm capitalize" }, Ve = { class: "text-xs text-muted @min-[40rem]:hidden" }, He = ["aria-label"], Ue = {
+	key: 2,
+	class: "flex justify-center"
+}, We = {
+	key: 3,
+	class: "text-sm text-muted"
+}, Ge = /* @__PURE__ */ g({
+	__name: "PeopleView",
+	setup(e) {
+		let { t } = o(), n = u(), s = l(), c = k(""), f = a(c, 250), g = k("all"), T = U({
+			active: () => c.value === f.value,
+			query: () => {
+				let e = f.value.trim();
+				return (t) => z.people({
+					offset: t,
+					limit: 20,
+					search: e
+				});
+			},
+			start: 0,
+			next: (e, t) => e.people.length && t + e.people.length < e.total ? t + e.people.length : void 0,
+			items: (e) => e.people,
+			key: (e) => e.id
+		}), O = h(() => ae(T.data.value.items)), A = h(() => T.data.value.page?.total ?? 0), N = h(() => T.loading.value || c.value !== f.value), R = h(() => N.value && O.value.length > 0), B = T.error, W = T.refresh, G = T.loadMore, K = I(), q = k(!1), J = k(null), Y = k(null), X = h(() => [
+			{
+				label: t("people-view.all-roles"),
+				value: "all"
+			},
+			{
+				label: t("people-view.editor"),
+				value: "editor"
+			},
+			{
+				label: t("people-view.administrator"),
+				value: "administrator"
+			},
+			{
+				label: t("people-view.viewer"),
+				value: "viewer"
+			}
+		]), Z = h(() => O.value.filter((e) => g.value === "all" || e.role === g.value)), Q = h(() => O.value.length < A.value), re = h(() => [
+			{
+				id: "person",
+				header: t("people-view.person")
+			},
+			{
+				accessorKey: "email",
+				header: t("session-gate.email-address")
+			},
+			{
+				accessorKey: "role",
+				header: t("people-view.access-2")
+			}
+		]), ie = h(() => {
+			if (N.value) return t("people-view.loading-people-2");
+			let e = g.value === "all" ? A.value : Z.value.length;
+			return g.value !== "all" && Q.value ? t("people.shown", { count: e }) : t("people.count", { count: e });
+		});
+		function ae(e) {
+			return [...e].sort((e, t) => e.name.localeCompare(t.name));
+		}
+		function se(e) {
+			return e.name.split(/\s+/u).map((e) => e[0]).join("").slice(0, 2).toLocaleUpperCase();
+		}
+		function $() {
+			c.value = "", g.value = "all";
+		}
+		function ce(e) {
+			q.value = !1, Y.value = null, J.value = e;
+		}
+		function le() {
+			q.value = !1;
+		}
+		function ue(e) {
+			K.add({ title: e }), Y.value = null;
+		}
+		return (e, a) => {
+			let o = i, l = L, u = M, f = j, h = r, T = P, k = F, I = ne, z = ee;
+			return w(), d(V, {
+				title: m(n).navigation.people,
+				summary: ie.value
+			}, {
+				actions: b(() => [S(o, {
+					label: m(t)("people-view.add-person"),
+					icon: "i-lucide-plus",
+					color: "neutral",
+					onClick: a[0] ||= (e) => q.value = !0
+				}, null, 8, ["label"])]),
+				default: b(() => [
+					m(B) ? (w(), d(l, {
+						key: 0,
+						role: "alert",
+						title: m(t)("people-view.people-could-not-be-loaded"),
+						description: m(B),
+						color: "error",
+						variant: "subtle",
+						actions: [{
+							label: m(n).actions.retry,
+							color: "error",
+							variant: "soft",
+							onClick: m(W)
+						}]
+					}, null, 8, [
+						"title",
+						"description",
+						"actions"
+					])) : _("", !0),
+					S(te, { hint: Q.value ? m(t)("people-view.role-filters-apply-to-loaded-people-load") : void 0 }, {
+						default: b(() => [
+							S(u, {
+								modelValue: c.value,
+								"onUpdate:modelValue": a[2] ||= (e) => c.value = e,
+								icon: "i-lucide-search",
+								placeholder: m(t)("people-view.search-people"),
+								"aria-label": m(t)("people-view.search-people-2"),
+								class: "w-full @min-[40rem]:w-80",
+								ui: { trailing: "pe-1" }
+							}, x({ _: 2 }, [c.value ? {
+								name: "trailing",
+								fn: b(() => [S(o, {
+									color: "neutral",
+									variant: "ghost",
+									size: "xs",
+									icon: "i-lucide-x",
+									"aria-label": m(t)("media-view.clear-search"),
+									onClick: a[1] ||= (e) => c.value = ""
+								}, null, 8, ["aria-label"])]),
+								key: "0"
+							} : void 0]), 1032, [
+								"modelValue",
+								"placeholder",
+								"aria-label"
+							]),
+							S(f, {
+								modelValue: g.value,
+								"onUpdate:modelValue": a[3] ||= (e) => g.value = e,
+								items: X.value,
+								"value-key": "value",
+								icon: "i-lucide-users",
+								"aria-label": m(t)("people-view.filter-by-role"),
+								class: "min-w-0 flex-1 @min-[40rem]:flex-none @min-[40rem]:w-44"
+							}, null, 8, [
+								"modelValue",
+								"items",
+								"aria-label"
+							]),
+							c.value || g.value !== "all" ? (w(), d(o, {
+								key: 0,
+								label: m(t)("media-view.clear-filters"),
+								color: "neutral",
+								variant: "link",
+								size: "sm",
+								onClick: $
+							}, null, 8, ["label"])) : _("", !0)
+						]),
+						_: 1
+					}, 8, ["hint"]),
+					Z.value.length || !m(B) ? (w(), v("div", Fe, [S(H, {
+						data: N.value && !O.value.length ? [] : Z.value,
+						columns: re.value,
+						"get-row-id": (e) => e.id,
+						ui: {
+							thead: "block @max-[40rem]:hidden",
+							tr: "grid grid-cols-[minmax(0,3fr)_minmax(0,3fr)_10rem] @max-[40rem]:grid-cols-1",
+							td: "min-w-0 whitespace-normal @max-[40rem]:px-5 @max-[40rem]:py-2 @max-[40rem]:first:pt-4 @max-[40rem]:last:pb-4"
+						}
+					}, {
+						"person-cell": b(({ row: e }) => [E("div", Ie, [S(h, {
+							text: se(e.original),
+							alt: e.original.name,
+							size: "sm"
+						}, null, 8, ["text", "alt"]), E("div", Le, [S(T, { text: e.original.name }, {
+							default: b(() => [E("button", {
+								type: "button",
+								class: "line-clamp-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 wrap-anywhere text-left font-medium text-highlighted hover:underline focus-visible:rounded focus-visible:outline-2 focus-visible:outline-primary",
+								onClick: (t) => Y.value = e.original
+							}, C(e.original.name), 9, Re)]),
+							_: 2
+						}, 1032, ["text"]), e.original.id === m(s).user.id ? (w(), d(k, {
+							key: 0,
+							size: "sm",
+							color: "neutral",
+							variant: "subtle"
+						}, {
+							default: b(() => [p(C(m(t)("people-view.you")), 1)]),
+							_: 1
+						})) : _("", !0)])])]),
+						"email-cell": b(({ row: e }) => [S(T, { text: e.original.email }, {
+							default: b(() => [E("span", ze, C(e.original.email), 1)]),
+							_: 2
+						}, 1032, ["text"])]),
+						"role-cell": b(({ row: e }) => [E("span", Be, [E("span", Ve, C(m(t)("people-view.access")), 1), p(C(X.value.find((t) => t.value === e.original.role)?.label), 1)])]),
+						empty: b(() => [N.value ? (w(), v("div", {
+							key: 0,
+							class: "space-y-5 px-5 py-8",
+							"aria-label": m(t)("people-view.loading-people")
+						}, [(w(), v(D, null, y(5, (e) => S(I, {
+							key: e,
+							class: "h-12 w-full"
+						})), 64))], 8, He)) : (w(), d(z, {
+							key: 1,
+							icon: "i-lucide-search-x",
+							title: m(t)("people-view.no-matching-people"),
+							description: m(t)("people-view.try-a-different-name-email-or-role"),
+							variant: "naked",
+							class: "py-14"
+						}, x({ _: 2 }, [c.value || g.value !== "all" ? {
+							name: "actions",
+							fn: b(() => [S(o, {
+								label: m(t)("media-view.clear-filters"),
+								color: "neutral",
+								variant: "outline",
+								onClick: $
+							}, null, 8, ["label"])]),
+							key: "0"
+						} : void 0]), 1032, ["title", "description"]))]),
+						_: 1
+					}, 8, [
+						"data",
+						"columns",
+						"get-row-id"
+					])])) : _("", !0),
+					Q.value ? (w(), v("div", Ue, [S(o, {
+						color: "neutral",
+						variant: "outline",
+						label: m(t)("people-view.load-more-people"),
+						loading: R.value,
+						disabled: N.value,
+						onClick: m(G)
+					}, null, 8, [
+						"label",
+						"loading",
+						"disabled",
+						"onClick"
+					])])) : _("", !0),
+					!N.value && !c.value && A.value === 1 && O.value[0]?.id === m(s).user.id ? (w(), v("p", We, C(m(t)("people-view.working-together-add-a-person-and-choose")), 1)) : _("", !0),
+					Y.value ? (w(), d(Pe, {
+						key: 4,
+						person: Y.value,
+						onClose: a[4] ||= (e) => Y.value = null,
+						onUpdated: ue,
+						onInvited: ce
+					}, null, 8, ["person"])) : _("", !0),
+					q.value ? (w(), d(oe, {
+						key: 5,
+						onClose: le,
+						onInvited: ce
+					})) : _("", !0),
+					J.value ? (w(), d(de, {
+						key: 6,
+						invitation: J.value,
+						onClose: a[5] ||= (e) => J.value = null
+					}, null, 8, ["invitation"])) : _("", !0)
+				]),
+				_: 1
+			}, 8, ["title", "summary"]);
+		};
+	}
+}), Ke = /* @__PURE__ */ g({
+	__name: "PeoplePage",
+	setup(e) {
+		return (e, t) => (w(), d(Ge));
+	}
+});
+//#endregion
+export { Ke as default };