@burdenoff/fluidgrids-fe-sdk 2026.1113.1 → 2026.1113.2

package/dist/app-BJUvugPM.js

@@ -0,0 +1,3813 @@
+"use client";
+import { a as mappingTypeColor, i as compatibilityColor, n as MAPPING_FALLBACK_COLOR, r as MAPPING_TYPE_COLORS, t as MAPPING_COMPATIBILITY_COLORS } from "./mapping-colors-BIX_YeCQ.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import * as React$1 from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Background, Controls, Handle, MiniMap, Panel, Position, ReactFlow, ReactFlowProvider, addEdge, getBezierPath, useEdgesState, useNodesState } from "@xyflow/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster } from "@burdenoff/fe-libs/ui";
+import { ThemeProvider } from "@burdenoff/fe-libs/shared/providers/shell";
+import "@xyflow/react/dist/style.css";
+import { AlertCircle, Braces, CheckCircle2, ChevronDown, ChevronRight, Code, Hash, List, PlusCircle, Type, Workflow, X } from "lucide-react";
+import { createPortal } from "react-dom";
+import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType, GraphQLList, GraphQLNonNull, GraphQLObjectType, GraphQLUnionType, buildSchema } from "graphql";
+
+// src/builder/components/mapper/theme-provider.tsx
+function ThemeProvider$1({ children, defaultTheme = "system", storageKey = "vite-ui-theme" }) {
+	React$1.useEffect(() => {
+		if (typeof window !== "undefined") try {
+			localStorage.removeItem(storageKey);
+		} catch (err) {
+			console.warn("Failed to clean up legacy theme storage:", err);
+		}
+	}, [storageKey]);
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		defaultMode: defaultTheme,
+		children
+	});
+}
+
+// src/builder/components/mapper/config/data.ts
+let parsedSchemas = {};
+let nodeTypes$1 = null;
+let typeCompatibility = null;
+let sampleData = null;
+let nodeStyles = null;
+let currentConfig = null;
+function initializeConfig(schemas, dataConfig) {
+	parsedSchemas = schemas;
+	currentConfig = dataConfig;
+	generateNodeTypes(dataConfig);
+	generateTypeCompatibilityFunc(dataConfig);
+	generateSampleDataFunc(dataConfig);
+	generateVisualStylesFunc(dataConfig);
+}
+function generateNodeTypes(dataConfig) {
+	const newNodeTypes = {
+		sourceNodes: {},
+		targetNodes: {}
+	};
+	Object.entries(dataConfig.nodes).forEach(([nodeKey, nodeInfo]) => {
+		const category = nodeInfo.category;
+		if (category === "source" || category === "both") newNodeTypes.sourceNodes[nodeKey] = {
+			displayName: nodeInfo.displayName,
+			schema: nodeKey,
+			inputTypes: [],
+			operations: []
+		};
+		if (category === "target" || category === "both") newNodeTypes.targetNodes[nodeKey] = {
+			displayName: nodeInfo.displayName,
+			schema: nodeKey,
+			inputTypes: [],
+			operations: []
+		};
+		if (!parsedSchemas[nodeKey]) {}
+		const schema = parsedSchemas[nodeKey];
+		if (schema) {
+			const operations = findOperationsWithStateArgs(schema);
+			const inputTypes = operations.map((op) => op.stateType).filter((type) => type !== null);
+			if (category === "both") {
+				newNodeTypes.sourceNodes[nodeKey].inputTypes = [...new Set(inputTypes)];
+				newNodeTypes.sourceNodes[nodeKey].operations = operations;
+				newNodeTypes.targetNodes[nodeKey].inputTypes = [...new Set(inputTypes)];
+				newNodeTypes.targetNodes[nodeKey].operations = operations;
+			} else if (category === "source") {
+				newNodeTypes.sourceNodes[nodeKey].inputTypes = [...new Set(inputTypes)];
+				newNodeTypes.sourceNodes[nodeKey].operations = operations;
+			} else if (category === "target") {
+				newNodeTypes.targetNodes[nodeKey].inputTypes = [...new Set(inputTypes)];
+				newNodeTypes.targetNodes[nodeKey].operations = operations;
+			}
+		}
+	});
+	nodeTypes$1 = newNodeTypes;
+}
+function findOperationsWithStateArgs(schema) {
+	const operations = [];
+	if (schema.queryType) {
+		const queryType = schema.types[schema.queryType];
+		if (queryType && queryType.fields) for (const fieldName in queryType.fields) {
+			const field = queryType.fields[fieldName];
+			if (fieldName === "__schema" || fieldName === "__type") continue;
+			const stateArg = field.args && field.args.find((arg) => arg.name === "state");
+			const contextArg = field.args && field.args.find((arg) => arg.name === "context");
+			if (!!stateArg && !!contextArg) operations.push({
+				name: fieldName,
+				type: "query",
+				returnType: field.type,
+				stateType: stateArg.type,
+				inputType: stateArg.type
+			});
+			else if (field.args && field.args.length > 0) {
+				const firstArg = field.args[0];
+				operations.push({
+					name: fieldName,
+					type: "query",
+					returnType: field.type,
+					stateType: firstArg.type,
+					inputType: firstArg.type
+				});
+			} else operations.push({
+				name: fieldName,
+				type: "query",
+				returnType: field.type,
+				stateType: null,
+				inputType: null
+			});
+		}
+		else console.warn(`Query type ${schema.queryType} not found or has no fields`);
+	}
+	if (schema.mutationType) {
+		const mutationType = schema.types[schema.mutationType];
+		if (mutationType && mutationType.fields) for (const fieldName in mutationType.fields) {
+			const field = mutationType.fields[fieldName];
+			const stateArg = field.args && field.args.find((arg) => arg.name === "state");
+			const contextArg = field.args && field.args.find((arg) => arg.name === "context");
+			if (!!stateArg && !!contextArg) operations.push({
+				name: fieldName,
+				type: "mutation",
+				returnType: field.type,
+				stateType: stateArg.type,
+				inputType: stateArg.type
+			});
+			else if (field.args && field.args.length > 0) {
+				const firstArg = field.args[0];
+				operations.push({
+					name: fieldName,
+					type: "mutation",
+					returnType: field.type,
+					stateType: firstArg.type,
+					inputType: firstArg.type
+				});
+			} else operations.push({
+				name: fieldName,
+				type: "mutation",
+				returnType: field.type,
+				stateType: null,
+				inputType: null
+			});
+		}
+		else console.warn(`Mutation type ${schema.mutationType} not found or has no fields`);
+	}
+	return operations;
+}
+function generateTypeCompatibilityFunc(dataConfig) {
+	typeCompatibility = dataConfig.typeCompatibility;
+}
+function generateSampleDataFunc(dataConfig) {
+	sampleData = dataConfig.sampleData;
+}
+function generateVisualStylesFunc(dataConfig) {
+	const newNodeStyles = {};
+	Object.entries(dataConfig.nodes).forEach(([nodeKey, nodeInfo]) => {
+		newNodeStyles[nodeKey] = nodeInfo.style || {};
+	});
+	nodeStyles = newNodeStyles;
+}
+function getEdgeColor(mappingType, compatible = true) {
+	const colorConfig = currentConfig?.mappingTypes[mappingType]?.color;
+	if (!colorConfig) return null;
+	return typeof colorConfig === "string" ? colorConfig : compatible ? colorConfig.compatible : colorConfig.incompatible;
+}
+function getReturnTypeForOperation(nodeType, operationName) {
+	return ((nodeTypes$1?.targetNodes[nodeType] || nodeTypes$1?.sourceNodes[nodeType])?.operations?.find((op) => op.name === operationName))?.returnType;
+}
+function getNodeStyle(nodeType, side) {
+	if (!nodeStyles || !nodeStyles[nodeType]) return "";
+	const styles = nodeStyles[nodeType];
+	if (side) return (side === "source" ? styles.source : styles.target) || "";
+	return styles;
+}
+function getInputTypeForOperation(nodeType, operationName) {
+	return ((nodeTypes$1?.targetNodes[nodeType] || nodeTypes$1?.sourceNodes[nodeType])?.operations?.find((op) => op.name === operationName))?.inputType;
+}
+function getTypeCompatibility() {
+	return typeCompatibility || {};
+}
+
+// src/builder/components/lib/type-utils.ts
+function areTypesCompatible(sourceType, targetType) {
+	const cleanSourceType = sourceType.replace(/!$/, "").replace(/^\[/, "").replace(/\]!?$/, "");
+	const cleanTargetType = targetType.replace(/!$/, "").replace(/\]!?$/, "");
+	if (cleanSourceType === cleanTargetType) return true;
+	return getTypeCompatibility()[cleanSourceType]?.includes(cleanTargetType) || false;
+}
+function getReadableTypeName(type) {
+	const isNonNull = type.endsWith("!");
+	const isList = type.includes("[");
+	let result = type.replace(/!$/, "").replace(/^\[/, "").replace(/\]!?$/, "");
+	if (isList) result = `Array of ${result}`;
+	if (isNonNull) result = `${result} (Required)`;
+	return result;
+}
+
+// src/builder/components/mapper/schema-node.tsx
+const SchemaNode = memo(({ data, isConnectable }) => {
+	const { label, type, side, isRequired, isNested, isArray, nodeType, category } = data;
+	const readableType = getReadableTypeName(type);
+	const borderColor = getNodeStyle(nodeType || "", side);
+	const bgColor = side === "source" ? "bg-surface hover:bg-[var(--color-bg-accent)]/10 transition-colors duration-200" : "bg-surface hover:bg-[var(--color-status-success-bg-subtle)] transition-colors duration-200";
+	const categoryColor = getCategoryColor(category);
+	return /* @__PURE__ */ jsxs(Card, {
+		className: `w-56 shadow-sm ${borderColor} ${bgColor} transition-colors duration-200`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `flex items-center px-2 py-1 border-b ${categoryColor}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 font-medium text-xs truncate",
+					title: label,
+					children: label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-1 flex-shrink-0",
+					children: [
+						isRequired && /* @__PURE__ */ jsx(Badge, {
+							variant: "destructive",
+							className: "text-[10px] px-1 py-0",
+							children: "Req"
+						}),
+						isArray && /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "text-[10px] px-1 py-0",
+							children: "Array"
+						}),
+						isNested && /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							className: "text-[10px] px-1 py-0",
+							children: "Obj"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(CardContent, {
+				className: "p-1 text-[10px] text-muted-foreground",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						title: readableType,
+						children: readableType
+					}), category && /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						className: "text-[10px] px-1 py-0",
+						style: { backgroundColor: getCategoryBgColor(category) },
+						children: category
+					})]
+				})
+			}),
+			side === "source" ? /* @__PURE__ */ jsx(Handle, {
+				type: "source",
+				position: Position.Right,
+				isConnectable,
+				className: "w-2 h-2 bg-accent transition-transform hover:scale-125"
+			}) : /* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: Position.Left,
+				isConnectable,
+				className: "w-2 h-2 bg-[var(--color-status-success-bg)] transition-transform hover:scale-125"
+			})
+		]
+	});
+});
+function getCategoryColor(category) {
+	if (!category) return "";
+	switch (category.toLowerCase()) {
+		case "input": return "border-[var(--color-border-accent)]/50 bg-[var(--color-bg-accent)]/10";
+		case "metadata": return "border-[var(--color-status-warning-border)]/50 bg-[var(--color-status-warning-bg-subtle)]";
+		case "context": return "border-[var(--color-status-success-border)]/50 bg-[var(--color-status-success-bg-subtle)]";
+		case "output": return "border-[var(--color-border-accent)]/30 bg-[var(--color-bg-accent)]/5";
+		case "config": return "border-[var(--color-status-error-border)]/50 bg-[var(--color-status-error-bg-subtle)]";
+		default: return "border-default";
+	}
+}
+/** Translucent category tint for the field badge (semantic tokens, light + dark). */
+function getCategoryBgColor(category) {
+	switch (category.toLowerCase()) {
+		case "input": return "var(--color-node-integration-subtle)";
+		case "metadata": return "var(--color-status-warning-bgSubtle)";
+		case "context": return "var(--color-status-success-bgSubtle)";
+		case "output": return "var(--color-status-info-bgSubtle)";
+		case "config": return "var(--color-status-error-bgSubtle)";
+		default: return "var(--color-bg-sunken)";
+	}
+}
+SchemaNode.displayName = "SchemaNode";
+
+// src/builder/components/mapper/mapping-edge.tsx
+const MappingEdge = memo(({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, style = {}, markerEnd }) => {
+	const [edgePath, labelX, labelY] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+	const mappingType = data?.mappingType || "direct";
+	const isCompatible = data?.isCompatible !== false;
+	let mappingLabel = "";
+	const mappingColor = getEdgeColor(mappingType, isCompatible) || MAPPING_FALLBACK_COLOR;
+	switch (mappingType) {
+		case "direct":
+			mappingLabel = "Direct";
+			break;
+		case "expression":
+			mappingLabel = "Expression";
+			break;
+		case "transform":
+			mappingLabel = data?.mappingData?.function ? `Transform: ${data.mappingData.function}` : "Transform";
+			break;
+		case "loop":
+			mappingLabel = "Loop";
+			break;
+		case "cast": mappingLabel = data?.mappingData?.type ? `Cast: ${data.mappingData.type}` : "Cast";
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
+		id,
+		style: {
+			...style,
+			stroke: mappingColor,
+			strokeWidth: 2
+		},
+		className: "react-flow__edge-path",
+		d: edgePath,
+		markerEnd
+	}), /* @__PURE__ */ jsx("foreignObject", {
+		width: 120,
+		height: 40,
+		x: labelX - 60,
+		y: labelY - 20,
+		className: "overflow-visible",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center bg-surface border border-default rounded-md shadow-sm px-2 py-1",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "text-xs font-medium",
+				style: { color: mappingColor },
+				children: [mappingLabel, !isCompatible && mappingType === "direct" && " ⚠️"]
+			})
+		})
+	})] });
+});
+MappingEdge.displayName = "MappingEdge";
+
+// src/builder/components/mapper/node-group.tsx
+const NodeGroup = memo(({ data, children }) => {
+	const { label, nodeType, side } = data;
+	const bgColor = side === "source" ? "bg-[var(--color-bg-accent)]/10" : "bg-[var(--color-status-success-bg-subtle)]";
+	const borderColor = side === "source" ? "border-[var(--color-border-accent)]" : "border-[var(--color-status-success-border)]";
+	const textColor = side === "source" ? "text-accent" : "text-[var(--color-status-success-text)]";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `px-4 pt-12 pb-4 rounded-lg border-2 ${borderColor} ${bgColor} min-w-[400px] min-h-[600px] shadow-md relative overflow-visible bg-gradient-to-b ${side === "source" ? "from-[var(--color-bg-accent)]/20 to-transparent" : "from-[var(--color-status-success-bg-subtle)]/50 to-transparent"}`,
+		style: { minHeight: "600px" },
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `absolute top-0 left-0 right-0 ${textColor} font-semibold p-2 border-b ${borderColor} text-center bg-surface/70 backdrop-blur-sm rounded-t-lg flex items-center justify-center`,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-sm",
+				children: [
+					label,
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-xs opacity-75",
+						children: [
+							"(",
+							nodeType,
+							")"
+						]
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative w-full h-full overflow-visible",
+			children
+		})]
+	});
+});
+NodeGroup.displayName = "NodeGroup";
+
+// src/builder/components/lib/node-generator.ts
+/**
+* Find the return type for an operation directly from the schema
+*/
+function findReturnTypeFromSchema(schema, operationName) {
+	if (schema.queryType && schema.types[schema.queryType]?.fields[operationName]) return schema.types[schema.queryType].fields[operationName].type;
+	if (schema.mutationType && schema.types[schema.mutationType]?.fields[operationName]) return schema.types[schema.mutationType].fields[operationName].type;
+	return null;
+}
+function findInputTypeFromSchema(schema, operationName) {
+	let field = null;
+	if (schema.queryType && schema.types[schema.queryType]?.fields[operationName]) field = schema.types[schema.queryType].fields[operationName];
+	if (!field && schema.mutationType && schema.types[schema.mutationType]?.fields[operationName]) field = schema.types[schema.mutationType].fields[operationName];
+	if (!field) return {
+		typeName: null,
+		useArgsDirectly: false,
+		field: null
+	};
+	const stateArg = field.args?.find((a) => a.name === "state" || a.name === "input");
+	if (stateArg) {
+		const inputType = schema.types[stateArg.type];
+		if (inputType && (inputType.inputFields || inputType.fields)) return {
+			typeName: stateArg.type,
+			useArgsDirectly: false,
+			field
+		};
+	}
+	if (field.args && field.args.length > 0) {
+		const firstArg = field.args[0];
+		const firstArgType = schema.types[firstArg.type];
+		if (firstArgType && firstArgType.kind === "input" && (firstArgType.inputFields || firstArgType.fields)) return {
+			typeName: firstArg.type,
+			useArgsDirectly: false,
+			field
+		};
+	}
+	if (field.args && field.args.length > 0) return {
+		typeName: null,
+		useArgsDirectly: true,
+		field
+	};
+	return {
+		typeName: null,
+		useArgsDirectly: false,
+		field: null
+	};
+}
+/**
+* Generate schema nodes for visual mapping
+*/
+function generateSchemaNodes(sourceSchema, sourceNode, sourceOperation, targetSchema, targetNode, targetOperation) {
+	const nodes = [];
+	const edges = [];
+	if (targetSchema?.mutationType && targetSchema?.types[targetSchema.mutationType]) {
+		const mutationField = targetSchema.types[targetSchema.mutationType].fields?.[targetOperation];
+		if (mutationField?.args) {
+			for (const arg of mutationField.args) if (targetSchema.types[arg.type]?.inputFields) {}
+		}
+	}
+	let sourceOutputType = null;
+	const sourceReturnTypeName = findReturnTypeFromSchema(sourceSchema, sourceOperation);
+	if (sourceReturnTypeName) sourceOutputType = sourceSchema.types[sourceReturnTypeName];
+	if (!sourceOutputType) for (const typeName of Object.keys(sourceSchema.types)) {
+		const type = sourceSchema.types[typeName];
+		if (type.kind === "type" && type.fields && Object.keys(type.fields).length > 0) {
+			if (typeName === sourceSchema.queryType || typeName === sourceSchema.mutationType || typeName === sourceSchema.subscriptionType) continue;
+			sourceOutputType = type;
+			break;
+		}
+	}
+	let targetInputType = null;
+	let useArgsDirectlyForTarget = false;
+	let targetOperationField = null;
+	const targetInputResult = findInputTypeFromSchema(targetSchema, targetOperation);
+	if (targetInputResult.typeName) targetInputType = targetSchema.types[targetInputResult.typeName];
+	else if (targetInputResult.useArgsDirectly && targetInputResult.field) {
+		useArgsDirectlyForTarget = true;
+		targetOperationField = targetInputResult.field;
+	}
+	if (!targetInputType && !useArgsDirectlyForTarget) for (const typeName of Object.keys(targetSchema.types)) {
+		const type = targetSchema.types[typeName];
+		if (type.kind === "input" && (type.inputFields || type.fields)) {
+			targetInputType = type;
+			break;
+		}
+	}
+	const sourceGroupNode = {
+		id: "source-group",
+		type: "nodeGroup",
+		position: {
+			x: 50,
+			y: 50
+		},
+		style: {
+			width: 450,
+			height: 800
+		},
+		data: {
+			label: `Source: ${sourceOperation}`,
+			nodeType: sourceNode,
+			side: "source"
+		}
+	};
+	const targetGroupNode = {
+		id: "target-group",
+		type: "nodeGroup",
+		position: {
+			x: 650,
+			y: 50
+		},
+		style: {
+			width: 450,
+			height: 800
+		},
+		data: {
+			label: `Target: ${targetOperation}`,
+			nodeType: targetNode,
+			side: "target"
+		}
+	};
+	nodes.push(sourceGroupNode, targetGroupNode);
+	const yPos = 70;
+	const sourceFields = sourceOutputType?.fields || {};
+	if (Object.keys(sourceFields).length === 0) {
+		console.warn("No source fields found for", sourceNode, sourceOperation);
+		nodes.push({
+			id: `source-placeholder`,
+			position: {
+				x: 100,
+				y: 70
+			},
+			data: {
+				label: "No fields available",
+				type: "String",
+				path: "placeholder",
+				side: "source",
+				isRequired: false,
+				isNested: false,
+				isArray: false,
+				nodeType: sourceNode
+			},
+			type: "schemaNode",
+			parentId: "source-group",
+			extent: "parent"
+		});
+	}
+	const generateFieldNodes = (fields, parentPath = "", xPos, startYPos, side, parentNodeType, schema) => {
+		let currentYPos = startYPos;
+		const generatedNodes = [];
+		const xOffset = 100;
+		const categorizedFields = {
+			input: {},
+			metadata: {},
+			context: {},
+			output: {},
+			config: {},
+			other: {}
+		};
+		for (const fieldName in fields) {
+			const field = fields[fieldName];
+			if (fieldName.toLowerCase().includes("input") || fieldName.toLowerCase().includes("request")) categorizedFields.input[fieldName] = field;
+			else if (fieldName.toLowerCase().includes("metadata") || fieldName.toLowerCase().includes("meta")) categorizedFields.metadata[fieldName] = field;
+			else if (fieldName.toLowerCase().includes("context") || fieldName.toLowerCase().includes("ctx")) categorizedFields.context[fieldName] = field;
+			else if (fieldName.toLowerCase().includes("output") || fieldName.toLowerCase().includes("response") || fieldName.toLowerCase().includes("result")) categorizedFields.output[fieldName] = field;
+			else if (fieldName.toLowerCase().includes("config") || fieldName.toLowerCase().includes("setting") || fieldName.toLowerCase().includes("option")) categorizedFields.config[fieldName] = field;
+			else categorizedFields.other[fieldName] = field;
+		}
+		const categories = Object.keys(categorizedFields);
+		for (const category of categories) {
+			const categoryFields = categorizedFields[category];
+			if (Object.keys(categoryFields).length === 0) continue;
+			if (generatedNodes.length > 0) currentYPos += 20;
+			for (const fieldName in categoryFields) {
+				const field = categoryFields[fieldName];
+				const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+				const node = {
+					id: `${side}-${fullPath}`,
+					position: {
+						x: xOffset,
+						y: currentYPos
+					},
+					data: {
+						label: fieldName,
+						type: field.type,
+						path: fullPath,
+						side,
+						isRequired: field.isNonNull,
+						isNested: isComplexType(schema, field.type),
+						isArray: field.isList,
+						nodeType: parentNodeType,
+						category: category !== "other" ? category : void 0
+					},
+					type: "schemaNode",
+					parentId: side === "source" ? "source-group" : "target-group",
+					extent: "parent"
+				};
+				generatedNodes.push(node);
+				currentYPos += 70;
+				if (isComplexType(schema, field.type) && schema.types[field.type]) {
+					const nestedFields = schema.types[field.type].fields || {};
+					if (Object.keys(nestedFields).length > 0) {
+						const nestedNodes = generateFieldNodes(nestedFields, fullPath, xPos + (side === "source" ? 150 : -150), currentYPos - 20, side, parentNodeType, schema);
+						generatedNodes.push(...nestedNodes);
+						currentYPos += nestedNodes.length * 60 + 30;
+					}
+				}
+			}
+		}
+		return generatedNodes;
+	};
+	const sourceNodes = generateFieldNodes(sourceFields, "", 100, yPos, "source", sourceNode, sourceSchema);
+	nodes.push(...sourceNodes);
+	const targetFields = {};
+	if (useArgsDirectlyForTarget && targetOperationField?.args) for (const arg of targetOperationField.args) targetFields[arg.name] = {
+		name: arg.name,
+		type: arg.type,
+		isNonNull: arg.isNonNull || false,
+		isList: arg.isList || false,
+		args: []
+	};
+	else if (targetInputType) {
+		const inputFieldsSource = targetInputType.inputFields || targetInputType.fields || {};
+		for (const fieldName of Object.keys(inputFieldsSource)) {
+			const field = inputFieldsSource[fieldName];
+			targetFields[fieldName] = {
+				name: field.name,
+				type: field.type,
+				isNonNull: field.isNonNull,
+				isList: field.isList,
+				args: field.args || []
+			};
+		}
+	}
+	if (Object.keys(targetFields).length === 0) {
+		const processOperationArgs = (operationField) => {
+			if (!operationField?.args || operationField.args.length === 0) return false;
+			const inputArg = operationField.args.find((a) => a.name === "input" || a.name === "state");
+			if (inputArg) {
+				const inputType = targetSchema.types[inputArg.type];
+				if (inputType && inputType.kind === "input" && inputType.inputFields) {
+					for (const fieldName of Object.keys(inputType.inputFields)) {
+						const field = inputType.inputFields[fieldName];
+						targetFields[fieldName] = {
+							name: field.name || fieldName,
+							type: field.type,
+							isNonNull: field.isNonNull || false,
+							isList: field.isList || false,
+							args: []
+						};
+					}
+					return true;
+				}
+			}
+			if (operationField.args.length > 0) {
+				const firstArg = operationField.args[0];
+				const firstArgType = targetSchema.types[firstArg.type];
+				if (firstArgType && firstArgType.kind === "input" && firstArgType.inputFields) {
+					for (const fieldName of Object.keys(firstArgType.inputFields)) {
+						const field = firstArgType.inputFields[fieldName];
+						targetFields[fieldName] = {
+							name: field.name || fieldName,
+							type: field.type,
+							isNonNull: field.isNonNull || false,
+							isList: field.isList || false,
+							args: []
+						};
+					}
+					return true;
+				}
+			}
+			for (const arg of operationField.args) targetFields[arg.name] = {
+				name: arg.name,
+				type: arg.type,
+				isNonNull: arg.isNonNull || false,
+				isList: arg.isList || false,
+				args: []
+			};
+			return true;
+		};
+		if (targetSchema.mutationType && targetSchema.types[targetSchema.mutationType]) {
+			const mutationField = targetSchema.types[targetSchema.mutationType].fields?.[targetOperation];
+			if (mutationField) processOperationArgs(mutationField);
+		}
+		if (Object.keys(targetFields).length === 0 && targetSchema.queryType && targetSchema.types[targetSchema.queryType]) {
+			const queryField = targetSchema.types[targetSchema.queryType].fields?.[targetOperation];
+			if (queryField) processOperationArgs(queryField);
+		}
+	}
+	if (Object.keys(targetFields).length === 0) {
+		console.warn("No target fields found for", targetNode, targetOperation);
+		nodes.push({
+			id: `target-placeholder`,
+			position: {
+				x: 100,
+				y: 70
+			},
+			data: {
+				label: "No fields available",
+				type: "String",
+				path: "placeholder",
+				side: "target",
+				isRequired: false,
+				isNested: false,
+				isArray: false,
+				nodeType: targetNode
+			},
+			type: "schemaNode",
+			parentId: "target-group",
+			extent: "parent"
+		});
+	}
+	const targetNodes = generateFieldNodes(targetFields, "", 100, yPos, "target", targetNode, targetSchema);
+	nodes.push(...targetNodes);
+	if (sourceNodes.length > 0) {
+		const maxSourceY = Math.max(...sourceNodes.map((node) => {
+			return node.position.y;
+		})) + 150;
+		if (sourceGroupNode.style) sourceGroupNode.style.height = Math.max(maxSourceY, 600);
+		const maxSourceX = Math.max(...sourceNodes.map((node) => node.position.x + 300));
+		if (sourceGroupNode.style) sourceGroupNode.style.width = Math.max(maxSourceX, 400);
+	}
+	if (targetNodes.length > 0) {
+		const maxTargetY = Math.max(...targetNodes.map((node) => {
+			return node.position.y;
+		})) + 150;
+		if (targetGroupNode.style) targetGroupNode.style.height = Math.max(maxTargetY, 600);
+		const maxTargetX = Math.max(...targetNodes.map((node) => node.position.x + 300));
+		if (targetGroupNode.style) targetGroupNode.style.width = Math.max(maxTargetX, 400);
+	}
+	return {
+		nodes,
+		edges
+	};
+}
+function isComplexType(schema, typeName) {
+	const type = schema.types[typeName];
+	if (!type) return false;
+	return type.kind === "type" || type.kind === "input";
+}
+
+// src/builder/components/hooks/use-toast.ts
+const TOAST_LIMIT = 5;
+const TOAST_REMOVE_DELAY = 1e6;
+const actionTypes = {
+	ADD_TOAST: "ADD_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST"
+};
+let count = 0;
+function genId() {
+	count = (count + 1) % Number.MAX_VALUE;
+	return count.toString();
+}
+const toastTimeouts = /* @__PURE__ */ new Map();
+const reducer = (state, action) => {
+	switch (action.type) {
+		case actionTypes.ADD_TOAST: return {
+			...state,
+			toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+		};
+		case actionTypes.UPDATE_TOAST: return {
+			...state,
+			toasts: state.toasts.map((t) => t.id === action.toast.id ? {
+				...t,
+				...action.toast
+			} : t)
+		};
+		case actionTypes.DISMISS_TOAST: {
+			const { toastId } = action;
+			if (toastId) addToRemoveQueue(toastId);
+			else state.toasts.forEach((toast) => {
+				addToRemoveQueue(toast.id);
+			});
+			return {
+				...state,
+				toasts: state.toasts.map((t) => t.id === toastId || toastId === void 0 ? {
+					...t,
+					open: false
+				} : t)
+			};
+		}
+		case actionTypes.REMOVE_TOAST:
+			if (action.toastId === void 0) return {
+				...state,
+				toasts: []
+			};
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId)
+			};
+	}
+};
+const listeners = [];
+let memoryState = { toasts: [] };
+function dispatch(action) {
+	memoryState = reducer(memoryState, action);
+	listeners.forEach((listener) => {
+		listener(memoryState);
+	});
+}
+function toast({ ...props }) {
+	const id = genId();
+	const update = (props) => dispatch({
+		type: actionTypes.UPDATE_TOAST,
+		toast: {
+			...props,
+			id
+		}
+	});
+	const dismiss = () => dispatch({
+		type: actionTypes.DISMISS_TOAST,
+		toastId: id
+	});
+	dispatch({
+		type: actionTypes.ADD_TOAST,
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss();
+			}
+		}
+	});
+	return {
+		id,
+		dismiss,
+		update
+	};
+}
+function useToast() {
+	const [state, setState] = React$1.useState(memoryState);
+	React$1.useEffect(() => {
+		listeners.push(setState);
+		return () => {
+			const index = listeners.indexOf(setState);
+			if (index > -1) listeners.splice(index, 1);
+		};
+	}, [state]);
+	return {
+		...state,
+		toast,
+		dismiss: (toastId) => dispatch({
+			type: actionTypes.DISMISS_TOAST,
+			toastId
+		})
+	};
+}
+function addToRemoveQueue(toastId) {
+	if (toastTimeouts.has(toastId)) return;
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId);
+		dispatch({
+			type: actionTypes.REMOVE_TOAST,
+			toastId
+		});
+	}, TOAST_REMOVE_DELAY);
+	toastTimeouts.set(toastId, timeout);
+}
+
+// src/builder/components/mapper/config/data-config-context.tsx
+const DataConfigContext = createContext(null);
+function DataConfigProvider({ children, config }) {
+	return /* @__PURE__ */ jsx(DataConfigContext.Provider, {
+		value: config,
+		children
+	});
+}
+function useDataConfig() {
+	const context = useContext(DataConfigContext);
+	if (!context) {
+		console.warn("useDataConfig: No DataConfigProvider found, using empty config");
+		return {
+			nodes: {},
+			mappingTypes: {},
+			typeCompatibility: {},
+			sampleData: {}
+		};
+	}
+	return context;
+}
+
+// src/builder/components/mapper/mapping-dialog.tsx
+function MappingDialog(props) {
+	if (!props.open) return null;
+	const dialogKey = `${props.mappingType}-${props.sourceField || ""}-${props.targetField || ""}`;
+	return /* @__PURE__ */ jsx(MappingDialogContent, { ...props }, dialogKey);
+}
+function MappingDialogContent({ open, onOpenChange, onSave, mappingType, sourceField, targetField, sourceSchema, sourceOperation, targetSchema, targetOperation }) {
+	const [expression, setExpression] = useState(() => sourceField ? `\${output.${sourceField}}` : "");
+	const [selectedExample, setSelectedExample] = useState("");
+	const [activeTab, setActiveTab] = useState(() => mappingType === "array" || mappingType === "object" ? "builder" : "examples");
+	const [targetFieldName, setTargetFieldName] = useState(() => targetField || "");
+	const [selectedSourceArray, setSelectedSourceArray] = useState("");
+	const [itemExpression, setItemExpression] = useState("");
+	const dataConfig = useDataConfig();
+	const tr = useTr();
+	const sourceFields = useMemo(() => {
+		if (!sourceSchema) return [];
+		const fields = [];
+		const extractFields = (typeName, parentPath = "", depth = 0) => {
+			if (depth > 3) return [];
+			const typeInfo = sourceSchema.types[typeName];
+			if (!typeInfo || !typeInfo.fields) return [];
+			const result = [];
+			for (const fieldName in typeInfo.fields) {
+				const field = typeInfo.fields[fieldName];
+				const fieldPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+				const fieldInfo = {
+					path: fieldPath,
+					name: fieldName,
+					type: field.type,
+					isList: field.isList || false,
+					isNonNull: field.isNonNull || false
+				};
+				if (sourceSchema.types[field.type] && sourceSchema.types[field.type].kind === "type") fieldInfo.children = extractFields(field.type, fieldPath, depth + 1);
+				result.push(fieldInfo);
+			}
+			return result;
+		};
+		const queryType = sourceSchema.types[sourceSchema.queryType || "Query"];
+		if (queryType && queryType.fields && sourceOperation) {
+			const operationField = queryType.fields[sourceOperation];
+			if (operationField) {
+				const returnType = operationField.type;
+				if (sourceSchema.types[returnType]) return extractFields(returnType, sourceOperation);
+			}
+		}
+		for (const typeName in sourceSchema.types) if (sourceSchema.types[typeName].kind === "type" && !typeName.startsWith("_") && typeName !== "Query" && typeName !== "Mutation") fields.push(...extractFields(typeName, ""));
+		return fields;
+	}, [sourceSchema, sourceOperation]);
+	const arrayFields = useMemo(() => {
+		const arrays = [];
+		const collectArrays = (fields, prefix = "") => {
+			for (const field of fields) {
+				if (field.isList) arrays.push({
+					...field,
+					path: prefix ? `${prefix}.${field.path}` : field.path
+				});
+				if (field.children) collectArrays(field.children, prefix);
+			}
+		};
+		collectArrays(sourceFields);
+		return arrays;
+	}, [sourceFields]);
+	const arrayItemFields = useMemo(() => {
+		if (!selectedSourceArray || !sourceSchema) return [];
+		const findField = (fields, path) => {
+			for (const field of fields) {
+				if (field.path === path) return field;
+				if (field.children) {
+					const found = findField(field.children, path);
+					if (found) return found;
+				}
+			}
+			return null;
+		};
+		const arrayField = findField(sourceFields, selectedSourceArray);
+		if (!arrayField) return [];
+		const itemType = sourceSchema.types[arrayField.type];
+		if (!itemType || !itemType.fields) return [];
+		const result = [];
+		const extractNestedFields = (typeName, parentPath = "", currentDepth = 0) => {
+			if (currentDepth > 2) return;
+			const type = sourceSchema?.types[typeName];
+			if (!type || !type.fields) return;
+			for (const fieldName in type.fields) {
+				const field = type.fields[fieldName];
+				const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+				result.push({
+					name: fieldName,
+					type: field.type,
+					path: fullPath,
+					isNested: currentDepth > 0
+				});
+				const fieldType = sourceSchema?.types[field.type];
+				if (fieldType && fieldType.kind === "type" && !field.isList) extractNestedFields(field.type, fullPath, currentDepth + 1);
+			}
+		};
+		extractNestedFields(arrayField.type);
+		return result;
+	}, [
+		selectedSourceArray,
+		sourceFields,
+		sourceSchema
+	]);
+	const targetFields = useMemo(() => {
+		if (!targetSchema) return [];
+		const fields = [];
+		const extractFields = (typeName, parentPath = "", depth = 0) => {
+			if (depth > 3) return [];
+			const typeInfo = targetSchema.types[typeName];
+			if (!typeInfo) return [];
+			const fieldsObj = typeInfo.inputFields || typeInfo.fields;
+			if (!fieldsObj) return [];
+			const result = [];
+			for (const fieldName in fieldsObj) {
+				const field = fieldsObj[fieldName];
+				const fieldPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+				const fieldInfo = {
+					path: fieldPath,
+					name: fieldName,
+					type: field.type,
+					isList: field.isList || false,
+					isNonNull: field.isNonNull || false
+				};
+				if (targetSchema.types[field.type]) {
+					const nestedType = targetSchema.types[field.type];
+					if (nestedType.kind === "type" || nestedType.kind === "input") fieldInfo.children = extractFields(field.type, fieldPath, depth + 1);
+				}
+				result.push(fieldInfo);
+			}
+			return result;
+		};
+		const mutationType = targetSchema.types[targetSchema.mutationType || "Mutation"];
+		const queryType = targetSchema.types[targetSchema.queryType || "Query"];
+		if (targetOperation) {
+			if (mutationType?.fields?.[targetOperation]) {
+				const operationField = mutationType.fields[targetOperation];
+				if (operationField.args && operationField.args.length > 0) for (const arg of operationField.args) if (targetSchema.types[arg.type]) fields.push(...extractFields(arg.type, ""));
+				else fields.push({
+					path: arg.name,
+					name: arg.name,
+					type: arg.type,
+					isList: arg.isList || false,
+					isNonNull: arg.isNonNull || false
+				});
+			}
+			if (queryType?.fields?.[targetOperation]) {
+				const operationField = queryType.fields[targetOperation];
+				if (operationField.args && operationField.args.length > 0) for (const arg of operationField.args) if (targetSchema.types[arg.type]) fields.push(...extractFields(arg.type, ""));
+				else fields.push({
+					path: arg.name,
+					name: arg.name,
+					type: arg.type,
+					isList: arg.isList || false,
+					isNonNull: arg.isNonNull || false
+				});
+			}
+		}
+		return fields;
+	}, [targetSchema, targetOperation]);
+	const handleSourceArrayChange = (value) => {
+		setSelectedSourceArray(value);
+		if (mappingType === "array" && value && itemExpression) setExpression(`\${output.${value}.map(item => item.${itemExpression})}`);
+	};
+	const handleItemExpressionChange = (value) => {
+		setItemExpression(value);
+		if (mappingType === "array" && selectedSourceArray && value) setExpression(`\${output.${selectedSourceArray}.map(item => item.${value})}`);
+	};
+	const getMappingTypeConfig = () => {
+		return dataConfig?.mappingTypes?.[mappingType] || {};
+	};
+	const mappingTypeConfig = getMappingTypeConfig();
+	const examples = mappingTypeConfig.examples || [];
+	const safeBuiltins = mappingTypeConfig.safeBuiltins || [];
+	const isFormValid = useMemo(() => {
+		if (!targetFieldName.trim()) return false;
+		if (!expression.trim()) return false;
+		return true;
+	}, [targetFieldName, expression]);
+	const getValidationMessage = () => {
+		const missing = [];
+		if (!targetFieldName.trim()) missing.push(tr("fluidgrids.builder.mappingDialog.missingTargetFieldName", "target field name"));
+		if (!expression.trim()) missing.push(tr("fluidgrids.builder.mappingDialog.missingExpression", "expression"));
+		if (missing.length === 0) return null;
+		return `${tr("fluidgrids.builder.mappingDialog.validationPrefix", "Please provide:")} ${missing.join(", ")}`;
+	};
+	const handleExampleChange = (exampleName) => {
+		setSelectedExample(exampleName);
+		if (exampleName && exampleName !== "choose") {
+			const example = examples.find((ex) => ex.name === exampleName);
+			if (example && example.expression) setExpression(example.expression);
+		}
+	};
+	const handleSave = () => {
+		onSave(expression, targetFieldName || void 0);
+		onOpenChange(false);
+	};
+	const getDialogTitle = () => {
+		switch (mappingType) {
+			case "direct": return tr("fluidgrids.builder.mappingDialog.titleDirect", "Direct Field Mapping");
+			case "expression": return tr("fluidgrids.builder.mappingDialog.titleExpression", "Expression Mapping");
+			case "transform": return tr("fluidgrids.builder.mappingDialog.titleTransform", "Transform Mapping");
+			case "cast": return tr("fluidgrids.builder.mappingDialog.titleCast", "Type Cast Mapping");
+			case "array": return tr("fluidgrids.builder.mappingDialog.titleArray", "Array Mapping");
+			case "object": return tr("fluidgrids.builder.mappingDialog.titleObject", "Object Mapping");
+			case "context": return tr("fluidgrids.builder.mappingDialog.titleContext", "Workflow Context");
+			default: return tr("fluidgrids.builder.mappingDialog.titleDefault", "Data Mapping");
+		}
+	};
+	const getDialogDescription = () => {
+		return mappingTypeConfig.description || tr("fluidgrids.builder.mappingDialog.defaultDescription", "Create a mapping using JavaScript template literal syntax");
+	};
+	const getPlaceholder = () => {
+		switch (mappingType) {
+			case "direct": return "${output.fieldName}";
+			case "expression": return "${output.firstName + ' ' + output.lastName}";
+			case "transform": return "${output.field.toUpperCase()}";
+			case "cast": return "${parseInt(output.numberString)}";
+			case "array": return "${output.items.map(item => item.id)}";
+			case "object": return "${({ id: output.user.id, email: output.user.email })}";
+			case "context": return "${TriggerInput.userId}";
+			default: return "${output.field}";
+		}
+	};
+	const getQuickInserts = () => {
+		switch (mappingType) {
+			case "direct": return [
+				{
+					label: "output.",
+					snippet: "output."
+				},
+				{
+					label: "?.",
+					snippet: "?."
+				},
+				{
+					label: "|| ''",
+					snippet: " || ''"
+				},
+				{
+					label: "?? null",
+					snippet: " ?? null"
+				}
+			];
+			case "expression": return [
+				{
+					label: "output.",
+					snippet: "output."
+				},
+				{
+					label: "? :",
+					snippet: " ? '' : ''"
+				},
+				{
+					label: "&&",
+					snippet: " && "
+				},
+				{
+					label: "||",
+					snippet: " || "
+				},
+				{
+					label: "??",
+					snippet: " ?? "
+				}
+			];
+			case "transform": return [
+				{
+					label: ".toUpperCase()",
+					snippet: ".toUpperCase()"
+				},
+				{
+					label: ".toLowerCase()",
+					snippet: ".toLowerCase()"
+				},
+				{
+					label: ".trim()",
+					snippet: ".trim()"
+				},
+				{
+					label: ".split(',')",
+					snippet: ".split(',')"
+				},
+				{
+					label: ".join(', ')",
+					snippet: ".join(', ')"
+				},
+				{
+					label: ".replace()",
+					snippet: ".replace('old', 'new')"
+				}
+			];
+			case "cast": return [
+				{
+					label: "parseInt()",
+					snippet: "parseInt("
+				},
+				{
+					label: "parseFloat()",
+					snippet: "parseFloat("
+				},
+				{
+					label: "String()",
+					snippet: "String("
+				},
+				{
+					label: "Boolean()",
+					snippet: "Boolean("
+				},
+				{
+					label: "Number()",
+					snippet: "Number("
+				}
+			];
+			case "array": return [
+				{
+					label: ".map()",
+					snippet: ".map(item => item)"
+				},
+				{
+					label: ".filter()",
+					snippet: ".filter(item => item)"
+				},
+				{
+					label: ".reduce()",
+					snippet: ".reduce((acc, item) => acc, 0)"
+				},
+				{
+					label: ".find()",
+					snippet: ".find(item => item)"
+				},
+				{
+					label: ".some()",
+					snippet: ".some(item => item)"
+				},
+				{
+					label: ".every()",
+					snippet: ".every(item => item)"
+				},
+				{
+					label: ".flat()",
+					snippet: ".flat()"
+				},
+				{
+					label: ".slice()",
+					snippet: ".slice(0, 5)"
+				},
+				{
+					label: ".sort()",
+					snippet: ".sort((a, b) => a - b)"
+				}
+			];
+			case "object": return [
+				{
+					label: "Object.keys()",
+					snippet: "Object.keys("
+				},
+				{
+					label: "Object.values()",
+					snippet: "Object.values("
+				},
+				{
+					label: "Object.entries()",
+					snippet: "Object.entries("
+				},
+				{
+					label: "Object.assign()",
+					snippet: "Object.assign({}, "
+				},
+				{
+					label: "{ ...obj }",
+					snippet: "{ ..."
+				}
+			];
+			case "context": return [
+				{
+					label: "TriggerInput.",
+					snippet: "TriggerInput."
+				},
+				{
+					label: "WorkflowState.",
+					snippet: "WorkflowState."
+				},
+				{
+					label: "RunContext.",
+					snippet: "RunContext."
+				},
+				{
+					label: ".output.",
+					snippet: ".output."
+				},
+				{
+					label: ".status",
+					snippet: ".status"
+				}
+			];
+			default: return [];
+		}
+	};
+	const insertSnippet = (snippet) => {
+		const textarea = document.getElementById("expression-input");
+		if (textarea) {
+			const start = textarea.selectionStart;
+			const end = textarea.selectionEnd;
+			const newValue = expression.slice(0, start) + snippet + expression.slice(end);
+			setExpression(newValue);
+			setTimeout(() => {
+				textarea.focus();
+				textarea.setSelectionRange(start + snippet.length, start + snippet.length);
+			}, 0);
+		} else setExpression(expression + snippet);
+	};
+	if (!open) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 bg-bg-overlay z-[100001] flex items-center justify-center",
+		onClick: () => onOpenChange(false),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bg-surface dark:bg-surface z-[100002] flex flex-col w-[700px] max-w-[95vw] max-h-[90vh] rounded-lg overflow-hidden pointer-events-auto shadow-xl",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between items-start p-6 border-b",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-semibold",
+						children: getDialogTitle()
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: getDialogDescription()
+					})] }), /* @__PURE__ */ jsx("button", {
+						onClick: () => onOpenChange(false),
+						className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+						children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 overflow-y-auto p-6",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "mb-4 p-3 bg-[var(--color-bg-accent)]/10 rounded-md border border-[var(--color-border-accent)]",
+						children: [/* @__PURE__ */ jsxs(Label, {
+							htmlFor: "target-field-name",
+							className: "text-sm font-medium",
+							children: [
+								tr("fluidgrids.builder.mappingDialog.targetFieldNameLabel", "Target Field Name"),
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: tr("fluidgrids.builder.mappingDialog.targetFieldNameHint", "(where the result will be stored)")
+								})
+							]
+						}), targetFields.length > 0 ? /* @__PURE__ */ jsxs("div", {
+							className: "mt-2 space-y-2",
+							children: [
+								/* @__PURE__ */ jsxs(Select, {
+									value: targetFieldName,
+									onValueChange: setTargetFieldName,
+									children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: tr("fluidgrids.builder.mappingDialog.selectTargetFieldPlaceholder", "Select target field...") }) }), /* @__PURE__ */ jsx(SelectContent, {
+										className: "z-[100003]",
+										children: targetFields.map((field) => /* @__PURE__ */ jsx(SelectItem, {
+											value: field.path,
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "flex items-center gap-2",
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "font-mono",
+														children: field.path
+													}),
+													/* @__PURE__ */ jsx(Badge, {
+														variant: "outline",
+														className: "text-xs",
+														children: field.isList ? `[${field.type}]` : field.type
+													}),
+													field.isNonNull && /* @__PURE__ */ jsx("span", {
+														className: "text-[var(--color-status-error-text)] text-xs",
+														children: "*"
+													})
+												]
+											})
+										}, field.path))
+									})]
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xs text-muted-foreground",
+									children: tr("fluidgrids.builder.mappingDialog.orCustomFieldName", "Or enter a custom field name:")
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									id: "target-field-name",
+									placeholder: tr("fluidgrids.builder.mappingDialog.targetFieldNamePlaceholder", "e.g., messageIds, userNames, totalPrice"),
+									value: targetFieldName,
+									onChange: (e) => setTargetFieldName(e.target.value),
+									className: "font-mono"
+								})
+							]
+						}) : /* @__PURE__ */ jsx(Input, {
+							id: "target-field-name",
+							placeholder: tr("fluidgrids.builder.mappingDialog.targetFieldNamePlaceholder", "e.g., messageIds, userNames, totalPrice"),
+							value: targetFieldName,
+							onChange: (e) => setTargetFieldName(e.target.value),
+							className: "mt-2"
+						})]
+					}), /* @__PURE__ */ jsxs(Tabs, {
+						value: activeTab,
+						onValueChange: setActiveTab,
+						className: "w-full",
+						children: [
+							/* @__PURE__ */ jsxs(TabsList, {
+								className: "grid w-full grid-cols-4",
+								children: [
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "builder",
+										children: tr("fluidgrids.builder.mappingDialog.tabBuilder", "Builder")
+									}),
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "examples",
+										children: tr("fluidgrids.builder.mappingDialog.tabExamples", "Examples")
+									}),
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "editor",
+										children: tr("fluidgrids.builder.mappingDialog.tabEditor", "Editor")
+									}),
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "help",
+										children: tr("fluidgrids.builder.mappingDialog.tabHelp", "Help")
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "builder",
+								className: "space-y-4 mt-4",
+								children: [
+									mappingType === "array" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "grid gap-2",
+											children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.stepSelectSourceArray", "1. Select Source Array") }), arrayFields.length > 0 ? /* @__PURE__ */ jsxs(Select, {
+												value: selectedSourceArray,
+												onValueChange: handleSourceArrayChange,
+												children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: tr("fluidgrids.builder.mappingDialog.chooseArrayFieldPlaceholder", "Choose an array field...") }) }), /* @__PURE__ */ jsx(SelectContent, {
+													className: "z-[100003]",
+													children: arrayFields.map((field) => /* @__PURE__ */ jsx(SelectItem, {
+														value: field.path,
+														children: /* @__PURE__ */ jsxs("div", {
+															className: "flex items-center gap-2",
+															children: [/* @__PURE__ */ jsx("span", {
+																className: "font-mono",
+																children: field.path
+															}), /* @__PURE__ */ jsxs(Badge, {
+																variant: "outline",
+																className: "text-xs",
+																children: [
+																	"[",
+																	field.type,
+																	"]"
+																]
+															})]
+														})
+													}, field.path))
+												})]
+											}) : /* @__PURE__ */ jsxs("div", {
+												className: "p-3 border border-default rounded-md bg-muted",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "text-sm text-muted-foreground",
+													children: tr("fluidgrids.builder.mappingDialog.noArrayFieldsHint", "No array fields found in schema. Enter the array path manually:")
+												}), /* @__PURE__ */ jsx(Input, {
+													placeholder: tr("fluidgrids.builder.mappingDialog.arrayPathPlaceholder", "e.g., searchEmails.emails"),
+													value: selectedSourceArray,
+													onChange: (e) => handleSourceArrayChange(e.target.value),
+													className: "mt-2 font-mono"
+												})]
+											})]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "grid gap-2",
+											children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.stepExtractProperty", "2. Extract Property from Each Item") }), arrayItemFields.length > 0 ? /* @__PURE__ */ jsxs("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ jsx("div", {
+														className: "flex flex-wrap gap-1 max-h-[120px] overflow-y-auto p-1",
+														children: arrayItemFields.map((field) => /* @__PURE__ */ jsxs(Badge, {
+															variant: itemExpression === field.path ? "default" : "outline",
+															className: `cursor-pointer hover:bg-primary hover:text-primary-foreground ${field.isNested ? "ml-2 border-dashed" : ""}`,
+															onClick: () => handleItemExpressionChange(field.path),
+															children: [field.isNested ? /* @__PURE__ */ jsx("span", {
+																className: "font-mono text-xs",
+																children: field.path
+															}) : field.name, /* @__PURE__ */ jsxs("span", {
+																className: "ml-1 opacity-60 text-[10px]",
+																children: [
+																	"(",
+																	field.type,
+																	")"
+																]
+															})]
+														}, field.path))
+													}),
+													/* @__PURE__ */ jsx("p", {
+														className: "text-xs text-muted-foreground",
+														children: tr("fluidgrids.builder.mappingDialog.clickFieldOrCustomPath", "Click a field above or enter a custom path:")
+													}),
+													/* @__PURE__ */ jsx(Input, {
+														placeholder: tr("fluidgrids.builder.mappingDialog.itemPropertyPlaceholder", "e.g., metadata.id, user.email"),
+														value: itemExpression,
+														onChange: (e) => handleItemExpressionChange(e.target.value),
+														className: "font-mono"
+													})
+												]
+											}) : /* @__PURE__ */ jsx(Input, {
+												placeholder: tr("fluidgrids.builder.mappingDialog.itemPropertyPlaceholderShort", "e.g., metadata.id, user.email, id"),
+												value: itemExpression,
+												onChange: (e) => handleItemExpressionChange(e.target.value),
+												className: "font-mono"
+											})]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "grid gap-2",
+											children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.stepGeneratedExpression", "3. Generated Expression") }), /* @__PURE__ */ jsx("div", {
+												className: "p-3 bg-muted rounded-md border border-default",
+												children: /* @__PURE__ */ jsx("code", {
+													className: "text-sm break-all block font-mono",
+													children: expression || "${output.arrayField.map(item => item.property)}"
+												})
+											})]
+										}),
+										selectedSourceArray && itemExpression && /* @__PURE__ */ jsxs("div", {
+											className: "p-3 bg-[var(--color-status-success-bg-subtle)] rounded-md border border-[var(--color-status-success-border)]",
+											children: [/* @__PURE__ */ jsx(Label, {
+												className: "text-[var(--color-status-success-text)]",
+												children: tr("fluidgrids.builder.mappingDialog.resultPreview", "Result Preview:")
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "mt-2 flex items-center gap-2 text-sm",
+												children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-surface px-2 py-1 rounded",
+														children: targetFieldName || "result"
+													}),
+													/* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }),
+													/* @__PURE__ */ jsxs("code", {
+														className: "bg-surface px-2 py-1 rounded",
+														children: [
+															"[",
+															itemExpression,
+															", ",
+															itemExpression,
+															", ...]"
+														]
+													})
+												]
+											})]
+										})
+									] }),
+									mappingType !== "array" && /* @__PURE__ */ jsx("div", {
+										className: "p-4 bg-muted rounded-md",
+										children: /* @__PURE__ */ jsxs("p", {
+											className: "text-sm text-muted-foreground",
+											children: [
+												"The guided builder is optimized for ",
+												/* @__PURE__ */ jsx("strong", { children: "Array" }),
+												" ",
+												"mappings. For ",
+												mappingType,
+												" mappings, use the",
+												" ",
+												/* @__PURE__ */ jsx("strong", { children: "Examples" }),
+												" or ",
+												/* @__PURE__ */ jsx("strong", { children: "Editor" }),
+												" tabs."
+											]
+										})
+									}),
+									sourceFields.length > 0 && /* @__PURE__ */ jsxs("div", {
+										className: "grid gap-2",
+										children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.availableSourceFields", "Available Source Fields") }), /* @__PURE__ */ jsx("div", {
+											className: "p-3 border rounded-md max-h-[150px] overflow-y-auto bg-muted/50",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "space-y-1",
+												children: [sourceFields.slice(0, 15).map((field) => /* @__PURE__ */ jsxs("div", {
+													className: "flex items-center gap-2 text-xs",
+													children: [/* @__PURE__ */ jsx("code", {
+														className: "font-mono",
+														children: field.path
+													}), /* @__PURE__ */ jsx(Badge, {
+														variant: "outline",
+														className: "text-[10px]",
+														children: field.isList ? `[${field.type}]` : field.type
+													})]
+												}, field.path)), sourceFields.length > 15 && /* @__PURE__ */ jsxs("p", {
+													className: "text-xs text-muted-foreground mt-2",
+													children: [
+														"...and ",
+														sourceFields.length - 15,
+														" more fields"
+													]
+												})]
+											})
+										})]
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "examples",
+								className: "space-y-4 mt-4",
+								children: [examples.length > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "grid gap-2",
+									children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.selectExampleLabel", "Select an example to start with:") }), /* @__PURE__ */ jsxs(Select, {
+										value: selectedExample,
+										onValueChange: handleExampleChange,
+										children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: tr("fluidgrids.builder.mappingDialog.chooseExamplePlaceholder", "Choose an example") }) }), /* @__PURE__ */ jsxs(SelectContent, {
+											className: "z-[100003]",
+											children: [/* @__PURE__ */ jsx(SelectItem, {
+												value: "choose",
+												children: tr("fluidgrids.builder.mappingDialog.chooseExamplePlaceholder", "Choose an example")
+											}), examples.map((example) => /* @__PURE__ */ jsxs(SelectItem, {
+												value: example.name,
+												children: [
+													example.name,
+													" - ",
+													example.description
+												]
+											}, example.name))]
+										})]
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "grid gap-2",
+									children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.quickExamples", "Quick Examples:") }), /* @__PURE__ */ jsx("div", {
+										className: "grid grid-cols-1 gap-2 max-h-[200px] overflow-y-auto",
+										children: examples.slice(0, 8).map((example) => /* @__PURE__ */ jsxs("div", {
+											className: "p-2 border rounded-md cursor-pointer hover:bg-muted transition-colors",
+											onClick: () => {
+												setExpression(example.expression);
+												setActiveTab("editor");
+											},
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "font-medium text-sm",
+												children: example.name
+											}), /* @__PURE__ */ jsx("code", {
+												className: "text-xs text-muted-foreground block mt-1 break-all",
+												children: example.expression
+											})]
+										}, example.name))
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "editor",
+								className: "space-y-4 mt-4",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "grid gap-2",
+										children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.builder.mappingDialog.quickInsert", "Quick Insert:") }), /* @__PURE__ */ jsx("div", {
+											className: "flex flex-wrap gap-1",
+											children: getQuickInserts().map((item) => /* @__PURE__ */ jsx(Badge, {
+												variant: "secondary",
+												className: "cursor-pointer hover:bg-primary hover:text-primary-foreground",
+												onClick: () => insertSnippet(item.snippet),
+												children: item.label
+											}, item.label))
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "grid gap-2",
+										children: [
+											/* @__PURE__ */ jsx(Label, {
+												htmlFor: "expression-input",
+												children: tr("fluidgrids.builder.mappingDialog.templateExpression", "Template Expression")
+											}),
+											/* @__PURE__ */ jsx(Textarea, {
+												id: "expression-input",
+												placeholder: getPlaceholder(),
+												value: expression,
+												onChange: (e) => setExpression(e.target.value),
+												className: "h-32 font-mono text-sm"
+											}),
+											/* @__PURE__ */ jsxs("p", {
+												className: "text-xs text-muted-foreground",
+												children: [
+													tr("fluidgrids.builder.mappingDialog.templateSyntaxHint", "Use JavaScript template literal syntax:"),
+													" ",
+													/* @__PURE__ */ jsxs("code", {
+														className: "bg-muted px-1 rounded",
+														children: [
+															"$",
+															"{",
+															"expression",
+															"}"
+														]
+													})
+												]
+											})
+										]
+									}),
+									(sourceField || targetField) && /* @__PURE__ */ jsxs("div", {
+										className: "p-3 bg-muted rounded-md",
+										children: [/* @__PURE__ */ jsx("h4", {
+											className: "text-sm font-medium mb-2",
+											children: tr("fluidgrids.builder.mappingDialog.mappingContext", "Mapping Context")
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "text-xs space-y-1",
+											children: [sourceField && /* @__PURE__ */ jsxs("div", { children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "text-muted-foreground",
+													children: tr("fluidgrids.builder.mappingDialog.sourceFieldLabel", "Source field:")
+												}),
+												" ",
+												/* @__PURE__ */ jsx("code", {
+													className: "bg-background px-1 rounded",
+													children: sourceField
+												})
+											] }), targetField && /* @__PURE__ */ jsxs("div", { children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "text-muted-foreground",
+													children: tr("fluidgrids.builder.mappingDialog.targetFieldLabel", "Target field:")
+												}),
+												" ",
+												/* @__PURE__ */ jsx("code", {
+													className: "bg-background px-1 rounded",
+													children: targetField
+												})
+											] })]
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "p-3 bg-muted rounded-md",
+										children: [/* @__PURE__ */ jsx("h4", {
+											className: "text-sm font-medium mb-2",
+											children: tr("fluidgrids.builder.mappingDialog.mappingValue", "Mapping Value")
+										}), /* @__PURE__ */ jsx("code", {
+											className: "text-xs break-all block",
+											children: expression || tr("fluidgrids.builder.mappingDialog.emptyExpression", "(empty)")
+										})]
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "help",
+								className: "space-y-4 mt-4",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "p-3 bg-muted rounded-md",
+										children: [/* @__PURE__ */ jsx("h4", {
+											className: "text-sm font-medium mb-2",
+											children: tr("fluidgrids.builder.mappingDialog.availableVariables", "Available Variables")
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "text-xs space-y-2",
+											children: [
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "output"
+													}),
+													" -",
+													" ",
+													tr("fluidgrids.builder.mappingDialog.varOutput", "Output from the previous node")
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "TriggerInput"
+													}),
+													" ",
+													"-",
+													" ",
+													tr("fluidgrids.builder.mappingDialog.varTriggerInput", "Original trigger payload")
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "WorkflowState"
+													}),
+													" ",
+													"-",
+													" ",
+													tr("fluidgrids.builder.mappingDialog.varWorkflowState", "Outputs from all previous nodes")
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "RunContext"
+													}),
+													" ",
+													"-",
+													" ",
+													tr("fluidgrids.builder.mappingDialog.varRunContext", "Workflow execution metadata")
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "item"
+													}),
+													" -",
+													" ",
+													tr("fluidgrids.builder.mappingDialog.varItem", "Current item (in array operations)")
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "index"
+													}),
+													" -",
+													" ",
+													tr("fluidgrids.builder.mappingDialog.varIndex", "Current index (in array operations)")
+												] })
+											]
+										})]
+									}),
+									safeBuiltins.length > 0 && /* @__PURE__ */ jsxs("div", {
+										className: "p-3 bg-muted rounded-md",
+										children: [/* @__PURE__ */ jsx("h4", {
+											className: "text-sm font-medium mb-2",
+											children: tr("fluidgrids.builder.mappingDialog.availableFunctions", "Available Functions")
+										}), /* @__PURE__ */ jsx("div", {
+											className: "text-xs grid grid-cols-3 gap-1",
+											children: safeBuiltins.map((func) => /* @__PURE__ */ jsx("code", {
+												className: "bg-background px-1 rounded",
+												children: func
+											}, func))
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "p-3 bg-muted rounded-md",
+										children: [/* @__PURE__ */ jsx("h4", {
+											className: "text-sm font-medium mb-2",
+											children: tr("fluidgrids.builder.mappingDialog.syntaxTips", "Syntax Tips")
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "text-xs space-y-1",
+											children: [
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("strong", { children: tr("fluidgrids.builder.mappingDialog.tipOptionalChaining", "Optional chaining:") }),
+													" ",
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "output.user?.email"
+													})
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("strong", { children: tr("fluidgrids.builder.mappingDialog.tipNullishCoalescing", "Nullish coalescing:") }),
+													" ",
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: `output.value ?? 'default'`
+													})
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("strong", { children: tr("fluidgrids.builder.mappingDialog.tipTernary", "Ternary:") }),
+													" ",
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: `output.active ? 'Yes' : 'No'`
+													})
+												] }),
+												/* @__PURE__ */ jsxs("div", { children: [
+													/* @__PURE__ */ jsx("strong", { children: tr("fluidgrids.builder.mappingDialog.tipArrayAccess", "Array access:") }),
+													" ",
+													/* @__PURE__ */ jsx("code", {
+														className: "bg-background px-1 rounded",
+														children: "output.items[0].name"
+													})
+												] })
+											]
+										})]
+									})
+								]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "p-6 border-t",
+					children: [!isFormValid && /* @__PURE__ */ jsx("div", {
+						className: "mb-3 p-2 bg-[var(--color-status-warning-bg-subtle)] border border-[var(--color-status-warning-border)] rounded-md",
+						children: /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-[var(--color-status-warning-text)]",
+							children: getValidationMessage()
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between items-center",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs text-muted-foreground",
+							children: targetFieldName && expression && /* @__PURE__ */ jsxs("code", {
+								className: "bg-muted px-2 py-1 rounded",
+								children: [
+									targetFieldName,
+									":",
+									" ",
+									expression.length > 40 ? expression.substring(0, 40) + "..." : expression
+								]
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								onClick: () => onOpenChange(false),
+								children: tr("fluidgrids.builder.mappingDialog.cancel", "Cancel")
+							}), /* @__PURE__ */ jsx(Button, {
+								onClick: handleSave,
+								disabled: !isFormValid,
+								children: tr("fluidgrids.builder.mappingDialog.applyMapping", "Apply Mapping")
+							})]
+						})]
+					})]
+				})
+			]
+		})
+	}), document.body);
+}
+
+// src/builder/components/lib/mapping-utils.ts
+const DEFAULT_CONFIG = {
+	timeout: 5e3,
+	maxTemplateLength: 1e4,
+	debug: false
+};
+/**
+* Safe built-ins available in the sandbox
+*/
+const SAFE_GLOBALS = {
+	parseInt,
+	parseFloat,
+	isNaN,
+	isFinite,
+	Number,
+	String,
+	Boolean,
+	JSON: {
+		parse: JSON.parse,
+		stringify: JSON.stringify
+	},
+	Date,
+	Math,
+	Array,
+	Object,
+	console: {
+		log: (..._args) => {},
+		error: (...args) => console.error("[Mapper]", ...args),
+		warn: (...args) => console.warn("[Mapper]", ...args)
+	}
+};
+/**
+* Parse a template string to extract the expression
+* Template literals must be in the format: ${expression}
+*/
+function parseTemplate(template) {
+	if (typeof template !== "string") return {
+		isTemplate: false,
+		expression: null,
+		error: null
+	};
+	const match = template.match(/^\$\{(.+)\}$/s);
+	if (!match) return {
+		isTemplate: false,
+		expression: null,
+		error: null
+	};
+	const expression = match[1].trim();
+	if (!expression) return {
+		isTemplate: true,
+		expression: null,
+		error: "Empty template expression"
+	};
+	return {
+		isTemplate: true,
+		expression,
+		error: null
+	};
+}
+/**
+* Build the sandbox with safe globals and scope variables
+*/
+function buildSandbox(scope) {
+	return {
+		...SAFE_GLOBALS,
+		output: scope.output,
+		TriggerInput: scope.TriggerInput,
+		WorkflowState: scope.WorkflowState,
+		RunContext: scope.RunContext,
+		item: scope.item,
+		index: scope.index
+	};
+}
+/**
+* Evaluate a JavaScript expression in a sandboxed environment
+*/
+async function evaluateExpression(expression, scope, config = DEFAULT_CONFIG) {
+	const sandbox = buildSandbox(scope);
+	const paramNames = Object.keys(sandbox);
+	const paramValues = Object.values(sandbox);
+	try {
+		const fn = new Function(...paramNames, `"use strict"; return (${expression});`);
+		const timeoutPromise = new Promise((_, reject) => {
+			setTimeout(() => reject(/* @__PURE__ */ new Error("Execution timeout exceeded")), config.timeout || DEFAULT_CONFIG.timeout);
+		});
+		const resultPromise = Promise.resolve(fn(...paramValues));
+		return await Promise.race([resultPromise, timeoutPromise]);
+	} catch (error) {
+		if (config.debug) console.error("[Mapper] Expression evaluation error:", error);
+		throw error;
+	}
+}
+/**
+* Map a definition object using template literals
+* This is the main entry point for applying mappings
+*/
+async function mapDefinition(definition, scope, config = DEFAULT_CONFIG) {
+	if (definition === null || definition === void 0) return definition;
+	if (typeof definition !== "object" && typeof definition !== "string") return definition;
+	if (typeof definition === "string") {
+		const parseResult = parseTemplate(definition);
+		if (!parseResult.isTemplate) return definition;
+		if (parseResult.error) throw new Error(parseResult.error);
+		return evaluateExpression(parseResult.expression, scope, config);
+	}
+	if (Array.isArray(definition)) return await Promise.all(definition.map((item) => mapDefinition(item, scope, config)));
+	const result = {};
+	for (const key of Object.keys(definition)) result[key] = await mapDefinition(definition[key], scope, config);
+	return result;
+}
+/**
+* Validate a mapping definition for syntax errors
+* Returns an array of error messages
+*/
+function validateMapping(definition, path = "root") {
+	const errors = [];
+	if (definition === null || definition === void 0) return errors;
+	if (typeof definition === "string") {
+		const parseResult = parseTemplate(definition);
+		if (parseResult.isTemplate && parseResult.error) errors.push(`${path}: ${parseResult.error}`);
+		return errors;
+	}
+	if (Array.isArray(definition)) {
+		definition.forEach((item, index) => {
+			errors.push(...validateMapping(item, `${path}[${index}]`));
+		});
+		return errors;
+	}
+	if (typeof definition === "object") for (const key of Object.keys(definition)) errors.push(...validateMapping(definition[key], `${path}.${key}`));
+	return errors;
+}
+/**
+* Generate default mapping between source and target schemas
+*/
+function generateDefaultMapping(sourceSchema, sourceNode, sourceOperation, targetSchema, targetNode, targetOperation) {
+	const mapping = {};
+	const sourceReturnTypeName = getReturnTypeForOperation(sourceNode, sourceOperation);
+	let sourceOutputType = null;
+	if (sourceReturnTypeName) sourceOutputType = sourceSchema.types[sourceReturnTypeName];
+	else {
+		let sourceOperationField = null;
+		if (sourceSchema.queryType && sourceSchema.types[sourceSchema.queryType]?.fields[sourceOperation]) sourceOperationField = sourceSchema.types[sourceSchema.queryType].fields[sourceOperation];
+		else if (sourceSchema.mutationType && sourceSchema.types[sourceSchema.mutationType]?.fields[sourceOperation]) sourceOperationField = sourceSchema.types[sourceSchema.mutationType].fields[sourceOperation];
+		if (sourceOperationField) {
+			const sourceOutputTypeName = sourceOperationField.type;
+			sourceOutputType = sourceSchema.types[sourceOutputTypeName];
+		}
+	}
+	const targetInputTypeName = getInputTypeForOperation(targetNode, targetOperation);
+	const targetInputType = targetInputTypeName ? targetSchema.types[targetInputTypeName] : null;
+	if (!sourceOutputType || !targetInputType) return mapping;
+	const sourceFields = sourceOutputType.fields || {};
+	const targetFields = targetInputType.inputFields || targetInputType.fields || {};
+	const addMapping = (path, sourcePath) => {
+		const templateValue = `\${output.${sourcePath}}`;
+		if (path.includes(".")) {
+			const pathParts = path.split(".");
+			let currentObj = mapping;
+			for (let i = 0; i < pathParts.length - 1; i++) {
+				const part = pathParts[i];
+				if (!currentObj[part]) currentObj[part] = {};
+				currentObj = currentObj[part];
+			}
+			currentObj[pathParts[pathParts.length - 1]] = templateValue;
+		} else mapping[path] = templateValue;
+	};
+	const processFields = (fields, parentPath = "") => {
+		for (const fieldName in fields) {
+			const field = fields[fieldName];
+			const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+			if (field.type && targetSchema.types[field.type] && (targetSchema.types[field.type].kind === "type" || targetSchema.types[field.type].kind === "input")) {
+				const nestedFields = targetSchema.types[field.type].fields || targetSchema.types[field.type].inputFields || {};
+				processFields(nestedFields, fullPath);
+			} else {
+				if (sourceFields[fieldName]) {
+					addMapping(fullPath, fieldName);
+					continue;
+				}
+				const lowerTargetField = fieldName.toLowerCase();
+				for (const sourceFieldName in sourceFields) if (sourceFieldName.toLowerCase() === lowerTargetField) {
+					addMapping(fullPath, sourceFieldName);
+					break;
+				}
+			}
+		}
+	};
+	processFields(targetFields);
+	return mapping;
+}
+/**
+* Apply a mapping to input data using the new template literal syntax
+* This is used for preview/testing in the UI
+*/
+async function applyMapping(mapping, inputData, config = DEFAULT_CONFIG) {
+	return await mapDefinition(mapping, {
+		output: inputData,
+		TriggerInput: {},
+		WorkflowState: {},
+		RunContext: {
+			runId: "preview-run",
+			workflowKey: "preview-workflow",
+			version: "1.0.0",
+			tenantId: "preview-tenant",
+			workspaceId: "preview-workspace",
+			triggeredAt: (/* @__PURE__ */ new Date()).toISOString()
+		}
+	}, config);
+}
+
+// src/builder/components/mapper/visual-mapper.tsx
+const nodeTypes = {
+	schemaNode: SchemaNode,
+	nodeGroup: NodeGroup
+};
+const edgeTypes = { mappingEdge: MappingEdge };
+function isSchemaNodeData(data) {
+	return data !== null && typeof data === "object" && "path" in data && "type" in data && "side" in data;
+}
+/**
+* Detect the mapping type from a template literal expression
+*/
+function detectMappingType(value) {
+	if (typeof value !== "string") return "direct";
+	const parseResult = parseTemplate(value);
+	if (!parseResult.isTemplate) return "direct";
+	const expr = parseResult.expression || "";
+	if (expr.includes(".map(") || expr.includes(".filter(") || expr.includes(".reduce(") || expr.includes(".find(") || expr.includes(".some(") || expr.includes(".every(") || expr.includes(".flat(") || expr.includes(".flatMap(") || expr.includes(".sort(")) return "array";
+	if (expr.includes("Object.keys(") || expr.includes("Object.values(") || expr.includes("Object.entries(") || expr.includes("Object.assign(") || expr.includes("Object.fromEntries(") || expr.startsWith("({") || expr.startsWith("{ ...")) return "object";
+	if (expr.startsWith("parseInt(") || expr.startsWith("parseFloat(") || expr.startsWith("String(") || expr.startsWith("Boolean(") || expr.startsWith("Number(")) return "cast";
+	if (expr.includes("TriggerInput.") || expr.includes("WorkflowState.") || expr.includes("RunContext.")) return "context";
+	if (expr.includes(".toUpperCase()") || expr.includes(".toLowerCase()") || expr.includes(".trim()") || expr.includes(".split(") || expr.includes(".join(") || expr.includes(".replace(") || expr.includes(".substring(") || expr.includes(".slice(")) return "transform";
+	if (expr.includes(" + ") || expr.includes(" - ") || expr.includes(" * ") || expr.includes(" / ") || expr.includes(" ? ") || expr.includes(" && ") || expr.includes(" || ") || expr.includes(" ?? ") || expr.includes("Math.")) return "expression";
+	return "direct";
+}
+function VisualMapperContent({ sourceSchema, targetSchema, sourceNode, sourceOperation, targetNode, targetOperation, mapping, onMappingChange }) {
+	const { toast } = useToast();
+	const tr = useTr();
+	const reactFlowWrapper = useRef(null);
+	const [selectedSourceNode, setSelectedSourceNode] = useState(null);
+	const [selectedTargetNode, setSelectedTargetNode] = useState(null);
+	const [mappingDialogOpen, setMappingDialogOpen] = useState(false);
+	const [currentMappingType, setCurrentMappingType] = useState("expression");
+	const [nodes, setNodes, onNodesChange] = useNodesState([]);
+	const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+	useEffect(() => {
+		if (sourceSchema && targetSchema && sourceNode && sourceOperation && targetNode && targetOperation) {
+			const { nodes: generatedNodes } = generateSchemaNodes(sourceSchema, sourceNode, sourceOperation, targetSchema, targetNode, targetOperation);
+			if (generatedNodes.length === 0) toast({
+				title: tr("fluidgrids.builder.visualMapper.noFieldsFoundTitle", "No fields found"),
+				description: tr("fluidgrids.builder.visualMapper.noFieldsFoundDescription", "Could not find fields to map between these nodes and operations."),
+				variant: "destructive"
+			});
+			else {
+				setNodes(generatedNodes);
+				setTimeout(() => {
+					document.querySelector(".react-flow__controls-fitview")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+				}, 100);
+			}
+		}
+	}, [
+		sourceSchema,
+		targetSchema,
+		sourceNode,
+		sourceOperation,
+		targetNode,
+		targetOperation,
+		setNodes,
+		toast,
+		tr
+	]);
+	useEffect(() => {
+		const newEdges = [];
+		const processMapping = (obj, parentPath = "") => {
+			for (const key in obj) {
+				const value = obj[key];
+				const currentPath = parentPath ? `${parentPath}.${key}` : key;
+				if (typeof value === "object" && value !== null && !Array.isArray(value)) processMapping(value, currentPath);
+				else if (typeof value === "string") {
+					const parseResult = parseTemplate(value);
+					const mappingType = detectMappingType(value);
+					const targetNodeObj = nodes.find((n) => isSchemaNodeData(n.data) && n.data.path === currentPath && n.data.side === "target");
+					if (targetNodeObj && isSchemaNodeData(targetNodeObj.data)) {
+						if (parseResult.isTemplate) {
+							const simpleFieldMatch = (parseResult.expression || "").match(/^output\.([a-zA-Z0-9_.]+)$/);
+							if (simpleFieldMatch && mappingType === "direct") {
+								const sourcePath = simpleFieldMatch[1];
+								const sourceNodeObj = nodes.find((n) => isSchemaNodeData(n.data) && n.data.path === sourcePath && n.data.side === "source");
+								if (sourceNodeObj && isSchemaNodeData(sourceNodeObj.data)) {
+									const isCompatible = areTypesCompatible(sourceNodeObj.data.type, targetNodeObj.data.type);
+									newEdges.push({
+										id: `${sourceNodeObj.id}-${targetNodeObj.id}`,
+										source: sourceNodeObj.id,
+										target: targetNodeObj.id,
+										type: "mappingEdge",
+										animated: true,
+										data: {
+											mappingType: "direct",
+											isCompatible,
+											color: compatibilityColor(isCompatible)
+										}
+									});
+									continue;
+								}
+							}
+							newEdges.push({
+								id: `mapping-${currentPath}`,
+								source: "virtual-source",
+								target: targetNodeObj.id,
+								type: "mappingEdge",
+								animated: true,
+								data: {
+									mappingType,
+									expression: value,
+									color: mappingTypeColor(mappingType)
+								}
+							});
+						}
+					}
+				}
+			}
+		};
+		processMapping(mapping);
+		setEdges(newEdges);
+	}, [
+		mapping,
+		nodes,
+		setEdges
+	]);
+	const onConnect = useCallback((connection) => {
+		const sourceNodeObj = nodes.find((n) => n.id === connection.source);
+		const targetNodeObj = nodes.find((n) => n.id === connection.target);
+		if (sourceNodeObj && targetNodeObj && isSchemaNodeData(sourceNodeObj.data) && isSchemaNodeData(targetNodeObj.data) && sourceNodeObj.data.side === "source" && targetNodeObj.data.side === "target") {
+			const sourceType = sourceNodeObj.data.type;
+			const targetType = targetNodeObj.data.type;
+			const isCompatible = areTypesCompatible(sourceType, targetType);
+			const newEdge = {
+				...connection,
+				type: "mappingEdge",
+				animated: true,
+				data: {
+					mappingType: "direct",
+					isCompatible,
+					color: compatibilityColor(isCompatible)
+				}
+			};
+			setEdges((eds) => addEdge(newEdge, eds));
+			const updatedMapping = { ...mapping };
+			const sourcePath = sourceNodeObj.data.path;
+			const targetPath = targetNodeObj.data.path;
+			const templateValue = `\${output.${sourcePath}}`;
+			if (targetPath.includes(".")) {
+				const pathParts = targetPath.split(".");
+				let currentObj = updatedMapping;
+				for (let i = 0; i < pathParts.length - 1; i++) {
+					const part = pathParts[i];
+					if (!currentObj[part]) currentObj[part] = {};
+					else if (typeof currentObj[part] !== "object") currentObj[part] = {};
+					currentObj = currentObj[part];
+				}
+				currentObj[pathParts[pathParts.length - 1]] = templateValue;
+			} else updatedMapping[targetPath] = templateValue;
+			onMappingChange(updatedMapping);
+			if (isCompatible) toast({
+				title: tr("fluidgrids.builder.visualMapper.mappingCreatedTitle", "Mapping created"),
+				description: `Mapped ${sourcePath} (${sourceType}) to ${targetPath} (${targetType})`
+			});
+			else toast({
+				title: tr("fluidgrids.builder.visualMapper.typeMismatchTitle", "Type mismatch warning"),
+				description: `Mapped ${sourcePath} (${sourceType}) to ${targetPath} (${targetType}). Types may not be compatible.`,
+				variant: "destructive"
+			});
+		} else toast({
+			title: tr("fluidgrids.builder.visualMapper.invalidMappingTitle", "Invalid mapping"),
+			description: tr("fluidgrids.builder.visualMapper.invalidMappingDescription", "You can only map from source to target fields"),
+			variant: "destructive"
+		});
+	}, [
+		nodes,
+		mapping,
+		onMappingChange,
+		toast,
+		tr,
+		setEdges
+	]);
+	const onEdgeDelete = useCallback((edge) => {
+		const targetNodeObj = nodes.find((n) => n.id === edge.target);
+		if (targetNodeObj && isSchemaNodeData(targetNodeObj.data)) {
+			const targetPath = targetNodeObj.data.path;
+			const updatedMapping = { ...mapping };
+			if (targetPath.includes(".")) {
+				const pathParts = targetPath.split(".");
+				let currentObj = updatedMapping;
+				let parentObj = null;
+				let lastPart = null;
+				for (let i = 0; i < pathParts.length - 1; i++) {
+					const part = pathParts[i];
+					if (!currentObj[part] || typeof currentObj[part] !== "object") return;
+					parentObj = currentObj;
+					currentObj = currentObj[part];
+					lastPart = pathParts[i + 1];
+				}
+				if (parentObj && lastPart) {
+					delete currentObj[pathParts[pathParts.length - 1]];
+					if (Object.keys(currentObj).length === 0 && pathParts.length > 1) delete parentObj[pathParts[pathParts.length - 2]];
+				}
+			} else delete updatedMapping[targetPath];
+			onMappingChange(updatedMapping);
+		}
+		setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+	}, [
+		nodes,
+		mapping,
+		onMappingChange,
+		setEdges
+	]);
+	const onNodeClick = useCallback((_event, node) => {
+		if (node.data && typeof node.data === "object" && isSchemaNodeData(node.data)) {
+			const schemaNode = {
+				id: node.id,
+				data: node.data
+			};
+			if (schemaNode.data.side === "source") setSelectedSourceNode(schemaNode);
+			else if (schemaNode.data.side === "target") setSelectedTargetNode(schemaNode);
+		}
+	}, []);
+	const openMappingDialog = (type) => {
+		setCurrentMappingType(type);
+		setMappingDialogOpen(true);
+	};
+	const handleSaveMappingDialog = (expression, targetFieldName) => {
+		const targetPath = targetFieldName || selectedTargetNode?.data?.path;
+		if (!targetPath) {
+			toast({
+				title: tr("fluidgrids.builder.visualMapper.noTargetFieldTitle", "No target field specified"),
+				description: tr("fluidgrids.builder.visualMapper.noTargetFieldDescription", "Please enter a target field name or select a target field in the visual mapper"),
+				variant: "destructive"
+			});
+			return;
+		}
+		const updatedMapping = { ...mapping };
+		if (targetPath.includes(".")) {
+			const pathParts = targetPath.split(".");
+			let currentObj = updatedMapping;
+			for (let i = 0; i < pathParts.length - 1; i++) {
+				const part = pathParts[i];
+				if (!currentObj[part]) currentObj[part] = {};
+				else if (typeof currentObj[part] !== "object") currentObj[part] = {};
+				currentObj = currentObj[part];
+			}
+			currentObj[pathParts[pathParts.length - 1]] = expression;
+		} else updatedMapping[targetPath] = expression;
+		onMappingChange(updatedMapping);
+		const mappingType = detectMappingType(expression);
+		toast({
+			title: `${mappingType.charAt(0).toUpperCase() + mappingType.slice(1)} mapping created`,
+			description: `${tr("fluidgrids.builder.visualMapper.appliedMappingTo", "Applied mapping to")} ${targetPath}`
+		});
+	};
+	const mappingTypeItems = [
+		{
+			type: "direct",
+			label: tr("fluidgrids.builder.visualMapper.typeDirectLabel", "Direct"),
+			icon: Type,
+			description: tr("fluidgrids.builder.visualMapper.typeDirectDescription", "Simple field access")
+		},
+		{
+			type: "expression",
+			label: tr("fluidgrids.builder.visualMapper.typeExpressionLabel", "Expression"),
+			icon: Code,
+			description: tr("fluidgrids.builder.visualMapper.typeExpressionDescription", "Custom JavaScript expression")
+		},
+		{
+			type: "transform",
+			label: tr("fluidgrids.builder.visualMapper.typeTransformLabel", "Transform"),
+			icon: Type,
+			description: tr("fluidgrids.builder.visualMapper.typeTransformDescription", "String transformations")
+		},
+		{
+			type: "cast",
+			label: tr("fluidgrids.builder.visualMapper.typeCastLabel", "Cast"),
+			icon: Hash,
+			description: tr("fluidgrids.builder.visualMapper.typeCastDescription", "Type conversions")
+		},
+		{
+			type: "array",
+			label: tr("fluidgrids.builder.visualMapper.typeArrayLabel", "Array"),
+			icon: List,
+			description: tr("fluidgrids.builder.visualMapper.typeArrayDescription", "Array operations (map, filter, reduce)")
+		},
+		{
+			type: "object",
+			label: tr("fluidgrids.builder.visualMapper.typeObjectLabel", "Object"),
+			icon: Braces,
+			description: tr("fluidgrids.builder.visualMapper.typeObjectDescription", "Object manipulation")
+		},
+		{
+			type: "context",
+			label: tr("fluidgrids.builder.visualMapper.typeContextLabel", "Context"),
+			icon: Workflow,
+			description: tr("fluidgrids.builder.visualMapper.typeContextDescription", "Workflow state access")
+		}
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-[550px] w-full border rounded-md",
+		ref: reactFlowWrapper,
+		children: [/* @__PURE__ */ jsxs(ReactFlow, {
+			nodes,
+			edges,
+			onNodesChange,
+			onEdgesChange,
+			onConnect,
+			onEdgeClick: (_, edge) => onEdgeDelete(edge),
+			onNodeClick,
+			nodeTypes,
+			edgeTypes,
+			fitView: true,
+			fitViewOptions: { padding: .2 },
+			minZoom: .4,
+			maxZoom: 1.5,
+			defaultViewport: {
+				x: 0,
+				y: 0,
+				zoom: .7
+			},
+			attributionPosition: "bottom-right",
+			children: [
+				/* @__PURE__ */ jsx(Controls, {}),
+				/* @__PURE__ */ jsx(MiniMap, {}),
+				/* @__PURE__ */ jsx(Background, {
+					gap: 12,
+					size: 1
+				}),
+				/* @__PURE__ */ jsx(Panel, {
+					position: "top-right",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								size: "sm",
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ jsx(PlusCircle, { className: "h-4 w-4" }),
+									tr("fluidgrids.builder.visualMapper.addMapping", "Add Mapping"),
+									/* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+								]
+							})
+						}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+							align: "end",
+							className: "w-56 z-[100000]",
+							children: [
+								/* @__PURE__ */ jsx(DropdownMenuLabel, { children: tr("fluidgrids.builder.visualMapper.mappingTypes", "Mapping Types") }),
+								/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+								mappingTypeItems.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+									onClick: () => openMappingDialog(item.type),
+									className: "flex items-start gap-2 cursor-pointer",
+									children: [/* @__PURE__ */ jsx(item.icon, {
+										className: "h-4 w-4 mt-0.5",
+										style: { color: mappingTypeColor(item.type) }
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "font-medium",
+											children: item.label
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-xs text-muted-foreground",
+											children: item.description
+										})]
+									})]
+								}, item.type))
+							]
+						})] }), selectedTargetNode && /* @__PURE__ */ jsxs("div", {
+							className: "p-2 bg-muted rounded-md text-xs",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground",
+								children: tr("fluidgrids.builder.visualMapper.targetIndicator", "Target:")
+							}), /* @__PURE__ */ jsx("div", {
+								className: "font-mono",
+								children: selectedTargetNode.data.path
+							})]
+						})]
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(MappingDialog, {
+			open: mappingDialogOpen,
+			onOpenChange: setMappingDialogOpen,
+			onSave: handleSaveMappingDialog,
+			mappingType: currentMappingType,
+			sourceField: selectedSourceNode?.data?.path,
+			targetField: selectedTargetNode?.data?.path,
+			sourceSchema,
+			sourceOperation,
+			targetSchema,
+			targetOperation
+		})]
+	});
+}
+function VisualMapper(props) {
+	return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VisualMapperContent, { ...props }) });
+}
+
+// src/builder/components/mapper/code-editor.tsx
+function CodeEditor({ value, onChange, language: _language = "json", onBlur }) {
+	const editorRef = useRef(null);
+	useEffect(() => {
+		if (editorRef.current) editorRef.current.value = value;
+	}, [value]);
+	return /* @__PURE__ */ jsx(Card, {
+		className: "relative ",
+		children: /* @__PURE__ */ jsx("textarea", {
+			ref: editorRef,
+			className: "w-full h-[400px] p-4 font-mono bg-surface text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary transition-shadow duration-200",
+			defaultValue: value,
+			onChange,
+			spellCheck: false,
+			onBlur
+		})
+	});
+}
+
+// src/builder/components/mapper/mapping-preview.tsx
+function MappingPreview({ input, mapping, output }) {
+	const tr = useTr();
+	const generatedOutput = useMemo(() => {
+		try {
+			return applyMapping(mapping, input);
+		} catch (error) {
+			console.error("Error applying mapping:", error);
+			return {
+				error: true,
+				message: error instanceof Error ? error.message : tr("fluidgrids.builder.mappingPreview.unknownError", "Unknown error occurred while applying mapping"),
+				input
+			};
+		}
+	}, [
+		input,
+		mapping,
+		tr
+	]);
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: "input",
+		children: [
+			/* @__PURE__ */ jsxs(TabsList, {
+				className: "mb-4",
+				children: [
+					/* @__PURE__ */ jsx(TabsTrigger, {
+						value: "input",
+						children: tr("fluidgrids.builder.mappingPreview.tabInput", "Input")
+					}),
+					/* @__PURE__ */ jsx(TabsTrigger, {
+						value: "mapping",
+						children: tr("fluidgrids.builder.mappingPreview.tabMapping", "Mapping")
+					}),
+					/* @__PURE__ */ jsx(TabsTrigger, {
+						value: "output",
+						children: tr("fluidgrids.builder.mappingPreview.tabOutput", "Output")
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "input",
+				children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+					className: "p-4",
+					children: /* @__PURE__ */ jsx("pre", {
+						className: "text-sm overflow-auto max-h-[400px]",
+						children: JSON.stringify(input, null, 2)
+					})
+				}) })
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "mapping",
+				children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+					className: "p-4",
+					children: /* @__PURE__ */ jsx("pre", {
+						className: "text-sm overflow-auto max-h-[400px]",
+						children: JSON.stringify(mapping, null, 2)
+					})
+				}) })
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "output",
+				children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+					className: "p-4",
+					children: /* @__PURE__ */ jsx("pre", {
+						className: "text-sm overflow-auto max-h-[400px]",
+						children: output ? JSON.stringify(output, null, 2) : generatedOutput ? JSON.stringify(generatedOutput, null, 2) : tr("fluidgrids.builder.mappingPreview.noOutput", "No output generated yet")
+					})
+				}) })
+			})
+		]
+	});
+}
+
+// src/builder/components/mapper/mapping-editor.tsx
+function generateSampleValueForType(typeName, schema) {
+	if (typeName.startsWith("[") && typeName.endsWith("]")) return [generateSampleValueForType(typeName.substring(1, typeName.length - 1).replace(/!$/, ""), schema)];
+	const baseType = typeName.endsWith("!") ? typeName.slice(0, -1) : typeName;
+	switch (baseType) {
+		case "String": return "Sample string";
+		case "Int": return 42;
+		case "Float": return 3.14;
+		case "Boolean": return true;
+		case "ID": return "id-123456";
+		default:
+			if (schema.types[baseType]) {
+				const type = schema.types[baseType];
+				if (type.kind === "type" || type.kind === "input") {
+					const obj = {};
+					for (const fieldName in type.fields || {}) obj[fieldName] = generateSampleValueForType(type.fields[fieldName].type, schema);
+					return obj;
+				}
+				if (type.kind === "enum") return `ENUM_${baseType}`;
+			}
+			return null;
+	}
+}
+function generateSampleInput(schema, nodeType, operation) {
+	const returnTypeName = getReturnTypeForOperation(nodeType, operation);
+	if (!returnTypeName || !schema.types[returnTypeName]) return {};
+	const returnType = schema.types[returnTypeName];
+	const result = {};
+	for (const fieldName in returnType.fields || {}) {
+		const field = returnType.fields[fieldName];
+		result[fieldName] = generateSampleValueForType(field.type, schema);
+	}
+	return result;
+}
+function MappingEditor({ sourceSchema, targetSchema, sourceNode, sourceOperation, targetNode, targetOperation, className, setEdges, edgeId }) {
+	const { toast } = useToast();
+	const tr = useTr();
+	const [mappingJson, setMappingJson] = useState({});
+	const [jsonDataString, setJsonDataString] = useState(JSON.stringify(mappingJson, null, 2));
+	const [jsonError, setJsonError] = useState(null);
+	const [validationErrors, setValidationErrors] = useState([]);
+	const [sampleInput, setSampleInput] = useState({});
+	const [previewOutput, setPreviewOutput] = useState(null);
+	const [isTestingMapping, setIsTestingMapping] = useState(false);
+	useEffect(() => {
+		const defaultMapping = generateDefaultMapping(sourceSchema, sourceNode, sourceOperation, targetSchema, targetNode, targetOperation);
+		setMappingJson(defaultMapping);
+		setJsonDataString(JSON.stringify(defaultMapping, null, 2));
+		const generatedSampleInput = generateSampleInput(sourceSchema, sourceNode, sourceOperation);
+		setSampleInput(generatedSampleInput);
+		const errors = validateMapping(defaultMapping);
+		setValidationErrors(errors);
+	}, [
+		sourceSchema,
+		targetSchema,
+		sourceNode,
+		sourceOperation,
+		targetNode,
+		targetOperation
+	]);
+	const handleJsonStringChange = (e) => {
+		setJsonDataString(e.target.value);
+		setJsonError(null);
+	};
+	const handleJsonBlur = () => {
+		try {
+			const parsed = JSON.parse(jsonDataString);
+			setMappingJson(parsed);
+			setJsonError(null);
+			const errors = validateMapping(parsed);
+			setValidationErrors(errors);
+		} catch (error) {
+			console.error("JSON parsing error:", error);
+			setJsonError(tr("fluidgrids.builder.mappingEditor.invalidJsonFormat", "Invalid JSON format. Please correct it."));
+		}
+	};
+	const handleMappingChange = (newMapping) => {
+		setMappingJson(newMapping);
+		setJsonDataString(JSON.stringify(newMapping, null, 2));
+		const errors = validateMapping(newMapping);
+		setValidationErrors(errors);
+		if (setEdges && edgeId && errors.length === 0) setEdges((edges) => {
+			return edges.map((edge) => {
+				if (edge.id === edgeId) return {
+					...edge,
+					mapping: {
+						definition: newMapping,
+						comment: `Mapping from ${sourceNode}.${sourceOperation} to ${targetNode}.${targetOperation}`
+					}
+				};
+				return edge;
+			});
+		});
+	};
+	const checkJsonValidity = () => {
+		setJsonError(null);
+		try {
+			const parsedData = JSON.parse(jsonDataString);
+			setMappingJson(parsedData);
+			const errors = validateMapping(parsedData);
+			if (errors.length > 0) {
+				setValidationErrors(errors);
+				throw new Error(`Validation errors: ${errors.join(", ")}`);
+			}
+			if (setEdges && edgeId) setEdges((edges) => {
+				return edges.map((edge) => {
+					if (edge.id === edgeId) return {
+						...edge,
+						mapping: {
+							definition: parsedData,
+							comment: `Mapping from ${sourceNode}.${sourceOperation} to ${targetNode}.${targetOperation}`
+						}
+					};
+					return edge;
+				});
+			});
+			return parsedData;
+		} catch (error) {
+			if (error instanceof SyntaxError) setJsonError(tr("fluidgrids.builder.mappingEditor.cannotSubmitInvalidJson", "Cannot submit: Mapping data must be valid JSON."));
+			console.error("Submission failed:", error);
+			throw error;
+		}
+	};
+	const handleSaveMapping = () => {
+		try {
+			checkJsonValidity();
+			toast({
+				title: tr("fluidgrids.builder.mappingEditor.mappingSavedTitle", "Mapping saved"),
+				description: tr("fluidgrids.builder.mappingEditor.mappingSavedDescription", "Your mapping configuration has been saved successfully.")
+			});
+		} catch (error) {
+			toast({
+				title: tr("fluidgrids.builder.mappingEditor.errorSavingTitle", "Error saving mapping"),
+				description: error instanceof Error ? error.message : tr("fluidgrids.builder.mappingEditor.errorSavingFallback", "Invalid mapping configuration"),
+				variant: "destructive"
+			});
+		}
+	};
+	const handleTestMapping = async () => {
+		try {
+			setIsTestingMapping(true);
+			const parsedData = checkJsonValidity();
+			const result = await applyMapping(parsedData, sampleInput);
+			setPreviewOutput(result);
+			toast({
+				title: tr("fluidgrids.builder.mappingEditor.mappingTestedTitle", "Mapping tested"),
+				description: tr("fluidgrids.builder.mappingEditor.mappingTestedDescription", "Test completed successfully.")
+			});
+		} catch (error) {
+			console.error("Test mapping error:", error);
+			toast({
+				title: tr("fluidgrids.builder.mappingEditor.mappingTestFailedTitle", "Mapping test failed"),
+				description: error instanceof Error ? error.message : tr("fluidgrids.builder.mappingEditor.mappingTestFailedFallback", "Error executing mapping"),
+				variant: "destructive"
+			});
+		} finally {
+			setIsTestingMapping(false);
+		}
+	};
+	const detectMappingTypes = (mapping) => {
+		const types = /* @__PURE__ */ new Set();
+		const processValue = (value) => {
+			if (typeof value === "string") {
+				const parseResult = parseTemplate(value);
+				if (parseResult.isTemplate) {
+					const expr = parseResult.expression || "";
+					if (expr.includes(".map(") || expr.includes(".filter(") || expr.includes(".reduce(")) types.add("array");
+					else if (expr.includes("Object.") || expr.startsWith("({")) types.add("object");
+					else if (expr.startsWith("parseInt(") || expr.startsWith("parseFloat(") || expr.startsWith("String(")) types.add("cast");
+					else if (expr.includes("TriggerInput.") || expr.includes("WorkflowState.") || expr.includes("RunContext.")) types.add("context");
+					else if (expr.includes(".toUpperCase()") || expr.includes(".toLowerCase()") || expr.includes(".trim()")) types.add("transform");
+					else if (expr.includes(" + ") || expr.includes(" ? ") || expr.includes("Math.")) types.add("expression");
+					else types.add("direct");
+				}
+			} else if (typeof value === "object" && value !== null) Object.values(value).forEach(processValue);
+		};
+		Object.values(mapping).forEach(processValue);
+		return types;
+	};
+	const usedMappingTypes = detectMappingTypes(mappingJson);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
+			/* @__PURE__ */ jsxs(CardTitle, {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", { children: tr("fluidgrids.builder.mappingEditor.cardTitle", "Mapping Configuration") }), validationErrors.length === 0 ? /* @__PURE__ */ jsxs(Badge, {
+					variant: "outline",
+					className: "text-[var(--color-status-success-text)] border-[var(--color-status-success-border)]",
+					children: [/* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 mr-1" }), tr("fluidgrids.builder.mappingEditor.badgeValid", "Valid")]
+				}) : /* @__PURE__ */ jsxs(Badge, {
+					variant: "outline",
+					className: "text-[var(--color-status-error-text)] border-[var(--color-status-error-border)]",
+					children: [
+						/* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 mr-1" }),
+						validationErrors.length,
+						" Error",
+						validationErrors.length > 1 ? "s" : ""
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(CardDescription, { children: [
+				"Create a mapping from ",
+				sourceNode,
+				".",
+				sourceOperation,
+				" to ",
+				targetNode,
+				".",
+				targetOperation
+			] }),
+			usedMappingTypes.size > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-1 mt-2",
+				children: Array.from(usedMappingTypes).map((type) => /* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					className: "text-xs",
+					children: type
+				}, type))
+			})
+		] }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: "visual",
+			className: "w-full",
+			children: [
+				/* @__PURE__ */ jsxs(TabsList, {
+					className: "mb-4",
+					children: [
+						/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "visual",
+							children: tr("fluidgrids.builder.mappingEditor.tabVisualMapper", "Visual Mapper")
+						}),
+						/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "code",
+							children: tr("fluidgrids.builder.mappingEditor.tabJsonEditor", "JSON Editor")
+						}),
+						/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "preview",
+							children: tr("fluidgrids.builder.mappingEditor.tabPreview", "Preview")
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(TabsContent, {
+					value: "visual",
+					children: /* @__PURE__ */ jsx(VisualMapper, {
+						sourceSchema,
+						targetSchema,
+						sourceNode,
+						sourceOperation,
+						targetNode,
+						targetOperation,
+						mapping: mappingJson,
+						onMappingChange: handleMappingChange
+					})
+				}),
+				/* @__PURE__ */ jsxs(TabsContent, {
+					value: "code",
+					children: [/* @__PURE__ */ jsx(CodeEditor, {
+						value: jsonDataString,
+						onBlur: handleJsonBlur,
+						onChange: handleJsonStringChange
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "mt-2 space-y-1",
+						children: [
+							/* @__PURE__ */ jsxs("p", {
+								className: "text-xs text-muted-foreground",
+								children: [
+									tr("fluidgrids.builder.mappingEditor.templateSyntaxHint", "Use JavaScript template literal syntax:"),
+									" ",
+									/* @__PURE__ */ jsxs("code", {
+										className: "bg-muted px-1 rounded",
+										children: [
+											"$",
+											"{",
+											"output.field",
+											"}"
+										]
+									})
+								]
+							}),
+							jsonError && /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-[var(--color-status-error-text)]",
+								children: jsonError
+							}),
+							validationErrors.length > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "p-2 bg-[var(--color-status-error-bg-subtle)] rounded-md",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "text-sm font-medium text-[var(--color-status-error-text)]",
+									children: tr("fluidgrids.builder.mappingEditor.validationErrors", "Validation Errors:")
+								}), /* @__PURE__ */ jsx("ul", {
+									className: "text-xs text-[var(--color-status-error-text)]/80 mt-1 list-disc list-inside",
+									children: validationErrors.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, index))
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(TabsContent, {
+					value: "preview",
+					children: /* @__PURE__ */ jsx(MappingPreview, {
+						input: sampleInput,
+						mapping: mappingJson,
+						output: previewOutput
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-6 flex justify-end space-x-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: handleTestMapping,
+				disabled: isTestingMapping,
+				children: isTestingMapping ? tr("fluidgrids.builder.mappingEditor.testing", "Testing...") : tr("fluidgrids.builder.mappingEditor.testMapping", "Test Mapping")
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: handleSaveMapping,
+				children: tr("fluidgrids.builder.mappingEditor.saveMapping", "Save Mapping")
+			})]
+		})] })] })
+	});
+}
+
+// src/builder/components/lib/schema-parser.ts
+function parseGraphQLSchema(sdl) {
+	const customSchema = {
+		types: {},
+		queryType: null,
+		mutationType: null,
+		subscriptionType: null
+	};
+	try {
+		const schema = buildSchema(sdl);
+		const queryType = schema.getQueryType();
+		const mutationType = schema.getMutationType();
+		const subscriptionType = schema.getSubscriptionType();
+		if (queryType) customSchema.queryType = queryType.name;
+		if (mutationType) customSchema.mutationType = mutationType.name;
+		if (subscriptionType) customSchema.subscriptionType = subscriptionType.name;
+		const typeMap = schema.getTypeMap();
+		Object.values(typeMap).forEach((type) => {
+			if (type.name.startsWith("__")) return;
+			if (type instanceof GraphQLObjectType) processObjectType(type, customSchema);
+			else if (type instanceof GraphQLInputObjectType) processInputObjectType(type, customSchema);
+			else if (type instanceof GraphQLEnumType) processEnumType(type, customSchema);
+			else if (type instanceof GraphQLInterfaceType) processInterfaceType(type, customSchema);
+			else if (type instanceof GraphQLUnionType) processUnionType(type, customSchema);
+		});
+		return customSchema;
+	} catch (error) {
+		console.error("Error parsing GraphQL schema:", error);
+		return customSchema;
+	}
+}
+function processObjectType(type, customSchema) {
+	const fields = type.getFields();
+	const processedFields = {};
+	Object.values(fields).forEach((field) => {
+		processedFields[field.name] = processField(field);
+	});
+	customSchema.types[type.name] = {
+		name: type.name,
+		kind: "type",
+		fields: processedFields
+	};
+}
+function processInputObjectType(type, customSchema) {
+	const fields = type.getFields();
+	const processedFields = {};
+	Object.values(fields).forEach((field) => {
+		processedFields[field.name] = processInputField(field);
+	});
+	customSchema.types[type.name] = {
+		name: type.name,
+		kind: "input",
+		fields: processedFields,
+		inputFields: processedFields
+	};
+}
+function processEnumType(type, customSchema) {
+	customSchema.types[type.name] = {
+		name: type.name,
+		kind: "enum",
+		fields: {}
+	};
+}
+function processInterfaceType(type, customSchema) {
+	const fields = type.getFields();
+	const processedFields = {};
+	Object.values(fields).forEach((field) => {
+		processedFields[field.name] = processField(field);
+	});
+	customSchema.types[type.name] = {
+		name: type.name,
+		kind: "interface",
+		fields: processedFields
+	};
+}
+function processUnionType(type, customSchema) {
+	customSchema.types[type.name] = {
+		name: type.name,
+		kind: "union",
+		fields: {}
+	};
+}
+function processField(field) {
+	const fieldType = field.type;
+	const typeInfo = getTypeInfo(fieldType);
+	const args = field.args.map((arg) => processArgument(arg));
+	return {
+		name: field.name,
+		type: typeInfo.typeName,
+		isNonNull: typeInfo.isNonNull,
+		isList: typeInfo.isList,
+		args
+	};
+}
+function processInputField(field) {
+	const fieldType = field.type;
+	const typeInfo = getTypeInfo(fieldType);
+	return {
+		name: field.name,
+		type: typeInfo.typeName,
+		isNonNull: typeInfo.isNonNull,
+		isList: typeInfo.isList,
+		args: []
+	};
+}
+function processArgument(arg) {
+	const argType = arg.type;
+	const typeInfo = getTypeInfo(argType);
+	return {
+		name: arg.name,
+		type: typeInfo.typeName,
+		isNonNull: typeInfo.isNonNull,
+		isList: typeInfo.isList
+	};
+}
+function getTypeInfo(inputType) {
+	let typeName = "";
+	let isNonNull = false;
+	let isList = false;
+	let currentType = inputType;
+	if (currentType instanceof GraphQLNonNull) {
+		isNonNull = true;
+		currentType = currentType.ofType;
+	}
+	if (currentType instanceof GraphQLList) {
+		isList = true;
+		currentType = currentType.ofType;
+		if (currentType instanceof GraphQLNonNull) currentType = currentType.ofType;
+	}
+	if (currentType.name) typeName = currentType.name;
+	else if (currentType.ofType?.name) typeName = currentType.ofType.name;
+	return {
+		typeName,
+		isNonNull,
+		isList
+	};
+}
+
+// src/builder/components/mapper/config/default-data-config.ts
+/**
+* Default data config for the mapper component.
+*
+* Note: Node configurations (with schemas) are passed dynamically via props
+* from the edge component. This default config only contains mapping type
+* examples and type compatibility rules.
+*/
+const defaultDataConfig = {
+	nodes: {},
+	mappingTypes: {
+		direct: {
+			displayName: "Direct Mapping",
+			description: "Map a source field directly to a target field using ${output.field} syntax",
+			color: {
+				compatible: MAPPING_COMPATIBILITY_COLORS.compatible,
+				incompatible: MAPPING_COMPATIBILITY_COLORS.incompatible
+			},
+			examples: [
+				{
+					name: "Simple field access",
+					expression: "${output.fieldName}",
+					description: "Access a direct field from the output"
+				},
+				{
+					name: "Nested field access",
+					expression: "${output.user.email}",
+					description: "Access nested properties"
+				},
+				{
+					name: "Array element access",
+					expression: "${output.items[0].name}",
+					description: "Access specific array elements"
+				},
+				{
+					name: "With fallback",
+					expression: "${output.user?.email || 'default@example.com'}",
+					description: "Safe access with default value"
+				}
+			]
+		},
+		expression: {
+			displayName: "Expression Mapping",
+			description: "Create a custom JavaScript expression to transform the data",
+			color: MAPPING_TYPE_COLORS.expression,
+			examples: [
+				{
+					name: "String concatenation",
+					expression: "${output.firstName + ' ' + output.lastName}",
+					description: "Combine first and last name"
+				},
+				{
+					name: "Template literal string",
+					expression: "${`Hello ${output.name}!`}",
+					description: "Use nested template literals for formatting"
+				},
+				{
+					name: "Mathematical operation",
+					expression: "${output.price * (1 - output.discount)}",
+					description: "Calculate discounted price"
+				},
+				{
+					name: "Conditional logic (ternary)",
+					expression: "${output.age >= 18 ? 'Adult' : 'Minor'}",
+					description: "Determine if adult or minor"
+				},
+				{
+					name: "Nullish coalescing",
+					expression: "${output.value ?? 'default'}",
+					description: "Use default if null/undefined"
+				},
+				{
+					name: "Logical OR fallback",
+					expression: "${output.error || 'Success'}",
+					description: "Fallback for falsy values"
+				},
+				{
+					name: "Array length",
+					expression: "${output.items?.length || 0}",
+					description: "Get the length of an array safely"
+				},
+				{
+					name: "Min value",
+					expression: "${Math.min(...output.values)}",
+					description: "Get the minimum value in an array"
+				},
+				{
+					name: "Max value",
+					expression: "${Math.max(...output.values)}",
+					description: "Get the maximum value in an array"
+				},
+				{
+					name: "Round number",
+					expression: "${Math.round(output.value)}",
+					description: "Round to nearest integer"
+				},
+				{
+					name: "JSON parsing",
+					expression: "${JSON.parse(output.jsonString)}",
+					description: "Parse a JSON string to an object"
+				},
+				{
+					name: "JSON stringify",
+					expression: "${JSON.stringify(output.data)}",
+					description: "Convert object to JSON string"
+				},
+				{
+					name: "Current timestamp",
+					expression: "${new Date().toISOString()}",
+					description: "Get current date/time in ISO format"
+				},
+				{
+					name: "Object creation",
+					expression: "${({ id: output.user.id, email: output.user.email })}",
+					description: "Create a new object from fields"
+				}
+			],
+			safeBuiltins: [
+				"parseInt",
+				"parseFloat",
+				"isNaN",
+				"isFinite",
+				"Number",
+				"String",
+				"Boolean",
+				"Math.min",
+				"Math.max",
+				"Math.round",
+				"Math.floor",
+				"Math.ceil",
+				"Math.abs",
+				"Array.isArray",
+				"JSON.parse",
+				"JSON.stringify",
+				"Object.keys",
+				"Object.values",
+				"Object.entries",
+				"Object.assign",
+				"Date",
+				"new Date()"
+			]
+		},
+		transform: {
+			displayName: "Transform Mapping",
+			description: "Apply string and data transformation functions",
+			color: MAPPING_TYPE_COLORS.transform,
+			examples: [
+				{
+					name: "Uppercase",
+					expression: "${output.field.toUpperCase()}",
+					description: "Convert text to uppercase"
+				},
+				{
+					name: "Lowercase",
+					expression: "${output.field.toLowerCase()}",
+					description: "Convert text to lowercase"
+				},
+				{
+					name: "Trim whitespace",
+					expression: "${output.field.trim()}",
+					description: "Remove leading/trailing whitespace"
+				},
+				{
+					name: "Split string",
+					expression: "${output.field.split(',')}",
+					description: "Split string into array by delimiter"
+				},
+				{
+					name: "Join array",
+					expression: "${output.items.join(', ')}",
+					description: "Join array elements with delimiter"
+				},
+				{
+					name: "Replace text",
+					expression: "${output.field.replace(/old/g, 'new')}",
+					description: "Replace all occurrences of text"
+				},
+				{
+					name: "Substring",
+					expression: "${output.field.substring(0, 10)}",
+					description: "Extract part of a string"
+				},
+				{
+					name: "Slice",
+					expression: "${output.field.slice(-5)}",
+					description: "Get last 5 characters"
+				},
+				{
+					name: "Includes check",
+					expression: "${output.field.includes('search')}",
+					description: "Check if string contains text"
+				},
+				{
+					name: "Starts with",
+					expression: "${output.field.startsWith('prefix')}",
+					description: "Check if string starts with text"
+				}
+			],
+			functions: [
+				{
+					name: "toUpperCase",
+					displayName: "Uppercase",
+					description: "Convert text to uppercase",
+					example: "${output.field.toUpperCase()}"
+				},
+				{
+					name: "toLowerCase",
+					displayName: "Lowercase",
+					description: "Convert text to lowercase",
+					example: "${output.field.toLowerCase()}"
+				},
+				{
+					name: "trim",
+					displayName: "Trim",
+					description: "Remove whitespace from start and end",
+					example: "${output.field.trim()}"
+				},
+				{
+					name: "split",
+					displayName: "Split",
+					description: "Split string into array by delimiter",
+					example: "${output.field.split(',')}"
+				},
+				{
+					name: "join",
+					displayName: "Join",
+					description: "Join array elements with delimiter",
+					example: "${output.items.join('-')}"
+				},
+				{
+					name: "replace",
+					displayName: "Replace",
+					description: "Replace text in string",
+					example: "${output.field.replace('old', 'new')}"
+				},
+				{
+					name: "concat",
+					displayName: "Concatenate",
+					description: "Join multiple strings together",
+					example: "${output.first + ' ' + output.last}"
+				}
+			]
+		},
+		cast: {
+			displayName: "Cast Mapping",
+			description: "Convert data from one type to another using JavaScript functions",
+			color: MAPPING_TYPE_COLORS.cast,
+			examples: [
+				{
+					name: "String to Integer",
+					expression: "${parseInt(output.numberString)}",
+					description: "Convert string to integer"
+				},
+				{
+					name: "String to Float",
+					expression: "${parseFloat(output.decimalString)}",
+					description: "Convert string to decimal number"
+				},
+				{
+					name: "To String",
+					expression: "${String(output.value)}",
+					description: "Convert any value to string"
+				},
+				{
+					name: "To Boolean",
+					expression: "${Boolean(output.value)}",
+					description: "Convert to true/false"
+				},
+				{
+					name: "Number with default",
+					expression: "${Number(output.value) || 0}",
+					description: "Convert to number with fallback"
+				},
+				{
+					name: "Parse with radix",
+					expression: "${parseInt(output.hex, 16)}",
+					description: "Parse hexadecimal string"
+				},
+				{
+					name: "Fixed decimals",
+					expression: "${parseFloat(output.price).toFixed(2)}",
+					description: "Format number with 2 decimal places"
+				}
+			],
+			types: [
+				{
+					name: "parseInt",
+					displayName: "Integer",
+					description: "Convert to whole number",
+					example: "${parseInt(output.field)}"
+				},
+				{
+					name: "parseFloat",
+					displayName: "Float",
+					description: "Convert to decimal number",
+					example: "${parseFloat(output.field)}"
+				},
+				{
+					name: "String",
+					displayName: "String",
+					description: "Convert to text",
+					example: "${String(output.field)}"
+				},
+				{
+					name: "Boolean",
+					displayName: "Boolean",
+					description: "Convert to true/false",
+					example: "${Boolean(output.field)}"
+				},
+				{
+					name: "Number",
+					displayName: "Number",
+					description: "Convert to number",
+					example: "${Number(output.field)}"
+				}
+			]
+		},
+		array: {
+			displayName: "Array Mapping",
+			description: "Transform arrays using map, filter, reduce and other array methods",
+			color: MAPPING_TYPE_COLORS.array,
+			examples: [
+				{
+					name: "Map - Extract IDs",
+					expression: "${output.users.map(u => u.id)}",
+					description: "Extract a single field from each item"
+				},
+				{
+					name: "Map - Transform objects",
+					expression: "${output.items.map(item => ({ name: item.name, value: item.value }))}",
+					description: "Transform each item to new shape"
+				},
+				{
+					name: "Map - With index",
+					expression: "${output.items.map((item, index) => ({ ...item, position: index + 1 }))}",
+					description: "Include index in transformation"
+				},
+				{
+					name: "Filter - Active users",
+					expression: "${output.users.filter(u => u.active)}",
+					description: "Keep only items matching condition"
+				},
+				{
+					name: "Filter - By value",
+					expression: "${output.items.filter(item => item.price > 100)}",
+					description: "Filter by numeric comparison"
+				},
+				{
+					name: "Filter + Map",
+					expression: "${output.users.filter(u => u.active).map(u => u.id)}",
+					description: "Chain filter and map operations"
+				},
+				{
+					name: "Reduce - Sum",
+					expression: "${output.items.reduce((sum, item) => sum + item.price, 0)}",
+					description: "Calculate total of all prices"
+				},
+				{
+					name: "Reduce - Average",
+					expression: "${output.items.reduce((sum, item) => sum + item.value, 0) / output.items.length}",
+					description: "Calculate average value"
+				},
+				{
+					name: "Reduce - Group by",
+					expression: "${output.items.reduce((acc, item) => ({ ...acc, [item.category]: [...(acc[item.category] || []), item] }), {})}",
+					description: "Group items by category"
+				},
+				{
+					name: "Find - First match",
+					expression: "${output.items.find(item => item.id === TriggerInput.itemId)}",
+					description: "Find first item matching condition"
+				},
+				{
+					name: "Some - Any match",
+					expression: "${output.items.some(item => item.active)}",
+					description: "Check if any item matches"
+				},
+				{
+					name: "Every - All match",
+					expression: "${output.items.every(item => item.valid)}",
+					description: "Check if all items match"
+				},
+				{
+					name: "Flat - Flatten array",
+					expression: "${output.nestedArrays.flat()}",
+					description: "Flatten one level of nesting"
+				},
+				{
+					name: "FlatMap - Map and flatten",
+					expression: "${output.users.flatMap(u => u.permissions)}",
+					description: "Map then flatten results"
+				},
+				{
+					name: "Sort - Ascending",
+					expression: "${[...output.items].sort((a, b) => a.price - b.price)}",
+					description: "Sort items by price ascending"
+				},
+				{
+					name: "Sort - Descending",
+					expression: "${[...output.items].sort((a, b) => b.price - a.price)}",
+					description: "Sort items by price descending"
+				},
+				{
+					name: "Slice - First N",
+					expression: "${output.items.slice(0, 5)}",
+					description: "Get first 5 items"
+				},
+				{
+					name: "Slice - Last N",
+					expression: "${output.items.slice(-3)}",
+					description: "Get last 3 items"
+				},
+				{
+					name: "Unique values",
+					expression: "${[...new Set(output.items.map(i => i.category))]}",
+					description: "Get unique categories"
+				},
+				{
+					name: "Concat arrays",
+					expression: "${output.list1.concat(output.list2)}",
+					description: "Combine two arrays"
+				},
+				{
+					name: "Includes check",
+					expression: "${output.tags.includes('important')}",
+					description: "Check if array contains value"
+				},
+				{
+					name: "Index of",
+					expression: "${output.items.findIndex(i => i.id === 'target')}",
+					description: "Find index of matching item"
+				}
+			]
+		},
+		object: {
+			displayName: "Object Mapping",
+			description: "Transform and manipulate objects",
+			color: MAPPING_TYPE_COLORS.object,
+			examples: [
+				{
+					name: "Get keys",
+					expression: "${Object.keys(output.metadata)}",
+					description: "Get all property names as array"
+				},
+				{
+					name: "Get values",
+					expression: "${Object.values(output.metadata)}",
+					description: "Get all property values as array"
+				},
+				{
+					name: "Get entries",
+					expression: "${Object.entries(output.metadata)}",
+					description: "Get key-value pairs as array"
+				},
+				{
+					name: "Merge objects",
+					expression: "${Object.assign({}, output.user, output.preferences)}",
+					description: "Combine multiple objects"
+				},
+				{
+					name: "Spread merge",
+					expression: "${{ ...output.defaults, ...output.overrides }}",
+					description: "Merge with spread operator"
+				},
+				{
+					name: "Pick fields",
+					expression: "${({ id: output.user.id, email: output.user.email })}",
+					description: "Select specific fields only"
+				},
+				{
+					name: "From entries",
+					expression: "${Object.fromEntries(output.pairs)}",
+					description: "Create object from key-value pairs"
+				},
+				{
+					name: "Has property",
+					expression: "${'email' in output.user}",
+					description: "Check if property exists"
+				}
+			]
+		},
+		context: {
+			displayName: "Workflow Context",
+			description: "Access workflow execution context and state from previous nodes",
+			color: MAPPING_TYPE_COLORS.context,
+			examples: [
+				{
+					name: "Trigger input",
+					expression: "${TriggerInput.userId}",
+					description: "Access original trigger payload"
+				},
+				{
+					name: "Trigger nested data",
+					expression: "${TriggerInput.webhookData.eventType}",
+					description: "Access nested trigger data"
+				},
+				{
+					name: "Previous node output",
+					expression: "${WorkflowState.fetch_user.output.name}",
+					description: "Access output from a specific previous node"
+				},
+				{
+					name: "Node status",
+					expression: "${WorkflowState.validate_data.status}",
+					description: "Check status of a previous node"
+				},
+				{
+					name: "Combine node outputs",
+					expression: "${WorkflowState.step1.output.count + WorkflowState.step2.output.count}",
+					description: "Combine data from multiple nodes"
+				},
+				{
+					name: "Run ID",
+					expression: "${RunContext.runId}",
+					description: "Current workflow run identifier"
+				},
+				{
+					name: "Workflow key",
+					expression: "${RunContext.workflowKey}",
+					description: "Workflow definition identifier"
+				},
+				{
+					name: "Tenant ID",
+					expression: "${RunContext.tenantId}",
+					description: "Current tenant identifier"
+				},
+				{
+					name: "Workspace ID",
+					expression: "${RunContext.workspaceId}",
+					description: "Current workspace identifier"
+				},
+				{
+					name: "Triggered at",
+					expression: "${RunContext.triggeredAt}",
+					description: "Workflow trigger timestamp"
+				},
+				{
+					name: "Triggered by",
+					expression: "${RunContext.triggeredBy}",
+					description: "User who triggered the workflow"
+				}
+			]
+		}
+	},
+	typeCompatibility: {
+		String: ["ID", "String"],
+		ID: ["String", "ID"],
+		Int: [
+			"Float",
+			"Int",
+			"String"
+		],
+		Float: ["String", "Float"],
+		Boolean: ["Boolean", "String"]
+	},
+	sampleData: {
+		search: { response: [{
+			metadata: {
+				title: "Introduction to Machine Learning",
+				source: "https://example.com/ml-intro",
+				sourceLabel: "Example ML Guide",
+				sourceType: "webpage",
+				sourceInfo: "Educational resource",
+				partition: "default",
+				score: .95,
+				images: ["https://example.com/ml-image.jpg"]
+			},
+			content: "Machine learning is a branch of artificial intelligence..."
+		}, {
+			metadata: {
+				title: "Deep Learning Fundamentals",
+				source: "https://example.com/dl-basics",
+				sourceLabel: "Deep Learning Guide",
+				sourceType: "webpage",
+				sourceInfo: "Technical documentation",
+				partition: "default",
+				score: .87,
+				images: ["https://example.com/dl-image.jpg"]
+			},
+			content: "Deep learning is a subset of machine learning..."
+		}] },
+		insert: {
+			success: true,
+			count: 1
+		}
+	}
+};
+
+// src/builder/components/mapper/app.tsx
+function convertInlineSchemaToGraphQL(inlineSchema, nodeType) {
+	const schema = {
+		types: {},
+		queryType: "Query",
+		mutationType: null,
+		subscriptionType: null
+	};
+	if (inlineSchema.outputFields && inlineSchema.outputFields.length > 0) {
+		const outputFields = {};
+		inlineSchema.outputFields.forEach((field) => {
+			outputFields[field.name] = {
+				name: field.name,
+				type: field.type,
+				isNonNull: field.required || false,
+				isList: field.type.startsWith("["),
+				args: []
+			};
+		});
+		const outputTypeName = `${nodeType}Output`;
+		schema.types[outputTypeName] = {
+			name: outputTypeName,
+			kind: "type",
+			fields: outputFields
+		};
+		schema.types["Query"] = {
+			name: "Query",
+			kind: "type",
+			fields: { execute: {
+				name: "execute",
+				type: outputTypeName,
+				isNonNull: false,
+				isList: false,
+				args: []
+			} }
+		};
+	}
+	if (inlineSchema.inputFields && inlineSchema.inputFields.length > 0) {
+		const inputFields = {};
+		inlineSchema.inputFields.forEach((field) => {
+			inputFields[field.name] = {
+				name: field.name,
+				type: field.type,
+				isNonNull: field.required || false,
+				isList: field.type.startsWith("["),
+				args: []
+			};
+		});
+		const inputTypeName = `${nodeType}Input`;
+		schema.types[inputTypeName] = {
+			name: inputTypeName,
+			kind: "input",
+			fields: {},
+			inputFields
+		};
+	}
+	return schema;
+}
+function App({ dataConfig = defaultDataConfig, sourceSchema: propSourceSchema, targetSchema: propTargetSchema, sourceOperation, targetOperation, sourceNode, targetNode, setEdges, edgeId }) {
+	const tr = useTr();
+	const initialParsedSchemas = useMemo(() => {
+		const parsed = {};
+		initializeConfig(parsed, dataConfig);
+		return parsed;
+	}, [dataConfig]);
+	const [parsedSchemas, setParsedSchemas] = useState(initialParsedSchemas);
+	const configInitialized = parsedSchemas === initialParsedSchemas || Object.keys(parsedSchemas).length > 0;
+	const [selectedSourceNode, _setSelectedSourceNode] = useState(sourceNode ?? null);
+	const [selectedSourceOperation, _setSelectedSourceOperation] = useState(sourceOperation ?? null);
+	const [selectedTargetNode, _setSelectedTargetNode] = useState(targetNode ?? null);
+	const [selectedTargetOperation, _setSelectedTargetOperation] = useState(targetOperation ?? null);
+	useEffect(() => {
+		if (configInitialized) {
+			const initializeSchemas = () => {
+				const newParsedSchemas = {};
+				if (propSourceSchema && selectedSourceNode) newParsedSchemas[selectedSourceNode] = propSourceSchema;
+				if (propTargetSchema && selectedTargetNode) newParsedSchemas[selectedTargetNode] = propTargetSchema;
+				Object.keys(dataConfig.nodes).forEach((nodeKey) => {
+					if (!newParsedSchemas[nodeKey]) {
+						const nodeInfo = dataConfig.nodes[nodeKey];
+						if (nodeInfo?.schema && typeof nodeInfo.schema !== "string" && (nodeInfo.schema.inputFields || nodeInfo.schema.outputFields)) newParsedSchemas[nodeKey] = convertInlineSchemaToGraphQL(nodeInfo.schema, nodeKey);
+						else newParsedSchemas[nodeKey] = {
+							types: {},
+							queryType: null,
+							mutationType: null,
+							subscriptionType: null
+						};
+					}
+				});
+				setParsedSchemas((prev) => {
+					return {
+						...prev,
+						...newParsedSchemas
+					};
+				});
+				initializeConfig(newParsedSchemas, dataConfig);
+			};
+			initializeSchemas();
+		}
+	}, [
+		configInitialized,
+		dataConfig,
+		propSourceSchema,
+		propTargetSchema,
+		selectedSourceNode,
+		selectedTargetNode
+	]);
+	const getSchemaForNode = (nodeType, isSource) => {
+		if (!nodeType) return null;
+		if (isSource && propSourceSchema) return propSourceSchema;
+		if (!isSource && propTargetSchema) return propTargetSchema;
+		if (parsedSchemas[nodeType]) return parsedSchemas[nodeType];
+		const nodeInfo = dataConfig.nodes[nodeType];
+		if (nodeInfo) {
+			if (nodeInfo.schema && typeof nodeInfo.schema !== "string" && (nodeInfo.schema.inputFields || nodeInfo.schema.outputFields)) {
+				const convertedSchema = convertInlineSchemaToGraphQL(nodeInfo.schema, nodeType);
+				setParsedSchemas((prev) => ({
+					...prev,
+					[nodeType]: convertedSchema
+				}));
+				return convertedSchema;
+			}
+			if (typeof nodeInfo.schema === "string") {
+				const parsedSchema = parseGraphQLSchema(nodeInfo.schema);
+				setParsedSchemas((prev) => ({
+					...prev,
+					[nodeType]: parsedSchema
+				}));
+				return parsedSchema;
+			}
+		}
+		console.warn(`Could not find or parse schema for node type: ${nodeType}`);
+		return null;
+	};
+	const currentSourceSchema = propSourceSchema || getSchemaForNode(selectedSourceNode, true);
+	const currentTargetSchema = propTargetSchema || getSchemaForNode(selectedTargetNode, false);
+	return /* @__PURE__ */ jsx(DataConfigProvider, {
+		config: dataConfig,
+		children: /* @__PURE__ */ jsxs(ThemeProvider$1, {
+			defaultTheme: "light",
+			storageKey: "vite-ui-theme",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-h-screen bg-background",
+				children: /* @__PURE__ */ jsxs("main", {
+					className: "container py-6",
+					children: [currentSourceSchema && currentTargetSchema && selectedSourceNode && selectedSourceOperation && selectedTargetNode && selectedTargetOperation && /* @__PURE__ */ jsxs("div", {
+						className: "mt-8 p-4 border rounded-lg",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-lg font-medium mb-4",
+							children: tr("fluidgrids.builder.mapperApp.dataMappingHeading", "Data Mapping")
+						}), /* @__PURE__ */ jsx(MappingEditor, {
+							sourceSchema: currentSourceSchema,
+							targetSchema: currentTargetSchema,
+							sourceNode: selectedSourceNode,
+							sourceOperation: selectedSourceOperation,
+							targetNode: selectedTargetNode,
+							targetOperation: selectedTargetOperation,
+							setEdges,
+							edgeId
+						})]
+					}), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs("div", {
+						className: "mt-8 p-4 border border-default rounded-lg bg-muted",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-md font-medium mb-2",
+							children: "Debug Information"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "text-sm",
+							children: [
+								/* @__PURE__ */ jsxs("p", { children: ["Source Node: ", selectedSourceNode || "None"] }),
+								/* @__PURE__ */ jsxs("p", { children: ["Source Operation: ", selectedSourceOperation || "None"] }),
+								/* @__PURE__ */ jsxs("p", { children: ["Target Node: ", selectedTargetNode || "None"] }),
+								/* @__PURE__ */ jsxs("p", { children: ["Target Operation: ", selectedTargetOperation || "None"] }),
+								/* @__PURE__ */ jsxs("p", { children: [
+									"Source Schema:",
+									" ",
+									currentSourceSchema ? "Available" : "Not available"
+								] }),
+								/* @__PURE__ */ jsxs("p", { children: [
+									"Target Schema:",
+									" ",
+									currentTargetSchema ? "Available" : "Not available"
+								] }),
+								/* @__PURE__ */ jsxs("p", { children: [
+									"Parsed Schemas:",
+									" ",
+									Object.keys(parsedSchemas).join(", ") || "None"
+								] }),
+								/* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", { children: "Schema Details" }), /* @__PURE__ */ jsx("pre", {
+									className: "text-xs mt-2 overflow-auto max-h-[200px]",
+									children: JSON.stringify({
+										sourceSchema: currentSourceSchema ? Object.keys(currentSourceSchema.types).length + " types" : "Not available",
+										targetSchema: currentTargetSchema ? Object.keys(currentTargetSchema.types).length + " types" : "Not available"
+									}, null, 2)
+								})] })
+							]
+						})]
+					})]
+				})
+			}), /* @__PURE__ */ jsx(Toaster, {})]
+		})
+	});
+}
+
+export { App as default };