@questpie/admin 3.2.6 → 3.3.0

package/dist/client/components/fields/select-field.mjs

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/utils.mjs";
 import { isComponentReference, resolveIconElement } from "../component-renderer.mjs";
-import { useResolvedControl } from "./field-utils.mjs";
 import { FieldWrapper } from "./field-wrapper.mjs";
+import { useResolvedControl } from "./field-utils.mjs";
 import { SelectSingle } from "../primitives/select-single.mjs";
 import { SelectMulti } from "../primitives/select-multi.mjs";
 import { useMemo } from "react";

package/dist/client/components/fields/text-field.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.mjs";
-import { useResolvedControl } from "./field-utils.mjs";
 import { FieldWrapper } from "./field-wrapper.mjs";
+import { useResolvedControl } from "./field-utils.mjs";
 import { TextInput } from "../primitives/text-input.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";

package/dist/client/components/fields/textarea-field.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.mjs";
-import { useResolvedControl } from "./field-utils.mjs";
 import { FieldWrapper } from "./field-wrapper.mjs";
+import { useResolvedControl } from "./field-utils.mjs";
 import { TextareaInput } from "../primitives/textarea-input.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";

package/dist/client/components/fields/time-field.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.mjs";
-import { useResolvedControl } from "./field-utils.mjs";
 import { FieldWrapper } from "./field-wrapper.mjs";
+import { useResolvedControl } from "./field-utils.mjs";
 import { TimeInput } from "../primitives/time-input.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";

package/dist/client/components/fields/upload-field.mjs

@@ -1,8 +1,8 @@
 import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
-import { sanitizeFilename, useResolvedControl } from "./field-utils.mjs";
 import { FieldWrapper } from "./field-wrapper.mjs";
+import { sanitizeFilename, useResolvedControl } from "./field-utils.mjs";
 import { useCollectionItem } from "../../hooks/use-collection.mjs";
 import { ResourceSheet } from "../sheets/resource-sheet.mjs";
 import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";

package/dist/client/components/history-sidebar.mjs

@@ -2,11 +2,12 @@ import { useResolveText, useTranslation } from "../i18n/hooks.mjs";
 import { cn, formatLabel } from "../lib/utils.mjs";
 import { resolveOptionLabelForValue } from "./primitives/option-label.mjs";
 import { Button } from "./ui/button.mjs";
-import { Badge } from "./ui/badge.mjs";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet.mjs";
 import { Separator } from "./ui/separator.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet.mjs";
+import { Badge } from "./ui/badge.mjs";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion.mjs";
 import { Skeleton } from "./ui/skeleton.mjs";
+import { StructuredFieldDiff, shouldUseStructuredDiff } from "./structured-diff.mjs";
 import { EmptyState } from "./ui/empty-state.mjs";
 import { ScrollFade } from "./ui/scroll-fade.mjs";
 import { Icon } from "@iconify/react";
@@ -157,7 +158,7 @@ function summarizeBlocks(value) {
 	const blockNames = [];
 	for (const item of value) {
 		if (!isObjectRecord(item)) continue;
-		const type = item.blockType ?? item.block ?? item.type ?? item._type ?? item.name;
+		const type = item.blockType ?? item.block ?? item.type ?? item["_type"] ?? item.name;
 		if (typeof type === "string") blockNames.push(formatLabel(type));
 	}
 	if (blockNames.length === 0) return null;
@@ -345,7 +346,12 @@ function VersionDiffPanel({ previousVersion, changes, fields }) {
 							})]
 						}),
 						/* @__PURE__ */ jsx(Separator, { className: "my-3" }),
