@questpie/admin 3.5.2 → 3.5.3

package/dist/client/views/collection/outline.mjs

@@ -34,12 +34,11 @@ function stableGroupKey(value) {
 	if (typeof value === "object") return getId(value) ?? JSON.stringify(value);
 	return String(value);
 }
-function shouldExpand(key, depth, outline, collapsedKeys) {
-	if (collapsedKeys.has(key)) return false;
+function shouldExpand(key, depth, outline, toggledKeys) {
 	const defaultExpanded = outline?.defaultExpanded ?? true;
-	if (defaultExpanded === true) return true;
-	if (defaultExpanded === false) return false;
-	return depth === 0;
+	const defaultValue = defaultExpanded === true ? true : defaultExpanded === false ? false : depth === 0;
+	if (toggledKeys.has(key)) return !defaultValue;
+	return defaultValue;
 }
 function compareByOrder(a, b, order) {
 	if (Array.isArray(order)) {
@@ -86,7 +85,8 @@ function buildFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 	}
 	return Array.from(groups.values()).sort((a, b) => compareByOrder(a, b, level.order)).flatMap((group) => {
 		const rowKey = `${scopeKey}/field:${level.field}:${group.key}`;
-		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.collapsedKeys);
+		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.toggledKeys);
+		const meta = ctx.metaForValue(group.value, level.field);
 		return [{
 			kind: "group",
 			key: rowKey,
@@ -94,7 +94,9 @@ function buildFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 			depth,
 			count: group.docs.length,
 			expandable: true,
-			collapsed: !expanded
+			collapsed: !expanded,
+			...meta?.icon != null && { icon: meta.icon },
+			...meta?.className && { className: meta.className }
 		}, ...expanded ? buildLevelRows(group.docs, depth + 1, levelIndex + 1, ctx, rowKey) : []];
 	});
 }
