@questpie/admin 3.4.1 → 3.5.1

package/dist/client/scope/picker.d.mts

@@ -1,5 +1,5 @@
 import { ScopePickerProps } from "./types.mjs";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/client/scope/picker.d.ts
 
@@ -48,6 +48,6 @@ declare function ScopePicker({
   clearText,
   className,
   compact
-}: ScopePickerProps): react_jsx_runtime26.JSX.Element;
+}: ScopePickerProps): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { ScopePicker };

package/dist/client/scope/provider.d.mts

@@ -1,5 +1,5 @@
 import { ScopeContextValue, ScopeProviderProps } from "./types.mjs";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/client/scope/provider.d.ts
 
@@ -29,7 +29,7 @@ declare function ScopeProvider({
   headerName,
   storageKey,
   defaultScope
-}: ScopeProviderProps): react_jsx_runtime27.JSX.Element;
+}: ScopeProviderProps): react_jsx_runtime26.JSX.Element;
 /**
  * Hook to access the current scope context.
  *

package/dist/client/styles/base.css

@@ -718,6 +718,51 @@
 	}
 }
 
+/* =============================================================================
+   Loading States
+   ============================================================================= */
+
+.qa-skeleton {
+	animation:
+		qa-skeleton-fade-in var(--motion-duration-base) var(--motion-ease-enter)
+			120ms both,
+		qa-skeleton-breathe 1.6s ease-in-out 120ms infinite;
+	background-color: color-mix(in srgb, var(--muted) 86%, var(--foreground) 14%);
+}
+
+.qa-table-view-skeleton,
+.qa-router-skeleton,
+.qa-form-view-skeleton {
+	min-height: min(36rem, calc(100dvh - 14rem));
+}
+
+@keyframes qa-skeleton-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes qa-skeleton-breathe {
+	0%,
+	100% {
+		background-color: color-mix(
+			in srgb,
+			var(--muted) 86%,
+			var(--foreground) 14%
+		);
+	}
+	50% {
+		background-color: color-mix(
+			in srgb,
+			var(--muted) 68%,
+			var(--foreground) 32%
+		);
+	}
+}
+
 /* =============================================================================
    Base Styles
    ============================================================================= */
@@ -936,9 +981,14 @@
 	.animate-field-glow,
 	.animate-realtime-pulse,
 	.animate-realtime-delete,
-	.animate-spin {
+	.animate-spin,
+	.qa-skeleton {
 		animation: none !important;
 	}
+
+	.qa-skeleton {
+		opacity: 1;
+	}
 }
 
 /* =============================================================================

package/dist/client/views/auth/accept-invite-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/views/auth/accept-invite-form.d.ts
 /**
@@ -67,6 +67,6 @@ declare function AcceptInviteForm({
   className,
   error,
   minPasswordLength
-}: AcceptInviteFormProps): react_jsx_runtime2.JSX.Element;
+}: AcceptInviteFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { AcceptInviteForm };

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/client/views/auth/auth-layout.d.ts
 
@@ -26,7 +26,7 @@ declare function AuthDefaultLogo({
   brandName
 }: {
   brandName: string;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 /**
  * Minimal split layout for authentication pages (login, register, forgot password, etc.)
  *
@@ -50,6 +50,6 @@ declare function AuthDefaultLogo({
  * </AuthLayout>
  * ```
  */
-declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { AuthDefaultLogo, AuthLayout, AuthLayoutProps };

