camox 0.43.0 → 0.45.0

package/dist/hooks/use-debounced-field.js

@@ -1,6 +1,5 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-debounced-field.ts
 /**
@@ -15,58 +14,128 @@ import { useCallback, useEffect, useRef, useState } from "react";
 * While `isFocused` is true we ignore `serverValue` changes; when the user
 * leaves the input we resync.
 */
-function useDebouncedField(serverValue, onSave, delay = 500) {
+function useDebouncedField(serverValue, onSave, t0) {
+	const $ = c(17);
+	const delay = t0 === void 0 ? 500 : t0;
 	const [value, setLocal] = useState(serverValue);
 	const [isFocused, setIsFocused] = useState(false);
 	const saveRef = useRef(onSave);
-	saveRef.current = onSave;
+	let t1;
+	if ($[0] !== onSave) {
+		t1 = () => {
+			saveRef.current = onSave;
+		};
+		$[0] = onSave;
+		$[1] = t1;
+	} else t1 = $[1];
+	useLayoutEffect(t1);
 	const timerRef = useRef(null);
 	const pendingRef = useRef(null);
-	useEffect(() => {
+	let t2;
+	if ($[2] !== isFocused || $[3] !== serverValue) {
+		t2 = {
+			serverValue,
+			isFocused
+		};
+		$[2] = isFocused;
+		$[3] = serverValue;
+		$[4] = t2;
+	} else t2 = $[4];
+	const [synced, setSynced] = useState(t2);
+	if (!Object.is(synced.serverValue, serverValue) || synced.isFocused !== isFocused) {
+		setSynced({
+			serverValue,
+			isFocused
+		});
 		if (!isFocused) setLocal(serverValue);
-	}, [serverValue, isFocused]);
-	const flush = useCallback(() => {
-		if (timerRef.current) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-		if (pendingRef.current) {
-			const { value: v } = pendingRef.current;
-			pendingRef.current = null;
-			saveRef.current(v);
-		}
-	}, []);
-	const cancel = useCallback(() => {
-		if (timerRef.current) clearTimeout(timerRef.current);
-		timerRef.current = null;
-		pendingRef.current = null;
-	}, []);
-	const setValue = useCallback((v_0) => {
-		setLocal(v_0);
-		pendingRef.current = { value: v_0 };
-		if (timerRef.current) clearTimeout(timerRef.current);
-		timerRef.current = window.setTimeout(() => {
+	}
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			if (timerRef.current) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+			if (pendingRef.current) {
+				const { value: v } = pendingRef.current;
+				pendingRef.current = null;
+				saveRef.current(v);
+			}
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const flush = t3;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
 			timerRef.current = null;
-			const p = pendingRef.current;
 			pendingRef.current = null;
-			if (p) saveRef.current(p.value);
-		}, delay);
-	}, [delay]);
-	const onFocus = useCallback(() => setIsFocused(true), []);
-	const onBlur = useCallback(() => {
-		setIsFocused(false);
-		flush();
-	}, [flush]);
-	useEffect(() => () => flush(), [flush]);
-	return {
-		value,
-		setValue,
-		isFocused,
-		onFocus,
-		onBlur,
-		flush,
-		cancel
-	};
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	const cancel = t4;
+	let t5;
+	if ($[7] !== delay) {
+		t5 = (v_0) => {
+			setLocal(v_0);
+			pendingRef.current = { value: v_0 };
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				timerRef.current = null;
+				const p = pendingRef.current;
+				pendingRef.current = null;
+				if (p) saveRef.current(p.value);
+			}, delay);
+		};
+		$[7] = delay;
+		$[8] = t5;
+	} else t5 = $[8];
+	const setValue = t5;
+	let t6;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsFocused(true);
+		$[9] = t6;
+	} else t6 = $[9];
+	const onFocus = t6;
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			setIsFocused(false);
+			flush();
+		};
+		$[10] = t7;
+	} else t7 = $[10];
+	const onBlur = t7;
+	let t8;
+	let t9;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => () => flush();
+		t9 = [flush];
+		$[11] = t8;
+		$[12] = t9;
+	} else {
+		t8 = $[11];
+		t9 = $[12];
+	}
+	useEffect(t8, t9);
+	let t10;
+	if ($[13] !== isFocused || $[14] !== setValue || $[15] !== value) {
+		t10 = {
+			value,
+			setValue,
+			isFocused,
+			onFocus,
+			onBlur,
+			flush,
+			cancel
+		};
+		$[13] = isFocused;
+		$[14] = setValue;
+		$[15] = value;
+		$[16] = t10;
+	} else t10 = $[16];
+	return t10;
 }
 
 //#endregion

