@burdenoff/fluidgrids-fe-sdk 2026.1111.10 → 2026.1111.12

package/dist/{TemplatesPage-CXMJntN7.js → TemplatesPage-ZK6cMWur.js}

@@ -1,382 +1,27 @@
 "use client";
-import { Ji as getFluidGridsConfig, Vi as describeOperationError, Wi as throwIfResultError, ki as getFluidGridsClient } from "./node-endpoint-configs-DVo9nUOe.js";
-import { Dn as isQuotaExhaustedFailure, E as MyWorkflowTemplateSubmissionsDocument, O as SubmitWorkflowTemplateDocument, Sn as BILLING_PLANS_PATH, T as InstallWorkflowNodeDocument, _n as emitWorkflowCreated, hn as emitTemplateUsed, j as WithdrawWorkflowTemplateSubmissionDocument, ln as useFluidGridsAnalytics, t as FluidGridsContext } from "./FluidGridsProvider-BFdGQ1g_.js";
+import { Bi as describeOperationError, Ui as throwIfResultError } from "./node-endpoint-configs-DHFGA5MQ.js";
+import { Dn as isQuotaExhaustedFailure, E as MyWorkflowTemplateSubmissionsDocument, O as SubmitWorkflowTemplateDocument, Sn as BILLING_PLANS_PATH, hn as emitTemplateUsed, j as WithdrawWorkflowTemplateSubmissionDocument, ln as useFluidGridsAnalytics } from "./FluidGridsProvider-CDZjKmfD.js";
 import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
-import { F as useWorkflowTemplates, I as useInstallNode, J as useGlobalStoreClient, b as TemplateCard, t as FlowBuilderPage } from "./flow-builder-vz253WZe.js";
-import { h as useWorkflowDefinitions, l as useLazyWorkflowDefinition, s as useDuplicateWorkflow } from "./useWorkflows-BtZBdTmp.js";
-import { k as QuotaExhaustedDialog } from "./WorkflowShareDialog-FTeBgyb-.js";
+import { I as useImportWorkflowTemplate, L as useWorkflowTemplates, N as useTemplateImportFlow, Y as useGlobalStoreClient, t as FlowBuilderPage, v as TemplateCard } from "./flow-builder-CukxgO65.js";
+import { h as useWorkflowDefinitions, l as useLazyWorkflowDefinition, s as useDuplicateWorkflow } from "./useWorkflows-Bwpvfdgv.js";
+import { k as QuotaExhaustedDialog } from "./WorkflowShareDialog-ByTSWwwR.js";
 import { YF as WorkflowStatus, hI as FLUIDGRIDS_PERMISSIONS, vI as SdkPermissionButton } from "./graphql-types-XcDLtFwU.js";
 import { n as useFluidGridsPageControls } from "./pageControlsBridge-0pX9s-3k.js";
 import { r as templatesControls } from "./pageControlSpecs-DZJ9K37m.js";
 import { t as FluidGridsDocsLink } from "./FluidGridsDocsLink-JxkBpOeb.js";
-import { n as deepClone, t as applyTemplateInputs } from "./template-input-applicator-C0p6hE4K.js";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { useQuery } from "@apollo/client/react";
-import { gql } from "@apollo/client/core";
 import { Icon } from "@iconify/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { toast } from "sonner";
 import { Badge, Card, CardHeader, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton, Textarea } from "@burdenoff/fe-libs/ui";
 import { ErrorBoundary } from "@burdenoff/fe-libs/shared/components";
-import { useEventBus } from "@burdenoff/fe-libs/shared/events";
 import { Button as Button$1 } from "@burdenoff/fe-libs/button";
 import { v4 } from "uuid";
 import { ThemeProvider } from "@burdenoff/fe-libs/shared/providers/shell";
 import "@xyflow/react/dist/style.css";
 
