@10x-media/impersonation 0.1.0-beta.0

package/dist/ui/ImpersonationUserCard.d.ts

@@ -0,0 +1,31 @@
+//#region src/ui/ImpersonationUserCard.d.ts
+type ImpersonationUserCardProps = {
+  collectionSlug: string;
+  doc: Record<string, unknown>;
+  documentHref: string;
+  email?: string;
+  onOpenDrawer: () => void;
+  onSelect: () => void;
+  openDocumentLabel: string;
+  openDrawerLabel: string;
+  title: string;
+};
+/**
+ * Default switcher row. Title is `admin.useAsTitle`. Email is optional and
+ * omitted when it would duplicate the title. Hosts can copy this for a custom
+ * card (roles, avatars) built with `useImpersonation`.
+ */
+declare const ImpersonationUserCard: ({
+  collectionSlug,
+  doc,
+  documentHref,
+  email,
+  onOpenDrawer,
+  onSelect,
+  openDocumentLabel,
+  openDrawerLabel,
+  title
+}: ImpersonationUserCardProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ImpersonationUserCard, ImpersonationUserCardProps };
+//# sourceMappingURL=ImpersonationUserCard.d.ts.map

package/dist/ui/ImpersonationUserCard.js

@@ -0,0 +1,51 @@
+"use client";
+import { Button, EditIcon, ExternalLinkIcon } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/ImpersonationUserCard.tsx
+/**
+* Default switcher row. Title is `admin.useAsTitle`. Email is optional and
+* omitted when it would duplicate the title. Hosts can copy this for a custom
+* card (roles, avatars) built with `useImpersonation`.
+*/
+const ImpersonationUserCard = ({ collectionSlug, doc, documentHref, email, onOpenDrawer, onSelect, openDocumentLabel, openDrawerLabel, title }) => /* @__PURE__ */ jsxs("div", {
+	className: "impersonation-card",
+	"data-collection": collectionSlug,
+	"data-id": String(doc.id ?? ""),
+	children: [/* @__PURE__ */ jsxs("button", {
+		className: "impersonation-card__pick",
+		onClick: onSelect,
+		type: "button",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "impersonation-card__title",
+			children: title
+		}), email ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "impersonation-card__email",
+			children: email
+		}) : null]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "impersonation-card__actions",
+		children: [/* @__PURE__ */ jsx(Button, {
+			buttonStyle: "icon-label",
+			extraButtonProps: { "aria-label": openDrawerLabel },
+			icon: /* @__PURE__ */ jsx(EditIcon, {}),
+			iconStyle: "none",
+			margin: false,
+			onClick: onOpenDrawer,
+			size: "small"
+		}), /* @__PURE__ */ jsx(Button, {
+			buttonStyle: "icon-label",
+			el: "link",
+			extraButtonProps: { "aria-label": openDocumentLabel },
+			icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
+			iconStyle: "none",
+			margin: false,
+			size: "small",
+			to: documentHref
+		})]
+	})]
+});
+//#endregion
+export { ImpersonationUserCard };
+
+//# sourceMappingURL=ImpersonationUserCard.js.map

package/dist/ui/ImpersonationUserCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImpersonationUserCard.js","names":[],"sources":["../../src/ui/ImpersonationUserCard.tsx"],"sourcesContent":["'use client'\n\nimport { Button, EditIcon, ExternalLinkIcon } from '@payloadcms/ui'\n\nexport type ImpersonationUserCardProps = {\n\tcollectionSlug: string\n\tdoc: Record<string, unknown>\n\tdocumentHref: string\n\temail?: string\n\tonOpenDrawer: () => void\n\tonSelect: () => void\n\topenDocumentLabel: string\n\topenDrawerLabel: string\n\ttitle: string\n}\n\n/**\n * Default switcher row. Title is `admin.useAsTitle`. Email is optional and\n * omitted when it would duplicate the title. Hosts can copy this for a custom\n * card (roles, avatars) built with `useImpersonation`.\n */\nexport const ImpersonationUserCard = ({\n\tcollectionSlug,\n\tdoc,\n\tdocumentHref,\n\temail,\n\tonOpenDrawer,\n\tonSelect,\n\topenDocumentLabel,\n\topenDrawerLabel,\n\ttitle,\n}: ImpersonationUserCardProps) => (\n\t<div\n\t\tclassName=\"impersonation-card\"\n\t\tdata-collection={collectionSlug}\n\t\tdata-id={String(doc.id ?? '')}\n\t>\n\t\t<button className=\"impersonation-card__pick\" onClick={onSelect} type=\"button\">\n\t\t\t<span className=\"impersonation-card__title\">{title}</span>\n\t\t\t{email ? (\n\t\t\t\t<span aria-hidden=\"true\" className=\"impersonation-card__email\">\n\t\t\t\t\t{email}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</button>\n\t\t<div className=\"impersonation-card__actions\">\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\textraButtonProps={{\n\t\t\t\t\t'aria-label': openDrawerLabel,\n\t\t\t\t}}\n\t\t\t\ticon={<EditIcon />}\n\t\t\t\ticonStyle=\"none\"\n\t\t\t\tmargin={false}\n\t\t\t\tonClick={onOpenDrawer}\n\t\t\t\tsize=\"small\"\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\tel=\"link\"\n\t\t\t\textraButtonProps={{\n\t\t\t\t\t'aria-label': openDocumentLabel,\n\t\t\t\t}}\n\t\t\t\ticon={<ExternalLinkIcon />}\n\t\t\t\ticonStyle=\"none\"\n\t\t\t\tmargin={false}\n\t\t\t\tsize=\"small\"\n\t\t\t\tto={documentHref}\n\t\t\t/>\n\t\t</div>\n\t</div>\n)\n"],"mappings":";;;;;;;;;AAqBA,MAAa,yBAAyB,EACrC,gBACA,KACA,cACA,OACA,cACA,UACA,mBACA,iBACA,YAEA,qBAAC,OAAD;CACC,WAAU;CACV,mBAAiB;CACjB,WAAS,OAAO,IAAI,MAAM,EAAE;WAH7B,CAKC,qBAAC,UAAD;EAAQ,WAAU;EAA2B,SAAS;EAAU,MAAK;YAArE,CACC,oBAAC,QAAD;GAAM,WAAU;aAA6B;EAAY,CAAA,GACxD,QACA,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;aACjC;EACI,CAAA,IACH,IACG;KACR,qBAAC,OAAD;EAAK,WAAU;YAAf,CACC,oBAAC,QAAD;GACC,aAAY;GACZ,kBAAkB,EACjB,cAAc,gBACf;GACA,MAAM,oBAAC,UAAD,CAAW,CAAA;GACjB,WAAU;GACV,QAAQ;GACR,SAAS;GACT,MAAK;EACL,CAAA,GACD,oBAAC,QAAD;GACC,aAAY;GACZ,IAAG;GACH,kBAAkB,EACjB,cAAc,kBACf;GACA,MAAM,oBAAC,kBAAD,CAAmB,CAAA;GACzB,WAAU;GACV,QAAQ;GACR,MAAK;GACL,IAAI;EACJ,CAAA,CACG;GACD"}