package/dist/client/views/auth/reset-password-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/client/views/auth/reset-password-form.d.ts
 /**
@@ -60,6 +60,6 @@ declare function ResetPasswordForm({
   minPasswordLength,
   className,
   error
-}: ResetPasswordFormProps): react_jsx_runtime6.JSX.Element;
+}: ResetPasswordFormProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ResetPasswordForm };

package/dist/client/views/auth/setup-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/client/views/auth/setup-form.d.ts
 /**
@@ -55,6 +55,6 @@ declare function SetupForm({
   className,
   error,
   minPasswordLength
-}: SetupFormProps): react_jsx_runtime7.JSX.Element;
+}: SetupFormProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SetupForm, SetupFormValues };

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

@@ -481,7 +481,7 @@ function AutoFormFields({ app: _cms, collection, mode = "collection", config, re
 				children: /* @__PURE__ */ jsx("div", {
 					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",
+						className: "min-h-0 scrollbar-thin space-y-4 overflow-y-auto p-3 @2xl:flex-1",
 						children: /* @__PURE__ */ jsx(SidebarRenderer, {
 							sidebar: formConfig.sidebar,
 							fields,

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

@@ -183,7 +183,7 @@ function SelectCell({ value, fieldDef }) {
 	const options = getSelectOptions(fieldDef);
 	return /* @__PURE__ */ jsx("span", {
 		className: "inline-flex max-w-[300px] flex-wrap gap-1",
-		children: values.map((item, index) => {
+		children: values.map((item) => {
 			const option = findSelectOption(options, item);
 			const icon = resolveIconElement(option?.icon);
 			return /* @__PURE__ */ jsxs(Badge, {
@@ -196,7 +196,7 @@ function SelectCell({ value, fieldDef }) {
 					t,
 					locale
 				})]
-			}, `${String(item)}-${index}`);
+			}, String(item));
 		})
 	});
 }

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

@@ -79,11 +79,11 @@ function UploadManyCell({ value }) {
 		return /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex -space-x-2",
+				className: "flex",
 				children: imageAssets.map((asset, index) => /* @__PURE__ */ jsx("img", {
 					src: asset.url,
 					alt: asset.filename || "Asset",
-					className: "image-outline bg-background size-6 rounded object-cover"
+					className: `image-outline bg-background size-6 rounded object-cover${index > 0 ? " -ms-2" : ""}`
 				}, asset.id || index))
 			}), remaining > 0 && /* @__PURE__ */ jsxs("span", {
 				className: "text-muted-foreground ml-1 text-xs tabular-nums",

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

@@ -9,6 +9,7 @@ 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 { useAdminConfig } from "../../hooks/use-admin-config.mjs";
 import { RenderProfiler } from "../../lib/render-profiler.mjs";
 import { scrollFieldIntoView } from "../../contexts/focus-context.mjs";
 import { Checkbox } from "../../components/ui/checkbox.mjs";
@@ -33,6 +34,7 @@ import { useServerActions } from "../../hooks/use-server-actions.mjs";
 import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { applyPatchBatchImmutable, cloneSnapshot } from "../../preview/patch.mjs";
 import { diffSnapshot, diffSnapshotAtPath } from "../../preview/diff.mjs";
+import { resolveKnownPreviewPath } from "../../preview/paths.mjs";
 import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
 import { shouldHandleAdminShortcut } from "../../utils/keyboard-shortcuts.mjs";
 import { AdminViewHeader } from "../layout/admin-view-layout.mjs";
@@ -168,11 +170,12 @@ const FormStateRefBridge = React.memo(function FormStateRefBridge$1({ control, o
 	}, [isSubmitting, onSubmittingChange]);
 	return null;
 });
-const PreviewPatchBridge = React.memo(function PreviewPatchBridge$1({ form, previewRef, enabled }) {
+const PreviewPatchBridge = React.memo(function PreviewPatchBridge$1({ form, previewRef, enabled, schema, blocks }) {
 	const previousSnapshotRef = React.useRef(null);
 	const snapshotVersionRef = React.useRef(void 0);
+	const subscribedFieldNames = React.useMemo(() => Object.keys(schema?.fields ?? {}).filter(isSafePreviewEditPath), [schema]);
 	React.useEffect(() => {
-		if (!enabled) {
+		if (!enabled || subscribedFieldNames.length === 0) {
 			previousSnapshotRef.current = null;
 			snapshotVersionRef.current = void 0;
 			return;
@@ -194,37 +197,50 @@ const PreviewPatchBridge = React.memo(function PreviewPatchBridge$1({ form, prev
 			if (pendingOps.size === 0 || animationFrame !== null) return;
 			animationFrame = window.requestAnimationFrame(flushPendingOps);
 		};
-		const subscription = form.watch((values, info) => {
-			const previousSnapshot = previousSnapshotRef.current;
-			const nextValues = values;
-			if (!previousSnapshot) {
-				const nextSnapshot = cloneSnapshot(nextValues);
-				previousSnapshotRef.current = nextSnapshot;
-				snapshotVersionRef.current = previewRef.current?.sendInitSnapshot(nextSnapshot);
-				return;
-			}
-			const changedPath = info?.name;
-			let ops = changedPath && isSafePreviewEditPath(changedPath) ? diffSnapshotAtPath(previousSnapshot, nextValues, changedPath) : diffSnapshot(previousSnapshot, nextValues);
-			if (ops.some((op) => !op.path)) {
-				const nextSnapshot = cloneSnapshot(nextValues);
-				previousSnapshotRef.current = nextSnapshot;
-				snapshotVersionRef.current = previewRef.current?.sendInitSnapshot(nextSnapshot);
-				pendingOps.clear();
-				return;
+		const unsubscribe = form.subscribe({
+			name: subscribedFieldNames,
+			exact: false,
+			formState: { values: true },
+			callback: ({ values, name }) => {
+				const previousSnapshot = previousSnapshotRef.current;
+				const nextValues = values;
+				if (!previousSnapshot) {
+					const nextSnapshot = cloneSnapshot(nextValues);
+					previousSnapshotRef.current = nextSnapshot;
+					snapshotVersionRef.current = previewRef.current?.sendInitSnapshot(nextSnapshot);
+					return;
+				}
+				const changedPath = resolveKnownPreviewPath(name, {
+					schema,
+					blocks,
+					values: nextValues,
+					previousValues: previousSnapshot
+				});
+				let ops = changedPath ? diffSnapshotAtPath(previousSnapshot, nextValues, changedPath) : diffSnapshot(previousSnapshot, nextValues);
+				if (ops.some((op) => !op.path)) {
+					const nextSnapshot = cloneSnapshot(nextValues);
+					previousSnapshotRef.current = nextSnapshot;
+					snapshotVersionRef.current = previewRef.current?.sendInitSnapshot(nextSnapshot);
+					pendingOps.clear();
+					return;
+				}
+				ops = ops.filter((op) => op.path);
+				if (ops.length === 0) return;
+				previousSnapshotRef.current = applyPatchBatchImmutable(previousSnapshot, ops);
+				queuePatchOps(ops);
 			}
-			ops = ops.filter((op) => op.path);
-			if (ops.length === 0) return;
-			previousSnapshotRef.current = applyPatchBatchImmutable(previousSnapshot, ops);
-			queuePatchOps(ops);
 		});
 		return () => {
 			if (animationFrame !== null) window.cancelAnimationFrame(animationFrame);
-			subscription.unsubscribe();
+			unsubscribe();
 		};
 	}, [
+		blocks,
 		enabled,
 		form,
-		previewRef
+		previewRef,
+		schema,
+		subscribedFieldNames
 	]);
 	return null;
 });
@@ -379,6 +395,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const resolveText = useResolveText();
 	const isEditMode = !!id;
 	const { fields: resolvedFields, schema, isLoading: isFieldsLoading } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const { data: adminConfig } = useAdminConfig();
 	const resolvedFormConfig = React.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
 		viewConfig,
 		config?.form,
@@ -1214,7 +1231,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					/* @__PURE__ */ jsx(PreviewPatchBridge, {
 						form,
 						previewRef,
-						enabled: isLivePreviewOpen && !!previewUrl && !isBlocked
+						enabled: isLivePreviewOpen && !!previewUrl && !isBlocked && !!schema,
+						schema,
+						blocks: adminConfig?.blocks
 					}),
 					/* @__PURE__ */ jsx(ReactiveFieldsManager, {
 						collection,

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

@@ -203,6 +203,13 @@ function getStickyLeftOffset(columns, index) {
 		return left + getColumnSize(column, columnIndex === 0 ? 40 : 360);
 	}, 0);
 }
+function reconcileOrderIds(orderIds, itemIds) {
+	const knownIds = new Set(itemIds);
+	const next = orderIds.filter((id) => knownIds.has(id));
+	const nextIds = new Set(next);
+	for (const id of itemIds) if (!nextIds.has(id)) next.push(id);
+	return next;
+}
 function getActionReferenceType(reference) {
 	if (typeof reference === "string") return reference;
 	if (typeof reference === "function") {
@@ -473,7 +480,7 @@ 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 visibleColumnsForExpansion = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns;
 	const expandedFields = useMemo(() => autoExpandFields({
 		fields: resolvedFields,
 		list: resolvedListConfig,
@@ -802,31 +809,19 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		searchData?.docs,
 		listData?.docs
 	]);
+	const itemIds = useMemo(() => items.map((item) => String(item.id)), [items]);
 	const { isHighlighted } = useRealtimeHighlight(items, { enabled: effectiveRealtime && !isSearching });
 	const { getLock, isLocked: isDocLocked } = useLocks({
 		resourceType: "collection",
 		resource: collection,
 		realtime: effectiveRealtime
 	});
-	React.useEffect(() => {
-		if (!isReorderMode) {
-			setOptimisticOrderIds(null);
-			return;
-		}
-		setOptimisticOrderIds((current) => {
-			const itemIds = items.map((item) => String(item.id));
-			if (!current) return itemIds;
-			const knownIds = new Set(itemIds);
-			const next = current.filter((id) => knownIds.has(id));
-			for (const id of itemIds) if (!next.includes(id)) next.push(id);
-			return next;
-		});
-	}, [isReorderMode, items]);
 	const filteredItems = useMemo(() => {
 		if (!isReorderMode || !optimisticOrderIds) return items;
+		const orderedIds = reconcileOrderIds(optimisticOrderIds, itemIds);
 		const itemsById = new Map(items.map((item) => [String(item.id), item]));
 		const seen = /* @__PURE__ */ new Set();
-		const ordered = optimisticOrderIds.map((id) => {
+		const ordered = orderedIds.map((id) => {
 			const item = itemsById.get(id);
 			if (item) seen.add(id);
 			return item;
@@ -838,6 +833,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		return ordered;
 	}, [
 		isReorderMode,
+		itemIds,
 		items,
 		optimisticOrderIds
 	]);
@@ -860,13 +856,22 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				desc: nextSort.direction === "desc"
 			}]);
 			viewState.setSort(nextSort);
+			setOptimisticOrderIds(itemIds);
 			setIsReorderMode(true);
 			return;
 		}
-		setIsReorderMode((active) => !active);
+		if (isReorderMode) {
+			setOptimisticOrderIds(null);
+			setIsReorderMode(false);
+			return;
+		}
+		setOptimisticOrderIds(itemIds);
+		setIsReorderMode(true);
 	}, [
 		canReorder,
 		isOrderSortActive,
+		isReorderMode,
+		itemIds,
 		orderDirection,
 		viewState
 	]);
@@ -877,9 +882,17 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 			filters: []
 		});
 	};
+	const exitReorderMode = React.useCallback(() => {
+		setOptimisticOrderIds(null);
+		setIsReorderMode(false);
+	}, []);
 	React.useEffect(() => {
-		if (isReorderMode && !canReorder) setIsReorderMode(false);
-	}, [isReorderMode, canReorder]);
+		if (isReorderMode && !canReorder) exitReorderMode();
+	}, [
+		canReorder,
+		exitReorderMode,
+		isReorderMode
+	]);
 	const table = useReactTable({
 		data: filteredItems,
 		columns: visibleColumnDefs,
@@ -1226,7 +1239,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					}), /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "xs",
-						onClick: () => setIsReorderMode(false),
+						onClick: exitReorderMode,
 						children: t("common.done")
 					})]
 				}),

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

@@ -13,8 +13,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const TABLE_SKELETON_COLUMNS = [
 	{
 		width: 40,
-		header: "mx-auto h-4 w-4",
-		cells: ["mx-auto h-4 w-4"]
+		header: "mx-auto size-4",
+		cells: ["mx-auto size-4"]
 	},
 	{
 		width: 360,
@@ -66,7 +66,7 @@ function getColumnSizeStyle(width) {
 function getSkeletonWidth(widths, rowIndex) {
 	return widths[rowIndex % widths.length] ?? widths[0] ?? "h-4 w-20";
 }
-function TableSkeletonRows({ rows = 8 }) {
+function TableSkeletonRows({ rows = 12 }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
 		className: "hover:bg-transparent",
 		children: TABLE_SKELETON_COLUMNS.map((column, columnIndex) => {
@@ -88,7 +88,7 @@ function TableSkeletonShell() {
 		className: "table-fixed",
 		style: { width: TABLE_SKELETON_COLUMNS.reduce((total, column) => total + column.width, 0) },
 		children: [
-			/* @__PURE__ */ jsx("colgroup", { children: TABLE_SKELETON_COLUMNS.map((column, index) => /* @__PURE__ */ jsx("col", { style: { width: column.width } }, index)) }),
+			/* @__PURE__ */ jsx("colgroup", { children: TABLE_SKELETON_COLUMNS.map((column) => /* @__PURE__ */ jsx("col", { style: { width: column.width } }, `${column.width}-${column.header}`)) }),
 			/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, {
 				className: "hover:bg-transparent",
 				children: TABLE_SKELETON_COLUMNS.map((column, index) => {
@@ -101,7 +101,7 @@ function TableSkeletonShell() {
 							variant: "text",
 							className: column.header
 						})
-					}, index);
+					}, `${column.width}-${column.header}`);
 				})
 			}) }),
 			/* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableSkeletonRows, {}) })
@@ -187,44 +187,43 @@ function TableViewSkeleton() {
 */
 function FormViewSkeleton() {
 	return /* @__PURE__ */ jsx("div", {
-		className: "qa-form-view-skeleton container max-w-4xl py-6",
+		className: "qa-form-view-skeleton qa-form-view w-full",
+		"aria-busy": "true",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "space-y-6",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Loading form view"
+				}),
+				/* @__PURE__ */ jsx(AdminViewHeader, {
+					title: /* @__PURE__ */ jsx(Skeleton, {
+						variant: "text",
+						className: "h-7 w-48 max-w-full"
+					}),
+					meta: /* @__PURE__ */ jsx(Skeleton, {
+						variant: "text",
+						className: "h-3 w-36 max-w-full"
+					}),
+					actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" })] })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-6",
 					children: [
-						/* @__PURE__ */ jsx(Skeleton, {
-							variant: "text",
-							className: "h-8 w-8"
-						}),
-						" ",
-						/* @__PURE__ */ jsx(Skeleton, {
-							variant: "text",
-							className: "h-8 w-48"
+						/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
+						/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
+						/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
+						/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx(Skeleton, {
+								variant: "text",
+								className: "h-4 w-32"
+							}), /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })]
 						})
 					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })]
-				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "space-y-6",
-				children: [
-					/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
-					/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
-					/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
-					/* @__PURE__ */ jsx(FormFieldSkeleton, {}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ jsx(Skeleton, {
-							variant: "text",
-							className: "h-4 w-32"
-						}), /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })]
-					})
-				]
-			})]
+				})
+			]
 		})
 	});
 }

