@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/actions/action-button.mjs

@@ -0,0 +1,135 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { selectAuthClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { ConfirmationDialog } from "./confirmation-dialog.mjs";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/actions/action-button.tsx
+/**
+* Action Button
+*
+* A button component that renders an action with optional confirmation dialog.
+* Handles different action types (navigate, api, custom, dialog, form).
+*/
+/**
+* ActionButton - Renders an action button with confirmation support
+*
+* @example
+* ```tsx
+* <ActionButton
+*   action={deleteAction}
+*   collection="posts"
+*   item={post}
+*   helpers={actionHelpers}
+* />
+* ```
+*/
+function ActionButton({ action, collection, item, items, helpers, size = "default", className, iconOnly = false, onOpenDialog }) {
+	const resolveText = useResolveText();
+	const authClient = useAdminStore(selectAuthClient);
+	const queryClient = useQueryClient();
+	const [showConfirm, setShowConfirm] = React$1.useState(false);
+	const [isLoading, setIsLoading] = React$1.useState(false);
+	const actionQueryClient = React$1.useMemo(() => ({
+		invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+		refetchQueries: (filters) => queryClient.refetchQueries(filters),
+		resetQueries: (filters) => queryClient.resetQueries(filters)
+	}), [queryClient]);
+	const ctx = React$1.useMemo(() => ({
+		item,
+		items,
+		collection,
+		helpers,
+		queryClient: actionQueryClient,
+		authClient
+	}), [
+		item,
+		items,
+		collection,
+		helpers,
+		actionQueryClient,
+		authClient
+	]);
+	const isVisible = React$1.useMemo(() => {
+		if (action.visible === void 0) return true;
+		if (typeof action.visible === "function") return action.visible(ctx);
+		return action.visible;
+	}, [action.visible, ctx]);
+	const isDisabled = React$1.useMemo(() => {
+		if (action.disabled === void 0) return false;
+		if (typeof action.disabled === "function") return action.disabled(ctx);
+		return action.disabled;
+	}, [action.disabled, ctx]);
+	if (!isVisible) return null;
+	const executeAction = async () => {
+		const { handler } = action;
+		switch (handler.type) {
+			case "navigate": {
+				const path = typeof handler.path === "function" ? handler.path(item) : handler.path;
+				helpers.navigate(`${helpers.basePath}/collections/${collection}/${path}`);
+				break;
+			}
+			case "api":
+				setIsLoading(true);
+				try {
+					const endpoint = handler.endpoint.replace("{id}", String(item?.id || ""));
+					helpers.toast.info(`API call: ${handler.method || "POST"} ${endpoint}`);
+					helpers.refresh();
+				} catch (error) {
+					helpers.toast.error("Action failed");
+				} finally {
+					setIsLoading(false);
+				}
+				break;
+			case "custom":
+				setIsLoading(true);
+				try {
+					await handler.fn(ctx);
+				} catch (error) {
+					helpers.toast.error("Action failed");
+				} finally {
+					setIsLoading(false);
+				}
+				break;
+			case "dialog":
+			case "form":
+				onOpenDialog?.(action);
+				break;
+			case "server":
+				onOpenDialog?.(action);
+				break;
+		}
+	};
+	const handleClick = (e) => {
+		e.stopPropagation();
+		if (action.confirmation) setShowConfirm(true);
+		else executeAction();
+	};
+	const handleConfirm = async () => {
+		await executeAction();
+	};
+	const iconElement = resolveIconElement(action.icon, { "data-icon": "inline-start" });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		variant: action.variant || "default",
+		size: iconOnly ? "icon-sm" : size,
+		onClick: handleClick,
+		disabled: isDisabled || isLoading,
+		className,
+		children: [iconElement, !iconOnly && resolveText(action.label)]
+	}), action.confirmation && /* @__PURE__ */ jsx(ConfirmationDialog, {
+		open: showConfirm,
+		onOpenChange: setShowConfirm,
+		config: action.confirmation,
+		onConfirm: handleConfirm,
+		loading: isLoading
+	})] });
+}
+
+//#endregion
+export { ActionButton };
+//# sourceMappingURL=action-button.mjs.map

