@codeyam/codeyam-cli 0.1.0-staging.8aea589 → 0.1.0-staging.bbe4da9

package/background/src/lib/virtualized/project/writeScenarioComponents.js

@@ -1,3 +1,4 @@
+import { ProjectFramework, } from "../../../../../packages/types/index.js";
 import writeFile from "../common/writeFile.js";
 import { isFrameworkRoute, getFrameworkRoutePath, safeFileName, PROJECT_RELATIVE_PATH, } from "../../../../../packages/utils/index.js";
 import { getRelativePath, safeFolder } from "../../../../../packages/generate/index.js";
@@ -6,11 +7,18 @@ import { splitOutsideParenthesesAndArrays } from "../../../../../packages/ai/ind
 import { loadEntities } from "../../../../../packages/supabase/index.js";
 import * as fs from 'fs';
 import * as path from 'path';
+/**
+ * Escape special regex characters in a string so it can be used as a literal pattern.
+ * This prevents characters like . * + ? ^ $ { } ( ) | [ ] \ from being interpreted as regex metacharacters.
+ */
+function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
 function hasMockStructure(importedExport, fileAnalyses) {
     if (!fileAnalyses?.some((a) => a.entity.metadata?.isolatedDataStructure?.dependencySchemas)) {
         return false;
     }
-    return !!constructMockCode(importedExport.name, fileAnalyses.find((a) => !!a.metadata?.mergedDataStructure?.dependencySchemas?.[importedExport.filePath]?.[importedExport.name])?.metadata?.mergedDataStructure?.dependencySchemas);
+    return !!constructMockCode(importedExport.name, fileAnalyses.find((a) => !!a.metadata?.mergedDataStructure?.dependencySchemas?.[importedExport.filePath]?.[importedExport.name])?.metadata?.mergedDataStructure?.dependencySchemas, importedExport.entityType);
 }
 function isIndexPath(filePath) {
     if (!filePath)
@@ -19,27 +27,81 @@ function isIndexPath(filePath) {
     return fileName.startsWith('index.');
 }
 /**
- * Rewrite asset imports (CSS, images, fonts, etc.) to correct relative paths.
- * These imports aren't tracked as importedExports, so we need to handle them separately.
+ * Convert .d.ts type declaration content to stub implementations.
+ * .d.ts files only have type declarations which don't provide runtime exports.
+ * This function converts them to actual stub implementations.
  *
- * Handles patterns like:
+ * @param content - The .d.ts file content
+ * @param entityName - The name of the entity we're generating for (used to ensure it's exported)
+ * @returns The converted content with stub implementations
+ */
+function convertDtsToStubs(content, entityName) {
+    let result = content;
+    // Handle object types FIRST (before simple types) since they span multiple lines
+    // and contain semicolons that would incorrectly terminate the simple type regex
+    // Convert "export declare const NAME: { ... };" (object type) to "export const NAME = {} as any;"
+    result = result.replace(/export\s+declare\s+const\s+(\w+)\s*:\s*\{[^}]*\}\s*;/gs, 'export const $1 = {} as any;');
+    // Convert "export declare let NAME: { ... };" (object type) to "export let NAME = {} as any;"
+    result = result.replace(/export\s+declare\s+let\s+(\w+)\s*:\s*\{[^}]*\}\s*;/gs, 'export let $1 = {} as any;');
+    // Convert "export declare var NAME: { ... };" (object type) to "export var NAME = {} as any;"
+    result = result.replace(/export\s+declare\s+var\s+(\w+)\s*:\s*\{[^}]*\}\s*;/gs, 'export var $1 = {} as any;');
+    // Now handle simple types (non-object types)
+    // Convert "export declare const NAME: TYPE;" to "export const NAME = {} as any;"
+    result = result.replace(/export\s+declare\s+const\s+(\w+)\s*:\s*[^;]+;/g, 'export const $1 = {} as any;');
+    // Convert "export declare let NAME: TYPE;" to "export let NAME = {} as any;"
+    result = result.replace(/export\s+declare\s+let\s+(\w+)\s*:\s*[^;]+;/g, 'export let $1 = {} as any;');
+    // Convert "export declare var NAME: TYPE;" to "export var NAME = {} as any;"
+    result = result.replace(/export\s+declare\s+var\s+(\w+)\s*:\s*[^;]+;/g, 'export var $1 = {} as any;');
+    // Convert "export declare function NAME(...): TYPE;" to "export function NAME() { return {} as any; }"
+    result = result.replace(/export\s+declare\s+function\s+(\w+)\s*\([^)]*\)\s*:\s*[^;]+;/g, 'export function $1(...args: any[]) { return {} as any; }');
+    // Convert "export declare class NAME { ... }" to "export class NAME {}"
+    // This is tricky because class bodies can span multiple lines
+    result = result.replace(/export\s+declare\s+class\s+(\w+)\s*(?:extends\s+[^{]+)?\{[^}]*\}/gs, 'export class $1 {}');
+    // Convert "declare const NAME: { ... }" (object type, non-exported) to "const NAME = {} as any;"
+    // Object types can span multiple lines and contain semicolons, so we handle them separately
+    // The 's' flag makes . match newlines, so this matches the entire object type block
+    result = result.replace(/^declare\s+const\s+(\w+)\s*:\s*\{[^}]*\}\s*;/gms, 'const $1 = {} as any;');
+    // Convert "declare const NAME: TYPE;" (simple type, non-exported) to "const NAME = {} as any;"
+    // These are often used with "export { NAME }" at the end
+    // This must come AFTER the object type handler above
+    result = result.replace(/^declare\s+const\s+(\w+)\s*:\s*[^;]+;/gm, 'const $1 = {} as any;');
+    // Convert "declare function NAME" (non-exported) to "function NAME() { return {} as any; }"
+    result = result.replace(/^declare\s+function\s+(\w+)\s*\([^)]*\)\s*:\s*[^;]+;/gm, 'function $1(...args: any[]) { return {} as any; }');
+    // Convert "declare class NAME" (non-exported) to "class NAME {}"
+    result = result.replace(/^declare\s+class\s+(\w+)\s*(?:extends\s+[^{]+)?\{[^}]*\}/gm, 'class $1 {}');
+    // Remove "export { }" at the end (empty export statement that marks module as having no exports)
+    result = result.replace(/export\s*\{\s*\}\s*;?\s*$/g, '');
+    // Keep export type and export interface statements as-is (they're valid in .ts)
+    // No transformation needed for these
+    console.log(`CodeYam: Converted .d.ts content for entity "${entityName}". Result length: ${result.length}`);
+    return result;
+}
+/**
+ * Rewrite relative asset paths to correct locations when a file is moved.
+ *
+ * This function generically handles ANY string literal containing a relative path
+ * to an asset file, not just import statements. This catches patterns like:
  * - import "./globals.css"
  * - import styles from "./file.module.css.js"
- * - import logo from "./logo.png.js"
+ * - localFont({ src: "../fonts/font.woff2" })
+ * - Image src="../images/logo.png"
+ * - Any other string literal with a relative asset path
  */
 function rewriteAssetImports(fileContent, originalFilePath, newFilePath) {
-    // Match imports with non-JS/TS extensions
+    // Asset file extensions that should have their paths rewritten
     const assetExtensions = 'css|scss|sass|less|styl|png|jpg|jpeg|gif|svg|webp|ico|woff|woff2|ttf|eot|otf|mp4|webm|json';
-    const assetImportRegex = new RegExp(`import\\s+(?:[\\w$]+\\s+from\\s+)?(['"])(\\.{1,2}/[^'"]+\\.(?:${assetExtensions}))\\1`, 'g');
+    // Match ANY string literal containing a relative path to an asset file
+    // This captures both single and double quoted strings that start with ./ or ../
+    const relativeAssetPathRegex = new RegExp(`(['"])(\\.{1,2}/[^'"]*\\.(?:${assetExtensions}))\\1`, 'g');
     // Get the directory part of the original file path (relative to project root)
     const originalDirParts = originalFilePath.split('/').slice(0, -1);
-    return fileContent.replace(assetImportRegex, (match, quote, importPath) => {
+    return fileContent.replace(relativeAssetPathRegex, (match, quote, assetPath) => {
         // Resolve the asset path relative to the original file's directory
         // We need to manually resolve the relative path without using path.resolve
         // which would resolve against the actual filesystem
-        const importParts = importPath.split('/');
+        const pathParts = assetPath.split('/');
         const resolvedParts = [...originalDirParts];
-        for (const part of importParts) {
+        for (const part of pathParts) {
             if (part === '..') {
                 resolvedParts.pop();
             }
@@ -51,10 +113,141 @@ function rewriteAssetImports(fileContent, originalFilePath, newFilePath) {
         const absoluteAssetPath = resolvedParts.join('/');
         // Calculate the new relative path from new file location
         const newRelativePath = getRelativePath(newFilePath, absoluteAssetPath);
-        // Reconstruct the import statement
-        return match.replace(importPath, newRelativePath);
+        // Replace the path in the original match, preserving the quote style
+        return `${quote}${newRelativePath}${quote}`;
+    });
+}
+/**
+ * Rewrite relative TypeScript/JavaScript module imports when a file is moved.
+ *
+ * When a file is moved from one location to another (e.g., from [environmentId]/
+ * to _environmentId_/), relative imports like "./lib/organization" need to be
+ * rewritten to point to the correct location from the new path.
+ *
+ * This is similar to rewriteAssetImports but handles TypeScript/JavaScript modules
+ * instead of asset files (CSS, images, etc.).
+ */
+function rewriteRelativeModuleImports(fileContent, originalFilePath, newFilePath) {
+    // Module file extensions that should have their relative paths rewritten
+    const moduleExtensions = 'ts|tsx|js|jsx|mjs|cjs';
+    // Match import statements with relative paths (starting with ./ or ../)
+    // This matches:
+    // - import { foo } from "./path.js"
+    // - import foo from "../path.js"
+    // - import * as foo from "./path/index.js"
+    // - import "./path" (side-effect imports)
+    // The path may or may not have a file extension
+    const relativeImportRegex = new RegExp(`(from\\s+)(['"])(\\.\\.?\\/[^'"]+?)(?:\\.(?:${moduleExtensions}))?\\2`, 'g');
+    // Get the directory part of the original file path (relative to project root)
+    const originalDirParts = originalFilePath.split('/').slice(0, -1);
+    return fileContent.replace(relativeImportRegex, (match, fromKeyword, quote, importPath) => {
+        // Skip imports that already point to generated CodeYam files:
+        // 1. Scenario component files with SHA hashes (64 hex chars) and scenario name suffixes
+        //    e.g., "abc123def_EnvironmentLayout_Empty_Survey_No_Responses"
+        // 2. Mock data files in __codeyamMocks__ directory
+        //    e.g., "../__codeyamMocks__/MockData_Empty_Survey_No_Responses"
+        const scenarioFilePattern = /[a-f0-9]{64}_\w+_[A-Z][a-zA-Z_]+$/;
+        const mockDataPattern = /__codeyamMocks__\//;
+        if (scenarioFilePattern.test(importPath) ||
+            mockDataPattern.test(importPath)) {
+            // This import already points to a generated file, don't rewrite it
+            return match;
+        }
+        // Resolve the import path relative to the original file's directory
+        const pathParts = importPath.split('/');
+        const resolvedParts = [...originalDirParts];
+        for (const part of pathParts) {
+            if (part === '..') {
+                resolvedParts.pop();
+            }
+            else if (part !== '.') {
+                resolvedParts.push(part);
+            }
+        }
+        // Build the project-relative path to the module
+        const absoluteModulePath = resolvedParts.join('/');
+        // Calculate the new relative path from new file location
+        const newRelativePath = getRelativePath(newFilePath, absoluteModulePath);
+        // Replace the path in the original match, preserving the quote style
+        return `${fromKeyword}${quote}${newRelativePath}${quote}`;
     });
 }
+/**
+ * Strip <html> and <body> tags from root layout files for Next.js App Router.
+ *
+ * When a root layout (app/layout.tsx) is generated as a scenario component and placed
+ * under the /static/ route, it becomes nested under the real app root layout. Having
+ * two layouts with <html> and <body> tags causes hydration errors:
+ *
+ *   "In HTML, <html> cannot be a child of <body>"
+ *   "You are mounting a new html component when a previous one has not first unmounted"
+ *
+ * This function removes the <html> and <body> wrapper tags while preserving the inner
+ * content, allowing the scenario layout to work correctly when nested.
+ *
+ * Before: <html lang="en"><body className={...}><main>{children}</main></body></html>
+ * After:  <div className={...}><main>{children}</main></div>
+ */
+function stripHtmlBodyTags(fileContent, filePath, framework) {
+    // Only apply to Next.js App Router root layouts
+    if (framework !== ProjectFramework.Next) {
+        return fileContent;
+    }
+    // Check if this is a root layout file (typically app/layout.tsx or apps/*/app/layout.tsx)
+    // Root layouts are at the app directory level, not in subdirectories like (app)/ or routes/
+    const pathParts = filePath.split('/');
+    const fileName = pathParts[pathParts.length - 1];
+    // Must be a layout file
+    if (!fileName?.startsWith('layout.')) {
+        return fileContent;
+    }
+    // Check if it's at the app root level (parent directory is 'app')
+    const parentDir = pathParts[pathParts.length - 2];
+    if (parentDir !== 'app') {
+        return fileContent;
+    }
+    // Check if this file actually contains <html> and <body> tags
+    if (!/<html[^>]*>/.test(fileContent) || !/<body[^>]*>/.test(fileContent)) {
+        return fileContent;
+    }
+    console.log(`CodeYam: Stripping <html> and <body> tags from root layout: ${filePath}`);
+    // Extract the body className/attributes if any, to preserve styling
+    const bodyMatch = fileContent.match(/<body([^>]*)>/);
+    const bodyAttributes = bodyMatch?.[1]?.trim() || '';
+    // Replace the JSX structure:
+    // <html ...><body ...>CONTENT</body></html>
+    // With: <div ...>CONTENT</div>
+    //
+    // This regex handles:
+    // 1. Opening <html> tag with any attributes
+    // 2. Opening <body> tag with any attributes (captured for the wrapper div)
+    // 3. Content between body tags (captured)
+    // 4. Closing </body> and </html> tags
+    const htmlBodyRegex = /(<html[^>]*>\s*<body)([^>]*)(>)([\s\S]*?)(<\/body>\s*<\/html>)/g;
+    let result = fileContent.replace(htmlBodyRegex, (match, _htmlBody, bodyAttrs, closeBracket, content, _closing) => {
+        // Create a wrapper div with the body's attributes
+        const attrs = bodyAttrs?.trim() || '';
+        if (attrs) {
+            return `(<div${bodyAttrs}${closeBracket}${content}</div>)`;
+        }
+        else {
+            return `(<>${content}</>)`;
+        }
+    });
+    // If the regex didn't match (perhaps due to different formatting),
+    // try a more lenient approach - just remove the tags
+    if (result === fileContent) {
+        // Remove <html ...> opening tag
+        result = result.replace(/<html[^>]*>\s*/g, '');
+        // Remove </html> closing tag
+        result = result.replace(/\s*<\/html>/g, '');
+        // Replace <body ...> with <div ...> to preserve attributes
+        result = result.replace(/<body([^>]*)>/g, '<div$1>');
+        // Replace </body> with </div>
+        result = result.replace(/<\/body>/g, '</div>');
+    }
+    return result;
+}
 function addMockToContent(fileContent, importedExport, fileAnalyses, rootAnalysis, relativeMocksDir, scenarioName, importPath) {
     // First try to find dependency schemas in fileAnalyses (for same-file dependencies)
     let dependencySchemas = fileAnalyses.find((a) => !!a.metadata?.mergedDataStructure?.dependencySchemas?.[importedExport.filePath]?.[importedExport.name])?.metadata?.mergedDataStructure?.dependencySchemas;
@@ -64,7 +257,7 @@ function addMockToContent(fileContent, importedExport, fileAnalyses, rootAnalysi
         dependencySchemas =
             rootAnalysis.metadata?.mergedDataStructure?.dependencySchemas;
     }
-    const mockCode = constructMockCode(importedExport.name, dependencySchemas);
+    const mockCode = constructMockCode(importedExport.name, dependencySchemas, importedExport.entityType);
     if (!mockCode) {
         console.log('CodeYam Error: Mock code not found', JSON.stringify({
             importedExportFilePath: importedExport.filePath,
@@ -89,7 +282,9 @@ function addMockToContent(fileContent, importedExport, fileAnalyses, rootAnalysi
             fileContent = fileContent.replace(entireImportRegExp, '');
         }
         else {
-            const importRegExp = new RegExp(`(import(?:(?!${firstPart}|from|import)[\\s\\S])*?)${firstPart}(?:,\\s*)?((?:(?!import)[\\s\\S])*?from\\s+['"]${importPath}['"])`, 'm');
+            // Escape regex special characters in importPath (e.g., brackets in [environmentId])
+            const escapedImportPath = importPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const importRegExp = new RegExp(`(import(?:(?!${firstPart}|from|import)[\\s\\S])*?)${firstPart}(?:,\\s*)?((?:(?!import)[\\s\\S])*?from\\s+['"]${escapedImportPath}['"])`, 'm');
             if (importedExportNameParts.length > 1) {
                 fileContent = fileContent.replace(importRegExp, `$1${firstPart}__cyOriginal$2`);
             }
@@ -101,6 +296,26 @@ function addMockToContent(fileContent, importedExport, fileAnalyses, rootAnalysi
             fileContent = fileContent.replace(/import\s*\{\s*\}\s*from\s+['"][^'"]*['"];?\s*\n?/g, '');
         }
     }
+    else {
+        // Fallback: When importPath is undefined (e.g., path alias not in mapping),
+        // we still need to remove the import to avoid "name defined multiple times" errors.
+        // Search for the entity name in any import statement and remove it.
+        const importedExportNameParts = splitOutsideParenthesesAndArrays(importedExport.name);
+        const firstPart = importedExportNameParts[0];
+        // Match the entity name in any named import and remove just that name
+        // This handles imports like: import { useEnvironment, otherThing } from "any/path"
+        // Removes useEnvironment but keeps otherThing
+        const namedImportRegExp = new RegExp(`(import\\s*\\{[^}]*?)\\b${escapeRegExp(firstPart)}\\b(?:,\\s*|\\s*,)?((?:[^}]*\\}\\s*from\\s*['"][^'"]*['"];?))`, 'm');
+        if (importedExportNameParts.length > 1) {
+            // Rename the import instead of removing (for destructured access patterns)
+            fileContent = fileContent.replace(namedImportRegExp, `$1${firstPart}__cyOriginal$2`);
+        }
+        else {
+            fileContent = fileContent.replace(namedImportRegExp, '$1$2');
+        }
+        // Clean up empty imports that might result from removing the only import
+        fileContent = fileContent.replace(/import\s*\{\s*\}\s*from\s+['"][^'"]*['"];?\s*\n?/g, '');
+    }
     if (fileContent.indexOf('import { scenarios } from') === -1) {
         // Use scenario-specific MockData file to allow multiple scenarios to coexist
         const mockDataPath = `${relativeMocksDir}/MockData_${safeFileName(scenarioName)}`;
@@ -250,7 +465,7 @@ function captureArgumentsForTesting(args) {
         console.error('CodeYam Debug: Failed to capture arguments:', error);
     }
 }
-export default async function writeScenarioComponents({ project, file, entity, rootAnalysis, scenario, context, projectAnalyzer, framework, mocksDir, rootFile, namespaceMocks, writtenScenarioComponents = {}, fileStore, }) {
+export default async function writeScenarioComponents({ project, file, entity, rootAnalysis, scenario, context, projectAnalyzer, framework, mocksDir, rootFile, namespaceMocks, writtenScenarioComponents = {}, fileStore, exportAsNamed, }) {
     var _a;
     // Capture arguments for testing if debug mode is enabled
     captureArgumentsForTesting({
@@ -320,6 +535,22 @@ export default async function writeScenarioComponents({ project, file, entity, r
     const nodeModuleImports = allImportedExports.filter((nodeModuleImport, index, self) => nodeModuleImport.isNodeModule &&
         index === self.findIndex((nmi) => nmi.name === nodeModuleImport.name));
     let fileContent = file.content;
+    // Handle .d.ts files: convert type declarations to stub implementations
+    // .d.ts files only have type declarations (e.g., "export declare const logger")
+    // which don't provide runtime exports. We need to generate actual stub implementations.
+    if (file.path.endsWith('.d.ts')) {
+        console.log(`CodeYam: Converting .d.ts file to stub implementations: ${file.path}`);
+        fileContent = convertDtsToStubs(fileContent, entity.name);
+    }
+    // Extract "use client" or "use server" directive FIRST, before any modifications
+    // This ensures the directive isn't buried by prepended imports
+    const directiveMatch = fileContent.match(/^(\s*["']use (client|server)["'];?\s*\n?)/);
+    let extractedDirective = null;
+    if (directiveMatch) {
+        extractedDirective = directiveMatch[1].trim();
+        // Remove the directive from fileContent - we'll add it back at the very end
+        fileContent = fileContent.slice(directiveMatch[0].length);
+    }
     const fileAnalyzer = projectAnalyzer.getFileAnalyzer(file);
     const importMapping = fileAnalyzer.getRelativeImportMappings();
     let filePath = file.path;
@@ -392,9 +623,11 @@ export default async function writeScenarioComponents({ project, file, entity, r
         }
         importedExportEntity.localFilePath = importedExport.filePath;
         if (!importedExport.isMocked) {
-            const importedExportFilePath = importedExportEntity.localFilePath === file.path
-                ? (importedExport.resolvedFilePath ?? importedExport.filePath)
-                : importedExport.filePath;
+            // Use resolvedFilePath (actual entity location) for scenario component writing.
+            // This is critical for re-exports: when importing from index.tsx which re-exports
+            // from a nested file, we need to write scenario components for the actual file
+            // where the entity code lives, not the re-export file.
+            const importedExportFilePath = importedExport.resolvedFilePath ?? importedExport.filePath;
             if (importedExportFilePath !== file.path) {
                 if (!writtenScenarioComponents[importedExportFilePath]?.includes(importedExport.name)) {
                     // Skip recursion for type/data entities - they don't need scenario components
@@ -407,12 +640,32 @@ export default async function writeScenarioComponents({ project, file, entity, r
                     let fileNotMocked = fileStore
                         ? fileStore.getByPath(importedExportFilePath)
                         : project.files.find((f) => f.path === importedExportFilePath);
+                    // Fallback: if file at resolvedFilePath doesn't exist, try filePath
+                    // This handles cases where the actual entity file isn't in project.files
+                    // (e.g., type re-exports where only the index file is tracked)
+                    if (!fileNotMocked &&
+                        importedExport.resolvedFilePath &&
+                        importedExport.filePath !== importedExport.resolvedFilePath) {
+                        const fallbackPath = importedExport.filePath;
+                        fileNotMocked = fileStore
+                            ? fileStore.getByPath(fallbackPath)
+                            : project.files.find((f) => f.path === fallbackPath);
+                    }
+                    // Skip if file still not found - can't write scenario component without the file
+                    if (!fileNotMocked) {
+                        continue;
+                    }
                     // Ensure content is loaded for the file
                     if (fileNotMocked &&
                         fileStore &&
-                        !fileStore.isContentLoaded(importedExportFilePath)) {
-                        fileNotMocked = await fileStore.ensureContent(importedExportFilePath);
+                        !fileStore.isContentLoaded(fileNotMocked.path)) {
+                        fileNotMocked = await fileStore.ensureContent(fileNotMocked.path);
                     }
+                    // When a default export is imported as named (via index re-export), we need
+                    // to add a named re-export to the scenario component so the import works.
+                    // e.g., if file has `export default X` but parent does `import { X } from '...'`
+                    const needsNamedReExport = importedExport.resolvedIsDefault === true &&
+                        importedExport.isDefault === false;
                     const { scenarioComponentPaths: newScenarioComponentPaths, writtenScenarioComponents: updatedWrittenScenarioComponents, } = await writeScenarioComponents({
                         project,
                         file: fileNotMocked,
@@ -427,6 +680,8 @@ export default async function writeScenarioComponents({ project, file, entity, r
                         namespaceMocks,
                         writtenScenarioComponents,
                         fileStore,
+                        // Pass the import name so we can add `export { default as Name };`
+                        exportAsNamed: needsNamedReExport ? importedExport.name : undefined,
                     });
                     writtenScenarioComponents = updatedWrittenScenarioComponents;
                     scenarioComponentPaths.push(...newScenarioComponentPaths);
@@ -436,29 +691,76 @@ export default async function writeScenarioComponents({ project, file, entity, r
         else if (importedExport.filePath === file.path &&
             importedExport.name !== entity.name) {
             // For same-file dependencies:
-            // - Strip if isMocked is true (e.g., Remix/Next loaders, server-side code)
-            // - Strip if we have a mock structure we can generate
-            // - Only add mock code if we have a mock structure
-            const shouldStrip = importedExport.isMocked ||
-                hasMockStructure(importedExport, fileAnalyses);
-            if (shouldStrip) {
+            // - Strip and replace if we have a mock structure we can generate
+            // - Strip and stub if isMocked is true AND it's a callable entity (visual, library, functionCall)
+            // - Preserve as-is for data entities (like Zod schemas) that need their methods
+            const hasMock = hasMockStructure(importedExport, fileAnalyses);
+            const entityType = importedExport.entityType;
+            // Data and type entities should be preserved - they're not callable and may have methods
+            // that stubbing would break (e.g., Zod schemas with .superRefine())
+            const isDataEntity = entityType === 'data' || entityType === 'type';
+            // Heuristic: Zod schemas are often misclassified as 'library' but should be preserved
+            // Detect by: name starts with Z + uppercase letter, AND has Zod method calls
+            const looksLikeZodSchema = entityType === 'library' &&
+                /^Z[A-Z]/.test(importedExport.name) &&
+                importedExport.calls?.some((call) => /\.(superRefine|refine|transform|default|optional|nullable|array|object|string|number|boolean|parse|safeParse)\s*\(/.test(call));
+            if (looksLikeZodSchema) {
+                console.log(`CodeYam: Detected Zod schema "${importedExport.name}" (misclassified as library) - will preserve`);
+            }
+            // Callable entities can be safely stubbed (but not Zod schemas)
+            const isCallable = !isDataEntity && !looksLikeZodSchema && entityType !== undefined;
+            // Determine what action to take
+            const shouldStripAndReplace = hasMock;
+            const shouldStripAndStub = !hasMock && importedExport.isMocked && isCallable;
+            const shouldPreserve = !hasMock && importedExport.isMocked && !isCallable;
+            // Log warning if entityType is undefined for a mocked same-file dependency
+            // This could indicate an analysis issue where entityType wasn't properly set
+            if (importedExport.isMocked && entityType === undefined) {
+                console.warn(`CodeYam: WARNING - Same-file dependency "${importedExport.name}" is isMocked but has no entityType. ` +
+                    `Treating as non-callable (will preserve). File: ${file.path}`);
+            }
+            if (shouldPreserve) {
+                // For data entities (like Zod schemas), don't strip or stub - preserve the original
+                // This ensures schema methods like .superRefine() continue to work
+                console.log(`CodeYam: Preserving ${importedExport.name} (entityType: ${entityType}) - not stripping data entities`);
+                // Don't modify fileContent - keep the original code
+            }
+            else if (shouldStripAndReplace || shouldStripAndStub) {
+                // Strip the original code
                 const entityCode = fileAnalyzer.getEntityCode(importedExport.name);
                 if (entityCode) {
                     fileContent = fileContent.replace(entityCode, '');
                 }
-                // Only add mock if we have a mock structure to generate
-                if (hasMockStructure(importedExport, fileAnalyses)) {
+                if (shouldStripAndReplace) {
+                    // Add mock from mock structure
                     fileContent = addMockToContent(fileContent, importedExport, fileAnalyses, rootAnalysis, relativeMocksDir, scenario.name);
                 }
+                else if (shouldStripAndStub) {
+                    // Generate a simple stub mock that returns scenario data.
+                    // This prevents ReferenceError at runtime when the stripped
+                    // function is called (e.g., local helper functions like getInitialProps).
+                    const functionName = importedExport.name;
+                    console.log(`CodeYam: Generating stub mock for ${functionName} (entityType: ${entityType}) in ${file.path}`);
+                    // Add scenarios import if not present
+                    if (fileContent.indexOf('import { scenarios } from') === -1) {
+                        const mockDataPath = `${relativeMocksDir}/MockData_${safeFileName(scenario.name)}`;
+                        const importStatement = `import { scenarios } from "${mockDataPath}";`;
+                        fileContent = `${fileContent}\n\n\n${importStatement}`;
+                    }
+                    // Generate a simple stub that returns the scenario data for this function
+                    const stubMock = `\n\n// Stub mock for local function without mock structure\nfunction ${functionName}(...args) {\n  return scenarios().data()?.["${functionName}()"];\n}`;
+                    fileContent += stubMock;
+                }
             }
         }
         // Try to find the import mapping using different key formats
         // The import mapping may use either absolute or relative paths as keys
-        // IMPORTANT: Use filePath (where it's imported FROM), not resolvedFilePath (where entity lives)
-        // For re-exports like ~codeyam/types, filePath="packages/types/index.ts",
-        // resolvedFilePath="packages/types/src/types/Commit.ts"
-        // We need to generate files at the import location (index.ts), not the entity location
+        // Use filePath (import source) for looking up the import mapping
+        // because that's how imports are written in source code
         const mockFilePathRelative = importedExport.filePath;
+        // For scenario component paths, prefer resolvedFilePath (where entity actually lives)
+        // because that's where scenario component files are written
+        const scenarioFilePathRelative = importedExport.resolvedFilePath ?? importedExport.filePath;
         // Try looking up with different key formats (absolute, relative, resolved absolute)
         // Filter out undefined keys to avoid misleading undefined lookups
         const lookupKeys = [
@@ -501,10 +803,22 @@ export default async function writeScenarioComponents({ project, file, entity, r
         else {
             // For non-mocked imports, rewrite the import path to point to the generated scenario file
             // Use fileStore for O(1) lookup when available
-            const fileNotMocked = fileStore
-                ? fileStore.getByPath(mockFilePathRelative)
-                : project.files.find((f) => f.path === mockFilePathRelative);
-            const fileName = mockFilePathRelative.split('/').pop();
+            // First try resolvedFilePath (where entity lives), fallback to filePath (import source)
+            let fileNotMocked = fileStore
+                ? fileStore.getByPath(scenarioFilePathRelative)
+                : project.files.find((f) => f.path === scenarioFilePathRelative);
+            // Track which path we're actually using for the scenario component
+            let actualScenarioFilePathRelative = scenarioFilePathRelative;
+            if (!fileNotMocked &&
+                importedExport.resolvedFilePath &&
+                importedExport.filePath !== importedExport.resolvedFilePath) {
+                // Fallback to filePath if file at resolvedFilePath doesn't exist
+                actualScenarioFilePathRelative = importedExport.filePath;
+                fileNotMocked = fileStore
+                    ? fileStore.getByPath(actualScenarioFilePathRelative)
+                    : project.files.find((f) => f.path === actualScenarioFilePathRelative);
+            }
+            const fileName = actualScenarioFilePathRelative.split('/').pop();
             const fileNotMockedIsIndex = isIndexPath(fileNotMocked?.path);
             const mockFilePath = isFrameworkRoute(fileNotMocked, importedExportEntity, framework, fileNotMocked === rootFile)
                 ? getFrameworkRoutePath({
@@ -512,7 +826,7 @@ export default async function writeScenarioComponents({ project, file, entity, r
                     rootFile,
                     entity: importedExportEntity,
                     rootAnalysis,
-                    scenarioComponentPath: mockFilePathRelative,
+                    scenarioComponentPath: actualScenarioFilePathRelative,
                     project,
                     framework,
                     scenario,
@@ -520,13 +834,46 @@ export default async function writeScenarioComponents({ project, file, entity, r
                     .split('.')
                     .slice(0, -1)
                     .join('.')
-                : mockFilePathRelative.replace(`${fileName}`, `${importedExportEntity.sha}_${fileNotMockedIsIndex ? 'index_' : ''}${safeFileName(importedExportEntity.name)}_${safeFileName(scenario.name)}`);
+                : actualScenarioFilePathRelative.replace(`${fileName}`, `${importedExportEntity.sha}_${fileNotMockedIsIndex ? 'index_' : ''}${safeFileName(importedExportEntity.name)}_${safeFileName(scenario.name)}`);
             const path = safeFolder(getRelativePath(filePath, mockFilePath));
             // If we have an import mapping, use it to find the import string to replace
             // Otherwise, skip rewriting (we can't find the import statement without knowing what to search for)
             if (mockImportMapping) {
-                const importRegExp = new RegExp(`${mockImportMapping.replace(/([$()])/g, '\\$1')}(['"])`, 'g');
-                fileContent = fileContent.replace(importRegExp, `${path}$1`);
+                const importRegExp = new RegExp(`${escapeRegExp(mockImportMapping)}(['"])`, 'g');
+                // Check if the original import path still exists in the file
+                // If it was already rewritten by another entity from the same module,
+                // we need to add a separate import statement for this entity
+                if (fileContent.match(importRegExp)) {
+                    fileContent = fileContent.replace(importRegExp, `${path}$1`);
+                }
+                else {
+                    // The import path was already rewritten - add a new import for this entity
+                    // This handles cases where multiple entities are imported from the same index file
+                    // (e.g., import { A, B, C } from '@pkg') and each has its own scenario file
+                    const entityImportName = importedExport.name;
+                    const newImport = `import { ${entityImportName} } from '${path}';`;
+                    // First, try to remove this entity from the already-rewritten grouped import
+                    // This prevents duplicate/conflicting imports
+                    // Match patterns like "EntityName," or ", EntityName" or "EntityName" (if only one)
+                    // Note: entityImportName needs escaping since JS identifiers can contain $ (a regex metacharacter)
+                    const escapedEntityName = escapeRegExp(entityImportName);
+                    const removeFromGroupedImportPatterns = [
+                        new RegExp(`\\b${escapedEntityName}\\s*,\\s*`, 'g'), // "EntityName, "
+                        new RegExp(`\\s*,\\s*${escapedEntityName}\\b`, 'g'), // ", EntityName"
+                    ];
+                    for (const pattern of removeFromGroupedImportPatterns) {
+                        fileContent = fileContent.replace(pattern, '');
+                    }
+                    // Add the new import at the beginning of fileContent
+                    // Note: The header comment (// Scenario:) doesn't exist yet - it's prepended at writeFile time
+                    // So prepending here puts the import right after the header in the final output
+                    //
+                    // IMPORTANT: We cannot use indexOf('// Scenario:') + '\n\n' here because:
+                    // 1. The header doesn't exist during processing
+                    // 2. indexOf would return -1, and indexOf('\n\n', -1) starts from 0
+                    // 3. This could find a \n\n inside a function body, inserting the import there!
+                    fileContent = newImport + '\n' + fileContent;
+                }
             }
         }
     }
@@ -535,6 +882,24 @@ export default async function writeScenarioComponents({ project, file, entity, r
             continue;
         fileContent = addMockToContent(fileContent, nodeModuleImport, fileAnalyses, rootAnalysis, relativeMocksDir, scenario.name, importMapping[nodeModuleImport.filePath] ?? nodeModuleImport.filePath);
     }
+    // Rewrite node_module imports that have universal mocks
+    // Universal mocks create mock files at __codeyamMocks__/{safeFileName}.tsx
+    // We need to rewrite imports like `import { logger } from "@formbricks/logger"`
+    // to `import { logger } from "../__codeyamMocks__/_formbricks_logger.js"`
+    const universalMocks = project.metadata?.universalMocks ?? [];
+    const nodeModuleUniversalMocks = universalMocks.filter((mock) => mock.nodeModule && mock.content);
+    for (const universalMock of nodeModuleUniversalMocks) {
+        const originalPath = universalMock.filePath;
+        // Create the mock file name using the same safeFileName function as writeUniversalMocks
+        const safeMockFileName = safeFileName(originalPath);
+        const mockFileRelativePath = `${relativeMocksDir}/${safeMockFileName}`;
+        // Match both single and double quotes, and handle both named and default imports
+        // Pattern 1: import { x, y } from "module"
+        // Pattern 2: import x from "module"
+        // Pattern 3: import * as x from "module"
+        const importRegex = new RegExp(`(import\\s+(?:\\{[^}]*\\}|\\*\\s+as\\s+\\w+|\\w+)\\s+from\\s+)['"]${originalPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}['"]`, 'g');
+        fileContent = fileContent.replace(importRegex, `$1'${mockFileRelativePath}'`);
+    }
     if (rootAnalysis.entitySha === entity.sha &&
         entity.metadata?.notExported &&
         entity.name !== 'default') {
@@ -544,6 +909,16 @@ export default async function writeScenarioComponents({ project, file, entity, r
             fileContent = `${fileContent}\n\n${exportStatement}`;
         }
     }
+    // When a default export is imported as named via re-export (e.g., index.tsx re-exports
+    // a default export as named), we need to add a named export so the parent's
+    // import statement works: `import { Name } from "./path.js"`
+    // The local variable name is the same as exportAsNamed (e.g., ScenarioEditor)
+    if (exportAsNamed) {
+        const namedExport = `export { ${exportAsNamed} };`;
+        if (!fileContent.includes(namedExport)) {
+            fileContent = `${fileContent}\n\n${namedExport}`;
+        }
+    }
     const basePath = safeFolder(file.path.split('/').slice(0, -1).join('/'));
     const extension = file.name.split('.').pop();
     // Include scenario name in path to allow multiple scenarios to coexist
@@ -560,9 +935,16 @@ export default async function writeScenarioComponents({ project, file, entity, r
             scenario,
         });
     }
+    // Strip <html> and <body> tags from root layout files for Next.js
+    // These tags cause hydration errors when the scenario layout is nested under the real root
+    fileContent = stripHtmlBodyTags(fileContent, file.path, framework);
     // Rewrite asset imports (CSS, images, fonts, etc.) to correct relative paths
     // The original file path is relative to PROJECT_RELATIVE_PATH, the new path is scenarioComponentPath
     fileContent = rewriteAssetImports(fileContent, `${PROJECT_RELATIVE_PATH}/${file.path}`, scenarioComponentPath);
+    // Rewrite relative TypeScript/JavaScript module imports to correct relative paths
+    // This handles cases where the file is moved (e.g., from [environmentId]/ to _environmentId_/)
+    // and relative imports like "./lib/organization" need to be rewritten
+    fileContent = rewriteRelativeModuleImports(fileContent, `${PROJECT_RELATIVE_PATH}/${file.path}`, scenarioComponentPath);
     console.log('Writing scenario component', file.path, entity.name, scenarioComponentPath, fileContent.length);
     const scenarioComponentComment = `// This file is auto-generated by CodeYam. Do not edit this file manually.
 // This file contains content for a scenario component:
@@ -574,7 +956,17 @@ export default async function writeScenarioComponents({ project, file, entity, r
 // Entity: ${rootAnalysis.entitySha} ${rootAnalysis.entityName}
 // Scenario: ${scenario.id} - ${scenario.name}
 `;
-    await writeFile(scenarioComponentPath, `${scenarioComponentComment}\n\n${fileContent}`);
+    // Use the directive that was extracted at the beginning of processing
+    // This ensures it stays at the very top even after imports are prepended
+    let finalContent;
+    if (extractedDirective) {
+        finalContent = `${extractedDirective}\n\n${scenarioComponentComment}\n\n${fileContent}`;
+        console.log(`CodeYam: Placed "${extractedDirective}" directive at top of file: ${scenarioComponentPath}`);
+    }
+    else {
+        finalContent = `${scenarioComponentComment}\n\n${fileContent}`;
+    }
+    await writeFile(scenarioComponentPath, finalContent);
     scenarioComponentPaths.push(scenarioComponentPath);
     console.log('CodeYam [writeScenarioComponents]: Generated scenario files', {
         entityName: entity.name,