@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,178 @@
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { WidgetErrorBoundary } from "../../components/error-boundary.mjs";
+import { WidgetCard } from "./widget-card.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/dashboard/dashboard-widget.tsx
+/**
+* DashboardWidget Component
+*
+* Renders individual dashboard widgets based on their type configuration.
+* Resolves widgets from the registry (built-in + custom).
+*/
+function UnknownWidget({ type }) {
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: "Unknown Widget",
+		className: "border-warning/20 bg-warning/5",
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"Widget type \"",
+				type,
+				"\" is not recognized."
+			]
+		})
+	});
+}
+function RegistryWidgetRenderer({ loader, widgetConfig, basePath, navigate }) {
+	const [state, setState] = React$1.useState({
+		Component: null,
+		loading: true,
+		error: null
+	});
+	React$1.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0)) {
+			setState({
+				Component: loader,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				if (mounted) setState({
+					Component: null,
+					loading: false,
+					error: err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load component")
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader]);
+	if (state.loading) return /* @__PURE__ */ jsx(WidgetCard, { isLoading: true });
+	if (state.error) return /* @__PURE__ */ jsx(WidgetCard, { error: state.error });
+	if (!state.Component) return /* @__PURE__ */ jsx(WidgetCard, { error: /* @__PURE__ */ new Error("Component not found") });
+	const Component = state.Component;
+	return /* @__PURE__ */ jsx(Component, {
+		config: widgetConfig,
+		basePath,
+		navigate,
+		span: widgetConfig.span
+	});
+}
+function CustomWidgetRenderer({ loader, widgetConfig, span }) {
+	const [state, setState] = React$1.useState({
+		Component: null,
+		loading: true,
+		error: null
+	});
+	React$1.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0)) {
+			setState({
+				Component: loader,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				if (mounted) setState({
+					Component: null,
+					loading: false,
+					error: err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load component")
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader]);
+	if (state.loading) return /* @__PURE__ */ jsx(WidgetCard, { isLoading: true });
+	if (state.error) return /* @__PURE__ */ jsx(WidgetCard, { error: state.error });
+	if (!state.Component) return /* @__PURE__ */ jsx(WidgetCard, { error: /* @__PURE__ */ new Error("Component not found") });
+	const Component = state.Component;
+	return /* @__PURE__ */ jsx(Component, {
+		config: widgetConfig,
+		span
+	});
+}
+/**
+* DashboardWidget - Renders a single widget based on its configuration.
+*
+* Resolves widgets from the admin store's widget registry (populated by
+* coreAdminModule and user extensions). Falls back to widgetRegistry prop
+* for overrides.
+*/
+function DashboardWidget({ config, basePath = "/admin", navigate, widgetRegistry }) {
+	const registeredWidgets = useAdminStore(selectAdmin).getWidgets();
+	const renderWidget = () => {
+		if (config.type === "custom") return /* @__PURE__ */ jsx(CustomWidgetRenderer, {
+			loader: config.component,
+			widgetConfig: config.config || {},
+			span: config.span
+		});
+		if (widgetRegistry?.[config.type]) {
+			const CustomWidget = widgetRegistry[config.type];
+			return /* @__PURE__ */ jsx(CustomWidget, {
+				config,
+				span: config.span
+			});
+		}
+		const widgetDef = registeredWidgets[config.type];
+		if (widgetDef) {
+			const component = widgetDef.component ?? widgetDef.state?.component;
+			if (component) return /* @__PURE__ */ jsx(RegistryWidgetRenderer, {
+				loader: component,
+				widgetConfig: config,
+				basePath,
+				navigate
+			});
+		}
+		return /* @__PURE__ */ jsx(UnknownWidget, { type: config.type });
+	};
+	return /* @__PURE__ */ jsx(WidgetErrorBoundary, {
+		widgetType: config.type,
+		children: renderWidget()
+	});
+}
+
+//#endregion
+export { DashboardWidget };
+//# sourceMappingURL=dashboard-widget.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-widget.mjs","names":["React"],"sources":["../../../../src/client/views/dashboard/dashboard-widget.tsx"],"sourcesContent":["/**\n * DashboardWidget Component\n *\n * Renders individual dashboard widgets based on their type configuration.\n * Resolves widgets from the registry (built-in + custom).\n */\n\nimport * as React from \"react\";\nimport type { AnyWidgetConfig, WidgetComponentProps } from \"../../builder\";\nimport { WidgetErrorBoundary } from \"../../components/error-boundary\";\nimport { selectAdmin, useAdminStore } from \"../../runtime\";\nimport { WidgetCard } from \"./widget-card\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardWidgetProps {\n\t/**\n\t * Widget configuration\n\t */\n\tconfig: AnyWidgetConfig;\n\n\t/**\n\t * Base path for navigation links\n\t */\n\tbasePath?: string;\n\n\t/**\n\t * Navigate function for item clicks\n\t */\n\tnavigate?: (path: string) => void;\n\n\t/**\n\t * Custom widget registry for overrides\n\t */\n\twidgetRegistry?: Record<string, React.ComponentType<WidgetComponentProps>>;\n}\n\n// ============================================================================\n// Loading & Error States\n// ============================================================================\n\nfunction UnknownWidget({ type }: { type: string }) {\n\treturn (\n\t\t<WidgetCard\n\t\t\ttitle=\"Unknown Widget\"\n\t\t\tclassName=\"border-warning/20 bg-warning/5\"\n\t\t>\n\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\tWidget type \"{type}\" is not recognized.\n\t\t\t</p>\n\t\t</WidgetCard>\n\t);\n}\n\n// ============================================================================\n// Widget Renderer (handles lazy loading from registry)\n// ============================================================================\n\ninterface RegistryWidgetRendererProps {\n\tloader: any;\n\twidgetConfig: AnyWidgetConfig;\n\tbasePath: string;\n\tnavigate?: (path: string) => void;\n}\n\nfunction RegistryWidgetRenderer({\n\tloader,\n\twidgetConfig,\n\tbasePath,\n\tnavigate,\n}: RegistryWidgetRendererProps) {\n\tconst [state, setState] = React.useState<{\n\t\tComponent: React.ComponentType<any> | null;\n\t\tloading: boolean;\n\t\terror: Error | null;\n\t}>({\n\t\tComponent: null,\n\t\tloading: true,\n\t\terror: null,\n\t});\n\n\tReact.useEffect(() => {\n\t\tif (!loader) {\n\t\t\tsetState({ Component: null, loading: false, error: null });\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's already a component (not a lazy loader function)\n\t\tconst isLazyLoader =\n\t\t\ttypeof loader === \"function\" &&\n\t\t\t!loader.prototype?.render &&\n\t\t\t!loader.prototype?.isReactComponent &&\n\t\t\tloader.length === 0;\n\n\t\tif (!isLazyLoader) {\n\t\t\tsetState({ Component: loader, loading: false, error: null });\n\t\t\treturn;\n\t\t}\n\n\t\t// Load lazy component\n\t\tlet mounted = true;\n\n\t\t(async () => {\n\t\t\ttry {\n\t\t\t\tconst result = await loader();\n\t\t\t\tif (mounted) {\n\t\t\t\t\tconst Component = result.default || result;\n\t\t\t\t\tsetState({ Component, loading: false, error: null });\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\tif (mounted) {\n\t\t\t\t\tsetState({\n\t\t\t\t\t\tComponent: null,\n\t\t\t\t\t\tloading: false,\n\t\t\t\t\t\terror:\n\t\t\t\t\t\t\terr instanceof Error\n\t\t\t\t\t\t\t\t? err\n\t\t\t\t\t\t\t\t: new Error(\"Failed to load component\"),\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t})();\n\n\t\treturn () => {\n\t\t\tmounted = false;\n\t\t};\n\t}, [loader]);\n\n\tif (state.loading) {\n\t\treturn <WidgetCard isLoading />;\n\t}\n\n\tif (state.error) {\n\t\treturn <WidgetCard error={state.error} />;\n\t}\n\n\tif (!state.Component) {\n\t\treturn <WidgetCard error={new Error(\"Component not found\")} />;\n\t}\n\n\tconst Component = state.Component;\n\treturn (\n\t\t<Component\n\t\t\tconfig={widgetConfig}\n\t\t\tbasePath={basePath}\n\t\t\tnavigate={navigate}\n\t\t\tspan={widgetConfig.span}\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Custom Widget Renderer (for type=\"custom\" with inline component)\n// ============================================================================\n\ninterface CustomWidgetRendererProps {\n\tloader: any;\n\twidgetConfig: Record<string, any>;\n\tspan?: number;\n}\n\nfunction CustomWidgetRenderer({\n\tloader,\n\twidgetConfig,\n\tspan,\n}: CustomWidgetRendererProps) {\n\tconst [state, setState] = React.useState<{\n\t\tComponent: React.ComponentType<WidgetComponentProps> | null;\n\t\tloading: boolean;\n\t\terror: Error | null;\n\t}>({\n\t\tComponent: null,\n\t\tloading: true,\n\t\terror: null,\n\t});\n\n\tReact.useEffect(() => {\n\t\tif (!loader) {\n\t\t\tsetState({ Component: null, loading: false, error: null });\n\t\t\treturn;\n\t\t}\n\n\t\tconst isLazyLoader =\n\t\t\ttypeof loader === \"function\" &&\n\t\t\t!loader.prototype?.render &&\n\t\t\t!loader.prototype?.isReactComponent &&\n\t\t\tloader.length === 0;\n\n\t\tif (!isLazyLoader) {\n\t\t\tsetState({ Component: loader, loading: false, error: null });\n\t\t\treturn;\n\t\t}\n\n\t\tlet mounted = true;\n\n\t\t(async () => {\n\t\t\ttry {\n\t\t\t\tconst result = await loader();\n\t\t\t\tif (mounted) {\n\t\t\t\t\tconst Component = result.default || result;\n\t\t\t\t\tsetState({ Component, loading: false, error: null });\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\tif (mounted) {\n\t\t\t\t\tsetState({\n\t\t\t\t\t\tComponent: null,\n\t\t\t\t\t\tloading: false,\n\t\t\t\t\t\terror:\n\t\t\t\t\t\t\terr instanceof Error\n\t\t\t\t\t\t\t\t? err\n\t\t\t\t\t\t\t\t: new Error(\"Failed to load component\"),\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t})();\n\n\t\treturn () => {\n\t\t\tmounted = false;\n\t\t};\n\t}, [loader]);\n\n\tif (state.loading) {\n\t\treturn <WidgetCard isLoading />;\n\t}\n\n\tif (state.error) {\n\t\treturn <WidgetCard error={state.error} />;\n\t}\n\n\tif (!state.Component) {\n\t\treturn <WidgetCard error={new Error(\"Component not found\")} />;\n\t}\n\n\tconst Component = state.Component;\n\treturn <Component config={widgetConfig} span={span} />;\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * DashboardWidget - Renders a single widget based on its configuration.\n *\n * Resolves widgets from the admin store's widget registry (populated by\n * coreAdminModule and user extensions). Falls back to widgetRegistry prop\n * for overrides.\n */\nexport function DashboardWidget({\n\tconfig,\n\tbasePath = \"/admin\",\n\tnavigate,\n\twidgetRegistry,\n}: DashboardWidgetProps): React.ReactElement {\n\tconst admin = useAdminStore(selectAdmin);\n\tconst registeredWidgets = admin.getWidgets() as Record<string, any>;\n\n\tconst renderWidget = (): React.ReactElement => {\n\t\t// Handle custom widget type (inline component, not from registry)\n\t\tif (config.type === \"custom\") {\n\t\t\treturn (\n\t\t\t\t<CustomWidgetRenderer\n\t\t\t\t\tloader={config.component}\n\t\t\t\t\twidgetConfig={config.config || {}}\n\t\t\t\t\tspan={config.span}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\t// Check prop-based registry for overrides first\n\t\tif (widgetRegistry?.[config.type]) {\n\t\t\tconst CustomWidget = widgetRegistry[config.type];\n\t\t\treturn <CustomWidget config={config as any} span={config.span} />;\n\t\t}\n\n\t\t// Look up widget in the admin store registry (built-in + user-registered)\n\t\tconst widgetDef = registeredWidgets[config.type];\n\t\tif (widgetDef) {\n\t\t\tconst component = widgetDef.component ?? widgetDef.state?.component;\n\t\t\tif (component) {\n\t\t\t\treturn (\n\t\t\t\t\t<RegistryWidgetRenderer\n\t\t\t\t\t\tloader={component}\n\t\t\t\t\t\twidgetConfig={config}\n\t\t\t\t\t\tbasePath={basePath}\n\t\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn <UnknownWidget type={config.type} />;\n\t};\n\n\treturn (\n\t\t<WidgetErrorBoundary widgetType={config.type}>\n\t\t\t{renderWidget()}\n\t\t</WidgetErrorBoundary>\n\t);\n}\n\nexport default DashboardWidget;\n"],"mappings":"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"}

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

@@ -0,0 +1,159 @@
+import { cn } from "../../lib/utils.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { Skeleton } from "../../components/ui/skeleton.mjs";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card.mjs";
+import { Icon } from "@iconify/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/dashboard/widget-card.tsx
+/**
+* WidgetCard Component
+*
+* Standardized card wrapper for dashboard widgets with multiple variants.
+* Provides consistent styling, header actions, and loading/error states.
+*/
+const variantStyles = {
+	default: "",
+	compact: "py-3 gap-3",
+	featured: "border-primary/30 bg-gradient-to-br from-primary/5 to-transparent shadow-sm"
+};
+const variantContentStyles = {
+	default: "",
+	compact: "pt-0",
+	featured: ""
+};
+function WidgetCardLoading({ variant = "default" }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("h-full flex flex-col", variantStyles[variant]),
+		children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }), /* @__PURE__ */ jsx(CardContent, {
+			className: cn("flex-1", variantContentStyles[variant]),
+			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })
+		})]
+	});
+}
+function WidgetCardError({ error, variant = "default", onRetry }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("h-full flex flex-col border-destructive/20 bg-destructive/5", variantStyles[variant]),
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, {
+			className: "text-sm font-medium text-destructive",
+			children: "Error"
+		}), onRetry && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-xs",
+			onClick: onRetry,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:arrow-clockwise",
+				className: "h-3.5 w-3.5"
+			})
+		}) })] }), /* @__PURE__ */ jsx(CardContent, {
+			className: cn("flex-1", variantContentStyles[variant]),
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: error.message
+			})
+		})]
+	});
+}
+/**
+* WidgetCard - Standardized card wrapper for dashboard widgets
+*
+* @example
+* ```tsx
+* <WidgetCard
+*   title="Revenue"
+*   description="Monthly sales total"
+*   variant="featured"
+*   onRefresh={() => refetch()}
+* >
+*   <div className="text-2xl font-bold">$12,345</div>
+* </WidgetCard>
+* ```
+*/
+function WidgetCard({ title, description, icon, variant = "default", isLoading, isRefreshing, error, onRefresh, onExpand, actions, className, loadingSkeleton, children }) {
+	if (isLoading) {
+		if (loadingSkeleton) return /* @__PURE__ */ jsxs(Card, {
+			className: cn("h-full flex flex-col", variantStyles[variant], className),
+			children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }), /* @__PURE__ */ jsx(CardContent, {
+				className: cn("flex-1", variantContentStyles[variant]),
+				children: loadingSkeleton
+			})]
+		});
+		return /* @__PURE__ */ jsx(WidgetCardLoading, { variant });
+	}
+	if (error) return /* @__PURE__ */ jsx(WidgetCardError, {
+		error,
+		variant,
+		onRetry: onRefresh
+	});
+	const hasHeader = title || description || icon || onRefresh || onExpand || actions?.length;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("h-full flex flex-col", variantStyles[variant], className),
+		children: [hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [resolveIconElement(icon, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [title && /* @__PURE__ */ jsx(CardTitle, {
+					className: "text-sm font-medium truncate",
+					children: title
+				}), description && /* @__PURE__ */ jsx(CardDescription, {
+					className: "truncate",
+					children: description
+				})]
+			})]
+		}), (onRefresh || onExpand || actions?.length) && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [
+				actions && actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: actions[0].onClick,
+					title: actions[0].label,
+					children: resolveIconElement(actions[0].icon, { className: "h-3.5 w-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"
+					})
+				}) }), /* @__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]
+					}, action.id))
+				})] })] }),
+				onRefresh && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: onRefresh,
+					title: "Refresh",
+					disabled: isRefreshing,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:arrow-clockwise",
+						className: cn("h-3.5 w-3.5", isRefreshing && "animate-spin")
+					})
+				}),
+				onExpand && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: onExpand,
+					title: "Expand",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:arrows-out-simple",
+						className: "h-3.5 w-3.5"
+					})
+				})
+			]
+		}) })] }), /* @__PURE__ */ jsx(CardContent, {
+			className: cn("flex-1", variantContentStyles[variant], !hasHeader && "pt-0"),
+			children
+		})]
+	});
+}
+
+//#endregion
+export { WidgetCard };
+//# sourceMappingURL=widget-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widget-card.mjs","names":["variantStyles: Record<WidgetCardVariant, string>","variantContentStyles: Record<WidgetCardVariant, string>"],"sources":["../../../../src/client/views/dashboard/widget-card.tsx"],"sourcesContent":["/**\n * WidgetCard Component\n *\n * Standardized card wrapper for dashboard widgets with multiple variants.\n * Provides consistent styling, header actions, and loading/error states.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport type * as React from \"react\";\nimport type { WidgetAction, WidgetCardVariant } from \"../../builder\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { Button } from \"../../components/ui/button\";\nimport {\n\tCard,\n\tCardAction,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"../../components/ui/card\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\";\nimport { Skeleton } from \"../../components/ui/skeleton\";\nimport { cn } from \"../../lib/utils\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetCardProps {\n\t/** Widget title */\n\ttitle?: string;\n\t/** Widget description */\n\tdescription?: string;\n\t/** Widget icon */\n\ticon?: WidgetAction[\"icon\"];\n\t/** Card visual variant */\n\tvariant?: WidgetCardVariant;\n\t/** Loading state (initial load) */\n\tisLoading?: boolean;\n\t/** Refreshing state (background refetch) */\n\tisRefreshing?: boolean;\n\t/** Error state */\n\terror?: Error | null;\n\t/** Refresh handler */\n\tonRefresh?: () => void;\n\t/** Expand handler (for full screen view) */\n\tonExpand?: () => void;\n\t/** Header actions */\n\tactions?: WidgetAction[];\n\t/** Custom CSS class */\n\tclassName?: string;\n\t/** Custom loading skeleton */\n\tloadingSkeleton?: React.ReactNode;\n\t/** Children content (optional when loading/error) */\n\tchildren?: React.ReactNode;\n}\n\n// ============================================================================\n// Variant Styles\n// ============================================================================\n\nconst variantStyles: Record<WidgetCardVariant, string> = {\n\tdefault: \"\",\n\tcompact: \"py-3 gap-3\",\n\tfeatured:\n\t\t\"border-primary/30 bg-gradient-to-br from-primary/5 to-transparent shadow-sm\",\n};\n\nconst variantContentStyles: Record<WidgetCardVariant, string> = {\n\tdefault: \"\",\n\tcompact: \"pt-0\",\n\tfeatured: \"\",\n};\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\nfunction WidgetCardLoading({\n\tvariant = \"default\",\n}: {\n\tvariant?: WidgetCardVariant;\n}) {\n\treturn (\n\t\t<Card className={cn(\"h-full flex flex-col\", variantStyles[variant])}>\n\t\t\t<CardHeader>\n\t\t\t\t<Skeleton className=\"h-4 w-24\" />\n\t\t\t</CardHeader>\n\t\t\t<CardContent className={cn(\"flex-1\", variantContentStyles[variant])}>\n\t\t\t\t<Skeleton className=\"h-20 w-full\" />\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n\nfunction WidgetCardError({\n\terror,\n\tvariant = \"default\",\n\tonRetry,\n}: {\n\terror: Error;\n\tvariant?: WidgetCardVariant;\n\tonRetry?: () => void;\n}) {\n\treturn (\n\t\t<Card\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full flex flex-col border-destructive/20 bg-destructive/5\",\n\t\t\t\tvariantStyles[variant],\n\t\t\t)}\n\t\t>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle className=\"text-sm font-medium text-destructive\">\n\t\t\t\t\tError\n\t\t\t\t</CardTitle>\n\t\t\t\t{onRetry && (\n\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-xs\" onClick={onRetry}>\n\t\t\t\t\t\t\t<Icon icon=\"ph:arrow-clockwise\" className=\"h-3.5 w-3.5\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</CardAction>\n\t\t\t\t)}\n\t\t\t</CardHeader>\n\t\t\t<CardContent className={cn(\"flex-1\", variantContentStyles[variant])}>\n\t\t\t\t<p className=\"text-xs text-muted-foreground\">{error.message}</p>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * WidgetCard - Standardized card wrapper for dashboard widgets\n *\n * @example\n * ```tsx\n * <WidgetCard\n *   title=\"Revenue\"\n *   description=\"Monthly sales total\"\n *   variant=\"featured\"\n *   onRefresh={() => refetch()}\n * >\n *   <div className=\"text-2xl font-bold\">$12,345</div>\n * </WidgetCard>\n * ```\n */\nexport function WidgetCard({\n\ttitle,\n\tdescription,\n\ticon,\n\tvariant = \"default\",\n\tisLoading,\n\tisRefreshing,\n\terror,\n\tonRefresh,\n\tonExpand,\n\tactions,\n\tclassName,\n\tloadingSkeleton,\n\tchildren,\n}: WidgetCardProps): React.ReactElement {\n\t// Loading state\n\tif (isLoading) {\n\t\tif (loadingSkeleton) {\n\t\t\treturn (\n\t\t\t\t<Card\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"h-full flex flex-col\",\n\t\t\t\t\t\tvariantStyles[variant],\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t<Skeleton className=\"h-4 w-24\" />\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className={cn(\"flex-1\", variantContentStyles[variant])}>\n\t\t\t\t\t\t{loadingSkeleton}\n\t\t\t\t\t</CardContent>\n\t\t\t\t</Card>\n\t\t\t);\n\t\t}\n\t\treturn <WidgetCardLoading variant={variant} />;\n\t}\n\n\t// Error state\n\tif (error) {\n\t\treturn (\n\t\t\t<WidgetCardError error={error} variant={variant} onRetry={onRefresh} />\n\t\t);\n\t}\n\n\tconst hasHeader =\n\t\ttitle || description || icon || onRefresh || onExpand || actions?.length;\n\n\treturn (\n\t\t<Card\n\t\t\tclassName={cn(\"h-full flex flex-col\", variantStyles[variant], className)}\n\t\t>\n\t\t\t{hasHeader && (\n\t\t\t\t<CardHeader>\n\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t{resolveIconElement(icon, {\n\t\t\t\t\t\t\tclassName: \"h-4 w-4 text-muted-foreground\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t<div className=\"flex-1 min-w-0\">\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<CardTitle className=\"text-sm font-medium truncate\">\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t\t<CardDescription className=\"truncate\">\n\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{(onRefresh || onExpand || actions?.length) && (\n\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t{/* Show first action directly, rest in dropdown on small widgets */}\n\t\t\t\t\t\t\t\t{actions && actions.length > 0 && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* First action always visible */}\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tkey={actions[0].id}\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={actions[0].onClick}\n\t\t\t\t\t\t\t\t\t\t\ttitle={actions[0].label}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{resolveIconElement(actions[0].icon, {\n\t\t\t\t\t\t\t\t\t\t\t\tclassName: \"h-3.5 w-3.5\",\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t{/* Additional actions in dropdown */}\n\t\t\t\t\t\t\t\t\t\t{actions.length > 1 && (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuTrigger\n\t\t\t\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"ph:dots-three-vertical\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-3.5 w-3.5\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuContent align=\"end\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{actions.slice(1).map((action) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={action.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={action.onClick}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{resolveIconElement(action.icon, {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: \"h-3.5 w-3.5 mr-2\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{action.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{onRefresh && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\t\t\tonClick={onRefresh}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Refresh\"\n\t\t\t\t\t\t\t\t\t\tdisabled={isRefreshing}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon=\"ph:arrow-clockwise\"\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"h-3.5 w-3.5\",\n\t\t\t\t\t\t\t\t\t\t\t\tisRefreshing && \"animate-spin\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{onExpand && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\t\t\tonClick={onExpand}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Expand\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:arrows-out-simple\" className=\"h-3.5 w-3.5\" />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t)}\n\t\t\t\t</CardHeader>\n\t\t\t)}\n\t\t\t<CardContent\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex-1\",\n\t\t\t\t\tvariantContentStyles[variant],\n\t\t\t\t\t!hasHeader && \"pt-0\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n\nexport default WidgetCard;\n"],"mappings":"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"}

