@questpie/admin 3.2.7 → 3.4.0

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

@@ -0,0 +1,363 @@
+//#region src/client/views/collection/outline.ts
+const DEFAULT_MAX_DEPTH = 12;
+const NO_VALUE = "No value";
+function getId(value) {
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	if (value && typeof value === "object") {
+		const id = value.id;
+		if (typeof id === "string" || typeof id === "number") return String(id);
+	}
+	return null;
+}
+function getPathValue(source, path) {
+	if (!path) return source;
+	const parts = path.split(".").filter(Boolean);
+	let current = source;
+	for (const part of parts) {
+		if (!current || typeof current !== "object") return void 0;
+		current = current[part];
+	}
+	return current;
+}
+function defaultLabelForValue(value) {
+	if (value === null || value === void 0 || value === "") return NO_VALUE;
+	if (Array.isArray(value)) return value.length ? value.map((item) => defaultLabelForValue(item)).join(", ") : NO_VALUE;
+	if (typeof value === "object") {
+		const record = value;
+		return String(record.title ?? record.name ?? record.label ?? record.id ?? NO_VALUE);
+	}
+	return String(value);
+}
+function stableGroupKey(value) {
+	if (value === null || value === void 0 || value === "") return "__empty__";
+	if (Array.isArray(value)) return value.map(stableGroupKey).join(",");
+	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;
+	const defaultExpanded = outline?.defaultExpanded ?? true;
+	if (defaultExpanded === true) return true;
+	if (defaultExpanded === false) return false;
+	return depth === 0;
+}
+function compareByOrder(a, b, order) {
+	if (Array.isArray(order)) {
+		const ai = order.indexOf(a.key);
+		const bi = order.indexOf(b.key);
+		if (ai !== -1 || bi !== -1) {
+			if (ai === -1) return 1;
+			if (bi === -1) return -1;
+			return ai - bi;
+		}
+	}
+	const result = a.label.localeCompare(b.label);
+	return order === "desc" ? -result : result;
+}
+function matchesWhere(edge, where) {
+	if (!where) return true;
+	return Object.entries(where).every(([key, expected]) => {
+		const actual = getPathValue(edge, key);
+		if (expected && typeof expected === "object" && !Array.isArray(expected)) {
+			if ("in" in expected) return (expected.in ?? []).map(String).includes(String(actual));
+		}
+		return String(actual) === String(expected);
+	});
+}
+function isRecord(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function buildFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const doc of docs) {
+		const value = getPathValue(doc, level.field);
+		const key = stableGroupKey(value);
+		const group = groups.get(key);
+		if (group) {
+			group.docs.push(doc);
+			continue;
+		}
+		groups.set(key, {
+			key,
+			label: ctx.labelForValue(value, level.labelField ?? level.field),
+			value,
+			docs: [doc]
+		});
+	}
+	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);
+		return [{
+			kind: "group",
+			key: rowKey,
+			label: group.label,
+			depth,
+			count: group.docs.length,
+			expandable: true,
+			collapsed: !expanded
+		}, ...expanded ? buildLevelRows(group.docs, depth + 1, levelIndex + 1, ctx, rowKey) : []];
+	});
+}
+function buildRelationFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
+	const fieldPath = level.field ? `${level.relation}.${level.field}` : level.relation;
+	const groups = /* @__PURE__ */ new Map();
+	for (const doc of docs) {
+		const relationValue = getPathValue(doc, level.relation);
+		const value = level.field ? getPathValue(relationValue, level.field) : relationValue;
+		const key = stableGroupKey(value);
+		const group = groups.get(key);
+		if (group) {
+			group.docs.push(doc);
+			continue;
+		}
+		groups.set(key, {
+			key,
+			label: ctx.labelForValue(value, level.labelField ?? fieldPath),
+			docs: [doc]
+		});
+	}
+	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);
+		return [{
+			kind: "group",
+			key: rowKey,
+			label: group.label,
+			depth,
+			count: group.docs.length,
+			expandable: true,
+			collapsed: !expanded
+		}, ...expanded ? buildLevelRows(group.docs, depth + 1, levelIndex + 1, ctx, rowKey) : []];
+	});
+}
+function getRepeatMaxDepth(repeat, fallback) {
+	if (!repeat) return 1;
+	if (typeof repeat === "object") return repeat.maxDepth ?? fallback;
+	return fallback;
+}
+function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
+	const docsById = /* @__PURE__ */ new Map();
+	for (const doc of docs) {
+		const id = getId(doc);
+		if (id) docsById.set(id, doc);
+	}
+	const edgeDocs = (ctx.edgesByCollection[level.collection] ?? []).filter((edge) => matchesWhere(edge, level.where));
+	if (ctx.outline?.preserveMatchingBranches !== false) for (let pass = 0; pass < ctx.maxDepth; pass++) {
+		let changed = false;
+		for (const edge of edgeDocs) {
+			const parentValue = getPathValue(edge, level.parentField);
+			const childValue = getPathValue(edge, level.childField);
+			const parentId = getId(parentValue);
+			const childId = getId(childValue);
+			if (!parentId || !childId || !docsById.has(childId)) continue;
+			if (docsById.has(parentId) || !isRecord(parentValue)) continue;
+			docsById.set(parentId, parentValue);
+			changed = true;
+		}
+		if (!changed) break;
+	}
+	const outlineDocs = Array.from(docsById.values());
+	const childrenByParent = /* @__PURE__ */ new Map();
+	const childIds = /* @__PURE__ */ new Set();
+	const edgeSeen = /* @__PURE__ */ new Set();
+	for (const edge of edgeDocs) {
+		const parentId = getId(getPathValue(edge, level.parentField));
+		const childId = getId(getPathValue(edge, level.childField));
+		if (!parentId || !childId || parentId === childId) continue;
+		if (!docsById.has(childId)) continue;
+		const dedupeKey = `${parentId}:${childId}:${JSON.stringify(level.where ?? {})}`;
+		if (edgeSeen.has(dedupeKey)) continue;
+		edgeSeen.add(dedupeKey);
+		childIds.add(childId);
+		const children = childrenByParent.get(parentId) ?? [];
+		children.push({
+			childId,
+			edge
+		});
+		childrenByParent.set(parentId, children);
+	}
+	const roots = outlineDocs.filter((doc) => {
+		const id = getId(doc);
+		return !id || !childIds.has(id) || !docsById.has(id);
+	});
+	const maxRepeatDepth = getRepeatMaxDepth(level.repeat, ctx.maxDepth);
+	const rows = [];
+	const visited = /* @__PURE__ */ new Set();
+	function pushChildRows(parentId, nextDepth, branchDepth, ancestorIds) {
+		const children = childrenByParent.get(parentId) ?? [];
+		if (children.length === 0) return;
+		if (branchDepth >= maxRepeatDepth) return;
+		if (level.groupByEdgeField) {
+			const groups = /* @__PURE__ */ new Map();
+			for (const child of children) {
+				const value = getPathValue(child.edge, level.groupByEdgeField);
+				const key = stableGroupKey(value);
+				const group = groups.get(key);
+				if (group) group.children.push(child);
+				else groups.set(key, {
+					label: ctx.labelForValue(value, level.groupByEdgeField),
+					children: [child]
+				});
+			}
+			for (const [key, group] of groups) {
+				const rowKey = `${scopeKey}/edge-group:${level.collection}:${parentId}:${key}`;
+				const expanded = shouldExpand(rowKey, nextDepth, ctx.outline, ctx.collapsedKeys);
+				rows.push({
+					kind: "group",
+					key: rowKey,
+					label: group.label,
+					depth: nextDepth,
+					count: group.children.length,
+					expandable: true,
+					collapsed: !expanded
+				});
+				if (!expanded) continue;
+				for (const child of group.children) pushEdgeRecord(child.childId, nextDepth + 1, branchDepth + 1, ancestorIds);
+			}
+			return;
+		}
+		for (const child of children) pushEdgeRecord(child.childId, nextDepth, branchDepth + 1, ancestorIds);
+	}
+	function pushEdgeRecord(id, rowDepth, branchDepth, ancestorIds) {
+		const doc = docsById.get(id);
+		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
+		});
+		visited.add(id);
+		if (hasChildren && expanded) {
+			const nextAncestors = new Set(ancestorIds);
+			nextAncestors.add(id);
+			pushChildRows(id, rowDepth + 1, branchDepth, nextAncestors);
+		}
+	}
+	for (const doc of roots) {
+		const id = getId(doc);
+		if (!id) {
+			rows.push({
+				kind: "record",
+				key: `${scopeKey}/record:${rows.length}`,
+				id: String(rows.length),
+				doc,
+				depth
+			});
+			continue;
+		}
+		pushEdgeRecord(id, depth, 0, /* @__PURE__ */ new Set());
+	}
+	for (const doc of outlineDocs) {
+		const id = getId(doc);
+		if (id && !visited.has(id)) pushEdgeRecord(id, depth, 0, /* @__PURE__ */ new Set());
+	}
+	if (levelIndex + 1 >= ctx.levels.length) return rows;
+	return rows.flatMap((row) => row.kind === "record" ? [row, ...buildLevelRows([row.doc], row.depth + 1, levelIndex + 1, ctx, row.key)] : [row]);
+}
+function createPathNode(key, label) {
+	return {
+		key,
+		label,
+		children: /* @__PURE__ */ new Map(),
+		docs: []
+	};
+}
+function countPathNode(node) {
+	let count = node.docs.length;
+	for (const child of node.children.values()) count += countPathNode(child);
+	return count;
+}
+function buildPathRows(level, docs, depth, levelIndex, ctx, scopeKey) {
+	const root = createPathNode("path:root", "Root");
+	const separator = level.separator ?? "/";
+	const maxPathDepth = getRepeatMaxDepth(level.repeat, ctx.maxDepth);
+	for (const doc of docs) {
+		const segments = String(getPathValue(doc, level.field) ?? "").trim().split(separator).filter(Boolean).slice(0, maxPathDepth);
+		const folderSegments = level.syntheticFolders && segments.length > 0 ? segments.slice(0, Math.max(segments.length - 1, 0)) : segments;
+		let node = root;
+		let currentPath = "";
+		for (const segment of folderSegments) {
+			currentPath = currentPath ? `${currentPath}${separator}${segment}` : segment;
+			let child = node.children.get(segment);
+			if (!child) {
+				child = createPathNode(`${scopeKey}/path:${level.field}:${currentPath}`, segment);
+				node.children.set(segment, child);
+			}
+			node = child;
+		}
+		node.docs.push(doc);
+	}
+	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);
+			rows.push({
+				kind: "synthetic",
+				key: child.key,
+				label: child.label,
+				depth: rowDepth,
+				count: countPathNode(child),
+				expandable: true,
+				collapsed: !expanded
+			});
+			if (expanded) rows.push(...walk(child, rowDepth + 1));
+		}
+		for (const doc of node.docs) {
+			const id = getId(doc) ?? `${node.key}:${rows.length}`;
+			rows.push({
+				kind: "record",
+				key: `${scopeKey}/record:${id}`,
+				id,
+				doc,
+				depth: rowDepth
+			});
+			if (levelIndex + 1 < ctx.levels.length) rows.push(...buildLevelRows([doc], rowDepth + 1, levelIndex + 1, ctx, `${scopeKey}/record:${id}`));
+		}
+		return rows;
+	}
+	return walk(root, depth);
+}
+function buildLevelRows(docs, depth, levelIndex, ctx, scopeKey = "root") {
+	if (docs.length === 0) return [];
+	if (depth > ctx.maxDepth || levelIndex >= ctx.levels.length) return docs.map((doc, index) => {
+		const id = getId(doc) ?? `${depth}:${index}`;
+		return {
+			kind: "record",
+			key: `${scopeKey}/record:${id}`,
+			id,
+			doc,
+			depth
+		};
+	});
+	const level = ctx.levels[levelIndex];
+	if (level.kind === "field") return buildFieldRows(level, docs, depth, levelIndex, ctx, scopeKey);
+	if (level.kind === "relation-field") return buildRelationFieldRows(level, docs, depth, levelIndex, ctx, scopeKey);
+	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 levels = outline?.levels?.filter(Boolean) ?? [];
+	const ctx = {
+		levels,
+		outline,
+		edgesByCollection,
+		collapsedKeys: new Set(collapsedKeys ?? []),
+		labelForValue,
+		maxDepth: maxDepth ?? outline?.maxDepth ?? DEFAULT_MAX_DEPTH
+	};
+	if (levels.length === 0) return buildLevelRows(docs, 0, 0, {
+		...ctx,
+		levels: []
+	});
+	return buildLevelRows(docs, 0, 0, ctx);
+}
+
+//#endregion
+export { buildOutlineRows };

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