package/dist/client/components/actions/action-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.mjs","names":["React","actionQueryClient: ActionQueryClient","ctx: ActionContext<TItem>"],"sources":["../../../../src/client/components/actions/action-button.tsx"],"sourcesContent":["/**\n * Action Button\n *\n * A button component that renders an action with optional confirmation dialog.\n * Handles different action types (navigate, api, custom, dialog, form).\n */\n\n\"use client\";\n\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport type {\n  ActionContext,\n  ActionDefinition,\n  ActionHelpers,\n  ActionQueryClient,\n} from \"../../builder/types/action-types\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { selectAuthClient, useAdminStore } from \"../../runtime/provider\";\nimport { Button } from \"../ui/button\";\nimport { ConfirmationDialog } from \"./confirmation-dialog\";\n\nexport interface ActionButtonProps<TItem = any> {\n  /** Action definition */\n  action: ActionDefinition<TItem>;\n  /** Collection name */\n  collection: string;\n  /** Item for row actions */\n  item?: TItem;\n  /** Items for bulk actions */\n  items?: TItem[];\n  /** Action helpers */\n  helpers: ActionHelpers;\n  /** Button size */\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\" | \"xs\";\n  /** Additional class names */\n  className?: string;\n  /** Show icon only */\n  iconOnly?: boolean;\n  /** Callback when action dialog should open */\n  onOpenDialog?: (action: ActionDefinition<TItem>) => void;\n}\n\n/**\n * ActionButton - Renders an action button with confirmation support\n *\n * @example\n * ```tsx\n * <ActionButton\n *   action={deleteAction}\n *   collection=\"posts\"\n *   item={post}\n *   helpers={actionHelpers}\n * />\n * ```\n */\nexport function ActionButton<TItem = any>({\n  action,\n  collection,\n  item,\n  items,\n  helpers,\n  size = \"default\",\n  className,\n  iconOnly = false,\n  onOpenDialog,\n}: ActionButtonProps<TItem>): React.ReactElement | null {\n  const resolveText = useResolveText();\n  const authClient = useAdminStore(selectAuthClient);\n  const queryClient = useQueryClient();\n  const [showConfirm, setShowConfirm] = React.useState(false);\n  const [isLoading, setIsLoading] = React.useState(false);\n\n  // Wrapped query client for action context\n  const actionQueryClient: ActionQueryClient = React.useMemo(\n    () => ({\n      invalidateQueries: (filters) => queryClient.invalidateQueries(filters),\n      refetchQueries: (filters) => queryClient.refetchQueries(filters),\n      resetQueries: (filters) => queryClient.resetQueries(filters),\n    }),\n    [queryClient],\n  );\n\n  // Build action context\n  const ctx: ActionContext<TItem> = React.useMemo(\n    () => ({\n      item,\n      items,\n      collection,\n      helpers,\n      queryClient: actionQueryClient,\n      authClient,\n    }),\n    [item, items, collection, helpers, actionQueryClient, authClient],\n  );\n\n  // Check visibility\n  const isVisible = React.useMemo(() => {\n    if (action.visible === undefined) return true;\n    if (typeof action.visible === \"function\") {\n      return action.visible(ctx);\n    }\n    return action.visible;\n  }, [action.visible, ctx]);\n\n  // Check disabled state\n  const isDisabled = React.useMemo(() => {\n    if (action.disabled === undefined) return false;\n    if (typeof action.disabled === \"function\") {\n      return action.disabled(ctx);\n    }\n    return action.disabled;\n  }, [action.disabled, ctx]);\n\n  if (!isVisible) return null;\n\n  // Handle action execution\n  const executeAction = async () => {\n    const { handler } = action;\n\n    switch (handler.type) {\n      case \"navigate\": {\n        const path =\n          typeof handler.path === \"function\"\n            ? handler.path(item!)\n            : handler.path;\n        helpers.navigate(\n          `${helpers.basePath}/collections/${collection}/${path}`,\n        );\n        break;\n      }\n\n      case \"api\": {\n        setIsLoading(true);\n        try {\n          // Build endpoint - replace {id} placeholder\n          const endpoint = handler.endpoint.replace(\n            \"{id}\",\n            String((item as any)?.id || \"\"),\n          );\n\n          // This would need actual API implementation\n          // For now, we'll show a placeholder\n          helpers.toast.info(\n            `API call: ${handler.method || \"POST\"} ${endpoint}`,\n          );\n          helpers.refresh();\n        } catch (error) {\n          helpers.toast.error(\"Action failed\");\n        } finally {\n          setIsLoading(false);\n        }\n        break;\n      }\n\n      case \"custom\": {\n        setIsLoading(true);\n        try {\n          await handler.fn(ctx);\n        } catch (error) {\n          helpers.toast.error(\"Action failed\");\n        } finally {\n          setIsLoading(false);\n        }\n        break;\n      }\n\n      case \"dialog\":\n      case \"form\": {\n        // Open dialog through parent component\n        onOpenDialog?.(action);\n        break;\n      }\n\n      case \"server\": {\n        // Server actions are handled as form/dialog if they have a form config,\n        // otherwise execute directly via the action execution hook\n        onOpenDialog?.(action);\n        break;\n      }\n    }\n  };\n\n  // Handle button click\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent row click propagation\n\n    if (action.confirmation) {\n      setShowConfirm(true);\n    } else {\n      executeAction();\n    }\n  };\n\n  // Handle confirmation\n  const handleConfirm = async () => {\n    await executeAction();\n  };\n\n  const iconElement = resolveIconElement(action.icon, {\n    \"data-icon\": \"inline-start\",\n  });\n\n  return (\n    <>\n      <Button\n        variant={action.variant || \"default\"}\n        size={iconOnly ? \"icon-sm\" : size}\n        onClick={handleClick}\n        disabled={isDisabled || isLoading}\n        className={className}\n      >\n        {iconElement}\n        {!iconOnly && resolveText(action.label)}\n      </Button>\n\n      {action.confirmation && (\n        <ConfirmationDialog\n          open={showConfirm}\n          onOpenChange={setShowConfirm}\n          config={action.confirmation}\n          onConfirm={handleConfirm}\n          loading={isLoading}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,aAA0B,EACxC,QACA,YACA,MACA,OACA,SACA,OAAO,WACP,WACA,WAAW,OACX,gBACsD;CACtD,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,cAAc,iBAAiB;CAClD,MAAM,cAAc,gBAAgB;CACpC,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,MAAM;CAC3D,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,MAAM;CAGvD,MAAMC,oBAAuCD,QAAM,eAC1C;EACL,oBAAoB,YAAY,YAAY,kBAAkB,QAAQ;EACtE,iBAAiB,YAAY,YAAY,eAAe,QAAQ;EAChE,eAAe,YAAY,YAAY,aAAa,QAAQ;EAC7D,GACD,CAAC,YAAY,CACd;CAGD,MAAME,MAA4BF,QAAM,eAC/B;EACL;EACA;EACA;EACA;EACA,aAAa;EACb;EACD,GACD;EAAC;EAAM;EAAO;EAAY;EAAS;EAAmB;EAAW,CAClE;CAGD,MAAM,YAAYA,QAAM,cAAc;AACpC,MAAI,OAAO,YAAY,OAAW,QAAO;AACzC,MAAI,OAAO,OAAO,YAAY,WAC5B,QAAO,OAAO,QAAQ,IAAI;AAE5B,SAAO,OAAO;IACb,CAAC,OAAO,SAAS,IAAI,CAAC;CAGzB,MAAM,aAAaA,QAAM,cAAc;AACrC,MAAI,OAAO,aAAa,OAAW,QAAO;AAC1C,MAAI,OAAO,OAAO,aAAa,WAC7B,QAAO,OAAO,SAAS,IAAI;AAE7B,SAAO,OAAO;IACb,CAAC,OAAO,UAAU,IAAI,CAAC;AAE1B,KAAI,CAAC,UAAW,QAAO;CAGvB,MAAM,gBAAgB,YAAY;EAChC,MAAM,EAAE,YAAY;AAEpB,UAAQ,QAAQ,MAAhB;GACE,KAAK,YAAY;IACf,MAAM,OACJ,OAAO,QAAQ,SAAS,aACpB,QAAQ,KAAK,KAAM,GACnB,QAAQ;AACd,YAAQ,SACN,GAAG,QAAQ,SAAS,eAAe,WAAW,GAAG,OAClD;AACD;;GAGF,KAAK;AACH,iBAAa,KAAK;AAClB,QAAI;KAEF,MAAM,WAAW,QAAQ,SAAS,QAChC,QACA,OAAQ,MAAc,MAAM,GAAG,CAChC;AAID,aAAQ,MAAM,KACZ,aAAa,QAAQ,UAAU,OAAO,GAAG,WAC1C;AACD,aAAQ,SAAS;aACV,OAAO;AACd,aAAQ,MAAM,MAAM,gBAAgB;cAC5B;AACR,kBAAa,MAAM;;AAErB;GAGF,KAAK;AACH,iBAAa,KAAK;AAClB,QAAI;AACF,WAAM,QAAQ,GAAG,IAAI;aACd,OAAO;AACd,aAAQ,MAAM,MAAM,gBAAgB;cAC5B;AACR,kBAAa,MAAM;;AAErB;GAGF,KAAK;GACL,KAAK;AAEH,mBAAe,OAAO;AACtB;GAGF,KAAK;AAGH,mBAAe,OAAO;AACtB;;;CAMN,MAAM,eAAe,MAAwB;AAC3C,IAAE,iBAAiB;AAEnB,MAAI,OAAO,aACT,gBAAe,KAAK;MAEpB,gBAAe;;CAKnB,MAAM,gBAAgB,YAAY;AAChC,QAAM,eAAe;;CAGvB,MAAM,cAAc,mBAAmB,OAAO,MAAM,EAClD,aAAa,gBACd,CAAC;AAEF,QACE,4CACE,qBAAC;EACC,SAAS,OAAO,WAAW;EAC3B,MAAM,WAAW,YAAY;EAC7B,SAAS;EACT,UAAU,cAAc;EACb;aAEV,aACA,CAAC,YAAY,YAAY,OAAO,MAAM;GAChC,EAER,OAAO,gBACN,oBAAC;EACC,MAAM;EACN,cAAc;EACd,QAAQ,OAAO;EACf,WAAW;EACX,SAAS;GACT,IAEH"}