package/dist/ui/StartConfirmModal.d.ts

@@ -0,0 +1,28 @@
+//#region src/ui/StartConfirmModal.d.ts
+type StartTarget = {
+  collection: string;
+  id: number | string;
+  label: string;
+};
+type StartConfirmModalProps = {
+  apiPath: string;
+  modalSlug: string;
+  reasonMode: 'off' | 'optional' | 'required';
+  target: null | StartTarget;
+};
+/**
+ * Payload `ConfirmationModal` for starting a session. Reason uses `TextInput`
+ * in the body when the host asked for optional or required notes.
+ *
+ * `key={generation}` remounts after a failed confirm so the native Loading
+ * state resets. Throw still keeps the modal open.
+ */
+declare const StartConfirmModal: ({
+  apiPath,
+  modalSlug,
+  reasonMode,
+  target
+}: StartConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { StartConfirmModal };
+//# sourceMappingURL=StartConfirmModal.d.ts.map

package/dist/ui/StartConfirmModal.js

@@ -0,0 +1,65 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { errorKey, goAfterSwitch, postImpersonation } from "./api.js";
+import { useRef, useState } from "react";
+import { ConfirmationModal, TextInput, toast } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/StartConfirmModal.tsx
+/**
+* Payload `ConfirmationModal` for starting a session. Reason uses `TextInput`
+* in the body when the host asked for optional or required notes.
+*
+* `key={generation}` remounts after a failed confirm so the native Loading
+* state resets. Throw still keeps the modal open.
+*/
+const StartConfirmModal = ({ apiPath, modalSlug, reasonMode, target }) => {
+	const { t } = useTranslation$1();
+	const [reason, setReason] = useState("");
+	const [generation, setGeneration] = useState(0);
+	const reasonRef = useRef(reason);
+	reasonRef.current = reason;
+	const targetRef = useRef(target);
+	targetRef.current = target;
+	const failConfirm = (message) => {
+		setGeneration((current) => current + 1);
+		throw new Error(message);
+	};
+	const onConfirm = async () => {
+		const next = targetRef.current;
+		if (!next) return;
+		if (reasonMode === "required" && !reasonRef.current.trim()) {
+			toast.error(t(keys.errorReasonRequired));
+			failConfirm("reason required");
+		}
+		const result = await postImpersonation(`${apiPath}/start`, {
+			collection: next.collection,
+			id: next.id,
+			reason: reasonMode === "off" ? void 0 : reasonRef.current
+		});
+		if (!result.ok) {
+			toast.error(result.error ? t(errorKey(result.error)) : t(keys.errorFailed));
+			failConfirm(result.error ?? "failed");
+		}
+		goAfterSwitch(result.redirect);
+	};
+	return /* @__PURE__ */ jsx(ConfirmationModal, {
+		body: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: target?.label }), reasonMode === "off" ? null : /* @__PURE__ */ jsx(TextInput, {
+			label: t(keys.reasonLabel),
+			onChange: (event) => setReason(event.target.value),
+			path: `${modalSlug}-reason`,
+			placeholder: reasonMode === "required" ? void 0 : t(keys.reasonPlaceholder),
+			required: reasonMode === "required",
+			value: reason
+		})] }),
+		className: "impersonation-confirm-modal",
+		confirmLabel: t(keys.confirm),
+		heading: t(keys.confirmTitle),
+		modalSlug,
+		onConfirm
+	}, generation);
+};
+//#endregion
+export { StartConfirmModal };
+
+//# sourceMappingURL=StartConfirmModal.js.map

