@questpie/admin 3.2.7 → 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/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;

package/dist/client/views/collection/auto-form-fields.mjs

@@ -385,20 +385,21 @@ function extractFieldNamesFromFieldItems(fieldItems) {
 * Supports recursive tabs/sections nesting and auto-generates
 * field list when no form config is defined.
 */
-function AutoFormFields({ app: _cms, collection, mode = "collection", config, registry, fieldResolver, fieldPrefix, allCollectionsConfig }) {
+function AutoFormFields({ app: _cms, collection, mode = "collection", config, registry, fieldResolver, fieldPrefix, allCollectionsConfig, resolvedFields: providedFields, schema: providedSchema }) {
 	const isActionForm = collection === "__action__";
+	const shouldFetchSchema = !providedFields || !providedSchema;
 	const collectionResult = useCollectionFields(mode === "collection" ? collection : "", {
 		fallbackFields: mode === "collection" ? config?.fields : void 0,
-		schemaQueryOptions: { enabled: mode === "collection" && !isActionForm }
+		schemaQueryOptions: { enabled: mode === "collection" && !isActionForm && shouldFetchSchema }
 	});
-	const globalResult = useGlobalFields(mode === "global" ? collection : "", { schemaQueryOptions: { enabled: mode === "global" } });
+	const globalResult = useGlobalFields(mode === "global" ? collection : "", { schemaQueryOptions: { enabled: mode === "global" && shouldFetchSchema } });
 	const { data: collectionMeta } = useCollectionMeta(collection, { enabled: mode === "collection" && !isActionForm });
 	const { data: globalMeta } = useGlobalMeta(collection, { enabled: mode === "global" });
 	const resolvedFields = mode === "global" ? {
-		...globalResult.fields,
+		...providedFields ?? globalResult.fields,
 		...config?.fields
-	} : collectionResult.fields;
-	const schema = mode === "global" ? globalResult.schema : collectionResult.schema;
+	} : providedFields ?? collectionResult.fields;
+	const schema = providedSchema ?? (mode === "global" ? globalResult.schema : collectionResult.schema);
 	const entityMeta = mode === "global" ? globalMeta : collectionMeta;
 	const form = useFormContext();
 	const resolveText = useResolveText();
@@ -476,20 +477,23 @@ function AutoFormFields({ app: _cms, collection, mode = "collection", config, re
 				className: "qa-form-fields__main min-w-0 flex-1",
 				children: mainContent
 			}), /* @__PURE__ */ jsx("aside", {
-				className: cn("qa-form-fields__sidebar", "w-full @max-2xl:pb-2 @2xl:max-w-[18rem] @2xl:pl-1"),
+				className: cn("qa-form-fields__sidebar", "w-full @max-2xl:pb-2 @2xl:sticky @2xl:top-4 @2xl:h-[calc(100svh-7rem)] @2xl:min-h-0 @2xl:max-w-[18rem] @2xl:shrink-0 @2xl:self-start @2xl:pl-1"),
 				children: /* @__PURE__ */ jsx("div", {
-					className: "bg-surface-low/45 space-y-4 rounded-md px-3 py-3 @2xl:sticky @2xl:top-4 @2xl:h-auto",
-					children: /* @__PURE__ */ jsx(SidebarRenderer, {
-						sidebar: formConfig.sidebar,
-						fields,
-						collection,
-						mode,
-						registry,
-						fieldPrefix,
-						allCollectionsConfig,
-						entityMeta,
-						formValues,
-						resolveText
+					className: "bg-surface-low/45 flex min-h-0 flex-col rounded-md @2xl:h-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "scrollbar-thin min-h-0 space-y-4 overflow-y-auto px-3 py-3 @2xl:flex-1",
+						children: /* @__PURE__ */ jsx(SidebarRenderer, {
+							sidebar: formConfig.sidebar,
+							fields,
+							collection,
+							mode,
+							registry,
+							fieldPrefix,
+							allCollectionsConfig,
+							entityMeta,
+							formValues,
+							resolveText
+						})
 					})
 				})
 			})]

package/dist/client/views/collection/cells/complex-cells.mjs

@@ -1,7 +1,7 @@
 import { useResolveText, useTranslation } from "../../../i18n/hooks.mjs";
 import { cn } from "../../../lib/utils.mjs";
-import { Badge } from "../../../components/ui/badge.mjs";
 import { isBlockContent } from "../../../blocks/types.mjs";
+import { Badge } from "../../../components/ui/badge.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.mjs";
 import { useAdminConfig } from "../../../hooks/use-admin-config.mjs";
 import { formatFieldLabel, formatPrimitiveValue, getFieldLabel, getItemLabel, summarizeValue } from "./shared/cell-helpers.mjs";

package/dist/client/views/collection/columns/build-columns.mjs

@@ -1,8 +1,8 @@
 import { useResolveText } from "../../../i18n/hooks.mjs";
 import { useSafeContentLocales } from "../../../runtime/content-locales-provider.mjs";
 import { useScopedLocale } from "../../../runtime/locale-scope.mjs";
-import { DefaultCell, TextCell } from "../cells/primitive-cells.mjs";
 import { LocaleSwitcher } from "../../../components/locale-switcher.mjs";
+import { DefaultCell, TextCell } from "../cells/primitive-cells.mjs";
 import { normalizeColumnConfig } from "../../../builder/types/collection-types.mjs";
 import { computeDefaultColumns, formatHeader } from "./column-defaults.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";