meno-core 1.0.53 → 1.1.0

package/lib/client/responsiveStyleResolver.ts

@@ -17,13 +17,13 @@ import { mergeResponsiveStyles } from '../shared/responsiveStyleUtils';
  * Get breakpoint configuration (with caching)
  */
 let breakpointConfig: BreakpointConfig | null = null;
-let breakpointPromise: Promise<BreakpointConfig> | null = null;
+let _breakpointPromise: Promise<BreakpointConfig> | null = null;
 
 /**
  * Get responsive scales configuration (with caching)
  */
 let responsiveScalesConfig: ResponsiveScales | null = null;
-let responsiveScalesPromise: Promise<ResponsiveScales> | null = null;
+let _responsiveScalesPromise: Promise<ResponsiveScales> | null = null;
 
 /**
  * Get rem conversion configuration (with caching)
@@ -40,7 +40,7 @@ let configPromise: Promise<void> | null = null;
  */
 export function clearBreakpointConfigCache(): void {
   breakpointConfig = null;
-  breakpointPromise = null;
+  _breakpointPromise = null;
 }
 
 /**
@@ -48,7 +48,7 @@ export function clearBreakpointConfigCache(): void {
  */
 export function clearResponsiveScalesConfigCache(): void {
   responsiveScalesConfig = null;
-  responsiveScalesPromise = null;
+  _responsiveScalesPromise = null;
 }
 
 /**
@@ -62,6 +62,7 @@ export function clearAllConfigCache(): void {
   clearBreakpointConfigCache();
   clearResponsiveScalesConfigCache();
   clearRemConversionConfigCache();
+  clearKnownTokensCache();
   configPromise = null;
 }
 
@@ -86,6 +87,62 @@ export function getCachedRemConversionConfig(): RemConversionConfig | null {
   return remConversionConfig;
 }
 
+/**
+ * The project's design-token NAMES (color names across every theme + variable `cssVar`s minus `--`),
+ * cached for the design-canvas CSS generator. This is the `knownTokens` set the utility-class engine
+ * needs to expand the BARE color-token class form (`bg-muted` → `background-color: var(--muted)`) —
+ * without it those classes produce no rule and render no color in the canvas. Mirrors meno-astro's
+ * `readKnownTokensSync` (the build/play token source) so the canvas matches the real Astro build.
+ */
+let knownTokens: Set<string> | null = null;
+let _knownTokensPromise: Promise<void> | null = null;
+
+/** Get the cached known-token set synchronously (null until {@link loadKnownTokens} resolves). */
+export function getCachedKnownTokens(): ReadonlySet<string> | null {
+  return knownTokens;
+}
+
+/** Clear the known-token cache (color/variable config changed). */
+export function clearKnownTokensCache(): void {
+  knownTokens = null;
+  _knownTokensPromise = null;
+}
+
+/** Fetch + cache the project's known design-token names. Deduped; safe to call repeatedly. */
+export async function loadKnownTokens(): Promise<ReadonlySet<string>> {
+  if (knownTokens) return knownTokens;
+  if (!_knownTokensPromise) {
+    _knownTokensPromise = (async () => {
+      const tokens = new Set<string>();
+      try {
+        const res = await fetch('/api/colors-config');
+        if (res.ok) {
+          const cfg = (await res.json()) as { themes?: Record<string, { colors?: Record<string, unknown> }> };
+          for (const theme of Object.values(cfg?.themes ?? {})) {
+            for (const name of Object.keys(theme?.colors ?? {})) tokens.add(name);
+          }
+        }
+      } catch {
+        // colors unavailable → no color tokens
+      }
+      try {
+        const res = await fetch('/api/variables-status');
+        if (res.ok) {
+          const data = (await res.json()) as { config?: { variables?: Array<{ cssVar?: string }> } };
+          for (const v of data?.config?.variables ?? []) {
+            if (v?.cssVar) tokens.add(v.cssVar.replace(/^--/, ''));
+          }
+        }
+      } catch {
+        // variables unavailable → no variable tokens
+      }
+      knownTokens = tokens;
+    })();
+  }
+  await _knownTokensPromise;
+  return knownTokens ?? new Set<string>();
+}
+
 /**
  * Shared config fetching - loads both breakpoints and responsive scales from single API call
  */
