@btst/stack 2.0.1 → 2.2.0

package/dist/packages/ui/src/components/ui-builder/internal/layers-panel.mjs

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo, useState, useRef, useCallback, useLayoutEffect } from 'react';
 import isDeepEqual from '../../../../../../_virtual/index.mjs';
 import { useLayerStore } from '../../../lib/ui-builder/store/layer-store.mjs';
+import { isVariableReference } from '../types.mjs';
 import { cn } from '../../../lib/utils.mjs';
 import { hasLayerChildren, findAllParentLayersRecursive } from '../../../lib/ui-builder/store/layer-utils.mjs';
 import { Plus } from 'lucide-react';
@@ -18,9 +19,7 @@ const LayersPanel = ({ className }) => {
     selectedLayerId,
     findLayerById,
     updateLayer,
-    selectLayer,
-    removeLayer,
-    duplicateLayer
+    selectLayer
   } = useLayerStore();
   const pageLayer = findLayerById(selectedPageId);
   const layers = useMemo(() => [pageLayer], [pageLayer]);
@@ -35,9 +34,7 @@ const LayersPanel = ({ className }) => {
       selectedPageId,
       selectedLayerId,
       updateLayer,
-      selectLayer,
-      removeLayer,
-      duplicateLayer
+      selectLayer
     }
   );
 };
@@ -48,9 +45,7 @@ const LayersTree = React__default.memo(
     selectedPageId,
     selectedLayerId,
     updateLayer,
-    selectLayer,
-    removeLayer,
-    duplicateLayer
+    selectLayer
   }) => {
     const [openIdsArray, setOpenIdsArray] = useState([]);
     const prevSelectedLayerId = useRef(selectedLayerId);
@@ -135,10 +130,7 @@ const LayersTree = React__default.memo(
             onToggle: handleNodeToggle,
             level: stat.level,
             selectedLayerId,
-            selectLayer,
-            removeLayer,
-            duplicateLayer,
-            updateLayer
+            selectLayer
           },
           stableKey
         );
@@ -147,9 +139,6 @@ const LayersTree = React__default.memo(
         handleNodeToggle,
         selectedLayerId,
         selectLayer,
-        removeLayer,
-        duplicateLayer,
-        updateLayer,
         layers
       ]
     );
@@ -160,6 +149,8 @@ const LayersTree = React__default.memo(
           processed.children = layer.children.map(processLayer);
         } else if (typeof layer.children === "string") {
           processed.children = [];
+        } else if (isVariableReference(layer.children)) {
+          processed.children = [];
         } else if (!layer.children) {
           processed.children = [];
         }

package/dist/packages/ui/src/components/ui-builder/internal/utils/render-utils.cjs