-						/* @__PURE__ */ jsxs("div", {
+						shouldUseStructuredDiff(change.type, change.from, change.to) ? /* @__PURE__ */ jsx(StructuredFieldDiff, {
+							type: change.type,
+							from: change.from,
+							to: change.to,
+							nestedFields: field?.metadata?.nestedFields
+						}) : /* @__PURE__ */ jsxs("div", {
 							className: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]",
 							children: [
 								/* @__PURE__ */ jsxs("div", {

package/dist/client/components/structured-diff.mjs

@@ -0,0 +1,367 @@
+import { useResolveText, useTranslation } from "../i18n/hooks.mjs";
+import { cn, formatLabel } from "../lib/utils.mjs";
+import { Badge } from "./ui/badge.mjs";
+import { useAdminConfig } from "../hooks/use-admin-config.mjs";
+import { Icon } from "@iconify/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/structured-diff.tsx
+function isRecord(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function isBlockDocument(value) {
+	return isRecord(value) && Array.isArray(value["_tree"]) && isRecord(value["_values"]);
+}
+function isEmpty(v) {
+	if (v === null || v === void 0 || v === "") return true;
+	if (Array.isArray(v)) return v.length === 0;
+	if (isRecord(v)) return Object.keys(v).length === 0;
+	return false;
+}
+function deepEqual(a, b) {
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch {
+		return a === b;
+	}
+}
+function flattenTree(nodes) {
+	const result = /* @__PURE__ */ new Map();
+	function walk(list) {
+		for (const n of list) {
+			result.set(n.id, n.type);
+			if (n.children) walk(n.children);
+		}
+	}
+	walk(nodes);
+	return result;
+}
+function formatPrimitive(value) {
+	if (value === null || value === void 0) return "-";
+	if (typeof value === "string") return value.length > 120 ? `${value.slice(0, 120)}…` : value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	if (Array.isArray(value)) return `[${value.length}]`;
+	if (isRecord(value)) {
+		for (const key of [
+			"_title",
+			"title",
+			"name",
+			"label"
+		]) if (typeof value[key] === "string") return value[key];
+		return `{${Object.keys(value).length}}`;
+	}
+	return String(value);
+}
+function summarizeItem(item, index) {
+	for (const key of [
+		"_title",
+		"title",
+		"name",
+		"label",
+		"email",
+		"filename"
+	]) {
+		const val = item[key];
+		if (typeof val === "string" && val.trim()) return val.length > 60 ? `${val.slice(0, 60)}…` : val;
+	}
+	return `#${index}`;
+}
+function getChangeKind(from, to) {
+	if (isEmpty(from) && !isEmpty(to)) return "added";
+	if (!isEmpty(from) && isEmpty(to)) return "removed";
+	return "changed";
+}
+function getFieldMetadata(field) {
+	if (!field) return void 0;
+	return field.metadata ?? field;
+}
+function getFieldLabel(field, fallback, resolveText) {
+	const label = getFieldMetadata(field)?.label;
+	return label ? resolveText(label, fallback) : fallback;
+}
+function getArrayItemFields(nestedFields) {
+	return getFieldMetadata(nestedFields?.item)?.nestedFields ?? nestedFields;
+}
+function diffProperties(from, to, fields, resolveText) {
+	const allKeys = new Set([...Object.keys(from ?? {}), ...Object.keys(to ?? {})]);
+	const changes = [];
+	for (const key of allKeys) {
+		if (key.startsWith("_") || key === "id") continue;
+		const fromVal = from?.[key];
+		const toVal = to?.[key];
+		if (deepEqual(fromVal, toVal)) continue;
+		const label = getFieldLabel(fields?.[key], formatLabel(key), resolveText);
+		changes.push({
+			key,
+			label,
+			kind: getChangeKind(fromVal, toVal),
+			from: fromVal,
+			to: toVal
+		});
+	}
+	return changes;
+}
+function computeBlockChanges(from, to, blockSchemas, resolveText) {
+	const fromVal = isBlockDocument(from) ? from : null;
+	const toVal = isBlockDocument(to) ? to : null;
+	const fromTree = flattenTree(fromVal?.["_tree"] ?? []);
+	const toTree = flattenTree(toVal?.["_tree"] ?? []);
+	const fromValues = fromVal?.["_values"] ?? {};
+	const toValues = toVal?.["_values"] ?? {};
+	const changes = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const [id, type] of toTree) {
+		seen.add(id);
+		const schema = blockSchemas?.[type];
+		const label = schema?.admin?.label ? resolveText(schema.admin.label, formatLabel(type)) : formatLabel(type);
+		if (!fromTree.has(id)) changes.push({
+			id,
+			label,
+			kind: "added",
+			properties: diffProperties(void 0, toValues[id], schema?.fields, resolveText)
+		});
+		else {
+			const props = diffProperties(fromValues[id], toValues[id], schema?.fields, resolveText);
+			if (props.length > 0) changes.push({
+				id,
+				label,
+				kind: "changed",
+				properties: props
+			});
+		}
+	}
+	for (const [id, type] of fromTree) {
+		if (seen.has(id)) continue;
+		const schema = blockSchemas?.[type];
+		const label = schema?.admin?.label ? resolveText(schema.admin.label, formatLabel(type)) : formatLabel(type);
+		changes.push({
+			id,
+			label,
+			kind: "removed",
+			properties: diffProperties(fromValues[id], void 0, schema?.fields, resolveText)
+		});
+	}
+	return changes;
+}
+function computeArrayChanges(from, to, nestedFields, resolveText) {
+	const fromArr = Array.isArray(from) ? from : [];
+	const toArr = Array.isArray(to) ? to : [];
+	if (fromArr.some(itemHasStringId) || toArr.some(itemHasStringId)) return diffArrayById(fromArr, toArr, nestedFields, resolveText);
+	return diffArrayByIndex(fromArr, toArr, nestedFields, resolveText);
+}
+function itemHasStringId(item) {
+	return isRecord(item) && typeof item.id === "string";
+}
+function diffArrayById(from, to, nestedFields, resolveText) {
+	const fromMap = /* @__PURE__ */ new Map();
+	for (const item of from) if (isRecord(item) && typeof item.id === "string") fromMap.set(item.id, item);
+	const changes = [];
+	const seen = /* @__PURE__ */ new Set();
+	let idx = 0;
+	for (const item of to) {
+		idx++;
+		if (!isRecord(item) || typeof item.id !== "string") continue;
+		seen.add(item.id);
+		const label = summarizeItem(item, idx);
+		if (!fromMap.has(item.id)) changes.push({
+			id: item.id,
+			label,
+			kind: "added",
+			properties: diffProperties(void 0, item, nestedFields, resolveText)
+		});
+		else {
+			const props = diffProperties(fromMap.get(item.id), item, nestedFields, resolveText);
+			if (props.length > 0) changes.push({
+				id: item.id,
+				label,
+				kind: "changed",
+				properties: props
+			});
+		}
+	}
+	let fromIdx = 0;
+	for (const item of from) {
+		fromIdx++;
+		if (!isRecord(item) || typeof item.id !== "string") continue;
+		if (seen.has(item.id)) continue;
+		changes.push({
+			id: item.id,
+			label: summarizeItem(item, fromIdx),
+			kind: "removed",
+			properties: diffProperties(item, void 0, nestedFields, resolveText)
+		});
+	}
+	return changes;
+}
+function diffArrayByIndex(from, to, nestedFields, resolveText) {
+	const maxLen = Math.max(from.length, to.length);
+	const changes = [];
+	for (let i = 0; i < maxLen; i++) {
+		const fromItem = from[i];
+		const toItem = to[i];
+		if (deepEqual(fromItem, toItem)) continue;
+		const fromRec = isRecord(fromItem) ? fromItem : void 0;
+		const toRec = isRecord(toItem) ? toItem : void 0;
+		const label = `#${i + 1}`;
+		if (fromItem === void 0) changes.push({
+			id: String(i),
+			label,
+			kind: "added",
+			properties: toRec ? diffProperties(void 0, toRec, nestedFields, resolveText) : []
+		});
+		else if (toItem === void 0) changes.push({
+			id: String(i),
+			label,
+			kind: "removed",
+			properties: fromRec ? diffProperties(fromRec, void 0, nestedFields, resolveText) : []
+		});
+		else changes.push({
+			id: String(i),
+			label,
+			kind: "changed",
+			properties: fromRec && toRec ? diffProperties(fromRec, toRec, nestedFields, resolveText) : []
+		});
+	}
+	return changes;
+}
+function computeObjectChanges(from, to, nestedFields, resolveText) {
+	return diffProperties(isRecord(from) ? from : {}, isRecord(to) ? to : {}, nestedFields, resolveText);
+}
+const CHANGE_STYLES = {
+	added: {
+		icon: "ph:plus",
+		badge: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+		border: "border-l-emerald-500/50",
+		bg: "bg-emerald-500/5",
+		text: "text-emerald-600 dark:text-emerald-400",
+		labelKey: "history.changeAdded"
+	},
+	removed: {
+		icon: "ph:minus",
+		badge: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300",
+		border: "border-l-red-500/50",
+		bg: "bg-red-500/5",
+		text: "text-red-600 dark:text-red-400",
+		labelKey: "history.changeRemoved"
+	},
+	changed: {
+		icon: "ph:pencil-simple",
+		badge: "border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+		border: "border-l-blue-500/50",
+		bg: "bg-blue-500/5",
+		text: "text-blue-600 dark:text-blue-400",
+		labelKey: "history.changeChanged"
+	}
+};
+const ADDED_VALUE_CLASS = "text-emerald-600 dark:text-emerald-400";
+const REMOVED_VALUE_CLASS = "text-red-500/80 line-through dark:text-red-400/80";
+function PropertyValueDelta({ change }) {
+	if (change.kind === "added") return /* @__PURE__ */ jsx("span", {
+		className: ADDED_VALUE_CLASS,
+		children: formatPrimitive(change.to)
+	});
+	if (change.kind === "removed") return /* @__PURE__ */ jsx("span", {
+		className: REMOVED_VALUE_CLASS,
+		children: formatPrimitive(change.from)
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: REMOVED_VALUE_CLASS,
+			children: formatPrimitive(change.from)
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground mx-1.5",
+			children: "→"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: ADDED_VALUE_CLASS,
+			children: formatPrimitive(change.to)
+		})
+	] });
+}
+function PropertyChangeRow({ change }) {
+	const style = CHANGE_STYLES[change.kind];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline gap-2 text-xs leading-relaxed",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: style.icon,
+				className: cn("size-3 shrink-0", style.text)
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground shrink-0 font-medium",
+				children: [change.label, ":"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 break-words",
+				children: /* @__PURE__ */ jsx(PropertyValueDelta, { change })
+			})
+		]
+	});
+}
+function ItemChangeCard({ item }) {
+	const { t } = useTranslation();
+	const style = CHANGE_STYLES[item.kind];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-sm border-l-2 py-2 pr-2 pl-3", style.border, style.bg),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-foreground text-xs font-medium",
+				children: item.label
+			}), /* @__PURE__ */ jsxs(Badge, {
+				variant: "outline",
+				className: cn("text-[0.625rem]", style.badge),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: style.icon,
+					className: "size-2.5"
+				}), t(style.labelKey)]
+			})]
+		}), item.properties.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "mt-1.5 space-y-1 pl-1",
+			children: item.properties.map((prop) => /* @__PURE__ */ jsx(PropertyChangeRow, { change: prop }, prop.key))
+		})]
+	});
+}
+function NoChangesPlaceholder() {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground text-xs",
+		children: t("history.noFieldChanges")
+	});
+}
+function ItemChangeList({ items }) {
+	if (items.length === 0) return /* @__PURE__ */ jsx(NoChangesPlaceholder, {});
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2",
+		children: items.map((item) => /* @__PURE__ */ jsx(ItemChangeCard, { item }, item.id))
+	});
+}
+function StructuredFieldDiff({ type, from, to, nestedFields }) {
+	const resolveText = useResolveText();
+	const { data: adminConfig } = useAdminConfig();
+	if (type === "blocks") return /* @__PURE__ */ jsx(ItemChangeList, { items: computeBlockChanges(from, to, adminConfig?.blocks, resolveText) });
+	if (type === "array") return /* @__PURE__ */ jsx(ItemChangeList, { items: computeArrayChanges(from, to, getArrayItemFields(nestedFields), resolveText) });
+	if (type === "object") {
+		const props = computeObjectChanges(from, to, nestedFields, resolveText);
+		if (props.length === 0) return /* @__PURE__ */ jsx(NoChangesPlaceholder, {});
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-1.5 py-1",
+			children: props.map((prop) => /* @__PURE__ */ jsx(PropertyChangeRow, { change: prop }, prop.key))
+		});
+	}
+	return null;
+}
+function shouldUseStructuredDiff(type, from, to) {
+	if (type === "blocks") return isBlockDocument(from) || isBlockDocument(to);
+	if (type === "object") return isRecord(from) || isRecord(to);
+	if (type === "array") {
+		const fromArr = Array.isArray(from) ? from : [];
+		const toArr = Array.isArray(to) ? to : [];
+		return fromArr.some(isRecord) || toArr.some(isRecord);
+	}
+	return false;
+}
+
+//#endregion
+export { StructuredFieldDiff, shouldUseStructuredDiff };

