camox 0.43.0 → 0.45.0

package/dist/features/content/collection-form.js

@@ -0,0 +1,58 @@
+import { isLexicalState, lexicalStateToPlainText } from "../../core/lib/lexicalState.js";
+
+//#region src/features/content/collection-form.ts
+function collectionFormFields(contentSchema, label) {
+	return Object.entries(contentSchema.properties).sort(([a], [b]) => Number(b === label) - Number(a === label));
+}
+function collectionFormDefaults(fields, content = {}) {
+	return Object.fromEntries(fields.map(([name, schema]) => {
+		if (schema.fieldType === "Reference") return [name, content[name] ?? null];
+		if (schema.fieldType === "ReferenceList") {
+			const ids = content[name];
+			return [name, Array.isArray(ids) ? ids : []];
+		}
+		if (schema.fieldType === "Image" || schema.fieldType === "File") return [name, editorAsset(content[name])];
+		if (schema.fieldType.endsWith("List")) {
+			const assets = content[name];
+			return [name, Array.isArray(assets) ? assets.map(editorAsset) : []];
+		}
+		const value = content[name] ?? schema.default;
+		if (schema.fieldType === "String" && isLexicalState(value)) return [name, lexicalStateToPlainText(value)];
+		if (value !== void 0) return [name, value];
+		if (schema.fieldType === "Boolean") return [name, false];
+		if (schema.fieldType === "Enum") return [name, schema.enum?.[0] ?? ""];
+		return [name, ""];
+	}));
+}
+const isAssetFieldType = (fieldType) => fieldType === "Image" || fieldType === "File" || fieldType === "ImageList" || fieldType === "FileList";
+/** Reads a stored record asset field into the shape the asset editors expect (numeric file IDs). */
+function editorAssetField(fieldType, value) {
+	if (!isAssetFieldType(fieldType)) return value;
+	if (Array.isArray(value)) return value.map(editorAsset);
+	return editorAsset(value);
+}
+/** Serializes an asset editor value into the `{ _fileId }` reference a record stores. */
+function serializeAssetField(fieldType, value) {
+	if (!isAssetFieldType(fieldType)) return value;
+	return Array.isArray(value) ? value.map(serializeAsset) : serializeAsset(value);
+}
+function editorAsset(value) {
+	if (!value || typeof value !== "object") return null;
+	return { ...value };
+}
+function serializeAsset(value) {
+	if (!value || typeof value !== "object") return null;
+	const fileId = value._fileId;
+	return typeof fileId === "string" && fileId ? { _fileId: fileId } : null;
+}
+function collectionFormContent(fields, values, original = {}) {
+	return Object.fromEntries(fields.map(([name, schema]) => {
+		const value = values[name];
+		if (isAssetFieldType(schema.fieldType)) return [name, serializeAssetField(schema.fieldType, value)];
+		if (schema.fieldType === "String" && isLexicalState(original[name]) && value === lexicalStateToPlainText(original[name])) return [name, original[name]];
+		return [name, value];
+	}));
+}
+
+//#endregion
+export { collectionFormContent, collectionFormDefaults, collectionFormFields, editorAssetField, serializeAssetField };

package/dist/features/content/components/AssetCard.js