@@ -7,10 +7,10 @@ import { flattenOptions } from "../../components/primitives/types.mjs";
 import { resolveOptionLabelForValue } from "../../components/primitives/option-label.mjs";
 import { Button } from "../../components/ui/button.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.mjs";
+import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../../components/ui/sheet.mjs";
 import { sanitizeFilename } from "../../components/fields/field-utils.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
-import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
 import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { createActionRegistryProxy } from "../../builder/types/action-registry.mjs";
 import { ActionButton } from "../../components/actions/action-button.mjs";
@@ -52,7 +52,7 @@ import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter,
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { toast } from "sonner";
-import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
 //#region src/client/views/collection/table-view.tsx
 /**
@@ -252,11 +252,14 @@ function mapListSchemaToConfig(list) {
 	if (list.columns?.length) config.columns = list.columns;
 	if (list.defaultSort) config.defaultSort = list.defaultSort;
 	if (list.orderable) config.orderable = list.orderable;
-	if (list.searchable?.length) {
+	if (Array.isArray(list.searchable) && list.searchable.length) {
 		config.searchFields = list.searchable;
 		config.searchable = true;
-	}
+	} else if (typeof list.searchable === "boolean") config.searchable = list.searchable;
+	if (list.filterable?.length) config.filterable = list.filterable;
 	if (list.grouping?.fields?.length) config.grouping = list.grouping;
+	if (list.layout) config.layout = list.layout;
+	if (list.outline?.levels?.length) config.outline = list.outline;
 	config.actions = mapListActionsToDefinitions(list.actions);
 	return config;
 }
@@ -422,15 +425,6 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		resolvedListConfig,
 		collectionMeta
 	]);
-	const expandedFields = useMemo(() => autoExpandFields({
-		fields: resolvedFields,
-		list: resolvedListConfig,
-		relations: collectionMeta?.relations
-	}), [
-		resolvedFields,
-		resolvedListConfig,
-		collectionMeta?.relations
-	]);
 	const [isSheetOpen, setIsSheetOpen] = useSidebarSearchParam("view-options", { legacyKey: "viewOptions" });
 	const [searchTerm, setSearchTerm] = useState("");
 	const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
@@ -479,6 +473,18 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		groupBy: defaultGroupBy
 	}, collection, user?.id);
 	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
+	const visibleColumnsForExpansion = useMemo(() => viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns, [viewState.config.visibleColumns, defaultColumns]);
+	const expandedFields = useMemo(() => autoExpandFields({
+		fields: resolvedFields,
+		list: resolvedListConfig,
+		visibleColumns: visibleColumnsForExpansion,
+		relations: collectionMeta?.relations
+	}), [
+		resolvedFields,
+		resolvedListConfig,
+		visibleColumnsForExpansion,
+		collectionMeta?.relations
+	]);
 	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || !!resolvedFields?.[field]), [resolvedFields]);
 	const hasOrderField = isKnownSortField(orderField);
 	const canUseOrderableSort = isOrderableEnabled && hasOrderField;
@@ -489,7 +495,10 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 			field: orderField,
 			direction: orderDirection
 		};
-		return null;
+		return {
+			field: "createdAt",
+			direction: "desc"
+		};
 	}, [
 		viewState.config.sortConfig,
 		resolvedListConfig?.defaultSort,
@@ -875,7 +884,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		data: filteredItems,
 		columns: visibleColumnDefs,
 		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
+		manualSorting: true,
 		onSortingChange: handleSortingChange,
 		enableRowSelection: true,
 		onRowSelectionChange: setRowSelection,
@@ -1537,4 +1546,4 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 }
 
 //#endregion
-export { TableView as default };
+export { UploadCollectionButton, TableView as default, mapListSchemaToConfig, stringifyGroupValue };

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

@@ -2,11 +2,11 @@ import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
 import { useScopedLocale } from "../../runtime/locale-scope.mjs";
 import { Button } from "../../components/ui/button.mjs";
-import { Badge } from "../../components/ui/badge.mjs";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../components/ui/dialog.mjs";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
 import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
 import { Label } from "../../components/ui/label.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../components/ui/dialog.mjs";
+import { Badge } from "../../components/ui/badge.mjs";
 import { Skeleton } from "../../components/ui/skeleton.mjs";
 import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { DateTimeInput } from "../../components/primitives/date-input.mjs";
@@ -23,11 +23,10 @@ import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
 import { shouldHandleAdminShortcut } from "../../utils/keyboard-shortcuts.mjs";
 import { AdminViewHeader } from "../layout/admin-view-layout.mjs";
-import { useGlobalAuditHistory } from "../../hooks/use-audit-history.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm, useFormState } from "react-hook-form";
 import { toast } from "sonner";
 import { QuestpieClientError } from "questpie/client";
 
@@ -97,6 +96,31 @@ function GlobalFormViewSkeleton() {
 		]
 	});
 }
+const GlobalFormDirtyRefBridge = React.memo(function GlobalFormDirtyRefBridge$1({ control, onDirtyChange }) {
+	const { isDirty } = useFormState({ control });
+	React.useEffect(() => {
+		onDirtyChange(isDirty);
+	}, [isDirty, onDirtyChange]);
+	return null;
+});
+const GlobalSaveButton = React.memo(function GlobalSaveButton$1({ control, isMutationPending, t }) {
+	const { isSubmitting } = useFormState({ control });
+	const isSubmittingNow = isMutationPending || isSubmitting;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "submit",
+		size: "sm",
+		disabled: isSubmittingNow,
+		className: "gap-2",
+		children: isSubmittingNow ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-4 animate-spin"
+		}), t("common.loading")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:check",
+			width: 16,
+			height: 16
+		}), t("common.save")] })
+	});
+});
 /**
 * GlobalFormView - Default form-based edit view for globals
 */
