camox 0.0.0 → 0.1.2-alpha.2

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

@@ -0,0 +1,308 @@
+import { previewStore } from "../previewStore.js";
+import { RepeatableItemsList } from "./RepeatableItemsList.js";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileIcon, ImageIcon, Images, Link2 } from "lucide-react";
+import { useForm } from "@tanstack/react-form";
+import { SidebarLexicalEditor } from "@/core/components/lexical/SidebarLexicalEditor";
+import { isLexicalState, plainTextToLexicalState } from "@/core/lib/lexicalState";
+//#region src/features/preview/components/ItemFieldsEditor.tsx
+var formatFieldName = (fieldName) => {
+	return fieldName.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+};
+var getSchemaFieldsInOrder = (schema) => {
+	const properties = schema?.properties;
+	if (!properties) return [];
+	return Object.keys(properties).map((fieldName) => {
+		const prop = properties[fieldName];
+		return {
+			name: fieldName,
+			fieldType: prop.fieldType,
+			label: prop.title,
+			minItems: prop.minItems,
+			maxItems: prop.maxItems,
+			arrayItemType: prop.arrayItemType
+		};
+	});
+};
+var ItemFieldsEditor = ({ schema, data, blockId, itemId, parentItemId, parentFieldName, onFieldChange, postToIframe }) => {
+	const fields = React.useMemo(() => getSchemaFieldsInOrder(schema), [schema]);
+	const timerRef = React.useRef(null);
+	const focusedFieldIdRef = React.useRef(null);
+	const getFieldId = (fieldName) => {
+		if (itemId && parentItemId && parentFieldName) return `${blockId}__${parentItemId}:${parentFieldName}:${parseInt(itemId.slice(4), 10)}__${fieldName}`;
+		if (itemId) return `${blockId}__${itemId}__${fieldName}`;
+		return `${blockId}__${fieldName}`;
+	};
+	const scalarFields = React.useMemo(() => {
+		return fields.filter((f) => f.fieldType === "String" || f.fieldType === "Embed").map((f) => f.name);
+	}, [fields]);
+	const defaultValues = React.useMemo(() => {
+		const values = {};
+		for (const fieldName of scalarFields) {
+			const raw = data[fieldName] ?? "";
+			if (fields.find((f) => f.name === fieldName)?.fieldType === "String" && raw && !isLexicalState(raw)) values[fieldName] = plainTextToLexicalState(raw);
+			else values[fieldName] = raw;
+		}
+		return values;
+	}, [
+		data,
+		scalarFields,
+		fields
+	]);
+	const form = useForm({ defaultValues });
+	React.useEffect(() => {
+		form.update({ defaultValues });
+	}, [defaultValues, form]);
+	React.useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+			if (focusedFieldIdRef.current) postToIframe({
+				type: "CAMOX_FOCUS_FIELD_END",
+				fieldId: focusedFieldIdRef.current
+			});
+		};
+	}, [postToIframe]);
+	const handleScalarChange = (fieldName, value, fieldApi) => {
+		fieldApi.handleChange(value);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = window.setTimeout(() => {
+			onFieldChange(fieldName, value);
+		}, 500);
+	};
+	const handleFieldFocus = (fieldName) => {
+		const fieldId = getFieldId(fieldName);
+		focusedFieldIdRef.current = fieldId;
+		postToIframe({
+			type: "CAMOX_FOCUS_FIELD",
+			fieldId
+		});
+	};
+	const handleFieldBlur = (fieldName) => {
+		const fieldId = getFieldId(fieldName);
+		focusedFieldIdRef.current = null;
+		postToIframe({
+			type: "CAMOX_FOCUS_FIELD_END",
+			fieldId
+		});
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: "space-y-4 px-4 py-4",
+		children: fields.map((field) => {
+			const label = field.label ?? formatFieldName(field.name);
+			const fieldId = getFieldId(field.name);
+			if (field.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
+				name: field.name,
+				children: (fieldApi) => /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD",
+						fieldId
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD_END",
+						fieldId
+					}),
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor: field.name,
+						children: label
+					}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
+						value: fieldApi.state.value,
+						onChange: (value) => handleScalarChange(field.name, value, fieldApi),
+						onFocus: () => handleFieldFocus(field.name),
+						onBlur: () => handleFieldBlur(field.name)
+					})]
+				})
+			}, field.name);
+			if (field.fieldType === "Embed") return /* @__PURE__ */ jsx(form.Field, {
+				name: field.name,
+				children: (fieldApi) => /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD",
+						fieldId
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD_END",
+						fieldId
+					}),
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor: field.name,
+						children: label
+					}), /* @__PURE__ */ jsx(Input, {
+						id: field.name,
+						type: "url",
+						value: fieldApi.state.value,
+						onChange: (e) => handleScalarChange(field.name, e.target.value, fieldApi),
+						onFocus: () => handleFieldFocus(field.name),
+						onBlur: () => handleFieldBlur(field.name)
+					})]
+				})
+			}, field.name);
+			if (field.fieldType === "Link") {
+				const linkValue = data[field.name];
+				const preview = linkValue?.text || linkValue?.href || "Empty link";
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD",
+						fieldId
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD_END",
+						fieldId
+					}),
+					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+						onClick: () => previewStore.send({
+							type: "drillIntoLink",
+							fieldName: field.name
+						}),
+						children: [/* @__PURE__ */ jsx(Link2, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: preview
+						})]
+					})]
+				}, field.name);
+			}
+			if (field.fieldType === "RepeatableObject" && field.arrayItemType === "Image") {
+				const count = (data[field.name] ?? []).length;
+				let preview;
+				if (count === 0) preview = "No images";
+				else if (count === 1) preview = "1 image";
+				else preview = `${count} images`;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_REPEATER",
+						blockId,
+						fieldName: field.name
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_REPEATER_END",
+						blockId,
+						fieldName: field.name
+					}),
+					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+						onClick: () => previewStore.send({
+							type: "drillIntoImage",
+							fieldName: field.name
+						}),
+						children: [/* @__PURE__ */ jsx(Images, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: preview
+						})]
+					})]
+				}, field.name);
+			}
+			if (field.fieldType === "RepeatableObject" && field.arrayItemType === "File") {
+				const count = (data[field.name] ?? []).length;
+				let preview;
+				if (count === 0) preview = "No files";
+				else if (count === 1) preview = "1 file";
+				else preview = `${count} files`;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_REPEATER",
+						blockId,
+						fieldName: field.name
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_REPEATER_END",
+						blockId,
+						fieldName: field.name
+					}),
+					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+						onClick: () => previewStore.send({
+							type: "drillIntoFile",
+							fieldName: field.name
+						}),
+						children: [/* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: preview
+						})]
+					})]
+				}, field.name);
+			}
+			if (field.fieldType === "Image") {
+				const preview = data[field.name]?.filename || "No image";
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD",
+						fieldId
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD_END",
+						fieldId
+					}),
+					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+						onClick: () => previewStore.send({
+							type: "drillIntoImage",
+							fieldName: field.name
+						}),
+						children: [/* @__PURE__ */ jsx(ImageIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: preview
+						})]
+					})]
+				}, field.name);
+			}
+			if (field.fieldType === "File") {
+				const preview = data[field.name]?.filename || "No file";
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					onMouseEnter: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD",
+						fieldId
+					}),
+					onMouseLeave: () => postToIframe({
+						type: "CAMOX_HOVER_FIELD_END",
+						fieldId
+					}),
+					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+						onClick: () => previewStore.send({
+							type: "drillIntoFile",
+							fieldName: field.name
+						}),
+						children: [/* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: preview
+						})]
+					})]
+				}, field.name);
+			}
+			if (field.fieldType === "RepeatableObject") {
+				const items = data[field.name] ?? [];
+				const fieldSchema = schema?.properties?.[field.name];
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsx(RepeatableItemsList, {
+						items,
+						blockId,
+						fieldName: field.name,
+						minItems: field.minItems,
+						maxItems: field.maxItems,
+						schema: fieldSchema,
+						parentItemId: itemId
+					})]
+				}, field.name);
+			}
+			return null;
+		})
+	});
+};
+//#endregion
+export { ItemFieldsEditor, formatFieldName };

package/dist/features/preview/components/LinkFieldEditor.d.ts

@@ -0,0 +1,8 @@
+interface LinkFieldEditorProps {
+    fieldName: string;
+    linkValue: Record<string, unknown>;
+    onSave: (fieldName: string, value: Record<string, unknown>) => void;
+}
+declare const LinkFieldEditor: ({ fieldName, linkValue: rawLinkValue, onSave }: LinkFieldEditorProps) => import("react/jsx-runtime").JSX.Element;
+export { LinkFieldEditor };
+//# sourceMappingURL=LinkFieldEditor.d.ts.map

package/dist/features/preview/components/LinkFieldEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkFieldEditor.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/LinkFieldEditor.tsx"],"names":[],"mappings":"AA0BA,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACrE;AAUD,QAAA,MAAM,eAAe,GAAI,gDAAgD,oBAAoB,4CAwK5F,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,190 @@
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { api } from "camox/server/api";
+import { useQuery } from "convex/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, formatPathSegment } from "@/lib/utils";
+import { Button } from "@camox/ui/button";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
+import { Switch } from "@camox/ui/switch";
+import { Tabs, TabsList, TabsTrigger } from "@camox/ui/tabs";
+//#region src/features/preview/components/LinkFieldEditor.tsx
+/** Normalize legacy links (no `type` field) into the union shape */
+var normalizeLinkValue = (value) => {
+	if (!value.type) return {
+		type: "external",
+		...value
+	};
+	return value;
+};
+var LinkFieldEditor = ({ fieldName, linkValue: rawLinkValue, onSave }) => {
+	const linkValue = normalizeLinkValue(rawLinkValue);
+	const timerRef = React.useRef(null);
+	const [text, setText] = React.useState(linkValue.text);
+	const [href, setHref] = React.useState(linkValue.type === "external" ? linkValue.href : "");
+	const linkValueRef = React.useRef(linkValue);
+	const [pagePickerOpen, setPagePickerOpen] = React.useState(false);
+	const pages = useQuery(api.pages.listPages);
+	const selectedPage = linkValue.type === "page" ? pages?.find((p) => p._id === linkValue.pageId) : null;
+	React.useEffect(() => {
+		linkValueRef.current = linkValue;
+	}, [linkValue]);
+	React.useEffect(() => {
+		setText(linkValue.text);
+	}, [linkValue.text]);
+	React.useEffect(() => {
+		if (linkValue.type === "external") setHref(linkValue.href);
+	}, [linkValue]);
+	React.useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const handleTextChange = (value) => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = window.setTimeout(() => {
+			onSave(fieldName, {
+				...linkValueRef.current,
+				text: value
+			});
+		}, 500);
+	};
+	const handleHrefChange = (value) => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = window.setTimeout(() => {
+			onSave(fieldName, {
+				...linkValueRef.current,
+				href: value
+			});
+		}, 500);
+	};
+	const handleModeChange = (mode) => {
+		if (mode === "page") onSave(fieldName, {
+			type: "page",
+			text: linkValueRef.current.text,
+			pageId: "",
+			newTab: linkValueRef.current.newTab
+		});
+		else onSave(fieldName, {
+			type: "external",
+			text: linkValueRef.current.text,
+			href: "",
+			newTab: linkValueRef.current.newTab
+		});
+	};
+	const handlePageSelect = (pageId) => {
+		onSave(fieldName, {
+			type: "page",
+			text: linkValueRef.current.text,
+			pageId,
+			newTab: linkValueRef.current.newTab
+		});
+		setPagePickerOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: `${fieldName}-text`,
+					children: "Text"
+				}), /* @__PURE__ */ jsx(Input, {
+					id: `${fieldName}-text`,
+					value: text,
+					onChange: (e) => {
+						setText(e.target.value);
+						handleTextChange(e.target.value);
+					},
+					autoFocus: true
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Label, { children: "Destination" }),
+					/* @__PURE__ */ jsx(Tabs, {
+						value: linkValue.type,
+						onValueChange: handleModeChange,
+						children: /* @__PURE__ */ jsxs(TabsList, {
+							className: "w-full",
+							children: [/* @__PURE__ */ jsx(TabsTrigger, {
+								value: "page",
+								children: "Page"
+							}), /* @__PURE__ */ jsx(TabsTrigger, {
+								value: "external",
+								children: "URL"
+							})]
+						})
+					}),
+					linkValue.type === "page" ? /* @__PURE__ */ jsxs(Popover, {
+						open: pagePickerOpen,
+						onOpenChange: setPagePickerOpen,
+						children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								role: "combobox",
+								className: "justify-between font-normal",
+								children: [selectedPage ? /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: selectedPage.metaTitle ?? formatPathSegment(selectedPage.pathSegment)
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: "Select a page"
+								}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+							})
+						}), /* @__PURE__ */ jsx(PopoverContent, {
+							align: "start",
+							className: "p-0",
+							children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
+								placeholder: "Search page...",
+								className: "h-9"
+							}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No page found." }), /* @__PURE__ */ jsx(CommandGroup, { children: pages?.map((page) => /* @__PURE__ */ jsxs(CommandItem, {
+								value: page.fullPath,
+								onSelect: () => handlePageSelect(page._id),
+								children: [/* @__PURE__ */ jsx(Check, { className: cn("mr-2 size-4", selectedPage?._id === page._id ? "opacity-100" : "opacity-0") }), /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col",
+									children: [/* @__PURE__ */ jsx("span", { children: page.metaTitle ?? formatPathSegment(page.pathSegment) }), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground font-mono text-xs",
+										children: page.fullPath
+									})]
+								})]
+							}, page._id)) })] })] })
+						})]
+					}) : /* @__PURE__ */ jsx(Input, {
+						type: "url",
+						id: `${fieldName}-href`,
+						placeholder: "https://",
+						value: href,
+						onChange: (e) => {
+							setHref(e.target.value);
+							handleHrefChange(e.target.value);
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Switch, {
+					id: `${fieldName}-newtab`,
+					checked: linkValue.newTab,
+					onCheckedChange: (checked) => {
+						onSave(fieldName, {
+							...linkValueRef.current,
+							newTab: checked
+						});
+					}
+				}), /* @__PURE__ */ jsx(Label, {
+					htmlFor: `${fieldName}-newtab`,
+					children: "Open in new tab"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { LinkFieldEditor };

package/dist/features/preview/components/MultipleAssetFieldEditor.d.ts

@@ -0,0 +1,10 @@
+import { Id } from 'camox/server/dataModel';
+interface MultipleAssetFieldEditorProps {
+    fieldName: string;
+    assetType: "Image" | "File";
+    currentData: Record<string, unknown>;
+    blockId: Id<"blocks">;
+}
+declare const MultipleAssetFieldEditor: ({ fieldName, assetType, currentData, blockId, }: MultipleAssetFieldEditorProps) => import("react/jsx-runtime").JSX.Element;
+export { MultipleAssetFieldEditor };
+//# sourceMappingURL=MultipleAssetFieldEditor.d.ts.map

package/dist/features/preview/components/MultipleAssetFieldEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleAssetFieldEditor.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/MultipleAssetFieldEditor.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAO,EAAE,EAAE,MAAM,wBAAwB,CAAC;AA2GtD,UAAU,6BAA6B;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;CACvB;AAED,QAAA,MAAM,wBAAwB,GAAI,iDAK/B,6BAA6B,4CA8N/B,CAAC;AAEF,OAAO,EAAE,wBAAwB,EAAE,CAAC"}