@burdenoff/fluidgrids-fe-sdk 2026.1111.16 → 2026.1111.18

package/dist/TemplateCard-DsC0KNH1.js

@@ -0,0 +1,1416 @@
+"use client";
+import { _ as throwIfResultError, n as getFluidGridsClient, x as getFluidGridsConfig } from "./client-C9XSzSXr.js";
+import { i as getGlobalStoreClient } from "./node-registry-refresh-Dy0uRg9f.js";
+import { A as StoreNodeProductsByTypeDocument, C as GetMyNodeInstallationsDocument, D as InstallWorkflowNodeDocument, c as ensureInstalledNodeTypesLoaded, d as ensureRegistryNodeTypesLoaded, i as AVAILABLE_NODES, o as NODE_CONFIGS, pn as useFluidGridsAnalytics, t as FluidGridsContext, x as BrowseWorkflowTemplatesDocument } from "./FluidGridsProvider-dvZSNtSW.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { a as emitTemplateUsed, s as emitWorkflowCreated, t as emitNodeInstalled, y as isQuotaExhaustedFailure } from "./fluidgridsEvents-CNdcrUNN.js";
+import { t as cn } from "./cn-QqidFIgr.js";
+import { t as Button } from "./button-DG7y_FVJ.js";
+import { i as SdkPermissionButton, t as FLUIDGRIDS_PERMISSIONS } from "./constants-B2lhWNoN.js";
+import React, { Suspense, forwardRef, lazy, useCallback, useContext, useMemo, useState } from "react";
+import { useQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client/core";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { useEventBus } from "@burdenoff/fe-libs/shared/events";
+import { cva } from "class-variance-authority";
+import { Download, Eye, Sparkles, Star } from "lucide-react";
+
+// src/feature-flags/durable-nodes.ts
+/**
+* Palette gating for the durable-function nodes (BOFF-9905).
+*
+* wspace-workflow-svc only seeds the `internal:code-workflow` and
+* `internal:wait-for-signal` manifests while `DURABLE_NODE_MANIFESTS_ENABLED`
+* is set, and refuses durable work while the `fluidgrids.durable-functions`
+* flag is off for the workspace. Once the manifests are seeded for every
+* workspace, the builder still has to hide the two nodes from the palettes of
+* workspaces where the flag is off. This module is that client-side filter; it
+* mirrors the server-side gate and is never the gate itself.
+*
+* Hiding only affects what can be picked from a palette. A workflow that
+* already contains one of these nodes keeps rendering and running unchanged.
+*/
+/** Node types offered only while durable functions are enabled. */
+const DURABLE_FUNCTION_NODE_TYPES = /* @__PURE__ */ new Set(["internal:code-workflow", "internal:wait-for-signal"]);
+/**
+* The run-control nodes of Phase C (BOFF-9906, DC15). wspace-workflow-svc
+* seeds their manifests only while `RUN_CONTROL_NODE_MANIFESTS_ENABLED` is
+* set, which is turned on after this filter ships; the builder then still
+* hides each one where its flag is off: Signal Run needs run control, Set
+* Search Attributes needs search attributes.
+*/
+const RUN_CONTROL_NODE_TYPES = /* @__PURE__ */ new Set(["internal:signal-run", "internal:set-search-attributes"]);
+/**
+* The Assert node of the workflow test suites (BOFF-9960). wspace-workflow-svc
+* seeds its manifest for every workspace, so the builder hides it wherever the
+* `fluidgrids.workflow-tests` flag is off.
+*/
+const WORKFLOW_TEST_NODE_TYPES = /* @__PURE__ */ new Set(["internal:assert"]);
+/** Whether a workflow node type is one of the Phase C run-control nodes. */
+function isRunControlNodeType(nodeType) {
+	return !!nodeType && RUN_CONTROL_NODE_TYPES.has(nodeType);
+}
+/** Normalises the boolean (Phase B) or object form of the palette gates. */
+function paletteGatesOf(gates) {
+	if (typeof gates === "boolean") return {
+		durableFunctions: gates,
+		runControl: false,
+		searchAttributes: false,
+		workflowTests: false
+	};
+	return {
+		durableFunctions: gates?.durableFunctions === true,
+		runControl: gates?.runControl === true,
+		searchAttributes: gates?.searchAttributes === true,
+		workflowTests: gates?.workflowTests === true
+	};
+}
+function hiddenBy(nodeType, gates) {
+	if (DURABLE_FUNCTION_NODE_TYPES.has(nodeType)) return !gates.durableFunctions;
+	if (nodeType === "internal:signal-run") return !gates.runControl;
+	if (nodeType === "internal:set-search-attributes") return !gates.searchAttributes;
+	if (WORKFLOW_TEST_NODE_TYPES.has(nodeType)) return !gates.workflowTests;
+	return false;
+}
+/** Whether a workflow node type is one of the durable-function nodes. */
+function isDurableFunctionNodeType(nodeType) {
+	return !!nodeType && DURABLE_FUNCTION_NODE_TYPES.has(nodeType);
+}
+/**
+* Whether a node type must be left out of the builder palettes. Fails closed:
+* a family the caller does not say is enabled is not.
+*/
+function isNodeTypeHiddenFromPalette(nodeType, gates = false) {
+	return !!nodeType && hiddenBy(nodeType, paletteGatesOf(gates));
+}
+/**
+* Drops the palette entries that must stay hidden. Returns the input array
+* itself when nothing is hidden, so the canvas palettes keep the exact list
+* (and references) they had before this filter existed.
+*/
+function filterPaletteNodes(nodes, gates = false) {
+	const resolved = paletteGatesOf(gates);
+	if (!nodes.some((node) => hiddenBy(node.type, resolved))) return nodes;
+	return nodes.filter((node) => !hiddenBy(node.type, resolved));
+}
+
+// src/ui/card.tsx
+const Card = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200 ease-out hover:shadow-md", className),
+	...props
+}));
+Card.displayName = "Card";
+const CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col space-y-1.5 p-6", className),
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+const CardTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", {
+	ref,
+	className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+const CardDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+const CardContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("p-6 pt-0", className),
+	...props
+}));
+CardContent.displayName = "CardContent";
+const CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex items-center p-6 pt-0", className),
+	...props
+}));
+CardFooter.displayName = "CardFooter";
+
+// src/hooks/store/useGlobalStoreClient.ts
+/**
+* Hook to get the Global Store Apollo client
+*
+* Priority:
+* 1. FluidGridsProvider context (if available)
+* 2. Module-level singleton set via setGlobalStoreClient()
+*
+* @throws Error if no global client is available from either source
+*/
+function useGlobalStoreClient() {
+	const context = useContext(FluidGridsContext);
+	if (context?.globalClient) return context.globalClient;
+	const singletonClient = getGlobalStoreClient();
+	if (singletonClient) return singletonClient;
+	throw new Error("useGlobalStoreClient: No global client available. Either wrap your component tree with <FluidGridsProvider globalClient={...}> or call setGlobalStoreClient(client) before rendering.");
+}
+
+// src/hooks/store/useInstalledNodes.ts
+/**
+* Hook to get installed nodes for the current workspace
+*
+* Fetches installations from the Store service to show "Already Installed" status
+* in the Store popup and display installed count.
+*/
+function useInstalledNodes() {
+	const client = useGlobalStoreClient();
+	const workspaceId = useContext(FluidGridsContext)?.workspaceId ?? getFluidGridsConfig().workspaceId;
+	const { data, loading, error, refetch } = useQuery(GetMyNodeInstallationsDocument, {
+		client,
+		variables: {
+			workspaceId: workspaceId || "",
+			limit: 100,
+			offset: 0
+		},
+		skip: !workspaceId,
+		fetchPolicy: "cache-and-network"
+	});
+	const installations = data?.myStoreAppInstallations?.items || [];
+	const activeInstallations = installations.filter((item) => item.status === "ACTIVE");
+	return {
+		installations,
+		installedAppIds: new Set(activeInstallations.map((item) => item.productId)),
+		installationsMap: new Map(activeInstallations.map((item) => [item.productId, {
+			installedVersion: item.version ?? void 0,
+			installationId: item.id,
+			installedAt: item.installedAt
+		}])),
+		deprecatedInstallations: activeInstallations.filter((item) => item.productStatus === "UNLISTED"),
+		installedNodeTypes: /* @__PURE__ */ new Set(),
+		totalCount: data?.myStoreAppInstallations?.total || 0,
+		loading,
+		error,
+		refetch
+	};
+}
+
+// src/builder/components/flow-builder/components/store/store-node-availability.ts
+/**
+* Operations a user may actually pick for a node type: adapter operations
+* (supplyModel/supplyTool/…) and `internal` ones (the AI Agent's planStep) are
+* executor plumbing, chosen automatically, and must not count as user choices.
+*/
+function userSelectableOperationCount(nodeType) {
+	if (!nodeType) return 0;
+	return (NODE_CONFIGS.find((c) => c.type === nodeType)?.operations ?? []).filter((op) => !op.isAdapterOperation && !op.internal).length;
+}
+/**
+* Resolve the workflow node type for a store node.
+*
+* Installed nodes can fall back to the historical slug-based type when older
+* manifests did not yet include `manifest.nodeType`.
+*/
+function getStoreNodeType(node, isInstalled) {
+	return node.manifest?.nodeType ?? (isInstalled ? `store/${node.slug}` : void 0);
+}
+/**
+* A node is considered prebuilt when it is already present in the workflow
+* registry/available nodes list even though the workspace does not have a store
+* installation record for it.
+*/
+function getStoreNodeAvailability(node, isInstalled, options = {}) {
+	const nodeType = getStoreNodeType(node, isInstalled);
+	if (isNodeTypeHiddenFromPalette(nodeType, options.durableFunctionsEnabled)) return {
+		nodeType,
+		isPrebuilt: false,
+		isDraggable: false,
+		isHidden: true
+	};
+	const isInternalBuiltin = !!nodeType && nodeType.startsWith("internal:");
+	const isRegistryBacked = !!nodeType && AVAILABLE_NODES.some((availableNode) => availableNode.type === nodeType && (availableNode.publishType === "BUILTIN" || availableNode.publishType === void 0));
+	const isPrebuilt = !isInstalled && (isInternalBuiltin || isRegistryBacked);
+	return {
+		nodeType,
+		isPrebuilt,
+		isDraggable: !!nodeType && (isInstalled || isPrebuilt) && userSelectableOperationCount(nodeType) <= 1,
+		isHidden: false
+	};
+}
+/**
+* The icon a store listing shows.
+*
+* Listings for the built-in nodes are seeded without an icon, so every one of
+* them rendered as a letter tile in the Node Store while the canvas showed the
+* node's real icon (BOFF-7651). The registry already carries that icon from
+* the node's manifest, so a listing without its own falls back to it. A
+* listing's own icon always wins; `null` means "no icon anywhere", and the
+* caller draws its letter tile.
+*/
+function getStoreNodeIcon(listingIcon, nodeType) {
+	if (listingIcon) return listingIcon;
+	if (!nodeType) return null;
+	return AVAILABLE_NODES.find((availableNode) => availableNode.type === nodeType)?.icon || null;
+}
+/**
+* The version to show for a store node: the node's own version from its
+* manifest (`nodeVersion`, then `identity.version`), falling back to the
+* product's `manifestVersion`. The product field is usually the manifest
+* *format* version ("1.0"), so showing it read as "v1.0" for every node
+* (BOFF-11456).
+*/
+function storeNodeDisplayVersion(manifest, manifestVersion) {
+	const record = typeof manifest === "string" ? parseManifest(manifest) : manifest;
+	if (typeof record === "object" && record !== null) {
+		const { nodeVersion, identity } = record;
+		if (typeof nodeVersion === "string" && nodeVersion.trim()) return nodeVersion.trim();
+		const identityVersion = identity?.version;
+		if (typeof identityVersion === "string" && identityVersion.trim()) return identityVersion.trim();
+	}
+	return manifestVersion?.trim() || void 0;
+}
+const MAJOR_MINOR_ONLY = /^\d+\.\d+$/;
+/**
+* Node versions are full semver: node images are tagged `major.minor.patch`
+* and the sandbox picks one by the exact version a workflow node pins. A bare
+* `major.minor` (the manifest format version, "1.0") therefore means
+* `major.minor.0` (BOFF-11496). Other values come back trimmed.
+*/
+function canonicalNodeVersion(version) {
+	const trimmed = version.trim();
+	return MAJOR_MINOR_ONLY.test(trimmed) ? `${trimmed}.0` : trimmed;
+}
+/**
+* The version a store node installs as: its own version from the manifest,
+* canonical, `1.0.0` when the product names none. Installs used to send the
+* product's `manifestVersion` ("1.0"), which no node image carries
+* (BOFF-11496).
+*/
+function storeNodeInstallVersion(manifest, manifestVersion) {
+	return canonicalNodeVersion(storeNodeDisplayVersion(manifest, manifestVersion) ?? "1.0.0");
+}
+/**
+* Whether an installed store node has a newer version: the installation's
+* recorded version against the node's own current version, both canonical, so
+* an installation recorded as "1.0" is not "outdated" against 1.0.0
+* (BOFF-11496).
+*/
+function isStoreNodeUpdateAvailable(installedVersion, manifest, manifestVersion) {
+	if (!installedVersion?.trim()) return false;
+	const latest = storeNodeDisplayVersion(manifest, manifestVersion);
+	if (!latest) return false;
+	return canonicalNodeVersion(installedVersion) !== canonicalNodeVersion(latest);
+}
+function parseManifest(text) {
+	try {
+		return JSON.parse(text);
+	} catch {
+		return;
+	}
+}
+/**
+* Whether a store product must be left out of the builder's store listings
+* because it is a gated node (durable-function or run-control) whose flag is
+* off.
+* Fails closed when `durableFunctionsEnabled` is omitted.
+*/
+function isStoreNodeHiddenFromPalette(node, durableFunctionsEnabled = false) {
+	return isNodeTypeHiddenFromPalette(getStoreNodeType(node, false), durableFunctionsEnabled);
+}
+/**
+* Drops the store products that must stay hidden from the builder. Returns
+* the input array itself when nothing is hidden.
+*/
+function filterStoreNodesForPalette(nodes, durableFunctionsEnabled = false) {
+	const hidden = (node) => isStoreNodeHiddenFromPalette(node, durableFunctionsEnabled);
+	if (!nodes.some(hidden)) return nodes;
+	return nodes.filter((node) => !hidden(node));
+}
+
+// src/hooks/store/useWorkflowTemplates.ts
+/**
+* Hook to browse workflow templates from the Store
+*
+* Fetches WORKFLOW type products from the global store service
+* with rich preview data (screenshots, videos, etc.)
+*
+* @param searchTerm - Optional search query
+* @param limit - Number of templates per page (default: 20)
+* @param enabled - Whether to enable the query (default: true). Set to false to skip the query.
+* @param category - Optional store category to filter by (exact match)
+*/
+function useWorkflowTemplates(searchTerm, limit = 20, enabled = true, category) {
+	const client = useGlobalStoreClient();
+	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]);
+	const buildVariables = (offset) => ({ input: {
+		filter: {
+			type: "WORKFLOW",
+			status: "PUBLISHED",
+			search: searchTerm,
+			...category ? { category } : {}
+		},
+		pagination: {
+			limit,
+			offset
+		},
+		sortBy: searchTerm ? "RELEVANCE" : "NEWEST"
+	} });
+	const { data, loading, error, fetchMore, refetch } = useQuery(BrowseWorkflowTemplatesDocument, {
+		client,
+		variables: buildVariables(0),
+		fetchPolicy: "cache-and-network",
+		skip: !enabled,
+		context: Object.keys(contextHeaders).length > 0 ? { headers: contextHeaders } : void 0
+	});
+	const templates = data?.browseStore?.products || [];
+	const totalCount = data?.browseStore?.totalCount || 0;
+	const hasMore = data?.browseStore?.hasMore || false;
+	const loadMore = () => {
+		if (!hasMore || loading) return;
+		return fetchMore({
+			variables: buildVariables(templates.length),
+			context: Object.keys(contextHeaders).length > 0 ? { headers: contextHeaders } : void 0,
+			updateQuery: (prev, { fetchMoreResult }) => {
+				if (!fetchMoreResult) return prev;
+				return { browseStore: {
+					...fetchMoreResult.browseStore,
+					products: [...prev.browseStore?.products || [], ...fetchMoreResult.browseStore?.products || []]
+				} };
+			}
+		});
+	};
+	return {
+		templates,
+		totalCount,
+		hasMore,
+		loading,
+		error,
+		loadMore,
+		refetch
+	};
+}
+
+// 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/utils/template-input-applicator.ts
+/**
+* Template Input Applicator
+*
+* Walks a workflow definitionJson and replaces ${variableName} placeholders
+* with user-provided values. Used during template import to apply
+* user-configurable inputs before creating the workflow.
+*/
+/**
+* Deep-clone an object using structured clone.
+* Falls back to JSON parse/stringify for environments without structuredClone.
+*/
+function deepClone(obj) {
+	if (typeof structuredClone === "function") return structuredClone(obj);
+	return JSON.parse(JSON.stringify(obj));
+}
+/**
+* Apply template input values to a definitionJson by replacing
+* ${variableName} placeholders in string values throughout the object tree.
+*
+* @param definitionJson - The workflow definition JSON to process
+* @param inputs - Map of variable names to user-provided values
+* @returns A new definitionJson with placeholders replaced
+*
+* @example
+* ```ts
+* const definition = {
+*   nodes: [{
+*     data: { url: "${slack_webhook_url}", message: "Hello ${name}" }
+*   }]
+* };
+* const result = applyTemplateInputs(definition, {
+*   slack_webhook_url: "https://hooks.slack.com/...",
+*   name: "World"
+* });
+* // result.nodes[0].data.url === "https://hooks.slack.com/..."
+* // result.nodes[0].data.message === "Hello World"
+* ```
+*/
+function applyTemplateInputs(definitionJson, inputs) {
+	if (!inputs || Object.keys(inputs).length === 0) return definitionJson;
+	return walkAndReplace(deepClone(definitionJson), inputs);
+}
+/**
+* Recursively walk an object/array and replace ${variableName} placeholders
+* in string values.
+*/
+function walkAndReplace(obj, inputs) {
+	if (typeof obj === "string") return replaceVariables(obj, inputs);
+	if (Array.isArray(obj)) return obj.map((item) => walkAndReplace(item, inputs));
+	if (obj !== null && typeof obj === "object") {
+		const result = {};
+		for (const [key, value] of Object.entries(obj)) result[key] = walkAndReplace(value, inputs);
+		return result;
+	}
+	return obj;
+}
+/**
+* Replace ${variableName} patterns in a string with provided values.
+*
+* Supports:
+* - ${variableName} — standard replacement
+* - ${variableName || 'default'} — fallback to default if variable not provided
+*/
+function replaceVariables(str, inputs) {
+	return str.replace(/\$\{([^}]+)\}/g, (_match, expression) => {
+		const trimmed = expression.trim();
+		const fallbackMatch = trimmed.match(/^(\w+)\s*\|\|\s*['"]?(.+?)['"]?$/);
+		if (fallbackMatch) {
+			const varName = fallbackMatch[1];
+			const fallback = fallbackMatch[2];
+			if (varName in inputs) return String(inputs[varName]);
+			return fallback;
+		}
+		if (trimmed in inputs) return String(inputs[trimmed]);
+		return _match;
+	});
+}
+
+// src/utils/template-import-flow.ts
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function graphOf(value) {
+	if (!Array.isArray(value.nodes)) return null;
+	return {
+		nodes: value.nodes,
+		edges: Array.isArray(value.edges) ? value.edges : [],
+		name: typeof value.name === "string" ? value.name : void 0
+	};
+}
+/**
+* The canvas of a WORKFLOW product that keeps it in its manifest instead of
+* `content.definitionJson`: either a flat `{ nodes, edges }` manifest, or the
+* Store Listing JSON editor's `manifest.jsonContent` string. Null when the
+* manifest holds neither.
+*/
+function manifestTemplateGraph(manifest) {
+	if (!isRecord(manifest)) return null;
+	const direct = graphOf(manifest);
+	if (direct) return direct;
+	if (typeof manifest.jsonContent !== "string") return null;
+	try {
+		const parsed = JSON.parse(manifest.jsonContent);
+		return isRecord(parsed) ? graphOf(parsed) : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* The template content a product carries: `content` when it holds a
+* `definitionJson`, otherwise a content built from the manifest's canvas,
+* with its required nodes worked out by `requiredNodeTypesOf` (a failed
+* lookup leaves them empty, which skips the node check). Null when the
+* product has no workflow at all.
+*/
+async function resolveTemplateContent(product, requiredNodeTypesOf) {
+	const content = product.content;
+	if (content?.definitionJson) return content;
+	const graph = manifestTemplateGraph(product.manifest);
+	if (!graph) return null;
+	let requiredNodeTypes = [];
+	try {
+		requiredNodeTypes = await requiredNodeTypesOf(graph.nodes);
+	} catch {
+		requiredNodeTypes = [];
+	}
+	return {
+		definitionJson: {
+			nodes: graph.nodes,
+			edges: graph.edges
+		},
+		requiredNodeTypes,
+		defaultWorkflowName: graph.name ?? product.name
+	};
+}
+/**
+* The canvas to create a copy from. Some templates store a whole API
+* response as their definition (`{ data: { workflowDefinition: {
+* definitionJson } } }`); the canvas is the inner `definitionJson`.
+*/
+function unwrapTemplateDefinition(definitionJson) {
+	const data = definitionJson.data;
+	if (!isRecord(data)) return definitionJson;
+	const nested = isRecord(data.workflowDefinition) ? data.workflowDefinition.definitionJson : void 0;
+	return isRecord(nested) ? nested : definitionJson;
+}
+/**
+* Whether "Use this template" must stop at the configuration dialog before
+* creating the copy: the template asks for inputs or connections, or one of
+* its nodes is not installed (free to install, paid, or not offered by the
+* store at all).
+*/
+function needsTemplateConfiguration(content, nodeCheck) {
+	return (content.requiredInputs?.length ?? 0) > 0 || (content.requiredCredentialTypes?.length ?? 0) > 0 || nodeCheck.missing.length > 0 || nodeCheck.missingPaid.length > 0 || (nodeCheck.unavailable?.length ?? 0) > 0;
+}
+/** The free nodes to install before the copy is created. */
+function nodesToInstall(nodeCheck) {
+	return (nodeCheck?.missing ?? []).filter((node) => !!node.storeProductId);
+}
+/**
+* Install nodes one at a time, in order, reporting progress before each.
+* One at a time on purpose: the dialog shows "installing i of n", and every
+* install writes the same workspace's installation records in the store.
+* A failed install is reported to `onFailure` and the rest still run, so the
+* copy can be created; the user installs the node later from the Node Store.
+* Resolves to the node types that installed.
+*/
+async function installNodesInOrder(nodes, install, onProgress, onFailure) {
+	const installed = [];
+	await nodes.reduce((previous, node, index) => previous.then(async () => {
+		onProgress({
+			current: index + 1,
+			total: nodes.length,
+			nodeName: node.displayName || node.nodeType
+		});
+		try {
+			await install(node);
+			installed.push(node.nodeType);
+		} catch (error) {
+			onFailure(node, error);
+		}
+	}), Promise.resolve());
+	return installed;
+}
+
+// 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 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.
+*
+* It fetches template detail, parses content and creates the copy:
+* 1. Fetch full template detail from global store (lazy load content)
+* 2. Apply user-provided template inputs to definitionJson
+* 3. Create workflow via importWorkflowTemplate mutation (workspace gateway)
+* 4. Record the download and the installation in the store
+*
+* The node check, the configuration dialog and installing missing nodes are
+* done by `useTemplateImportFlow`, which every "Use this template" button
+* goes through (BOFF-11153).
+*/
+function useImportWorkflowTemplate() {
+	const [importing, setImporting] = useState(false);
+	const [error, setError] = useState(null);
+	const { fetchTemplateDetail, loading: fetchingDetail } = useTemplateDetail();
+	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,
+		/** Full import: apply inputs -> create workflow -> record analytics */
+		importTemplate: useCallback(async (template, options) => {
+			setImporting(true);
+			setError(null);
+			try {
+				const content = options?.content ?? parseTemplateContent(template);
+				if (!content) throw new Error("Template does not contain valid workflow definition data");
+				let definitionJson = unwrapTemplateDefinition(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/utils/workflow-node-check.ts
+/**
+* Workflow node dependency checking.
+*
+* Shared logic for detecting node types used by a workflow that are not
+* installed in the current workspace, resolving them to store products, and
+* classifying them as installed / missing (free installable) / missingPaid /
+* unavailable (not offered by the store, so nothing can install them).
+*
+* Used by:
+*  - Template import flow (desktop-sidebar-fragment)
+*  - Shared-workflow copy flow (WorkflowItem)
+*  - AI-assistant-created workflow open flow (WorkflowItem)
+*/
+/**
+* Canvas-only node types: they live on the React Flow canvas but are never
+* executed, never registered in NODE_CONFIGS and never published to the store.
+*
+* They must be excluded from the dependency check. A sticky note reaching it
+* was reported as `sticky-note v1.0 — Not installed` in the Missing Nodes
+* dialog on every open of an affected workflow, and because no store product
+* backs it the Install action could only ever be a no-op (BOFF-7267).
+*
+* Kept as a literal set rather than importing STICKY_NOTE_TYPE from the
+* builder so this module stays free of builder-component imports.
+*/
+const CANVAS_ONLY_NODE_TYPES = /* @__PURE__ */ new Set(["sticky-note"]);
+/**
+* Resolve the set of unique executable node types used by a workflow.
+*
+* Canvas-only annotations (see CANVAS_ONLY_NODE_TYPES) are skipped: they carry
+* no dependency, so including them produces a permanently unsatisfiable
+* "missing node".
+*/
+function getWorkflowNodeTypes(nodes) {
+	return [...new Set(nodes.map((n) => n.type).filter((t) => Boolean(t)).filter((t) => !CANVAS_ONLY_NODE_TYPES.has(t)))];
+}
+/**
+* Node types per store lookup: global-store-svc answers for at most 100 at a
+* time. A workflow misses far fewer; more are asked in parallel requests.
+*/
+const STORE_NODE_LOOKUP_BATCH_SIZE = 100;
+/** The store context of FluidGrids node products, as the Node Store browses them. */
+const STORE_NODE_PRODUCT_CONTEXT = "fluidgrids";
+/**
+* The store products that offer any of `nodeTypes`, at most
+* `STORE_NODE_LOOKUP_BATCH_SIZE` types per request, the requests in parallel.
+* Blank and repeated types are asked once.
+*/
+async function fetchStoreNodeProducts(nodeTypes, fetchProducts) {
+	const wanted = [...new Set(nodeTypes.filter(Boolean))];
+	const batches = [];
+	for (let i = 0; i < wanted.length; i += 100) batches.push(wanted.slice(i, i + 100));
+	return (await Promise.all(batches.map(fetchProducts))).flatMap((products) => [...products ?? []]);
+}
+function publishedAtMs(product) {
+	const ms = product.publishedAt ? Date.parse(product.publishedAt) : NaN;
+	return Number.isNaN(ms) ? Number.NEGATIVE_INFINITY : ms;
+}
+/**
+* Order two store products that offer the same nodeType; a negative result
+* means `a` is the better match.
+*
+* 1. A product linked to a devportal application (`productId` set) wins. Only
+*    those have an installable published version; the unlinked rows are
+*    orphaned seed rows such as `app-gmail-reader-001` that cannot install.
+* 2. Then more downloads, 3. then the most recently published, 4. then the
+*    product id, so the choice never depends on the order the store returned.
+*/
+function compareStoreNodeCandidates(a, b) {
+	const aLinked = Boolean(a.productId);
+	if (aLinked !== Boolean(b.productId)) return aLinked ? -1 : 1;
+	const downloads = (b.downloads ?? 0) - (a.downloads ?? 0);
+	if (downloads !== 0) return downloads;
+	const aPublished = publishedAtMs(a);
+	const bPublished = publishedAtMs(b);
+	if (aPublished !== bPublished) return aPublished > bPublished ? -1 : 1;
+	if (a.id === b.id) return 0;
+	return a.id < b.id ? -1 : 1;
+}
+/**
+* Map nodeType -> best store product (see compareStoreNodeCandidates).
+* Pure function, independent of the order of `products`.
+*/
+function buildStoreNodeTypeMap(products) {
+	const nodeTypeToProduct = /* @__PURE__ */ new Map();
+	for (const product of products) {
+		const nodeType = product.manifest?.nodeType;
+		if (typeof nodeType !== "string" || !nodeType) continue;
+		const current = nodeTypeToProduct.get(nodeType);
+		if (!current || compareStoreNodeCandidates(product, current) < 0) nodeTypeToProduct.set(nodeType, product);
+	}
+	return nodeTypeToProduct;
+}
+/**
+* Ask the global store which products offer `nodeTypes` and map each type to the
+* best one (see compareStoreNodeCandidates). Only the asked types travel: the
+* check used to page through the whole node catalog for them (BOFF-11754).
+*/
+async function fetchStoreNodeTypeMap(nodeTypes) {
+	const storeClient = getGlobalStoreClient();
+	if (!storeClient || nodeTypes.length === 0) return /* @__PURE__ */ new Map();
+	return buildStoreNodeTypeMap(await fetchStoreNodeProducts(nodeTypes, async (batch) => {
+		return (await storeClient.query({
+			query: StoreNodeProductsByTypeDocument,
+			variables: {
+				nodeTypes: batch,
+				compatibleWith: STORE_NODE_PRODUCT_CONTEXT
+			},
+			fetchPolicy: "cache-first"
+		})).data?.storeNodeProductsByType;
+	}));
+}
+/**
+* One required-node entry of a template (BOFF-11496): a type the registry
+* already has is BUILTIN at its registry version; any other type is a STORE
+* node at the node's own version from its store product. Versions are
+* canonical, never the product's manifest format version ("1.0").
+*/
+function requiredNodeEntry(type, registered, product) {
+	if (registered) return {
+		nodeType: type,
+		nodeVersion: canonicalNodeVersion(registered.version || "1.0.0"),
+		publishType: "BUILTIN",
+		displayName: type
+	};
+	return {
+		nodeType: type,
+		nodeVersion: storeNodeInstallVersion(product?.manifest, product?.manifestVersion),
+		publishType: "STORE",
+		storeProductId: product?.id,
+		displayName: product?.name ?? type,
+		requiresPurchase: product !== void 0 && product.pricingModel !== "FREE"
+	};
+}
+/**
+* Build the list of required node types for a workflow.
+*
+* - BUILTIN / already-installed types are marked BUILTIN.
+* - Missing types are looked up in the store; if found, they are marked STORE
+*   with storeProductId and requiresPurchase.
+* - Missing types not found in the store are still reported as STORE without
+*   a storeProductId so the UI can show "not installed".
+*/
+async function buildRequiredNodeTypes(nodes) {
+	const workflowNodeTypes = getWorkflowNodeTypes(nodes);
+	if (workflowNodeTypes.length === 0) return [];
+	const isRegistered = (type) => NODE_CONFIGS.some((c) => c.type === type);
+	await ensureRegistryNodeTypesLoaded(workflowNodeTypes);
+	const missingTypes = workflowNodeTypes.filter((type) => !isRegistered(type));
+	let nodeTypeToProduct = /* @__PURE__ */ new Map();
+	if (missingTypes.length > 0) [, nodeTypeToProduct] = await Promise.all([ensureInstalledNodeTypesLoaded(missingTypes), fetchStoreNodeTypeMap(missingTypes)]);
+	return workflowNodeTypes.map((type) => {
+		const registered = NODE_CONFIGS.find((c) => c.type === type);
+		return requiredNodeEntry(type, registered ? { version: registered.defaultData.version } : void 0, nodeTypeToProduct.get(type));
+	});
+}
+/**
+* Classify required nodes against the set of installed store app IDs.
+*
+* Pure function — easy to unit test.
+*/
+function buildNodeCheck(requiredNodeTypes, installedAppIds) {
+	const installed = requiredNodeTypes.filter((n) => n.publishType === "BUILTIN" || n.storeProductId && installedAppIds.has(n.storeProductId));
+	const notInstalled = requiredNodeTypes.filter((n) => n.publishType !== "BUILTIN" && (!n.storeProductId || !installedAppIds.has(n.storeProductId)));
+	const unavailable = notInstalled.filter((n) => !n.storeProductId);
+	const installable = notInstalled.filter((n) => !!n.storeProductId);
+	const missing = installable.filter((n) => !n.requiresPurchase);
+	const missingPaid = installable.filter((n) => !!n.requiresPurchase);
+	return {
+		installed,
+		missing,
+		missingPaid,
+		unavailable,
+		canImport: missingPaid.length === 0
+	};
+}
+
+// src/hooks/store/useTemplateImportFlow.tsx
+const LazyTemplateConfigurationModal = lazy(() => import("./TemplateConfigurationModal-BhGWIzpm.js").then((m) => ({ default: m.TemplateConfigurationModal })));
+/**
+* "Use this template", the same everywhere it is offered: the builder's
+* template panel, the Templates page and the template preview page
+* (BOFF-11153). Before this, only the builder panel checked the template's
+* nodes and asked for its inputs; the two pages created the copy directly.
+*
+* 1. Load the template's full detail and resolve its content.
+* 2. Check its required nodes against the workspace's installed nodes.
+* 3. When it asks for inputs or connections, or a node is not installed,
+*    show the configuration dialog; otherwise go straight on.
+* 4. Install the missing free nodes, create the copy with the user's inputs,
+*    and open it (`onImported`).
+*/
+function useTemplateImportFlow({ onImported, onQuotaExhausted }) {
+	const tr = useTr();
+	const { bus, workspaceId } = useFluidGridsAnalytics();
+	const { installedAppIds } = useInstalledNodes();
+	const { getTemplateDetail, importTemplate } = useImportWorkflowTemplate();
+	const [pending, setPending] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const [installProgress, setInstallProgress] = useState(null);
+	const installMissingNodes = useCallback(async (nodeCheck) => {
+		const nodes = nodesToInstall(nodeCheck);
+		const storeClient = getGlobalStoreClient();
+		if (nodes.length === 0 || !storeClient) return;
+		const config = getFluidGridsConfig();
+		await installNodesInOrder(nodes, async (node) => {
+			throwIfResultError(await storeClient.mutate({
+				mutation: InstallWorkflowNodeDocument,
+				variables: { input: {
+					productId: node.storeProductId ?? "",
+					workspaceId: config.workspaceId,
+					organizationId: config.tenantId,
+					version: node.nodeVersion,
+					manifest: null
+				} }
+			}));
+			emitNodeInstalled(bus, {
+				workspaceId,
+				nodeType: node.nodeType,
+				source: "store"
+			});
+		}, setInstallProgress, (node, err) => console.warn(`[useTemplateImportFlow] Failed to install node ${node.nodeType}:`, err));
+		setInstallProgress(null);
+	}, [bus, workspaceId]);
+	const createCopy = useCallback(async (template, content, nodeCheck, overrides) => {
+		setBusy(true);
+		try {
+			await installMissingNodes(nodeCheck);
+			toast.loading(tr("fluidgrids.builder.desktopSidebar.creatingWorkflowToast", "Creating workflow..."), { id: "template-import" });
+			const result = await importTemplate(template, {
+				content,
+				name: overrides?.name,
+				templateInputs: overrides?.templateInputs
+			});
+			toast.dismiss("template-import");
+			if (result.success && result.workflow) {
+				toast.success(tr("fluidgrids.builder.desktopSidebar.workflowCreatedToast", "Workflow created from template!"), { description: `"${result.workflow.name}" is ready to edit` });
+				if ((content.requiredCredentialTypes?.length ?? 0) > 0) toast.info(tr("fluidgrids.builder.desktopSidebar.credentialsNeededToast", "Credentials needed"), {
+					description: `Configure ${content.requiredCredentialTypes?.join(", ")} in the Credentials page`,
+					duration: 6e3
+				});
+				onImported(result.workflow);
+				return true;
+			}
+			if (onQuotaExhausted && isQuotaExhaustedFailure(result.error?.cause ?? result.error)) {
+				onQuotaExhausted();
+				return false;
+			}
+			toast.error(tr("fluidgrids.builder.desktopSidebar.importTemplateErrorToast", "Failed to import template"), { description: result.message || tr("fluidgrids.builder.desktopSidebar.importTemplateErrorFallback", "Unknown error during import") });
+			return false;
+		} catch (err) {
+			toast.dismiss("template-import");
+			toast.error(tr("fluidgrids.builder.desktopSidebar.importFailedToast", "Import failed"), { description: err instanceof Error ? err.message : tr("fluidgrids.builder.desktopSidebar.importFailedFallback", "Unknown error") });
+			return false;
+		} finally {
+			setInstallProgress(null);
+			setBusy(false);
+		}
+	}, [
+		importTemplate,
+		installMissingNodes,
+		onImported,
+		onQuotaExhausted,
+		tr
+	]);
+	const start = useCallback(async (template) => {
+		setBusy(true);
+		toast.loading(tr("fluidgrids.builder.desktopSidebar.loadingTemplateToast", "Loading template..."), { id: "template-load" });
+		try {
+			const full = await getTemplateDetail(template.id);
+			toast.dismiss("template-load");
+			if (!full) {
+				toast.error(tr("fluidgrids.builder.desktopSidebar.templateDetailsErrorToast", "Failed to load template details"));
+				return;
+			}
+			const content = await resolveTemplateContent(full, buildRequiredNodeTypes);
+			if (!content) {
+				toast.error(tr("fluidgrids.builder.desktopSidebar.invalidTemplateDataToast", "Template does not contain valid workflow data"));
+				return;
+			}
+			const nodeCheck = buildNodeCheck(content.requiredNodeTypes ?? [], installedAppIds);
+			if (needsTemplateConfiguration(content, nodeCheck)) {
+				setPending({
+					template: full,
+					content,
+					nodeCheck
+				});
+				return;
+			}
+			await createCopy(full, content, nodeCheck);
+		} catch (err) {
+			toast.dismiss("template-load");
+			toast.error(tr("fluidgrids.builder.desktopSidebar.genericErrorToast", "Something went wrong"), { description: err instanceof Error ? err.message : tr("fluidgrids.builder.desktopSidebar.genericErrorFallback", "Failed to process template") });
+		} finally {
+			setBusy(false);
+		}
+	}, [
+		createCopy,
+		getTemplateDetail,
+		installedAppIds,
+		tr
+	]);
+	const confirm = useCallback(async (config) => {
+		if (!pending?.nodeCheck.canImport) return;
+		if (await createCopy(pending.template, pending.content, pending.nodeCheck, config)) setPending(null);
+	}, [createCopy, pending]);
+	return {
+		start,
+		dialog: pending ? /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(LazyTemplateConfigurationModal, {
+				open: true,
+				onOpenChange: (open) => {
+					if (!open && !busy) setPending(null);
+				},
+				template: pending.template,
+				content: pending.content,
+				nodeCheckResult: pending.nodeCheck,
+				onConfirm: confirm,
+				importing: busy,
+				installProgress
+			})
+		}) : null,
+		busy
+	};
+}
+
+// src/ui/badge.tsx
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+		secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+		outline: "text-foreground",
+		success: "border-transparent bg-status-success-bg-subtle text-status-success-text",
+		warning: "border-transparent bg-status-warning-bg-subtle text-status-warning-text",
+		info: "border-transparent bg-status-info-bg-subtle text-status-info-text"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+// src/utils/template-preview.ts
+const ICONIFY_NAME = /^[a-z0-9]+(?:-[a-z0-9]+)*:[a-z0-9]+(?:[-_][a-z0-9]+)*$/i;
+/** True when the value is an Iconify `prefix:name` icon, not a URL. */
+function isIconifyName(value) {
+	return ICONIFY_NAME.test(value) && !/^(https?|data|blob):/i.test(value);
+}
+/**
+* The preview for a template: its first screenshot, else its icon, which is
+* shown as an image only when it is not an Iconify name.
+*/
+function templatePreview(template) {
+	const screenshot = template.screenshots?.find((shot) => typeof shot === "string" && shot.trim() !== "");
+	if (screenshot) return {
+		kind: "image",
+		src: screenshot
+	};
+	const icon = template.icon?.trim();
+	if (!icon) return { kind: "none" };
+	return isIconifyName(icon) ? {
+		kind: "icon",
+		name: icon
+	} : {
+		kind: "image",
+		src: icon
+	};
+}
+
+// src/builder/components/flow-builder/components/templates/TemplateCard.tsx
+function formatNumber(count) {
+	if (count >= 1e6) return `${(count / 1e6).toFixed(1)}M`;
+	if (count >= 1e3) return `${(count / 1e3).toFixed(1)}k`;
+	return count.toString();
+}
+/**
+* Template card component inspired by ComfyUI's template showcase
+* Features:
+* - Large preview image/screenshot
+* - Template name and description
+* - Author info
+* - Stats (downloads, views, rating)
+* - Featured badge
+* - Category/tags
+*/
+function TemplateCard({ template, onClick, onUseTemplate }) {
+	const tr = useTr();
+	const [imageError, setImageError] = React.useState(false);
+	const preview = templatePreview(template);
+	const previewImage = preview.kind === "image" ? preview.src : void 0;
+	const hasPreview = Boolean(previewImage) && !imageError;
+	const handleUseTemplate = (e) => {
+		e.stopPropagation();
+		onUseTemplate?.(template);
+	};
+	const handleImageError = () => {
+		setImageError(true);
+	};
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("group overflow-hidden transition-all duration-300 cursor-pointer", "hover:shadow-xl hover:scale-[1.02] border-2 hover:border-primary/50"),
+		onClick,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative aspect-video w-full overflow-hidden bg-gradient-to-br from-primary/5 to-primary/10",
+			children: [
+				hasPreview ? /* @__PURE__ */ jsx("img", {
+					src: previewImage,
+					alt: template.name,
+					onError: handleImageError,
+					className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "w-full h-full flex items-center justify-center",
+					children: preview.kind === "icon" ? /* @__PURE__ */ jsx(Icon, {
+						icon: preview.name,
+						width: 64,
+						height: 64,
+						className: "text-primary/60",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(Sparkles, { className: "size-16 text-primary/30" })
+				}),
+				template.featured && /* @__PURE__ */ jsx("div", {
+					className: "absolute top-2 right-2",
+					children: /* @__PURE__ */ jsxs(Badge, {
+						variant: "default",
+						className: "bg-status-warning-bg-subtle text-status-warning-text border border-status-warning-border shadow-lg",
+						children: [/* @__PURE__ */ jsx(Star, { className: "size-3 mr-1 fill-current" }), tr("fluidgrids.builder.templateCard.featuredBadge", "Featured")]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-2 left-2",
+					children: template.pricingModel === "FREE" ? /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "bg-status-success-bg text-action-primary-text border-0",
+						children: tr("fluidgrids.builder.templateCard.freeBadge", "Free")
+					}) : /* @__PURE__ */ jsxs(Badge, {
+						variant: "default",
+						className: "bg-status-info-bg text-action-primary-text border-0",
+						children: ["$", template.price?.toString() || "0"]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-bg-overlay via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "p-4 space-y-3",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "font-semibold text-base line-clamp-1 group-hover:text-primary transition-colors",
+					children: template.name
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]",
+					children: template.description || tr("fluidgrids.builder.templateCard.noDescription", "No description available")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: template.authorName || template.publisher?.name || tr("fluidgrids.builder.templateCard.unknownAuthor", "Unknown")
+					}), template.publisher?.isVerified && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "text-xs px-1.5 py-0",
+						children: "✓"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between text-xs text-muted-foreground pt-2 border-t",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex items-center gap-3",
+						children: template.rating && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ jsx(Star, { className: "size-3 fill-status-warning-bg text-status-warning-text" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "font-medium",
+									children: template.rating.toFixed(1)
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground/60",
+									children: [
+										"(",
+										template.reviewCount || 0,
+										")"
+									]
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							title: tr("fluidgrids.builder.templateCard.downloadsTooltip", "Downloads"),
+							children: [/* @__PURE__ */ jsx(Download, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: formatNumber(template.downloads || 0) })]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							title: tr("fluidgrids.builder.templateCard.viewsTooltip", "Views"),
+							children: [/* @__PURE__ */ jsx(Eye, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: formatNumber(template.viewCount || 0) })]
+						})]
+					})]
+				}),
+				(template.category || template.tags?.length > 0) && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-1",
+					children: [
+						template.category && /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							className: "text-xs",
+							children: template.category
+						}),
+						template.tags?.slice(0, 2).map((tag) => /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							className: "text-xs",
+							children: tag
+						}, tag)),
+						template.tags?.length > 2 && /* @__PURE__ */ jsxs(Badge, {
+							variant: "outline",
+							className: "text-xs",
+							children: ["+", template.tags.length - 2]
+						})
+					]
+				}),
+				/* @__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, {
+						size: "sm",
+						className: "w-full mt-2",
+						onClick: handleUseTemplate,
+						children: [/* @__PURE__ */ jsx(Sparkles, { className: "size-3 mr-1" }), tr("fluidgrids.builder.templateCard.useTemplateButton", "Use Template")]
+					})
+				})
+			]
+		})]
+	});
+}
+
+export { isDurableFunctionNodeType as A, CardFooter as C, RUN_CONTROL_NODE_TYPES as D, DURABLE_FUNCTION_NODE_TYPES as E, isRunControlNodeType as M, WORKFLOW_TEST_NODE_TYPES as O, CardDescription as S, CardTitle as T, storeNodeInstallVersion as _, useTemplateImportFlow as a, Card as b, getWorkflowNodeTypes as c, filterStoreNodesForPalette as d, getStoreNodeAvailability as f, storeNodeDisplayVersion as g, isStoreNodeUpdateAvailable as h, badgeVariants as i, isNodeTypeHiddenFromPalette as j, filterPaletteNodes as k, useImportWorkflowTemplate as l, getStoreNodeType as m, templatePreview as n, buildNodeCheck as o, getStoreNodeIcon as p, Badge as r, buildRequiredNodeTypes as s, TemplateCard as t, useWorkflowTemplates as u, useInstalledNodes as v, CardHeader as w, CardContent as x, useGlobalStoreClient as y };