@@ -113,16 +170,16 @@ async function loadConfig(): Promise<void> {
               if (typeof entry.breakpoint === 'number' && entry.breakpoint > 0) {
                 validInput[key] = {
                   breakpoint: entry.breakpoint,
-                  previewPoint: typeof entry.previewPoint === 'number' && entry.previewPoint > 0
-                    ? entry.previewPoint
-                    : entry.breakpoint,
+                  previewPoint:
+                    typeof entry.previewPoint === 'number' && entry.previewPoint > 0
+                      ? entry.previewPoint
+                      : entry.breakpoint,
                 };
               }
             }
           }
-          breakpointConfig = Object.keys(validInput).length > 0
-            ? normalizeBreakpointConfig(validInput)
-            : { ...DEFAULT_BREAKPOINTS };
+          breakpointConfig =
+            Object.keys(validInput).length > 0 ? normalizeBreakpointConfig(validInput) : { ...DEFAULT_BREAKPOINTS };
         } else {
           breakpointConfig = { ...DEFAULT_BREAKPOINTS };
         }
@@ -174,17 +231,15 @@ export async function getResponsiveScalesConfig(): Promise<ResponsiveScales> {
  * Merge responsive styles into a single style object based on current viewport
  * Styles cascade: base → tablet → mobile
  */
-export async function resolveResponsiveStyle(
-  style: ResponsiveStyleObject | StyleObject
-): Promise<StyleObject> {
+export async function resolveResponsiveStyle(style: ResponsiveStyleObject | StyleObject): Promise<StyleObject> {
   if (!isResponsiveStyle(style)) {
     return style as StyleObject;
   }
-  
+
   const responsiveStyle = style as ResponsiveStyleObject;
   const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1920;
   const breakpoints = await getBreakpointConfig();
-  
+
   return mergeResponsiveStyles(responsiveStyle, 'viewport', viewportWidth, breakpoints);
 }
 
@@ -194,17 +249,17 @@ export async function resolveResponsiveStyle(
  */
 export function resolveResponsiveStyleSync(
   style: ResponsiveStyleObject | StyleObject,
-  viewportWidth: number = typeof window !== 'undefined' ? window.innerWidth : 1920
+  viewportWidth: number = typeof window !== 'undefined' ? window.innerWidth : 1920,
 ): StyleObject {
   if (!isResponsiveStyle(style)) {
     return style as StyleObject;
   }
-  
+
   const responsiveStyle = style as ResponsiveStyleObject;
-  
+
   // Use cached breakpoints or defaults
   const breakpoints = breakpointConfig || { ...DEFAULT_BREAKPOINTS };
-  
+
   return mergeResponsiveStyles(responsiveStyle, 'viewport', viewportWidth, breakpoints);
 }
 
@@ -223,4 +278,3 @@ export async function initializeBreakpoints(forceRefresh: boolean = false): Prom
  * Alias for initializeBreakpoints - initializes all config including responsive scales
  */
 export const initializeConfig = initializeBreakpoints;
-

package/lib/client/routing/RouteLoader.test.ts

@@ -1,8 +1,8 @@
-import { test, expect, describe, beforeEach, afterEach, afterAll, mock } from 'bun:test';
+import { test, expect, describe, beforeEach, afterEach, mock } from 'bun:test';
 
 // Save original fetch before any test can modify it
 const _originalFetch = globalThis.fetch;
-import { RouteLoader, RouteLoaderConfig } from './RouteLoader';
+import { RouteLoader, type RouteLoaderConfig } from './RouteLoader';
 import { ComponentRegistry } from '../componentRegistry';
 import { API_ROUTES, NOT_FOUND_TIMEOUT_MS } from '../../shared/constants';
 import type { ComponentNode } from '../../shared/types';
@@ -19,13 +19,15 @@ describe('RouteLoader', () => {
       componentRegistry,
     };
     routeLoader = new RouteLoader(config);
-    
+
     // Mock fetch globally
-    mockFetch = mock(() => Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve({}),
-      text: () => Promise.resolve('{}'),
-    }));
+    mockFetch = mock(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({}),
+        text: () => Promise.resolve('{}'),
+      }),
+    );
     globalThis.fetch = mockFetch as any;
   });
 
