camox 0.44.0 → 0.45.0

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

@@ -0,0 +1,178 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Input } from "@camox/ui/input";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import { Combobox } from "@base-ui/react/combobox";
+
+//#region src/features/preview/components/RecordCombobox.tsx
+/**
+* Picks a collection record by label. The footer action (e.g. Create item) receives the
+* current search text so it can prefill a new record.
+*/
+function RecordCombobox(t0) {
+	const $ = c(25);
+	const { records, collectionTitle, onSelect, emptyMessage: emptyMessageOverride, footerAction, disabled, open: controlledOpen, onOpenChange } = t0;
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const open = controlledOpen ?? uncontrolledOpen;
+	let t1;
+	if ($[0] !== onOpenChange) {
+		t1 = (next) => {
+			setUncontrolledOpen(next);
+			onOpenChange?.(next);
+		};
+		$[0] = onOpenChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const setOpen = t1;
+	const [search, setSearch] = React.useState("");
+	const emptyMessage = records.length > 0 ? "No items found." : emptyMessageOverride ?? `${collectionTitle} has no items yet.`;
+	let t2;
+	if ($[2] !== onSelect) {
+		t2 = (record_2) => {
+			if (record_2) onSelect(record_2);
+		};
+		$[2] = onSelect;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			className: "w-full justify-between"
+		});
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Combobox.Trigger, {
+			render: t3,
+			children: ["Select item", /* @__PURE__ */ jsx(ChevronsUpDown, {
+				"aria-hidden": true,
+				className: "text-muted-foreground size-4"
+			})]
+		});
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Combobox.Input, {
+			render: /* @__PURE__ */ jsx(Input, { className: "mb-1" }),
+			"aria-label": "Search items",
+			placeholder: "Search items…"
+		});
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== emptyMessage) {
+		t6 = /* @__PURE__ */ jsx(Combobox.Empty, {
+			className: "text-muted-foreground text-sm",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "p-2",
+				children: emptyMessage
+			})
+		});
+		$[7] = emptyMessage;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Combobox.List, {
+			className: "max-h-64 min-h-0 overflow-y-auto",
+			children: _temp4
+		});
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== footerAction || $[11] !== search || $[12] !== setOpen) {
+		t8 = footerAction && /* @__PURE__ */ jsx("div", {
+			className: "mt-1 shrink-0 border-t pt-1",
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "hover:bg-accent hover:text-accent-foreground flex h-9 w-full items-center gap-2 rounded-sm px-2 text-sm outline-none",
+				onClick: () => {
+					setOpen(false);
+					footerAction.onSelect(search);
+				},
+				children: [/* @__PURE__ */ jsx(Plus, {
+					"aria-hidden": true,
+					className: "size-4 shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: footerAction.label })]
+			})
+		});
+		$[10] = footerAction;
+		$[11] = search;
+		$[12] = setOpen;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t6 || $[15] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			sideOffset: 4,
+			align: "start",
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: "bg-popover text-popover-foreground ring-foreground/10 flex max-h-(--available-height) w-(--anchor-width) min-w-48 flex-col rounded-md p-1 shadow-md ring-1",
+				children: [
+					t5,
+					t6,
+					t7,
+					t8
+				]
+			})
+		}) });
+		$[14] = t6;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== disabled || $[18] !== open || $[19] !== records || $[20] !== search || $[21] !== setOpen || $[22] !== t2 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Combobox.Root, {
+			items: records,
+			value: null,
+			open,
+			onOpenChange: setOpen,
+			inputValue: search,
+			onInputValueChange: setSearch,
+			itemToStringLabel: _temp,
+			itemToStringValue: _temp2,
+			isItemEqualToValue: _temp3,
+			onValueChange: t2,
+			disabled,
+			children: [t4, t9]
+		});
+		$[17] = disabled;
+		$[18] = open;
+		$[19] = records;
+		$[20] = search;
+		$[21] = setOpen;
+		$[22] = t2;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
+}
+function _temp4(record_3) {
+	return /* @__PURE__ */ jsx(Combobox.Item, {
+		value: record_3,
+		className: "data-highlighted:bg-accent data-highlighted:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: record_3.label
+		})
+	}, record_3.id);
+}
+function _temp3(record_1, current) {
+	return record_1.id === current.id;
+}
+function _temp2(record_0) {
+	return record_0.id;
+}
+function _temp(record) {
+	return record.label;
+}
+
+//#endregion
+export { RecordCombobox };

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