package/dist/client/components/actions/action-dialog.d.mts

@@ -0,0 +1,2 @@
+import "../../builder/types/action-types.mjs";
+import "react";

package/dist/client/components/actions/action-dialog.mjs

@@ -0,0 +1,264 @@
+"use client";
+
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { Button } from "../ui/button.mjs";
+import { buildValidationSchema } from "../../builder/validation.mjs";
+import { AutoFormFields } from "../../views/collection/auto-form-fields.mjs";
+import { ResponsiveDialog, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle } from "../ui/responsive-dialog.mjs";
+import { Icon } from "@iconify/react";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React$1 from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/actions/action-dialog.tsx
+/**
+* Action Dialog
+*
+* Renders dialog-type and form-type actions.
+* Supports lazy-loaded components and inline form definitions.
+* Form actions use AutoFormFields for full field system support.
+*/
+/**
+* Create a custom resolver for action form validation
+* Uses buildValidationSchema and handles Zod v4 compatibility
+*/
+function createActionFormResolver(fields, registry) {
+	const schema = buildValidationSchema(fields, registry);
+	return async (values) => {
+		const result = schema.safeParse(values);
+		if (result.success) return {
+			values: result.data,
+			errors: {}
+		};
+		const errors = {};
+		for (const issue of result.error.issues) {
+			const path = issue.path.join(".");
+			if (path && !errors[path]) errors[path] = {
+				type: issue.code,
+				message: issue.message
+			};
+		}
+		return {
+			values: {},
+			errors
+		};
+	};
+}
+/**
+* Form Dialog content - renders form fields using AutoFormFields
+*
+* Uses buildValidationSchema for automatic Zod schema generation
+* from field definitions, providing full field system support.
+*/
+function FormDialogContent({ action, ctx, onClose }) {
+	const { config } = action.handler;
+	const resolveText = useResolveText();
+	const { t } = useTranslation();
+	const admin = useAdminStore(selectAdmin);
+	const resolver = React$1.useMemo(() => {
+		if (!admin) return void 0;
+		return createActionFormResolver(config.fields, admin.getFields());
+	}, [admin, config.fields]);
+	const form = useForm({
+		defaultValues: config.defaultValues || {},
+		resolver
+	});
+	const [isSubmitting, setIsSubmitting] = React$1.useState(false);
+	const handleSubmit = form.handleSubmit(async (data) => {
+		setIsSubmitting(true);
+		const submitPromise = async () => {
+			await config.onSubmit(data, ctx);
+			return data;
+		};
+		toast.promise(submitPromise(), {
+			loading: t("toast.processing"),
+			success: () => {
+				onClose();
+				return t("toast.actionSuccess");
+			},
+			error: (error) => {
+				return error instanceof Error ? error.message : t("toast.actionFailed");
+			},
+			finally: () => {
+				setIsSubmitting(false);
+			}
+		});
+	});
+	const collectionConfig = React$1.useMemo(() => ({ fields: config.fields }), [config.fields]);
+	return /* @__PURE__ */ jsxs(FormProvider, {
+		...form,
+		children: [/* @__PURE__ */ jsxs(ResponsiveDialogHeader, { children: [/* @__PURE__ */ jsx(ResponsiveDialogTitle, { children: resolveText(config.title) }), config.description && /* @__PURE__ */ jsx(ResponsiveDialogDescription, { children: resolveText(config.description) })] }), /* @__PURE__ */ jsxs("form", {
+			onSubmit: handleSubmit,
+			className: "space-y-4",
+			children: [/* @__PURE__ */ jsx(AutoFormFields, {
+				collection: "__action__",
+				config: collectionConfig
+			}), /* @__PURE__ */ jsxs(ResponsiveDialogFooter, {
+				className: "mt-6",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: onClose,
+					disabled: isSubmitting,
+					children: resolveText(config.cancelLabel, t("common.cancel"))
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					disabled: isSubmitting,
+					children: isSubmitting ? t("common.loading") : resolveText(config.submitLabel, t("common.submit"))
+				})]
+			})]
+		})]
+	});
+}
+/**
+* Custom Dialog content - renders lazy-loaded component
+*/
+function CustomDialogContent({ action, ctx, onClose }) {
+	const handler = action.handler;
+	const [Component, setComponent] = React$1.useState(null);
+	const [loading, setLoading] = React$1.useState(true);
+	const [error, setError] = React$1.useState(null);
+	React$1.useEffect(() => {
+		let mounted = true;
+		async function loadComponent() {
+			try {
+				const comp = handler.component;
+				if (typeof comp === "function") {
+					const lazyComp = comp;
+					if (lazyComp._payload !== void 0) {
+						const resolved = await lazyComp._payload();
+						if (mounted) setComponent(() => resolved.default || resolved);
+					} else {
+						const result = comp();
+						if (result?.then) {
+							const mod = await result;
+							if (mounted) setComponent(() => mod.default || mod);
+						} else if (mounted) setComponent(() => comp);
+					}
+				} else if (mounted) setComponent(() => comp);
+			} catch (err) {
+				if (mounted) setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load"));
+			} finally {
+				if (mounted) setLoading(false);
+			}
+		}
+		loadComponent();
+		return () => {
+			mounted = false;
+		};
+	}, [handler.component]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-32 items-center justify-center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-6 animate-spin text-muted-foreground"
+		})
+	});
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		className: "p-4 text-center",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-destructive",
+			children: error.message
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onClick: onClose,
+			className: "mt-4",
+			children: "Close"
+		})]
+	});
+	if (!Component) return /* @__PURE__ */ jsxs("div", {
+		className: "p-4 text-center",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "Component not found"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onClick: onClose,
+			className: "mt-4",
+			children: "Close"
+		})]
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		item: ctx.item,
+		items: ctx.items,
+		collection: ctx.collection,
+		onClose,
+		onSuccess: () => {
+			ctx.helpers.refresh();
+			onClose();
+		}
+	});
+}
+/**
+* ActionDialog - Renders dialog-type and form-type actions
+*
+* @example
+* ```tsx
+* <ActionDialog
+*   open={!!activeAction}
+*   onOpenChange={(open) => !open && setActiveAction(null)}
+*   action={activeAction}
+*   collection="users"
+*   item={selectedUser}
+*   helpers={actionHelpers}
+* />
+* ```
+*/
+function ActionDialog({ open, onOpenChange, action, collection, item, items, helpers }) {
+	const queryClient = useQueryClient();
+	const ctx = React$1.useMemo(() => ({
+		item,
+		items,
+		collection,
+		helpers: {
+			...helpers,
+			closeDialog: () => onOpenChange(false)
+		},
+		queryClient: {
+			invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+			resetQueries: (filters) => queryClient.resetQueries(filters),
+			refetchQueries: (filters) => queryClient.refetchQueries(filters)
+		}
+	}), [
+		item,
+		items,
+		collection,
+		helpers,
+		onOpenChange,
+		queryClient
+	]);
+	const handleClose = () => onOpenChange(false);
+	const getDialogClassName = () => {
+		if (action.handler.type === "form") return {
+			sm: "sm:max-w-sm",
+			md: "sm:max-w-md",
+			lg: "sm:max-w-lg",
+			xl: "sm:max-w-xl"
+		}[action.handler.config.width || "md"];
+		if (action.handler.type === "dialog") return "sm:max-w-lg";
+		return "sm:max-w-md";
+	};
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(ResponsiveDialogContent, {
+			className: getDialogClassName(),
+			children: [action.handler.type === "form" && /* @__PURE__ */ jsx(FormDialogContent, {
+				action,
+				ctx,
+				onClose: handleClose
+			}), action.handler.type === "dialog" && /* @__PURE__ */ jsx(CustomDialogContent, {
+				action,
+				ctx,
+				onClose: handleClose
+			})]
+		})
+	});
+}
+
+//#endregion
+export { ActionDialog };
+//# sourceMappingURL=action-dialog.mjs.map