@@ -118,7 +120,7 @@ function buildRelationFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 	}
 	return Array.from(groups.values()).sort((a, b) => compareByOrder(a, b, level.order)).flatMap((group) => {
 		const rowKey = `${scopeKey}/relation-field:${fieldPath}:${group.key}`;
-		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.collapsedKeys);
+		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.toggledKeys);
 		return [{
 			kind: "group",
 			key: rowKey,
@@ -151,7 +153,22 @@ function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 			const childId = getId(childValue);
 			if (!parentId || !childId || !docsById.has(childId)) continue;
 			if (docsById.has(parentId) || !isRecord(parentValue)) continue;
-			docsById.set(parentId, parentValue);
+			docsById.set(parentId, ctx.allDocsById?.get(parentId) ?? parentValue);
+			changed = true;
+		}
+		if (!changed) break;
+	}
+	if (ctx.allDocsById) for (let pass = 0; pass < ctx.maxDepth; pass++) {
+		let changed = false;
+		for (const edge of edgeDocs) {
+			const parentId = getId(getPathValue(edge, level.parentField));
+			const childId = getId(getPathValue(edge, level.childField));
+			if (!parentId || !childId) continue;
+			if (!docsById.has(parentId)) continue;
+			if (docsById.has(childId)) continue;
+			const childDoc = ctx.allDocsById.get(childId);
+			if (!childDoc) continue;
+			docsById.set(childId, childDoc);
 			changed = true;
 		}
 		if (!changed) break;
@@ -201,7 +218,7 @@ function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 			}
 			for (const [key, group] of groups) {
 				const rowKey = `${scopeKey}/edge-group:${level.collection}:${parentId}:${key}`;
-				const expanded = shouldExpand(rowKey, nextDepth, ctx.outline, ctx.collapsedKeys);
+				const expanded = shouldExpand(rowKey, nextDepth, ctx.outline, ctx.toggledKeys);
 				rows.push({
 					kind: "group",
 					key: rowKey,
@@ -223,18 +240,15 @@ function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 		if (!doc || ancestorIds.has(id)) return;
 		const rowKey = `${scopeKey}/record:${id}`;
 		const hasChildren = (childrenByParent.get(id) ?? []).some((child) => docsById.has(child.childId));
-		const expanded = hasChildren && shouldExpand(rowKey, rowDepth, ctx.outline, ctx.collapsedKeys);
 		rows.push({
 			kind: "record",
 			key: rowKey,
 			id,
 			doc,
-			depth: rowDepth,
-			expandable: hasChildren,
-			collapsed: hasChildren ? !expanded : void 0
+			depth: rowDepth
 		});
 		visited.add(id);
-		if (hasChildren && expanded) {
+		if (hasChildren) {
 			const nextAncestors = new Set(ancestorIds);
 			nextAncestors.add(id);
 			pushChildRows(id, rowDepth + 1, branchDepth, nextAncestors);
@@ -297,7 +311,7 @@ function buildPathRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 	function walk(node, rowDepth) {
 		const rows = [];
 		for (const child of Array.from(node.children.values()).sort((a, b) => a.label.localeCompare(b.label))) {
-			const expanded = shouldExpand(child.key, rowDepth, ctx.outline, ctx.collapsedKeys);
+			const expanded = shouldExpand(child.key, rowDepth, ctx.outline, ctx.toggledKeys);
 			rows.push({
 				kind: "synthetic",
 				key: child.key,
@@ -342,15 +356,26 @@ function buildLevelRows(docs, depth, levelIndex, ctx, scopeKey = "root") {
 	if (level.kind === "edge") return buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey);
 	return buildPathRows(level, docs, depth, levelIndex, ctx, scopeKey);
 }
-function buildOutlineRows({ docs, outline, edgesByCollection = {}, collapsedKeys, labelForValue = defaultLabelForValue, maxDepth }) {
+const noMeta = () => void 0;
+function buildOutlineRows({ docs, outline, edgesByCollection = {}, toggledKeys, collapsedKeys, labelForValue = defaultLabelForValue, metaForValue = noMeta, maxDepth, allDocs }) {
 	const levels = outline?.levels?.filter(Boolean) ?? [];
+	let allDocsById;
+	if (allDocs && allDocs.length > 0) {
+		allDocsById = /* @__PURE__ */ new Map();
+		for (const doc of allDocs) {
+			const id = getId(doc);
+			if (id) allDocsById.set(id, doc);
+		}
+	}
 	const ctx = {
 		levels,
 		outline,
 		edgesByCollection,
-		collapsedKeys: new Set(collapsedKeys ?? []),
+		toggledKeys: new Set(toggledKeys ?? collapsedKeys ?? []),
 		labelForValue,
-		maxDepth: maxDepth ?? outline?.maxDepth ?? DEFAULT_MAX_DEPTH
+		metaForValue,
+		maxDepth: maxDepth ?? outline?.maxDepth ?? DEFAULT_MAX_DEPTH,
+		allDocsById
 	};
 	if (levels.length === 0) return buildLevelRows(docs, 0, 0, {
 		...ctx,

package/dist/client/views/collection/quick-filter-bar.mjs

@@ -0,0 +1,45 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { ComponentRenderer } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
+import { cloneFilters, filtersEqual } from "../../lib/view-filter-utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/quick-filter-bar.tsx
+function QuickFilterBar({ quickFilters, currentFilters, onApply }) {
+	const resolveText = useResolveText();
+	const visibleFilters = quickFilters?.filter((filter) => filter.filters) ?? [];
+	if (visibleFilters.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 flex-wrap items-center gap-2",
+		children: visibleFilters.map((filter) => {
+			const active = filtersEqual(currentFilters, filter.filters);
+			const label = resolveText(filter.label, filter.id);
+			const description = resolveText(filter.description);
+			const button = /* @__PURE__ */ jsxs(Button, {
+				variant: active ? "secondary" : "outline",
+				size: "sm",
+				className: cn("gap-1.5 text-xs", active && "border-border-strong bg-muted text-foreground"),
+				"aria-pressed": active,
+				onClick: () => onApply(cloneFilters(filter.filters)),
+				children: [/* @__PURE__ */ jsx(ComponentRenderer, {
+					reference: filter.icon,
+					additionalProps: { className: "size-4 shrink-0" }
+				}), /* @__PURE__ */ jsx("span", { children: label })]
+			}, filter.id);
+			if (!description) return button;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				align: "start",
+				children: description
+			})] }, filter.id);
+		})
+	});
+}
+
+//#endregion
+export { QuickFilterBar };

package/dist/client/views/collection/table-view.mjs

@@ -3,6 +3,7 @@ import { cn } from "../../lib/utils.mjs";
 import { selectRealtime, useAdminStore } from "../../runtime/provider.mjs";
 import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
 import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
 import { flattenOptions } from "../../components/primitives/types.mjs";
 import { resolveOptionLabelForValue } from "../../components/primitives/option-label.mjs";
 import { Button } from "../../components/ui/button.mjs";
@@ -14,6 +15,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/too
 import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { createActionRegistryProxy } from "../../builder/types/action-registry.mjs";
 import { ActionButton } from "../../components/actions/action-button.mjs";
+import { adminCollectionKey } from "../../hooks/query-access.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
 import { useSuspenseCollectionMeta } from "../../hooks/use-collection-meta.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
@@ -44,6 +46,7 @@ import { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
 import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";
 import { useViewState } from "../../hooks/use-view-state.mjs";
 import { BulkActionToolbar } from "./bulk-action-toolbar.mjs";
+import { QuickFilterBar } from "./quick-filter-bar.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Suspense, useMemo, useState } from "react";
@@ -258,6 +261,8 @@ function mapListSchemaToConfig(list) {
 	const config = {};
 	if (list.columns?.length) config.columns = list.columns;
 	if (list.defaultSort) config.defaultSort = list.defaultSort;
+	if (list.defaultFilters?.length) config.defaultFilters = list.defaultFilters;
+	if (list.quickFilters?.length) config.quickFilters = list.quickFilters;
 	if (list.orderable) config.orderable = list.orderable;
 	if (Array.isArray(list.searchable) && list.searchable.length) {
 		config.searchFields = list.searchable;
@@ -398,6 +403,7 @@ function TableView(props) {
 */
 function TableViewInner({ collection, config, viewConfig, navigate, basePath = "/admin", showSearch = true, showFilters = true, showToolbar = true, realtime, headerActions, emptyState, actionsConfig }) {
 	"use no memo";
+	const collectionKey = adminCollectionKey(collection);
 	const globalRealtimeConfig = useAdminStore(selectRealtime);
 	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
 	const { collections: uploadCollections } = useUploadCollection();
@@ -475,10 +481,16 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 	const orderField = "order";
 	const orderDirection = typeof orderableConfig === "object" ? orderableConfig.direction ?? "asc" : "asc";
 	const orderStep = typeof orderableConfig === "object" ? orderableConfig.step ?? 10 : 10;
-	const viewState = useViewState(defaultColumns, {
+	const defaultFilters = useMemo(() => resolvedListConfig?.defaultFilters ?? [], [resolvedListConfig?.defaultFilters]);
+	const viewState = useViewState(defaultColumns, useMemo(() => ({
 		realtime: resolvedRealtime,
-		groupBy: defaultGroupBy
-	}, collection, user?.id);
+		groupBy: defaultGroupBy,
+		filters: defaultFilters
+	}), [
+		resolvedRealtime,
+		defaultGroupBy,
+		defaultFilters
+	]), collection, user?.id);
 	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
 	const visibleColumnsForExpansion = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns;
 	const expandedFields = useMemo(() => autoExpandFields({
@@ -492,7 +504,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		visibleColumnsForExpansion,
 		collectionMeta?.relations
 	]);
-	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || !!resolvedFields?.[field]), [resolvedFields]);
+	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || field === "createdAt" || field === "updatedAt" || !!resolvedFields?.[field]), [resolvedFields]);
 	const hasOrderField = isKnownSortField(orderField);
 	const canUseOrderableSort = isOrderableEnabled && hasOrderField;
 	const effectiveSort = useMemo(() => {
@@ -666,15 +678,15 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		limit: 100,
 		highlights: true
 	}, { enabled: isSearching });
-	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collection, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
+	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collectionKey, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
 	const isLoading = isSearching ? searchLoading : listLoading;
 	const isSearchActive = isSearching && searchFetching;
 	const { data: savedViewsData, isLoading: savedViewsLoading } = useSavedViews(collection, user?.id);
 	const saveViewMutation = useSaveView(collection, user?.id);
 	const deleteViewMutation = useDeleteSavedView(collection, user?.id);
-	const deleteMutation = useCollectionDelete(collection);
-	const restoreMutation = useCollectionRestore(collection);
-	const updateBatchMutation = useCollectionUpdateBatch(collection);
+	const deleteMutation = useCollectionDelete(collectionKey);
+	const restoreMutation = useCollectionRestore(collectionKey);
+	const updateBatchMutation = useCollectionUpdateBatch(collectionKey);
 	const availableFields = useMemo(() => {
 		return getAllAvailableFields(resolvedFields, { meta: collectionMeta });
 	}, [resolvedFields, collectionMeta]);
@@ -875,13 +887,23 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		orderDirection,
 		viewState
 	]);
-	const hasViewOptionsState = hasActiveFilters || !!viewState.config.groupBy || viewState.config.visibleColumns.length !== defaultColumns.length || !!viewState.config.includeDeleted;
+	const hasViewOptionsState = hasActiveFilters || !!viewState.config.sortConfig || !!viewState.config.groupBy || viewState.config.visibleColumns.length !== defaultColumns.length || !!viewState.config.includeDeleted;
 	const clearFilters = () => {
 		viewState.setConfig({
 			...viewState.config,
 			filters: []
 		});
 	};
+	const applyQuickFilters = React.useCallback((filters) => {
+		viewState.setConfig((current) => ({
+			...current,
+			filters,
+			pagination: {
+				...current.pagination ?? { pageSize: 25 },
+				page: 1
+			}
+		}));
+	}, [viewState]);
 	const exitReorderMode = React.useCallback(() => {
 		setOptimisticOrderIds(null);
 		setIsReorderMode(false);
@@ -992,6 +1014,14 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		const groupField = groupableFields.find((field) => field.name === groupBy);
 		const collapsedGroups = new Set(viewState.config.collapsedGroups ?? []);
 		const serverGroups = !isSearching ? listData?.groups : void 0;
+		const iconForValue = (value) => {
+			if (groupField?.type !== "select") return null;
+			const options = groupField.options?.options;
+			if (!Array.isArray(options)) return null;
+			const option = flattenOptions(options).find((opt) => String(opt.value) === String(value));
+			if (!option?.icon) return null;
+			return resolveIconElement(option.icon);
+		};
 		if (serverGroups?.length) {
 			const rowsById = new Map(rows.map((row) => [row.id, row]));
 			return serverGroups.flatMap((group) => {
@@ -1003,6 +1033,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					type: "group",
 					key: groupKey,
 					label,
+					icon: iconForValue(group.value),
 					count: group.count,
 					collapsed
 				}, ...collapsed ? [] : groupRows.map((row) => ({
@@ -1013,7 +1044,8 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		}
 		const groups = /* @__PURE__ */ new Map();
 		for (const row of rows) {
-			const valueLabel = stringifyGroupValue(row.original?.[groupBy], groupField, resolveText, t, uiLocale, t("common.noValue"));
+			const rawValue = row.original?.[groupBy];
+			const valueLabel = stringifyGroupValue(rawValue, groupField, resolveText, t, uiLocale, t("common.noValue"));
 			const groupKey = `${groupBy}:${valueLabel}`;
 			const group = groups.get(groupKey);
 			if (group) {
@@ -1022,8 +1054,9 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 			}
 			groups.set(groupKey, {
 				label: valueLabel,
+				value: rawValue,
 				rows: [row],
-				sortIndex: getGroupSortIndex(row.original?.[groupBy], groupField)
+				sortIndex: getGroupSortIndex(rawValue, groupField)
 			});
 		}
 		return Array.from(groups.entries()).sort(([, a], [, b]) => a.sortIndex - b.sortIndex).flatMap(([key, group]) => {
@@ -1032,6 +1065,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				type: "group",
 				key,
 				label: group.label,
+				icon: iconForValue(group.value),
 				count: group.rows.length,
 				collapsed
 			}, ...collapsed ? [] : group.rows.map((row) => ({
@@ -1212,6 +1246,11 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 						containerClassName: "h-10"
 					})
 				}),
+				/* @__PURE__ */ jsx(QuickFilterBar, {
+					quickFilters: resolvedListConfig?.quickFilters,
+					currentFilters: viewState.config.filters,
+					onApply: applyQuickFilters
+				}),
 				isReorderMode && canUseOrderableSort && /* @__PURE__ */ jsxs("div", {
 					className: "border-border/70 bg-muted/30 text-muted-foreground flex min-h-10 items-center justify-between gap-3 border-y px-3 py-2 font-mono text-xs",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -1320,16 +1359,20 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 														children: /* @__PURE__ */ jsxs("button", {
 															type: "button",
 															"aria-expanded": !entry.collapsed,
-															className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 -ml-1 inline-flex min-h-8 items-center gap-2 rounded-md px-1 font-mono text-[11px] font-semibold tracking-[0.12em] uppercase transition-colors focus-visible:ring-2 focus-visible:outline-none",
+															className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 -ml-1 inline-flex min-h-8 items-center gap-2 rounded-md px-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none",
 															onClick: () => viewState.toggleCollapsedGroup(entry.key),
 															children: [
 																/* @__PURE__ */ jsx(Icon, {
-																	icon: entry.collapsed ? "ph:caret-right" : "ph:caret-down",
-																	className: "size-3.5 shrink-0"
+																	icon: "ph:caret-right-bold",
+																	className: cn("size-3 shrink-0 transition-transform", !entry.collapsed && "rotate-90")
+																}),
+																entry.icon && /* @__PURE__ */ jsx("span", {
+																	className: "size-4 shrink-0",
+																	children: entry.icon
 																}),
 																/* @__PURE__ */ jsx("span", { children: entry.label }),
 																groupingConfig?.showCounts !== false && /* @__PURE__ */ jsx("span", {
-																	className: "bg-muted text-muted-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] tracking-normal tabular-nums",
+																	className: "text-muted-foreground/60 tabular-nums",
 																	children: entry.count
 																})
 															]
@@ -1543,7 +1586,8 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					savedViewsLoading,
 					onSaveView: handleSaveView,
 					onDeleteView: handleDeleteView,
-					supportsSoftDelete: collectionMeta?.softDelete ?? false
+					supportsSoftDelete: collectionMeta?.softDelete ?? false,
+					defaultFilters
 				}),
 				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
 					open: !!dialogAction,

package/dist/client/views/globals/global-form-view.mjs

@@ -12,13 +12,13 @@ import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { DateTimeInput } from "../../components/primitives/date-input.mjs";
 import { ConfirmationDialog } from "../../components/actions/confirmation-dialog.mjs";
 import { useGlobalFields } from "../../hooks/use-global-fields.mjs";
+import { ReactiveFieldStatesProvider, useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { AutoFormFields } from "../collection/auto-form-fields.mjs";
 import { EmptyState } from "../../components/ui/empty-state.mjs";
 import { HistorySidebar } from "../../components/history-sidebar.mjs";
 import { useGlobal, useGlobalRevertVersion, useGlobalUpdate, useGlobalVersions } from "../../hooks/use-global.mjs";
 import { useGlobalServerValidation } from "../../hooks/use-server-validation.mjs";
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
-import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
 import { shouldHandleAdminShortcut } from "../../utils/keyboard-shortcuts.mjs";
@@ -293,7 +293,7 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		if (globalData) form.reset(globalData);
 	}, [form, globalData]);
 	const reactiveConfigs = React.useMemo(() => extractReactiveConfigs(globalSchema), [globalSchema]);
-	useReactiveFields({
+	const { fieldStates: reactiveFieldStates } = useReactiveFields({
 		collection: globalName,
 		mode: "global",
 		reactiveConfigs,
@@ -463,13 +463,16 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 							t
 						})
 					] })
-				}), /* @__PURE__ */ jsx(AutoFormFields, {
-					collection: globalName,
-					mode: "global",
-					config: resolvedConfig,
-					registry,
-					resolvedFields: schemaFields,
-					schema: globalSchema
+				}), /* @__PURE__ */ jsx(ReactiveFieldStatesProvider, {
+					fieldStates: reactiveFieldStates,
+					children: /* @__PURE__ */ jsx(AutoFormFields, {
+						collection: globalName,
+						mode: "global",
+						config: resolvedConfig,
+						registry,
+						resolvedFields: schemaFields,
+						schema: globalSchema
+					})
 				})]
 			}),
 			isHistoryOpen && /* @__PURE__ */ jsx(HistorySidebar, {

package/dist/client/views/layout/admin-layout.mjs

@@ -163,7 +163,7 @@ function AdminLayout({ LinkComponent, activeRoute, basePath = "/admin", brandNam
 						}),
 						secondaryRailConfig?.placement !== "right" && secondaryRail,
 						/* @__PURE__ */ jsxs(SidebarInset, {
-							className: "qa-admin-layout__content bg-background flex h-svh flex-col overflow-hidden md:rounded-tl-2xl",
+							className: "qa-admin-layout__content bg-background flex h-svh scrollbar-none flex-col overflow-hidden md:rounded-t-2xl",
 							children: [
 								shouldShowHeader && header && /* @__PURE__ */ jsx("header", {
 									className: "qa-admin-layout__header border-border-subtle border-b",

package/dist/client/views/layout/admin-sidebar.mjs

@@ -5,7 +5,7 @@ import { useSafeContentLocales } from "../../runtime/content-locales-provider.mj
 import { ComponentRenderer } from "../../components/component-renderer.mjs";
 import { Button } from "../../components/ui/button.mjs";
 import { getFlagUrl } from "../../utils/locale-to-flag.mjs";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
 import { useLazyComponent } from "../../utils/use-lazy-component.mjs";
@@ -440,6 +440,7 @@ function UserFooter({ theme = "system", setTheme, showThemeToggle }) {
 			icon: "ph:monitor"
 		}
 	], [t]);
+	const currentThemeOption = themeOptions.find((option) => option.value === theme) ?? themeOptions[2];
 	const handleThemeChange = React.useCallback((value) => {
 		setTheme?.(value);
 	}, [setTheme]);
@@ -530,21 +531,26 @@ function UserFooter({ theme = "system", setTheme, showThemeToggle }) {
 						className: "size-4"
 					}), t("auth.myAccount")]
 				}),
-				shouldShowThemeToggle && /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-					/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("ui.toggleTheme") }),
-					/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
-						value: theme,
-						onValueChange: handleThemeChange,
-						children: themeOptions.map((option) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
-							value: option.value,
-							children: [/* @__PURE__ */ jsx(Icon, {
+				shouldShowThemeToggle && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: currentThemeOption.icon }), t("ui.toggleTheme")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+					className: "min-w-40",
+					children: themeOptions.map((option) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => handleThemeChange(option.value),
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
 								icon: option.icon,
 								className: "size-4"
-							}), /* @__PURE__ */ jsx("span", { children: option.label })]
-						}, option.value))
-					})
-				] }),
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1",
+								children: option.label
+							}),
+							option.value === theme && /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:check",
+								className: "text-foreground size-4"
+							})
+						]
+					}, option.value))
+				})] })] }),
 				hasMultipleUiLocales && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:globe" }), t("locale.uiLanguage")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: uiLocaleOptions.map((locale) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
 					onClick: () => setUiLocale(locale.code),
 					children: [

package/dist/client/views/layout/admin-theme.mjs

@@ -10,10 +10,11 @@ function getStoredAdminTheme() {
 }
 function useManagedAdminTheme(controlledTheme, controlledSetTheme, options = {}) {
 	const enabled = options.enabled ?? true;
-	const [uncontrolledTheme, setUncontrolledTheme] = React.useState(getStoredAdminTheme);
-	const theme = controlledTheme ?? uncontrolledTheme;
+	const isControlled = controlledTheme !== void 0 && controlledSetTheme !== void 0;
+	const [uncontrolledTheme, setUncontrolledTheme] = React.useState(() => controlledTheme ?? getStoredAdminTheme());
+	const theme = isControlled ? controlledTheme : uncontrolledTheme;
 	const setTheme = React.useCallback((next) => {
-		if (controlledSetTheme) {
+		if (isControlled) {
 			controlledSetTheme(next);
 			return;
 		}
@@ -21,7 +22,7 @@ function useManagedAdminTheme(controlledTheme, controlledSetTheme, options = {})
 		try {
 			window.localStorage.setItem(ADMIN_THEME_STORAGE_KEY, next);
 		} catch {}
-	}, [controlledSetTheme]);
+	}, [controlledSetTheme, isControlled]);
 	React.useEffect(() => {
 		if (!enabled) return;
 		const root = document.documentElement;

package/dist/client.mjs

@@ -9,6 +9,7 @@ import { EMPTY_BLOCK_CONTENT, isBlockContent } from "./client/blocks/types.mjs";
 import { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused } from "./client/contexts/focus-context.mjs";
 import { useIsDesktop, useIsMobile, useMediaQuery } from "./client/hooks/use-media-query.mjs";
 import { buildValidationSchema, buildZodFromIntrospection, createFormSchema } from "./client/builder/validation.mjs";
+import { useReactiveFields } from "./client/hooks/use-reactive-fields.mjs";
 import { isAdminToPreviewMessage, isPreviewToAdminMessage } from "./client/preview/types.mjs";
 import { useGlobal, useGlobalRevertVersion, useGlobalUpdate, useGlobalVersions } from "./client/hooks/use-global.mjs";
 import { useSearchParamToggle } from "./client/hooks/use-search-param-toggle.mjs";
@@ -16,7 +17,6 @@ import { useSidebarSearchParam } from "./client/hooks/use-sidebar-search-param.m
 import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionList, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "./client/hooks/use-collection.mjs";
 import { createAdminAuthClient, useAuthClient } from "./client/hooks/use-auth.mjs";
 import { useCurrentUser } from "./client/hooks/use-current-user.mjs";
-import { useReactiveFields } from "./client/hooks/use-reactive-fields.mjs";
 import { AdminLink } from "./client/components/admin-link.mjs";
 import { page } from "./client/builder/page/page.mjs";
 import { widget } from "./client/builder/widget/widget.mjs";

package/dist/components/rich-text/rich-text-renderer.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/rich-text/rich-text-renderer.d.ts
 /**
@@ -10,9 +10,9 @@ type TipTapNode = {
   text?: string;
   marks?: Array<{
     type: string;
-    attrs?: Record<string, any>;
+    attrs?: Record<string, unknown>;
   }>;
-  attrs?: Record<string, any>;
+  attrs?: Record<string, unknown>;
 };
 type TipTapDoc = {
   type: "doc";
@@ -53,7 +53,7 @@ interface RichTextRendererProps {
   /**
    * TipTap JSON content to render
    */
-  content: TipTapDoc | null | undefined;
+  content: unknown;
   /**
    * Custom styles for elements
    */
@@ -98,6 +98,6 @@ declare function RichTextRenderer({
   content,
   styles: customStyles,
   className
-}: RichTextRendererProps): react_jsx_runtime19.JSX.Element | null;
+}: RichTextRendererProps): react_jsx_runtime20.JSX.Element | null;
 //#endregion
 export { RichTextRenderer, RichTextStyles, TipTapDoc, TipTapNode };

package/dist/components/rich-text/rich-text-renderer.mjs

@@ -30,6 +30,9 @@ const defaultStyles = {
 	strike: "line-through",
 	underline: "underline"
 };
+function isRenderableTipTapDoc(content) {
+	return !!content && typeof content === "object" && content.type === "doc" && Array.isArray(content.content);
+}
 /**
 * Renders a single TipTap node
 */
@@ -85,7 +88,7 @@ function renderNode(node, index, styles) {
 		}
 		return textNode;
 	}
