camox 0.71.0 → 0.74.1

package/dist/lib/use-thread.js

@@ -18,13 +18,13 @@ const OPEN = 1;
 *
 * When the agent on Live hands a request off to a draft it started, the studio that sent a
 * message of that run hears it (`onEnterDraft`), to enter the draft. The editor's Live thread
-* then starts afresh from the draft's card, which every studio on Live shows alone.
+* then starts afresh, and every studio on Live shows it empty.
 *
 * It reports what each writing script touched (`touched`), for runs one of its messages was part
 * of only, so that the studio follows the agent; teammates' runs leave it where it is.
 */
 function useThread(apiUrl, projectId, draftId, t0) {
-	const $ = c(46);
+	const $ = c(55);
 	let t1;
 	if ($[0] !== t0) {
 		t1 = t0 === void 0 ? {} : t0;
@@ -33,40 +33,80 @@ function useThread(apiUrl, projectId, draftId, t0) {
 	} else t1 = $[1];
 	const { onEnterDraft } = t1;
 	const [state, setState] = React.useState(EMPTY_THREAD_STATE);
+	const latest = React.useRef(state);
 	let t2;
-	if ($[2] !== state) {
-		t2 = threadViewOf(state);
-		$[2] = state;
-		$[3] = t2;
-	} else t2 = $[3];
-	const view = t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (frame) => {
+			latest.current = reduceThreadFrame(latest.current, frame);
+			setState(latest.current);
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	const fold = t2;
 	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ new Map();
+	if ($[3] !== state) {
+		t3 = threadViewOf(state);
+		$[3] = state;
 		$[4] = t3;
 	} else t3 = $[4];
-	const [unaccepted, setUnaccepted] = React.useState(t3);
-	const [error, setError] = React.useState();
+	const view = t3;
 	let t4;
-	if ($[5] !== apiUrl || $[6] !== draftId || $[7] !== projectId) {
-		t4 = () => new Set(handedOffTo(apiUrl, projectId, draftId));
-		$[5] = apiUrl;
-		$[6] = draftId;
-		$[7] = projectId;
-		$[8] = t4;
-	} else t4 = $[8];
-	const [sent] = React.useState(t4);
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ new Map();
+		$[5] = t4;
+	} else t4 = $[5];
+	const [unaccepted, setUnaccepted] = React.useState(t4);
+	const [error, setError] = React.useState();
+	let t5;
+	if ($[6] !== apiUrl || $[7] !== draftId || $[8] !== projectId) {
+		t5 = () => handedOffTo(apiUrl, projectId, draftId);
+		$[6] = apiUrl;
+		$[7] = draftId;
+		$[8] = projectId;
+		$[9] = t5;
+	} else t5 = $[9];
+	const [carried] = React.useState(t5);
+	let t6;
+	let t7;
+	if ($[10] !== apiUrl || $[11] !== carried || $[12] !== draftId || $[13] !== projectId) {
+		t6 = () => {
+			if (carried?.view) handedOff.set(threadKey(apiUrl, projectId, draftId), { sent: carried.sent });
+		};
+		t7 = [
+			apiUrl,
+			projectId,
+			draftId,
+			carried
+		];
+		$[10] = apiUrl;
+		$[11] = carried;
+		$[12] = draftId;
+		$[13] = projectId;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t6 = $[14];
+		t7 = $[15];
+	}
+	React.useEffect(t6, t7);
+	let t8;
+	if ($[16] !== carried?.sent) {
+		t8 = () => new Set(carried?.sent);
+		$[16] = carried?.sent;
+		$[17] = t8;
+	} else t8 = $[17];
+	const [sent] = React.useState(t8);
 	const shown = React.useRef(false);
 	const [shows, setShows] = React.useState(0);
 	const [touched, setTouched] = React.useState();
-	let t5;
-	if ($[9] !== apiUrl) {
-		t5 = apiSocketOptions(apiUrl);
-		$[9] = apiUrl;
-		$[10] = t5;
-	} else t5 = $[10];
+	let t9;
+	if ($[18] !== apiUrl) {
+		t9 = apiSocketOptions(apiUrl);
+		$[18] = apiUrl;
+		$[19] = t9;
+	} else t9 = $[19];
 	const socket = usePartySocket({
-		...t5,
+		...t9,
 		basePath: draftId ? `threads/draft/${projectId}/${draftId}` : `threads/live/${projectId}`,
 		maxEnqueuedMessages: 0,
 		shouldReconnectOnClose: _temp,
@@ -75,53 +115,56 @@ function useThread(apiUrl, projectId, draftId, t0) {
 		},
 		onMessage(event_0) {
 			if (typeof event_0.data !== "string") return;
-			let frame;
+			let frame_0;
 			try {
-				frame = JSON.parse(event_0.data);
+				frame_0 = JSON.parse(event_0.data);
 			} catch {
 				return;
 			}
-			onFrame(frame);
+			onFrame(frame_0);
 		}
 	});
-	let t6;
-	if ($[11] !== draftId || $[12] !== sent) {
-		t6 = (started) => draftId === null && started.operationIds.some((operationId) => sent.has(operationId));
-		$[11] = draftId;
-		$[12] = sent;
-		$[13] = t6;
-	} else t6 = $[13];
-	const asked = t6;
-	let t7;
-	if ($[14] !== sent) {
-		t7 = (batch) => batch.operationIds.some((operationId_0) => sent.has(operationId_0));
-		$[14] = sent;
-		$[15] = t7;
-	} else t7 = $[15];
-	const ours = t7;
-	let t8;
-	if ($[16] !== apiUrl || $[17] !== asked || $[18] !== onEnterDraft || $[19] !== ours || $[20] !== projectId || $[21] !== sent) {
-		t8 = (frame_0) => {
-			switch (frame_0.type) {
+	let t10;
+	if ($[20] !== draftId || $[21] !== sent) {
+		t10 = (started) => draftId === null && started.operationIds.some((operationId) => sent.has(operationId));
+		$[20] = draftId;
+		$[21] = sent;
+		$[22] = t10;
+	} else t10 = $[22];
+	const asked = t10;
+	let t11;
+	if ($[23] !== sent) {
+		t11 = (batch) => batch.operationIds.some((operationId_0) => sent.has(operationId_0));
+		$[23] = sent;
+		$[24] = t11;
+	} else t11 = $[24];
+	const ours = t11;
+	let t12;
+	if ($[25] !== apiUrl || $[26] !== asked || $[27] !== onEnterDraft || $[28] !== ours || $[29] !== projectId || $[30] !== sent) {
+		t12 = (frame_1) => {
+			switch (frame_1.type) {
 				case "started-draft":
-					if (asked(frame_0.startedDraft)) {
-						handedOff.set(threadKey(apiUrl, projectId, frame_0.startedDraft.draftId), sent);
-						onEnterDraft?.(frame_0.startedDraft.draftId);
+					if (asked(frame_1.startedDraft)) {
+						handedOff.set(threadKey(apiUrl, projectId, frame_1.startedDraft.draftId), {
+							sent,
+							view: runOf(threadViewOf(latest.current))
+						});
+						onEnterDraft?.(frame_1.startedDraft.draftId);
 					}
 					return;
 				case "events":
-					setState((current_2) => reduceThreadFrame(current_2, frame_0));
+					fold(frame_1);
 					if (!shown.current) {
 						shown.current = true;
 						setShows(_temp2);
 					}
 					return;
 				case "drafts":
-					setState((current_1) => reduceThreadFrame(current_1, frame_0));
+					fold(frame_1);
 					return;
 				case "touched":
-					if (ours(frame_0.touched)) {
-						const batch_0 = frame_0.touched;
+					if (ours(frame_1.touched)) {
+						const batch_0 = frame_1.touched;
 						setTouched((last) => ({
 							sequence: (last?.sequence ?? 0) + 1,
 							batch: batch_0
@@ -129,78 +172,78 @@ function useThread(apiUrl, projectId, draftId, t0) {
 					}
 					return;
 				case "accepted":
-					setUnaccepted((current_0) => without(current_0, frame_0.operationId));
+					setUnaccepted((current_0) => without(current_0, frame_1.operationId));
 					return;
 				case "error": {
-					console.error("[useThread]", frame_0.message);
-					setError(frame_0.message);
-					const { operationId: operationId_1 } = frame_0;
+					console.error("[useThread]", frame_1.message);
+					setError(frame_1.message);
+					const { operationId: operationId_1 } = frame_1;
 					if (operationId_1) setUnaccepted((current) => without(current, operationId_1));
 					return;
 				}
 			}
 		};
-		$[16] = apiUrl;
-		$[17] = asked;
-		$[18] = onEnterDraft;
-		$[19] = ours;
-		$[20] = projectId;
-		$[21] = sent;
-		$[22] = t8;
-	} else t8 = $[22];
-	const onFrame = React.useEffectEvent(t8);
-	let t9;
-	if ($[23] !== socket || $[24] !== unaccepted) {
-		t9 = () => {
+		$[25] = apiUrl;
+		$[26] = asked;
+		$[27] = onEnterDraft;
+		$[28] = ours;
+		$[29] = projectId;
+		$[30] = sent;
+		$[31] = t12;
+	} else t12 = $[31];
+	const onFrame = React.useEffectEvent(t12);
+	let t13;
+	if ($[32] !== socket || $[33] !== unaccepted) {
+		t13 = () => {
 			for (const [operationId_2, message] of unaccepted) transmit(socket, {
 				type: "send",
 				operationId: operationId_2,
 				...message
 			});
 		};
-		$[23] = socket;
-		$[24] = unaccepted;
-		$[25] = t9;
-	} else t9 = $[25];
-	const resendUnaccepted = React.useEffectEvent(t9);
-	let t10;
-	if ($[26] !== resendUnaccepted || $[27] !== shows) {
-		t10 = () => {
+		$[32] = socket;
+		$[33] = unaccepted;
+		$[34] = t13;
+	} else t13 = $[34];
+	const resendUnaccepted = React.useEffectEvent(t13);
+	let t14;
+	if ($[35] !== resendUnaccepted || $[36] !== shows) {
+		t14 = () => {
 			if (shows > 0) resendUnaccepted();
 		};
-		$[26] = resendUnaccepted;
-		$[27] = shows;
-		$[28] = t10;
-	} else t10 = $[28];
-	let t11;
-	if ($[29] !== shows) {
-		t11 = [shows];
-		$[29] = shows;
-		$[30] = t11;
-	} else t11 = $[30];
-	React.useEffect(t10, t11);
-	let t12;
-	let t13;
-	if ($[31] !== socket) {
-		t12 = () => {
+		$[35] = resendUnaccepted;
+		$[36] = shows;
+		$[37] = t14;
+	} else t14 = $[37];
+	let t15;
+	if ($[38] !== shows) {
+		t15 = [shows];
+		$[38] = shows;
+		$[39] = t15;
+	} else t15 = $[39];
+	React.useEffect(t14, t15);
+	let t16;
+	let t17;
+	if ($[40] !== socket) {
+		t16 = () => {
 			const resync = () => {
 				if (document.visibilityState === "visible") transmit(socket, { type: "resync" });
 			};
 			document.addEventListener("visibilitychange", resync);
 			return () => document.removeEventListener("visibilitychange", resync);
 		};
-		t13 = [socket];
-		$[31] = socket;
-		$[32] = t12;
-		$[33] = t13;
+		t17 = [socket];
+		$[40] = socket;
+		$[41] = t16;
+		$[42] = t17;
 	} else {
-		t12 = $[32];
-		t13 = $[33];
+		t16 = $[41];
+		t17 = $[42];
 	}
-	React.useEffect(t12, t13);
-	let t14;
-	if ($[34] !== sent || $[35] !== socket) {
-		t14 = (text, where) => {
+	React.useEffect(t16, t17);
+	let t18;
+	if ($[43] !== sent || $[44] !== socket) {
+		t18 = (text, where) => {
 			const operationId_3 = crypto.randomUUID();
 			const message_0 = where ? {
 				text,
@@ -208,45 +251,46 @@ function useThread(apiUrl, projectId, draftId, t0) {
 			} : { text };
 			sent.add(operationId_3);
 			setError(void 0);
-			setUnaccepted((current_3) => new Map(current_3).set(operationId_3, message_0));
+			setUnaccepted((current_1) => new Map(current_1).set(operationId_3, message_0));
 			transmit(socket, {
 				type: "send",
 				operationId: operationId_3,
 				...message_0
 			});
 		};
-		$[34] = sent;
-		$[35] = socket;
-		$[36] = t14;
-	} else t14 = $[36];
-	const send = t14;
-	let t15;
-	if ($[37] !== socket) {
-		t15 = () => transmit(socket, { type: "stop" });
-		$[37] = socket;
-		$[38] = t15;
-	} else t15 = $[38];
-	const stop = t15;
-	const t16 = unaccepted.size > 0;
-	let t17;
-	if ($[39] !== error || $[40] !== send || $[41] !== stop || $[42] !== t16 || $[43] !== touched || $[44] !== view) {
-		t17 = {
-			view,
-			sending: t16,
+		$[43] = sent;
+		$[44] = socket;
+		$[45] = t18;
+	} else t18 = $[45];
+	const send = t18;
+	let t19;
+	if ($[46] !== socket) {
+		t19 = () => transmit(socket, { type: "stop" });
+		$[46] = socket;
+		$[47] = t19;
+	} else t19 = $[47];
+	const stop = t19;
+	const t20 = shows === 0 && carried?.view || view;
+	const t21 = unaccepted.size > 0;
+	let t22;
+	if ($[48] !== error || $[49] !== send || $[50] !== stop || $[51] !== t20 || $[52] !== t21 || $[53] !== touched) {
+		t22 = {
+			view: t20,
+			sending: t21,
 			send,
 			stop,
 			error,
 			touched
 		};
-		$[39] = error;
-		$[40] = send;
-		$[41] = stop;
-		$[42] = t16;
-		$[43] = touched;
-		$[44] = view;
-		$[45] = t17;
-	} else t17 = $[45];
-	return t17;
+		$[48] = error;
+		$[49] = send;
+		$[50] = stop;
+		$[51] = t20;
+		$[52] = t21;
+		$[53] = touched;
+		$[54] = t22;
+	} else t22 = $[54];
+	return t22;
 }
 function _temp2(count) {
 	return count + 1;
@@ -255,14 +299,28 @@ function _temp(event) {
 	return event.code !== THREAD_ENDED_CLOSE_CODE;
 }
 /**
-* The operation ids of the messages a studio sent on Live, by the draft the agent on Live handed
-* its request off to: the draft's agent runs on them, so once the studio follows that draft's
-* thread, it follows what they touch.
+* What a studio carries from Live into the draft the agent on Live handed its request off to, by
+* that draft: the operation ids of the messages it sent on Live, which the draft's agent runs on,
+* so once the studio follows that draft's thread, it follows what they touch; and the request as
+* Live showed it, which the draft's thread opens with.
 */
 const handedOff = /* @__PURE__ */ new Map();
+/**
+* The request a Live view ends on, as the draft it's handed off to goes on with it: the messages
+* after the agent's last, the draft's agent already at work.
+*/
+function runOf(view) {
+	let opening = view.messages.length;
+	while (opening > 0 && ["editor", "connectedAgent"].includes(view.messages[opening - 1].from)) opening -= 1;
+	return {
+		messages: view.messages.slice(opening),
+		running: true,
+		activity: "startingDraft"
+	};
+}
 const threadKey = (apiUrl, projectId, draftId) => `${apiUrl}|${projectId}|${draftId}`;
-/** The operation ids a studio carries into the draft `draftId`: none for Live. */
-const handedOffTo = (apiUrl, projectId, draftId) => draftId !== null && handedOff.get(threadKey(apiUrl, projectId, draftId)) || [];
+/** What a studio carries into the draft `draftId`: nothing for Live. */
+const handedOffTo = (apiUrl, projectId, draftId) => draftId === null ? void 0 : handedOff.get(threadKey(apiUrl, projectId, draftId));
 function transmit(socket, message) {
 	if (socket.readyState === OPEN) socket.send(JSON.stringify(message));
 }

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.71.0";
+var version = "0.74.1";
 
 //#endregion
 export { version };

package/dist/studio-overlays.css

@@ -51,35 +51,6 @@ html[data-camox-canvas-shown] iframe {
   --camox-overlay-color-selected: #c084fc;
 }
 
-/* ---- Unset reference placeholder (editable preview only) ---- */
-
-.camox-reference-placeholder {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 4rem;
-  padding: 1rem 1.5rem;
-  border: 2px dashed var(--camox-overlay-color-hover);
-  border-radius: 0.5rem;
-  background: color-mix(in srgb, var(--camox-overlay-color-selected) 8%, transparent);
-  color: var(--camox-overlay-color-selected);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25;
-  text-align: center;
-  cursor: pointer;
-}
-
-.camox-reference-placeholder:hover,
-.camox-reference-placeholder:focus-visible {
-  border-color: var(--camox-overlay-color-selected);
-  background: color-mix(in srgb, var(--camox-overlay-color-selected) 14%, transparent);
-}
-
 /* ---- Block error boundary ---- */
 
 .camox-block-error {