package/dist/ui/StartConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartConfirmModal.js","names":["useTranslation"],"sources":["../../src/ui/StartConfirmModal.tsx"],"sourcesContent":["'use client'\n\nimport { ConfirmationModal, TextInput, toast } from '@payloadcms/ui'\nimport { type ChangeEvent, useRef, useState } from 'react'\n\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { errorKey, goAfterSwitch, postImpersonation } from './api'\n\nexport type StartTarget = {\n\tcollection: string\n\tid: number | string\n\tlabel: string\n}\n\nexport type StartConfirmModalProps = {\n\tapiPath: string\n\tmodalSlug: string\n\treasonMode: 'off' | 'optional' | 'required'\n\ttarget: null | StartTarget\n}\n\n/**\n * Payload `ConfirmationModal` for starting a session. Reason uses `TextInput`\n * in the body when the host asked for optional or required notes.\n *\n * `key={generation}` remounts after a failed confirm so the native Loading\n * state resets. Throw still keeps the modal open.\n */\nexport const StartConfirmModal = ({\n\tapiPath,\n\tmodalSlug,\n\treasonMode,\n\ttarget,\n}: StartConfirmModalProps) => {\n\tconst { t } = useTranslation()\n\tconst [reason, setReason] = useState('')\n\tconst [generation, setGeneration] = useState(0)\n\tconst reasonRef = useRef(reason)\n\treasonRef.current = reason\n\tconst targetRef = useRef(target)\n\ttargetRef.current = target\n\n\tconst failConfirm = (message: string): never => {\n\t\tsetGeneration((current) => current + 1)\n\t\tthrow new Error(message)\n\t}\n\n\tconst onConfirm = async () => {\n\t\tconst next = targetRef.current\n\t\tif (!next) {\n\t\t\treturn\n\t\t}\n\t\tif (reasonMode === 'required' && !reasonRef.current.trim()) {\n\t\t\ttoast.error(t(keys.errorReasonRequired))\n\t\t\tfailConfirm('reason required')\n\t\t}\n\t\tconst result = await postImpersonation(`${apiPath}/start`, {\n\t\t\tcollection: next.collection,\n\t\t\tid: next.id,\n\t\t\treason: reasonMode === 'off' ? undefined : reasonRef.current,\n\t\t})\n\t\tif (!result.ok) {\n\t\t\ttoast.error(result.error ? t(errorKey(result.error)) : t(keys.errorFailed))\n\t\t\tfailConfirm(result.error ?? 'failed')\n\t\t}\n\t\tgoAfterSwitch(result.redirect)\n\t}\n\n\treturn (\n\t\t<ConfirmationModal\n\t\t\tbody={\n\t\t\t\t<>\n\t\t\t\t\t<p>{target?.label}</p>\n\t\t\t\t\t{reasonMode === 'off' ? null : (\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\tlabel={t(keys.reasonLabel)}\n\t\t\t\t\t\t\tonChange={(event: ChangeEvent<HTMLInputElement>) => setReason(event.target.value)}\n\t\t\t\t\t\t\tpath={`${modalSlug}-reason`}\n\t\t\t\t\t\t\tplaceholder={reasonMode === 'required' ? undefined : t(keys.reasonPlaceholder)}\n\t\t\t\t\t\t\trequired={reasonMode === 'required'}\n\t\t\t\t\t\t\tvalue={reason}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t}\n\t\t\tclassName=\"impersonation-confirm-modal\"\n\t\t\tconfirmLabel={t(keys.confirm)}\n\t\t\theading={t(keys.confirmTitle)}\n\t\t\tkey={generation}\n\t\t\tmodalSlug={modalSlug}\n\t\t\tonConfirm={onConfirm}\n\t\t/>\n\t)\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAa,qBAAqB,EACjC,SACA,WACA,YACA,aAC6B;CAC7B,MAAM,EAAE,MAAMA,iBAAe;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CACpB,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CAEpB,MAAM,eAAe,YAA2B;EAC/C,eAAe,YAAY,UAAU,CAAC;EACtC,MAAM,IAAI,MAAM,OAAO;CACxB;CAEA,MAAM,YAAY,YAAY;EAC7B,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MACJ;EAED,IAAI,eAAe,cAAc,CAAC,UAAU,QAAQ,KAAK,GAAG;GAC3D,MAAM,MAAM,EAAE,KAAK,mBAAmB,CAAC;GACvC,YAAY,iBAAiB;EAC9B;EACA,MAAM,SAAS,MAAM,kBAAkB,GAAG,QAAQ,SAAS;GAC1D,YAAY,KAAK;GACjB,IAAI,KAAK;GACT,QAAQ,eAAe,QAAQ,KAAA,IAAY,UAAU;EACtD,CAAC;EACD,IAAI,CAAC,OAAO,IAAI;GACf,MAAM,MAAM,OAAO,QAAQ,EAAE,SAAS,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,WAAW,CAAC;GAC1E,YAAY,OAAO,SAAS,QAAQ;EACrC;EACA,cAAc,OAAO,QAAQ;CAC9B;CAEA,OACC,oBAAC,mBAAD;EACC,MACC,qBAAA,UAAA,EAAA,UAAA,CACC,oBAAC,KAAD,EAAA,UAAI,QAAQ,MAAS,CAAA,GACpB,eAAe,QAAQ,OACvB,oBAAC,WAAD;GACC,OAAO,EAAE,KAAK,WAAW;GACzB,WAAW,UAAyC,UAAU,MAAM,OAAO,KAAK;GAChF,MAAM,GAAG,UAAU;GACnB,aAAa,eAAe,aAAa,KAAA,IAAY,EAAE,KAAK,iBAAiB;GAC7E,UAAU,eAAe;GACzB,OAAO;EACP,CAAA,CAED,EAAA,CAAA;EAEH,WAAU;EACV,cAAc,EAAE,KAAK,OAAO;EAC5B,SAAS,EAAE,KAAK,YAAY;EAEjB;EACA;CACX,GAHK,UAGL;AAEH"}

package/dist/ui/api.js

@@ -0,0 +1,66 @@
+"use client";
+import { CLIENT_FETCH_TIMEOUT_MS } from "../plugin/constants.js";
+import { keys } from "../translations/keys.js";
+//#region src/ui/api.ts
+const jsonHeaders = { "Content-Type": "application/json" };
+const postImpersonation = async (path, body) => {
+	try {
+		const response = await fetch(path, {
+			body: JSON.stringify(body ?? {}),
+			credentials: "include",
+			headers: jsonHeaders,
+			method: "POST",
+			signal: AbortSignal.timeout(CLIENT_FETCH_TIMEOUT_MS)
+		});
+		let parsed = {};
+		try {
+			parsed = await response.json();
+		} catch {
+			parsed = {};
+		}
+		return {
+			error: parsed.error,
+			ok: response.ok,
+			redirect: parsed.redirect,
+			status: response.status
+		};
+	} catch {
+		return {
+			error: "failed",
+			ok: false,
+			status: 0
+		};
+	}
+};
+/** Reload when the redirect is the current path; `assign` would be a no-op. */
+const goAfterSwitch = (redirect) => {
+	const next = redirect ?? "/";
+	if (new URL(next, window.location.origin).pathname === window.location.pathname) {
+		window.location.reload();
+		return;
+	}
+	window.location.assign(next);
+};
+const errorKey = (code) => {
+	return {
+		alreadyImpersonating: keys.errorAlreadyImpersonating,
+		failed: keys.errorFailed,
+		forbidden: keys.errorForbidden,
+		impersonatorGone: keys.errorImpersonatorGone,
+		impersonatorSessionExpired: keys.errorImpersonatorSessionExpired,
+		invalidBody: keys.errorInvalidBody,
+		notImpersonating: keys.errorNotImpersonating,
+		origin: keys.errorOrigin,
+		reasonRequired: keys.errorReasonRequired,
+		selfTarget: keys.errorSelfTarget,
+		targetNotFound: keys.errorTargetNotFound,
+		targetTrashed: keys.errorTargetTrashed,
+		targetUnverified: keys.errorTargetUnverified,
+		unsupportedAuth: keys.errorUnsupportedAuth,
+		unsupportedCollection: keys.errorUnsupportedCollection
+	}[code] ?? keys.errorFailed;
+};
+//#endregion
+export { errorKey, goAfterSwitch, postImpersonation };
+
+//# sourceMappingURL=api.js.map

package/dist/ui/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","names":[],"sources":["../../src/ui/api.ts"],"sourcesContent":["'use client'\n\nimport type { FailureCode } from '../endpoints/codes'\nimport { CLIENT_FETCH_TIMEOUT_MS } from '../plugin/constants'\nimport { keys } from '../translations/keys'\n\nexport type { FailureCode }\n\nconst jsonHeaders = { 'Content-Type': 'application/json' }\n\nexport const postImpersonation = async (\n\tpath: string,\n\tbody: unknown\n): Promise<{ error?: FailureCode; ok: boolean; redirect?: string; status: number }> => {\n\ttry {\n\t\tconst response = await fetch(path, {\n\t\t\tbody: JSON.stringify(body ?? {}),\n\t\t\tcredentials: 'include',\n\t\t\theaders: jsonHeaders,\n\t\t\tmethod: 'POST',\n\t\t\tsignal: AbortSignal.timeout(CLIENT_FETCH_TIMEOUT_MS),\n\t\t})\n\t\tlet parsed: { error?: FailureCode; redirect?: string } = {}\n\t\ttry {\n\t\t\tparsed = (await response.json()) as { error?: FailureCode; redirect?: string }\n\t\t} catch {\n\t\t\tparsed = {}\n\t\t}\n\t\treturn {\n\t\t\terror: parsed.error,\n\t\t\tok: response.ok,\n\t\t\tredirect: parsed.redirect,\n\t\t\tstatus: response.status,\n\t\t}\n\t} catch {\n\t\treturn { error: 'failed', ok: false, status: 0 }\n\t}\n}\n\n/** Reload when the redirect is the current path; `assign` would be a no-op. */\nexport const goAfterSwitch = (redirect?: string) => {\n\tconst next = redirect ?? '/'\n\tconst path = new URL(next, window.location.origin).pathname\n\tif (path === window.location.pathname) {\n\t\twindow.location.reload()\n\t\treturn\n\t}\n\twindow.location.assign(next)\n}\n\nexport const errorKey = (code: string) => {\n\tconst map: Record<string, (typeof keys)[keyof typeof keys]> = {\n\t\talreadyImpersonating: keys.errorAlreadyImpersonating,\n\t\tfailed: keys.errorFailed,\n\t\tforbidden: keys.errorForbidden,\n\t\timpersonatorGone: keys.errorImpersonatorGone,\n\t\timpersonatorSessionExpired: keys.errorImpersonatorSessionExpired,\n\t\tinvalidBody: keys.errorInvalidBody,\n\t\tnotImpersonating: keys.errorNotImpersonating,\n\t\torigin: keys.errorOrigin,\n\t\treasonRequired: keys.errorReasonRequired,\n\t\tselfTarget: keys.errorSelfTarget,\n\t\ttargetNotFound: keys.errorTargetNotFound,\n\t\ttargetTrashed: keys.errorTargetTrashed,\n\t\ttargetUnverified: keys.errorTargetUnverified,\n\t\tunsupportedAuth: keys.errorUnsupportedAuth,\n\t\tunsupportedCollection: keys.errorUnsupportedCollection,\n\t}\n\treturn map[code] ?? keys.errorFailed\n}\n"],"mappings":";;;;AAQA,MAAM,cAAc,EAAE,gBAAgB,mBAAmB;AAEzD,MAAa,oBAAoB,OAChC,MACA,SACsF;CACtF,IAAI;EACH,MAAM,WAAW,MAAM,MAAM,MAAM;GAClC,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;GAC/B,aAAa;GACb,SAAS;GACT,QAAQ;GACR,QAAQ,YAAY,QAAQ,uBAAuB;EACpD,CAAC;EACD,IAAI,SAAqD,CAAC;EAC1D,IAAI;GACH,SAAU,MAAM,SAAS,KAAK;EAC/B,QAAQ;GACP,SAAS,CAAC;EACX;EACA,OAAO;GACN,OAAO,OAAO;GACd,IAAI,SAAS;GACb,UAAU,OAAO;GACjB,QAAQ,SAAS;EAClB;CACD,QAAQ;EACP,OAAO;GAAE,OAAO;GAAU,IAAI;GAAO,QAAQ;EAAE;CAChD;AACD;;AAGA,MAAa,iBAAiB,aAAsB;CACnD,MAAM,OAAO,YAAY;CAEzB,IADa,IAAI,IAAI,MAAM,OAAO,SAAS,MAAM,EAAE,aACtC,OAAO,SAAS,UAAU;EACtC,OAAO,SAAS,OAAO;EACvB;CACD;CACA,OAAO,SAAS,OAAO,IAAI;AAC5B;AAEA,MAAa,YAAY,SAAiB;CAkBzC,OAAO;EAhBN,sBAAsB,KAAK;EAC3B,QAAQ,KAAK;EACb,WAAW,KAAK;EAChB,kBAAkB,KAAK;EACvB,4BAA4B,KAAK;EACjC,aAAa,KAAK;EAClB,kBAAkB,KAAK;EACvB,QAAQ,KAAK;EACb,gBAAgB,KAAK;EACrB,YAAY,KAAK;EACjB,gBAAgB,KAAK;EACrB,eAAe,KAAK;EACpB,kBAAkB,KAAK;EACvB,iBAAiB,KAAK;EACtB,uBAAuB,KAAK;CAEpB,EAAE,SAAS,KAAK;AAC1B"}

package/dist/ui/barPlacement.js

@@ -0,0 +1,107 @@
+//#region src/ui/barPlacement.ts
+const STORAGE_KEY = "impersonation-bar";
+const MARGIN = 12;
+const EDGES = [
+	"top",
+	"top-right",
+	"right",
+	"bottom-right",
+	"bottom",
+	"bottom-left",
+	"left",
+	"top-left"
+];
+const isBarEdge = (value) => typeof value === "string" && EDGES.includes(value);
+const readBarPlacement = () => {
+	if (typeof localStorage === "undefined") return {
+		collapsed: false,
+		edge: "right"
+	};
+	try {
+		const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "");
+		return {
+			collapsed: parsed.collapsed === true,
+			edge: isBarEdge(parsed.edge) ? parsed.edge : "right"
+		};
+	} catch {
+		return {
+			collapsed: false,
+			edge: "right"
+		};
+	}
+};
+const writeBarPlacement = (placement) => {
+	localStorage.setItem(STORAGE_KEY, JSON.stringify(placement));
+};
+/**
+* Layout viewport without scrollbars. `position: fixed` resolves against it, so
+* `window.innerWidth` would park a right-edge chip under the scrollbar.
+*/
+const readViewport = () => ({
+	height: document.documentElement.clientHeight,
+	width: document.documentElement.clientWidth
+});
+const anchorsFor = ({ header, size, viewport }) => {
+	const left = MARGIN;
+	const right = Math.max(left, viewport.width - size.width - MARGIN);
+	const top = header + MARGIN;
+	const bottom = Math.max(top, viewport.height - size.height - MARGIN);
+	const midY = Math.max(top, (viewport.height - size.height) / 2);
+	const midX = Math.max(MARGIN, (viewport.width - size.width) / 2);
+	return {
+		bottom: {
+			x: midX,
+			y: bottom
+		},
+		"bottom-left": {
+			x: left,
+			y: bottom
+		},
+		"bottom-right": {
+			x: right,
+			y: bottom
+		},
+		left: {
+			x: left,
+			y: midY
+		},
+		right: {
+			x: right,
+			y: midY
+		},
+		top: {
+			x: midX,
+			y: top
+		},
+		"top-left": {
+			x: left,
+			y: top
+		},
+		"top-right": {
+			x: right,
+			y: top
+		}
+	};
+};
+/** Project a release point along the drag so a flick lands in the corner it was thrown toward. */
+const projectThrow = (point, velocity) => ({
+	x: point.x + velocity.x * 220,
+	y: point.y + velocity.y * 220
+});
+const nearestEdge = (point, anchors) => {
+	let best = "right";
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (const edge of EDGES) {
+		const anchor = anchors[edge];
+		const distance = (anchor.x - point.x) ** 2 + (anchor.y - point.y) ** 2;
+		if (distance < bestDistance) {
+			best = edge;
+			bestDistance = distance;
+		}
+	}
+	return best;
+};
+//#endregion
+export { anchorsFor, nearestEdge, projectThrow, readBarPlacement, readViewport, writeBarPlacement };
+
+//# sourceMappingURL=barPlacement.js.map

package/dist/ui/barPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"barPlacement.js","names":[],"sources":["../../src/ui/barPlacement.ts"],"sourcesContent":["export type BarEdge =\n\t| 'bottom'\n\t| 'bottom-left'\n\t| 'bottom-right'\n\t| 'left'\n\t| 'right'\n\t| 'top'\n\t| 'top-left'\n\t| 'top-right'\n\nexport type BarPlacement = {\n\tcollapsed: boolean\n\tedge: BarEdge\n}\n\nexport type Point = { x: number; y: number }\n\nconst STORAGE_KEY = 'impersonation-bar'\nconst MARGIN = 12\n\nconst EDGES: readonly BarEdge[] = [\n\t'top',\n\t'top-right',\n\t'right',\n\t'bottom-right',\n\t'bottom',\n\t'bottom-left',\n\t'left',\n\t'top-left',\n]\n\nexport const isBarEdge = (value: unknown): value is BarEdge =>\n\ttypeof value === 'string' && (EDGES as readonly string[]).includes(value)\n\nexport const readBarPlacement = (): BarPlacement => {\n\tif (typeof localStorage === 'undefined') {\n\t\treturn { collapsed: false, edge: 'right' }\n\t}\n\ttry {\n\t\tconst parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '') as {\n\t\t\tcollapsed?: unknown\n\t\t\tedge?: unknown\n\t\t}\n\t\treturn {\n\t\t\tcollapsed: parsed.collapsed === true,\n\t\t\tedge: isBarEdge(parsed.edge) ? parsed.edge : 'right',\n\t\t}\n\t} catch {\n\t\treturn { collapsed: false, edge: 'right' }\n\t}\n}\n\nexport const writeBarPlacement = (placement: BarPlacement): void => {\n\tlocalStorage.setItem(STORAGE_KEY, JSON.stringify(placement))\n}\n\n/**\n * Layout viewport without scrollbars. `position: fixed` resolves against it, so\n * `window.innerWidth` would park a right-edge chip under the scrollbar.\n */\nexport const readViewport = (): { height: number; width: number } => ({\n\theight: document.documentElement.clientHeight,\n\twidth: document.documentElement.clientWidth,\n})\n\nexport const anchorsFor = ({\n\theader,\n\tsize,\n\tviewport,\n}: {\n\theader: number\n\tsize: { height: number; width: number }\n\tviewport: { height: number; width: number }\n}): Record<BarEdge, Point> => {\n\tconst left = MARGIN\n\tconst right = Math.max(left, viewport.width - size.width - MARGIN)\n\tconst top = header + MARGIN\n\tconst bottom = Math.max(top, viewport.height - size.height - MARGIN)\n\tconst midY = Math.max(top, (viewport.height - size.height) / 2)\n\tconst midX = Math.max(MARGIN, (viewport.width - size.width) / 2)\n\treturn {\n\t\tbottom: { x: midX, y: bottom },\n\t\t'bottom-left': { x: left, y: bottom },\n\t\t'bottom-right': { x: right, y: bottom },\n\t\tleft: { x: left, y: midY },\n\t\tright: { x: right, y: midY },\n\t\ttop: { x: midX, y: top },\n\t\t'top-left': { x: left, y: top },\n\t\t'top-right': { x: right, y: top },\n\t}\n}\n\n/** Project a release point along the drag so a flick lands in the corner it was thrown toward. */\nexport const projectThrow = (point: Point, velocity: Point): Point => ({\n\tx: point.x + velocity.x * 220,\n\ty: point.y + velocity.y * 220,\n})\n\nexport const nearestEdge = (point: Point, anchors: Record<BarEdge, Point>): BarEdge => {\n\tlet best: BarEdge = 'right'\n\tlet bestDistance = Number.POSITIVE_INFINITY\n\tfor (const edge of EDGES) {\n\t\tconst anchor = anchors[edge]\n\t\tconst distance = (anchor.x - point.x) ** 2 + (anchor.y - point.y) ** 2\n\t\tif (distance < bestDistance) {\n\t\t\tbest = edge\n\t\t\tbestDistance = distance\n\t\t}\n\t}\n\treturn best\n}\n"],"mappings":";AAiBA,MAAM,cAAc;AACpB,MAAM,SAAS;AAEf,MAAM,QAA4B;CACjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD;AAEA,MAAa,aAAa,UACzB,OAAO,UAAU,YAAa,MAA4B,SAAS,KAAK;AAEzE,MAAa,yBAAuC;CACnD,IAAI,OAAO,iBAAiB,aAC3B,OAAO;EAAE,WAAW;EAAO,MAAM;CAAQ;CAE1C,IAAI;EACH,MAAM,SAAS,KAAK,MAAM,aAAa,QAAQ,WAAW,KAAK,EAAE;EAIjE,OAAO;GACN,WAAW,OAAO,cAAc;GAChC,MAAM,UAAU,OAAO,IAAI,IAAI,OAAO,OAAO;EAC9C;CACD,QAAQ;EACP,OAAO;GAAE,WAAW;GAAO,MAAM;EAAQ;CAC1C;AACD;AAEA,MAAa,qBAAqB,cAAkC;CACnE,aAAa,QAAQ,aAAa,KAAK,UAAU,SAAS,CAAC;AAC5D;;;;;AAMA,MAAa,sBAAyD;CACrE,QAAQ,SAAS,gBAAgB;CACjC,OAAO,SAAS,gBAAgB;AACjC;AAEA,MAAa,cAAc,EAC1B,QACA,MACA,eAK6B;CAC7B,MAAM,OAAO;CACb,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,QAAQ,KAAK,QAAQ,MAAM;CACjE,MAAM,MAAM,SAAS;CACrB,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,SAAS,KAAK,SAAS,MAAM;CACnE,MAAM,OAAO,KAAK,IAAI,MAAM,SAAS,SAAS,KAAK,UAAU,CAAC;CAC9D,MAAM,OAAO,KAAK,IAAI,SAAS,SAAS,QAAQ,KAAK,SAAS,CAAC;CAC/D,OAAO;EACN,QAAQ;GAAE,GAAG;GAAM,GAAG;EAAO;EAC7B,eAAe;GAAE,GAAG;GAAM,GAAG;EAAO;EACpC,gBAAgB;GAAE,GAAG;GAAO,GAAG;EAAO;EACtC,MAAM;GAAE,GAAG;GAAM,GAAG;EAAK;EACzB,OAAO;GAAE,GAAG;GAAO,GAAG;EAAK;EAC3B,KAAK;GAAE,GAAG;GAAM,GAAG;EAAI;EACvB,YAAY;GAAE,GAAG;GAAM,GAAG;EAAI;EAC9B,aAAa;GAAE,GAAG;GAAO,GAAG;EAAI;CACjC;AACD;;AAGA,MAAa,gBAAgB,OAAc,cAA4B;CACtE,GAAG,MAAM,IAAI,SAAS,IAAI;CAC1B,GAAG,MAAM,IAAI,SAAS,IAAI;AAC3B;AAEA,MAAa,eAAe,OAAc,YAA6C;CACtF,IAAI,OAAgB;CACpB,IAAI,eAAe,OAAO;CAC1B,KAAK,MAAM,QAAQ,OAAO;EACzB,MAAM,SAAS,QAAQ;EACvB,MAAM,YAAY,OAAO,IAAI,MAAM,MAAM,KAAK,OAAO,IAAI,MAAM,MAAM;EACrE,IAAI,WAAW,cAAc;GAC5B,OAAO;GACP,eAAe;EAChB;CACD;CACA,OAAO;AACR"}

package/dist/ui/frontendBanner.css

@@ -0,0 +1,22 @@
+:where(.impersonation-frontend-banner--default) {
+	align-items: center;
+	background: #f4f1ea;
+	color: #1c1915;
+	display: flex;
+	font:
+		14px / 1.4 system-ui,
+		sans-serif;
+	gap: 12px;
+	justify-content: space-between;
+	padding: 0.6rem 1rem;
+}
+
+:where(.impersonation-frontend-banner--default .impersonation-frontend-banner__exit) {
+	background: transparent;
+	border: 1px solid currentColor;
+	border-radius: 4px;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	padding: 0.35rem 0.75rem;
+}

package/dist/ui/impersonation.css

@@ -0,0 +1,244 @@
+.impersonation-bar {
+	align-items: center;
+	background: var(--theme-warning-50);
+	border-block-start: 1px solid var(--theme-warning-250);
+	bottom: 0;
+	color: var(--theme-warning-800);
+	display: flex;
+	gap: calc(var(--base) * 0.75);
+	inset-inline: 0;
+	justify-content: space-between;
+	padding-block: calc(var(--base) * 0.35);
+	padding-inline: var(--gutter-h, 1rem);
+	position: fixed;
+	z-index: var(--z-status, 10);
+}
+
+html[data-theme="dark"] .impersonation-bar {
+	background: var(--theme-warning-100);
+	color: var(--theme-warning-800);
+}
+
+/* Follows Payload's nav column: `--nav-width` while it is open, animated like the grid. */
+body:has(.template-default--nav-open) .impersonation-bar {
+	inset-inline-start: var(--nav-width);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.impersonation-bar {
+		transition: inset-inline-start var(--nav-trans-time) linear;
+	}
+}
+
+.impersonation-bar--quiet {
+	background: var(--theme-success-50);
+	border-block-start-color: var(--theme-success-250);
+	color: var(--theme-success-800);
+}
+
+html[data-theme="dark"] .impersonation-bar--quiet {
+	background: var(--theme-success-100);
+	color: var(--theme-success-800);
+}
+
+.impersonation-bar__meta {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--base) * 0.15);
+	min-width: 0;
+}
+
+.impersonation-bar__copy {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(var(--base) * 0.4);
+}
+
+.impersonation-bar__time {
+	color: var(--theme-warning-800);
+	font-size: 0.875rem;
+	opacity: 0.92;
+}
+
+.impersonation-bar--quiet .impersonation-bar__time {
+	color: var(--theme-success-800);
+}
+
+.impersonation-chip__name {
+	max-width: 12rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.impersonation-bar__actions {
+	align-items: center;
+	display: flex;
+	flex-shrink: 0;
+	gap: calc(var(--base) * 0.5);
+}
+
+.impersonation-bar__link {
+	color: inherit;
+	font-size: 0.875rem;
+	text-decoration: underline;
+}
+
+.impersonation-bar__icon {
+	align-items: center;
+	background: transparent;
+	border: 0;
+	color: inherit;
+	cursor: pointer;
+	display: inline-flex;
+	padding: calc(var(--base) * 0.2);
+}
+
+.impersonation-bar__icon:focus-visible {
+	outline: 2px solid var(--theme-warning-800);
+	outline-offset: 2px;
+}
+
+.impersonation-chip {
+	align-items: center;
+	background: var(--theme-warning-50);
+	border: 1px solid var(--theme-warning-250);
+	border-radius: 999px;
+	box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+	color: var(--theme-warning-800);
+	cursor: grab;
+	display: flex;
+	gap: calc(var(--base) * 0.25);
+	padding-block: calc(var(--base) * 0.3);
+	padding-inline: calc(var(--base) * 0.7) calc(var(--base) * 0.3);
+	position: fixed;
+	touch-action: none;
+	user-select: none;
+	z-index: calc(var(--z-nav, 20) + 30);
+}
+
+html[data-theme="dark"] .impersonation-chip {
+	background: var(--theme-warning-100);
+}
+
+.impersonation-chip--quiet {
+	background: var(--theme-success-50);
+	border-color: var(--theme-success-250);
+	color: var(--theme-success-800);
+}
+
+html[data-theme="dark"] .impersonation-chip--quiet {
+	background: var(--theme-success-100);
+}
+
+.impersonation-bar--quiet .impersonation-bar__icon:focus-visible,
+.impersonation-chip--quiet .impersonation-bar__icon:focus-visible {
+	outline-color: var(--theme-success-800);
+}
+
+.impersonation-chip--dragging {
+	cursor: grabbing;
+	transition: none;
+}
+
+.impersonation-chip:not(.impersonation-chip--dragging) {
+	transition:
+		left 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
+		top 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.impersonation-chip:not(.impersonation-chip--dragging) {
+		transition: none;
+	}
+}
+
+.impersonation-switcher {
+	display: flex;
+	padding-block-end: var(--base);
+	flex-direction: column;
+	gap: var(--base);
+	min-height: calc(100vh - 10rem);
+}
+
+.impersonation-switcher__results {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: calc(var(--base) * 0.4);
+	isolation: isolate;
+	min-height: 0;
+	overflow: auto;
+	z-index: 0;
+}
+
+.impersonation-card {
+	align-items: center;
+	background: var(--theme-elevation-50);
+	border: 1px solid var(--theme-elevation-150);
+	border-radius: var(--style-radius-m, 4px);
+	display: flex;
+	gap: calc(var(--base) * 0.35);
+	padding-block: calc(var(--base) * 0.35);
+	padding-inline: calc(var(--base) * 0.5);
+	width: 100%;
+}
+
+.impersonation-card:hover {
+	background: var(--theme-elevation-100);
+	border-color: var(--theme-elevation-250);
+}
+
+.impersonation-card__pick {
+	align-items: flex-start;
+	background: none;
+	border: 0;
+	color: var(--theme-text);
+	cursor: pointer;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 0.15rem;
+	min-width: 0;
+	padding: calc(var(--base) * 0.2);
+	text-align: start;
+}
+
+.impersonation-card__pick:focus-visible {
+	outline: 2px solid var(--theme-elevation-800);
+	outline-offset: 2px;
+}
+
+.impersonation-card__actions {
+	align-items: center;
+	display: flex;
+	flex-shrink: 0;
+	gap: calc(var(--base) * 0.15);
+}
+
+.impersonation-card__title {
+	font-weight: 600;
+}
+
+.impersonation-card__email {
+	color: var(--theme-elevation-500);
+	font-size: 1rem;
+}
+
+.impersonation-switcher__empty {
+	color: var(--theme-elevation-500);
+	margin: 0;
+}
+
+.impersonation-switcher__pager {
+	align-items: center;
+	display: flex;
+	gap: calc(var(--base) * 0.4);
+	justify-content: flex-end;
+	margin-block-start: auto;
+}
+
+.impersonation-confirm-modal .field-type {
+	width: 100%;
+}