-	const nodeKey = `${node.type}-${node.text?.slice(0, 20) ?? ""}-${index}`;
+	const nodeKey = `${node.type}-${index}`;
 	const children = node.content?.map((child, i) => renderNode(child, i, styles));
 	switch (node.type) {
 		case "doc": return /* @__PURE__ */ jsx("div", { children }, nodeKey);
@@ -198,7 +201,7 @@ function renderNode(node, index, styles) {
 * ```
 */
 function RichTextRenderer({ content, styles: customStyles, className }) {
-	if (!content || !content.content || content.content.length === 0) return null;
+	if (!isRenderableTipTapDoc(content) || content.content.length === 0) return null;
 	const styles = {
 		...defaultStyles,
 		...customStyles

package/dist/index.mjs

@@ -9,6 +9,7 @@ import { EMPTY_BLOCK_CONTENT, isBlockContent } from "./client/blocks/types.mjs";
 import { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused } from "./client/contexts/focus-context.mjs";
 import { useIsDesktop, useIsMobile, useMediaQuery } from "./client/hooks/use-media-query.mjs";
 import { buildValidationSchema, buildZodFromIntrospection, createFormSchema } from "./client/builder/validation.mjs";
+import { useReactiveFields } from "./client/hooks/use-reactive-fields.mjs";
 import { isAdminToPreviewMessage, isPreviewToAdminMessage } from "./client/preview/types.mjs";
 import { useGlobal, useGlobalRevertVersion, useGlobalUpdate, useGlobalVersions } from "./client/hooks/use-global.mjs";
 import { useSearchParamToggle } from "./client/hooks/use-search-param-toggle.mjs";
@@ -16,7 +17,6 @@ import { useSidebarSearchParam } from "./client/hooks/use-sidebar-search-param.m
 import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionList, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "./client/hooks/use-collection.mjs";
 import { createAdminAuthClient, useAuthClient } from "./client/hooks/use-auth.mjs";
 import { useCurrentUser } from "./client/hooks/use-current-user.mjs";
-import { useReactiveFields } from "./client/hooks/use-reactive-fields.mjs";
 import { AdminLink } from "./client/components/admin-link.mjs";
 import { page } from "./client/builder/page/page.mjs";
 import { widget } from "./client/builder/widget/widget.mjs";

package/dist/modules/admin.d.mts

@@ -1,10 +1,10 @@
+import { FilterOperator, FilterRule, SortConfig, ViewConfiguration } from "../shared/types/saved-views.types.mjs";
 import { ExecuteActionRequest, ExecuteActionResponse, actionFunctions, executeAction, executeActionFn, getActionsConfig, getActionsConfigFn } from "../server/modules/admin/routes/execute-action.mjs";
 import { PreviewTokenPayload, createPreviewFunctions, createPreviewTokenVerifier, verifyPreviewTokenDirect } from "../server/modules/admin/routes/preview.mjs";
 import { batchReactive, fieldOptions, reactiveFunctions } from "../server/modules/admin/routes/reactive.mjs";
 import { createFirstAdmin, isSetupRequired, setupFunctions } from "../server/modules/admin/routes/setup.mjs";
 import { fetchWidgetData, widgetDataFunctions } from "../server/modules/admin/routes/widget-data.mjs";
 import { AdminCollections } from "../server/modules/admin/.generated/module.mjs";
-import { FilterOperator, FilterRule, SortConfig, ViewConfiguration } from "../shared/types/saved-views.types.mjs";
 import { savedViewsCollection } from "../server/modules/admin-preferences/collections/saved-views.mjs";
 import { AdminModule, adminModule, adminRoutes } from "../server/modules/admin/index.mjs";
 export { type AdminCollections, type AdminModule, type ExecuteActionRequest, type ExecuteActionResponse, type FilterOperator, type FilterRule, type PreviewTokenPayload, type SortConfig, type ViewConfiguration, actionFunctions, adminModule, adminRoutes, batchReactive, createFirstAdmin, createPreviewFunctions, createPreviewTokenVerifier, executeAction, executeActionFn, fetchWidgetData, fieldOptions, getActionsConfig, getActionsConfigFn, isSetupRequired, reactiveFunctions, savedViewsCollection, setupFunctions, verifyPreviewTokenDirect, widgetDataFunctions };