-// src/hooks/store/useTemplateDetail.ts
-const GET_WORKFLOW_TEMPLATE_DETAIL = gql`
-  query GetWorkflowTemplateDetail($id: ID!) {
-    product(id: $id) {
-      id
-      name
-      slug
-      type
-      description
-      longDescription
-      icon
-      screenshots
-      videoUrls
-      rating
-      reviewCount
-      downloads
-      viewCount
-      price
-      pricingModel
-      currency
-      featured
-      content
-      manifest
-      manifestVersion
-      authorName
-      license
-      category
-      tags
-      compatibleProducts
-      publisher {
-        id
-        name
-        email
-        websiteUrl
-        logoUrl
-        isVerified
-      }
-      createdAt
-      updatedAt
-      publishedAt
-    }
-  }
-`;
-/**
-* Hook to lazily fetch full details of a workflow template from the store.
-*
-* Unlike `useWorkflowTemplates` which fetches browse-level metadata,
-* this hook fetches the full product detail including the `content` field
-* which contains the workflow definitionJson.
-*
-* Uses a manual query (not useQuery) to only fetch when explicitly requested.
-*/
-function useTemplateDetail() {
-	const client = useGlobalStoreClient();
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState(null);
-	const context = useContext(FluidGridsContext);
-	const workspaceId = context?.workspaceId ?? getFluidGridsConfig().workspaceId;
-	const organizationId = context?.organizationId;
-	const contextHeaders = useMemo(() => {
-		const headers = {};
-		if (organizationId) headers["x-organization-id"] = organizationId;
-		if (workspaceId) headers["x-workspace-id"] = workspaceId;
-		return headers;
-	}, [organizationId, workspaceId]);
-	return {
-		fetchTemplateDetail: useCallback(async (templateId) => {
-			setLoading(true);
-			setError(null);
-			try {
-				const result = await client.query({
-					query: GET_WORKFLOW_TEMPLATE_DETAIL,
-					variables: { id: templateId },
-					fetchPolicy: "network-only",
-					context: Object.keys(contextHeaders).length > 0 ? { headers: contextHeaders } : void 0
-				});
-				if (result.error) throw result.error;
-				return result.data?.product ?? null;
-			} catch (err) {
-				const fetchError = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to fetch template detail");
-				setError(fetchError);
-				console.error("[useTemplateDetail] Error:", err);
-				return null;
-			} finally {
-				setLoading(false);
-			}
-		}, [client, contextHeaders]),
-		loading,
-		error
-	};
-}
-
-// src/hooks/store/useImportWorkflowTemplate.ts
-const IMPORT_WORKFLOW_TEMPLATE = gql`
-  mutation ImportWorkflowTemplate($input: ImportWorkflowTemplateInput!) {
-    importWorkflowTemplate(input: $input) {
-      success
-      message
-      workflow {
-        id
-        workflowKey
-        version
-        name
-        description
-        status
-        definitionJson
-        tags
-        category
-        icon
-        createdAt
-      }
-    }
-  }
-`;
-const RECORD_DOWNLOAD = gql`
-  mutation RecordDownload($productId: String!) {
-    recordDownload(productId: $productId) {
-      id
-      downloadedAt
-    }
-  }
-`;
-const NODE_ENDPOINT_CONFIGS = gql`
-  query NodeEndpointConfigsForTemplateCheck {
-    nodeEndpointConfigs(pagination: { limit: 500, offset: 0 }) {
-      items {
-        nodeType
-        nodeVersion
-        publishType
-        status
-      }
-      total
-    }
-  }
-`;
-const WORKFLOW_DEFINITIONS = gql`
-  query WorkflowDefinitions($input: ListWorkflowDefinitionsInput!) {
-    workflowDefinitions(input: $input) {
-      items {
-        id
-        workflowKey
-        name
-        version
-        status
-      }
-      total
-      hasMore
-    }
-  }
-`;
-/**
-* Hook to orchestrate importing a workflow template from the store.
-*
-* Frontend-orchestrated flow:
-* 1. Fetch full template detail from global store (lazy load content)
-* 2. Check which nodes are missing from the workspace
-* 3. Auto-install free/builtin missing nodes (with user confirmation)
-* 4. Apply user-provided template inputs to definitionJson
-* 5. Create workflow via importWorkflowTemplate mutation (workspace gateway)
-* 6. Record download in store (global gateway)
-*/
-function useImportWorkflowTemplate() {
-	const [importing, setImporting] = useState(false);
-	const [error, setError] = useState(null);
-	const { fetchTemplateDetail, loading: fetchingDetail } = useTemplateDetail();
-	const { installNode } = useInstallNode();
-	const globalClient = useGlobalStoreClient();
-	const context = useContext(FluidGridsContext);
-	const workspaceId = context?.workspaceId ?? getFluidGridsConfig().workspaceId;
-	const bus = useEventBus();
-	const getTemplateDetail = useCallback(async (templateId) => {
-		return fetchTemplateDetail(templateId);
-	}, [fetchTemplateDetail]);
-	/**
-	* Parse the template content from a StoreProduct.
-	* Returns null if the product doesn't have valid workflow template content.
-	*/
-	const parseTemplateContent = useCallback((template) => {
-		try {
-			const content = template.content;
-			if (!content?.definitionJson) {
-				console.warn("[useImportWorkflowTemplate] Template has no definitionJson in content:", template.id);
-				return null;
-			}
-			return content;
-		} catch {
-			console.error("[useImportWorkflowTemplate] Failed to parse template content:", template.id);
-			return null;
-		}
-	}, []);
-	return {
-		/** Fetch full template content from store (lazy load) */
-		getTemplateDetail,
-		/** Parse WorkflowTemplateContent from a StoreProduct */
-		parseTemplateContent,
-		/** Check which template nodes are missing from workspace */
-		checkMissingNodes: useCallback(async (requiredNodeTypes) => {
-			if (!requiredNodeTypes || requiredNodeTypes.length === 0) return {
-				installed: [],
-				missing: [],
-				missingPaid: [],
-				canImport: true
-			};
-			try {
-				const data = (await getFluidGridsClient().query({
-					query: NODE_ENDPOINT_CONFIGS,
-					fetchPolicy: "network-only"
-				})).data;
-				const installedNodeTypes = new Set((data?.nodeEndpointConfigs?.items || []).map((n) => n.nodeType));
-				const installed = [];
-				const missing = [];
-				const missingPaid = [];
-				for (const node of requiredNodeTypes) if (installedNodeTypes.has(node.nodeType) || node.publishType === "BUILTIN") installed.push(node);
-				else if (node.publishType === "STORE" && node.storeProductId) missingPaid.push(node);
-				else missing.push(node);
-				return {
-					installed,
-					missing,
-					missingPaid,
-					canImport: missingPaid.length === 0
-				};
-			} catch (err) {
-				console.error("[useImportWorkflowTemplate] Failed to check node dependencies:", err);
-				return {
-					installed: requiredNodeTypes,
-					missing: [],
-					missingPaid: [],
-					canImport: true
-				};
-			}
-		}, []),
-		/** Install missing free nodes */
-		installMissingNodes: useCallback(async (nodes) => {
-			const installed = [];
-			for (const node of nodes) try {
-				if ((await installNode(node)).success) installed.push(node.name);
-			} catch (err) {
-				console.warn(`[useImportWorkflowTemplate] Failed to install node: ${node.name}`, err);
-			}
-			return installed;
-		}, [installNode]),
-		/** Full import: apply inputs -> create workflow -> record analytics */
-		importTemplate: useCallback(async (template, options) => {
-			setImporting(true);
-			setError(null);
-			try {
-				const content = parseTemplateContent(template);
-				if (!content) throw new Error("Template does not contain valid workflow definition data");
-				let definitionJson = deepClone(content.definitionJson);
-				if (options?.templateInputs) definitionJson = applyTemplateInputs(definitionJson, options.templateInputs);
-				const config = getFluidGridsConfig();
-				const importContext = {
-					...options?.context || {},
-					...config.productId ? { productId: config.productId } : {},
-					...config.productName ? { productName: config.productName } : {}
-				};
-				const client = getFluidGridsClient();
-				const importResult = throwIfResultError(await client.mutate({
-					mutation: IMPORT_WORKFLOW_TEMPLATE,
-					variables: { input: {
-						definitionJson,
-						name: options?.name || content.defaultWorkflowName || template.name,
-						description: options?.description || template.description,
-						sourceTemplateId: template.id,
-						sourceTemplateName: template.name,
-						tags: content.defaultTags || template.tags || [],
-						category: content.defaultCategory || template.category || void 0,
-						icon: template.icon || void 0,
-						projectId: options?.projectId,
-						context: importContext
-					} },
-					refetchQueries: [WORKFLOW_DEFINITIONS]
-				})).data?.importWorkflowTemplate;
-				if (!importResult?.success || !importResult.workflow) throw new Error(importResult?.message || "Failed to create workflow from template");
-				try {
-					throwIfResultError(await globalClient.mutate({
-						mutation: RECORD_DOWNLOAD,
-						variables: { productId: template.id }
-					}));
-				} catch {
-					console.warn("[useImportWorkflowTemplate] Failed to record store download");
-				}
-				try {
-					throwIfResultError(await globalClient.mutate({
-						mutation: InstallWorkflowNodeDocument,
-						variables: { input: {
-							productId: template.id,
-							workspaceId,
-							organizationId: context?.tenantId ?? getFluidGridsConfig().tenantId,
-							version: template.manifestVersion || "1.0.0",
-							manifest: template.manifest,
-							metadata: {
-								type: "WORKFLOW",
-								sourceTemplateId: template.id,
-								sourceTemplateName: template.name,
-								importedWorkflowKey: importResult.workflow.workflowKey,
-								importedWorkflowVersion: importResult.workflow.version
-							}
-						} }
-					}));
-				} catch {
-					console.warn("[useImportWorkflowTemplate] Failed to record app installation");
-				}
-				emitWorkflowCreated(bus, {
-					workspaceId,
-					workflowId: importResult.workflow.id,
-					source: "template",
-					definition: definitionJson
-				});
-				emitTemplateUsed(bus, {
-					workspaceId,
-					templateId: template.id,
-					category: content.defaultCategory || template.category
-				});
-				return {
-					success: true,
-					workflow: importResult.workflow,
-					message: importResult.message || "Template imported successfully",
-					installedNodes: [],
-					requiredCredentials: content.requiredCredentialTypes || []
-				};
-			} catch (err) {
-				const importError = err instanceof Error ? err : /* @__PURE__ */ new Error("Template import failed");
-				setError(importError);
-				console.error("[useImportWorkflowTemplate] Import failed:", err);
-				return {
-					success: false,
-					workflow: null,
-					message: importError.message,
-					installedNodes: [],
-					requiredCredentials: [],
-					error: importError
-				};
-			} finally {
-				setImporting(false);
-			}
-		}, [
-			parseTemplateContent,
-			globalClient,
-			workspaceId,
-			context?.tenantId,
-			bus
-		]),
-		/** Whether we're fetching template detail */
-		fetchingDetail,
-		/** Whether we're importing */
-		importing,
-		/** Last error */
-		error
-	};
-}
-
 // src/hooks/store/usePublishToStore.ts
 /** Categories a community template can be filed under (matches the store). */
 const TEMPLATE_STORE_CATEGORIES = [
@@ -543,12 +188,11 @@ function TemplatePreview() {
 	const { productId } = useParams();
 	const navigate = useNavigate();
 	const tr = useTr();
-	const { getTemplateDetail, parseTemplateContent, importTemplate } = useImportWorkflowTemplate();
+	const { getTemplateDetail, parseTemplateContent } = useImportWorkflowTemplate();
 	const [workflow, setWorkflow] = useState(null);
 	const [template, setTemplate] = useState(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState(null);
-	const [importing, setImporting] = useState(false);
 	const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);
 	const workflowsBase = window.location.pathname.replace(/\/templates(\/.*)?$/, "");
 	useEffect(() => {
@@ -612,122 +256,115 @@ function TemplatePreview() {
 		parseTemplateContent,
 		tr
 	]);
-	const handleUse = async () => {
-		if (!template) return;
-		setImporting(true);
-		toast.loading(tr("fluidgrids.pages.templatePreview.importingToast", "Importing template..."), { id: "tpl-preview-import" });
-		try {
-			const result = await importTemplate(template);
-			toast.dismiss("tpl-preview-import");
-			if (result.success && result.workflow) {
-				toast.success(tr("fluidgrids.pages.templatePreview.importSuccessToast", "Workflow created from template!"), { description: tr("fluidgrids.pages.templatePreview.importSuccessDescription", "\"{{name}}\" is ready to edit", { name: result.workflow.name }) });
-				navigate(`${workflowsBase}/workflow/${result.workflow.workflowKey}/${result.workflow.version}`);
-			} else if (isQuotaExhaustedFailure(result.error?.cause ?? result.error)) setShowQuotaExhausted(true);
-			else toast.error(tr("fluidgrids.pages.templatePreview.importErrorToast", "Failed to use template"), { description: result.message });
-		} catch (e) {
-			toast.dismiss("tpl-preview-import");
-			toast.error(tr("fluidgrids.pages.templatePreview.genericErrorToast", "Something went wrong"), { description: e instanceof Error ? e.message : tr("fluidgrids.pages.templatePreview.importErrorDescription", "Failed to import template") });
-		} finally {
-			setImporting(false);
-		}
+	const templateImport = useTemplateImportFlow({
+		onImported: (created) => navigate(`${workflowsBase}/workflow/${created.workflowKey}/${created.version}`),
+		onQuotaExhausted: () => setShowQuotaExhausted(true)
+	});
+	const importing = templateImport.busy;
+	const handleUse = () => {
+		if (template) templateImport.start(template);
 	};
 	const backToTemplates = () => navigate(`${workflowsBase}/templates`);
-	return /* @__PURE__ */ jsxs(ThemeProvider$1, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "flex h-full w-full flex-col overflow-hidden",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-card-foreground/10 bg-gradient-to-r from-primary/40 to-transparent px-3",
+	return /* @__PURE__ */ jsxs(ThemeProvider$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex h-full w-full flex-col overflow-hidden",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-2",
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: backToTemplates,
-					title: tr("fluidgrids.pages.templatePreview.backTooltip", "Back to templates"),
-					className: "flex size-9 shrink-0 items-center justify-center rounded-md text-card-foreground transition-colors hover:bg-card-foreground/10",
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: "ion:arrow-back-outline",
-						className: "size-5"
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "min-w-0",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate text-sm font-semibold text-card-foreground",
-							children: workflow?.name ?? template?.name ?? tr("fluidgrids.pages.templatePreview.fallbackHeaderTitle", "Template preview")
-						}), /* @__PURE__ */ jsx("span", {
-							className: "shrink-0 rounded-full bg-card-foreground/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-							children: tr("fluidgrids.pages.templatePreview.readOnlyBadge", "Preview · read-only")
-						})]
-					}), template?.description ? /* @__PURE__ */ jsx("span", {
-						className: "block truncate text-xs text-muted-foreground",
-						children: template.description
-					}) : null]
-				})]
-			}), /* @__PURE__ */ jsx(SdkPermissionButton, {
-				permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_CREATE,
-				deniedTooltip: tr("fluidgrids.templates.useDeniedTooltip", "You don't have permission to create workflows from templates"),
-				children: /* @__PURE__ */ jsxs(Button$1, {
-					onClick: handleUse,
-					disabled: importing || !template,
-					className: "shrink-0 gap-2",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						icon: importing ? "svg-spinners:ring-resize" : "mdi:plus",
-						className: "size-4"
-					}), tr("fluidgrids.pages.templatePreview.useThisTemplate", "Use this template")]
-				})
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "relative min-h-0 w-full flex-1",
-			children: /* @__PURE__ */ jsx(ErrorBoundary, {
-				fallback: () => /* @__PURE__ */ jsxs("div", {
-					className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground",
-						children: tr("fluidgrids.pages.templatePreview.renderErrorMessage", "Something went wrong rendering this template preview.")
-					}), /* @__PURE__ */ jsx(Button$1, {
-						variant: "outline",
+				className: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-card-foreground/10 bg-gradient-to-r from-primary/40 to-transparent px-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
 						onClick: backToTemplates,
-						children: tr("fluidgrids.pages.templatePreview.backToTemplates", "Back to templates")
+						title: tr("fluidgrids.pages.templatePreview.backTooltip", "Back to templates"),
+						className: "flex size-9 shrink-0 items-center justify-center rounded-md text-card-foreground transition-colors hover:bg-card-foreground/10",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ion:arrow-back-outline",
+							className: "size-5"
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-sm font-semibold text-card-foreground",
+								children: workflow?.name ?? template?.name ?? tr("fluidgrids.pages.templatePreview.fallbackHeaderTitle", "Template preview")
+							}), /* @__PURE__ */ jsx("span", {
+								className: "shrink-0 rounded-full bg-card-foreground/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+								children: tr("fluidgrids.pages.templatePreview.readOnlyBadge", "Preview · read-only")
+							})]
+						}), template?.description ? /* @__PURE__ */ jsx("span", {
+							className: "block truncate text-xs text-muted-foreground",
+							children: template.description
+						}) : null]
 					})]
