meno-core 1.0.24 → 1.0.26

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/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/builders/embedBuilder.ts

@@ -54,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)) {

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

@@ -224,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/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";
 
@@ -65,17 +65,6 @@ export function HMRManager({
 
   useEffect(() => { onReloadRef.current = onReload; }, [onReload]);
 
-  // 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);
-    }
-  }, []);
-
   // Define message handler - reads from refs to always get latest values
   const createMessageHandler = () => (data: any) => {
     if (data.type === 'hmr:update') {
@@ -97,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'));
     }
   };
 
@@ -160,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/meno-filter/bindings.ts

@@ -118,6 +118,7 @@ export function bindFilterControls(instance: FilterInstance): void {
           filter.addFilter(field, value);
         }
       }
+
     };
 
     btn.addEventListener('click', handler);

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

@@ -584,7 +584,7 @@ describe('RouteLoader', () => {
       config.prefetchService = mockPrefetchService as any;
       routeLoader = new RouteLoader(config);
 
-      // Mock fetch - should NOT be called for /api/yaml since we have cache
+      // Mock fetch - should NOT be called for /api/page-content since we have cache
       mockFetch
         .mockResolvedValueOnce({
           ok: true,

package/lib/client/routing/RouteLoader.ts

@@ -169,7 +169,7 @@ export class RouteLoader {
         return tree;
       }
 
-      const response = await fetch(`${API_ROUTES.YAML}?page=${encodeURIComponent(pathWithoutLocale)}`, {
+      const response = await fetch(`${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(pathWithoutLocale)}`, {
         cache: 'no-store',
         signal: abortController.signal,
       });

package/lib/client/scripts/ScriptExecutor.ts

@@ -123,10 +123,11 @@ export class ScriptExecutor {
     const wrappedJS = `(function() {
       // Component: ${componentName} (defineVars)
       try {
-        var elements = document.querySelectorAll('[data-component="${componentName}"]');
+        var elements = document.querySelectorAll('[data-component~="${componentName}"]');
         elements.forEach(function(el) {
           var propsStr = el.getAttribute('data-props');
-          var props = propsStr ? JSON.parse(propsStr) : {};
+          var allProps = propsStr ? JSON.parse(propsStr) : {};
+          var props = allProps["${componentName}"] || {};
           (function(el, props) {
             ${destructure}
             ${js}
@@ -275,7 +276,7 @@ export class ScriptExecutor {
       const js = component.component.javascript;
       const destructure = generateDestructure(defineVars, component.component.interface);
 
-      // Update data-props attribute
+      // Update data-props attribute (keyed by component name)
       const varsToExpose = defineVars === true
         ? Object.keys(component.component.interface || {})
         : defineVars;
@@ -286,7 +287,15 @@ export class ScriptExecutor {
           propsForJS[varName] = newProps[varName];
         }
       }
-      element.setAttribute('data-props', JSON.stringify(propsForJS));
+
+      // Preserve existing keyed props from other components
+      let allProps: Record<string, unknown> = {};
+      const existingStr = element.getAttribute('data-props');
+      if (existingStr) {
+        try { allProps = JSON.parse(existingStr); } catch {}
+      }
+      allProps[componentName] = propsForJS;
+      element.setAttribute('data-props', JSON.stringify(allProps));
 
       // Execute JS for this element only
       const wrappedJS = `(function(el, props) {

package/lib/client/services/PrefetchService.ts

@@ -134,7 +134,7 @@ export class PrefetchService {
     try {
       // Fetch page data (same endpoint RouteLoader uses)
       const response = await fetch(
-        `${API_ROUTES.YAML}?page=${encodeURIComponent(path)}`,
+        `${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(path)}`,
         {
           signal: abortController.signal,
           // Allow browser caching for prefetched content

package/lib/client/styles/UtilityClassCollector.ts

@@ -7,18 +7,103 @@
  * CSS is injected eagerly during React's render phase (inside collect()),
  * eliminating the micro-gap between DOM commit and CSS injection (FOUC).
  * This is the same pattern CSS-in-JS libraries (Emotion, styled-components) use.
+ *
+ * All injected CSS is kept sorted by CSS property precedence so that shorthand
+ * properties (border) always appear before longhands (border-color), regardless
+ * of which render batch introduced each class.
  */
 
-import { generateSingleClassCSS } from '../../shared/cssGeneration';
+import { generateSingleClassCSS, sortClassesByPropertyOrder, generateRuleForClass } from '../../shared/cssGeneration';
 import { getCachedBreakpointConfig, getCachedResponsiveScalesConfig } from '../responsiveStyleResolver';
-import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS, getBreakpointValues } from '../../shared/breakpoints';
+import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_RESPONSIVE_SCALES } from '../../shared/responsiveScaling';
 
+/**
+ * Build a map from responsive prefix (e.g. 't', 'mob') to breakpoint value.
+ * Same logic as generateSingleClassCSS / generateUtilityCSS.
+ */
+function buildResponsivePrefixMap(breakpoints: BreakpointConfig): Record<string, number> {
+  const breakpointValues = getBreakpointValues(breakpoints);
+  const map: Record<string, number> = {};
+  for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
+    let prefix = breakpointName.charAt(0).toLowerCase();
+    if (breakpointName.toLowerCase() === 'mobile') {
+      prefix = 'mob';
+    }
+    map[prefix] = breakpointValue;
+  }
+  return map;
+}
+
+/**
+ * Get the responsive breakpoint value for a class, or 0 if it's not responsive.
+ * A class is responsive if it starts with a known breakpoint prefix and the
+ * remainder generates a valid CSS rule (same heuristic as generateSingleClassCSS).
+ */
+function getClassBreakpointValue(
+  className: string,
+  prefixMap: Record<string, number>
+): number {
+  for (const prefix of Object.keys(prefixMap)) {
+    if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
+      const potentialClass = className.substring(prefix.length + 1);
+      const rule = generateRuleForClass(potentialClass);
+      if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+        return prefixMap[prefix];
+      }
+    }
+  }
+  return 0;
+}
+
+/**
+ * Sort utility classes with breakpoint-aware ordering:
+ * 1. Non-responsive classes first, sorted by CSS property order (shorthand before longhand)
+ * 2. Responsive classes after, sorted by breakpoint value descending (largest first),
+ *    then by property order within each breakpoint group.
+ *
+ * This matches the SSR output from generateUtilityCSS which sorts responsive
+ * @media blocks by breakpoint value descending so that smaller breakpoints
+ * (mobile 540px) can correctly override larger ones (tablet 1024px) in the cascade.
+ */
+function sortClassesWithBreakpointOrder(
+  classes: Iterable<string>,
+  breakpoints: BreakpointConfig
+): string[] {
+  const prefixMap = buildResponsivePrefixMap(breakpoints);
+  const arr = Array.from(classes);
+
+  // Pre-compute sort keys for each class
+  const keys = arr.map(cls => {
+    const bpValue = getClassBreakpointValue(cls, prefixMap);
+    return { cls, isResponsive: bpValue > 0 ? 1 : 0, bpValue };
+  });
+
+  // Get property-order sorted array to derive per-class indices
+  const propertySorted = sortClassesByPropertyOrder(arr);
+  const propertyOrderIndex = new Map<string, number>();
+  for (let i = 0; i < propertySorted.length; i++) {
+    propertyOrderIndex.set(propertySorted[i], i);
+  }
+
+  keys.sort((a, b) => {
+    // Non-responsive (0) before responsive (1)
+    if (a.isResponsive !== b.isResponsive) return a.isResponsive - b.isResponsive;
+    // Within responsive: larger breakpoint first (descending)
+    if (a.bpValue !== b.bpValue) return b.bpValue - a.bpValue;
+    // Within same group: property order
+    return (propertyOrderIndex.get(a.cls) ?? Infinity) - (propertyOrderIndex.get(b.cls) ?? Infinity);
+  });
+
+  return keys.map(k => k.cls);
+}
+
 class UtilityClassCollectorImpl {
   private classes: Set<string> = new Set();
 
-  /** Tracks classes with CSS already injected into the DOM */
-  private injectedClasses: Set<string> = new Set();
+  /** Map of injected class names → their generated CSS text */
+  private injectedRules: Map<string, string> = new Map();
 
   /** Cached reference to <style id="utility-css"> */
   private styleEl: HTMLStyleElement | null = null;
@@ -53,34 +138,45 @@ class UtilityClassCollectorImpl {
    * Collect utility class names from a render pass and eagerly inject CSS.
    * Called by ComponentBuilder and builder modules after computing style classes.
    * CSS is injected synchronously during render — before React commits the DOM.
+   *
+   * When new classes are added, the full style content is rebuilt in sorted order
+   * so that shorthand properties (border) always precede longhands (border-color),
+   * even when they arrive in different render batches.
    */
   collect(classNames: string[]): void {
     const breakpointConfig = getCachedBreakpointConfig() || DEFAULT_BREAKPOINTS;
     const responsiveScalesConfig = getCachedResponsiveScalesConfig() || DEFAULT_RESPONSIVE_SCALES;
-    const cssParts: string[] = [];
 
+    let hasNew = false;
     for (const name of classNames) {
       this.classes.add(name);
 
-      if (this.injectedClasses.has(name)) continue;
-      this.injectedClasses.add(name);
+      if (this.injectedRules.has(name)) continue;
 
       const css = generateSingleClassCSS(name, breakpointConfig, responsiveScalesConfig);
-      if (css) cssParts.push(css);
+      if (css) {
+        this.injectedRules.set(name, css);
+        hasNew = true;
+      }
     }
 
-    // Batch all new CSS into a single text node append
-    if (cssParts.length > 0) {
+    if (hasNew) {
+      // Rebuild style element with all rules sorted by property order.
+      // This ensures shorthands always precede longhands regardless of
+      // which collect() batch introduced each class.
+      const sorted = sortClassesWithBreakpointOrder(this.injectedRules.keys(), breakpointConfig);
       const styleEl = this.ensureStyleElement();
       if (styleEl) {
-        styleEl.appendChild(document.createTextNode(cssParts.join('\n')));
+        styleEl.textContent = sorted
+          .map(name => this.injectedRules.get(name)!)
+          .join('\n');
       }
     }
   }
 
   /**
    * Clear collected classes for route change.
-   * Preserves injectedClasses and style tag — old page CSS stays
+   * Preserves injectedRules and style tag — old page CSS stays
    * (needed during transition via previousComponentTree).
    */
   clear(): void {
@@ -93,7 +189,7 @@ class UtilityClassCollectorImpl {
    */
   destroy(): void {
     this.classes.clear();
-    this.injectedClasses.clear();
+    this.injectedRules.clear();
     if (this.styleEl && this.styleEl.isConnected) {
       this.styleEl.remove();
     }