camox 0.67.0 → 0.69.0

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

@@ -7,7 +7,8 @@ import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.js";
 import { STUDIO_BASE_PATH, STUDIO_CONTENT_PATH, STUDIO_SETTINGS_PATH } from "../routes.js";
 import { studioStore } from "../studioStore.js";
 import { UserButton } from "./UserButton.js";
-import { DraftPicker, PendingChanges } from "./DraftsControl.js";
+import { ConnectAgent } from "./ConnectAgent.js";
+import { DraftPicker } from "./DraftsControl.js";
 import { LocalePicker } from "./LocalePicker.js";
 import { ProjectMenu } from "./ProjectMenu.js";
 import { c } from "react/compiler-runtime";
@@ -144,7 +145,7 @@ const Navbar = (t0) => {
 	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
 		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(PendingChanges, {}), /* @__PURE__ */ jsx(UserButton, {})]
+			children: [/* @__PURE__ */ jsx(ConnectAgent, {}), /* @__PURE__ */ jsx(UserButton, {})]
 		});
 		$[23] = t10;
 	} else t10 = $[23];

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

@@ -1,4 +1,3 @@
-import { useDraftScope } from "../../../lib/draft-scope.js";
 import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
 import { getDraftReadClient } from "../../../lib/api-client.js";
@@ -9,6 +8,7 @@ import { localeLabel } from "../localeOptions.js";
 import { askAgentMessage, findingSentence, fixLabel } from "../findingSentence.js";
 import { useShowInCanvas } from "../showInCanvas.js";
 import { draftLabel, plural, timeAgo } from "../draftLabel.js";