-				}),
-				children: loading ? /* @__PURE__ */ jsxs("div", {
-					className: "flex h-full items-center justify-center gap-2 text-sm text-muted-foreground",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						icon: "svg-spinners:ring-resize",
-						className: "size-4"
-					}), tr("fluidgrids.pages.templatePreview.loadingPreview", "Loading preview…")]
-				}) : error ? /* @__PURE__ */ jsxs("div", {
-					className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center",
-					children: [
-						/* @__PURE__ */ jsx(Icon, {
-							icon: "mdi:alert-circle-outline",
-							className: "size-8 text-muted-foreground"
-						}),
-						/* @__PURE__ */ jsx("p", {
+				}), /* @__PURE__ */ jsx(SdkPermissionButton, {
+					permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_CREATE,
+					deniedTooltip: tr("fluidgrids.templates.useDeniedTooltip", "You don't have permission to create workflows from templates"),
+					children: /* @__PURE__ */ jsxs(Button$1, {
+						onClick: handleUse,
+						disabled: importing || !template,
+						className: "shrink-0 gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: importing ? "svg-spinners:ring-resize" : "mdi:plus",
+							className: "size-4"
+						}), tr("fluidgrids.pages.templatePreview.useThisTemplate", "Use this template")]
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "relative min-h-0 w-full flex-1",
+				children: /* @__PURE__ */ jsx(ErrorBoundary, {
+					fallback: () => /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center",
+						children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm text-muted-foreground",
-							children: error
-						}),
-						/* @__PURE__ */ jsx(Button$1, {
+							children: tr("fluidgrids.pages.templatePreview.renderErrorMessage", "Something went wrong rendering this template preview.")
+						}), /* @__PURE__ */ jsx(Button$1, {
 							variant: "outline",
 							onClick: backToTemplates,
 							children: tr("fluidgrids.pages.templatePreview.backToTemplates", "Back to templates")
-						})
-					]
-				}) : workflow ? /* @__PURE__ */ jsx(FlowBuilderPage, {
-					workflow,
-					readOnly: true
-				}) : null
-			})
-		})]
-	}), /* @__PURE__ */ jsx(QuotaExhaustedDialog, {
-		surface: "template-import",
-		open: showQuotaExhausted,
-		onOpenChange: setShowQuotaExhausted,
-		onUpgrade: () => {
-			setShowQuotaExhausted(false);
-			navigate(BILLING_PLANS_PATH);
-		}
-	})] });
+						})]
+					}),
+					children: loading ? /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full items-center justify-center gap-2 text-sm text-muted-foreground",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "svg-spinners:ring-resize",
+							className: "size-4"
+						}), tr("fluidgrids.pages.templatePreview.loadingPreview", "Loading preview…")]
+					}) : error ? /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								icon: "mdi:alert-circle-outline",
+								className: "size-8 text-muted-foreground"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-sm text-muted-foreground",
+								children: error
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								variant: "outline",
+								onClick: backToTemplates,
+								children: tr("fluidgrids.pages.templatePreview.backToTemplates", "Back to templates")
+							})
+						]
+					}) : workflow ? /* @__PURE__ */ jsx(FlowBuilderPage, {
+						workflow,
+						readOnly: true
+					}) : null
+				})
+			})]
+		}),
+		templateImport.dialog,
+		/* @__PURE__ */ jsx(QuotaExhaustedDialog, {
+			surface: "template-import",
+			open: showQuotaExhausted,
+			onOpenChange: setShowQuotaExhausted,
+			onUpgrade: () => {
+				setShowQuotaExhausted(false);
+				navigate(BILLING_PLANS_PATH);
+			}
+		})
+	] });
 }
 
 // src/modules/templates/utils/template-categories.ts
