@burdenoff/fluidgrids-fe-sdk 2026.1112.8 → 2026.1112.9

package/dist/TemplatePreview-BCnGjMuN.js

@@ -0,0 +1,646 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { t as ThemeProvider } from "./theme-provider-B3mIuz2d.js";
+import { t as FlowBuilderPage } from "./flow-builder-DzKPrW2r.js";
+import { S as useInstalledNodes, c as buildNodeCheck, d as useImportWorkflowTemplate, l as buildRequiredNodeTypes, n as formatTemplatePrice, r as isPaidTemplate, s as useTemplateImportFlow } from "./TemplateCard--WYJZlA_.js";
+import { S as QuotaExhaustedDialog } from "./workflow-code-transfer-Cshsgf2H.js";
+import { n as WithOpenTemplateAsCode } from "./OpenTemplateAsCodeButton-Dh3ee2OR.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { i as SdkPermissionButton, s as useFluidGridsPermission, t as FLUIDGRIDS_PERMISSIONS } from "./constants-dcxg6zG6.js";
+import { t as BILLING_PLANS_PATH } from "./quota-Cdt8yz7N.js";
+import { n as useNavigationV2 } from "./useNavigationV2-C2WeqN7d.js";
+import { m as describeOperationError } from "./client-C9XSzSXr.js";
+import { t as Disclosure } from "./Disclosure-DQiUKrqd.js";
+import { c as useVariables, t as useCreateVariable } from "./useVariables-cI8uLwye.js";
+import { t as PaidTemplateConfirm } from "./PaidTemplateConfirm-DjmVi_m-.js";
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate, useParams } from "react-router";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { Input } from "@burdenoff/fe-libs/ui";
+import { ErrorBoundary } from "@burdenoff/fe-libs/shared/components";
+import { Button as Button$1 } from "@burdenoff/fe-libs/button";
+import "@xyflow/react/dist/style.css";
+
+// src/utils/template-needs.ts
+/** "slack_oauth2" → "Slack oauth2", "google-sheets" → "Google sheets". */
+function humanizeIdentifier(identifier) {
+	const text = identifier.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_\-.:/]+/g, " ").replace(/\s+/g, " ").trim().toLowerCase();
+	return text ? text.charAt(0).toUpperCase() + text.slice(1) : identifier;
+}
+function appName(node) {
+	return node.displayName?.trim() || humanizeIdentifier(node.nodeType);
+}
+/**
+* The store apps the template uses (built-in steps are always there, so they
+* are not listed), each with its status: ready (installed), installed for
+* you when you use the template, to buy first, or not in the store.
+*/
+function templateApps(check) {
+	const entry = (status) => (node) => ({
+		nodeType: node.nodeType,
+		name: appName(node),
+		status
+	});
+	return [
+		...check.installed.filter((node) => node.publishType !== "BUILTIN").map(entry("ready")),
+		...check.missing.map(entry("install")),
+		...check.missingPaid.map(entry("purchase")),
+		...(check.unavailable ?? []).map(entry("unavailable"))
+	];
+}
+/** `{{ $vars.API_URL }}` (expressions) and `${vars.API_URL}` (legacy). */
+const VARIABLE_PATTERNS = [/\$vars\.([A-Za-z_][A-Za-z0-9_]*)/g, /\$\{vars\.([A-Za-z_][A-Za-z0-9_]*)\}/g];
+/** The workspace values (`$vars`) a template's definition reads, sorted. */
+function templateVariableNames(definition) {
+	let text;
+	try {
+		text = JSON.stringify(definition ?? null);
+	} catch {
+		return [];
+	}
+	const names = /* @__PURE__ */ new Set();
+	for (const pattern of VARIABLE_PATTERNS) for (const match of text.matchAll(pattern)) if (match[1]) names.add(match[1]);
+	return [...names].sort();
+}
+/** Canvas-only nodes that are not steps (they never run). */
+const NOT_A_STEP = /* @__PURE__ */ new Set(["sticky-note"]);
+/** The template's steps by name, in canvas order. */
+function templateSteps(nodes) {
+	const steps = [];
+	for (const node of nodes) {
+		const type = typeof node.type === "string" ? node.type : "";
+		if (NOT_A_STEP.has(type)) continue;
+		const id = typeof node.id === "string" ? node.id : String(steps.length);
+		const label = node.data?.label;
+		steps.push({
+			id,
+			name: typeof label === "string" && label.trim() ? label.trim() : humanizeIdentifier(type.replace(/^store\//, "")) || id
+		});
+	}
+	return steps;
+}
+
+// src/modules/templates/components/TemplateNeedsPanel.tsx
+/**
+* "What you'll need" beside a template's preview (Navigation v2,
+* BOFF-11848): before "Use this template", the apps it uses and whether each
+* is ready, the accounts to connect, the values it will ask for, the
+* workspace values it reads (with a way to add a missing one right here),
+* and the price, author, step count and how often it was used.
+*/
+/** Download and view counts, written for the reader's locale. */
+const COUNT_FORMAT = new Intl.NumberFormat(void 0, {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const APP_STATUS_ICON = {
+	ready: "mdi:check-circle-outline",
+	install: "mdi:download-outline",
+	purchase: "mdi:cart-outline",
+	unavailable: "mdi:alert-circle-outline"
+};
+function Section({ title, children, testId }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "space-y-1.5",
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+			children: title
+		}), children]
+	});
+}
+function AddWorkspaceValue({ name, onAdded }) {
+	const tr = useTr();
+	const { createVariable, loading } = useCreateVariable();
+	const [value, setValue] = useState("");
+	const save = async () => {
+		try {
+			await createVariable({
+				key: name,
+				value
+			});
+			toast.success(tr("fluidgrids.pages.templatePreview.addValueSaved", "Saved {{name}}", { name }));
+			onAdded();
+		} catch (err) {
+			const failed = tr("fluidgrids.pages.templatePreview.addValueFailed", "Could not save {{name}}", { name });
+			toast.error(failed, { description: describeOperationError(err, failed) });
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Input, {
+			value,
+			onChange: (event) => setValue(event.target.value),
+			placeholder: tr("fluidgrids.pages.templatePreview.addValuePlaceholder", "Value for {{name}}", { name }),
+			"aria-label": tr("fluidgrids.pages.templatePreview.addValuePlaceholder", "Value for {{name}}", { name }),
+			className: "h-8 text-xs",
+			"data-testid": `template-value-input-${name}`
+		}), /* @__PURE__ */ jsx(SdkPermissionButton, {
+			permission: FLUIDGRIDS_PERMISSIONS.VARIABLE_CREATE,
+			deniedBehavior: "hide",
+			children: /* @__PURE__ */ jsx(Button$1, {
+				"data-agent": "confirm",
+				size: "sm",
+				variant: "outline",
+				disabled: loading || !value.trim(),
+				onClick: () => void save(),
+				"data-testid": `template-value-save-${name}`,
+				children: tr("fluidgrids.pages.templatePreview.addValueSave", "Save")
+			})
+		})]
+	});
+}
+/** The `$vars` the template reads, checked against the workspace's values. */
+function WorkspaceValuesCheck({ names }) {
+	const tr = useTr();
+	const { variables, loading, refetch } = useVariables();
+	const known = new Set(variables.map((variable) => variable.key));
+	const missing = loading ? [] : names.filter((name) => !known.has(name));
+	const missingSet = new Set(missing);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [missing.length > 0 && /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-text-primary",
+			"data-testid": "template-values-missing",
+			children: tr("fluidgrids.pages.templatePreview.needsValuesMissing", "This workflow needs: {{names}}", { names: missing.join(", ") })
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "space-y-2",
+			children: names.map((name) => {
+				const isMissing = missingSet.has(name);
+				return /* @__PURE__ */ jsxs("li", {
+					className: "space-y-1 text-xs",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-text-primary",
+							children: name
+						}), !loading && /* @__PURE__ */ jsx("span", {
+							className: isMissing ? "text-status-warning-text" : "text-text-secondary",
+							children: isMissing ? tr("fluidgrids.pages.templatePreview.valueMissing", "Missing") : tr("fluidgrids.pages.templatePreview.valueSet", "Set")
+						})]
+					}), isMissing && /* @__PURE__ */ jsx(AddWorkspaceValue, {
+						name,
+						onAdded: () => void refetch()
+					})]
+				}, name);
+			})
+		})]
+	});
+}
+function AppsSection({ nodeCheck }) {
+	const tr = useTr();
+	const apps = nodeCheck ? templateApps(nodeCheck) : [];
+	const statusText = {
+		ready: tr("fluidgrids.pages.templatePreview.appReady", "Ready"),
+		install: tr("fluidgrids.pages.templatePreview.appWillInstall", "Added for you when you use it"),
+		purchase: tr("fluidgrids.pages.templatePreview.appNeedsPurchase", "Needs to be bought first"),
+		unavailable: tr("fluidgrids.pages.templatePreview.appUnavailable", "Not in the store")
+	};
+	const empty = nodeCheck ? tr("fluidgrids.pages.templatePreview.needsNoApps", "Only built-in steps, nothing to add") : tr("fluidgrids.pages.templatePreview.needsChecking", "Checking…");
+	return /* @__PURE__ */ jsx(Section, {
+		title: tr("fluidgrids.pages.templatePreview.needsApps", "Apps it uses"),
+		testId: "template-needs-apps",
+		children: apps.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			className: "space-y-1.5",
+			children: apps.map((app) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-start justify-between gap-2 text-xs",
+				"data-status": app.status,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-text-primary",
+					children: app.name
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 items-center gap-1 text-text-secondary",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: APP_STATUS_ICON[app.status],
+						width: 14
+					}), statusText[app.status]]
+				})]
+			}, app.nodeType))
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-text-secondary",
+			children: empty
+		})
+	});
+}
+/** A titled list of names, or a line saying there are none. */
+function NamesSection({ title, names, empty, testId }) {
+	if (names.length === 0 && empty === void 0) return null;
+	return /* @__PURE__ */ jsx(Section, {
+		title,
+		testId,
+		children: names.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			className: "space-y-1 text-xs text-text-primary",
+			children: names.map((name) => /* @__PURE__ */ jsx("li", { children: name }, name))
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-text-secondary",
+			children: empty
+		})
+	});
+}
+function ValuesSection({ names }) {
+	const tr = useTr();
+	const { allowed: canReadValues } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.VARIABLE_READ);
+	if (names.length === 0) return null;
+	return /* @__PURE__ */ jsx(Section, {
+		title: tr("fluidgrids.pages.templatePreview.needsValues", "Workspace values"),
+		testId: "template-needs-values",
+		children: canReadValues ? /* @__PURE__ */ jsx(WorkspaceValuesCheck, { names }) : /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-text-primary",
+			children: tr("fluidgrids.pages.templatePreview.needsValuesMissing", "This workflow needs: {{names}}", { names: names.join(", ") })
+		})
+	});
+}
+function FactsList({ template, stepCount }) {
+	const tr = useTr();
+	const author = template.authorName || template.publisher?.name || tr("fluidgrids.builder.templateCard.unknownAuthor", "Unknown");
+	const price = template.pricingModel === "FREE" ? tr("fluidgrids.builder.templateCard.freeBadge", "Free") : formatTemplatePrice(template.price, template.currency);
+	return /* @__PURE__ */ jsxs("dl", {
+		className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 border-t border-card-foreground/10 pt-3 text-xs",
+		"data-testid": "template-needs-facts",
+		children: [
+			/* @__PURE__ */ jsx("dt", {
+				className: "text-text-secondary",
+				children: tr("fluidgrids.pages.templatePreview.factPrice", "Price")
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-text-primary",
+				children: price
+			}),
+			/* @__PURE__ */ jsx("dt", {
+				className: "text-text-secondary",
+				children: tr("fluidgrids.pages.templatePreview.factAuthor", "Made by")
+			}),
+			/* @__PURE__ */ jsxs("dd", {
+				className: "text-text-primary",
+				children: [author, template.publisher?.isVerified && /* @__PURE__ */ jsxs("span", {
+					className: "ml-1 text-text-secondary",
+					children: [
+						"(",
+						tr("fluidgrids.builder.templateCard.verifiedLabel", "Verified publisher"),
+						")"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("dt", {
+				className: "text-text-secondary",
+				children: tr("fluidgrids.pages.templatePreview.factSteps", "Steps")
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-text-primary",
+				children: stepCount
+			}),
+			/* @__PURE__ */ jsx("dt", {
+				className: "text-text-secondary",
+				children: tr("fluidgrids.pages.templatePreview.factUsage", "Used")
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-text-primary",
+				children: tr("fluidgrids.pages.templatePreview.factUsageValue", "{{downloads}} times · {{views}} views", {
+					downloads: COUNT_FORMAT.format(template.downloads ?? 0),
+					views: COUNT_FORMAT.format(template.viewCount ?? 0)
+				})
+			})
+		]
+	});
+}
+function StepsList({ steps }) {
+	const tr = useTr();
+	if (steps.length === 0) return null;
+	return /* @__PURE__ */ jsx(Disclosure, {
+		closedLabel: tr("fluidgrids.pages.templatePreview.showSteps", "Show the {{count}} steps", { count: steps.length }),
+		openLabel: tr("fluidgrids.pages.templatePreview.hideSteps", "Hide the steps"),
+		"data-testid": "template-needs-steps",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "list-decimal space-y-0.5 pl-5 text-xs text-text-primary",
+			children: steps.map((step) => /* @__PURE__ */ jsx("li", { children: step.name }, step.id))
+		})
+	});
+}
+function TemplateNeedsPanel({ template, content, nodeCheck, steps }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "flex max-h-[40vh] w-full shrink-0 flex-col gap-4 overflow-y-auto border-b border-card-foreground/10 bg-card p-4 lg:max-h-none lg:w-80 lg:border-b-0 lg:border-l",
+		"aria-labelledby": "template-needs-title",
+		"data-testid": "template-needs-panel",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				id: "template-needs-title",
+				className: "text-sm font-semibold text-card-foreground",
+				children: tr("fluidgrids.pages.templatePreview.needsTitle", "What you'll need")
+			}),
+			/* @__PURE__ */ jsx(AppsSection, { nodeCheck }),
+			/* @__PURE__ */ jsx(NamesSection, {
+				title: tr("fluidgrids.pages.templatePreview.needsAccounts", "Accounts to connect"),
+				names: (content?.requiredCredentialTypes ?? []).map(humanizeIdentifier),
+				empty: tr("fluidgrids.pages.templatePreview.needsNoAccounts", "No accounts needed"),
+				testId: "template-needs-accounts"
+			}),
+			/* @__PURE__ */ jsx(NamesSection, {
+				title: tr("fluidgrids.pages.templatePreview.needsInputs", "You'll be asked for"),
+				names: (content?.requiredInputs ?? []).map((input) => input.label || input.name),
+				testId: "template-needs-inputs"
+			}),
+			/* @__PURE__ */ jsx(ValuesSection, { names: templateVariableNames(content?.definitionJson) }),
+			/* @__PURE__ */ jsx(FactsList, {
+				template,
+				stepCount: steps.length
+			}),
+			/* @__PURE__ */ jsx(StepsList, { steps })
+		]
+	});
+}
+
+// src/utils/template-graph.ts
+/**
+* Extract nodes/edges from a template `content` object.
+* Returns null when the content carries no renderable graph.
+*/
+function extractTemplateGraph(content) {
+	const dj = content?.definitionJson;
+	if (!dj) return null;
+	const graph = dj.data ?? dj;
+	const nodes = graph?.nodes ?? [];
+	const edges = graph?.edges ?? [];
+	if (!nodes.length) return null;
+	return {
+		nodes,
+		edges
+	};
+}
+
+// src/pages/useTemplatePreviewLoad.ts
+/**
+* Loads a store template for the preview page: the product, its content and
+* the graph the read-only canvas draws, or a plain error. With Navigation v2
+* (BOFF-11848) it also works out the apps the template needs, for the "What
+* you'll need" panel: the template's own list when it has one, else from its
+* nodes (as "Use this template" does). The canvas does not wait for that.
+*/
+function useTemplatePreviewLoad(productId, withRequiredNodes) {
+	const tr = useTr();
+	const { getTemplateDetail, parseTemplateContent } = useImportWorkflowTemplate();
+	const [workflow, setWorkflow] = useState(null);
+	const [template, setTemplate] = useState(null);
+	const [content, setContent] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [requiredNodes, setRequiredNodes] = useState(null);
+	useEffect(() => {
+		let mounted = true;
+		const fail = (message) => {
+			if (!mounted) return;
+			setError(message);
+			setLoading(false);
+		};
+		const loadFailed = () => tr("fluidgrids.pages.templatePreview.errorLoadFailed", "Failed to load template.");
+		const load = async () => {
+			if (!productId) {
+				fail(tr("fluidgrids.pages.templatePreview.errorNoTemplateSpecified", "No template specified."));
+				return;
+			}
+			try {
+				const full = await getTemplateDetail(productId);
+				if (!full) {
+					fail(loadFailed());
+					return;
+				}
+				const parsed = parseTemplateContent(full);
+				const graph = extractTemplateGraph(parsed);
+				const nodes = graph?.nodes ?? [];
+				const edges = graph?.edges ?? [];
+				if (!nodes.length) {
+					fail(tr("fluidgrids.pages.templatePreview.errorNoWorkflow", "This template has no workflow to preview."));
+					return;
+				}
+				if (mounted) {
+					setTemplate(full);
+					setContent(parsed);
+					setWorkflow({
+						id: productId,
+						workflowKey: productId,
+						version: "preview",
+						name: full.name ?? tr("fluidgrids.pages.templatePreview.fallbackTemplateName", "Template"),
+						nodes,
+						edges,
+						sidebar: {
+							active: "none",
+							panels: { nodeProperties: { selectedNode: null } }
+						}
+					});
+					setLoading(false);
+				}
+				if (withRequiredNodes) {
+					const listed = parsed?.requiredNodeTypes ?? [];
+					const required = listed.length ? listed : await buildRequiredNodeTypes(nodes).catch(() => []);
+					if (mounted) setRequiredNodes(required);
+				}
+			} catch (e) {
+				fail(e instanceof Error ? e.message : loadFailed());
+			}
+		};
+		load();
+		return () => {
+			mounted = false;
+		};
+	}, [
+		productId,
+		getTemplateDetail,
+		parseTemplateContent,
+		tr,
+		withRequiredNodes
+	]);
+	return {
+		workflow,
+		template,
+		content,
+		loading,
+		error,
+		requiredNodes
+	};
+}
+
+// src/pages/TemplatePreview.tsx
+var TemplatePreview_exports = /* @__PURE__ */ __exportAll({ TemplatePreview: () => TemplatePreview });
+/**
+* TemplatePreview — a read-only, n8n-style preview of a store workflow template.
+*
+* It loads the template's `content.definitionJson`, seeds the builder's flow
+* store with the graph, and renders the *real* builder canvas in read-only mode
+* (no dragging/connecting/editing — pan + zoom only). A header shows the
+* template name/description and a "Use this template" CTA that imports the
+* template and opens the editable builder. Nothing is created until the user
+* clicks "Use this template".
+*
+* Navigation v2 (BOFF-11848, FluidGrids only): a "What you'll need" panel
+* beside the canvas (apps and their status, accounts, values, price, author,
+* steps, use counts), the canvas fits the whole template on screen, the badge
+* says nothing is created until Use, and a paid template asks first.
+*/
+/** The read-only badge: today's words, or (v2) why it matters. */
+function PreviewBadge({ plain }) {
+	const text = useTr()("fluidgrids.pages.templatePreview.readOnlyBadge", plain ? "Preview — nothing is created until you click Use" : "Preview · read-only");
+	return /* @__PURE__ */ jsx("span", {
+		className: plain ? "min-w-0 truncate rounded-full bg-card-foreground/10 px-2 py-0.5 text-[11px] font-medium text-muted-foreground" : "shrink-0 rounded-full bg-card-foreground/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+		title: plain ? text : void 0,
+		"data-testid": "template-preview-badge",
+		children: text
+	});
+}
+/** A message in place of the canvas, with the way back to Templates. */
+function PreviewMessage({ message, onBack, icon }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center",
+		children: [
+			icon && /* @__PURE__ */ jsx(Icon, {
+				icon,
+				className: "size-8 text-muted-foreground"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: message
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				onClick: onBack,
+				children: tr("fluidgrids.pages.templatePreview.backToTemplates", "Back to templates")
+			})
+		]
+	});
+}
+function PreviewLoading() {
+	const tr = useTr();
+	return /* @__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…")]
+	});
+}
+function TemplatePreview() {
+	const { productId } = useParams();
+	const navigate = useNavigate();
+	const location = useLocation();
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const { installedAppIds } = useInstalledNodes();
+	const { workflow, template, content, loading, error, requiredNodes } = useTemplatePreviewLoad(productId, v2);
+	const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);
+	const [confirmPaid, setConfirmPaid] = useState(false);
+	const workflowsBase = location.pathname.replace(/\/templates(\/.*)?$/, "");
+	const nodeCheck = useMemo(() => requiredNodes ? buildNodeCheck(requiredNodes, installedAppIds) : null, [requiredNodes, installedAppIds]);
+	const steps = useMemo(() => templateSteps(workflow?.nodes ?? []), [workflow]);
+	const templateImport = useTemplateImportFlow({
+		onImported: (created) => navigate(`${workflowsBase}/workflow/${created.workflowKey}/${created.version}`),
+		onQuotaExhausted: () => setShowQuotaExhausted(true)
+	});
+	const importing = templateImport.busy;
+	const handleUse = () => {
+		if (!template) return;
+		if (v2 && isPaidTemplate(template)) {
+			setConfirmPaid(true);
+			return;
+		}
+		templateImport.start(template);
+	};
+	const backToTemplates = () => navigate(`${workflowsBase}/templates`);
+	return /* @__PURE__ */ jsxs(ThemeProvider, { 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",
+				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(PreviewBadge, { plain: v2 })]
+						}), template?.description ? /* @__PURE__ */ jsx("span", {
+							className: "block truncate text-xs text-muted-foreground",
+							children: template.description
+						}) : null]
+					})]
+				}), /* @__PURE__ */ jsx(WithOpenTemplateAsCode, {
+					templateName: template ? template.name : null,
+					content,
+					className: "shrink-0",
+					wrapperClassName: "flex shrink-0 items-center gap-2",
+					children: /* @__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__ */ jsxs("div", {
+				className: v2 ? "flex min-h-0 w-full flex-1 flex-col lg:flex-row-reverse" : "contents",
+				children: [v2 && template && workflow && /* @__PURE__ */ jsx(TemplateNeedsPanel, {
+					template,
+					content,
+					nodeCheck,
+					steps
+				}), /* @__PURE__ */ jsx("div", {
+					className: "relative min-h-0 w-full flex-1",
+					children: /* @__PURE__ */ jsx(ErrorBoundary, {
+						fallback: () => /* @__PURE__ */ jsx(PreviewMessage, {
+							message: tr("fluidgrids.pages.templatePreview.renderErrorMessage", "Something went wrong rendering this template preview."),
+							onBack: backToTemplates
+						}),
+						children: loading ? /* @__PURE__ */ jsx(PreviewLoading, {}) : error ? /* @__PURE__ */ jsx(PreviewMessage, {
+							icon: "mdi:alert-circle-outline",
+							message: error,
+							onBack: backToTemplates
+						}) : workflow ? /* @__PURE__ */ jsx(FlowBuilderPage, {
+							workflow,
+							readOnly: true,
+							fitToScreen: v2
+						}) : null
+					})
+				})]
+			})]
+		}),
+		templateImport.dialog,
+		/* @__PURE__ */ jsx(PaidTemplateConfirm, {
+			template: confirmPaid ? template : null,
+			onConfirm: () => {
+				setConfirmPaid(false);
+				if (template) templateImport.start(template);
+			},
+			onCancel: () => setConfirmPaid(false)
+		}),
+		/* @__PURE__ */ jsx(QuotaExhaustedDialog, {
+			surface: "template-import",
+			open: showQuotaExhausted,
+			onOpenChange: setShowQuotaExhausted,
+			onUpgrade: () => {
+				setShowQuotaExhausted(false);
+				navigate(BILLING_PLANS_PATH);
+			}
+		})
+	] });
+}
+
+export { TemplatePreview_exports as n, extractTemplateGraph as r, TemplatePreview as t };