package/dist/client/components/ui/sidebar.mjs

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.mjs";
 import { Button } from "./button.mjs";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
 import { Separator } from "./separator.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
 import { useIsMobile } from "../../hooks/use-media-query.mjs";
 import { shouldHandleAdminShortcut } from "../../utils/keyboard-shortcuts.mjs";
 import { Icon } from "@iconify/react";

package/dist/client/hooks/use-field-options.mjs

@@ -15,30 +15,49 @@ function getSiblingData(values, fieldPath) {
 	else return null;
 	return typeof sibling === "object" ? sibling : null;
 }
-function getWatchedValues(allValues, siblingData, watchDeps) {
+function getSiblingDepPath(fieldPath, dep) {
+	const siblingKey = dep.slice(9);
+	if (!siblingKey) return null;
+	const parts = fieldPath.split(".");
+	const numericIndex = parts.findIndex((p) => /^\d+$/.test(p));
+	if (numericIndex === -1) return null;
+	return [...parts.slice(0, numericIndex + 1), siblingKey].join(".");
+}
+function getWatchPathForDep(fieldPath, dep) {
+	if (dep.startsWith("$sibling.")) return getSiblingDepPath(fieldPath, dep);
+	if (dep.startsWith("$")) return null;
+	return dep;
+}
+function getWatchedValuesForDeps(watchEntries, watchedValues) {
 	const result = {};
-	for (const dep of watchDeps) if (dep.startsWith("$sibling.")) {
-		const siblingKey = dep.slice(9);
-		result[dep] = siblingData?.[siblingKey];
-	} else if (!dep.startsWith("$")) result[dep] = allValues[dep];
+	if (watchEntries.length === 0) return result;
+	const values = Array.isArray(watchedValues) ? watchedValues : [watchedValues];
+	for (const [index, entry] of watchEntries.entries()) result[entry.dep] = values[index];
 	return result;
 }
+const EMPTY_WATCH_DEPS = [];
 function useFieldOptions({ collection, mode = "collection", field, optionsConfig, staticOptions, initialSearch = "", limit = 20, enabled = true }) {
 	const client = useAdminStore((s) => s.client);
 	const form = useFormContext();
 	const queryClient = useQueryClient();
 	const [search, setSearch] = React.useState(initialSearch);
 	const debouncedSearch = useDebouncedValue(search, 300);
-	const watchedValues = useWatch({ control: form.control });
-	const formValues = React.useMemo(() => watchedValues ?? {}, [watchedValues]);
-	const siblingData = React.useMemo(() => getSiblingData(formValues, field), [formValues, field]);
-	const watchDeps = optionsConfig?.watch ?? [];
-	const depValues = React.useMemo(() => getWatchedValues(formValues, siblingData, watchDeps), [
-		formValues,
-		siblingData,
-		watchDeps
-	]);
-	const depKey = JSON.stringify(depValues);
+	const watchDeps = optionsConfig?.watch ?? EMPTY_WATCH_DEPS;
+	const watchEntries = React.useMemo(() => watchDeps.map((dep) => {
+		const path = getWatchPathForDep(field, dep);
+		return path ? {
+			dep,
+			path
+		} : null;
+	}).filter((entry) => !!entry), [watchDeps, field]);
+	const watchPaths = React.useMemo(() => watchEntries.map((entry) => entry.path), [watchEntries]);
+	const watchedValues = useWatch({
+		control: form.control,
+		name: watchPaths,
+		disabled: watchPaths.length === 0
+	});
+	const depValues = React.useMemo(() => getWatchedValuesForDeps(watchEntries, watchedValues), [watchEntries, watchedValues]);
+	const depKey = React.useMemo(() => JSON.stringify(depValues), [depValues]);
 	const filteredStaticOptions = React.useMemo(() => {
 		if (optionsConfig || !staticOptions) return null;
 		if (!debouncedSearch) return staticOptions;

package/dist/client/hooks/use-transition-stage.mjs

@@ -1,4 +1,4 @@
-import { selectBasePath, useAdminStore } from "../runtime/provider.mjs";
+import { selectClient, useAdminStore } from "../runtime/provider.mjs";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 //#region src/client/hooks/use-transition-stage.ts
@@ -40,7 +40,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 */
 function useTransitionStage(resourceName, options) {
 	const mode = options?.mode ?? "collection";
-	const basePath = useAdminStore(selectBasePath);
+	const basePath = useAdminStore(selectClient).getBasePath?.() ?? "/api";
 	const queryClient = useQueryClient();
 	return useMutation({
 		mutationFn: async (params) => {

package/dist/client/preview/preview-banner.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/client/preview/preview-banner.d.ts
 
@@ -40,6 +40,6 @@ declare function PreviewBanner({
   isPreviewMode,
   className,
   exitPreviewUrl
-}: PreviewBannerProps): react_jsx_runtime21.JSX.Element | null;
+}: PreviewBannerProps): react_jsx_runtime24.JSX.Element | null;
 //#endregion
 export { PreviewBanner, PreviewBannerProps };

package/dist/client/preview/preview-field.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/client/preview/preview-field.d.ts
 
@@ -68,7 +68,7 @@ declare function PreviewProvider({
   }) => void;
   onFieldValueEdited?: (payload: PreviewFieldValueEditedPayload) => void;
   children: React.ReactNode;
-}): react_jsx_runtime22.JSX.Element;
+}): react_jsx_runtime21.JSX.Element;
 /**
  * Hook to access preview context.
  */
@@ -107,7 +107,7 @@ declare function PreviewField({
   style,
   onClick,
   onValueCommit
-}: PreviewFieldProps): react_jsx_runtime22.JSX.Element;
+}: PreviewFieldProps): react_jsx_runtime21.JSX.Element;
 /**
  * Standalone PreviewField that works without context.
  * Useful when you can't use PreviewProvider.
@@ -131,6 +131,6 @@ declare function StandalonePreviewField({
     blockId?: string;
     fieldType?: "regular" | "block" | "relation";
   }) => void;
-}): react_jsx_runtime22.JSX.Element;
+}): react_jsx_runtime21.JSX.Element;
 //#endregion
 export { PreviewField, PreviewFieldProps, PreviewProvider, StandalonePreviewField, usePreviewContext };

package/dist/client/preview/use-collection-preview.mjs

@@ -48,7 +48,6 @@ function useCollectionPreview({ initialData, onRefresh }) {
 	const [isPreviewMode, setIsPreviewMode] = React.useState(false);
 	const lastAppliedSeqRef = React.useRef(null);
 	const initialDataRef = React.useRef(initialData);
-	const focusScrollTimerRef = React.useRef(null);
 	React.useEffect(() => {
 		try {
 			setIsPreviewMode(window.self !== window.top);
@@ -67,18 +66,6 @@ function useCollectionPreview({ initialData, onRefresh }) {
 	React.useEffect(() => {
 		if (!isPreviewMode) return;
 		window.parent.postMessage({ type: "PREVIEW_READY" }, "*");
-		const scheduleFocusScroll = (fieldPath) => {
-			if (focusScrollTimerRef.current !== null) window.clearTimeout(focusScrollTimerRef.current);
-			focusScrollTimerRef.current = window.setTimeout(() => {
-				focusScrollTimerRef.current = null;
-				const element = findPreviewFieldElement(fieldPath);
-				if (!element || shouldSkipPreviewAutoScroll(element)) return;
-				if (!isElementNearViewport(element)) element.scrollIntoView({
-					behavior: "auto",
-					block: "nearest"
-				});
-			}, 80);
-		};
 		const handleMessage = async (event) => {
 			const message = event.data;
 			if (!isPreviewAdminMessage(message)) return;
@@ -96,7 +83,6 @@ function useCollectionPreview({ initialData, onRefresh }) {
 					break;
 				case "FOCUS_FIELD":
 					setFocusedField((current) => current === message.fieldPath ? current : message.fieldPath);
-					scheduleFocusScroll(message.fieldPath);
 					break;
 				case "INIT_SNAPSHOT":
 					lastAppliedSeqRef.current = message.seq;
@@ -138,10 +124,6 @@ function useCollectionPreview({ initialData, onRefresh }) {
 		window.addEventListener("message", handleMessage);
 		return () => {
 			window.removeEventListener("message", handleMessage);
-			if (focusScrollTimerRef.current !== null) {
-				window.clearTimeout(focusScrollTimerRef.current);
-				focusScrollTimerRef.current = null;
-			}
 		};
 	}, [isPreviewMode]);
 	const handleFieldClick = React.useCallback((fieldPath, context) => {
@@ -199,23 +181,6 @@ function isPreviewPatchOp(value) {
 	const op = value;
 	return (op.op === "set" || op.op === "remove") && typeof op.path === "string";
 }
-function findPreviewFieldElement(fieldPath) {
-	const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(fieldPath) : fieldPath.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
-	return document.querySelector(`[data-preview-field="${escaped}"]`);
-}
-function shouldSkipPreviewAutoScroll(element) {
-	const activeElement = document.activeElement;
-	if (activeElement && element.contains(activeElement)) return true;
-	return element instanceof HTMLElement && element.dataset.previewEditing === "true";
-}
-function isElementNearViewport(element) {
-	const rect = element.getBoundingClientRect();
-	const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-	const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-	const verticalMargin = Math.min(120, viewportHeight * .2);
-	const horizontalMargin = Math.min(120, viewportWidth * .2);
-	return rect.bottom >= -verticalMargin && rect.top <= viewportHeight + verticalMargin && rect.right >= -horizontalMargin && rect.left <= viewportWidth + horizontalMargin;
-}
 
 //#endregion
 export { useCollectionPreview };

package/dist/client/utils/auto-expand-fields.mjs

@@ -44,7 +44,7 @@ function addRelationExpand(withFields, relationName, nestedRelation) {
 function autoExpandFields(config) {
 	const withFields = {};
 	if (config.list?.with) for (const rel of config.list.with) withFields[rel] = true;
-	const columnFields = config.list?.columns ?? [];
+	const columnFields = config.visibleColumns?.length ? config.visibleColumns : config.list?.columns ?? [];
 	const fieldsToCheck = [];
 	if (columnFields.length > 0) for (const col of columnFields) {
 		const fieldName = typeof col === "string" ? col : col.field;