@questpie/admin 3.0.3 → 3.0.4

package/dist/client/components/auth/auth-loading.mjs

@@ -1,5 +1,5 @@
 import { cn } from "../../lib/utils.mjs";
-import { Spinner } from "../ui/spinner.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,42 +13,65 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 function AuthLoading(t0) {
-	const $ = c(9);
+	const $ = c(10);
 	const { className, message: t1, showMessage: t2 } = t0;
 	const message = t1 === void 0 ? "Loading..." : t1;
 	const showMessage = t2 === void 0 ? true : t2;
 	let t3;
 	if ($[0] !== className) {
-		t3 = cn("flex min-h-screen flex-col items-center justify-center gap-4", className);
+		t3 = cn("flex min-h-screen flex-col items-center justify-center gap-4 px-6", className);
 		$[0] = className;
 		$[1] = t3;
 	} else t3 = $[1];
 	let t4;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(Spinner, { className: "text-primary size-8" });
+		t4 = /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto size-12" });
 		$[2] = t4;
 	} else t4 = $[2];
 	let t5;
-	if ($[3] !== message || $[4] !== showMessage) {
-		t5 = showMessage && /* @__PURE__ */ jsx("p", {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "w-full max-w-sm space-y-4",
+			children: [
+				t4,
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ jsx(Skeleton, {
+						variant: "text",
+						className: "mx-auto h-4 w-40"
+					}), /* @__PURE__ */ jsx(Skeleton, {
+						variant: "text",
+						className: "mx-auto h-3 w-56"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+			]
+		});
+		$[3] = t5;
+	} else t5 = $[3];
+	let t6;
+	if ($[4] !== message || $[5] !== showMessage) {
+		t6 = showMessage && /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground text-sm",
+			role: "status",
 			children: message
 		});
-		$[3] = message;
-		$[4] = showMessage;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== t3 || $[7] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
+		$[4] = message;
+		$[5] = showMessage;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== t3 || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
 			className: t3,
-			children: [t4, t5]
+			"aria-busy": "true",
+			children: [t5, t6]
 		});
-		$[6] = t3;
-		$[7] = t5;
+		$[7] = t3;
 		$[8] = t6;
-	} else t6 = $[8];
-	return t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	return t7;
 }
 
 //#endregion

package/dist/client/components/blocks/block-fields-renderer.mjs

@@ -3,7 +3,9 @@
 import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
 import { buildFieldDefinitionsFromMetadata } from "../../utils/build-field-definitions-from-schema.mjs";