@@ -93,15 +95,15 @@ describe('RouteLoader', () => {
 
     test('should respect abort signal when loading global components', async () => {
       const abortController = new AbortController();
-      
+
       // Start loading
       const loadPromise = routeLoader.loadGlobalComponents(abortController.signal);
-      
+
       // Abort immediately
       abortController.abort();
-      
+
       await loadPromise;
-      
+
       // Should complete without error (abort is handled gracefully)
       // Test passes if no exception is thrown
     });
@@ -494,10 +496,10 @@ describe('RouteLoader', () => {
         });
 
       const loadPromise = routeLoader.loadComponents('/');
-      
+
       // Cancel immediately
       routeLoader.cancel();
-      
+
       await loadPromise;
 
       // onLoadStart might have been called before cancel, but onLoadComplete should not be called
@@ -585,11 +587,10 @@ describe('RouteLoader', () => {
       routeLoader = new RouteLoader(config);
 
       // Mock fetch - should NOT be called for /api/page-content since we have cache
-      mockFetch
-        .mockResolvedValueOnce({
-          ok: true,
-          json: () => Promise.resolve({}),
-        } as any); // loadGlobalComponents only
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({}),
+      } as any); // loadGlobalComponents only
 
       await routeLoader.loadComponents('/cached-page');
 
@@ -660,11 +661,10 @@ describe('RouteLoader', () => {
       config.prefetchService = mockPrefetchService as any;
       routeLoader = new RouteLoader(config);
 
-      mockFetch
-        .mockResolvedValueOnce({
-          ok: true,
-          json: () => Promise.resolve({}),
-        } as any); // loadGlobalComponents
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({}),
+      } as any); // loadGlobalComponents
 
       await routeLoader.loadComponents('/page-with-components');
 
@@ -750,4 +750,3 @@ describe('RouteLoader', () => {
     });
   });
 });
-

package/lib/client/routing/RouteLoader.ts

@@ -9,7 +9,7 @@ import type { ComponentNode, I18nConfig, JSONPage } from '../../shared/types';
 import { validatePageData } from '../../shared/validation/validators';
 import { parseLocaleFromPath, DEFAULT_I18N_CONFIG } from '../../shared/i18n';
 import type { PrefetchService } from '../services/PrefetchService';
