meno-core 1.0.23 → 1.0.25

package/bin/cli.ts

@@ -102,6 +102,7 @@ async function startStaticServer(distPath: string) {
 
   const server = Bun.serve({
     port: SERVE_PORT,
+    hostname: 'localhost',
     async fetch(req: Request) {
       const url = new URL(req.url);
       let pathname = url.pathname;

package/build-static.ts

@@ -30,6 +30,7 @@ import type { SlugMap } from "./lib/shared/slugTranslator";
 import { buildItemUrl } from "./lib/shared/itemTemplateUtils";
 import { generateMiddleware, generateTrackFunction, generateResultsFunction } from "./lib/server/ab/generateFunctions";
 import { generateTrackingScript } from "./lib/server/ab/trackingScript";
+import { migrateTemplatesDirectory } from "./lib/server/migrateTemplates";
 
 /**
  * Collect build errors for error overlay
@@ -387,7 +388,7 @@ async function generateStaticDataFiles(
 }
 
 /**
- * Build CMS templates from pages/templates/ directory
+ * Build CMS templates from root templates/ directory
  */
 async function buildCMSTemplates(
   templatesDir: string,
@@ -566,7 +567,7 @@ async function buildCMSTemplates(
 
       console.error(`❌ Error processing ${file}:`, error);
       buildErrors.push({
-        file: `pages/templates/${file}`,
+        file: `templates/${file}`,
         message: errorMessage,
         type: errorMessage.includes('minification') || errorMessage.includes('minify') ? 'minify' : 'cms',
       });
@@ -664,6 +665,9 @@ export async function buildStaticPages(): Promise<void> {
   const i18nConfig = await loadI18nConfig();
   console.log(`🌐 Locales: ${i18nConfig.locales.map(l => l.code).join(", ")} (default: ${i18nConfig.defaultLocale})\n`);
 
+  // Auto-migrate pages/templates/ → templates/ if needed
+  await migrateTemplatesDirectory();
+
   // Clean dist directory (removes editor files, old HTML)
   cleanDist();
 
@@ -770,7 +774,7 @@ export async function buildStaticPages(): Promise<void> {
   console.log(`✅ Loaded ${components.size} global component(s)\n`);
 
   // Initialize CMS service for CMSList rendering
-  const cmsProvider = new FileSystemCMSProvider(projectPaths.pages(), projectPaths.cms());
+  const cmsProvider = new FileSystemCMSProvider(projectPaths.templates(), projectPaths.cms());
   const cmsService = new CMSService(cmsProvider);
   await cmsService.initialize();
   console.log(`✅ CMS service initialized\n`);
@@ -947,8 +951,8 @@ export async function buildStaticPages(): Promise<void> {
     }
   }
 
-  // Build CMS templates from pages/templates/
-  const templatesDir = join(pagesDir, 'templates');
+  // Build CMS templates from root templates/ directory
+  const templatesDir = projectPaths.templates();
   const staticCollections = new Map<string, ClientDataCollection>();
   const cmsResult = await buildCMSTemplates(
     templatesDir,

package/bunfig.toml

@@ -32,7 +32,10 @@ testNamePattern = ".*"
 
 # Skip patterns to exclude from test discovery
 # tests/ contains Playwright E2E tests that should be run with `bunx playwright test`
-testPathIgnorePatterns = ["node_modules", "dist", "\\.next", "tests/"]
+# __integration__ tests run in a separate process (bun test:integration)
+# because Bun's mock.module is process-global and unit tests that mock core modules
+# (e.g. ssrRenderer, configService) would contaminate integration tests.
+testPathIgnorePatterns = ["node_modules", "dist", "\\.next", "tests/", "__integration__"]
 
 # Coverage reporter options
 # Generates coverage reports for analysis

package/entries/client-router.tsx

@@ -7,6 +7,7 @@ import type { PrefetchConfig } from "../lib/shared/types/prefetch";
 declare global {
   interface Window {
     __hmrColorsInitialized?: boolean;
+    __hmrVariablesInitialized?: boolean;
     __MENO_CONFIG__?: {
       prefetch?: Partial<PrefetchConfig>;
     };
@@ -91,8 +92,89 @@ async function injectUpdatedThemeCSS() {
   }
 }
 
-// Initialize HMR colors listener
+// Setup HMR variables update listener immediately on app load
+function setupVariablesHMR() {
+  if (typeof window === 'undefined') return;
+
+  if (window.__hmrVariablesInitialized) return;
+  window.__hmrVariablesInitialized = true;
+
+  document.addEventListener('hmr-variables-update', async () => {
+    await injectUpdatedVariablesCSS();
+  });
+}
+
+// Fetch and inject updated variables CSS
+async function injectUpdatedVariablesCSS() {
+  try {
+    const response = await fetch('/api/variables-css');
+    if (!response.ok) return;
+
+    const css = await response.text();
+
+    let styleTag = document.getElementById('hmr-css-variables');
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = 'hmr-css-variables';
+      document.head.appendChild(styleTag);
+    }
+
+    styleTag.textContent = css;
+  } catch (error) {
+    // Silently fail - not critical if CSS injection doesn't work
+  }
+}
+
+// Setup HMR fonts update listener immediately on app load
+function setupFontsHMR() {
+  if (typeof window === 'undefined') return;
+
+  if ((window as any).__hmrFontsCSSInitialized) return;
+  (window as any).__hmrFontsCSSInitialized = true;
+
+  document.addEventListener('hmr-fonts-update', async () => {
+    await injectUpdatedFontsCSS();
+  });
+}
+
+// Fetch and inject updated fonts CSS
+async function injectUpdatedFontsCSS() {
+  try {
+    const response = await fetch('/api/fonts-css');
+    if (!response.ok) return;
+
+    const css = await response.text();
+
+    let styleTag = document.getElementById('hmr-fonts-css');
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = 'hmr-fonts-css';
+      document.head.appendChild(styleTag);
+    }
+
+    styleTag.textContent = css;
+  } catch (error) {
+    // Silently fail
+  }
+}
+
+// Setup HMR libraries update listener - triggers full page reload
+function setupLibrariesHMR() {
+  if (typeof window === 'undefined') return;
+
+  if ((window as any).__hmrLibrariesInitialized) return;
+  (window as any).__hmrLibrariesInitialized = true;
+
+  document.addEventListener('hmr-libraries-update', () => {
+    location.reload();
+  });
+}
+
+// Initialize HMR listeners
 setupColorsHMR();
+setupVariablesHMR();
+setupFontsHMR();
+setupLibrariesHMR();
 
 // Render app with HMR support and prefetching enabled
 const rootElement = document.getElementById('root');

package/entries/server-router.tsx

@@ -14,16 +14,20 @@ import { FileSystemPageProvider } from '../lib/server/providers/fileSystemPagePr
 import { FileSystemCMSProvider } from '../lib/server/providers/fileSystemCMSProvider';
 import { configService } from '../lib/server/services/configService';
 import { projectPaths } from '../lib/server/projectContext';
+import { migrateTemplatesDirectory } from '../lib/server/migrateTemplates';
+
+// Auto-migrate pages/templates/ → templates/ if needed
+await migrateTemplatesDirectory();
 
 // Initialize services
 const pageCache = new PageCache();
-const pageProvider = new FileSystemPageProvider(projectPaths.pages());
+const pageProvider = new FileSystemPageProvider(projectPaths.pages(), projectPaths.templates());
 const pageService = new PageService(pageCache, pageProvider);
 const componentService = new ComponentService();
 const wsManager = new WebSocketManager();
 
 // Initialize CMS services
-const cmsProvider = new FileSystemCMSProvider(projectPaths.pages(), projectPaths.cms());
+const cmsProvider = new FileSystemCMSProvider(projectPaths.templates(), projectPaths.cms());
 const cmsService = new CMSService(cmsProvider);
 
 // Initialize file watcher with CMS service for template change detection

package/lib/client/core/ComponentBuilder.ts

@@ -27,6 +27,7 @@ import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, type V
 import { DEFAULT_I18N_CONFIG, resolveI18nValue } from "../../shared/i18n";
 import { getChildPath, pathToString } from "../../shared/pathArrayUtils";
 import { responsiveStylesToClasses } from "../../shared/utilityClassMapper";
+import { UtilityClassCollector } from "../styles/UtilityClassCollector";
 import { processCMSTemplate, processCMSPropsTemplate, RAW_HTML_PREFIX } from "./cmsTemplateProcessor";
 import type { PrefetchService } from "../services/PrefetchService";
 import { generateElementClassName, type ElementClassContext } from "../../shared/elementClassName";
@@ -95,6 +96,7 @@ export class ComponentBuilder {
       cached = responsiveStylesToClasses(style as any);
       this.styleClassCache.set(style, cached);
     }
+    UtilityClassCollector.collect(cached);
     return cached;
   }
 

package/lib/client/core/builders/embedBuilder.ts

@@ -12,6 +12,7 @@ import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
 import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
+import { UtilityClassCollector } from "../../styles/UtilityClassCollector";
 import DOMPurify from "isomorphic-dompurify";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext } from "./types";
@@ -53,7 +54,8 @@ export function buildEmbed(
   const { key, elementPath, parentComponentName, componentContext, componentRootPath, cmsItemIndexPath } = ctx;
 
   // Process templates in html property before sanitization (matching SSR behavior)
-  let htmlContent = node.html;
+  // Mappings should already be resolved by processStructure, this is just a type safety guard
+  let htmlContent = typeof node.html === 'string' ? node.html : '';
 
   // Process item template strings (for List context) - e.g., {{item.icon}}, {{feature.title}}
   if (ctx.templateContext && hasItemTemplates(htmlContent)) {
@@ -125,6 +127,7 @@ export function buildEmbed(
       ) as StyleObject | ResponsiveStyleObject;
     }
     const utilityClasses = responsiveStylesToClasses(processedStyle as StyleObject | ResponsiveStyleObject);
+    UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
 
@@ -172,6 +175,7 @@ export function buildEmbed(
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
         }

package/lib/client/core/builders/linkNodeBuilder.ts

@@ -13,6 +13,7 @@ import { generateElementClassName, type ElementClassContext } from "../../../sha
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
 import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
 import { processItemPropsTemplate, type ValueResolver } from "../../../shared/itemTemplateUtils";
+import { UtilityClassCollector } from "../../styles/UtilityClassCollector";
 import { resolveI18nValue, DEFAULT_I18N_CONFIG } from "../../../shared/i18n";
 import { isCurrentLink } from "../../../shared/linkUtils";
 import type { ElementRegistry } from "../../elementRegistry";
@@ -101,6 +102,7 @@ export function buildLinkNode(
       ) as StyleObject | ResponsiveStyleObject;
     }
     const utilityClasses = responsiveStylesToClasses(processedStyle as StyleObject | ResponsiveStyleObject);
+    UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
 
@@ -148,6 +150,7 @@ export function buildLinkNode(
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
         }

package/lib/client/core/builders/listBuilder.ts

@@ -11,6 +11,7 @@ import type { ListNode } from "../../../shared/registry/nodeTypes/ListNodeType";
 import type { CMSItem, CMSFilterCondition, CMSSortConfig, CMSFilterOperator } from "../../../shared/types/cms";
 import type { InteractiveStyles, StyleObject, ResponsiveStyleObject } from "../../../shared/types";
 import { singularize } from "../../../shared/types/cms";
+import { UtilityClassCollector } from "../../styles/UtilityClassCollector";
 import { buildTemplateContext, resolveItemsTemplate, getNestedValue } from "../../../shared/itemTemplateUtils";
 import type { TemplateContext } from "../../../shared/types/cms";
 import { pathToString, getChildPath } from "../../../shared/pathArrayUtils";
@@ -152,6 +153,7 @@ export function buildList(
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
         }
@@ -222,7 +224,7 @@ export function buildList(
   const label = isCollectionMode ? 'CMS List' : 'List';
 
   // Use configurable tag (defaults to 'div') - null means fragment mode (no wrapper)
-  const tag = node.tag === false ? null : (node.tag || 'div');
+  const tag = typeof node.tag === 'string' ? node.tag : null;
 
   if (!source && !sourceIsResolved) {
     // No source - render empty container with placeholder

package/lib/client/core/builders/localeListBuilder.ts

@@ -12,6 +12,7 @@ import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
 import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
+import { UtilityClassCollector } from "../../styles/UtilityClassCollector";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext } from "./types";
 
@@ -75,6 +76,7 @@ export function buildLocaleList(
   // Convert container styles to utility classes
   if (node.style) {
     const utilityClasses = responsiveStylesToClasses(node.style as StyleObject | ResponsiveStyleObject);
+    UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
 
@@ -122,6 +124,7 @@ export function buildLocaleList(
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
         }
@@ -170,6 +173,10 @@ export function buildLocaleList(
   const activeItemClasses = node.activeItemStyle ? responsiveStylesToClasses(node.activeItemStyle as StyleObject | ResponsiveStyleObject) : [];
   const separatorClasses = node.separatorStyle ? responsiveStylesToClasses(node.separatorStyle as StyleObject | ResponsiveStyleObject) : [];
   const flagClasses = node.flagStyle ? responsiveStylesToClasses(node.flagStyle as StyleObject | ResponsiveStyleObject) : [];
+  UtilityClassCollector.collect(itemClasses);
+  UtilityClassCollector.collect(activeItemClasses);
+  UtilityClassCollector.collect(separatorClasses);
+  UtilityClassCollector.collect(flagClasses);
 
   // Build locale links from config
   const linkElements: ReactElement[] = [];

package/lib/client/core/cmsTemplateProcessor.ts

@@ -29,21 +29,21 @@ function isI18nValue(value: unknown): value is I18nValue {
  * Resolve an I18nValue to a string for the given locale
  * Falls back to default locale, then first available translation
  */
-function resolveI18nValue(value: I18nValue, locale: string, config: I18nConfig): string {
+function resolveI18nValue(value: I18nValue, locale: string, config: I18nConfig): unknown {
   // Try exact locale match
-  if (typeof value[locale] === 'string') {
-    return value[locale] as string;
+  if (value[locale] !== undefined) {
+    return value[locale];
   }
 
   // Try default locale
-  if (typeof value[config.defaultLocale] === 'string') {
-    return value[config.defaultLocale] as string;
+  if (value[config.defaultLocale] !== undefined) {
+    return value[config.defaultLocale];
   }
 
   // Get first available translation (skip _i18n marker)
   for (const key of Object.keys(value)) {
-    if (key !== '_i18n' && typeof value[key] === 'string') {
-      return value[key] as string;
+    if (key !== '_i18n' && value[key] !== undefined) {
+      return value[key];
     }
   }
 
@@ -82,9 +82,10 @@ export function processCMSTemplate(
       }
     }
 
-    // Handle i18n values
+    // Handle i18n values - resolve to locale-specific value, then continue
+    // through rich-text detection (don't early-return, as resolved value may be Tiptap JSON)
     if (isI18nValue(value)) {
-      return resolveI18nValue(value, effectiveLocale, config);
+      value = resolveI18nValue(value, effectiveLocale, config);
     }
 
     // Return string representation

package/lib/client/hmr/HMRManager.tsx

@@ -3,7 +3,7 @@
  * Manages Hot Module Replacement WebSocket connection, status tracking, and visual indicators.
  */
 
-import { createElement as h, useState, useEffect, useRef, useCallback } from "react";
+import { createElement as h, useState, useEffect, useRef } from "react";
 import type { ReactElement } from "react";
 import { HMRWebSocket } from "../hmrWebSocket";
 
@@ -53,6 +53,7 @@ export function HMRManager({
   // Track callbacks via refs to avoid stale closures and prevent WebSocket recreation
   const currentPathRef = useRef(currentPath);
   const onCMSUpdateRef = useRef(onCMSUpdate);
+  const onReloadRef = useRef(onReload);
 
   useEffect(() => {
     currentPathRef.current = currentPath;
@@ -62,24 +63,15 @@ export function HMRManager({
     onCMSUpdateRef.current = onCMSUpdate;
   }, [onCMSUpdate]);
 
-  // Helper function to show HMR indicator
-  const showHMRIndicator = useCallback(() => {
-    const indicator = document.getElementById('hmr-indicator');
-    if (indicator) {
-      indicator.style.display = 'block';
-      setTimeout(() => {
-        indicator.style.display = 'none';
-      }, 2000);
-    }
-  }, []);
+  useEffect(() => { onReloadRef.current = onReload; }, [onReload]);
 
   // Define message handler - reads from refs to always get latest values
   const createMessageHandler = () => (data: any) => {
     if (data.type === 'hmr:update') {
       // Always use current path (preserves locale) when reloading
       // The HMR path tells us which page changed, but we reload with current locale
-      if (onReload) {
-        onReload(currentPathRef.current);
+      if (onReloadRef.current) {
+        onReloadRef.current(currentPathRef.current);
       }
 
       // Call update callback with the original HMR path
@@ -94,8 +86,15 @@ export function HMRManager({
     } else if (data.type === 'hmr:colors-update') {
       // Dispatch custom event to notify color hooks of the update
       document.dispatchEvent(new CustomEvent('hmr-colors-update'));
-      // Show HMR indicator
-      showHMRIndicator();
+    } else if (data.type === 'hmr:variables-update') {
+      // Dispatch custom event to notify variable hooks of the update
+      document.dispatchEvent(new CustomEvent('hmr-variables-update'));
+    } else if (data.type === 'hmr:fonts-update') {
+      // Dispatch custom event to notify font CSS injection
+      document.dispatchEvent(new CustomEvent('hmr-fonts-update'));
+    } else if (data.type === 'hmr:libraries-update') {
+      // Dispatch custom event to trigger full page reload for library changes
+      document.dispatchEvent(new CustomEvent('hmr-libraries-update'));
     }
   };
 
@@ -145,7 +144,7 @@ export function HMRManager({
         hmrWs.close();
       }
     };
-  }, [onUpdate, onStatusChange, onReload]);
+  }, [onUpdate, onStatusChange]);
 
   // Bun HMR API integration
   useEffect(() => {
@@ -157,14 +156,13 @@ export function HMRManager({
       });
       
       import.meta.hot.on('bun:afterUpdate', () => {
-        // Show visual indicator
-        showHMRIndicator();
+        // HMR update complete
       });
       
       import.meta.hot.on('bun:error', () => {
       });
     }
-  }, [showHMRIndicator]);
+  }, []);
 
   // Render indicators
   return h(HMRIndicator, { status });

package/lib/client/hooks/useVariables.ts

@@ -0,0 +1,101 @@
+/**
+ * Hook for fetching and caching CSS variables (variables.json)
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import type { CSSVariable } from '../../shared/types/variables';
+
+let cachedVariables: CSSVariable[] | null = null;
+let hmrCallbacks: Set<() => void> = new Set();
+
+// Setup HMR listener immediately when module loads
+function initializeHMRListener() {
+  if (typeof window === 'undefined') return;
+
+  // Only setup once
+  if ((window as any).__hmrVariablesInitialized) return;
+  (window as any).__hmrVariablesInitialized = true;
+
+  // Listen for custom HMR events from HMRManager
+  document.addEventListener('hmr-variables-update', () => {
+    // Clear cache
+    cachedVariables = null;
+
+    // Notify all listeners to refresh their data
+    hmrCallbacks.forEach(callback => callback());
+  });
+}
+
+// Initialize immediately
+if (typeof window !== 'undefined') {
+  initializeHMRListener();
+}
+
+export function useVariables() {
+  const [variables, setVariables] = useState<CSSVariable[] | null>(cachedVariables);
+  const [loading, setLoading] = useState(!cachedVariables);
+  const [error, setError] = useState<Error | null>(null);
+  const callbackRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    // Create a callback to refresh variables when HMR update is received
+    const refreshCallback = async () => {
+      try {
+        const response = await fetch('/api/variables-status');
+        if (!response.ok) {
+          throw new Error('Failed to fetch variables');
+        }
+        const data = await response.json() as { status: string; config: { variables: CSSVariable[] } };
+        cachedVariables = data.config.variables;
+        setVariables(cachedVariables);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Unknown error'));
+      }
+    };
+
+    // Register callback for HMR updates
+    callbackRef.current = refreshCallback;
+    hmrCallbacks.add(refreshCallback);
+
+    // Return cached variables immediately
+    if (cachedVariables) {
+      setVariables(cachedVariables);
+      setLoading(false);
+      return () => {
+        if (callbackRef.current) {
+          hmrCallbacks.delete(callbackRef.current);
+        }
+      };
+    }
+
+    // Fetch variables
+    const fetchVariables = async () => {
+      try {
+        const response = await fetch('/api/variables-status');
+        if (!response.ok) {
+          throw new Error('Failed to fetch variables');
+        }
+        const data = await response.json() as { status: string; config: { variables: CSSVariable[] } };
+        cachedVariables = data.config.variables;
+        setVariables(cachedVariables);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Unknown error'));
+        setVariables(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVariables();
+
+    return () => {
+      if (callbackRef.current) {
+        hmrCallbacks.delete(callbackRef.current);
+      }
+    };
+  }, []);
+
+  return { variables, loading, error };
+}

package/lib/client/index.ts

@@ -52,6 +52,7 @@ export * from './navigation';
 // Hooks
 export * from './hooks/useColorVariables';
 export * from './hooks/usePropertyAutocomplete';
+export * from './hooks/useVariables';
 
 // Template engine
 export * from './templateEngine';

package/lib/client/responsiveStyleResolver.test.ts

@@ -1,4 +1,7 @@
-import { test, expect, describe, beforeEach, afterEach } from "bun:test";
+import { test, expect, describe, beforeEach, afterEach, afterAll } from "bun:test";
+
+// Save original fetch before any test can modify it
+const _originalFetch = globalThis.fetch;
 import { 
   resolveResponsiveStyleSync,
   resolveResponsiveStyle,
@@ -334,10 +337,8 @@ describe("Responsive Style Resolver - resolveResponsiveStyleSync", () => {
 });
 
 describe("Responsive Style Resolver - resolveResponsiveStyle (async)", () => {
-  // Mock fetch for async tests
-  beforeEach(() => {
-    // Reset global fetch mock
-    global.fetch = global.fetch || (() => Promise.reject(new Error('fetch not implemented'))) as any;
+  afterEach(() => {
+    globalThis.fetch = _originalFetch;
   });
 
   test("should resolve non-responsive styles asynchronously", async () => {
@@ -352,7 +353,7 @@ describe("Responsive Style Resolver - resolveResponsiveStyle (async)", () => {
 
   test("should resolve responsive styles with default breakpoints on fetch error", async () => {
     // Mock fetch to fail
-    global.fetch = (() => Promise.reject(new Error('Network error'))) as unknown as typeof fetch;
+    globalThis.fetch = (() => Promise.reject(new Error('Network error'))) as unknown as typeof fetch;
     
     const style: ResponsiveStyleObject = {
       base: {
@@ -371,7 +372,7 @@ describe("Responsive Style Resolver - resolveResponsiveStyle (async)", () => {
 
   test("should handle async breakpoint config loading", async () => {
     // Mock successful fetch
-    global.fetch = (() => Promise.resolve({
+    globalThis.fetch = (() => Promise.resolve({
       json: () => Promise.resolve({
         breakpoints: {
           tablet: 900,
@@ -396,9 +397,13 @@ describe("Responsive Style Resolver - resolveResponsiveStyle (async)", () => {
 });
 
 describe("Responsive Style Resolver - initializeBreakpoints", () => {
+  afterEach(() => {
+    globalThis.fetch = _originalFetch;
+  });
+
   test("should initialize breakpoint config", async () => {
     // Mock successful fetch
-    global.fetch = (() => Promise.resolve({
+    globalThis.fetch = (() => Promise.resolve({
       json: () => Promise.resolve({
         breakpoints: {
           tablet: 900,
@@ -420,7 +425,7 @@ describe("Responsive Style Resolver - initializeBreakpoints", () => {
 
   test("should handle initialization error gracefully", async () => {
     // Mock fetch to fail
-    global.fetch = (() => Promise.reject(new Error('Network error'))) as unknown as typeof fetch;
+    globalThis.fetch = (() => Promise.reject(new Error('Network error'))) as unknown as typeof fetch;
     
     // Should not throw
     await expect(initializeBreakpoints()).resolves.toBeUndefined();