+import { useLazyComponent } from "../../utils/use-lazy-component.mjs";
 import { FieldLayoutRenderer } from "../layout/field-layout-renderer.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
 import { c } from "react/compiler-runtime";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -65,7 +67,7 @@ function BlockFieldsRenderer(t0) {
 	if (blockSchema.form?.fields?.length) {
 		let t2$1;
 		if ($[8] !== blockFields || $[9] !== blockId) {
-			t2$1 = (fieldName, opts) => {
+			t2$1 = (fieldName) => {
 				const fieldDef = blockFields[fieldName];
 				if (!fieldDef) return null;
 				return /* @__PURE__ */ jsx(BlockField, {
@@ -133,8 +135,33 @@ function BlockFieldsRenderer(t0) {
 	} else t3 = $[23];
 	return t3;
 }
+function BlockFieldSkeleton(t0) {
+	const $ = c(3);
+	const { type } = t0;
+	const isLarge = type === "blocks" || type === "json" || type === "richText";
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 w-24"
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	const t2 = isLarge ? "h-40 w-full" : "h-10 w-full";
+	let t3;
+	if ($[1] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			"aria-busy": "true",
+			children: [t1, /* @__PURE__ */ jsx(Skeleton, { className: t2 })]
+		});
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	return t3;
+}
 function BlockField(t0) {
-	const $ = c(29);
+	const $ = c(31);
 	const { name, blockId, definition } = t0;
 	const resolveText = useResolveText();
 	let t1;
@@ -171,17 +198,26 @@ function BlockField(t0) {
 	} else t4 = $[11];
 	const placeholder = t4;
 	const scopedName = `content._values.${blockId}.${name}`;
-	const FieldComponent = definition.component;
-	if (!FieldComponent) {
+	const { Component: FieldComponent, loading: componentLoading } = useLazyComponent(definition.component);
+	if (componentLoading) {
 		let t5$1;
 		if ($[12] !== fieldType) {
+			t5$1 = /* @__PURE__ */ jsx(BlockFieldSkeleton, { type: fieldType });
+			$[12] = fieldType;
+			$[13] = t5$1;
+		} else t5$1 = $[13];
+		return t5$1;
+	}
+	if (!FieldComponent) {
+		let t5$1;
+		if ($[14] !== fieldType) {
 			t5$1 = /* @__PURE__ */ jsxs("div", {
 				className: "text-destructive text-sm",
 				children: ["No component registered for field type: ", fieldType]
 			});
-			$[12] = fieldType;
-			$[13] = t5$1;
-		} else t5$1 = $[13];
+			$[14] = fieldType;
+			$[15] = t5$1;
+		} else t5$1 = $[15];
 		return t5$1;
 	}
 	const t5 = options.required ?? false;
@@ -189,13 +225,13 @@ function BlockField(t0) {
 	const t7 = options.readOnly ?? false;
 	const t8 = options.localized ?? false;
 	let t9;
-	if ($[14] !== options) {
+	if ($[16] !== options) {
 		t9 = stripUiOptions(options);
-		$[14] = options;
-		$[15] = t9;
-	} else t9 = $[15];
+		$[16] = options;
+		$[17] = t9;
+	} else t9 = $[17];
 	let t10;
-	if ($[16] !== description || $[17] !== label || $[18] !== placeholder || $[19] !== scopedName || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+	if ($[18] !== description || $[19] !== label || $[20] !== placeholder || $[21] !== scopedName || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
 		t10 = {
 			name: scopedName,
 			label,
@@ -207,25 +243,25 @@ function BlockField(t0) {
 			localized: t8,
 			...t9
 		};
-		$[16] = description;
-		$[17] = label;
-		$[18] = placeholder;
-		$[19] = scopedName;
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-		$[24] = t9;
-		$[25] = t10;
-	} else t10 = $[25];
+		$[18] = description;
+		$[19] = label;
+		$[20] = placeholder;
+		$[21] = scopedName;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
 	const componentProps = t10;
 	let t11;
-	if ($[26] !== FieldComponent || $[27] !== componentProps) {
+	if ($[28] !== FieldComponent || $[29] !== componentProps) {
 		t11 = /* @__PURE__ */ jsx(FieldComponent, { ...componentProps });
-		$[26] = FieldComponent;
-		$[27] = componentProps;
-		$[28] = t11;
-	} else t11 = $[28];
+		$[28] = FieldComponent;
+		$[29] = componentProps;
+		$[30] = t11;
+	} else t11 = $[30];
 	return t11;
 }
 /**

package/dist/client/components/blocks/block-insert-button.mjs

@@ -52,7 +52,7 @@ function BlockInsertButton(t0) {
 		} else t5$1 = $[6];
 		let t6$1;
 		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-			t6$1 = /* @__PURE__ */ jsx("div", { className: "bg-primary/40 sm:group-hover:bg-primary absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 transition-colors sm:bg-transparent" });
+			t6$1 = /* @__PURE__ */ jsx("div", { className: "bg-border-strong sm:group-hover:bg-foreground absolute inset-x-0 top-1/2 h-px -translate-y-1/2 transition-colors sm:bg-transparent" });
 			$[7] = t6$1;
 		} else t6$1 = $[7];
 		let t7$1;
@@ -75,7 +75,7 @@ function BlockInsertButton(t0) {
 			t9 = /* @__PURE__ */ jsx("div", {
 				className: "pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-center opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100",
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "bg-primary text-primary-foreground pointer-events-auto flex cursor-pointer items-center gap-1 rounded-full px-2 py-0.5 text-xs shadow-sm",
+					className: "bg-foreground text-background pointer-events-auto flex cursor-pointer items-center gap-1 rounded-full px-2 py-0.5 text-xs shadow-sm",
 					children: [t7$1, /* @__PURE__ */ jsx("span", { children: t8 })]
 				})
 			});
@@ -103,14 +103,14 @@ function BlockInsertButton(t0) {
 	if (variant === "rail") {
 		let t4$1;
 		if ($[18] !== className) {
-			t4$1 = cn("group text-muted-foreground hover:text-foreground relative flex items-center gap-2 text-xs font-medium transition-colors", className);
+			t4$1 = cn("group text-muted-foreground hover:text-foreground relative flex min-h-10 items-center gap-2 text-xs font-medium transition-colors active:scale-[0.96]", className);
 			$[18] = className;
 			$[19] = t4$1;
 		} else t4$1 = $[19];
 		let t5$1;
 		if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
 			t5$1 = /* @__PURE__ */ jsx("div", {
-				className: "border-border bg-background text-muted-foreground group-hover:border-foreground group-hover:text-foreground relative z-10 flex h-5 w-5 items-center justify-center rounded-full border transition-all",
+				className: "border-border bg-background text-muted-foreground group-hover:border-foreground group-hover:text-foreground relative z-10 flex h-5 w-5 items-center justify-center rounded-full border transition-[background-color,border-color,color]",
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "ph:plus",
 					className: "h-3 w-3"

package/dist/client/components/blocks/block-item.mjs

@@ -2,9 +2,9 @@
 
 import { useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
-import { Card, CardContent, CardHeader } from "../ui/card.mjs";
 import { useBlockEditorActions, useBlockSchema, useBlockValues, useIsBlockExpanded } from "./block-editor-context.mjs";
 import { BlockInsertButton } from "./block-insert-button.mjs";
+import { Card, CardContent, CardHeader } from "../ui/card.mjs";
 import { BlockFieldsRenderer } from "./block-fields-renderer.mjs";
 import { BlockIcon } from "./block-type-icon.mjs";
 import { BlockItemDropdownMenu } from "./block-item-menu.mjs";
@@ -138,7 +138,7 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 	} else t13 = $[28];
 	let t14;
 	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = cn("group flex cursor-pointer flex-row items-center gap-2 px-3 py-2 select-none", "hover:bg-muted transition-colors", "focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset");
+		t14 = cn("group flex cursor-pointer flex-row items-center gap-2 px-3 py-2 select-none", "hover:bg-muted transition-colors", "focus-visible:ring-ring/25 focus-visible:ring-3 focus-visible:outline-none focus-visible:ring-inset");
 		$[29] = t14;
 	} else t14 = $[29];
 	let t15;

package/dist/client/components/blocks/block-library-sidebar.mjs

@@ -186,14 +186,14 @@ function BlockLibrarySidebar(t0) {
 						icon: category_0.config.icon.props.name,
 						className: "text-muted-foreground h-4 w-4"
 					}), /* @__PURE__ */ jsx("h4", {
-						className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase",
+						className: "text-muted-foreground font-chrome chrome-meta text-xs font-semibold",
 						children: getCategoryDisplayLabel(category_0.config)
 					})]
 				}), /* @__PURE__ */ jsx("div", {
 					className: "grid grid-cols-2 gap-2",
 					children: category_0.blocks.map((block) => /* @__PURE__ */ jsxs("button", {
 						type: "button",
-						className: cn("flex flex-col items-start gap-2 border p-3 text-left", "hover:border-primary hover:bg-accent transition-colors", "focus-visible:ring-primary focus:outline-none focus-visible:ring-2"),
+						className: cn("panel-surface flex flex-col items-start gap-2 p-3 text-left", "hover:border-border hover:bg-accent transition-colors", "focus-visible:ring-ring/25 focus:outline-none focus-visible:ring-3"),
 						onClick: () => handleSelectBlock(block.name),
 						children: [/* @__PURE__ */ jsx(BlockIcon, {
 							icon: block.admin?.icon,

package/dist/client/components/component-renderer.mjs

@@ -61,7 +61,7 @@ function Badge(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = {
 			default: "bg-muted text-muted-foreground",
-			primary: "bg-primary/10 text-primary",
+			primary: "bg-surface-high text-foreground",
 			secondary: "bg-secondary text-secondary-foreground",
 			destructive: "bg-destructive/10 text-destructive",
 			success: "bg-success/10 text-success",

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

@@ -322,7 +322,7 @@ function ArrayField(t0) {
 						children: "*"
 					}),
 					maxItems && /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground ml-2 text-xs",
+						className: "text-muted-foreground ml-2 text-xs tabular-nums",
 						children: [
 							"(",
 							fields.length,
@@ -347,7 +347,7 @@ function ArrayField(t0) {
 	let t12;
 	if ($[56] !== resolvedDescription) {
 		t12 = resolvedDescription && /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground text-sm",
+			className: "text-muted-foreground text-sm text-pretty",
 			children: resolvedDescription
 		});
 		$[56] = resolvedDescription;
@@ -356,9 +356,9 @@ function ArrayField(t0) {
 	let t13;
 	if ($[58] !== canRemove || $[59] !== disabled || $[60] !== emptyLabel || $[61] !== fields || $[62] !== handleMove || $[63] !== handleRemove || $[64] !== itemType || $[65] !== name || $[66] !== options || $[67] !== orderable || $[68] !== readOnly || $[69] !== resolvedPlaceholder || $[70] !== t || $[71] !== values) {
 		t13 = fields.length === 0 ? /* @__PURE__ */ jsx("div", {
-			className: "border border-dashed p-4 text-center",
+			className: "py-2",
 			children: /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-sm",
+				className: "text-muted-foreground text-sm text-pretty",
 				children: resolvedPlaceholder || emptyLabel
 			})
 		}) : fields.map((field, index_0) => {
@@ -385,43 +385,43 @@ function ArrayField(t0) {
 						children: [/* @__PURE__ */ jsx(Button, {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
-							className: "h-6 w-6",
+							size: "icon-sm",
+							className: "relative after:absolute after:-inset-1",
 							onClick: () => handleMove(index_0, index_0 - 1),
 							disabled: !canMoveUp || disabled,
 							title: t("field.moveUp"),
 							"aria-label": t("field.moveUp"),
 							children: /* @__PURE__ */ jsx(Icon, {
 								icon: "ph:caret-up",
-								className: "h-3 w-3"
+								className: "size-3.5"
 							})
 						}), /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
-							className: "h-6 w-6",
+							size: "icon-sm",
+							className: "relative after:absolute after:-inset-1",
 							onClick: () => handleMove(index_0, index_0 + 1),
 							disabled: !canMoveDown || disabled,
 							title: t("field.moveDown"),
 							"aria-label": t("field.moveDown"),
 							children: /* @__PURE__ */ jsx(Icon, {
 								icon: "ph:caret-down",
-								className: "h-3 w-3"
+								className: "size-3.5"
 							})
 						})]
 					}),
 					!readOnly && canRemove && /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						variant: "ghost",
-						size: "icon",
-						className: "h-6 w-6",
+						size: "icon-sm",
+						className: "relative after:absolute after:-inset-1",
 						onClick: () => handleRemove(index_0),
 						disabled,
 						title: t("common.remove"),
 						"aria-label": t("field.removeItem"),
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "ph:trash",
-							className: "h-3 w-3"
+							className: "size-3.5"
 						})
 					})
 				]
@@ -474,7 +474,7 @@ function ArrayField(t0) {
 	let t16;
 	if ($[81] !== error) {
 		t16 = error && /* @__PURE__ */ jsx("p", {
-			className: "text-destructive text-sm",
+			className: "text-destructive text-sm text-pretty",
 			children: error
 		});
 		$[81] = error;

package/dist/client/components/fields/asset-preview-field.mjs

@@ -83,7 +83,7 @@ function AssetPreviewField(t0) {
 	if (!asset) {
 		let t16$1;
 		if ($[17] !== className) {
-			t16$1 = cn("qa-asset-preview-field flex items-center justify-center border border-dashed p-8", "bg-muted text-muted-foreground", className);
+			t16$1 = cn("qa-asset-preview-field flex items-center justify-center py-4", "text-muted-foreground", className);
 			$[17] = className;
 			$[18] = t16$1;
 		} else t16$1 = $[18];