camox 0.18.2 → 0.20.0

package/dist/features/preview/components/PageContentSheet.js

@@ -18,9 +18,9 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { CircleMinus, CirclePlus, CornerLeftUp } from "lucide-react";
+import { Spinner } from "@camox/ui/spinner";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
-import { Spinner } from "@camox/ui/spinner";
 import { Switch } from "@camox/ui/switch";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@camox/ui/breadcrumb";
 

package/dist/features/preview/components/PagePicker.js

@@ -11,9 +11,9 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Skeleton } from "@camox/ui/skeleton";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 
 //#region src/features/preview/components/PagePicker.tsx
 const CREATE_PAGE_VALUE = "__create_page__";

package/dist/features/preview/components/ShikiMarkdown.js

@@ -1,7 +1,8 @@
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { codeToHtml } from "shiki";
+import { createHighlighterCore } from "@shikijs/core";
+import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
 
 //#region src/features/preview/components/ShikiMarkdown.tsx
 const css = `
@@ -11,11 +12,20 @@ const css = `
   background-color: var(--shiki-dark-bg) !important;
 }
 `;
+let highlighterPromise = null;
+const getHighlighter = () => {
+	if (!highlighterPromise) highlighterPromise = createHighlighterCore({
+		themes: [import("@shikijs/themes/github-light"), import("@shikijs/themes/github-dark-high-contrast")],
+		langs: [import("@shikijs/langs/markdown")],
+		engine: createJavaScriptRegexEngine()
+	});
+	return highlighterPromise;
+};
 const ShikiMarkdown = (t0) => {
 	const $ = c(7);
-	if ($[0] !== "b223838fb3a1b4481de41582ca6cb14c501b277b861d32801b02a34152f069d4") {
+	if ($[0] !== "51a753852d99d64ce6db6e4ded83a948d584276c60158342567a84f8fad92985") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b223838fb3a1b4481de41582ca6cb14c501b277b861d32801b02a34152f069d4";
+		$[0] = "51a753852d99d64ce6db6e4ded83a948d584276c60158342567a84f8fad92985";
 	}
 	const { code } = t0;
 	const [html, setHtml] = React.useState("");
@@ -24,15 +34,16 @@ const ShikiMarkdown = (t0) => {
 	if ($[1] !== code) {
 		t1 = () => {
 			let cancelled = false;
-			codeToHtml(code, {
-				lang: "markdown",
-				themes: {
-					light: "github-light",
-					dark: "github-dark-high-contrast"
-				},
-				defaultColor: false
-			}).then((result) => {
-				if (!cancelled) setHtml(result);
+			getHighlighter().then((highlighter) => {
+				if (cancelled) return;
+				setHtml(highlighter.codeToHtml(code, {
+					lang: "markdown",
+					themes: {
+						light: "github-light",
+						dark: "github-dark-high-contrast"
+					},
+					defaultColor: false
+				}));
 			});
 			return () => {
 				cancelled = true;

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

@@ -1,94 +1,398 @@
 import { AuthContext } from "../../../lib/auth.js";
+import { environmentMutations, environmentQueries, projectQueries } from "../../../lib/queries.js";
 import { c } from "react/compiler-runtime";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { toast } from "@camox/ui/toaster";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, Download, Upload } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Badge } from "@camox/ui/badge";
+import { Separator } from "@camox/ui/separator";
+import { Spinner } from "@camox/ui/spinner";
 
 //#region src/features/studio/components/EnvironmentMenu.tsx
+const PRODUCTION_ENV = "production";
+/**
+* Renders the first incompatibility reason as a single-sentence explanation.
+* Mirrors the framings used in the plan: "Cannot push because block type X
+* exists in dev but not in production. Deploy your code to production…".
+*/
+function formatReason(reason, direction) {
+	const isPush = direction === "push";
+	const sourceLabel = isPush ? "your dev environment" : "production";
+	const targetLabel = isPush ? "production" : "your dev environment";
+	const remedy = isPush ? "Deploy your code to production to register it, then try again." : "Run your dev project locally to register it, then try again.";
+	switch (reason.kind) {
+		case "block-definition-missing-in-source": return `Block type "${reason.blockId}" exists in ${targetLabel} but not in ${sourceLabel}.`;
+		case "block-definition-missing-in-target": return `Block type "${reason.blockId}" exists in ${sourceLabel} but not in ${targetLabel}. ${remedy}`;
+		case "block-definition-schema-mismatch": return `Block type "${reason.blockId}" has a different "${reason.field}" between envs. Sync block definitions and try again.`;
+		case "layout-missing-in-source": return `Layout "${reason.layoutId}" exists in ${targetLabel} but not in ${sourceLabel}.`;
+		case "layout-missing-in-target": return `Layout "${reason.layoutId}" exists in ${sourceLabel} but not in ${targetLabel}. ${remedy}`;
+	}
+}
 const EnvironmentMenu = () => {
-	const $ = c(14);
-	if ($[0] !== "b4c87e8e94e837c7c310a7417eb826babd26658f7e32a825af55ee5b28e4b94c") {
-		for (let $i = 0; $i < 14; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b4c87e8e94e837c7c310a7417eb826babd26658f7e32a825af55ee5b28e4b94c";
+	const $ = c(80);
+	if ($[0] !== "1f0c4a40f8c8f7e8cc223d91ecc208bcc158a215f699a477b4952e9fe211174f") {
+		for (let $i = 0; $i < 80; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1f0c4a40f8c8f7e8cc223d91ecc208bcc158a215f699a477b4952e9fe211174f";
 	}
 	const [open, setOpen] = React.useState(false);
+	const [pendingDirection, setPendingDirection] = React.useState(null);
 	const authCtx = React.useContext(AuthContext);
+	const queryClient = useQueryClient();
+	let t0;
+	if ($[1] !== authCtx?.projectSlug) {
+		t0 = projectQueries.getBySlug(authCtx?.projectSlug ?? "");
+		$[1] = authCtx?.projectSlug;
+		$[2] = t0;
+	} else t0 = $[2];
+	const t1 = !!authCtx?.projectSlug;
+	let t2;
+	if ($[3] !== t0 || $[4] !== t1) {
+		t2 = {
+			...t0,
+			enabled: t1
+		};
+		$[3] = t0;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	const projectId = useQuery(t2).data?.id;
+	const environmentName = authCtx?.environmentName;
+	const isProduction = environmentName === PRODUCTION_ENV;
+	const canReplicate = !!projectId && !!environmentName && !isProduction;
+	let t3;
+	if ($[6] !== environmentName || $[7] !== projectId) {
+		t3 = environmentQueries.checkCompatibility(projectId ?? 0, environmentName ?? "", PRODUCTION_ENV);
+		$[6] = environmentName;
+		$[7] = projectId;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = open && canReplicate;
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = {
+			...t3,
+			enabled: t4
+		};
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const pushCheck = useQuery(t5);
+	let t6;
+	if ($[12] !== environmentName || $[13] !== projectId) {
+		t6 = environmentQueries.checkCompatibility(projectId ?? 0, PRODUCTION_ENV, environmentName ?? "");
+		$[12] = environmentName;
+		$[13] = projectId;
+		$[14] = t6;
+	} else t6 = $[14];
+	const t7 = open && canReplicate;
+	let t8;
+	if ($[15] !== t6 || $[16] !== t7) {
+		t8 = {
+			...t6,
+			enabled: t7
+		};
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	const pullCheck = useQuery(t8);
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = environmentMutations.replicate();
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== queryClient) {
+		t10 = (data, variables) => {
+			const verb = variables.targetEnvName === PRODUCTION_ENV ? "Pushed to production" : "Pulled from production";
+			const { pages, blocks, files } = data.copied;
+			toast.success(`${verb} — ${pages} pages, ${blocks} blocks, ${files} files`);
+			queryClient.invalidateQueries({ queryKey: ["camox"] });
+			setPendingDirection(null);
+			setOpen(false);
+		};
+		$[19] = queryClient;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (error) => {
+			console.error("Failed to replicate environment:", error);
+			toast.error("Could not replicate environment");
+			setPendingDirection(null);
+		};
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t10) {
+		t12 = {
+			...t9,
+			onSuccess: t10,
+			onError: t11
+		};
+		$[22] = t10;
+		$[23] = t12;
+	} else t12 = $[23];
+	const replicate = useMutation(t12);
 	if (!authCtx?.environmentName) return null;
-	const isProduction = authCtx.environmentName === "production";
 	const label = isProduction ? "PROD" : "DEV";
 	const badgeClassName = isProduction ? "bg-green-100 text-green-800 border border-green-300 hover:bg-green-100 dark:bg-green-900 dark:text-green-300 dark:border-green-700 dark:hover:bg-green-900 font-mono text-xs" : "bg-yellow-100 text-yellow-800 border border-yellow-300 hover:bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300 dark:border-yellow-700 dark:hover:bg-yellow-900 font-mono text-xs";
-	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(Button, {
+	let t13;
+	if ($[24] !== canReplicate || $[25] !== environmentName || $[26] !== pendingDirection || $[27] !== projectId || $[28] !== replicate) {
+		t13 = () => {
+			if (!pendingDirection || !canReplicate || !environmentName || !projectId) return;
+			const sourceEnvName = pendingDirection === "push" ? environmentName : PRODUCTION_ENV;
+			const targetEnvName = pendingDirection === "push" ? PRODUCTION_ENV : environmentName;
+			replicate.mutate({
+				projectId,
+				sourceEnvName,
+				targetEnvName
+			});
+		};
+		$[24] = canReplicate;
+		$[25] = environmentName;
+		$[26] = pendingDirection;
+		$[27] = projectId;
+		$[28] = replicate;
+		$[29] = t13;
+	} else t13 = $[29];
+	const handleConfirm = t13;
+	let t14;
+	if ($[30] !== pullCheck || $[31] !== pushCheck || $[32] !== replicate.isPending) {
+		t14 = (direction) => {
+			const check = direction === "push" ? pushCheck : pullCheck;
+			const checking = check.isLoading;
+			const compatible = check.data?.compatible ?? false;
+			const reason = check.data && !check.data.compatible ? check.data.reasons[0] : null;
+			const Icon = direction === "push" ? Upload : Download;
+			const actionLabel = direction === "push" ? "Push to production" : "Pull from production";
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "w-full justify-start gap-2",
+					disabled: checking || !compatible || replicate.isPending,
+					onClick: () => setPendingDirection(direction),
+					children: [checking ? /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground" }) : /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-4" }), /* @__PURE__ */ jsx("span", { children: actionLabel })]
+				}), reason ? /* @__PURE__ */ jsx("p", {
+					className: "text-destructive text-xs leading-tight",
+					children: formatReason(reason, direction)
+				}) : null]
+			});
+		};
+		$[30] = pullCheck;
+		$[31] = pushCheck;
+		$[32] = replicate.isPending;
+		$[33] = t14;
+	} else t14 = $[33];
+	const renderActionButton = t14;
+	let t15;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			className: "gap-2"
 		});
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] !== badgeClassName || $[3] !== label) {
-		t1 = /* @__PURE__ */ jsx(Badge, {
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== badgeClassName || $[36] !== label) {
+		t16 = /* @__PURE__ */ jsx(Badge, {
 			variant: "secondary",
 			className: badgeClassName,
 			children: label
 		});
-		$[2] = badgeClassName;
-		$[3] = label;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] !== t1) {
-		t3 = /* @__PURE__ */ jsxs(PopoverTrigger, {
-			render: t0,
-			children: [t1, t2]
+		$[35] = badgeClassName;
+		$[36] = label;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t16) {
+		t18 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: t15,
+			children: [t16, t17]
 		});
-		$[6] = t1;
-		$[7] = t3;
-	} else t3 = $[7];
-	let t4;
-	if ($[8] !== isProduction) {
-		t4 = /* @__PURE__ */ jsx(PopoverContent, {
-			className: "w-96 p-4",
+		$[39] = t16;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== isProduction || $[42] !== renderActionButton) {
+		t19 = /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-96 p-0",
 			align: "start",
 			side: "bottom",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-3",
+				className: "flex flex-col gap-3 py-4",
 				children: isProduction ? /* @__PURE__ */ jsx("p", {
-					className: "text-sm",
+					className: "px-4 text-sm",
 					children: "You are viewing the production environment."
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm",
-					children: "This environment is your personal space to iterate on content and data structures. It doesn't affect production data."
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-xs",
-					children: "You will be able to pull and push data to the production env from here."
-				})] })
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "px-4 text-sm",
+						children: "This environment is your personal space to iterate on content and data structures. It doesn't affect production data."
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground px-4 text-xs font-medium",
+						children: "Transfer data across environments"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2 px-4",
+						children: [renderActionButton("push"), renderActionButton("pull")]
+					})
+				] })
 			})
 		});
-		$[8] = isProduction;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== open || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Popover, {
+		$[41] = isProduction;
+		$[42] = renderActionButton;
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== open || $[45] !== t18 || $[46] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange: setOpen,
-			children: [t3, t4]
+			children: [t18, t19]
+		});
+		$[44] = open;
+		$[45] = t18;
+		$[46] = t19;
+		$[47] = t20;
+	} else t20 = $[47];
+	const t21 = !!pendingDirection;
+	let t22;
+	if ($[48] !== replicate.isPending) {
+		t22 = (o) => {
+			if (!o && !replicate.isPending) setPendingDirection(null);
+		};
+		$[48] = replicate.isPending;
+		$[49] = t22;
+	} else t22 = $[49];
+	const t23 = pendingDirection === "push" ? "Push to production?" : "Pull from production?";
+	let t24;
+	if ($[50] !== t23) {
+		t24 = /* @__PURE__ */ jsx(AlertDialogTitle, { children: t23 });
+		$[50] = t23;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== environmentName || $[53] !== pendingDirection) {
+		t25 = /* @__PURE__ */ jsx(AlertDialogDescription, { children: pendingDirection === "push" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			"This will replace all content in",
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "font-mono font-semibold",
+				children: "production"
+			}),
+			" with the current",
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "font-mono font-semibold",
+				children: environmentName
+			}),
+			" environment. This action cannot be undone."
+		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			"This will replace all content in your",
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "font-mono font-semibold",
+				children: environmentName
+			}),
+			" environment with ",
+			/* @__PURE__ */ jsx("span", {
+				className: "font-mono font-semibold",
+				children: "production"
+			}),
+			". This action cannot be undone."
+		] }) });
+		$[52] = environmentName;
+		$[53] = pendingDirection;
+		$[54] = t25;
+	} else t25 = $[54];
+	let t26;
+	if ($[55] !== t24 || $[56] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [t24, t25] });
+		$[55] = t24;
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== replicate.isPending) {
+		t27 = /* @__PURE__ */ jsx(AlertDialogCancel, {
+			variant: "outline",
+			size: "default",
+			disabled: replicate.isPending,
+			children: "Cancel"
+		});
+		$[58] = replicate.isPending;
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] !== replicate.isPending) {
+		t28 = replicate.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[60] = replicate.isPending;
+		$[61] = t28;
+	} else t28 = $[61];
+	const t29 = pendingDirection === "push" ? "Push" : "Pull";
+	let t30;
+	if ($[62] !== handleConfirm || $[63] !== replicate.isPending || $[64] !== t28 || $[65] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(AlertDialogAction, {
+			variant: "destructive",
+			onClick: handleConfirm,
+			disabled: replicate.isPending,
+			children: [t28, t29]
+		});
+		$[62] = handleConfirm;
+		$[63] = replicate.isPending;
+		$[64] = t28;
+		$[65] = t29;
+		$[66] = t30;
+	} else t30 = $[66];
+	let t31;
+	if ($[67] !== t27 || $[68] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t27, t30] });
+		$[67] = t27;
+		$[68] = t30;
+		$[69] = t31;
+	} else t31 = $[69];
+	let t32;
+	if ($[70] !== t26 || $[71] !== t31) {
+		t32 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t26, t31] });
+		$[70] = t26;
+		$[71] = t31;
+		$[72] = t32;
+	} else t32 = $[72];
+	let t33;
+	if ($[73] !== t21 || $[74] !== t22 || $[75] !== t32) {
+		t33 = /* @__PURE__ */ jsx(AlertDialog, {
+			open: t21,
+			onOpenChange: t22,
+			children: t32
 		});
-		$[10] = open;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[73] = t21;
+		$[74] = t22;
+		$[75] = t32;
+		$[76] = t33;
+	} else t33 = $[76];
+	let t34;
+	if ($[77] !== t20 || $[78] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(Fragment, { children: [t20, t33] });
+		$[77] = t20;
+		$[78] = t33;
+		$[79] = t34;
+	} else t34 = $[79];
+	return t34;
 };
 
 //#endregion

package/dist/features/vite/vite.js

@@ -102,6 +102,10 @@ function camox(options) {
 					__CAMOX_API_URL__: JSON.stringify(apiUrl),
 					__CAMOX_PROJECT_SLUG__: JSON.stringify(options.projectSlug)
 				},
+				resolve: { alias: [{
+					find: /^tslib$/,
+					replacement: "tslib/tslib.es6.mjs"
+				}] },
 				optimizeDeps: { include: [
 					"react",
 					"react-dom",
@@ -136,6 +140,11 @@ function camox(options) {
 					"camox > @orpc/client",
 					"camox > @orpc/client/fetch",
 					"camox > @orpc/tanstack-query",
+					"camox > @shikijs/core",
+					"camox > @shikijs/engine-javascript",
+					"camox > @shikijs/langs/markdown",
+					"camox > @shikijs/themes/github-dark-high-contrast",
+					"camox > @shikijs/themes/github-light",
 					"camox > @sinclair/typebox",
 					"camox > @takumi-rs/image-response",
 					"camox > @tanstack/react-form",
@@ -144,7 +153,6 @@ function camox(options) {
 					"camox > fractional-indexing",
 					"camox > lexical",
 					"camox > posthog-js",
-					"camox > shiki",
 					"camox > @camox/ui > sonner",
 					"camox > @camox/ui > lucide-react",
 					"camox > lucide-react",

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-debounced-field.ts
+/**
+* Local state for a field that autosaves to a server value, debouncing the
+* save and refusing to overwrite the user's in-progress edit when the server
+* response lands.
+*
+* Without focus tracking, a fast typist can lose characters: their first
+* keystroke triggers a debounced save → the mutation roundtrips → react-query
+* pushes the (now stale) server value back through props → the input is reset
+* to the just-saved value, dropping whatever the user typed in the meantime.
+* While `isFocused` is true we ignore `serverValue` changes; when the user
+* leaves the input we resync.
+*/
+function useDebouncedField(serverValue, onSave, delay = 500) {
+	const [value, setLocal] = useState(serverValue);
+	const [isFocused, setIsFocused] = useState(false);
+	const saveRef = useRef(onSave);
+	saveRef.current = onSave;
+	const timerRef = useRef(null);
+	const pendingRef = useRef(null);
+	useEffect(() => {
+		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(() => {
+			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
+	};
+}
+
+//#endregion
+export { useDebouncedField };