@@ -136,7 +160,6 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		id: globalData?.id,
 		limit: 50
 	}, { enabled: isHistoryOpen && !!globalSchema?.options?.versioning });
-	const { data: auditData, isLoading: auditLoading } = useGlobalAuditHistory(globalName, { limit: 50 }, { enabled: isHistoryOpen });
 	const workflowConfig = globalSchema?.options?.workflow;
 	const workflowEnabled = !!workflowConfig?.enabled;
 	/** Lightweight versions query (limit: 1) to read the current stage. */
@@ -167,6 +190,10 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		defaultValues: globalData ?? {},
 		resolver
 	});
+	const formIsDirtyRef = React.useRef(false);
+	const handleFormDirtyChange = React.useCallback((isDirty) => {
+		formIsDirtyRef.current = isDirty;
+	}, []);
 	/** Execute the confirmed workflow transition (immediate or scheduled). */
 	const confirmTransition = React.useCallback(() => {
 		if (!transitionTarget) return;
@@ -215,7 +242,7 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 	});
 	const handleContentLocaleChange = React.useCallback((nextLocale) => {
 		if (nextLocale === prevLocaleRef.current) return;
-		if (form.formState.isDirty && !localeChangeDialog.open) {
+		if (formIsDirtyRef.current && !localeChangeDialog.open) {
 			skipResetRef.current = true;
 			localeSnapshotRef.current = form.getValues();
 			setLocaleChangeDialog({
@@ -229,7 +256,6 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		setContentLocale(nextLocale);
 	}, [
 		form,
-		form.formState.isDirty,
 		localeChangeDialog.open,
 		setContentLocale
 	]);
@@ -316,7 +342,6 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
 	}, [form, onSubmit]);
-	const isSubmitting = updateMutation.isPending || form.formState.isSubmitting;
 	const confirmRevertVersion = React.useCallback(async () => {
 		if (!pendingRevertVersion) return;
 		const payload = {};
@@ -361,10 +386,14 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		})
 	});
 	if (dataLoading) return /* @__PURE__ */ jsx(GlobalFormViewSkeleton, {});
