camox 0.48.0 → 0.52.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camox",
-  "version": "0.48.0",
+  "version": "0.52.1",
   "license": "MIT",
   "bin": {
     "camox": "./bin/camox.mjs"
@@ -72,6 +72,10 @@
       "types": "./dist/features/runtime/studioClient.d.ts",
       "import": "./dist/features/runtime/studioClient.js"
     },
+    "./_internal/rendererClient": {
+      "types": "./dist/features/runtime/rendererClient.d.ts",
+      "import": "./dist/features/runtime/rendererClient.js"
+    },
     "./_internal/studioServer": {
       "types": "./dist/features/runtime/studioServer.d.ts",
       "import": "./dist/features/runtime/studioServer.js"
@@ -110,6 +114,7 @@
     "@sinclair/typebox": "^0.34.52",
     "@takumi-rs/image-response": "^2.16.3",
     "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-hotkeys": "^0.16.0",
     "@tanstack/react-query-devtools": "^5.104.3",
     "@tanstack/react-virtual": "^3.14.20",
     "@unhead/react": "^3.4.3",
@@ -130,9 +135,9 @@
     "shiki": "^4.5.0",
     "unhead": "^3.4.3",
     "zod": "^4.6.7",
-    "@camox/api-contract": "0.48.0",
-    "@camox/cli": "0.48.0",
-    "@camox/ui": "0.48.0"
+    "@camox/api-contract": "0.52.1",
+    "@camox/cli": "0.52.1",
+    "@camox/ui": "0.52.1"
   },
   "devDependencies": {
     "@earendil-works/pi-ai": "1.3.0",

package/skills/camox/SKILL.md

@@ -39,6 +39,10 @@ For a locale switcher, a loader fetching localized data, or the details of eithe
 
 For specialized changes to an existing block, read the specialist reference directly. Also read Block Definitions only if creating a block or changing its schema or other field rendering APIs.
 
+## Interactive blocks
+
+Use the platform. Build tabs, dialogs, carousels, menus and disclosures from native HTML and CSS (`<details name>`, `<dialog>` with `command`/`commandfor`, `popover`, scroll snap), and reach for JS only where modern HTML can't do the behaviour. Compose the project's own Components in `src/components/ui/` when it has them (Camox's Template ships accordion, tabs, dialog, carousel and mobile menu). Target Baseline Newly available, with a fallback that keeps the content reachable in browsers lacking the feature, and keep every tab, dialog and slide in the page's markup, opened or not, and reachable with the keyboard. Editors edit hidden content by turning the Canvas off, opening it, and turning the Canvas back on.
+
 ## Content and CLI
 
 For any CLI operation, first read [CLI common guidance](references/cli-common.md), then only the relevant command reference:

package/skills/camox/references/artifacts.md

@@ -57,7 +57,7 @@ Write the source to a local file and push it with `blocks edit --id <ID> --field
 
 - **A meaningful `<title>`.** It names the frame for screen readers and is the artifact's Markdown Representation. Without one, the artifact is called "Untitled artifact", and `blocks create` and `blocks edit` return a warning.
 - **Respect `prefers-reduced-motion`** with the native media query, in CSS (`@media (prefers-reduced-motion: reduce)`) and in scripts (`matchMedia`), by stopping or simplifying motion.
-- **Fonts on the website's own domain need CORS headers.** The sandbox gives the page an opaque origin, so self-hosted fonts load only when the server sends `Access-Control-Allow-Origin: *` for them.
+- **Link fonts from Google Fonts**, with a `<link>` to the family's `css2` stylesheet in the source's own `<head>`, as the website's Document does. The sandbox gives the page an opaque origin, and Google Fonts sends the CORS headers that needs. A font file the website serves itself loads only when its server sends `Access-Control-Allow-Origin: *` for it.
 
 ## The `camox` runtime
 

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

@@ -1,318 +0,0 @@
-import { getApiUrl } from "../../../lib/api-client.js";
-import { reads, useStudioCache } from "../../../lib/studio-reads.js";
-import { projectMutations } from "../../../lib/queries.js";
-import { buildDefaultFaviconUrl, buildFaviconUrl } from "../../routes/pageRuntime.js";
-import { c } from "react/compiler-runtime";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMutation } from "@tanstack/react-query";
-import { Button } from "@camox/ui/button";
-import { Trash2, TriangleAlert } from "lucide-react";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@camox/ui/dialog";
-import { toast } from "@camox/ui/toaster";
-import { Spinner } from "@camox/ui/spinner";
-import { Alert, AlertDescription } from "@camox/ui/alert";
-import { FaviconDropZone, validateFaviconFile } from "@camox/ui/favicon-drop-zone";
-
-//#region src/features/studio/components/FaviconDialog.tsx
-/** Points the studio tab's own icon at the saved favicon, so the change shows without a reload. */
-function refreshDocumentFavicon(href) {
-	for (const link of document.querySelectorAll("link[rel~=\"icon\"]")) link.href = href;
-}
-function FaviconDialog(t0) {
-	const $ = c(9);
-	const { project, open, onOpenChange } = t0;
-	let t1;
-	if ($[0] !== onOpenChange) {
-		t1 = () => onOpenChange(false);
-		$[0] = onOpenChange;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== project || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsx(DialogContent, {
-			className: "gap-5 sm:max-w-md",
-			children: /* @__PURE__ */ jsx(FaviconForm, {
-				project,
-				onSaved: t1
-			})
-		});
-		$[2] = project;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== onOpenChange || $[6] !== open || $[7] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Dialog, {
-			open,
-			onOpenChange,
-			children: t2
-		});
-		$[5] = onOpenChange;
-		$[6] = open;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
-}
-function FaviconForm(t0) {
-	const $ = c(56);
-	const { project, onSaved } = t0;
-	const studioCache = useStudioCache();
-	const [pending, setPending] = React.useState(null);
-	const [hasCurrent, setHasCurrent] = React.useState(false);
-	let t1;
-	if ($[0] !== project) {
-		t1 = buildFaviconUrl(getApiUrl(), project, { withDefault: false });
-		$[0] = project;
-		$[1] = t1;
-	} else t1 = $[1];
-	const currentUrl = t1;
-	let t2;
-	let t3;
-	if ($[2] !== currentUrl) {
-		t2 = () => {
-			const probe = new Image();
-			probe.onload = () => setHasCurrent(true);
-			probe.onerror = () => setHasCurrent(false);
-			probe.src = currentUrl;
-			return () => {
-				probe.onload = null;
-				probe.onerror = null;
-			};
-		};
-		t3 = [currentUrl];
-		$[2] = currentUrl;
-		$[3] = t2;
-		$[4] = t3;
-	} else {
-		t2 = $[3];
-		t3 = $[4];
-	}
-	React.useEffect(t2, t3);
-	const pendingFile = pending?.type === "upload" ? pending.file : null;
-	let t4;
-	if ($[5] !== pendingFile) {
-		t4 = pendingFile ? URL.createObjectURL(pendingFile) : null;
-		$[5] = pendingFile;
-		$[6] = t4;
-	} else t4 = $[6];
-	const pendingUrl = t4;
-	let t5;
-	let t6;
-	if ($[7] !== pendingUrl) {
-		t5 = () => {
-			if (!pendingUrl) return;
-			return () => URL.revokeObjectURL(pendingUrl);
-		};
-		t6 = [pendingUrl];
-		$[7] = pendingUrl;
-		$[8] = t5;
-		$[9] = t6;
-	} else {
-		t5 = $[8];
-		t6 = $[9];
-	}
-	React.useEffect(t5, t6);
-	let t7;
-	if ($[10] !== onSaved || $[11] !== pending?.type || $[12] !== project || $[13] !== studioCache) {
-		t7 = async () => {
-			await studioCache.invalidate(reads.project({ projectUuid: project.uuid }));
-			const updated = studioCache.get(reads.project({ projectUuid: project.uuid }));
-			refreshDocumentFavicon(buildFaviconUrl(getApiUrl(), updated ?? project));
-			toast.success(pending?.type === "remove" ? "Favicon removed" : "Favicon updated");
-			onSaved();
-		};
-		$[10] = onSaved;
-		$[11] = pending?.type;
-		$[12] = project;
-		$[13] = studioCache;
-		$[14] = t7;
-	} else t7 = $[14];
-	const onSuccess = t7;
-	const onError = _temp;
-	let t8;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = projectMutations.uploadFavicon();
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== onSuccess) {
-		t9 = {
-			...t8,
-			onSuccess,
-			onError
-		};
-		$[16] = onSuccess;
-		$[17] = t9;
-	} else t9 = $[17];
-	const upload = useMutation(t9);
-	let t10;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = projectMutations.deleteFavicon();
-		$[18] = t10;
-	} else t10 = $[18];
-	let t11;
-	if ($[19] !== onSuccess) {
-		t11 = {
-			...t10,
-			onSuccess,
-			onError
-		};
-		$[19] = onSuccess;
-		$[20] = t11;
-	} else t11 = $[20];
-	const remove = useMutation(t11);
-	const isSaving = upload.isPending || remove.isPending;
-	let t12;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = (file) => {
-			const error_0 = validateFaviconFile(file);
-			if (error_0) {
-				toast.error(error_0);
-				return;
-			}
-			setPending({
-				type: "upload",
-				file
-			});
-		};
-		$[21] = t12;
-	} else t12 = $[21];
-	const choose = t12;
-	let t13;
-	if ($[22] !== pending || $[23] !== project || $[24] !== remove || $[25] !== upload) {
-		t13 = () => {
-			if (pending?.type === "upload") {
-				upload.mutate({
-					projectId: project.id,
-					file: pending.file
-				});
-				return;
-			}
-			if (pending?.type === "remove") remove.mutate({ projectId: project.id });
-		};
-		$[22] = pending;
-		$[23] = project;
-		$[24] = remove;
-		$[25] = upload;
-		$[26] = t13;
-	} else t13 = $[26];
-	const save = t13;
-	const showsFavicon = pending ? pending.type === "upload" : hasCurrent;
-	let t14;
-	if ($[27] !== currentUrl || $[28] !== pendingUrl || $[29] !== showsFavicon) {
-		t14 = pendingUrl ?? (showsFavicon ? currentUrl : buildDefaultFaviconUrl(getApiUrl()));
-		$[27] = currentUrl;
-		$[28] = pendingUrl;
-		$[29] = showsFavicon;
-		$[30] = t14;
-	} else t14 = $[30];
-	const previewUrl = t14;
-	const prompt = pendingFile ? pendingFile.name : showsFavicon ? "Drop a new favicon, or click to browse" : "Drop your favicon here, or click to browse";
-	let t15;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Favicon" }), /* @__PURE__ */ jsx(DialogDescription, { children: "The icon shown in browser tabs and bookmarks." })] });
-		$[31] = t15;
-	} else t15 = $[31];
-	let t16;
-	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = /* @__PURE__ */ jsxs(Alert, {
-			variant: "warning",
-			children: [/* @__PURE__ */ jsx(TriangleAlert, {}), /* @__PURE__ */ jsx(AlertDescription, { children: "Applies to the whole site, including Live and every draft." })]
-		});
-		$[32] = t16;
-	} else t16 = $[32];
-	let t17;
-	if ($[33] !== isSaving || $[34] !== previewUrl || $[35] !== prompt) {
-		t17 = /* @__PURE__ */ jsx(FaviconDropZone, {
-			previewUrl,
-			prompt,
-			disabled: isSaving,
-			onFileSelected: choose
-		});
-		$[33] = isSaving;
-		$[34] = previewUrl;
-		$[35] = prompt;
-		$[36] = t17;
-	} else t17 = $[36];
-	let t18;
-	if ($[37] !== hasCurrent || $[38] !== isSaving || $[39] !== showsFavicon) {
-		t18 = showsFavicon && /* @__PURE__ */ jsxs(Button, {
-			type: "button",
-			variant: "ghost",
-			className: "sm:mr-auto",
-			disabled: isSaving,
-			onClick: () => setPending(hasCurrent ? { type: "remove" } : null),
-			children: [/* @__PURE__ */ jsx(Trash2, {}), "Remove favicon"]
-		});
-		$[37] = hasCurrent;
-		$[38] = isSaving;
-		$[39] = showsFavicon;
-		$[40] = t18;
-	} else t18 = $[40];
-	let t19;
-	if ($[41] !== isSaving) {
-		t19 = /* @__PURE__ */ jsx(DialogClose, {
-			render: /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "outline",
-				disabled: isSaving
-			}),
-			children: "Cancel"
-		});
-		$[41] = isSaving;
-		$[42] = t19;
-	} else t19 = $[42];
-	const t20 = !pending || isSaving;
-	let t21;
-	if ($[43] !== isSaving) {
-		t21 = isSaving && /* @__PURE__ */ jsx(Spinner, {});
-		$[43] = isSaving;
-		$[44] = t21;
-	} else t21 = $[44];
-	let t22;
-	if ($[45] !== save || $[46] !== t20 || $[47] !== t21) {
-		t22 = /* @__PURE__ */ jsxs(Button, {
-			type: "button",
-			onClick: save,
-			disabled: t20,
-			children: [t21, "Save"]
-		});
-		$[45] = save;
-		$[46] = t20;
-		$[47] = t21;
-		$[48] = t22;
-	} else t22 = $[48];
-	let t23;
-	if ($[49] !== t18 || $[50] !== t19 || $[51] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(DialogFooter, { children: [
-			t18,
-			t19,
-			t22
-		] });
-		$[49] = t18;
-		$[50] = t19;
-		$[51] = t22;
-		$[52] = t23;
-	} else t23 = $[52];
-	let t24;
-	if ($[53] !== t17 || $[54] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t15,
-			t16,
-			t17,
-			t23
-		] });
-		$[53] = t17;
-		$[54] = t23;
-		$[55] = t24;
-	} else t24 = $[55];
-	return t24;
-}
-function _temp(error) {
-	toast.error(error.message || "Could not save the favicon");
-}
-
-//#endregion
-export { FaviconDialog };