package/dist/client/components/actions/action-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-dialog.mjs","names":["errors: FieldErrors","React","ctx: ActionContext<TItem>"],"sources":["../../../../src/client/components/actions/action-dialog.tsx"],"sourcesContent":["/**\n * Action Dialog\n *\n * Renders dialog-type and form-type actions.\n * Supports lazy-loaded components and inline form definitions.\n * Form actions use AutoFormFields for full field system support.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport {\n  type FieldErrors,\n  FormProvider,\n  type Resolver,\n  useForm,\n} from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport type {\n  ActionContext,\n  ActionDefinition,\n  ActionHelpers,\n  DialogHandler,\n  FormHandler,\n} from \"../../builder/types/action-types\";\nimport type { FieldDefinition } from \"../../builder/field/field\";\nimport { buildValidationSchema } from \"../../builder/validation\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { selectAdmin, useAdminStore } from \"../../runtime/provider\";\nimport { AutoFormFields } from \"../../views/collection/auto-form-fields\";\nimport { Button } from \"../ui/button\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n} from \"../ui/responsive-dialog\";\n\nexport interface ActionDialogProps<TItem = any> {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when dialog should close */\n  onOpenChange: (open: boolean) => void;\n  /** The action being rendered */\n  action: ActionDefinition<TItem>;\n  /** Collection name */\n  collection: string;\n  /** Item for row actions */\n  item?: TItem;\n  /** Items for bulk actions */\n  items?: TItem[];\n  /** Action helpers */\n  helpers: ActionHelpers;\n}\n\n/**\n * Create a custom resolver for action form validation\n * Uses buildValidationSchema and handles Zod v4 compatibility\n */\nfunction createActionFormResolver(\n  fields: Record<string, FieldDefinition>,\n  registry: Record<string, FieldDefinition>,\n): Resolver<Record<string, any>> {\n  const schema = buildValidationSchema(fields, registry);\n\n  return async (values) => {\n    const result = schema.safeParse(values);\n\n    if (result.success) {\n      return {\n        values: result.data,\n        errors: {},\n      };\n    }\n\n    const errors: FieldErrors = {};\n    for (const issue of result.error.issues) {\n      const path = issue.path.join(\".\");\n      if (path && !errors[path]) {\n        errors[path] = {\n          type: issue.code,\n          message: issue.message,\n        };\n      }\n    }\n\n    return {\n      values: {},\n      errors,\n    };\n  };\n}\n\n/**\n * Form Dialog content - renders form fields using AutoFormFields\n *\n * Uses buildValidationSchema for automatic Zod schema generation\n * from field definitions, providing full field system support.\n */\nfunction FormDialogContent<TItem>({\n  action,\n  ctx,\n  onClose,\n}: {\n  action: ActionDefinition<TItem>;\n  ctx: ActionContext<TItem>;\n  onClose: () => void;\n}) {\n  const handler = action.handler as FormHandler<TItem>;\n  const { config } = handler;\n  const resolveText = useResolveText();\n  const { t } = useTranslation();\n  const admin = useAdminStore(selectAdmin);\n\n  // Create resolver from field definitions\n  const resolver = React.useMemo(() => {\n    if (!admin) return undefined;\n    return createActionFormResolver(config.fields, admin.getFields());\n  }, [admin, config.fields]);\n\n  const form = useForm({\n    defaultValues: config.defaultValues || {},\n    resolver,\n  });\n\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n\n  const handleSubmit = form.handleSubmit(async (data) => {\n    setIsSubmitting(true);\n\n    const submitPromise = async () => {\n      await config.onSubmit(data, ctx);\n      return data;\n    };\n\n    toast.promise(submitPromise(), {\n      loading: t(\"toast.processing\"),\n      success: () => {\n        onClose();\n        return t(\"toast.actionSuccess\");\n      },\n      error: (error) => {\n        return error instanceof Error ? error.message : t(\"toast.actionFailed\");\n      },\n      finally: () => {\n        setIsSubmitting(false);\n      },\n    });\n  });\n\n  // Build collection config for AutoFormFields\n  const collectionConfig = React.useMemo(\n    () => ({\n      fields: config.fields,\n    }),\n    [config.fields],\n  );\n\n  return (\n    <FormProvider {...form}>\n      <ResponsiveDialogHeader>\n        <ResponsiveDialogTitle>\n          {resolveText(config.title)}\n        </ResponsiveDialogTitle>\n        {config.description && (\n          <ResponsiveDialogDescription>\n            {resolveText(config.description)}\n          </ResponsiveDialogDescription>\n        )}\n      </ResponsiveDialogHeader>\n\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        <AutoFormFields collection=\"__action__\" config={collectionConfig} />\n\n        <ResponsiveDialogFooter className=\"mt-6\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={onClose}\n            disabled={isSubmitting}\n          >\n            {resolveText(config.cancelLabel, t(\"common.cancel\"))}\n          </Button>\n          <Button type=\"submit\" disabled={isSubmitting}>\n            {isSubmitting\n              ? t(\"common.loading\")\n              : resolveText(config.submitLabel, t(\"common.submit\"))}\n          </Button>\n        </ResponsiveDialogFooter>\n      </form>\n    </FormProvider>\n  );\n}\n\n/**\n * Custom Dialog content - renders lazy-loaded component\n */\nfunction CustomDialogContent<TItem>({\n  action,\n  ctx,\n  onClose,\n}: {\n  action: ActionDefinition<TItem>;\n  ctx: ActionContext<TItem>;\n  onClose: () => void;\n}) {\n  const handler = action.handler as DialogHandler<TItem>;\n  const [Component, setComponent] =\n    React.useState<React.ComponentType<any> | null>(null);\n  const [loading, setLoading] = React.useState(true);\n  const [error, setError] = React.useState<Error | null>(null);\n\n  React.useEffect(() => {\n    let mounted = true;\n\n    async function loadComponent() {\n      try {\n        const comp = handler.component;\n\n        // Handle lazy-loaded components\n        if (typeof comp === \"function\") {\n          // Check if it's a React.lazy component by looking for _payload\n          const lazyComp = comp as any;\n          if (lazyComp._payload !== undefined) {\n            // It's a lazy component, resolve it\n            const resolved = await lazyComp._payload();\n            if (mounted) {\n              setComponent(() => resolved.default || resolved);\n            }\n          } else {\n            // It's a direct component function or import\n            const result = (comp as () => any)();\n            if (result?.then) {\n              const mod = await result;\n              if (mounted) {\n                setComponent(() => mod.default || mod);\n              }\n            } else {\n              // Direct component\n              if (mounted) {\n                setComponent(() => comp as React.ComponentType<any>);\n              }\n            }\n          }\n        } else {\n          // Direct component\n          if (mounted) {\n            setComponent(() => comp as React.ComponentType<any>);\n          }\n        }\n      } catch (err) {\n        if (mounted) {\n          setError(err instanceof Error ? err : new Error(\"Failed to load\"));\n        }\n      } finally {\n        if (mounted) {\n          setLoading(false);\n        }\n      }\n    }\n\n    loadComponent();\n    return () => {\n      mounted = false;\n    };\n  }, [handler.component]);\n\n  if (loading) {\n    return (\n      <div className=\"flex h-32 items-center justify-center\">\n        <Icon\n          icon=\"ph:spinner-gap\"\n          className=\"size-6 animate-spin text-muted-foreground\"\n        />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"p-4 text-center\">\n        <p className=\"text-destructive\">{error.message}</p>\n        <Button variant=\"outline\" onClick={onClose} className=\"mt-4\">\n          Close\n        </Button>\n      </div>\n    );\n  }\n\n  if (!Component) {\n    return (\n      <div className=\"p-4 text-center\">\n        <p className=\"text-muted-foreground\">Component not found</p>\n        <Button variant=\"outline\" onClick={onClose} className=\"mt-4\">\n          Close\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <Component\n      item={ctx.item}\n      items={ctx.items}\n      collection={ctx.collection}\n      onClose={onClose}\n      onSuccess={() => {\n        ctx.helpers.refresh();\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * ActionDialog - Renders dialog-type and form-type actions\n *\n * @example\n * ```tsx\n * <ActionDialog\n *   open={!!activeAction}\n *   onOpenChange={(open) => !open && setActiveAction(null)}\n *   action={activeAction}\n *   collection=\"users\"\n *   item={selectedUser}\n *   helpers={actionHelpers}\n * />\n * ```\n */\nexport function ActionDialog<TItem = any>({\n  open,\n  onOpenChange,\n  action,\n  collection,\n  item,\n  items,\n  helpers,\n}: ActionDialogProps<TItem>): React.ReactElement | null {\n  const queryClient = useQueryClient();\n\n  // Build action context\n  const ctx: ActionContext<TItem> = React.useMemo(\n    () => ({\n      item,\n      items,\n      collection,\n      helpers: {\n        ...helpers,\n        closeDialog: () => onOpenChange(false),\n      },\n      queryClient: {\n        invalidateQueries: (filters) => queryClient.invalidateQueries(filters),\n        resetQueries: (filters) => queryClient.resetQueries(filters),\n        refetchQueries: (filters) => queryClient.refetchQueries(filters),\n      },\n    }),\n    [item, items, collection, helpers, onOpenChange, queryClient],\n  );\n\n  const handleClose = () => onOpenChange(false);\n\n  // Determine dialog size based on handler type and config\n  const getDialogClassName = () => {\n    if (action.handler.type === \"form\") {\n      const width = (action.handler as FormHandler).config.width || \"md\";\n      const widthMap = {\n        sm: \"sm:max-w-sm\",\n        md: \"sm:max-w-md\",\n        lg: \"sm:max-w-lg\",\n        xl: \"sm:max-w-xl\",\n      };\n      return widthMap[width];\n    }\n    if (action.handler.type === \"dialog\") {\n      return \"sm:max-w-lg\";\n    }\n    return \"sm:max-w-md\";\n  };\n\n  return (\n    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n      <ResponsiveDialogContent className={getDialogClassName()}>\n        {action.handler.type === \"form\" && (\n          <FormDialogContent action={action} ctx={ctx} onClose={handleClose} />\n        )}\n        {action.handler.type === \"dialog\" && (\n          <CustomDialogContent\n            action={action}\n            ctx={ctx}\n            onClose={handleClose}\n          />\n        )}\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/actions/confirmation-dialog.d.mts

@@ -0,0 +1,2 @@
+import "../../builder/types/action-types.mjs";
+import "react";

package/dist/client/components/actions/confirmation-dialog.mjs

@@ -0,0 +1,82 @@
+"use client";
+
+import { Button } from "../ui/button.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/actions/confirmation-dialog.tsx
+/**
+* Confirmation Dialog
+*
+* Reusable confirmation dialog for destructive or important actions.
+* Uses base-ui dialog primitives with responsive design.
+*/
+/**
+* ConfirmationDialog - Prompts user to confirm an action
+*
+* @example
+* ```tsx
+* <ConfirmationDialog
+*   open={showConfirm}
+*   onOpenChange={setShowConfirm}
+*   config={{
+*     title: "Delete item?",
+*     description: "This action cannot be undone.",
+*     destructive: true,
+*   }}
+*   onConfirm={handleDelete}
+* />
+* ```
+*/
+function ConfirmationDialog({ open, onOpenChange, config, onConfirm, loading = false }) {
+	const [isProcessing, setIsProcessing] = React$1.useState(false);
+	const handleConfirm = async () => {
+		setIsProcessing(true);
+		try {
+			await onConfirm();
+			onOpenChange(false);
+		} finally {
+			setIsProcessing(false);
+		}
+	};
+	const isLoading = loading || isProcessing;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-[425px]",
+			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [config.destructive && /* @__PURE__ */ jsx("div", {
+					className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-destructive/10",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:warning",
+						className: "size-5 text-destructive"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: config.title }), config.description && /* @__PURE__ */ jsx(DialogDescription, { children: config.description })]
+				})]
+			}) }), /* @__PURE__ */ jsxs(DialogFooter, {
+				className: "mt-4",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: () => onOpenChange(false),
+					disabled: isLoading,
+					children: config.cancelLabel || "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: config.destructive ? "destructive" : "default",
+					onClick: handleConfirm,
+					disabled: isLoading,
+					children: isLoading ? "Processing..." : config.confirmLabel || "Confirm"
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { ConfirmationDialog };
+//# sourceMappingURL=confirmation-dialog.mjs.map

package/dist/client/components/actions/confirmation-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmation-dialog.mjs","names":["React"],"sources":["../../../../src/client/components/actions/confirmation-dialog.tsx"],"sourcesContent":["/**\n * Confirmation Dialog\n *\n * Reusable confirmation dialog for destructive or important actions.\n * Uses base-ui dialog primitives with responsive design.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"../ui/dialog\";\nimport { Button } from \"../ui/button\";\nimport type { ConfirmationConfig } from \"../../builder/types/action-types\";\n\nexport interface ConfirmationDialogProps {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when dialog should close */\n  onOpenChange: (open: boolean) => void;\n  /** Confirmation configuration */\n  config: ConfirmationConfig;\n  /** Callback when user confirms */\n  onConfirm: () => void | Promise<void>;\n  /** Whether the action is currently loading */\n  loading?: boolean;\n}\n\n/**\n * ConfirmationDialog - Prompts user to confirm an action\n *\n * @example\n * ```tsx\n * <ConfirmationDialog\n *   open={showConfirm}\n *   onOpenChange={setShowConfirm}\n *   config={{\n *     title: \"Delete item?\",\n *     description: \"This action cannot be undone.\",\n *     destructive: true,\n *   }}\n *   onConfirm={handleDelete}\n * />\n * ```\n */\nexport function ConfirmationDialog({\n  open,\n  onOpenChange,\n  config,\n  onConfirm,\n  loading = false,\n}: ConfirmationDialogProps): React.ReactElement {\n  const [isProcessing, setIsProcessing] = React.useState(false);\n\n  const handleConfirm = async () => {\n    setIsProcessing(true);\n    try {\n      await onConfirm();\n      onOpenChange(false);\n    } finally {\n      setIsProcessing(false);\n    }\n  };\n\n  const isLoading = loading || isProcessing;\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <div className=\"flex items-start gap-3\">\n            {config.destructive && (\n              <div className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-destructive/10\">\n                <Icon icon=\"ph:warning\" className=\"size-5 text-destructive\" />\n              </div>\n            )}\n            <div className=\"space-y-1\">\n              <DialogTitle>{config.title}</DialogTitle>\n              {config.description && (\n                <DialogDescription>{config.description}</DialogDescription>\n              )}\n            </div>\n          </div>\n        </DialogHeader>\n        <DialogFooter className=\"mt-4\">\n          <Button\n            variant=\"outline\"\n            onClick={() => onOpenChange(false)}\n            disabled={isLoading}\n          >\n            {config.cancelLabel || \"Cancel\"}\n          </Button>\n          <Button\n            variant={config.destructive ? \"destructive\" : \"default\"}\n            onClick={handleConfirm}\n            disabled={isLoading}\n          >\n            {isLoading ? \"Processing...\" : config.confirmLabel || \"Confirm\"}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAgB,mBAAmB,EACjC,MACA,cACA,QACA,WACA,UAAU,SACoC;CAC9C,MAAM,CAAC,cAAc,mBAAmBA,QAAM,SAAS,MAAM;CAE7D,MAAM,gBAAgB,YAAY;AAChC,kBAAgB,KAAK;AACrB,MAAI;AACF,SAAM,WAAW;AACjB,gBAAa,MAAM;YACX;AACR,mBAAgB,MAAM;;;CAI1B,MAAM,YAAY,WAAW;AAE7B,QACE,oBAAC;EAAa;EAAoB;YAChC,qBAAC;GAAc,WAAU;cACvB,oBAAC,0BACC,qBAAC;IAAI,WAAU;eACZ,OAAO,eACN,oBAAC;KAAI,WAAU;eACb,oBAAC;MAAK,MAAK;MAAa,WAAU;OAA4B;MAC1D,EAER,qBAAC;KAAI,WAAU;gBACb,oBAAC,yBAAa,OAAO,QAAoB,EACxC,OAAO,eACN,oBAAC,+BAAmB,OAAO,cAAgC;MAEzD;KACF,GACO,EACf,qBAAC;IAAa,WAAU;eACtB,oBAAC;KACC,SAAQ;KACR,eAAe,aAAa,MAAM;KAClC,UAAU;eAET,OAAO,eAAe;MAChB,EACT,oBAAC;KACC,SAAS,OAAO,cAAc,gBAAgB;KAC9C,SAAS;KACT,UAAU;eAET,YAAY,kBAAkB,OAAO,gBAAgB;MAC/C;KACI;IACD;GACT"}

package/dist/client/components/actions/header-actions.d.mts

@@ -0,0 +1,2 @@
+import "../../builder/types/action-types.mjs";
+import "react";