-	const globalLabel = resolveText(resolvedConfig?.label ?? schemaFields?._globalLabel, globalName);
+	const globalLabel = resolveText(resolvedConfig?.label ?? schemaFields["_globalLabel"], globalName);
 	return /* @__PURE__ */ jsxs(FormProvider, {
 		...form,
 		children: [
+			/* @__PURE__ */ jsx(GlobalFormDirtyRefBridge, {
+				control: form.control,
+				onDirtyChange: handleFormDirtyChange
+			}),
 			/* @__PURE__ */ jsxs("form", {
 				onSubmit: form.handleSubmit(onSubmit),
 				className: "qa-global-form w-full space-y-4",
@@ -414,7 +443,7 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 								}), stage.label || stage.name]
 							}, stage.name))
 						})] }),
-						/* @__PURE__ */ jsxs(Button, {
+						globalSchema?.options?.versioning && /* @__PURE__ */ jsxs(Button, {
 							type: "button",
 							variant: "outline",
 							size: "icon-sm",
@@ -428,33 +457,24 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 								children: t("history.title")
 							})]
 						}),
-						/* @__PURE__ */ jsx(Button, {
-							type: "submit",
-							size: "sm",
-							disabled: isSubmitting,
-							className: "gap-2",
-							children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
-								icon: "ph:spinner-gap",
-								className: "size-4 animate-spin"
-							}), t("common.loading")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
-								icon: "ph:check",
-								width: 16,
-								height: 16
-							}), t("common.save")] })
+						/* @__PURE__ */ jsx(GlobalSaveButton, {
+							control: form.control,
+							isMutationPending: updateMutation.isPending,
+							t
 						})
 					] })
 				}), /* @__PURE__ */ jsx(AutoFormFields, {
 					collection: globalName,
 					mode: "global",
 					config: resolvedConfig,
-					registry
+					registry,
+					resolvedFields: schemaFields,
+					schema: globalSchema
 				})]
 			}),
