camox 0.65.1 → 0.66.0

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

@@ -10,12 +10,12 @@ import { AssetLightbox } from "../../preview/components/AssetLightbox.js";
 import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/SidebarStack.js";
 import { editCollectionItemPath } from "../routes.js";
 import { studioStore } from "../studioStore.js";
-import { timeAgo } from "../draftLabel.js";
 import { askAgentMessage, dismissLabel, dismissedSentence, findingSentence, fixLabel } from "../findingSentence.js";
 import { useShowInCanvas } from "../showInCanvas.js";
 import { Squareling } from "./Squareling.js";
+import { aboutSentence, whenTag } from "../patrollerBio.js";
 import { moreSentence, reportSentence, shortTimeAgo, whereReportLeads } from "../reportSentence.js";
-import { singleLocaleSentence, workingSentence } from "../workingSentence.js";
+import { workingSentence } from "../workingSentence.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -59,7 +59,7 @@ function Patrol(t0) {
 				children: "Patrol"
 			})
 		});
-		t4 = cn("bg-background min-h-0 flex-1 overflow-y-auto", CARD_BODY_EDGES);
+		t4 = cn("bg-background flex min-h-0 flex-1 flex-col overflow-y-auto", CARD_BODY_EDGES);
 		$[4] = t3;
 		$[5] = t4;
 	} else {
@@ -100,7 +100,7 @@ function Patrol(t0) {
 	return t7;
 }
 function ProjectPatrol(t0) {
-	const $ = c(53);
+	const $ = c(32);
 	const { projectId, inDraft } = t0;
 	let t1;
 	if ($[0] !== projectId) {
@@ -118,193 +118,118 @@ function ProjectPatrol(t0) {
 	const { data: locales } = useReadQuery(t2);
 	const [open, setOpen] = React.useState(null);
 	const now = useNow(3e4);
-	const [heldOrder, setHeldOrder] = React.useState(null);
-	const pointerIn = React.useRef(false);
-	let t3;
-	if ($[4] !== heldOrder || $[5] !== view) {
-		t3 = view && inHeldOrder(view, heldOrder);
-		$[4] = heldOrder;
-		$[5] = view;
-		$[6] = t3;
-	} else t3 = $[6];
-	const shown = t3;
-	let t4;
-	if ($[7] !== shown?.patrollers) {
-		t4 = shown?.patrollers.map(_temp).join(" ");
-		$[7] = shown?.patrollers;
-		$[8] = t4;
-	} else t4 = $[8];
-	const roster = useMovingRows(t4);
 	const [openFileId, setOpenFileId] = React.useState(null);
 	const showReport = useShowReport(inDraft, setOpenFileId);
 	const navigate = useNavigate();
-	let t5;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = patrolMutations.applyFix();
-		$[9] = t5;
-	} else t5 = $[9];
-	const applyFix = useMutation(t5);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = patrolMutations.applyFix();
+		$[4] = t3;
+	} else t3 = $[4];
+	const applyFix = useMutation(t3);
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = patrolMutations.dismissFinding();
+		$[5] = t4;
+	} else t4 = $[5];
+	const dismissFinding = useMutation(t4);
+	if (!view) return null;
+	const t5 = locales?.length === 1;
 	let t6;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = patrolMutations.dismissFinding();
-		$[10] = t6;
-	} else t6 = $[10];
-	const dismissFinding = useMutation(t6);
-	if (!shown) return null;
-	let t7;
-	if ($[11] !== shown) {
-		t7 = () => setHeldOrder((held) => held ?? shown.patrollers.map(_temp2));
-		$[11] = shown;
-		$[12] = t7;
-	} else t7 = $[12];
-	const hold = t7;
-	let t8;
-	if ($[13] !== hold) {
-		t8 = (id_1) => {
-			setOpen(id_1);
-			if (id_1) hold();
-			else if (!pointerIn.current) setHeldOrder(null);
-		};
-		$[13] = hold;
-		$[14] = t8;
-	} else t8 = $[14];
-	const openReports = t8;
-	let t9;
-	if ($[15] !== hold) {
-		t9 = () => {
-			pointerIn.current = true;
-			hold();
+	if ($[6] !== showReport) {
+		t6 = (shown) => {
+			setOpen(null);
+			showReport(shown);
 		};
-		$[15] = hold;
-		$[16] = t9;
-	} else t9 = $[16];
-	let t10;
-	if ($[17] !== open) {
-		t10 = () => {
-			pointerIn.current = false;
-			if (!open) setHeldOrder(null);
-		};
-		$[17] = open;
-		$[18] = t10;
-	} else t10 = $[18];
-	const t11 = locales?.length === 1;
-	let t12;
-	if ($[19] !== openReports || $[20] !== showReport) {
-		t12 = (shown_0) => {
-			openReports(null);
-			showReport(shown_0);
-		};
-		$[19] = openReports;
-		$[20] = showReport;
-		$[21] = t12;
-	} else t12 = $[21];
-	let t13;
-	if ($[22] !== applyFix || $[23] !== projectId) {
-		t13 = (finding) => applyFix.mutate({
+		$[6] = showReport;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== applyFix || $[9] !== projectId) {
+		t7 = (finding) => applyFix.mutate({
 			projectId,
 			findingId: finding.id
 		});
-		$[22] = applyFix;
-		$[23] = projectId;
-		$[24] = t13;
-	} else t13 = $[24];
-	let t14;
-	if ($[25] !== openReports) {
-		t14 = (patroller, finding_0) => {
-			openReports(null);
+		$[8] = applyFix;
+		$[9] = projectId;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (patroller, finding_0) => {
+			setOpen(null);
 			studioStore.trigger.askAgent({ text: askAgentMessage(finding_0, patroller.role) });
 		};
-		$[25] = openReports;
-		$[26] = t14;
-	} else t14 = $[26];
-	let t15;
-	if ($[27] !== dismissFinding || $[28] !== projectId) {
-		t15 = (finding_1) => dismissFinding.mutate({
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== dismissFinding || $[13] !== projectId) {
+		t9 = (finding_1) => dismissFinding.mutate({
 			projectId,
 			findingId: finding_1.id
 		});
-		$[27] = dismissFinding;
-		$[28] = projectId;
-		$[29] = t15;
-	} else t15 = $[29];
-	let t16;
-	if ($[30] !== navigate || $[31] !== openReports) {
-		t16 = (draft) => {
-			openReports(null);
+		$[12] = dismissFinding;
+		$[13] = projectId;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== navigate) {
+		t10 = (draft) => {
+			setOpen(null);
 			navigate({
 				to: window.location.href,
 				draft: draft.id
 			});
 		};
-		$[30] = navigate;
-		$[31] = openReports;
-		$[32] = t16;
-	} else t16 = $[32];
-	let t17;
-	if ($[33] !== inDraft || $[34] !== now || $[35] !== open || $[36] !== openReports || $[37] !== shown || $[38] !== t11 || $[39] !== t12 || $[40] !== t13 || $[41] !== t14 || $[42] !== t15 || $[43] !== t16) {
-		t17 = /* @__PURE__ */ jsx(PatrolRoster, {
-			view: shown,
+		$[15] = navigate;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== inDraft || $[18] !== now || $[19] !== open || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t9 || $[25] !== view) {
+		t11 = /* @__PURE__ */ jsx(PatrolRoster, {
+			view,
 			now,
 			inDraft,
-			singleLocale: t11,
+			singleLocale: t5,
 			open,
-			onOpenChange: openReports,
-			onShow: t12,
-			onApply: t13,
-			onAsk: t14,
-			onDismiss: t15,
-			onOpenPatrolDraft: t16
+			onOpenChange: setOpen,
+			onShow: t6,
+			onApply: t7,
+			onAsk: t8,
+			onDismiss: t9,
+			onOpenPatrolDraft: t10
 		});
-		$[33] = inDraft;
-		$[34] = now;
-		$[35] = open;
-		$[36] = openReports;
-		$[37] = shown;
-		$[38] = t11;
-		$[39] = t12;
-		$[40] = t13;
-		$[41] = t14;
-		$[42] = t15;
-		$[43] = t16;
-		$[44] = t17;
-	} else t17 = $[44];
-	let t18;
-	if ($[45] !== openFileId) {
-		t18 = openFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+		$[17] = inDraft;
+		$[18] = now;
+		$[19] = open;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t9;
+		$[25] = view;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== openFileId) {
+		t12 = openFileId && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: true,
 			onOpenChange: (open_0) => {
 				if (!open_0) setOpenFileId(null);
 			},
 			fileId: openFileId
 		});
-		$[45] = openFileId;
-		$[46] = t18;
-	} else t18 = $[46];
-	let t19;
-	if ($[47] !== roster || $[48] !== t10 || $[49] !== t17 || $[50] !== t18 || $[51] !== t9) {
-		t19 = /* @__PURE__ */ jsxs("div", {
-			ref: roster,
-			className: "relative",
-			onPointerEnter: t9,
-			onPointerLeave: t10,
-			children: [t17, t18]
-		});
-		$[47] = roster;
-		$[48] = t10;
-		$[49] = t17;
-		$[50] = t18;
-		$[51] = t9;
-		$[52] = t19;
-	} else t19 = $[52];
-	return t19;
-}
-function _temp2(t0) {
-	const { id: id_0 } = t0;
-	return id_0;
-}
-function _temp(t0) {
-	const { id } = t0;
-	return id;
+		$[27] = openFileId;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t11 || $[30] !== t12) {
+		t13 = /* @__PURE__ */ jsxs("div", { children: [t11, t12] });
+		$[29] = t11;
+		$[30] = t12;
+		$[31] = t13;
+	} else t13 = $[31];
+	return t13;
 }
 /** A report, as the Patrol shows its subject. */
 const shownOf = (report) => ({
@@ -363,70 +288,10 @@ function useShowReport(inDraft, openFile) {
 	} else t0 = $[5];
 	return t0;
 }
-/**
-* The view with its patrollers in the order held, if any, and its latest content: patrollers the
-* order doesn't hold follow, in the view's order, and those no longer in the view are dropped.
-*/
-function inHeldOrder(view, order) {
-	if (!order) return view;
-	const place = (id) => {
-		const index = order.indexOf(id);
-		return index === -1 ? order.length : index;
-	};
-	return {
-		...view,
-		patrollers: [...view.patrollers].sort((a, b) => place(a.id) - place(b.id))
-	};
-}
-/** How long a patroller takes to move to its new place, in ms. */
-const MOVE_DURATION = 250;
-/** A strong ease-out: the move starts at once and settles gently. */
-const MOVE_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
-/**
-* Moves each patroller from where it showed to its new place when the order (a key of their ids)
-* changes, rather than jumping there. Without motion for editors who reduce it.
-*/
-function useMovingRows(order) {
-	const $ = c(2);
-	const node = React.useRef(null);
-	const last = React.useRef(null);
-	let t0;
-	if ($[0] !== order) {
-		t0 = () => {
-			const roster = node.current;
-			if (!roster) return;
-			const rows = [...roster.querySelectorAll("[data-patroller]")];
-			const tops = new Map(rows.map(_temp3));
-			const previous = last.current;
-			last.current = {
-				order,
-				tops
-			};
-			if (!previous || previous.order === order) return;
-			if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-			for (const row_0 of rows) {
-				const from = previous.tops.get(row_0.dataset.patroller);
-				const to = tops.get(row_0.dataset.patroller);
-				if (from === void 0 || from === to) continue;
-				row_0.animate([{ transform: `translateY(${from - to}px)` }, { transform: "none" }], {
-					duration: MOVE_DURATION,
-					easing: MOVE_EASING
-				});
-			}
-		};
-		$[0] = order;
-		$[1] = t0;
-	} else t0 = $[1];
-	React.useLayoutEffect(t0);
-	return node;
-}
-function _temp3(row) {
-	return [row.dataset.patroller, row.offsetTop];
-}
 /** The time now, updated every `intervalMs`. */
 function useNow(intervalMs) {
 	const $ = c(3);
-	const [now, setNow] = React.useState(_temp4);
+	const [now, setNow] = React.useState(_temp);
 	let t0;
 	let t1;
 	if ($[0] !== intervalMs) {
@@ -445,13 +310,14 @@ function useNow(intervalMs) {
 	React.useEffect(t0, t1);
 	return now;
 }
-function _temp4() {
+function _temp() {
 	return Date.now();
 }
 /**
-* A `PatrolView`, in the order it gives: each patroller's avatar, role, and when it last worked,
-* opening its reports in a popover to the left. Live's reports carry a tag when a draft is viewed. In a
-* project with a single locale, the Translator invites the editor to add a language instead.
+* A `PatrolView`, in the order it gives, as avatars in rows of three, each over its role like a
+* story. Each opens its reports in a popover to the left, under its role and when it last worked,
+* or what it's on. Live's reports carry a tag when a draft is viewed. In a project with a single
+* locale, the Translator invites the editor to add a language instead.
 */
 function PatrolRoster(t0) {
 	const $ = c(27);
@@ -464,7 +330,7 @@ function PatrolRoster(t0) {
 				patroller,
 				now,
 				inDraft,
-				idle: singleLocale ? singleLocaleSentence(patroller.id) : void 0,
+				singleLocale,
 				open: open === patroller.id,
 				onOpenChange: (next) => onOpenChange(next ? patroller.id : null),
 				onShow,
@@ -504,9 +370,12 @@ function PatrolRoster(t0) {
 	} else t1 = $[12];
 	let t2;
 	if ($[25] !== t1) {
-		t2 = /* @__PURE__ */ jsx("ul", {
-			className: "flex flex-col gap-px p-1",
-			children: t1
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "px-1 py-3",
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "mx-auto grid w-fit grid-cols-[repeat(3,5rem)] gap-y-3.5",
+				children: t1
+			})
 		});
 		$[25] = t1;
 		$[26] = t2;
@@ -514,8 +383,8 @@ function PatrolRoster(t0) {
 	return t2;
 }
 /**
-* A thin, low-contrast arc travelling around a working patroller's avatar circle, or the whole
-* circle pulsing slowly under reduced motion. The motion lives in `studio.css`.
+* A thin, low-contrast arc travelling around a working patroller's avatar, where its story ring
+* goes, or the whole ring pulsing slowly under reduced motion. The motion lives in `studio.css`.
 */
 function WorkingArc() {
 	const $ = c(1);
@@ -524,12 +393,12 @@ function WorkingArc() {
 		t0 = /* @__PURE__ */ jsx("svg", {
 			"data-working-indicator": true,
 			"aria-hidden": true,
-			viewBox: "0 0 32 32",
-			className: "patrol-working text-foreground/30 pointer-events-none absolute inset-0 size-full",
+			viewBox: "0 0 36 36",
+			className: "patrol-working text-foreground/40 pointer-events-none absolute -inset-[3px] size-[calc(100%+6px)]",
 			children: /* @__PURE__ */ jsx("circle", {
-				cx: "16",
-				cy: "16",
-				r: "15.25",
+				cx: "18",
+				cy: "18",
+				r: "17.25",
 				pathLength: "100",
 				fill: "none",
 				stroke: "currentColor",
@@ -543,8 +412,8 @@ function WorkingArc() {
 	return t0;
 }
 function PatrollerRow(t0) {
-	const $ = c(65);
-	const { patroller, now, inDraft, idle, open, onOpenChange, onShow, onApply, onAsk, onDismiss, patrolDraft, onOpenPatrolDraft } = t0;
+	const $ = c(53);
+	const { patroller, now, inDraft, singleLocale, open, onOpenChange, onShow, onApply, onAsk, onDismiss, patrolDraft, onOpenPatrolDraft } = t0;
 	const statusId = React.useId();
 	let t1;
 	if ($[0] !== patroller.id || $[1] !== patroller.working) {
@@ -554,209 +423,345 @@ function PatrollerRow(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const working = t1;
-	let t2;
-	if ($[3] !== idle || $[4] !== now || $[5] !== patroller.duty || $[6] !== patroller.lastActivityAt || $[7] !== working) {
-		t2 = working ?? idle ?? (patroller.duty === "atPublish" ? "Checks when you publish" : void 0) ?? (patroller.lastActivityAt === null ? "" : timeAgo(patroller.lastActivityAt, now));
-		$[3] = idle;
-		$[4] = now;
-		$[5] = patroller.duty;
-		$[6] = patroller.lastActivityAt;
-		$[7] = working;
-		$[8] = t2;
-	} else t2 = $[8];
-	const subtitle = t2;
 	const count = patroller.findings.length;
-	const t3 = open || void 0;
-	const t4 = working ? statusId : void 0;
-	const t5 = working ? "working" : patroller.duty === "off" ? "asleep" : "idle";
-	let t6;
-	if ($[9] !== patroller.id || $[10] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Squareling, {
-			variant: patroller.id,
-			status: t5,
-			className: "size-5"
+	const t2 = open || void 0;
+	const t3 = working ? statusId : void 0;
+	let t4;
+	if ($[3] !== count || $[4] !== working) {
+		t4 = !working && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("group-focus-visible/patroller:ring-ring/50 pointer-events-none absolute -inset-[3px] rounded-full border group-focus-visible/patroller:ring-[3px]", count > 0 ? "border-foreground border-[1.5px]" : "border-border")
 		});
-		$[9] = patroller.id;
-		$[10] = t5;
-		$[11] = t6;
-	} else t6 = $[11];
+		$[3] = count;
+		$[4] = working;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== working) {
+		t5 = working && /* @__PURE__ */ jsx(WorkingArc, {});
+		$[6] = working;
+		$[7] = t5;
+	} else t5 = $[7];
+	const t6 = working ? "working" : patroller.duty === "off" ? "asleep" : "idle";
 	let t7;
-	if ($[12] !== working) {
-		t7 = working && /* @__PURE__ */ jsx(WorkingArc, {});
-		$[12] = working;
-		$[13] = t7;
-	} else t7 = $[13];
+	if ($[8] !== patroller.id || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: "bg-muted group-hover/patroller:bg-muted-foreground/15 group-data-popup-open/patroller:bg-muted-foreground/15 flex size-full items-center justify-center rounded-full transition-colors",
+			children: /* @__PURE__ */ jsx(Squareling, {
+				variant: patroller.id,
+				status: t6,
+				className: "size-6"
+			})
+		});
+		$[8] = patroller.id;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
 	let t8;
-	if ($[14] !== t6 || $[15] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("span", {
-			className: "bg-muted relative flex size-8 shrink-0 items-center justify-center rounded-full",
-			children: [t6, t7]
+	if ($[11] !== count) {
+		t8 = count > 0 && /* @__PURE__ */ jsx("span", {
+			"data-findings-count": true,
+			"aria-label": `${count} open ${count === 1 ? "finding" : "findings"}`,
+			className: "bg-foreground text-background ring-background absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium tabular-nums ring-2",
+			children: count
 		});
-		$[14] = t6;
+		$[11] = count;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== t4 || $[14] !== t5 || $[15] !== t7 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("span", {
+			className: "relative flex size-10 shrink-0 transition-[scale] duration-200 ease-out group-hover/patroller:scale-105 group-active/patroller:scale-95 motion-reduce:transition-none",
+			children: [
+				t4,
+				t5,
+				t7,
+				t8
+			]
+		});
+		$[13] = t4;
+		$[14] = t5;
 		$[15] = t7;
 		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
-	if ($[17] !== patroller.role) {
-		t9 = /* @__PURE__ */ jsx("span", {
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== patroller.role) {
+		t10 = /* @__PURE__ */ jsx("span", {
 			"data-patroller-role": true,
-			className: "truncate text-sm font-medium",
+			className: "max-w-full truncate text-[11px] leading-4 font-medium",
 			children: patroller.role
 		});
-		$[17] = patroller.role;
-		$[18] = t9;
-	} else t9 = $[18];
-	const t10 = working ? true : void 0;
+		$[18] = patroller.role;
+		$[19] = t10;
+	} else t10 = $[19];
 	let t11;
-	if ($[19] !== subtitle || $[20] !== t10) {
-		t11 = /* @__PURE__ */ jsx("span", {
-			"data-patroller-subtitle": true,
-			"aria-hidden": t10,
-			className: "text-muted-foreground truncate text-xs",
-			children: subtitle
+	if ($[20] !== t10 || $[21] !== t3 || $[22] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			"aria-describedby": t3,
+			className: "group/patroller flex max-w-full min-w-0 cursor-pointer flex-col items-center gap-1 pt-[3px] outline-none",
+			children: [t9, t10]
 		});
-		$[19] = subtitle;
 		$[20] = t10;
-		$[21] = t11;
-	} else t11 = $[21];
+		$[21] = t3;
+		$[22] = t9;
+		$[23] = t11;
+	} else t11 = $[23];
 	let t12;
-	if ($[22] !== t11 || $[23] !== t9) {
-		t12 = /* @__PURE__ */ jsxs("span", {
-			className: "flex min-w-0 flex-col",
-			children: [t9, t11]
-		});
-		$[22] = t11;
-		$[23] = t9;
-		$[24] = t12;
-	} else t12 = $[24];
+	if ($[24] !== onAsk || $[25] !== patroller) {
+		t12 = (finding) => onAsk(patroller, finding);
+		$[24] = onAsk;
+		$[25] = patroller;
+		$[26] = t12;
+	} else t12 = $[26];
 	let t13;
-	if ($[25] !== count) {
-		t13 = count > 0 && /* @__PURE__ */ jsx("span", {
-			"data-findings-count": true,
-			"aria-label": `${count} open ${count === 1 ? "finding" : "findings"}`,
-			className: "bg-foreground text-background ml-auto flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums",
-			children: count
+	if ($[27] !== inDraft || $[28] !== now || $[29] !== onApply || $[30] !== onDismiss || $[31] !== onOpenPatrolDraft || $[32] !== onShow || $[33] !== patrolDraft || $[34] !== patroller || $[35] !== singleLocale || $[36] !== t12) {
+		t13 = /* @__PURE__ */ jsx(PopoverContent, {
+			sideOffset: 8,
+			className: "w-96 gap-3 p-4",
+			children: /* @__PURE__ */ jsx(PatrollerCard, {
+				patroller,
+				now,
+				inDraft,
+				singleLocale,
+				onShow,
+				onApply,
+				onAsk: t12,
+				onDismiss,
+				patrolDraft,
+				onOpenPatrolDraft
+			})
 		});
-		$[25] = count;
-		$[26] = t13;
-	} else t13 = $[26];
+		$[27] = inDraft;
+		$[28] = now;
+		$[29] = onApply;
+		$[30] = onDismiss;
+		$[31] = onOpenPatrolDraft;
+		$[32] = onShow;
+		$[33] = patrolDraft;
+		$[34] = patroller;
+		$[35] = singleLocale;
+		$[36] = t12;
+		$[37] = t13;
+	} else t13 = $[37];
 	let t14;
-	if ($[27] !== t12 || $[28] !== t13 || $[29] !== t4 || $[30] !== t8) {
-		t14 = /* @__PURE__ */ jsxs(PopoverTrigger, {
-			"aria-describedby": t4,
-			className: "hover:bg-muted/60 data-popup-open:bg-muted/60 focus-visible:ring-ring/50 flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-left outline-none focus-visible:ring-[3px]",
-			children: [
-				t8,
-				t12,
-				t13
-			]
-		});
-		$[27] = t12;
-		$[28] = t13;
-		$[29] = t4;
-		$[30] = t8;
-		$[31] = t14;
-	} else t14 = $[31];
-	let t15;
-	if ($[32] !== patroller.role) {
-		t15 = /* @__PURE__ */ jsx(PopoverTitle, {
-			className: "text-sm",
-			children: patroller.role
-		});
-		$[32] = patroller.role;
-		$[33] = t15;
-	} else t15 = $[33];
-	let t16;
-	if ($[34] !== onAsk || $[35] !== patroller) {
-		t16 = (finding) => onAsk(patroller, finding);
-		$[34] = onAsk;
-		$[35] = patroller;
-		$[36] = t16;
-	} else t16 = $[36];
-	let t17;
-	if ($[37] !== inDraft || $[38] !== now || $[39] !== onApply || $[40] !== onDismiss || $[41] !== onOpenPatrolDraft || $[42] !== onShow || $[43] !== patrolDraft || $[44] !== patroller || $[45] !== t16) {
-		t17 = /* @__PURE__ */ jsx(PatrollerDetails, {
-			patroller,
-			now,
-			inDraft,
-			onShow,
-			onApply,
-			onAsk: t16,
-			onDismiss,
-			patrolDraft,
-			onOpenPatrolDraft
-		});
-		$[37] = inDraft;
-		$[38] = now;
-		$[39] = onApply;
-		$[40] = onDismiss;
-		$[41] = onOpenPatrolDraft;
-		$[42] = onShow;
-		$[43] = patrolDraft;
-		$[44] = patroller;
-		$[45] = t16;
-		$[46] = t17;
-	} else t17 = $[46];
-	let t18;
-	if ($[47] !== t15 || $[48] !== t17) {
-		t18 = /* @__PURE__ */ jsxs(PopoverContent, {
-			side: "left",
-			align: "start",
-			sideOffset: 12,
-			className: "w-80 gap-2 p-3",
-			children: [t15, t17]
-		});
-		$[47] = t15;
-		$[48] = t17;
-		$[49] = t18;
-	} else t18 = $[49];
-	let t19;
-	if ($[50] !== onOpenChange || $[51] !== open || $[52] !== t14 || $[53] !== t18) {
-		t19 = /* @__PURE__ */ jsxs(Popover, {
+	if ($[38] !== onOpenChange || $[39] !== open || $[40] !== t11 || $[41] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange,
-			children: [t14, t18]
+			children: [t11, t13]
 		});
-		$[50] = onOpenChange;
-		$[51] = open;
-		$[52] = t14;
-		$[53] = t18;
-		$[54] = t19;
-	} else t19 = $[54];
-	let t20;
-	if ($[55] !== working) {
-		t20 = working && `Working: ${working.charAt(0).toLowerCase()}${working.slice(1)}`;
-		$[55] = working;
-		$[56] = t20;
-	} else t20 = $[56];
-	let t21;
-	if ($[57] !== statusId || $[58] !== t20) {
-		t21 = /* @__PURE__ */ jsx("span", {
+		$[38] = onOpenChange;
+		$[39] = open;
+		$[40] = t11;
+		$[41] = t13;
+		$[42] = t14;
+	} else t14 = $[42];
+	let t15;
+	if ($[43] !== working) {
+		t15 = working && `Working: ${working.charAt(0).toLowerCase()}${working.slice(1)}`;
+		$[43] = working;
+		$[44] = t15;
+	} else t15 = $[44];
+	let t16;
+	if ($[45] !== statusId || $[46] !== t15) {
+		t16 = /* @__PURE__ */ jsx("span", {
 			id: statusId,
 			"data-working-status": true,
 			role: "status",
 			className: "sr-only",
-			children: t20
+			children: t15
 		});
-		$[57] = statusId;
-		$[58] = t20;
-		$[59] = t21;
-	} else t21 = $[59];
-	let t22;
-	if ($[60] !== patroller.id || $[61] !== t19 || $[62] !== t21 || $[63] !== t3) {
-		t22 = /* @__PURE__ */ jsxs("li", {
+		$[45] = statusId;
+		$[46] = t15;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== patroller.id || $[49] !== t14 || $[50] !== t16 || $[51] !== t2) {
+		t17 = /* @__PURE__ */ jsxs("li", {
 			"data-patroller": patroller.id,
-			"data-open": t3,
-			className: "flex flex-col",
-			children: [t19, t21]
+			"data-open": t2,
+			className: "flex justify-center",
+			children: [t14, t16]
+		});
+		$[48] = patroller.id;
+		$[49] = t14;
+		$[50] = t16;
+		$[51] = t2;
+		$[52] = t17;
+	} else t17 = $[52];
+	return t17;
+}
+/**
+* A patroller's popover, a profile card: its avatar and role, a tag of when it works where the
+* editor is over what it does, what it's on while it works, then what it did.
+*/
+function PatrollerCard(t0) {
+	const $ = c(47);
+	let props;
+	let singleLocale;
+	if ($[0] !== t0) {
+		({singleLocale, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = singleLocale;
+	} else {
+		props = $[1];
+		singleLocale = $[2];
+	}
+	const { patroller, inDraft } = props;
+	let t1;
+	if ($[3] !== patroller.id || $[4] !== patroller.working) {
+		t1 = patroller.working && workingSentence(patroller.id, patroller.working);
+		$[3] = patroller.id;
+		$[4] = patroller.working;
+		$[5] = t1;
+	} else t1 = $[5];
+	const working = t1;
+	let t2;
+	if ($[6] !== inDraft || $[7] !== patroller.duty || $[8] !== patroller.id || $[9] !== singleLocale) {
+		t2 = whenTag(patroller.id, patroller.duty, inDraft, singleLocale);
+		$[6] = inDraft;
+		$[7] = patroller.duty;
+		$[8] = patroller.id;
+		$[9] = singleLocale;
+		$[10] = t2;
+	} else t2 = $[10];
+	const when = t2;
+	const t3 = working ? "working" : patroller.duty === "off" ? "asleep" : "idle";
+	let t4;
+	if ($[11] !== patroller.id || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Squareling, {
+			variant: patroller.id,
+			status: t3,
+			className: "size-7"
+		});
+		$[11] = patroller.id;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== working) {
+		t5 = working && /* @__PURE__ */ jsx(WorkingArc, {});
+		$[14] = working;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("span", {
+			className: "bg-muted relative flex size-12 shrink-0 items-center justify-center rounded-full",
+			children: [t4, t5]
+		});
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== patroller.role) {
+		t7 = /* @__PURE__ */ jsx(PopoverTitle, {
+			className: "min-w-0 text-base",
+			children: patroller.role
+		});
+		$[19] = patroller.role;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("header", {
+			className: "flex items-center gap-3",
+			children: [t6, t7]
+		});
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	const t9 = when.runs ? "bg-emerald-500" : "bg-muted-foreground/40";
+	let t10;
+	if ($[24] !== t9) {
+		t10 = cn("size-1.5 rounded-full", t9);
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== t10) {
+		t11 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: t10
 		});
-		$[60] = patroller.id;
-		$[61] = t19;
-		$[62] = t21;
-		$[63] = t3;
-		$[64] = t22;
-	} else t22 = $[64];
-	return t22;
+		$[26] = t10;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== t11 || $[29] !== when.label) {
+		t12 = /* @__PURE__ */ jsxs("span", {
+			"data-patroller-when": true,
+			className: "bg-muted text-muted-foreground inline-flex items-center gap-1.5 rounded-full py-0.5 pr-2.5 pl-2 text-xs font-medium",
+			children: [t11, when.label]
+		});
+		$[28] = t11;
+		$[29] = when.label;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== patroller.id) {
+		t13 = aboutSentence(patroller.id);
+		$[31] = patroller.id;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] !== t13) {
+		t14 = /* @__PURE__ */ jsx("p", {
+			"data-patroller-about": true,
+			className: "text-sm",
+			children: t13
+		});
+		$[33] = t13;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== t12 || $[36] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-start gap-1.5",
+			children: [t12, t14]
+		});
+		$[35] = t12;
+		$[36] = t14;
+		$[37] = t15;
+	} else t15 = $[37];
+	let t16;
+	if ($[38] !== working) {
+		t16 = working && /* @__PURE__ */ jsx("p", {
+			"data-patroller-working": true,
+			className: "bg-muted rounded-md px-2.5 py-1.5 text-xs",
+			children: working
+		});
+		$[38] = working;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] !== props) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 border-t pt-3",
+			children: /* @__PURE__ */ jsx(PatrollerDetails, { ...props })
+		});
+		$[40] = props;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== t15 || $[43] !== t16 || $[44] !== t17 || $[45] !== t8) {
+		t18 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t8,
+			t15,
+			t16,
+			t17
+		] });
+		$[42] = t15;
+		$[43] = t16;
+		$[44] = t17;
+		$[45] = t8;
+		$[46] = t18;
+	} else t18 = $[46];
+	return t18;
 }
 /**
 * What a patroller's popover shows: its open findings with their actions, then its reports, then
@@ -1026,4 +1031,4 @@ function ReportSentence(t0) {
 }
 
 //#endregion
-export { Patrol, PatrolRoster, PatrollerDetails, PatrollerReports, inHeldOrder };
+export { Patrol, PatrolRoster, PatrollerCard, PatrollerDetails, PatrollerReports };