veryfront 0.0.84 → 0.0.88

package/src/src/cli/ui/dot-matrix.ts

@@ -76,6 +76,14 @@ const COMPACT_OPTIONS: Partial<DotMatrixOptions> = {
 
 const RESET = "\x1b[0m";
 
+// Colors for spinning animation - shades of orange
+const SPIN_COLORS = {
+  bright: "\x1b[38;2;255;165;120m", // Bright orange (leading edge, toned down)
+  orange: "\x1b[38;2;252;143;93m", // Brand orange
+  mid: "\x1b[38;2;200;110;70m", // Mid orange (trailing)
+  dim: "\x1b[38;2;140;80;50m", // Dim orange/brown
+};
+
 function resolveOptions(options: DotMatrixOptions): Required<DotMatrixOptions> {
   if (options.compact) return { ...DEFAULT_OPTIONS, ...COMPACT_OPTIONS, ...options };
   return { ...DEFAULT_OPTIONS, ...options };
@@ -92,12 +100,65 @@ function renderPattern(pattern: number[][], opts: Required<DotMatrixOptions>): s
   });
 }
 
+/**
+ * Render the pattern with a spinning blade effect
+ * The blade sweeps across the lit dots, creating orange → purple gradient
+ */
+function renderSpinningPattern(
+  pattern: number[][],
+  frame: number,
+  opts: Required<DotMatrixOptions>,
+): string[] {
+  const centerRow = 3;
+  const centerCol = 3;
+  const totalFrames = 16; // Full rotation in 16 frames
+  const bladeAngle = ((frame % totalFrames) / totalFrames) * Math.PI * 2;
+
+  return pattern.map((row, rowIdx) => {
+    const dots = row.map((dot, colIdx) => {
+      if (dot !== 1) {
+        return `${opts.offColor}${opts.offChar}${RESET}`;
+      }
+
+      // Calculate angle from center to this dot
+      const dy = rowIdx - centerRow;
+      const dx = colIdx - centerCol;
+      let dotAngle = Math.atan2(dy, dx);
+      if (dotAngle < 0) dotAngle += Math.PI * 2;
+
+      // Calculate angular distance from the blade
+      let angleDiff = dotAngle - bladeAngle;
+      if (angleDiff < 0) angleDiff += Math.PI * 2;
+      if (angleDiff > Math.PI) angleDiff = Math.PI * 2 - angleDiff;
+
+      // Color based on angular distance from blade
+      const normalizedDiff = angleDiff / Math.PI; // 0 = at blade, 1 = opposite
+      let color: string;
+      if (normalizedDiff < 0.15) {
+        color = SPIN_COLORS.bright; // Leading edge - brightest orange
+      } else if (normalizedDiff < 0.35) {
+        color = SPIN_COLORS.orange; // Near blade - brand orange
+      } else if (normalizedDiff < 0.6) {
+        color = SPIN_COLORS.mid; // Trailing - mid orange
+      } else {
+        color = SPIN_COLORS.dim; // Far from blade - dim orange
+      }
+
+      return `${color}${opts.litChar}${RESET}`;
+    });
+    return opts.prefix + dots.join(opts.spacing);
+  });
+}
+
 function renderPatternWithText(
   pattern: number[][],
   textLines: string[],
   opts: Required<DotMatrixOptions>,
+  spinFrame?: number,
 ): string {
-  const faceLines = renderPattern(pattern, opts);
+  const faceLines = spinFrame !== undefined
+    ? renderSpinningPattern(pattern, spinFrame, opts)
+    : renderPattern(pattern, opts);
 
   const faceHeight = faceLines.length;
   const startLine = Math.floor((faceHeight - textLines.length) / 2);
@@ -164,6 +225,21 @@ export function getAgentFaceWithText(
   return renderPatternWithText(AGENT_FACE, textLines, resolveOptions(options));
 }
 
+/**
+ * Get the agent face with spinning blade animation
+ * Orange and purple dots rotate around the logo
+ * @param textLines Text to show next to the face
+ * @param frame Animation frame (0-15 for full rotation)
+ * @param options Dot matrix options
+ */
+export function getSpinningAgentFace(
+  textLines: string[],
+  frame: number,
+  options: DotMatrixOptions = {},
+): string {
+  return renderPatternWithText(AGENT_FACE, textLines, resolveOptions(options), frame);
+}
+
 /**
  * Animated dot matrix display with spinner support
  */

package/src/src/config/loader.ts

@@ -8,7 +8,8 @@ import { isBun } from "../platform/compat/runtime.js";
 import { serverLogger } from "../utils/logger/logger.js";
 import { getReactImportMap, REACT_DEFAULT_VERSION } from "../utils/constants/cdn.js";
 import { DEFAULT_CACHE_DIR } from "../utils/constants/server.js";
-import { setReactVersion } from "../transforms/esm/package-registry.js";
+// React version is now passed per-request via TransformOptions.reactVersion
+// No longer using global singleton: import { setReactVersion } from "#veryfront/transforms/esm/package-registry.ts";
 import { buildConfigCacheKey } from "../cache/keys.js";
 import { DEFAULT_PORT } from "./defaults.js";
 import { createFileSystem } from "../platform/compat/fs.js";
@@ -198,10 +199,10 @@ function validateAndCacheConfig(userConfig: unknown, cacheKey: string): Veryfron
 
   const merged = mergeConfigs(userConfig as Partial<VeryfrontConfig>);
 
-  // Apply React version from config (sets global default for transforms)
+  // React version is now passed per-request via TransformOptions.reactVersion
+  // Config stores it at merged.react.version, accessed wherever needed
   if (merged.react?.version) {
-    setReactVersion(merged.react.version);
-    serverLogger.debug("[CONFIG] React version set from config", { version: merged.react.version });
+    serverLogger.debug("[CONFIG] React version from config", { version: merged.react.version });
   }
 
   configCacheByProject.set(cacheKey, { revision: cacheRevision, config: merged });

package/src/src/html/utils.ts

@@ -97,8 +97,8 @@ interface CdnUrlTemplates {
 const CDN_URL_TEMPLATES: Record<CdnProvider, CdnUrlTemplates> = {
   "esm.sh": {
     react: (v) => `https://esm.sh/react@${v}?target=es2022`,
-    reactDom: (v) => `https://esm.sh/react-dom@${v}?target=es2022`,
-    reactDomClient: (v) => `https://esm.sh/react-dom@${v}/client?target=es2022`,
+    reactDom: (v) => `https://esm.sh/react-dom@${v}?external=react&target=es2022`,
+    reactDomClient: (v) => `https://esm.sh/react-dom@${v}/client?external=react&target=es2022`,
     jsxRuntime: (v) => `https://esm.sh/react@${v}/jsx-runtime?target=es2022`,
     jsxDevRuntime: (v) => `https://esm.sh/react@${v}/jsx-dev-runtime?target=es2022`,
     veryfrontAgentReact: (v) =>

package/src/src/modules/component-registry/registry.ts

@@ -1,7 +1,7 @@
 import { serverLogger as logger } from "../../utils/index.js";
 import { basename, join } from "../../platform/compat/path/index.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
 
 export interface ComponentExports {

package/src/src/modules/import-map/default-import-map.ts

@@ -1,10 +1,6 @@
 import * as dntShim from "../../../_dnt.shims.js";
 import type { ImportMapConfig } from "./types.js";
-import { isDeno } from "../../platform/compat/runtime.js";
-import {
-  getDenoNpmReactMap,
-  getReactImportMap,
-} from "../../transforms/esm/package-registry.js";
+import { getReactImportMap } from "../../transforms/esm/package-registry.js";
 
 function ensureTrailingSlash(path: string): string {
   return path.endsWith("/") ? path : `${path}/`;
@@ -45,33 +41,15 @@ function getVeryfrontSsrImportMap(): Record<string, string> {
   };
 }
 
-/**
- * Get React import map for SSR in Deno.
- * Uses npm: specifiers which Deno handles natively with automatic deduplication.
- * See: https://deno.com/blog/not-using-npm-specifiers-doing-it-wrong
- *
- * This replaces the previous shared-*.ts approach which required manual re-exports.
- */
-export function getDenoReactImportMap(): Record<string, string> {
-  return getDenoNpmReactMap();
-}
-
 /**
  * Get the default import map for SSR transforms.
- *
- * For Deno SSR: Uses npm: specifiers with automatic deduplication.
- * For other runtimes: Uses esm.sh URLs with external=react.
+ * Uses esm.sh URLs consistently (NO npm: specifiers per plan requirements).
  */
 export function getDefaultImportMap(): ImportMapConfig {
-  const reactMap = isDeno ? getDenoReactImportMap() : getReactImportMap();
+  const reactMap = getReactImportMap();
   const veryfrontMap = getVeryfrontSsrImportMap();
 
-  // For Deno SSR, add scopes so that esm.sh modules with external=react
-  // resolve their bare `react` imports to npm: specifiers.
-  const scopes = isDeno ? { "https://esm.sh/": getDenoReactImportMap() } : undefined;
-
   return {
     imports: { ...veryfrontMap, ...reactMap },
-    scopes,
   };
 }

package/src/src/modules/import-map/loader.ts

@@ -3,15 +3,16 @@ import { dirname, join } from "../../platform/compat/path/index.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import { getConfig } from "../../config/index.js";
 import type { ImportMapConfig } from "./types.js";
-import { getDefaultImportMap, getDenoReactImportMap } from "./default-import-map.js";
+import { getDefaultImportMap } from "./default-import-map.js";
 import { mergeImportMaps } from "./merger.js";
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
-import { isDeno } from "../../platform/compat/runtime.js";
+import { getReactImportMap } from "../../transforms/esm/package-registry.js";
 
 function normalizeImportMapForRuntime(importMap: ImportMapConfig): ImportMapConfig {
   const normalizeValue = (value: string): string => {
     if (!value.startsWith("npm:")) return value;
 
+    // Convert npm: specifiers to esm.sh URLs (should not happen with new code)
     const spec = value.slice(4);
     const [base, query] = spec.split("?");
     const url = `https://esm.sh/${base}`;
@@ -23,7 +24,7 @@ function normalizeImportMapForRuntime(importMap: ImportMapConfig): ImportMapConf
     ? Object.fromEntries(Object.entries(importMap.imports).map(([k, v]) => [k, normalizeValue(v)]))
     : undefined;
 
-  let scopes = importMap.scopes
+  const scopes = importMap.scopes
     ? Object.fromEntries(
       Object.entries(importMap.scopes).map(([scope, mappings]) => [
         scope,
@@ -34,31 +35,14 @@ function normalizeImportMapForRuntime(importMap: ImportMapConfig): ImportMapConf
     )
     : undefined;
 
-  // CRITICAL: For Deno SSR, always use shared-*.ts files for React.
-  // Project configs may have esm.sh URLs which would create multiple React instances.
   // Override React mappings AFTER all other processing to ensure single instance.
-  // Also remove any "react/" prefix match since we have explicit mappings.
-  if (isDeno && imports) {
-    const reactMap = getDenoReactImportMap();
-    // Remove any esm.sh "react/" prefix mapping that would break subpath resolution
+  // Remove any "react/" prefix match since we have explicit mappings.
+  if (imports) {
+    const reactMap = getReactImportMap();
     delete imports["react/"];
     imports = { ...imports, ...reactMap };
   }
 
-  // For Deno SSR, ensure esm.sh scope has React mappings to shared-*.ts files.
-  // This is critical because esm.sh modules with external=react have bare `react`
-  // imports that need to resolve to our shared React instance.
-  if (isDeno) {
-    const reactMap = getDenoReactImportMap();
-    const esmShScope = scopes?.["https://esm.sh/"] ?? {};
-    // Remove any "react/" prefix match from scope as well
-    delete esmShScope["react/"];
-    scopes = {
-      ...scopes,
-      "https://esm.sh/": { ...esmShScope, ...reactMap },
-    };
-  }
-
   return { imports, scopes };
 }
 

package/src/src/modules/import-map/resolver.ts

@@ -60,21 +60,26 @@ export function resolveImport(
   if (isEsmShUrl(specifier)) {
     const esmShPackage = extractEsmShPackage(specifier);
     if (esmShPackage) {
+      const subpath = extractEsmShSubpath(specifier);
+
+      // Always check for explicit subpath mapping first (e.g., "react/jsx-runtime")
+      // This takes priority over appending subpath to base package mapping
+      if (subpath) {
+        const fullKey = esmShPackage + subpath; // e.g., "react/jsx-runtime"
+        const subpathMapping = scopedImports?.[fullKey] ?? importMap.imports?.[fullKey];
+        if (subpathMapping) return subpathMapping;
+      }
+
       const mapping = scopedImports?.[esmShPackage] ?? importMap.imports?.[esmShPackage];
       if (mapping) {
-        const subpath = extractEsmShSubpath(specifier);
         if (!subpath) return mapping;
 
-        // If mapping target is a file path (not HTTP URL or npm: specifier), look for explicit subpath mapping
-        // e.g., "react" → local file but "react/jsx-runtime" → different local file
-        // npm: specifiers are URL-like and should have subpaths appended
+        // If mapping target is a file path (not HTTP URL or npm: specifier),
+        // fall back to base mapping since explicit subpath wasn't found above
         const isFilePath = !mapping.startsWith("http://") && !mapping.startsWith("https://") &&
           !mapping.startsWith("npm:");
         if (isFilePath) {
-          const fullKey = esmShPackage + subpath; // e.g., "react/jsx-runtime"
-          const subpathMapping = scopedImports?.[fullKey] ?? importMap.imports?.[fullKey];
-          // Use explicit subpath mapping if available, otherwise fall back to base mapping
-          return subpathMapping ?? mapping;
+          return mapping;
         }
 
         return mapping + subpath;

package/src/src/modules/react-loader/component-loader.ts

@@ -1,5 +1,5 @@
 import { join } from "../../platform/compat/path/index.js";
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import { transformToESM } from "../../transforms/esm/index.js";
 import type { TransformOptions } from "../../transforms/esm/types.js";
@@ -34,6 +34,7 @@ export function loadComponentFromSource(
           adapter,
           dev,
           contentSourceId: options?.contentSourceId,
+          reactVersion: options?.reactVersion,
         });
         return loader.loadModule(filePath, source);
       }
@@ -44,6 +45,7 @@ export function loadComponentFromSource(
         moduleServerUrl: options?.moduleServerUrl ?? "/_vf_modules",
         vendorBundleHash: options?.vendorBundleHash,
         ssr: false,
+        reactVersion: options?.reactVersion,
       };
 
       const transformedCode = await transformToESM(

package/src/src/modules/react-loader/extract-component.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import { createError, toError } from "../../errors/veryfront-error.js";
 
 export function extractComponent(

package/src/src/modules/react-loader/ssr-module-loader/loader.ts

@@ -8,13 +8,12 @@
 import * as dntShim from "../../../../_dnt.shims.js";
 
 
-import { isAbsolute, join } from "../../../platform/compat/path/index.js";
-import { cwd } from "../../../platform/compat/process.js";
-import type * as React from "react";
+import { join } from "../../../platform/compat/path/index.js";
+import type * as React from "../../../../deps/esm.sh/react@19.1.1.js";
 import { transformToESM } from "../../../transforms/esm/index.js";
 import type { TransformOptions } from "../../../transforms/esm/types.js";
 import { TRANSFORM_CACHE_VERSION } from "../../../transforms/esm/package-registry.js";
-import { buildSSRModuleCacheKey, buildSSRModuleProjectKey } from "../../../cache/keys.js";
+import { buildSSRModuleCacheKey } from "../../../cache/keys.js";
 import {
   type CrossProjectImport,
   type MissingImport,
@@ -23,6 +22,7 @@ import {
 import { createFileSystem } from "../../../platform/compat/fs.js";
 import { createError, toError } from "../../../errors/veryfront-error.js";
 import { rendererLogger as logger } from "../../../utils/index.js";
+import { hashCodeHex } from "../../../utils/hash-utils.js";
 import { getApiBaseUrlEnv } from "../../../config/env.js";
 import { injectContext, withSpan } from "../../../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../../../observability/tracing/span-names.js";
@@ -49,7 +49,8 @@ import {
   transformSemaphore,
 } from "./cache/index.js";
 import type { ModuleCacheEntry, SSRModuleLoaderOptions } from "./types.js";
-import { getCacheBaseDir, getHttpBundleCacheDir } from "../../../utils/cache-dir.js";
+import { getHttpBundleCacheDir, getMdxEsmCacheDir } from "../../../utils/cache-dir.js";
+import { lookupMdxEsmCache } from "../../../transforms/mdx/esm-module-loader/cache/index.js";
 import { ensureHttpBundlesExist } from "../../../transforms/esm/http-cache.js";
 import { LRUCache } from "../../../utils/lru-wrapper.js";
 
@@ -143,24 +144,37 @@ export class SSRModuleLoader {
             const bundleMatch = errorMsg.match(/veryfront-http-bundle\/http-([a-f0-9]+)\.mjs/);
             if (bundleMatch) {
               const hash = bundleMatch[1]!;
-              logger.warn(
-                "[SSR-MODULE-LOADER] Import failed due to missing HTTP bundle, attempting recovery",
-                {
-                  file: filePath.slice(-40),
-                  hash,
-                },
-              );
+              const cacheDir = getHttpBundleCacheDir();
+
+              logger.error("[SSR-MODULE-LOADER] Missing HTTP bundle after ensureHttpBundlesExist", {
+                file: filePath.slice(-40),
+                hash,
+                tempPath: cacheEntry.tempPath,
+                contentHash: cacheEntry.contentHash,
+                cacheDir,
+                expectedPath: `${cacheDir}/http-${hash}.mjs`,
+              });
+
               const { recoverHttpBundleByHash } = await import(
                 "../../../transforms/esm/http-cache.js"
               );
-              const cacheDir = getHttpBundleCacheDir();
               const recovered = await recoverHttpBundleByHash(hash, cacheDir);
               if (recovered) {
-                logger.info("[SSR-MODULE-LOADER] HTTP bundle recovered, retrying import", { hash });
+                logger.info("[SSR-MODULE-LOADER] HTTP bundle recovered, retrying import", {
+                  hash,
+                  file: filePath.slice(-40),
+                });
                 mod = await import(
                   `file://${cacheEntry.tempPath}?v=${cacheEntry.contentHash}&retry=1`
                 ) as Record<string, unknown>;
               } else {
+                logger.error("[SSR-MODULE-LOADER] HTTP bundle recovery failed", {
+                  hash,
+                  file: filePath.slice(-40),
+                  cacheDir,
+                  hint:
+                    "Bundle may have expired from Redis (24h TTL) while transform was still cached",
+                });
                 throw importError;
               }
             } else {
@@ -250,10 +264,12 @@ export class SSRModuleLoader {
         `Missing contentSourceId for SSR module cache (project: ${this.options.projectId}, file: ${filePath})`,
       );
     }
+    // Include reactVersion in cache key to ensure different versions don't share cached modules
+    const reactVersion = this.options.reactVersion ?? "default";
     return buildSSRModuleCacheKey(
       TRANSFORM_CACHE_VERSION,
       this.options.projectId,
-      `${this.options.contentSourceId}:${filePath}`,
+      `${this.options.contentSourceId}:${reactVersion}:${filePath}`,
     );
   }
 
@@ -348,6 +364,7 @@ export class SSRModuleLoader {
           dev: this.options.dev,
           ssr: true,
           apiBaseUrl: this.options.apiBaseUrl,
+          reactVersion: this.options.reactVersion,
         };
 
         const filePathWithExt = syntheticFilePath.endsWith(ext)
@@ -444,13 +461,13 @@ export class SSRModuleLoader {
             const cacheDir = getHttpBundleCacheDir();
             const failed = await ensureHttpBundlesExist(bundlePaths, cacheDir);
             if (failed.length > 0) {
-              logger.warn(
-                "[SSR-MODULE-LOADER] In-memory cached module has unrecoverable HTTP bundles, re-transforming",
-                {
-                  file: filePath.slice(-40),
-                  failed,
-                },
-              );
+              logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles, re-transforming", {
+                file: filePath.slice(-40),
+                failed,
+                totalBundles: bundlePaths.length,
+                cacheDir,
+                source: "memory-cache",
+              });
               globalModuleCache.delete(contentCacheKey);
               globalModuleCache.delete(filePathCacheKey);
               // Fall through to Redis or fresh transform
@@ -487,13 +504,13 @@ export class SSRModuleLoader {
           const cacheDir = getHttpBundleCacheDir();
           const failed = await ensureHttpBundlesExist(bundlePaths, cacheDir);
           if (failed.length > 0) {
-            logger.warn(
-              "[SSR-MODULE-LOADER] Redis cached code has unrecoverable HTTP bundles, re-transforming",
-              {
-                file: filePath.slice(-40),
-                failed,
-              },
-            );
+            logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles, re-transforming", {
+              file: filePath.slice(-40),
+              failed,
+              totalBundles: bundlePaths.length,
+              cacheDir,
+              source: "redis-cache",
+            });
             httpBundlesOk = false;
           }
         }
@@ -519,6 +536,34 @@ export class SSRModuleLoader {
       }
     }
 
+    // Check MDX-ESM cache to share modules with MDX loader and avoid duplicate React contexts
+    if (this.options.projectId && this.options.contentSourceId) {
+      const baseCacheDir = getMdxEsmCacheDir();
+      const projectKey = hashCodeHex(this.options.projectId);
+      const sourceKey = hashCodeHex(this.options.contentSourceId);
+      const mdxCacheDir = join(baseCacheDir, projectKey, sourceKey);
+
+      const mdxCachedPath = await lookupMdxEsmCache(
+        filePath,
+        mdxCacheDir,
+        this.options.projectDir,
+        contentHash,
+      );
+      if (mdxCachedPath) {
+        const entry: ModuleCacheEntry = { tempPath: mdxCachedPath, contentHash };
+        globalModuleCache.set(contentCacheKey, entry);
+        globalModuleCache.set(filePathCacheKey, entry);
+
+        logger.debug("[SSR-MODULE-LOADER] Reusing MDX-ESM cache", {
+          file: filePath.slice(-40),
+          cachedPath: mdxCachedPath.slice(-60),
+        });
+
+        await this.ensureDependenciesExist(code, filePath, depth);
+        return;
+      }
+    }
+
     const existingTransform = globalInProgress.get(inProgressKey);
     if (existingTransform) {
       try {
@@ -613,6 +658,7 @@ export class SSRModuleLoader {
           dev: this.options.dev,
           ssr: true,
           apiBaseUrl: this.options.apiBaseUrl,
+          reactVersion: this.options.reactVersion,
         };
 
         let transformed = await withSpan(
@@ -642,13 +688,13 @@ export class SSRModuleLoader {
           const cacheDir = getHttpBundleCacheDir();
           const failed = await ensureHttpBundlesExist(bundlePaths, cacheDir);
           if (failed.length > 0) {
-            logger.warn(
-              "[SSR-MODULE-LOADER] Some HTTP bundles could not be recovered",
-              {
-                file: filePath.slice(-40),
-                failed,
-              },
-            );
+            logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles", {
+              file: filePath.slice(-40),
+              failed,
+              totalBundles: bundlePaths.length,
+              cacheDir,
+              source: "fresh-transform",
+            });
           }
         }
 
@@ -927,26 +973,12 @@ export class SSRModuleLoader {
     }
   }
 
-  /**
-   * Fast sync hash for small strings (project IDs, etc.)
-   * Use hashContentAsync for large file content.
-   */
-  private hashCode(str: string): string {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i);
-      hash = (hash << 5) - hash + char;
-      hash = hash & hash;
-    }
-    return Math.abs(hash).toString(16);
-  }
-
   /**
    * Async hash for large content using Web Crypto API.
-   * Doesn't block event loop for large files.
+   * Falls back to sync hash for small files.
    */
   private async hashContentAsync(content: string): Promise<string> {
-    if (content.length < 10000) return this.hashCode(content);
+    if (content.length < 10000) return hashCodeHex(content);
 
     try {
       const data = new TextEncoder().encode(content);
@@ -957,7 +989,7 @@ export class SSRModuleLoader {
         .map((b) => b.toString(16).padStart(2, "0"))
         .join("");
     } catch {
-      return this.hashCode(content);
+      return hashCodeHex(content);
     }
   }
 
@@ -977,33 +1009,28 @@ export class SSRModuleLoader {
   }
 
   private async ensureTmpDir(): Promise<string> {
-    let projectDir = this.options.projectDir;
     const { projectId, contentSourceId } = this.options;
 
     if (!projectId) {
-      throw new Error(`Missing projectId for SSR temp directory (projectDir: ${projectDir})`);
+      throw new Error(
+        `Missing projectId for SSR temp directory (projectDir: ${this.options.projectDir})`,
+      );
     }
     if (!contentSourceId) {
       throw new Error(`Missing contentSourceId for SSR temp directory (project: ${projectId})`);
     }
 
-    if (!projectDir.startsWith("/")) {
-      projectDir = join(cwd(), projectDir);
-    }
-
-    const cacheBaseDir = getCacheBaseDir();
-    const baseDir = isAbsolute(cacheBaseDir) ? cacheBaseDir : join(cwd(), cacheBaseDir);
-
-    const cacheKey = `${baseDir}|${
-      buildSSRModuleProjectKey(projectDir, projectId)
-    }|${contentSourceId}`;
+    // Use the same cache directory as MDX-ESM loader to share module instances.
+    // This prevents issues like React context being created twice in separate files.
+    const baseCacheDir = getMdxEsmCacheDir();
+    const projectKey = hashCodeHex(projectId);
+    const sourceKey = hashCodeHex(contentSourceId);
+    const cacheKey = `${baseCacheDir}|${projectKey}|${sourceKey}`;
 
     const existingDir = globalTmpDirs.get(cacheKey);
     if (existingDir) return existingDir;
 
-    const projectKey = this.hashCode(projectId);
-    const sourceKey = this.hashCode(contentSourceId);
-    const tmpDir = join(baseDir, "veryfront-ssr", projectKey, sourceKey);
+    const tmpDir = join(baseCacheDir, projectKey, sourceKey);
 
     await this.fs.mkdir(tmpDir, { recursive: true });
     globalTmpDirs.set(cacheKey, tmpDir);

package/src/src/modules/react-loader/ssr-module-loader/types.ts

@@ -16,6 +16,8 @@ export interface SSRModuleLoaderOptions {
   apiBaseUrl?: string;
   /** Content source ID for cache isolation (branch name or release ID) */
   contentSourceId?: string;
+  /** React version for transforms (defaults to DEFAULT_REACT_VERSION) */
+  reactVersion?: string;
 }
 
 export interface ModuleCacheEntry {

package/src/src/modules/react-loader/types.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 
 export interface LoadComponentOptions {
   projectId?: string;
@@ -9,6 +9,8 @@ export interface LoadComponentOptions {
   ssr?: boolean;
   /** Content source ID for cache isolation (branch name or release ID) */
   contentSourceId?: string;
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 export interface ComponentSource {