package/dist/hooks/use-file-upload.js

@@ -1,76 +1,105 @@
-"use client";
-
 import { getAuthCookieHeader } from "../lib/auth.js";
-import { getApiUrl, getEnvironmentName } from "../lib/api-client.js";
-import { useCallback, useRef, useState } from "react";
+import { getApiUrl, getContentWriteHeaders } from "../lib/api-client.js";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-file-upload.ts
 function useFileUpload(options) {
-	const [uploads, setUploads] = useState([]);
-	const apiUrl = getApiUrl();
+	const $ = c(10);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [uploads, setUploads] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = getApiUrl();
+		$[1] = t1;
+	} else t1 = $[1];
+	const apiUrl = t1;
 	const nextId = useRef(0);
 	const projectIdRef = useRef(options?.projectId);
-	projectIdRef.current = options?.projectId;
 	const onFileCommittedRef = useRef(options?.onFileCommitted);
-	onFileCommittedRef.current = options?.onFileCommitted;
-	const uploadSingleFile = useCallback(async (file, itemId) => {
-		const result = await new Promise((resolve, reject) => {
-			const xhr = new XMLHttpRequest();
-			xhr.upload.addEventListener("progress", (event) => {
-				if (!event.lengthComputable) return;
-				const progress = Math.round(event.loaded / event.total * 100);
-				setUploads((prev) => prev.map((u) => u.id === itemId ? {
-					...u,
-					progress
-				} : u));
+	let t2;
+	if ($[2] !== options?.onFileCommitted || $[3] !== options?.projectId) {
+		t2 = () => {
+			projectIdRef.current = options?.projectId;
+			onFileCommittedRef.current = options?.onFileCommitted;
+		};
+		$[2] = options?.onFileCommitted;
+		$[3] = options?.projectId;
+		$[4] = t2;
+	} else t2 = $[4];
+	useLayoutEffect(t2);
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = async (file, itemId) => {
+			const result = await new Promise((resolve, reject) => {
+				const xhr = new XMLHttpRequest();
+				const draft = getContentWriteHeaders();
+				xhr.upload.addEventListener("progress", (event) => {
+					if (!event.lengthComputable) return;
+					const progress = Math.round(event.loaded / event.total * 100);
+					setUploads((prev) => prev.map((u) => u.id === itemId ? {
+						...u,
+						progress
+					} : u));
+				});
+				xhr.addEventListener("load", () => {
+					draft.settle(xhr.status >= 200 && xhr.status < 300);
+					if (xhr.status >= 200 && xhr.status < 300) try {
+						resolve(JSON.parse(xhr.responseText));
+					} catch {
+						reject(/* @__PURE__ */ new Error("Invalid response from upload"));
+					}
+					else reject(/* @__PURE__ */ new Error(`Upload failed: ${xhr.status}`));
+				});
+				xhr.addEventListener("error", () => {
+					draft.settle(false);
+					reject(/* @__PURE__ */ new Error("Upload failed"));
+				});
+				const formData = new FormData();
+				formData.append("file", file);
+				formData.append("projectId", String(projectIdRef.current ?? 0));
+				const uploadUrl = `${apiUrl}/files/upload`;
+				const authCookieHeader = getAuthCookieHeader();
+				xhr.open("POST", uploadUrl);
+				xhr.withCredentials = !authCookieHeader;
+				if (authCookieHeader) xhr.setRequestHeader("Better-Auth-Cookie", authCookieHeader);
+				for (const [name, value] of Object.entries(draft.headers)) xhr.setRequestHeader(name, value);
+				xhr.send(formData);
 			});
-			xhr.addEventListener("load", () => {
-				if (xhr.status >= 200 && xhr.status < 300) try {
-					resolve(JSON.parse(xhr.responseText));
-				} catch {
-					reject(/* @__PURE__ */ new Error("Invalid response from upload"));
-				}
-				else reject(/* @__PURE__ */ new Error(`Upload failed: ${xhr.status}`));
+			onFileCommittedRef.current?.({
+				fileId: result.id,
+				url: result.url,
+				filename: result.filename,
+				mimeType: result.mimeType
 			});
-			xhr.addEventListener("error", () => {
-				reject(/* @__PURE__ */ new Error("Upload failed"));
+			setUploads((prev_0) => prev_0.map((u_0) => u_0.id === itemId ? {
+				...u_0,
+				status: "complete",
+				progress: 100
+			} : u_0));
+			setTimeout(() => {
+				setUploads((prev_1) => prev_1.filter((u_1) => u_1.id !== itemId));
+			}, 2e3);
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const uploadSingleFile = t3;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (files) => {
+			const newItems = Array.from(files).map((file_0) => {
+				nextId.current = nextId.current + 1;
+				return {
+					id: String(nextId.current),
+					filename: file_0.name,
+					progress: 0,
+					status: "uploading"
+				};
 			});
-			const formData = new FormData();
-			formData.append("file", file);
-			formData.append("projectId", String(projectIdRef.current ?? 0));
-			const uploadUrl = `${apiUrl}/files/upload`;
-			const authCookieHeader = getAuthCookieHeader();
-			xhr.open("POST", uploadUrl);
-			xhr.withCredentials = !authCookieHeader;
-			if (authCookieHeader) xhr.setRequestHeader("Better-Auth-Cookie", authCookieHeader);
-			const envName = getEnvironmentName();
-			if (envName) xhr.setRequestHeader("x-environment-name", envName);
-			xhr.send(formData);
-		});
-		onFileCommittedRef.current?.({
-			fileId: String(result.id),
-			url: result.url,
-			filename: result.filename,
-			mimeType: result.mimeType
-		});
-		setUploads((prev_0) => prev_0.map((u_0) => u_0.id === itemId ? {
-			...u_0,
-			status: "complete",
-			progress: 100
-		} : u_0));
-		setTimeout(() => {
-			setUploads((prev_1) => prev_1.filter((u_1) => u_1.id !== itemId));
-		}, 2e3);
-	}, [apiUrl]);
-	return {
-		uploads,
-		uploadFiles: useCallback((files) => {
-			const newItems = Array.from(files).map((file_0) => ({
-				id: String(nextId.current++),
-				filename: file_0.name,
-				progress: 0,
-				status: "uploading"
-			}));
 			setUploads((prev_2) => [...prev_2, ...newItems]);
 			Promise.all(Array.from(files).map((file_1, i) => uploadSingleFile(file_1, newItems[i].id).catch((err) => {
 				const message = err instanceof Error ? err.message : "Upload failed";
@@ -80,11 +109,29 @@ function useFileUpload(options) {
 					error: message
 				} : u_2));
 			})));
-		}, [uploadSingleFile]),
-		clearAll: useCallback(() => {
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	const uploadFiles = t4;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => {
 			setUploads([]);
-		}, [])
-	};
+		};
+		$[7] = t5;
+	} else t5 = $[7];
+	const clearAll = t5;
+	let t6;
+	if ($[8] !== uploads) {
+		t6 = {
+			uploads,
+			uploadFiles,
+			clearAll
+		};
+		$[8] = uploads;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
 }
 
 //#endregion

package/dist/hooks/use-marquee-selection.js

@@ -4,16 +4,12 @@ import { useRef, useState } from "react";
 //#region src/hooks/use-marquee-selection.ts
 const DRAG_THRESHOLD = 5;
 function useMarqueeSelection(containerRef, onSelectionChange) {
-	const $ = c(18);
-	if ($[0] !== "d6476ded33fc0bb3f0404905feeb866445a4281802c5c1350a0c10252b9e0e06") {
-		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d6476ded33fc0bb3f0404905feeb866445a4281802c5c1350a0c10252b9e0e06";
-	}
+	const $ = c(17);
 	const [selectionRect, setSelectionRect] = useState(null);
 	const startPoint = useRef(null);
 	const isDragging = useRef(false);
 	let t0;
-	if ($[1] !== containerRef) {
+	if ($[0] !== containerRef) {
 		t0 = (e) => {
 			const container = containerRef.current;
 			if (!container) return null;
@@ -23,13 +19,13 @@ function useMarqueeSelection(containerRef, onSelectionChange) {
 				y: e.clientY - bounds.top + container.scrollTop
 			};
 		};
-		$[1] = containerRef;
-		$[2] = t0;
-	} else t0 = $[2];
+		$[0] = containerRef;
+		$[1] = t0;
+	} else t0 = $[1];
 	const getContainerRelativePoint = t0;
 	const computeRect = _temp;
 	let t1;
-	if ($[3] !== containerRef) {
+	if ($[2] !== containerRef) {
 		t1 = (rect) => {
 			const container_0 = containerRef.current;
 			if (!container_0) return /* @__PURE__ */ new Set();
@@ -50,12 +46,12 @@ function useMarqueeSelection(containerRef, onSelectionChange) {
 			}
 			return ids;
 		};
-		$[3] = containerRef;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[2] = containerRef;
+		$[3] = t1;
+	} else t1 = $[3];
 	const findIntersectingIds = t1;
 	let t2;
-	if ($[5] !== getContainerRelativePoint) {
+	if ($[4] !== getContainerRelativePoint) {
 		t2 = (e_0) => {
 			if (e_0.button !== 0) return;
 			if (e_0.target.closest("[data-asset-id]")) return;
@@ -65,12 +61,12 @@ function useMarqueeSelection(containerRef, onSelectionChange) {
 			isDragging.current = false;
 			e_0.currentTarget.setPointerCapture(e_0.pointerId);
 		};
-		$[5] = getContainerRelativePoint;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[4] = getContainerRelativePoint;
+		$[5] = t2;
+	} else t2 = $[5];
 	const onPointerDown = t2;
 	let t3;
-	if ($[7] !== findIntersectingIds || $[8] !== getContainerRelativePoint || $[9] !== onSelectionChange) {
+	if ($[6] !== findIntersectingIds || $[7] !== getContainerRelativePoint || $[8] !== onSelectionChange) {
 		t3 = (e_1) => {
 			if (!startPoint.current) return;
 			const point_0 = getContainerRelativePoint(e_1);
@@ -85,15 +81,15 @@ function useMarqueeSelection(containerRef, onSelectionChange) {
 			setSelectionRect(rect_0);
 			onSelectionChange(findIntersectingIds(rect_0));
 		};
-		$[7] = findIntersectingIds;
-		$[8] = getContainerRelativePoint;
-		$[9] = onSelectionChange;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[6] = findIntersectingIds;
+		$[7] = getContainerRelativePoint;
+		$[8] = onSelectionChange;
+		$[9] = t3;
+	} else t3 = $[9];
 	const onPointerMove = t3;
 	const didDrag = useRef(false);
 	let t4;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = (e_2) => {
 			if (!startPoint.current) return;
 			e_2.currentTarget.releasePointerCapture(e_2.pointerId);
@@ -102,31 +98,31 @@ function useMarqueeSelection(containerRef, onSelectionChange) {
 			isDragging.current = false;
 			setSelectionRect(null);
 		};
-		$[11] = t4;
-	} else t4 = $[11];
+		$[10] = t4;
+	} else t4 = $[10];
 	const onPointerUp = t4;
 	let t5;
-	if ($[12] !== onPointerDown || $[13] !== onPointerMove) {
+	if ($[11] !== onPointerDown || $[12] !== onPointerMove) {
 		t5 = {
 			onPointerDown,
 			onPointerMove,
 			onPointerUp
 		};
-		$[12] = onPointerDown;
-		$[13] = onPointerMove;
-		$[14] = t5;
-	} else t5 = $[14];
+		$[11] = onPointerDown;
+		$[12] = onPointerMove;
+		$[13] = t5;
+	} else t5 = $[13];
 	let t6;
-	if ($[15] !== selectionRect || $[16] !== t5) {
+	if ($[14] !== selectionRect || $[15] !== t5) {
 		t6 = {
 			selectionRect,
 			didDragRef: didDrag,
 			handlers: t5
 		};
-		$[15] = selectionRect;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
+		$[14] = selectionRect;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
 	return t6;
 }
 function _temp(a, b) {

package/dist/hooks/use-page-destinations.js

@@ -1,53 +1,85 @@
-import { useProjectSlug } from "../lib/auth.js";
-import { getPageDestinations } from "../core/pageDestinations.js";
+import { useProjectUuid } from "../lib/auth.js";
 import { useCamoxApp } from "../features/provider/components/CamoxAppContext.js";
-import { pageQueries, projectQueries } from "../lib/queries.js";
+import { reads, useReadQuery } from "../lib/studio-reads.js";
+import { linkablePages, useLinkablePages } from "../lib/link-pages.js";
+import { getPageDestinations } from "../core/pageDestinations.js";
 import { c } from "react/compiler-runtime";
-import { useQuery } from "@tanstack/react-query";
 
 //#region src/hooks/use-page-destinations.ts
+/** The pages of the locale viewed, which the studio navigates to. */
 function usePageDestinations() {
 	const $ = c(11);
-	if ($[0] !== "5104e69847ee48202a1abdefc32d4e478db3a82331029421687a5ec8f7a46eaa") {
-		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "5104e69847ee48202a1abdefc32d4e478db3a82331029421687a5ec8f7a46eaa";
-	}
 	const app = useCamoxApp();
-	const projectSlug = useProjectSlug();
+	const projectUuid = useProjectUuid();
 	let t0;
-	if ($[1] !== projectSlug) {
-		t0 = projectQueries.getBySlug(projectSlug);
-		$[1] = projectSlug;
-		$[2] = t0;
-	} else t0 = $[2];
-	const { data: project } = useQuery(t0);
+	if ($[0] !== projectUuid) {
+		t0 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useReadQuery(t0);
 	let t1;
-	if ($[3] !== project?.id) {
-		t1 = pageQueries.list(project?.id ?? 0);
-		$[3] = project?.id;
-		$[4] = t1;
-	} else t1 = $[4];
+	if ($[2] !== projectUuid) {
+		t1 = reads.pageList({ projectUuid });
+		$[2] = projectUuid;
+		$[3] = t1;
+	} else t1 = $[3];
 	const t2 = !!project;
 	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = {
-			...t1,
-			enabled: t2
-		};
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	const { data: pages } = useQuery(t3);
+	if ($[4] !== t2) {
+		t3 = { enabled: t2 };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const { data: pages } = useReadQuery(t1, t3);
 	let t4;
-	if ($[8] !== app || $[9] !== pages) {
-		t4 = getPageDestinations(pages ?? [], app.getLayouts());
+	if ($[6] !== pages) {
+		t4 = pages ?? [];
+		$[6] = pages;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== app || $[9] !== t4) {
+		t5 = getPageDestinations(t4, app.getLayouts());
 		$[8] = app;
-		$[9] = pages;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+/**
+* The pages a link picker offers in the locale viewed: the locale's own, then the default
+* locale's pages it misses, which links to them lead to (see `linkablePages`).
+*/
+function useLinkDestinations() {
+	const $ = c(7);
+	const app = useCamoxApp();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { fetchProject: true };
+		$[0] = t0;
+	} else t0 = $[0];
+	const { pages, fallbackPages } = useLinkablePages(useProjectUuid(), t0);
+	let t1;
+	if ($[1] !== app || $[2] !== fallbackPages || $[3] !== pages) {
+		let t2;
+		if ($[5] !== pages) {
+			t2 = pages ?? [];
+			$[5] = pages;
+			$[6] = t2;
+		} else t2 = $[6];
+		t1 = getPageDestinations(linkablePages(t2, fallbackPages).map(_temp), app.getLayouts());
+		$[1] = app;
+		$[2] = fallbackPages;
+		$[3] = pages;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function _temp(t0) {
+	const { page } = t0;
+	return page;
 }
 
 //#endregion
-export { usePageDestinations };
+export { useLinkDestinations, usePageDestinations };

package/dist/lib/api-client-server.d.ts

@@ -0,0 +1,5 @@
+import { Router } from "@camox/api-contract";
+import { RouterClient } from "@orpc/server";
+//#region src/lib/api-client-server.d.ts
+export type ServerApiClient = RouterClient<Router>;
+//#endregion

package/dist/lib/api-client-server.js

@@ -1,15 +1,21 @@
+import { DRAFT_HEADER } from "@camox/api-contract/drafts";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 
 //#region src/lib/api-client-server.ts
-function createServerApiClient(apiUrl, environmentName, authToken) {
+/**
+* An API client for the plugin's own requests. `draftId` names the draft they read and write:
+* dev mode sends `development`, and a release names none, so it writes Live.
+*/
+function createServerApiClient(apiUrl, authToken, draftId) {
 	const headers = {};
-	if (environmentName) headers["x-environment-name"] = environmentName;
 	if (authToken) headers.Authorization = `Bearer ${authToken}`;
-	return createORPCClient(new RPCLink({
+	if (draftId) headers[DRAFT_HEADER] = draftId;
+	const link = new RPCLink({
 		url: `${apiUrl}/rpc`,
 		headers
-	}));
+	});
+	return createORPCClient(link);
 }
 
 //#endregion

package/dist/lib/api-client.d.ts

@@ -0,0 +1,6 @@
+import "./draft-scope.js";
+import { Router } from "@camox/api-contract";
+import { RouterClient } from "@orpc/server";
+//#region src/lib/api-client.d.ts
+export type ApiClient = RouterClient<Router>;
+//#endregion