-			/* @__PURE__ */ jsx(HistorySidebar, {
+			isHistoryOpen && /* @__PURE__ */ jsx(HistorySidebar, {
 				open: isHistoryOpen,
 				onOpenChange: setIsHistoryOpen,
-				auditEntries: auditData ?? [],
-				isLoadingAudit: auditLoading,
 				versions: versionsData ?? [],
 				fields: globalSchema?.fields,
 				isLoadingVersions: versionsLoading,

package/dist/client/views/layout/admin-layout.d.mts

@@ -1,3 +1,5 @@
+import { ServerAdminShellRailConfig } from "../../../server/augmentation/shell.mjs";
+import "../../../server/augmentation.mjs";
 import { AdminToasterProps } from "../../components/ui/sonner.mjs";
 import { AdminSidebarProps } from "./admin-sidebar.mjs";
 import { AdminTheme } from "./admin-theme.mjs";
@@ -73,6 +75,18 @@ interface AdminLayoutSharedProps {
    */
   layoutMode?: LayoutMode;
 }
+interface AdminShellRailProps {
+  /** Current route path, usually the browser pathname. */
+  activeRoute?: string;
+  /** Admin base path, usually "/admin". */
+  basePath: string;
+  /** Resolved rail placement. */
+  placement: "left" | "right";
+  /** Raw rail config from server admin config. */
+  config: ServerAdminShellRailConfig;
+  /** Navigate function from the admin runtime. */
+  navigate: (path: string) => void;
+}
 interface AdminLayoutProps extends AdminLayoutSharedProps {
   /**
    * Brand name for sidebar.
@@ -127,4 +141,4 @@ declare function AdminLayout({
   layoutMode
 }: AdminLayoutProps): React.ReactElement;
 //#endregion
-export { AdminLayout, AdminLayoutSharedProps };
+export { AdminLayout, AdminLayoutSharedProps, AdminShellRailProps };