@btst/stack 2.0.1 → 2.2.0

package/dist/packages/ui/src/components/ui-builder/internal/utils/templates.mjs

@@ -7,6 +7,101 @@ const renderTemplate = (template, data) => {
     return data[key] ?? "";
   });
 };
+const zodSchemaToTypeString = (schema) => {
+  const zodSchema = schema;
+  const def = zodSchema?._zod?.def ?? zodSchema?._def;
+  if (!def) {
+    return "(...args: unknown[]) => unknown";
+  }
+  const typeName = def.type ?? def.typeName;
+  if (typeName === "tuple" || typeName === "ZodTuple") {
+    const items = def.items ?? def.rest?.items ?? [];
+    if (!items || items.length === 0) {
+      return "() => void";
+    }
+    const paramTypes = items.map((item, index) => {
+      const { type: paramType, isOptional } = zodSchemaToParamType(item);
+      const optionalMark = isOptional ? "?" : "";
+      return `arg${index}${optionalMark}: ${paramType}`;
+    }).join(", ");
+    return `(${paramTypes}) => void`;
+  }
+  if (typeName === "object" || typeName === "ZodObject") {
+    return "(params: Record<string, unknown>) => void";
+  }
+  if (typeName === "function" || typeName === "ZodFunction") {
+    return "(...args: unknown[]) => unknown";
+  }
+  return "(...args: unknown[]) => unknown";
+};
+const zodSchemaToParamType = (schema) => {
+  const zodSchema = schema;
+  const def = zodSchema?._zod?.def ?? zodSchema?._def;
+  if (!def) {
+    return { type: "unknown", isOptional: false };
+  }
+  const typeName = def.type ?? def.typeName;
+  if (typeName === "optional" || typeName === "ZodOptional") {
+    const innerType = def.innerType ?? def.wrapped;
+    return { type: zodSchemaToSingleType(innerType), isOptional: true };
+  }
+  return { type: zodSchemaToSingleType(schema), isOptional: false };
+};
+const zodSchemaToSingleType = (schema) => {
+  const zodSchema = schema;
+  const def = zodSchema?._zod?.def ?? zodSchema?._def;
+  if (!def) {
+    return "unknown";
+  }
+  const typeName = def.type ?? def.typeName;
+  switch (typeName) {
+    case "string":
+    case "ZodString":
+      return "string";
+    case "number":
+    case "ZodNumber":
+      return "number";
+    case "boolean":
+    case "ZodBoolean":
+      return "boolean";
+    case "void":
+    case "ZodVoid":
+      return "void";
+    case "undefined":
+    case "ZodUndefined":
+      return "undefined";
+    case "null":
+    case "ZodNull":
+      return "null";
+    case "any":
+    case "ZodAny":
+      return "unknown";
+    case "unknown":
+    case "ZodUnknown":
+      return "unknown";
+    case "custom":
+    case "ZodType":
+      return "unknown";
+    case "object":
+    case "ZodObject":
+      return "Record<string, unknown>";
+    case "array":
+    case "ZodArray":
+      return "unknown[]";
+    case "optional":
+    case "ZodOptional": {
+      const innerOptional = def.innerType ?? def.wrapped;
+      return `${zodSchemaToSingleType(innerOptional)} | undefined`;
+    }
+    case "nullable":
+    case "ZodNullable": {
+      const innerNullable = def.innerType ?? def.wrapped;
+      return `${zodSchemaToSingleType(innerNullable)} | null`;
+    }
+    default:
+      return "unknown";
+  }
+};
 const toValidIdentifier = (input) => {
   let identifier = input.trim();
   if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(identifier)) {
@@ -42,11 +137,74 @@ const generateVariableIdentifiers = (variables) => {
   });
   return identifierMap;
 };