@@ -0,0 +1,149 @@
+import { useProjectUuid } from "../../../lib/auth.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { useCollectionItemSheet } from "../../content/CollectionItemSheetContext.js";
+import { referencePickerFocus, useReferencePickerFocusRequested } from "../referencePickerFocus.js";
+import { DrillRow } from "./DrillRow.js";
+import { RecordCard } from "./RecordCard.js";
+import { RecordCombobox } from "./RecordCombobox.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Link2, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+
+//#region src/features/preview/components/ReferenceFieldEditor.tsx
+function referenceHint({ linked, required }) {
+	return !linked && required ? "Required" : null;
+}
+/** This view owns the reference only. Record content is edited elsewhere. */
+function ReferenceFieldEditor({ collectionId, fieldId, value, required = false, record = null, onChange, onOpenRecord, drill, allowCreate = true }) {
+	const projectUuid = useProjectUuid();
+	const collection = useCamoxApp().getCollectionById(collectionId);
+	const collectionTitle = collection?._internal.title ?? collectionId;
+	const sheet = useCollectionItemSheet();
+	const [saving, setSaving] = React.useState(false);
+	const [error, setError] = React.useState(null);
+	const records = useReadQuery(reads.records({
+		projectUuid,
+		collectionId
+	}));
+	const selectedId = typeof value === "string" && value ? value : null;
+	const selected = records.data?.find((option) => option.id === value);
+	const hydrated = record?.id === selectedId ? record : null;
+	const selectedLabel = selected?.label ?? hydrated?.label ?? "Unavailable item";
+	const [pickerOpen, setPickerOpen] = React.useState(false);
+	const focusRequested = useReferencePickerFocusRequested(drill ? void 0 : fieldId);
+	const pickerReady = !selectedId && records.isSuccess && !saving;
+	const save = async (id) => {
+		setSaving(true);
+		setError(null);
+		try {
+			await onChange(id);
+		} catch (cause) {
+			setError(cause instanceof Error ? cause.message : "Could not change reference.");
+			throw cause;
+		} finally {
+			setSaving(false);
+		}
+	};
+	const change = (id) => {
+		save(id).catch(() => {});
+	};
+	React.useEffect(() => {
+		if (!focusRequested || !fieldId || !pickerReady) return;
+		referencePickerFocus.send({
+			type: "consume",
+			fieldId
+		});
+		setPickerOpen(true);
+	}, [
+		focusRequested,
+		fieldId,
+		pickerReady
+	]);
+	const hint = referenceHint({
+		linked: selectedId !== null,
+		required
+	});
+	if (drill) return /* @__PURE__ */ jsx(DrillRow, {
+		label: drill.label,
+		preview: selectedId ? selectedLabel : `No ${collectionTitle} linked`,
+		hint: hint ?? void 0,
+		Icon: Link2,
+		onClick: drill.onClick,
+		hover: {
+			variant: "field",
+			fieldId: drill.fieldId
+		},
+		postToIframe: drill.postToIframe
+	});
+	return /* @__PURE__ */ jsxs("fieldset", {
+		disabled: saving,
+		className: "min-w-0 space-y-3",
+		children: [
+			selectedId && /* @__PURE__ */ jsx(RecordCard, {
+				label: selectedLabel,
+				collectionTitle,
+				onOpen: onOpenRecord ? () => onOpenRecord(selectedId) : void 0,
+				actions: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Unlink",
+						className: "text-muted-foreground hover:text-foreground shrink-0",
+						onClick: () => change(null)
+					}),
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": true,
+						className: "size-4"
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" })] })
+			}),
+			!selectedId && /* @__PURE__ */ jsx(RecordCombobox, {
+				records: records.data ?? [],
+				collectionTitle,
+				onSelect: (option) => change(option.id),
+				disabled: saving || records.isPending || records.isError,
+				open: pickerOpen,
+				onOpenChange: setPickerOpen,
+				footerAction: allowCreate ? {
+					label: "Create item",
+					onSelect: (search) => sheet.open({
+						collectionId,
+						initialContent: collection && search.trim() ? { [collection._internal.label]: search } : void 0,
+						onSaved: (created) => save(created.id)
+					})
+				} : void 0
+			}),
+			hint && /* @__PURE__ */ jsx("p", {
+				"data-reference-hint": true,
+				className: "text-muted-foreground text-xs",
+				children: hint
+			}),
+			records.isPending && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: "Loading items…"
+			}),
+			records.isError && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx("p", { children: "Could not load collection items." }), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: () => void records.refetch(),
+					children: "Try again"
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-destructive text-sm",
+				children: error
+			})
+		]
+	});
+}
+
+//#endregion
+export { ReferenceFieldEditor };