@@ -37,12 +37,14 @@ function isLayerBeingDraggedOrDescendant(layerId, activeLayerId, pages) {
   return false;
 }
 const RenderLayer = React.memo(
-  ({ layer, componentRegistry, editorConfig, variables, variableValues }) => {
+  ({ layer, componentRegistry, editorConfig, variables, variableValues, functionRegistry }) => {
     const storeVariables = layerStore.useLayerStore((state) => state.variables);
     const pages = layerStore.useLayerStore((state) => state.pages);
     const isLayerAPage = layerStore.useLayerStore((state) => state.isLayerAPage(layer.id));
     const registry = editorStore.useEditorStore((state) => state.registry);
+    const storeFunctionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
     const dndContext = dndContexts.useDndContext();
+    const effectiveFunctionRegistry = functionRegistry ?? storeFunctionRegistry;
     const effectiveVariables = variables || storeVariables;
     const componentDefinition = componentRegistry[layer.type];
     const prevLayer = React.useRef(layer);
@@ -54,8 +56,8 @@ const RenderLayer = React.memo(
       layer
     }), [layer, componentRegistry]);
     const resolvedProps = React.useMemo(
-      () => variableResolver.resolveVariableReferences(layer.props, effectiveVariables, variableValues),
-      [layer.props, effectiveVariables, variableValues]
+      () => variableResolver.resolveVariableReferences(layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry),
+      [layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry]
     );
     const childEditorConfig = React.useMemo(() => {
       return editorConfig ? { ...editorConfig, zIndex: editorConfig.zIndex + 1, parentUpdated: editorConfig.parentUpdated || !index(prevLayer.current, layer) } : void 0;
@@ -71,7 +73,12 @@ const RenderLayer = React.memo(
       [editorConfig, dndContext.isDragging, canAcceptChildren, isBeingDragged]
     );
     const childProps = React.useMemo(() => {
-      const props = { ...resolvedProps };
+      const props = {};
+      for (const [key, value] of Object.entries(resolvedProps)) {
+        if (!key.startsWith("__function_")) {
+          props[key] = value;
+        }
+      }
       if (showDropZones && layerUtils.hasLayerChildren(layer)) {
         const existingClassName = props.className || "";
         if (!hasPositionClass(existingClassName)) {
@@ -103,7 +110,8 @@ const RenderLayer = React.memo(
             layer: child,
             variables,
             variableValues,
-            editorConfig: childEditorConfig
+            editorConfig: childEditorConfig,
+            functionRegistry
           },
           child.id
         );
@@ -174,9 +182,7 @@ const RenderLayer = React.memo(
         zIndex,
         totalLayers,
         selectedLayer,
-        onSelectElement,
-        handleDuplicateLayer,
-        handleDeleteLayer
+        onSelectElement
       } = editorConfig;
       return /* @__PURE__ */ jsxRuntime.jsx(
         devProfiler.DevProfiler,
@@ -192,8 +198,6 @@ const RenderLayer = React.memo(
               onSelectElement,
               isPageLayer: isLayerAPage,
               totalLayers,
-              onDuplicateLayer: handleDuplicateLayer,
-              onDeleteLayer: handleDeleteLayer,
               children: DragFeedbackWrapper
             },
             layer.id
@@ -213,7 +217,8 @@ const RenderLayer = React.memo(
     const layerEqual = index(prevProps.layer, nextProps.layer);
     const variablesEqual = index(prevProps.variables, nextProps.variables);
     const variableValuesEqual = index(prevProps.variableValues, nextProps.variableValues);
-    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual;
+    const functionRegistryEqual = prevProps.functionRegistry === nextProps.functionRegistry;
+    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual && functionRegistryEqual;
   }
 );
 RenderLayer.displayName = "RenderLayer";

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

@@ -35,12 +35,14 @@ function isLayerBeingDraggedOrDescendant(layerId, activeLayerId, pages) {
   return false;
 }
 const RenderLayer = memo(
-  ({ layer, componentRegistry, editorConfig, variables, variableValues }) => {
+  ({ layer, componentRegistry, editorConfig, variables, variableValues, functionRegistry }) => {
     const storeVariables = useLayerStore((state) => state.variables);
     const pages = useLayerStore((state) => state.pages);
     const isLayerAPage = useLayerStore((state) => state.isLayerAPage(layer.id));
     const registry = useEditorStore((state) => state.registry);
+    const storeFunctionRegistry = useEditorStore((state) => state.functionRegistry);
     const dndContext = useDndContext();
+    const effectiveFunctionRegistry = functionRegistry ?? storeFunctionRegistry;
     const effectiveVariables = variables || storeVariables;
     const componentDefinition = componentRegistry[layer.type];
     const prevLayer = useRef(layer);
@@ -52,8 +54,8 @@ const RenderLayer = memo(
       layer
     }), [layer, componentRegistry]);
     const resolvedProps = useMemo(
-      () => resolveVariableReferences(layer.props, effectiveVariables, variableValues),
-      [layer.props, effectiveVariables, variableValues]
+      () => resolveVariableReferences(layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry),
+      [layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry]
     );
     const childEditorConfig = useMemo(() => {
       return editorConfig ? { ...editorConfig, zIndex: editorConfig.zIndex + 1, parentUpdated: editorConfig.parentUpdated || !isDeepEqual(prevLayer.current, layer) } : void 0;
@@ -69,7 +71,12 @@ const RenderLayer = memo(
       [editorConfig, dndContext.isDragging, canAcceptChildren, isBeingDragged]
     );
     const childProps = useMemo(() => {
-      const props = { ...resolvedProps };
+      const props = {};
+      for (const [key, value] of Object.entries(resolvedProps)) {
+        if (!key.startsWith("__function_")) {
+          props[key] = value;
+        }
+      }
       if (showDropZones && hasLayerChildren(layer)) {
         const existingClassName = props.className || "";
         if (!hasPositionClass(existingClassName)) {
@@ -101,7 +108,8 @@ const RenderLayer = memo(
             layer: child,
             variables,
             variableValues,
-            editorConfig: childEditorConfig
+            editorConfig: childEditorConfig,
+            functionRegistry
           },
           child.id
         );
@@ -172,9 +180,7 @@ const RenderLayer = memo(
         zIndex,
         totalLayers,
         selectedLayer,
-        onSelectElement,
-        handleDuplicateLayer,
-        handleDeleteLayer
+        onSelectElement
       } = editorConfig;
       return /* @__PURE__ */ jsx(
         DevProfiler,
@@ -190,8 +196,6 @@ const RenderLayer = memo(
               onSelectElement,
               isPageLayer: isLayerAPage,
               totalLayers,
-              onDuplicateLayer: handleDuplicateLayer,
-              onDeleteLayer: handleDeleteLayer,
               children: DragFeedbackWrapper
             },
             layer.id
@@ -211,7 +215,8 @@ const RenderLayer = memo(
     const layerEqual = isDeepEqual(prevProps.layer, nextProps.layer);
     const variablesEqual = isDeepEqual(prevProps.variables, nextProps.variables);
     const variableValuesEqual = isDeepEqual(prevProps.variableValues, nextProps.variableValues);
-    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual;
+    const functionRegistryEqual = prevProps.functionRegistry === nextProps.functionRegistry;
+    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual && functionRegistryEqual;
   }
 );
 RenderLayer.displayName = "RenderLayer";

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

@@ -9,6 +9,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)) {
@@ -44,11 +139,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 (layerUtils.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];
@@ -64,13 +222,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,
@@ -80,14 +255,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 (layerUtils.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)}}`;
   }
@@ -95,24 +270,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 (types.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}`;
       }
@@ -125,15 +312,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";
@@ -147,13 +341,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 %>