package/dist/client/views/common/global-search.mjs

@@ -94,8 +94,8 @@ const SearchGroup = React.memo(function SearchGroup$1({ title, items, selectedIn
 					"data-selected": isSelected,
 					className: cn("item-surface flex w-full items-center gap-3 border-transparent px-3 py-2.5 text-sm transition-colors outline-none", isSelected ? "border-border bg-accent text-accent-foreground" : "hover:border-border hover:bg-accent hover:text-accent-foreground"),
 					children: [item.icon && /* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground flex h-4 w-4 shrink-0 items-center justify-center",
-						children: resolveIconElement(item.icon, { className: "h-4 w-4" })
+						className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center",
+						children: resolveIconElement(item.icon, { className: "size-4" })
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-col items-start",
 						children: [item.highlights?.title ? /* @__PURE__ */ jsx("span", {
@@ -372,7 +372,7 @@ function GlobalSearch({ isOpen, onClose, navigate, basePath: basePathProp }) {
 							className: "flex items-center justify-center gap-2",
 							children: [/* @__PURE__ */ jsx(Icon, {
 								icon: "ph:spinner",
-								className: "h-4 w-4 animate-spin"
+								className: "size-4 animate-spin"
 							}), /* @__PURE__ */ jsx("span", { children: t("globalSearch.searching") })]
 						}) : t("globalSearch.noResults")
 					})

package/dist/client/views/dashboard/widget-card.mjs

@@ -52,7 +52,7 @@ function WidgetCardError({ error, variant = "default", onRetry }) {
 				onClick: onRetry,
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "ph:arrow-clockwise",
-					className: "h-3.5 w-3.5"
+					className: "size-3.5"
 				})
 			}) })]
 		}), /* @__PURE__ */ jsx(CardContent, {
@@ -106,7 +106,7 @@ function WidgetCard({ title, description, icon, variant = "default", isLoading,
 			className: "qa-widget-card__header shrink-0",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-center gap-2",
-				children: [resolveIconElement(icon, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+				children: [resolveIconElement(icon, { className: "size-4 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
 					className: "min-w-0 flex-1",
 					children: [title && /* @__PURE__ */ jsx(CardTitle, {
 						className: "truncate text-sm font-medium",
@@ -124,19 +124,19 @@ function WidgetCard({ title, description, icon, variant = "default", isLoading,
 						size: "icon-xs",
 						onClick: actions[0].onClick,
 						title: actions[0].label,
-						children: resolveIconElement(actions[0].icon, { className: "h-3.5 w-3.5" })
+						children: resolveIconElement(actions[0].icon, { className: "size-3.5" })
 					}, actions[0].id), actions.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "icon-xs",
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "ph:dots-three-vertical",
-							className: "h-3.5 w-3.5"
+							className: "size-3.5"
 						})
 					}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 						align: "end",
 						children: actions.slice(1).map((action) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
 							onClick: action.onClick,
-							children: [resolveIconElement(action.icon, { className: "h-3.5 w-3.5 mr-2" }), action.label]
+							children: [resolveIconElement(action.icon, { className: "size-3.5 mr-2" }), action.label]
 						}, action.id))
 					})] })] }),
 					onRefresh && /* @__PURE__ */ jsx(Button, {
@@ -147,7 +147,7 @@ function WidgetCard({ title, description, icon, variant = "default", isLoading,
 						disabled: isRefreshing,
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "ph:arrow-clockwise",
-							className: cn("h-3.5 w-3.5", isRefreshing && "animate-spin")
+							className: cn("size-3.5", isRefreshing && "animate-spin")
 						})
 					}),
 					onExpand && /* @__PURE__ */ jsx(Button, {
@@ -157,7 +157,7 @@ function WidgetCard({ title, description, icon, variant = "default", isLoading,
 						title: t("ui.expand"),
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "ph:arrows-out-simple",
-							className: "h-3.5 w-3.5"
+							className: "size-3.5"
 						})
 					})
 				]