@@ -1544,7 +1181,6 @@ function TemplatesPage() {
 		setResubmitTarget(null);
 		setActiveSource("submissions");
 	}, [tr]);
-	const { getTemplateDetail, parseTemplateContent, importTemplate } = useImportWorkflowTemplate();
 	const categorizedWorkflows = useMemo(() => {
 		return workflows.map((w) => ({
 			workflow: w,
@@ -1600,39 +1236,11 @@ function TemplatesPage() {
 		bus,
 		workspaceId
 	]);
-	const handleUseStoreTemplate = useCallback(async (template) => {
-		try {
-			toast.loading(tr("fluidgrids.templates.templatesPage.storeLoadingToast", "Loading template..."), { id: "store-template-load" });
-			const fullTemplate = await getTemplateDetail(template.id);
-			toast.dismiss("store-template-load");
-			if (!fullTemplate) {
-				toast.error(tr("fluidgrids.templates.templatesPage.storeLoadDetailErrorToast", "Failed to load template details"));
-				return;
-			}
-			if (!parseTemplateContent(fullTemplate)) {
-				toast.error(tr("fluidgrids.templates.templatesPage.storeInvalidContentToast", "Template does not contain valid workflow data"));
-				return;
-			}
-			toast.loading(tr("fluidgrids.templates.templatesPage.storeImportingToast", "Importing template..."), { id: "store-template-import" });
-			const result = await importTemplate(fullTemplate);
-			toast.dismiss("store-template-import");
-			if (result.success && result.workflow) {
-				toast.success(tr("fluidgrids.templates.templatesPage.storeImportSuccessToast", "Workflow created from store template!"), { description: `"${result.workflow.name}" is ready to edit` });
-				navigate(`../workflow/${result.workflow.workflowKey}/${result.workflow.version}`);
-			} else if (isQuotaExhaustedFailure(result.error?.cause ?? result.error)) setShowQuotaExhausted(true);
-			else toast.error(tr("fluidgrids.templates.templatesPage.storeImportErrorToast", "Failed to import template"), { description: result.message });
-		} catch (err) {
-			toast.dismiss("store-template-load");
-			toast.dismiss("store-template-import");
-			toast.error(tr("fluidgrids.templates.templatesPage.storeGenericErrorToast", "Something went wrong"), { description: err instanceof Error ? err.message : tr("fluidgrids.templates.templatesPage.storeProcessErrorDescription", "Failed to process template") });
-		}
-	}, [
-		getTemplateDetail,
-		parseTemplateContent,
-		importTemplate,
-		navigate,
-		tr
-	]);
+	const templateImport = useTemplateImportFlow({
+		onImported: (created) => navigate(`../workflow/${created.workflowKey}/${created.version}`),
+		onQuotaExhausted: () => setShowQuotaExhausted(true)
+	});
+	const handleUseStoreTemplate = templateImport.start;
 	const assistantControls = useMemo(() => templatesControls({
 		page: tr("fluidgrids.templates.templatesPage.heading", "Templates"),
 		search: setSearch,
@@ -1857,6 +1465,7 @@ function TemplatesPage() {
 				resubmit: resubmitTarget,
 				onSubmitted: handleSubmitted
 			}),
+			templateImport.dialog,
 			/* @__PURE__ */ jsx(QuotaExhaustedDialog, {
 				surface: "template-import",
 				open: showQuotaExhausted,