-const pageLayerToCode = (page, componentRegistry, variables = []) => {
+const generateFunctionIdentifiers = (functionIds, reservedIdentifiers) => {
+  const identifierMap = /* @__PURE__ */ new Map();
+  const usedIdentifiers = new Set(reservedIdentifiers);
+  functionIds.forEach((funcId) => {
+    const baseIdentifier = toValidIdentifier(funcId);
+    let identifier = baseIdentifier;
+    let counter = 1;
+    while (usedIdentifiers.has(identifier)) {
+      identifier = `${baseIdentifier}${counter}`;
+      counter++;
+    }
+    usedIdentifiers.add(identifier);
+    identifierMap.set(funcId, identifier);
+  });
+  return identifierMap;
+};
+const collectFunctionMetadataIds = (layer) => {
+  const functionIds = /* @__PURE__ */ new Set();
+  for (const [key, value] of Object.entries(layer.props)) {
+    if (key.startsWith("__function_") && typeof value === "string") {
+      functionIds.add(value);
+    }
+  }
+  if (hasLayerChildren(layer)) {
+    layer.children.forEach((child) => {
+      const childIds = collectFunctionMetadataIds(child);
+      childIds.forEach((id) => functionIds.add(id));
+    });
+  }
+  return functionIds;
+};
+const pageLayerToCode = (page, componentRegistry, variables = [], functionRegistry) => {
   const layers = page.children;
   const { mode, colorTheme, borderRadius, ...restOfProps } = page.props;
   const variableIdentifiers = generateVariableIdentifiers(variables);
-  const pageProps = generatePropsString(restOfProps, variables, variableIdentifiers);
+  const functionMetadataIds = /* @__PURE__ */ new Set();
+  for (const [key, value] of Object.entries(restOfProps)) {
+    if (key.startsWith("__function_") && typeof value === "string") {
+      functionMetadataIds.add(value);
+    }
+  }
+  if (Array.isArray(layers)) {
+    layers.forEach((layer) => {
+      const layerFuncIds = collectFunctionMetadataIds(layer);
+      layerFuncIds.forEach((id) => functionMetadataIds.add(id));
+    });
+  }
+  const functionVarReservedIds = /* @__PURE__ */ new Set();
+  for (const variable of variables) {
+    if (variable.type === "function") {
+      const identifier = variableIdentifiers.get(variable.id);
+      if (identifier) {
+        functionVarReservedIds.add(identifier);
+      }
+    }
+  }
+  const functionIdentifiers = generateFunctionIdentifiers(functionMetadataIds, functionVarReservedIds);
+  for (const variable of variables) {
+    if (variable.type === "function" && typeof variable.defaultValue === "string") {
+      if (functionMetadataIds.has(variable.defaultValue)) {
+        const varIdentifier = variableIdentifiers.get(variable.id);
+        if (varIdentifier) {
+          functionIdentifiers.set(variable.defaultValue, varIdentifier);
+        }
+      }
+    }
+  }
+  const pageProps = generatePropsString(restOfProps, variables, variableIdentifiers, functionIdentifiers);
   const imports = /* @__PURE__ */ new Set();
   const collectImports = (layer) => {
     const componentDefinition = componentRegistry[layer.type];
@@ -62,13 +220,30 @@ const pageLayerToCode = (page, componentRegistry, variables = []) => {
   let code = "";
   if (Array.isArray(layers)) {
     layers.forEach(collectImports);
-    code = layers.map((layer) => generateLayerCode(layer, 1, variables, variableIdentifiers)).join("\n");
+    code = layers.map((layer) => generateLayerCode(layer, 1, variables, variableIdentifiers, functionIdentifiers)).join("\n");
   } else {
     code = `{"${layers}"}`;
   }
   const importsString = Array.from(imports).join("\n");
-  const variablePropsInterface = generateVariablePropsInterface(variables, variableIdentifiers);
-  const variablePropsParam = variables.length > 0 ? "{ variables }: PageProps" : "";
+  const variablePropsInterface = generateVariablePropsInterface(
+    variables,
+    variableIdentifiers,
+    functionMetadataIds,
+    functionRegistry,
+    functionIdentifiers
+  );
+  const hasRegularVariables = variables.some((v) => v.type !== "function");
+  const hasFunctionVariables = variables.some((v) => v.type === "function");
+  const hasFunctionMetadata = functionMetadataIds.size > 0;
+  const hasFunctions = hasFunctionVariables || hasFunctionMetadata;
+  let variablePropsParam = "";
+  if (hasRegularVariables && hasFunctions) {
+    variablePropsParam = "{ variables, functions }: PageProps";
+  } else if (hasRegularVariables) {
+    variablePropsParam = "{ variables }: PageProps";
+  } else if (hasFunctions) {
+    variablePropsParam = "{ functions }: PageProps";
+  }
   const finalCode = renderTemplate(reactComponentTemplate, {
     imports: importsString,
     variablePropsInterface,
@@ -78,14 +253,14 @@ const pageLayerToCode = (page, componentRegistry, variables = []) => {
   });
   return finalCode;
 };
-const generateLayerCode = (layer, indent = 0, variables = [], variableIdentifiers) => {
+const generateLayerCode = (layer, indent = 0, variables = [], variableIdentifiers, functionIdentifiers) => {
   if (!variableIdentifiers && variables.length > 0) {
     variableIdentifiers = generateVariableIdentifiers(variables);
   }
   const indentation = "  ".repeat(indent);
   let childrenCode = "";
   if (hasLayerChildren(layer) && layer.children.length > 0) {
-    childrenCode = layer.children.map((child) => generateLayerCode(child, indent + 1, variables, variableIdentifiers)).join("\n");
+    childrenCode = layer.children.map((child) => generateLayerCode(child, indent + 1, variables, variableIdentifiers, functionIdentifiers)).join("\n");
   } else if (typeof layer.children === "string") {
     childrenCode = `${indentation}${"  "}{${JSON.stringify(layer.children)}}`;
   }
@@ -93,24 +268,36 @@ const generateLayerCode = (layer, indent = 0, variables = [], variableIdentifier
     return `${indentation}<${layer.type}${generatePropsString(
       layer.props,
       variables,
-      variableIdentifiers
+      variableIdentifiers,
+      functionIdentifiers
     )}>
 ${childrenCode}
 ${indentation}</${layer.type}>`;
   } else {
-    return `${indentation}<${layer.type}${generatePropsString(layer.props, variables, variableIdentifiers)} />`;
+    return `${indentation}<${layer.type}${generatePropsString(layer.props, variables, variableIdentifiers, functionIdentifiers)} />`;
   }
 };
-const generatePropsString = (props, variables = [], variableIdentifiers) => {
+const generatePropsString = (props, variables = [], variableIdentifiers, functionIdentifiers) => {
   if (!variableIdentifiers && variables.length > 0) {
     variableIdentifiers = generateVariableIdentifiers(variables);
   }
-  const propsArray = Object.entries(props).filter(([_, value]) => value !== void 0).map(([key, value]) => {
+  const functionMetadata = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("__function_") && typeof value === "string") {
+      const propName = key.replace("__function_", "");
+      functionMetadata.set(propName, value);
+    }
+  }
+  const propsArray = Object.entries(props).filter(([key, _]) => !key.startsWith("__function_")).filter(([key, _]) => !functionMetadata.has(key)).filter(([_, value]) => value !== void 0).map(([key, value]) => {
     let propValue;
     if (isVariableReference(value)) {
       const variable = variables.find((v) => v.id === value.__variableRef);
       if (variable && variableIdentifiers) {
-        propValue = `{variables.${variableIdentifiers.get(variable.id)}}`;
+        if (variable.type === "function") {
+          propValue = `{functions.${variableIdentifiers.get(variable.id)}}`;
+        } else {
+          propValue = `{variables.${variableIdentifiers.get(variable.id)}}`;
+        }
       } else {
         propValue = `{undefined}`;
       }
@@ -123,15 +310,22 @@ const generatePropsString = (props, variables = [], variableIdentifiers) => {
     }
     return `${key}=${propValue}`;
   });
+  functionMetadata.forEach((funcId, propName) => {
+    const sanitizedId = functionIdentifiers?.get(funcId) ?? toValidIdentifier(funcId);
+    propsArray.push(`${propName}={functions.${sanitizedId}}`);
+  });
   return propsArray.length > 0 ? ` ${propsArray.join(" ")}` : "";
 };
-const generateVariablePropsInterface = (variables, variableIdentifiers) => {
-  if (variables.length === 0) return "";
+const generateVariablePropsInterface = (variables, variableIdentifiers, functionMetadataIds, functionRegistry, functionIdentifiers) => {
+  const hasFunctionMetadata = functionMetadataIds && functionMetadataIds.size > 0;
+  if (variables.length === 0 && !hasFunctionMetadata) return "";
   if (!variableIdentifiers) {
     variableIdentifiers = generateVariableIdentifiers(variables);
   }
-  const variableTypes = variables.map((variable) => {
-    let tsType = "any";
+  const regularVariables = variables.filter((v) => v.type !== "function");
+  const functionVariables = variables.filter((v) => v.type === "function");
+  const variableTypes = regularVariables.map((variable) => {
+    let tsType = "unknown";
     switch (variable.type) {
       case "string":
         tsType = "string";
@@ -145,13 +339,59 @@ const generateVariablePropsInterface = (variables, variableIdentifiers) => {
     }
     return `    ${variableIdentifiers.get(variable.id)}: ${tsType};`;
   }).join("\n");
-  return `interface PageProps {
-  variables: {
+  const functionVariableTypes = functionVariables.map((variable) => {
+    const funcId = variable.defaultValue;
+    const funcDef = typeof funcId === "string" ? functionRegistry?.[funcId] : void 0;
+    if (funcDef?.typeSignature) {
+      return `    ${variableIdentifiers.get(variable.id)}: ${funcDef.typeSignature};`;
+    }
+    if (funcDef?.schema) {
+      const typeString = zodSchemaToTypeString(funcDef.schema);
+      return `    ${variableIdentifiers.get(variable.id)}: ${typeString};`;
+    }
+    return `    ${variableIdentifiers.get(variable.id)}: (...args: unknown[]) => unknown;`;
+  });
+  const emittedFunctionIdentifiers = /* @__PURE__ */ new Set();
+  for (const variable of functionVariables) {
+    const identifier = variableIdentifiers.get(variable.id);
+    if (identifier) {
+      emittedFunctionIdentifiers.add(identifier);
+    }
+  }
+  const functionMetadataTypes = hasFunctionMetadata ? Array.from(functionMetadataIds).filter((funcId) => {
+    const sanitizedId = functionIdentifiers?.get(funcId) ?? toValidIdentifier(funcId);
+    return !emittedFunctionIdentifiers.has(sanitizedId);
+  }).map((funcId) => {
+    const funcDef = functionRegistry?.[funcId];
+    const sanitizedId = functionIdentifiers?.get(funcId) ?? toValidIdentifier(funcId);
+    if (funcDef?.typeSignature) {
+      return `    ${sanitizedId}: ${funcDef.typeSignature};`;
+    }
+    if (funcDef?.schema) {
+      const typeString = zodSchemaToTypeString(funcDef.schema);
+      return `    ${sanitizedId}: ${typeString};`;
+    }
+    return `    ${sanitizedId}: (...args: unknown[]) => unknown;`;
+  }) : [];
+  const allFunctionTypes = [...functionVariableTypes, ...functionMetadataTypes].join("\n");
+  const hasVariables = regularVariables.length > 0;
+  const hasFunctions = functionVariables.length > 0 || hasFunctionMetadata;
+  if (!hasVariables && !hasFunctions) return "";
+  let interfaceContent = "interface PageProps {\n";
+  if (hasVariables) {
+    interfaceContent += `  variables: {
 ${variableTypes}
   };
-}
-
 `;
+  }
+  if (hasFunctions) {
+    interfaceContent += `  functions: {
+${allFunctionTypes}
+  };
+`;
+  }
+  interfaceContent += "}\n\n";
+  return interfaceContent;
 };
 const reactComponentTemplate = `import React from "react";
 <%~ it.imports %>

package/dist/packages/ui/src/components/ui-builder/internal/variables-panel.cjs

@@ -22,6 +22,7 @@ const VariablesPanel = ({
   const [editingId, setEditingId] = React.useState(null);
   const incrementRevision = editorStore.useEditorStore((state) => state.incrementRevision);
   const allowVariableEditing = editorStore.useEditorStore((state) => state.allowVariableEditing);
+  const functionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
   const handleAddVariable = React.useCallback(
     (name, type, defaultValue) => {
       addVariable(name, type, defaultValue);
@@ -64,7 +65,8 @@ const VariablesPanel = ({
       AddVariableForm,
       {
         onSave: handleAddVariable,
-        onCancel: handleSetIsNotAdding
+        onCancel: handleSetIsNotAdding,
+        functionRegistry
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: variables.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -76,7 +78,8 @@ const VariablesPanel = ({
         onSave: handleOnSave,
         onCancel: handleOnCancel,
         onDelete: handleOnDelete,
-        editVariables: allowVariableEditing
+        editVariables: allowVariableEditing,
+        functionRegistry
       },
       variable.id
     )) }),
@@ -85,23 +88,37 @@ const VariablesPanel = ({
 };
 const AddVariableForm = ({
   onSave,
-  onCancel
+  onCancel,
+  functionRegistry
 }) => {
   const [name, setName] = React.useState("");
   const [type, setType] = React.useState("string");
   const [defaultValue, setDefaultValue] = React.useState("");
   const [errors, setErrors] = React.useState(EMPTY_OBJECT);
+  const functionOptions = React.useMemo(() => {
+    if (!functionRegistry) return [];
+    return Object.entries(functionRegistry).map(([id, def]) => ({
+      id,
+      name: def.name,
+      description: def.description
+    }));
+  }, [functionRegistry]);
+  const hasFunctions = functionOptions.length > 0;
   const validateForm = React.useCallback(() => {
     const newErrors = {};
     if (!name.trim()) {
       newErrors.name = "Name is required";
     }
-    if (!defaultValue.trim()) {
+    if (type === "function") {
+      if (!defaultValue) {
+        newErrors.defaultValue = "Please select a function";
+      }
+    } else if (!defaultValue.trim()) {
       newErrors.defaultValue = "Preview value is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
-  }, [name, defaultValue]);
+  }, [name, defaultValue, type]);
   const handleSave = React.useCallback(() => {
     if (!validateForm()) return;
     let parsedValue = defaultValue;
@@ -124,7 +141,10 @@ const AddVariableForm = ({
     [errors.name]
   );
   const handleTypeChange = React.useCallback(
-    (value) => setType(value),
+    (value) => {
+      setType(value);
+      setDefaultValue("");
+    },
     []
   );
   const handleDefaultValueChange = React.useCallback(
@@ -135,6 +155,14 @@ const AddVariableForm = ({
     },
     [errors.defaultValue]
   );
+  const handleFunctionSelect = React.useCallback(
+    (value) => {
+      setDefaultValue(value);
+      if (errors.defaultValue)
+        setErrors((prev) => ({ ...prev, defaultValue: void 0 }));
+    },
+    [errors.defaultValue]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(card.CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardTitle, { className: "text-sm", children: "Add New Variable" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { className: "space-y-3", children: [
@@ -162,11 +190,25 @@ const AddVariableForm = ({
           /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "string", children: "String" }),
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "number", children: "Number" }),
-            /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "boolean", children: "Boolean" })
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "boolean", children: "Boolean" }),
+            hasFunctions && /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "function", children: "Function" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: type === "function" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { htmlFor: "var-function", children: [
+          "Function ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: defaultValue, onValueChange: handleFunctionSelect, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: errors.defaultValue ? "border-red-500" : "", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select a function..." }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: functionOptions.map((fn) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: fn.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: fn.name }),
+            fn.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: fn.description })
+          ] }) }, fn.id)) })
+        ] }),
+        errors.defaultValue && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { htmlFor: "var-default", children: [
           "Preview Value ",
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
@@ -182,7 +224,7 @@ const AddVariableForm = ({
           }
         ),
         errors.defaultValue && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { size: "sm", onClick: handleSave, children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "h-4 w-4 mr-2" }),
@@ -203,7 +245,8 @@ const VariableCard = ({
   onSave,
   onCancel,
   onDelete,
-  editVariables
+  editVariables,
+  functionRegistry
 }) => {
   const [name, setName] = React.useState(variable.name);
   const [type, setType] = React.useState(variable.type);
@@ -211,17 +254,35 @@ const VariableCard = ({
     String(variable.defaultValue)
   );
   const [errors, setErrors] = React.useState(EMPTY_OBJECT);
+  const functionOptions = React.useMemo(() => {
+    if (!functionRegistry) return [];
+    return Object.entries(functionRegistry).map(([id, def]) => ({
+      id,
+      name: def.name,
+      description: def.description
+    }));
+  }, [functionRegistry]);
+  const hasFunctions = functionOptions.length > 0;
+  const getFunctionDisplayName = React.useCallback((funcId) => {
+    if (!functionRegistry) return funcId;
+    const fn = functionRegistry[funcId];
+    return fn ? fn.name : funcId;
+  }, [functionRegistry]);
   const validateForm = React.useCallback(() => {
     const newErrors = {};
     if (!name.trim()) {
       newErrors.name = "Name is required";
     }
-    if (!defaultValue.trim()) {
+    if (type === "function") {
+      if (!defaultValue) {
+        newErrors.defaultValue = "Please select a function";
+      }
+    } else if (!defaultValue.trim()) {
       newErrors.defaultValue = "Preview value is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
-  }, [name, defaultValue]);
+  }, [name, defaultValue, type]);
   const handleSave = React.useCallback(() => {
     if (!validateForm()) return;
     let parsedValue = defaultValue;
@@ -244,7 +305,10 @@ const VariableCard = ({
     [errors.name]
   );
   const handleTypeChange = React.useCallback(
-    (value) => setType(value),
+    (value) => {
+      setType(value);
+      setDefaultValue("");
+    },
     []
   );
   const handleDefaultValueChange = React.useCallback(
@@ -255,6 +319,14 @@ const VariableCard = ({
     },
     [errors.defaultValue]
   );
+  const handleFunctionSelect = React.useCallback(
+    (value) => {
+      setDefaultValue(value);
+      if (errors.defaultValue)
+        setErrors((prev) => ({ ...prev, defaultValue: void 0 }));
+    },
+    [errors.defaultValue]
+  );
   const handleOnEdit = React.useCallback(() => {
     onEdit(variable.id);
   }, [onEdit, variable.id]);
@@ -286,11 +358,25 @@ const VariableCard = ({
           /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "string", children: "String" }),
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "number", children: "Number" }),
-            /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "boolean", children: "Boolean" })
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "boolean", children: "Boolean" }),
+            hasFunctions && /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "function", children: "Function" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: type === "function" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { htmlFor: `edit-function-${variable.id}`, children: [
+          "Function ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: defaultValue, onValueChange: handleFunctionSelect, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: errors.defaultValue ? "border-red-500" : "", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select a function..." }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: functionOptions.map((fn) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: fn.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: fn.name }),
+            fn.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: fn.description })
+          ] }) }, fn.id)) })
+        ] }),
+        errors.defaultValue && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { htmlFor: `edit-default-${variable.id}`, children: [
           "Preview Value ",
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
@@ -306,7 +392,7 @@ const VariableCard = ({
           }
         ),
         errors.defaultValue && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { size: "sm", onClick: handleSave, children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "h-4 w-4 mr-2" }),
@@ -325,7 +411,7 @@ const VariableCard = ({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: variable.name }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-1 rounded", children: variable.type })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground mt-1", children: String(variable.defaultValue) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground mt-1", children: variable.type === "function" ? getFunctionDisplayName(String(variable.defaultValue)) : String(variable.defaultValue) })
     ] }),
     editVariables && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", variant: "ghost", onClick: handleOnEdit, children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Edit2, { className: "h-4 w-4" }) }),
@@ -341,6 +427,8 @@ function getPlaceholderForType(type) {
       return "0";
     case "boolean":
       return "true";
+    case "function":
+      return "Select a function...";
     default:
       return "";
   }