@@ -2,70 +2,75 @@ import { transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { cn } from "../../../lib/utils.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FileIcon } from "lucide-react";
+import { FileIcon, Play } from "lucide-react";
 
 //#region src/features/content/components/AssetCard.tsx
-const OPAQUE_IMAGE_MIME_TYPES = new Set(["image/jpeg", "image/jpg"]);
+const OPAQUE_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set(["image/jpeg", "image/jpg"]);
 const AssetCard = (t0) => {
-	const $ = c(46);
-	if ($[0] !== "1047e431261024f9506ec8f4989ecb00b2808af70364054688c5f3d5eb9e1f28") {
-		for (let $i = 0; $i < 46; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1047e431261024f9506ec8f4989ecb00b2808af70364054688c5f3d5eb9e1f28";
-	}
+	const $ = c(49);
 	const { file, selected, onSelect, onOpen } = t0;
 	let extension;
 	let isImage;
 	let isOpaqueImage;
+	let isVideo;
 	let t1;
 	let t2;
 	let t3;
 	let t4;
 	let t5;
 	let t6;
-	if ($[1] !== file.filename || $[2] !== file.id || $[3] !== file.mimeType || $[4] !== onOpen || $[5] !== onSelect || $[6] !== selected) {
+	if ($[0] !== file.filename || $[1] !== file.id || $[2] !== file.mimeType || $[3] !== onOpen || $[4] !== onSelect || $[5] !== selected) {
 		isImage = file.mimeType?.startsWith("image/");
-		isOpaqueImage = isImage && OPAQUE_IMAGE_MIME_TYPES.has(file.mimeType ?? "");
 		let t7;
-		if ($[16] !== file.filename) {
-			t7 = file.filename?.split(".").pop()?.toUpperCase() ?? "";
-			$[16] = file.filename;
+		if ($[16] !== file.mimeType) {
+			t7 = file.mimeType?.startsWith("video/");
+			$[16] = file.mimeType;
 			$[17] = t7;
 		} else t7 = $[17];
-		extension = t7;
+		isVideo = t7;
+		isOpaqueImage = isImage && OPAQUE_IMAGE_MIME_TYPES.has(file.mimeType ?? "");
+		let t8;
+		if ($[18] !== file.filename) {
+			t8 = file.filename?.split(".").pop()?.toUpperCase() ?? "";
+			$[18] = file.filename;
+			$[19] = t8;
+		} else t8 = $[19];
+		extension = t8;
 		t2 = "button";
 		t3 = file.id;
-		const t8 = selected ? "bg-primary/20 border-2 border-primary" : "hover:bg-accent/75";
-		if ($[18] !== t8) {
-			t4 = cn("group flex flex-col gap-1.5 rounded-lg p-2 text-left border-2 border-transparent", t8);
-			$[18] = t8;
-			$[19] = t4;
-		} else t4 = $[19];
-		if ($[20] !== onSelect) {
+		const t9 = selected ? "bg-primary/20 border-2 border-primary" : "hover:bg-accent/75";
+		if ($[20] !== t9) {
+			t4 = cn("group flex flex-col gap-1.5 rounded-lg p-2 text-left border-2 border-transparent", t9);
+			$[20] = t9;
+			$[21] = t4;
+		} else t4 = $[21];
+		if ($[22] !== onSelect) {
 			t5 = (e) => {
 				e.stopPropagation();
 				onSelect();
 			};
-			$[20] = onSelect;
-			$[21] = t5;
-		} else t5 = $[21];
-		if ($[22] !== onOpen) {
+			$[22] = onSelect;
+			$[23] = t5;
+		} else t5 = $[23];
+		if ($[24] !== onOpen) {
 			t6 = (e_0) => {
 				e_0.stopPropagation();
 				onOpen();
 			};
-			$[22] = onOpen;
-			$[23] = t6;
-		} else t6 = $[23];
+			$[24] = onOpen;
+			$[25] = t6;
+		} else t6 = $[25];
 		t1 = cn("flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-sm", isOpaqueImage && "bg-muted", !isImage && "bg-muted", isImage && !isOpaqueImage && "checkered p-1.5");
-		$[1] = file.filename;
-		$[2] = file.id;
-		$[3] = file.mimeType;
-		$[4] = onOpen;
-		$[5] = onSelect;
-		$[6] = selected;
-		$[7] = extension;
-		$[8] = isImage;
-		$[9] = isOpaqueImage;
+		$[0] = file.filename;
+		$[1] = file.id;
+		$[2] = file.mimeType;
+		$[3] = onOpen;
+		$[4] = onSelect;
+		$[5] = selected;
+		$[6] = extension;
+		$[7] = isImage;
+		$[8] = isOpaqueImage;
+		$[9] = isVideo;
 		$[10] = t1;
 		$[11] = t2;
 		$[12] = t3;
@@ -73,9 +78,10 @@ const AssetCard = (t0) => {
 		$[14] = t5;
 		$[15] = t6;
 	} else {
-		extension = $[7];
-		isImage = $[8];
-		isOpaqueImage = $[9];
+		extension = $[6];
+		isImage = $[7];
+		isOpaqueImage = $[8];
+		isVideo = $[9];
 		t1 = $[10];
 		t2 = $[11];
 		t3 = $[12];
@@ -84,7 +90,7 @@ const AssetCard = (t0) => {
 		t6 = $[15];
 	}
 	let t7;
-	if ($[24] !== extension || $[25] !== file.alt || $[26] !== file.filename || $[27] !== file.mimeType || $[28] !== file.size || $[29] !== file.url || $[30] !== isImage || $[31] !== isOpaqueImage) {
+	if ($[26] !== extension || $[27] !== file.alt || $[28] !== file.filename || $[29] !== file.mimeType || $[30] !== file.size || $[31] !== file.url || $[32] !== isImage || $[33] !== isOpaqueImage || $[34] !== isVideo) {
 		t7 = isImage ? /* @__PURE__ */ jsx("img", {
 			src: transformImageUrl(file.url, {
 				width: 480,
@@ -94,6 +100,27 @@ const AssetCard = (t0) => {
 			alt: file.alt || file.filename,
 			draggable: false,
 			className: cn("pointer-events-none h-full w-full", isOpaqueImage ? "object-cover" : "object-contain")
+		}) : isVideo ? /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none relative h-full w-full",
+			children: [/* @__PURE__ */ jsx("video", {
+				src: file.url,
+				muted: true,
+				playsInline: true,
+				preload: "metadata",
+				"aria-hidden": "true",
+				className: "h-full w-full object-cover",
+				onLoadedMetadata: _temp
+			}, file.url), /* @__PURE__ */ jsx("span", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "rounded-full bg-black/50 p-2 text-white",
+					children: /* @__PURE__ */ jsx(Play, {
+						className: "h-5 w-5",
+						fill: "currentColor",
+						"aria-hidden": "true"
+					})
+				})
+			})]
 		}) : /* @__PURE__ */ jsxs("div", {
 			className: "text-muted-foreground flex flex-col items-center gap-1",
 			children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-8 w-8" }), extension && /* @__PURE__ */ jsx("span", {
@@ -101,37 +128,38 @@ const AssetCard = (t0) => {
 				children: extension
 			})]
 		});
-		$[24] = extension;
-		$[25] = file.alt;
-		$[26] = file.filename;
-		$[27] = file.mimeType;
-		$[28] = file.size;
-		$[29] = file.url;
-		$[30] = isImage;
-		$[31] = isOpaqueImage;
-		$[32] = t7;
-	} else t7 = $[32];
+		$[26] = extension;
+		$[27] = file.alt;
+		$[28] = file.filename;
+		$[29] = file.mimeType;
+		$[30] = file.size;
+		$[31] = file.url;
+		$[32] = isImage;
+		$[33] = isOpaqueImage;
+		$[34] = isVideo;
+		$[35] = t7;
+	} else t7 = $[35];
 	let t8;
-	if ($[33] !== t1 || $[34] !== t7) {
+	if ($[36] !== t1 || $[37] !== t7) {
 		t8 = /* @__PURE__ */ jsx("div", {
 			className: t1,
 			children: t7
 		});
-		$[33] = t1;
-		$[34] = t7;
-		$[35] = t8;
-	} else t8 = $[35];
+		$[36] = t1;
+		$[37] = t7;
+		$[38] = t8;
+	} else t8 = $[38];
 	let t9;
-	if ($[36] !== file.filename) {
+	if ($[39] !== file.filename) {
 		t9 = /* @__PURE__ */ jsx("p", {
 			className: "line-clamp-2 px-0.5 text-xs break-all",
 			children: file.filename
 		});
-		$[36] = file.filename;
-		$[37] = t9;
-	} else t9 = $[37];
+		$[39] = file.filename;
+		$[40] = t9;
+	} else t9 = $[40];
 	let t10;
-	if ($[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 || $[43] !== t8 || $[44] !== t9) {
+	if ($[41] !== t2 || $[42] !== t3 || $[43] !== t4 || $[44] !== t5 || $[45] !== t6 || $[46] !== t8 || $[47] !== t9) {
 		t10 = /* @__PURE__ */ jsxs("button", {
 			type: t2,
 			"data-asset-id": t3,
@@ -140,17 +168,21 @@ const AssetCard = (t0) => {
 			onDoubleClick: t6,
 			children: [t8, t9]
 		});
-		$[38] = t2;
-		$[39] = t3;
-		$[40] = t4;
-		$[41] = t5;
-		$[42] = t6;
-		$[43] = t8;
-		$[44] = t9;
-		$[45] = t10;
-	} else t10 = $[45];
+		$[41] = t2;
+		$[42] = t3;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = t6;
+		$[46] = t8;
+		$[47] = t9;
+		$[48] = t10;
+	} else t10 = $[48];
 	return t10;
 };
+function _temp(event) {
+	const video = event.currentTarget;
+	if (Number.isFinite(video.duration) && video.duration > 0) video.currentTime = Math.min(.1, video.duration / 2);
+}
 
 //#endregion
 export { AssetCard };

package/dist/features/content/components/AssetCardSkeleton.js

@@ -4,19 +4,15 @@ import { Skeleton } from "@camox/ui/skeleton";
 
 //#region src/features/content/components/AssetCardSkeleton.tsx
 const AssetCardSkeleton = () => {
-	const $ = c(2);
-	if ($[0] !== "8482af88dbf68759f07a7fd9d987585773fb02742da8f06d71c01356bc4d8461") {
-		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "8482af88dbf68759f07a7fd9d987585773fb02742da8f06d71c01356bc4d8461";
-	}
+	const $ = c(1);
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1.5 rounded-lg p-2",
 			children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-4/3 w-full rounded-md" }), /* @__PURE__ */ jsx(Skeleton, { className: "mx-0.5 h-3.5 w-3/4" })]
 		});
-		$[1] = t0;
-	} else t0 = $[1];
+		$[0] = t0;
+	} else t0 = $[0];
 	return t0;
 };
 