+import { useLeaveDraft } from "../viewSwitch.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { CHECKS_RUNNING_ERROR, CONFLICTS_CHANGED_ERROR, FINDINGS_OPEN_ERROR, REVISION_CHANGED_ERROR, TRANSLATIONS_PENDING_ERROR } from "@camox/api-contract/drafts";
@@ -1133,25 +1133,6 @@ function _temp11(bullet, index) {
 function _temp10(error) {
 	return toast.error(error.message || "Could not summarize the draft");
 }
-/** Switches the studio to Live once its draft ended here, replacing the draft's URL entry. */
-function useLeaveDraft() {
-	const $ = c(2);
-	const draftScope = useDraftScope();
-	let t0;
-	if ($[0] !== draftScope) {
-		t0 = (ended, t1) => {
-			const { discarded: t2 } = t1 === void 0 ? {} : t1;
-			const discarded = t2 === void 0 ? false : t2;
-			draftScope.leave(ended);
-			if (!ended) return;
-			const what = discarded ? "Changes discarded" : `Draft ${ended.outcome}`;
-			toast.success(`${what}. You're now viewing Live.`);
-		};
-		$[0] = draftScope;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
 /**
 * Renames a regular draft, whichever draft the studio views: the request names the draft it
 * renames. A blank name clears it, so the draft shows its computed label again.
@@ -1807,4 +1788,4 @@ function _temp14(error) {
 }
 
 //#endregion
-export { DeleteDraftDialog, ReviewDraftSheet, useLeaveDraft, useRenameDraft };
+export { DeleteDraftDialog, ReviewDraftSheet, useRenameDraft };

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

@@ -9,7 +9,6 @@ import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
-import { Button } from "@camox/ui/button";
 import { Check, Command, EyeOff, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
@@ -22,11 +21,7 @@ const UserButton = () => {
 	if (!isAuthenticated || isLoading) {
 		let t0;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t0 = /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: "icon",
-				children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" })
-			});
+			t0 = /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(User, { className: "size-4" }) }) });
 			$[0] = t0;
 		} else t0 = $[0];
 		return t0;
@@ -62,11 +57,12 @@ function AuthenticatedUserButton({ theme, setTheme }) {
 	const userImage = session?.user?.image;
 	const userInitials = userName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-		render: /* @__PURE__ */ jsx(Button, {
-			variant: "outline",
-			size: "icon"
-		}),
-		children: /* @__PURE__ */ jsx(User, { className: "text-muted-foreground" })
+		"aria-label": "Account",
+		className: "focus-visible:ring-ring/50 rounded-full outline-none focus-visible:ring-3",
+		children: /* @__PURE__ */ jsxs(Avatar, { children: [userImage && /* @__PURE__ */ jsx(AvatarImage, {
+			src: userImage,
+			alt: userName
+		}), /* @__PURE__ */ jsx(AvatarFallback, { children: userInitials })] })
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 		className: "w-72",
 		align: "end",

package/dist/features/studio/studioStore.js

@@ -10,7 +10,6 @@ const studioStore = createStore({
 			startRenaming: false
 		},
 		isDeleteDraftDialogOpen: false,
-		isKeepDraftOpen: false,
 		localeDialog: null,
 		websiteLocation: null,
 		agentAsk: null,
@@ -79,18 +78,6 @@ const studioStore = createStore({
 				isDeleteDraftDialogOpen: false
 			};
 		},
-		openKeepDraft: (context) => {
-			return {
-				...context,
-				isKeepDraftOpen: true
-			};
-		},
-		closeKeepDraft: (context) => {
-			return {
-				...context,
-				isKeepDraftOpen: false
-			};
-		},
 		openLocaleDialog: (context, event) => {
 			return {
 				...context,

package/dist/features/studio/viewSwitch.js

@@ -0,0 +1,64 @@
+import { useDraftScope } from "../../lib/draft-scope.js";
+import { useViewShown } from "../../lib/view-switch.js";
+import { c } from "react/compiler-runtime";
+import { toast } from "@camox/ui/toaster";
+
+//#region src/features/studio/viewSwitch.ts
+/**
+* Tells the editor the studio heard them while it switches to another draft or locale: the
+* studio keeps showing what it showed until the next view is ready, then shows it at once.
+* `switching` settles once it shows.
+*/
+function toastSwitch(switching, messages) {
+	toast.promise(switching, {
+		...messages,
+		error: "Something went wrong while switching. Reload the page to try again."
+	});
+}
+/**
+* Switches to another draft or locale with `navigate`, which starts the navigation that does,
+* saying so in a toast until the next view shows.
+*/
+function useSwitchView() {
+	const $ = c(2);
+	const shown = useViewShown();
+	let t0;
+	if ($[0] !== shown) {
+		t0 = (navigate, messages) => toastSwitch(Promise.resolve(navigate()).then(() => shown()), messages);
+		$[0] = shown;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* Switches the studio to Live once the draft it views ended, by this member, here or in another
+* tab, replacing the draft's URL entry. Called once the studio already left the draft, it does
+* nothing.
+*/
+function useLeaveDraft() {
+	const $ = c(3);
+	const draftScope = useDraftScope();
+	const shown = useViewShown();
+	let t0;
+	if ($[0] !== draftScope || $[1] !== shown) {
+		t0 = (ended, t1) => {
+			const { discarded: t2 } = t1 === void 0 ? {} : t1;
+			const discarded = t2 === void 0 ? false : t2;
+			if (ended && draftScope.current() !== ended.draftId) return;
+			draftScope.leave(ended);
+			if (!ended) return;
+			const what = discarded ? "Changes discarded" : `Draft ${ended.outcome}`;
+			toastSwitch(shown(), {
+				loading: `${what}. Switching to Live…`,
+				success: `${what}. You're now viewing Live.`
+			});
+		};
+		$[0] = draftScope;
+		$[1] = shown;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+
+//#endregion
+export { useLeaveDraft, useSwitchView };

package/dist/lib/auth.js

@@ -250,6 +250,10 @@ function useSessionState(authClient, track) {
 	const subscribe = t1;
 	return React.useSyncExternalStore(track ? subscribe : noSubscription, getSnapshot, getSnapshot);
 }
+/** The id of the member signed in, as the session the client holds says: null without one. */
+function signedInUserId(authClient) {
+	return authClient.$store.atoms.session.value.data?.user?.id ?? null;
+}
 function useAuthState() {
 	const $ = c(10);
 	const { authClient, initialAuthenticated: t0, exchangingToken: t1, sessionless: t2 } = useAuthContext();
@@ -394,4 +398,4 @@ function _temp4() {
 }
 
 //#endregion
-export { AuthContext, createCamoxAuthClient, getAuthCookieHeader, getAuthRequestCredentials, useAuthActions, useAuthContext, useAuthState, useIsAuthenticated, useProcessOtt, useProjectUuid, useSignInRedirect };
+export { AuthContext, createCamoxAuthClient, getAuthCookieHeader, getAuthRequestCredentials, signedInUserId, useAuthActions, useAuthContext, useAuthState, useIsAuthenticated, useProcessOtt, useProjectUuid, useSignInRedirect };

package/dist/lib/draft-scope.js

@@ -158,37 +158,50 @@ const DraftScopeContext = React.createContext(null);
 /**
 * The draft scope the studio is in, for handlers and effects. Render code reads the draft it
 * views from `useCurrentDraftId`: the scope object never changes, so a memoized render reading
-* `current()` from it would keep showing the draft of its first render.
+* `current()` from it would keep showing the draft of its first render, and while a switch to
+* another draft loads, `current()` already names the next one.
 */
 function useDraftScope() {
 	const scope = React.useContext(DraftScopeContext);
 	if (!scope) throw new Error("useDraftScope must be used inside a DraftScopeContext provider");
 	return scope;
 }
+/**
+* The draft the page runtime's committed render shows, or null for Live: undefined outside it.
+* A switch to another draft renders in a transition, so until it commits the studio keeps
+* showing the draft it was in, while the scope already reads and writes the next one.
+*/
+const ShownDraftContext = React.createContext(void 0);
 const noScope = () => null;
 const noSubscription = () => () => {};
+/** The draft the render shows: the committed one in the page runtime, the scope's elsewhere. */
+function useShownDraft(scope) {
+	const shown = React.use(ShownDraftContext);
+	const current = scope?.current ?? noScope;
+	const followed = shown === void 0 && scope ? scope.subscribe : noSubscription;
+	const draftId = React.useSyncExternalStore(followed, current, current);
+	return shown === void 0 ? draftId : shown;
+}
 /** The draft the studio is in, or null for Live. The caller re-renders after every move. */
 function useCurrentDraftId() {
-	const scope = useDraftScope();
-	return React.useSyncExternalStore(scope.subscribe, scope.current, scope.current);
+	return useShownDraft(useDraftScope());
 }
 /** The draft scope and the draft it views, outside the studio too, where there is none. */
 function useOptionalDraftScope() {
 	const $ = c(3);
 	const scope = React.useContext(DraftScopeContext);
-	const current = scope?.current ?? noScope;
-	const draftId = React.useSyncExternalStore(scope?.subscribe ?? noSubscription, current, current);
-	let t0;
-	if ($[0] !== draftId || $[1] !== scope) {
-		t0 = {
+	const t0 = useShownDraft(scope);
+	let t1;
+	if ($[0] !== scope || $[1] !== t0) {
+		t1 = {
 			scope,
-			draftId
+			draftId: t0
 		};
-		$[0] = draftId;
-		$[1] = scope;
-		$[2] = t0;
-	} else t0 = $[2];
-	return t0;
+		$[0] = scope;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 /**
 * Follows the draft a browser URL names, for a studio mounted in a host application, whose
@@ -199,4 +212,4 @@ function followUrl(scope, href) {
 }
 
 //#endregion
-export { DraftScopeContext, createDraftScope, draftNamedBy, followUrl, useCurrentDraftId, useDraftScope, useOptionalDraftScope, withoutDraft };
+export { DraftScopeContext, ShownDraftContext, createDraftScope, draftNamedBy, followUrl, useCurrentDraftId, useDraftScope, useOptionalDraftScope, withoutDraft };

package/dist/lib/studio-reads.js

@@ -2,11 +2,12 @@ import { useCurrentDraftId } from "./draft-scope.js";
 import { ViewLocaleContext } from "./view-locale-context.js";
 import { fetchRuntimeJson } from "../features/runtime/navigationTarget.js";
 import { collectFileIds } from "./normalized-data.js";
+import { useSwitchHold } from "./view-switch.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { inScope, queryKeys, scopeOfKey } from "@camox/api-contract/query-keys";
 import { PATROLLER_IDS } from "@camox/api-contract/patrol";
-import { useQueries, useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { useQueries, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 
 //#region src/lib/studio-reads.ts
 function entry(definition) {
@@ -505,7 +506,7 @@ function useStudioCache() {
 }
 /**
 * The draft and locale the caller's render shows, which its reads name: the read hooks re-render
-* after a move to another draft, and a locale switch mounts the page afresh.
+* after a move to another draft or locale, reading its keys.
 */
 function useShownTarget() {
 	const $ = c(3);
@@ -548,7 +549,7 @@ function useRead(read) {
 * the locale the caller's render shows, unless `locale` names another.
 */
 function useReadQuery(read, t0) {
-	const $ = c(13);
+	const $ = c(18);
 	let t1;
 	if ($[0] !== t0) {
 		t1 = t0 === void 0 ? {} : t0;
@@ -558,6 +559,7 @@ function useReadQuery(read, t0) {
 	const { enabled, select, locale } = t1;
 	const shown = useShownTarget();
 	const cache = useStudioCache();
+	const queryClient = useQueryClient();
 	let t2;
 	if ($[2] !== locale || $[3] !== shown) {
 		t2 = locale ? {
@@ -577,24 +579,38 @@ function useReadQuery(read, t0) {
 		$[7] = read;
 		$[8] = t3;
 	} else t3 = $[8];
+	const options = t3;
 	let t4;
-	if ($[9] !== enabled || $[10] !== select || $[11] !== t3) {
+	if ($[9] !== enabled || $[10] !== options || $[11] !== select) {
 		t4 = {
-			...t3,
+			...options,
 			enabled,
 			select
 		};
 		$[9] = enabled;
-		$[10] = select;
-		$[11] = t3;
+		$[10] = options;
+		$[11] = select;
 		$[12] = t4;
 	} else t4 = $[12];
-	return useQuery(t4);
+	const result = useQuery(t4);
+	let t5;
+	if ($[13] !== enabled || $[14] !== options || $[15] !== queryClient || $[16] !== result) {
+		t5 = () => enabled !== false && result.isPending ? queryClient.fetchQuery(options) : null;
+		$[13] = enabled;
+		$[14] = options;
+		$[15] = queryClient;
+		$[16] = result;
+		$[17] = t5;
+	} else t5 = $[17];
+	const hold = useSwitchHold(t5);
+	if (hold) throw hold;
+	return result;
 }
 function useReadQueries(list, combine) {
-	const $ = c(10);
+	const $ = c(13);
 	const inDraft = useShownTarget();
 	const cache = useStudioCache();
+	const queryClient = useQueryClient();
 	let t0;
 	if ($[0] !== cache || $[1] !== inDraft || $[2] !== list) {
 		let t1;
@@ -610,17 +626,34 @@ function useReadQueries(list, combine) {
 		$[2] = list;
 		$[3] = t0;
 	} else t0 = $[3];
+	const queries = t0;
 	let t1;
-	if ($[7] !== combine || $[8] !== t0) {
+	if ($[7] !== combine || $[8] !== queries) {
 		t1 = {
-			queries: t0,
+			queries,
 			combine
 		};
 		$[7] = combine;
-		$[8] = t0;
+		$[8] = queries;
 		$[9] = t1;
 	} else t1 = $[9];
-	return useQueries(t1);
+	const combined = useQueries(t1);
+	let t2;
+	if ($[10] !== queries || $[11] !== queryClient) {
+		t2 = () => {
+			const loading = queries.filter((t3) => {
+				const { queryKey } = t3;
+				return (queryClient.getQueryState(queryKey)?.status ?? "pending") === "pending";
+			});
+			return loading.length ? Promise.all(loading.map((options) => queryClient.fetchQuery(options))) : null;
+		};
+		$[10] = queries;
+		$[11] = queryClient;
+		$[12] = t2;
+	} else t2 = $[12];
+	const hold = useSwitchHold(t2);
+	if (hold) throw hold;
+	return combined;
 }
 
 //#endregion

package/dist/lib/view-switch.js

@@ -0,0 +1,64 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/lib/view-switch.ts
+const ViewSwitchesContext = React.createContext(null);
+/**
+* Set while a render switches to another view: the time after which it stops waiting for reads
+* and commits with what it has. Null otherwise.
+*/
+const ViewSwitchDeadlineContext = React.createContext(null);
+/** How long a switch waits for the next view before showing it however far it got. */
+const SWITCH_WAIT_MS = 1e4;
+/** Prepares the studio's part of every switch with `preparer`, while mounted. */
+function useViewPreparer(preparer) {
+	const $ = c(5);
+	const switches = React.use(ViewSwitchesContext);
+	const prepare = React.useEffectEvent(preparer);
+	let t0;
+	if ($[0] !== prepare || $[1] !== switches) {
+		t0 = () => switches?.prepare((next) => prepare(next));
+		$[0] = prepare;
+		$[1] = switches;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== switches) {
+		t1 = [switches];
+		$[3] = switches;
+		$[4] = t1;
+	} else t1 = $[4];
+	React.useEffect(t0, t1);
+}
+/**
+* The last navigation started, settling once it shows: for the studio to say a switch it started,
+* or one that followed what it did, is under way. Outside the page runtime, it settles at once.
+*/
+function useViewShown() {
+	const $ = c(2);
+	const switches = React.use(ViewSwitchesContext);
+	let t0;
+	if ($[0] !== switches) {
+		t0 = () => switches?.shown() ?? Promise.resolve();
+		$[0] = switches;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* While a render switches views, a read still loading holds the switch back rather than show
+* its loading state: the promise to suspend on until it loads or the switch stops waiting.
+* Undefined when the render should show the read as it is.
+*/
+function useSwitchHold(loading) {
+	const deadline = React.use(ViewSwitchDeadlineContext);
+	if (deadline === null) return void 0;
+	const left = deadline - Date.now();
+	if (left <= 0) return void 0;
+	const pending = loading();
+	if (!pending) return void 0;
+	return Promise.race([pending.catch(() => {}), new Promise((resolve) => setTimeout(resolve, left))]);
+}
+
+//#endregion
+export { SWITCH_WAIT_MS, ViewSwitchDeadlineContext, ViewSwitchesContext, useSwitchHold, useViewPreparer, useViewShown };

package/dist/package.js

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