package/dist/client/views/globals/global-form-view.d.mts

@@ -0,0 +1,74 @@
+import { ComponentRegistry, FormViewConfig } from "../../builder/types/field-types.mjs";
+import { GlobalBuilderState } from "../../builder/types/global-types.mjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
+
+//#region src/client/views/globals/global-form-view.d.ts
+
+/**
+ * Props for GlobalFormView component
+ */
+interface GlobalFormViewProps {
+  /**
+   * Global name
+   */
+  global: string;
+  /**
+   * Global configuration from admin builder
+   * Accepts GlobalBuilderState or any compatible config object
+   */
+  config?: Partial<GlobalBuilderState> | Record<string, any>;
+  /**
+   * View-specific configuration from registry/schema
+   */
+  viewConfig?: FormViewConfig;
+  /**
+   * Navigate function for routing
+   */
+  navigate: (path: string) => void;
+  /**
+   * Base path for admin routes (e.g., "/admin")
+   */
+  basePath?: string;
+  /**
+   * Component registry for custom field types
+   */
+  registry?: ComponentRegistry;
+  /**
+   * All globals config (for potential cross-references)
+   */
+  allGlobalsConfig?: Record<string, Partial<GlobalBuilderState> | Record<string, any>>;
+  /**
+   * Show metadata (updated dates)
+   * @default true
+   */
+  showMeta?: boolean;
+  /**
+   * Custom header actions (in addition to default Save button)
+   */
+  headerActions?: React$1.ReactNode;
+  /**
+   * Callback on successful save
+   */
+  onSuccess?: (data: any) => void;
+  /**
+   * Callback on error
+   */
+  onError?: (error: Error) => void;
+}
+/**
+ * GlobalFormView - Default form-based edit view for globals
+ */
+declare function GlobalFormView({
+  global: globalName,
+  config,
+  viewConfig,
+  registry,
+  showMeta,
+  headerActions,
+  onSuccess,
+  onError
+}: GlobalFormViewProps): react_jsx_runtime34.JSX.Element;
+//#endregion
+export { GlobalFormView };
+//# sourceMappingURL=global-form-view.d.mts.map