package/dist/features/content/components/ContentSidebar.js

@@ -1,27 +1,138 @@
+import { Link as Link$1 } from "../../navigation/navigation.js";
+import { cn } from "../../../lib/utils.js";
+import { useLocalizedPath } from "../../../lib/view-locale.js";
+import { STUDIO_ASSETS_PATH, collectionContentPath } from "../../studio/routes.js";
+import { ContentSidebarGroup } from "./ContentSidebarGroup.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ImageIcon } from "lucide-react";
+import { ImageIcon, ListIcon } from "lucide-react";
 
 //#region src/features/content/components/ContentSidebar.tsx
-const ContentSidebar = () => {
-	const $ = c(2);
-	if ($[0] !== "99c3497dbd0e23b64f180c215c65800585b3d7d6e4b4835c7c6beb6e8a25355a") {
-		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "99c3497dbd0e23b64f180c215c65800585b3d7d6e4b4835c7c6beb6e8a25355a";
-	}
-	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			className: "flex w-[220px] flex-col border-r-2 p-2",
-			children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "bg-accent text-accent-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium",
-				children: [/* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }), "Assets"]
+const ContentSidebar = (t0) => {
+	const $ = c(12);
+	const { collections, selectedCollectionId, collectionsError, children } = t0;
+	const t1 = selectedCollectionId === null;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ContentSidebarGroup, {
+			title: "Camox",
+			children: /* @__PURE__ */ jsx(ContentSidebarItem, {
+				icon: ImageIcon,
+				title: "Assets",
+				selected: t1,
+				to: STUDIO_ASSETS_PATH
 			})
 		});
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== collections || $[3] !== selectedCollectionId) {
+		t3 = collections.length > 0 && /* @__PURE__ */ jsx(ContentSidebarGroup, {
+			title: "Collections",
+			children: collections.map((collection) => /* @__PURE__ */ jsx(ContentSidebarItem, {
+				icon: ListIcon,
+				title: collection.title,
+				selected: selectedCollectionId === collection.collectionId,
+				to: collectionContentPath(collection.collectionId)
+			}, collection.collectionId))
+		});
+		$[2] = collections;
+		$[3] = selectedCollectionId;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== collectionsError) {
+		t4 = collectionsError && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-muted-foreground px-2 text-sm",
+			children: "Could not load collections."
+		});
+		$[5] = collectionsError;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== children || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("nav", {
+			"aria-label": "Content",
+			className: "flex w-[220px] shrink-0 flex-col gap-4 overflow-y-auto border-r-2 p-2",
+			children: [
+				t2,
+				t3,
+				children,
+				t4
+			]
+		});
+		$[7] = children;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+};
+const ContentSidebarItem = (t0) => {
+	const $ = c(18);
+	const { icon: Icon, title, selected, to } = t0;
+	const localized = useLocalizedPath();
+	let t1;
+	if ($[0] !== localized || $[1] !== to) {
+		t1 = localized(to);
+		$[0] = localized;
+		$[1] = to;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = selected ? "page" : void 0;
+	const t3 = selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/50";
+	let t4;
+	if ($[3] !== t3) {
+		t4 = cn("flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm font-medium", t3);
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	const t5 = !selected && "text-muted-foreground";
+	let t6;
+	if ($[5] !== t5) {
+		t6 = cn("h-4 w-4 shrink-0", t5);
+		$[5] = t5;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== Icon || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			className: t6
+		});
+		$[7] = Icon;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== title) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			title,
+			children: title
+		});
+		$[10] = title;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t1 || $[13] !== t2 || $[14] !== t4 || $[15] !== t7 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Link$1, {
+			to: t1,
+			"aria-current": t2,
+			className: t4,
+			children: [t7, t8]
+		});
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	return t9;
 };
 
 //#endregion

package/dist/features/content/components/ContentSidebarGroup.js

@@ -0,0 +1,37 @@
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/content/components/ContentSidebarGroup.tsx
+const ContentSidebarGroup = (t0) => {
+	const $ = c(7);
+	const { title, children } = t0;
+	const titleId = useId();
+	let t1;
+	if ($[0] !== title || $[1] !== titleId) {
+		t1 = /* @__PURE__ */ jsx("h2", {
+			id: titleId,
+			className: "text-muted-foreground px-2 py-1.5 text-xs font-medium",
+			children: title
+		});
+		$[0] = title;
+		$[1] = titleId;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== children || $[4] !== t1 || $[5] !== titleId) {
+		t2 = /* @__PURE__ */ jsxs("section", {
+			"aria-labelledby": titleId,
+			className: "flex flex-col gap-1",
+			children: [t1, children]
+		});
+		$[3] = children;
+		$[4] = t1;
+		$[5] = titleId;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+
+//#endregion
+export { ContentSidebarGroup };