-import { logNetworkError } from '../../shared/errorLogger';
+import { logNetworkError, logRuntimeError } from '../../shared/errorLogger';
 
 export interface RouteLoaderConfig {
   componentRegistry: ComponentRegistry;
@@ -59,7 +59,7 @@ export class RouteLoader {
       }
 
       const response = await fetch(API_ROUTES.COMPONENTS, fetchOptions);
-      
+
       // Check if aborted after fetch
       if (signal?.aborted) {
         return;
@@ -93,10 +93,8 @@ export class RouteLoader {
     try {
       const response = await fetch(API_ROUTES.PAGES);
       const data = await response.json();
-      const pages = (data.pages || []).map((p: unknown) =>
-        typeof p === 'string' ? p : (p as { path: string }).path
-      );
-      
+      const pages = (data.pages || []).map((p: unknown) => (typeof p === 'string' ? p : (p as { path: string }).path));
+
       if (this.config.onPagesLoaded) {
         this.config.onPagesLoaded(pages);
       }
@@ -186,7 +184,6 @@ export class RouteLoader {
       }
 
       if (!response.ok) {
-        
         if (this.config.onLoadComplete && !this.isCancelled) {
           this.config.onLoadComplete(null);
         }
@@ -202,7 +199,7 @@ export class RouteLoader {
             this.notFoundTimeout = null;
           }, NOT_FOUND_TIMEOUT_MS);
         }
-        
+
         return null;
       }
 
@@ -213,15 +210,18 @@ export class RouteLoader {
         return null;
       }
 
-      let parsed;
+      // biome-ignore lint/suspicious/noExplicitAny: JSON.parse result is used dynamically as page data
+      let parsed: any;
       try {
         parsed = JSON.parse(jsonText);
-        
+
         // Validate page data (logs warnings but doesn't fail - graceful degradation)
         const validationResult = validatePageData(parsed);
         if (!validationResult.valid) {
-          console.warn(`[RouteLoader] Page validation failed for ${path}:`,
-            validationResult.errors.map(e => `${e.path}: ${e.message}`).join('; '));
+          console.warn(
+            `[RouteLoader] Page validation failed for ${path}:`,
+            validationResult.errors.map((e) => `${e.path}: ${e.message}`).join('; '),
+          );
         }
         // Use validated data if available, otherwise use parsed (graceful degradation)
         parsed = validationResult.valid ? validationResult.data : parsed;
@@ -230,32 +230,32 @@ export class RouteLoader {
         const errorTree = this.createErrorTree(
           'Invalid JSON format',
           `Failed to parse JSON for page: ${path}`,
-          String(parseError)
+          String(parseError),
         );
-        
+
         if (this.config.onLoadComplete && !this.isCancelled) {
           this.config.onLoadComplete(errorTree);
         }
-        
+
         if (this.config.onLoadError && !this.isCancelled) {
-          this.config.onLoadError(
-            parseError instanceof Error ? parseError : new Error(String(parseError)),
-            errorTree
-          );
+          this.config.onLoadError(parseError instanceof Error ? parseError : new Error(String(parseError)), errorTree);
         }
-        
+
         return errorTree;
       }
 
       // Check if JSON has components section (page-specific components)
       let tree: ComponentNode | ComponentNode[] | null = null;
-      
+
       if (parsed.components) {
         // Merge page-specific components with global (page-specific override global)
         try {
           this.config.componentRegistry.merge(parsed.components);
           // JavaScript will be executed via useEffect after componentTree renders
         } catch (componentError) {
+          // A malformed components section must not abort the page render, but
+          // dropping it silently leaves the page missing components with no clue why.
+          logRuntimeError('RouteLoader.mergePageComponents', componentError);
         }
         tree = parsed.root || parsed;
       } else if (parsed.root) {
@@ -279,7 +279,7 @@ export class RouteLoader {
 
       this.clearNotFoundTimeout();
       this.abortController = null;
-      
+
       return tree;
     } catch (error) {
       // Ignore abort errors
@@ -294,21 +294,18 @@ export class RouteLoader {
 
       // Set a generic error tree
       const errorTree = this.createErrorTree('Error loading page', String(error));
-      
+
       if (this.config.onLoadComplete && !this.isCancelled) {
         this.config.onLoadComplete(errorTree);
       }
-      
+
       if (this.config.onLoadError && !this.isCancelled) {
-        this.config.onLoadError(
-          error instanceof Error ? error : new Error(String(error)),
-          errorTree
-        );
+        this.config.onLoadError(error instanceof Error ? error : new Error(String(error)), errorTree);
       }
 
       this.clearNotFoundTimeout();
       this.abortController = null;
-      
+
       return errorTree;
     }
   }
@@ -328,11 +325,7 @@ export class RouteLoader {
   /**
    * Create error tree ComponentNode structure
    */
-  private createErrorTree(
-    title: string,
-    message: string,
-    details?: string
-  ): ComponentNode {
+  private createErrorTree(title: string, message: string, details?: string): ComponentNode {
     const children: ComponentNode[] = [
       {
         type: 'node',
@@ -383,4 +376,3 @@ export class RouteLoader {
     }
   }
 }
-