package/dist/client/views/globals/global-form-view.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-form-view.d.mts","names":[],"sources":["../../../../src/client/views/globals/global-form-view.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AA6FU,UArCO,mBAAA,CAqCP;EAAR;;;EAYe,MAAM,EAAA,MAAA;EAUJ;;AAClB;;EAWA,MAAA,CAAA,EA7DS,OA6DT,CA7DiB,kBA6DjB,CAAA,GA7DuC,MA6DvC,CAAA,MAAA,EAAA,GAAA,CAAA;EACA;;;EAGA,UAAA,CAAA,EA5Da,cA4Db;EACA;;;EAEqB,QAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAA;;;;;;;aAhDV;;;;qBAKQ,eAElB,QAAQ,sBAAsB;;;;;;;;;kBAYf,OAAA,CAAM;;;;;;;;oBAUJ;;;;;iBAUK,cAAA;UACf;;;;;;;;GAQN,sBAAmB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,181 @@
+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 { useGlobalFields } from "../../hooks/use-global-fields.mjs";
+import { AutoFormFields } from "../collection/auto-form-fields.mjs";
+import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
+import { useGlobal, useGlobalUpdate } from "../../hooks/use-global.mjs";
+import { useGlobalServerValidation } from "../../hooks/use-server-validation.mjs";
+import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
+import { Icon } from "@iconify/react";
+import { QuestpieClientError } from "questpie/client";
+import * as React$1 from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/globals/global-form-view.tsx
+/**
+* Global Form View - Default edit view component for globals
+*
+* Mirrors FormView for collections but adapted for singleton globals.
+* Renders global settings form with sections, tabs, sidebar, validation.
+*/
+/**
+* Extract reactive configs from global schema fields.
+* Used to determine which fields have server-side reactive behaviors.
+*/
+function extractReactiveConfigs(schema) {
+	if (!schema?.fields) return {};
+	const configs = {};
+	for (const [fieldName, fieldDef] of Object.entries(schema.fields)) if (fieldDef.reactive) configs[fieldName] = fieldDef.reactive;
+	return configs;
+}
+/**
+* GlobalFormView - Default form-based edit view for globals
+*/
+function GlobalFormView({ global: globalName, config, viewConfig, registry, showMeta = true, headerActions, onSuccess, onError }) {
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const { data: globalData, isLoading: dataLoading } = useGlobal(globalName);
+	const { fields: schemaFields } = useGlobalFields(globalName);
+	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
+	const localeOptions = useSafeContentLocales()?.locales ?? [];
+	const updateMutation = useGlobalUpdate(globalName, {
+		onSuccess: (data) => {
+			toast.success(t("toast.saveSuccess"));
+			onSuccess?.(data);
+		},
+		onError: (error) => {
+			onError?.(error);
+		}
+	});
+	const { resolver } = useGlobalServerValidation(globalName);
+	const form = useForm({
+		defaultValues: globalData ?? {},
+		resolver
+	});
+	React$1.useEffect(() => {
+		if (globalData) form.reset(globalData);
+	}, [form, globalData]);
+	const reactiveConfigs = React$1.useMemo(() => extractReactiveConfigs(schemaFields), [schemaFields]);
+	useReactiveFields({
+		collection: globalName,
+		mode: "global",
+		reactiveConfigs,
+		enabled: !dataLoading && Object.keys(reactiveConfigs).length > 0,
+		debounce: 300
+	});
+	const resolvedConfig = React$1.useMemo(() => {
+		if (!viewConfig) return config;
+		return {
+			...config ?? {},
+			form: viewConfig
+		};
+	}, [config, viewConfig]);
+	const onSubmit = React$1.useCallback(async (data) => {
+		try {
+			const result = await updateMutation.mutateAsync({ data });
+			if (result) form.reset(result);
+		} catch (error) {
+			if (error instanceof QuestpieClientError && error.fieldErrors && error.fieldErrors.length > 0) {
+				for (const fieldError of error.fieldErrors) form.setError(fieldError.path, {
+					type: "server",
+					message: fieldError.message
+				});
+				toast.error(t("toast.validationFailed"), { description: t("toast.validationDescription") });
+				return;
+			}
+			const message = error instanceof Error ? error.message : t("error.unknown");
+			toast.error(t("toast.settingsSaveFailed") || "Failed to save settings", { description: message });
+		}
+	}, [
+		updateMutation,
+		form,
+		t
+	]);
+	React$1.useEffect(() => {
+		const handleKeyDown = (e) => {
+			if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+				e.preventDefault();
+				form.handleSubmit(onSubmit)();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [form, onSubmit]);
+	const isSubmitting = updateMutation.isPending || form.formState.isSubmitting;
+	const formatDate = (date) => {
+		return new Date(date).toLocaleDateString(void 0, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	};
+	if (dataLoading) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-64 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-6 animate-spin"
+		})
+	});
+	const globalLabel = resolveText(resolvedConfig?.label ?? schemaFields?._globalLabel, globalName);
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: form.handleSubmit(onSubmit),
+			className: "w-full space-y-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("h1", {
+							className: "text-2xl md:text-3xl font-extrabold tracking-tight",
+							children: globalLabel
+						}), localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
+							locales: localeOptions,
+							value: contentLocale,
+							onChange: setContentLocale
+						})]
+					}), showMeta && globalData?.updatedAt && /* @__PURE__ */ jsxs("p", {
+						className: "mt-1 text-xs text-muted-foreground",
+						children: [
+							t("form.lastUpdated"),
+							": ",
+							formatDate(globalData.updatedAt)
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 shrink-0",
+					children: [headerActions, /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						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(AutoFormFields, {
+				collection: globalName,
+				mode: "global",
+				config: resolvedConfig,
+				registry
+			})]
+		})
+	});
+}
+
+//#endregion
+export { GlobalFormView as default };
+//# sourceMappingURL=global-form-view.mjs.map