meno-core 1.0.19 → 1.0.21

package/lib/client/templateEngine.test.ts

@@ -626,6 +626,132 @@ describe("Template Engine - processStructure", () => {
   });
 });
 
+describe("Template Engine - Slot Default Values", () => {
+  const mockComponentDef: StructuredComponentDefinition = {
+    interface: {},
+    structure: { type: 'node' as const, tag: 'div' }
+  };
+
+  const createContext = (props: Record<string, unknown>): TemplateContext => ({
+    props,
+    componentDef: mockComponentDef
+  });
+
+  test("should render slot default when no instance children provided", () => {
+    const structure = [
+      { type: "node", tag: "div", children: [
+        { type: "node", tag: "h1", children: "Header" },
+        {
+          type: "slot",
+          default: [
+            { type: "node", tag: "p", children: "Default paragraph" }
+          ]
+        },
+        { type: "node", tag: "footer", children: "Footer" }
+      ]}
+    ] as unknown as ComponentNode[];
+
+    const result = processStructure(structure, createContext({}), undefined, undefined);
+    expect(result).toBeInstanceOf(Array);
+
+    const [root] = result as ComponentNode[];
+    expect(root.tag).toBe("div");
+    expect(root.children).toBeInstanceOf(Array);
+
+    const children = root.children as ComponentNode[];
+    expect(children).toHaveLength(3);
+    expect(children[0].tag).toBe("h1");
+    expect((children[1] as any).tag).toBe("p"); // Default content
+    expect((children[1] as any).children).toEqual(["Default paragraph"]);
+    expect(children[2].tag).toBe("footer");
+  });
+
+  test("should render instance children instead of slot default when provided", () => {
+    const structure = [
+      { type: "node", tag: "div", children: [
+        { type: "node", tag: "h1", children: "Header" },
+        {
+          type: "slot",
+          default: [
+            { type: "node", tag: "p", children: "Default paragraph" }
+          ]
+        },
+        { type: "node", tag: "footer", children: "Footer" }
+      ]}
+    ] as unknown as ComponentNode[];
+
+    const instanceChildren = [
+      { type: "node", tag: "span", children: "Custom content" }
+    ] as ComponentNode[];
+
+    const result = processStructure(structure, createContext({}), undefined, instanceChildren);
+    expect(result).toBeInstanceOf(Array);
+
+    const [root] = result as ComponentNode[];
+    const children = root.children as ComponentNode[];
+
+    expect(children).toHaveLength(3);
+    expect(children[0].tag).toBe("h1");
+    expect((children[1] as any).tag).toBe("span"); // Instance content, not default
+    expect((children[1] as any).children).toEqual(["Custom content"]);
+    expect(children[2].tag).toBe("footer");
+  });
+
+  test("should handle string default for slot", () => {
+    const structure = [
+      { type: "node", tag: "div", children: [
+        {
+          type: "slot",
+          default: "Default text content"
+        }
+      ]}
+    ] as unknown as ComponentNode[];
+
+    const result = processStructure(structure, createContext({}), undefined, undefined);
+    const [root] = result as ComponentNode[];
+    const children = root.children as string[];
+
+    expect(children).toContain("Default text content");
+  });
+
+  test("should render nothing when no instance children and no default", () => {
+    const structure = [
+      { type: "node", tag: "div", children: [
+        { type: "node", tag: "h1", children: "Header" },
+        { type: "slot" }, // No default
+        { type: "node", tag: "footer", children: "Footer" }
+      ]}
+    ] as unknown as ComponentNode[];
+
+    const result = processStructure(structure, createContext({}), undefined, undefined);
+    const [root] = result as ComponentNode[];
+    const children = root.children as ComponentNode[];
+
+    expect(children).toHaveLength(2); // Only h1 and footer, slot is removed
+    expect(children[0].tag).toBe("h1");
+    expect(children[1].tag).toBe("footer");
+  });
+
+  test("should process templates in slot default content", () => {
+    const structure = [
+      { type: "node", tag: "div", children: [
+        {
+          type: "slot",
+          default: [
+            { type: "node", tag: "p", children: "Hello {{name}}" }
+          ]
+        }
+      ]}
+    ] as unknown as ComponentNode[];
+
+    const result = processStructure(structure, createContext({ name: "World" }), undefined, undefined);
+    const [root] = result as ComponentNode[];
+    const children = root.children as ComponentNode[];
+
+    expect((children[0] as any).children).toEqual(["Hello World"]);
+  });
+});
+
 describe("Template Engine - normalizeStyle", () => {
   test("should normalize flat style objects", () => {
     const style = {

package/lib/client/templateEngine.ts

@@ -10,7 +10,7 @@ import { isResponsiveStyle } from '../shared/styleUtils';
 import { normalizeStyle as normalizeStyleShared, mergeResponsiveStyles } from '../shared/responsiveStyleUtils';
 import { DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
 import { NODE_TYPE } from '../shared/constants';
-import { isValidNodeType, isComponentNode, isHtmlNode, isSlotMarker, isEmbedNode, isLocaleListNode, isLinkNode, isCMSListNode } from '../shared/nodeUtils';
+import { isValidNodeType, isComponentNode, isHtmlNode, isSlotMarker, isEmbedNode, isLocaleListNode, isLinkNode, isCMSListNode, isListNode } from '../shared/nodeUtils';
 import { applyStylesToNode } from '../shared/styleNodeUtils';
 import { isRichTextMarker, richTextMarkerToHtml } from '../shared/propResolver';
 import { isTiptapDocument, tiptapToHtml } from '../shared/richtext';
@@ -379,8 +379,16 @@ export function processStructure(
               const processedChild = processStructure(child, context, viewportWidth, instanceChildren, preserveResponsiveStyles, depth + 1);
               addProcessedItemToArray(processedChild, processed);
             }
+          } else if ('default' in item && (item as any).default !== undefined) {
+            // Fallback: use slot's default content if no instance children provided
+            const defaultContent = (item as any).default;
+            const defaultsArray = Array.isArray(defaultContent) ? defaultContent : [defaultContent];
+            for (const defaultChild of defaultsArray) {
+              const processedChild = processStructure(defaultChild, context, viewportWidth, undefined, preserveResponsiveStyles, depth + 1);
+              addProcessedItemToArray(processedChild, processed);
+            }
           }
-          // If no instance children, marker renders nothing (skip it)
+          // If no instance children AND no default, marker renders nothing (skip it)
         } else {
           // Regular item - process normally
           const processedItem = processStructure(item, context, viewportWidth, instanceChildren, preserveResponsiveStyles, depth + 1);
@@ -393,7 +401,7 @@ export function processStructure(
     if (typeof structure === 'object' && !Array.isArray(structure) && structure !== null) {
       // Check if this is a slot marker (shouldn't happen here since we handle it in array processing, but guard anyway)
       if (isSlotMarker(structure)) {
-        // This shouldn't happen in object processing, but if it does, return instance children
+        // This shouldn't happen in object processing, but if it does, return instance children or default
         if (instanceChildren) {
           const processed: Array<ComponentNode | string> = [];
           const childrenArray = Array.isArray(instanceChildren) ? instanceChildren : [instanceChildren];
@@ -403,6 +411,17 @@ export function processStructure(
           }
           return processed.length === 1 ? processed[0] : processed;
         }
+        // Fallback: use slot's default content
+        if ('default' in structure && (structure as any).default !== undefined) {
+          const defaultContent = (structure as any).default;
+          const processed: Array<ComponentNode | string> = [];
+          const defaultsArray = Array.isArray(defaultContent) ? defaultContent : [defaultContent];
+          for (const defaultChild of defaultsArray) {
+            const processedChild = processStructure(defaultChild, context, viewportWidth, undefined, preserveResponsiveStyles, depth + 1);
+            addProcessedItemToArray(processedChild, processed);
+          }
+          return processed.length === 1 ? processed[0] : processed;
+        }
         return null;
       }
       
@@ -452,11 +471,12 @@ export function processStructure(
         processed = {
           type: NODE_TYPE.LOCALE_LIST,
         } as any;
-      } else if (preservedType === NODE_TYPE.CMS_LIST) {
-        // Handle cms-list nodes - they have collection, limit, offset, filter, sort, style, children
+      } else if (preservedType === NODE_TYPE.LIST || (preservedType as string) === 'cms-list') {
+        // Handle list nodes (unified - handles both prop and collection source types)
+        // Also supports legacy 'cms-list' type for migration
         processed = {
-          type: NODE_TYPE.CMS_LIST,
-          collection: '',
+          type: NODE_TYPE.LIST,
+          source: '',
           children: [] as Array<ComponentNode | string>
         } as any;
       } else {
@@ -480,7 +500,8 @@ export function processStructure(
               processed.children = [processedChildren as ComponentNode | string];
             }
           } else if (key === 'tag') {
-            if (isHtmlNode(processed)) {
+            // Handle tag for HTML nodes and list nodes
+            if (isHtmlNode(processed) || isListNode(processed)) {
               if (typeof value === 'string') {
                 // Process template in tag (e.g., "h{{size}}" -> "h1")
                 const evalContext: Record<string, unknown> = { ...getGlobalTemplateContext(), ...context.props };
@@ -488,9 +509,9 @@ export function processStructure(
                   Object.assign(evalContext, context.componentDef as Record<string, unknown>);
                 }
                 // Use processCodeTemplates to handle partial templates like "h{{size}}"
-                processed.tag = processCodeTemplates(value, evalContext);
+                (processed as any).tag = processCodeTemplates(value, evalContext);
               } else {
-                processed.tag = String(value);
+                (processed as any).tag = String(value);
               }
             }
           } else if (key === 'component') {
@@ -502,10 +523,29 @@ export function processStructure(
               }
             }
           } else if (key === 'html') {
-            // Handle html property for embed nodes
+            // Handle html property for embed nodes - process templates like {{propName}}
             if (preservedType === NODE_TYPE.EMBED) {
               if (typeof value === 'string') {
-                (processed as any).html = value;
+                // Build evaluation context from props (same as tag processing)
+                const evalContext: Record<string, unknown> = { ...getGlobalTemplateContext(), ...context.props };
+                if (context.componentDef && typeof context.componentDef === 'object') {
+                  Object.assign(evalContext, context.componentDef as Record<string, unknown>);
+                }
+                // Add parent cms-list item context for nested template resolution
+                const itemContext = (context as Record<string, unknown>).itemContext as Record<string, unknown> | undefined;
+                if (itemContext) {
+                  Object.assign(evalContext, itemContext);
+                }
+                // Check if entire string is a complete template {{expr}}
+                if (/^\{\{.+\}\}$/.test(value) && !hasItemTemplates(value)) {
+                  const result = evaluateTemplate(value, evalContext);
+                  (processed as any).html = result === undefined || result === null ? '' : String(result);
+                } else if (hasTemplates(value) && !hasItemTemplates(value)) {
+                  // Use processCodeTemplates to handle partial templates
+                  (processed as any).html = processCodeTemplates(value, evalContext);
+                } else {
+                  (processed as any).html = value;
+                }
               } else {
                 (processed as any).html = String(value);
               }
@@ -718,7 +758,7 @@ export function processStructure(
           if (isComponentNode(processed)) {
             processed.props = processed.props || {};
             processed.props.style = resolvedStyle as ResponsiveStyleObject;
-          } else if (isHtmlNode(processed) || isEmbedNode(processed) || isLocaleListNode(processed) || isLinkNode(processed) || isCMSListNode(processed)) {
+          } else if (isHtmlNode(processed) || isEmbedNode(processed) || isLocaleListNode(processed) || isLinkNode(processed) || isListNode(processed)) {
             processed.style = resolvedStyle as ResponsiveStyleObject;
           }
         } else {

package/lib/server/jsonLoader.test.ts

@@ -66,7 +66,10 @@ describe('jsonLoader', () => {
     });
 
     test('returns cached config after set', () => {
-      const customConfig = { mobile: 500, tablet: 900 };
+      const customConfig = {
+        mobile: { breakpoint: 500, previewPoint: 375 },
+        tablet: { breakpoint: 900, previewPoint: 768 }
+      };
       setBreakpointConfig(customConfig);
       const config = getBreakpointConfig();
       expect(config).toEqual(customConfig);

package/lib/server/jsonLoader.ts

@@ -6,9 +6,9 @@
 import { existsSync, readdirSync } from 'fs';
 import type { z } from 'zod';
 import type { ComponentDefinition } from '../shared/types';
-import type { BreakpointConfig } from '../shared/breakpoints';
-import { DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
-import type { ResponsiveScales } from '../shared/responsiveScaling';
+import type { BreakpointConfig, BreakpointConfigInput, BreakpointEntry } from '../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS, normalizeBreakpointConfig } from '../shared/breakpoints';
+import type { ResponsiveScales, BreakpointScales } from '../shared/responsiveScaling';
 import { DEFAULT_RESPONSIVE_SCALES } from '../shared/responsiveScaling';
 import type { I18nConfig } from '../shared/types/components';
 import { DEFAULT_I18N_CONFIG, migrateI18nConfig } from '../shared/i18n';
@@ -211,26 +211,38 @@ export async function loadBreakpointConfig(): Promise<BreakpointConfig> {
   try {
     const configContent = await loadJSONFile(projectPaths.config());
     if (configContent) {
-      const config = parseJSON<{ breakpoints?: Record<string, number> }>(configContent);
-      
+      const config = parseJSON<{ breakpoints?: BreakpointConfigInput }>(configContent);
+
       if (config.breakpoints && typeof config.breakpoints === 'object') {
         // Preserve all breakpoints from config, filtering out invalid values
-        const breakpoints: BreakpointConfig = {};
+        const validInput: BreakpointConfigInput = {};
         for (const [key, value] of Object.entries(config.breakpoints)) {
           if (typeof value === 'number' && value > 0) {
-            breakpoints[key] = value;
+            // Legacy format: number
+            validInput[key] = value;
+          } else if (typeof value === 'object' && value !== null) {
+            // New format: object with breakpoint and optional previewPoint
+            const entry = value as BreakpointEntry;
+            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,
+              };
+            }
           }
         }
-        
-        // If we have valid breakpoints, return them; otherwise fall back to defaults
-        if (Object.keys(breakpoints).length > 0) {
-          return breakpoints;
+
+        // If we have valid breakpoints, return them normalized; otherwise fall back to defaults
+        if (Object.keys(validInput).length > 0) {
+          return normalizeBreakpointConfig(validInput);
         }
       }
     }
   } catch (error) {
   }
-  
+
   return { ...DEFAULT_BREAKPOINTS };
 }
 
@@ -251,8 +263,28 @@ export function setBreakpointConfig(config: BreakpointConfig): void {
   cachedBreakpoints = config;
 }
 
+/**
+ * Deep merge scale categories, preserving user-defined breakpoints
+ * while filling in missing values from defaults
+ */
+function mergeScaleCategory(
+  userScales: BreakpointScales | undefined,
+  defaultScales: BreakpointScales | undefined
+): BreakpointScales | undefined {
+  if (!userScales && !defaultScales) return undefined;
+  if (!userScales) return defaultScales ? { ...defaultScales } : undefined;
+  if (!defaultScales) return { ...userScales };
+
+  // User scales take precedence, but include defaults for breakpoints not specified
+  return {
+    ...defaultScales,
+    ...userScales,
+  };
+}
+
 /**
  * Load and validate responsive scales configuration from project.config.json
+ * Supports dynamic breakpoints - scales are keyed by breakpoint name
  */
 export async function loadResponsiveScalesConfig(): Promise<ResponsiveScales> {
   try {
@@ -261,10 +293,27 @@ export async function loadResponsiveScalesConfig(): Promise<ResponsiveScales> {
       const config = parseJSON<{ responsiveScales?: Partial<ResponsiveScales> }>(configContent);
 
       if (config.responsiveScales && typeof config.responsiveScales === 'object') {
-        // Merge with defaults to fill in missing values
+        // Deep merge scale categories to preserve user breakpoint definitions
+        // while filling in missing values from defaults
         const scales: ResponsiveScales = {
-          ...DEFAULT_RESPONSIVE_SCALES,
-          ...config.responsiveScales,
+          enabled: config.responsiveScales.enabled ?? DEFAULT_RESPONSIVE_SCALES.enabled,
+          baseReference: config.responsiveScales.baseReference ?? DEFAULT_RESPONSIVE_SCALES.baseReference,
+          fontSize: mergeScaleCategory(
+            config.responsiveScales.fontSize as BreakpointScales | undefined,
+            DEFAULT_RESPONSIVE_SCALES.fontSize
+          ),
+          padding: mergeScaleCategory(
+            config.responsiveScales.padding as BreakpointScales | undefined,
+            DEFAULT_RESPONSIVE_SCALES.padding
+          ),
+          margin: mergeScaleCategory(
+            config.responsiveScales.margin as BreakpointScales | undefined,
+            DEFAULT_RESPONSIVE_SCALES.margin
+          ),
+          gap: mergeScaleCategory(
+            config.responsiveScales.gap as BreakpointScales | undefined,
+            DEFAULT_RESPONSIVE_SCALES.gap
+          ),
         };
 
         return scales;

package/lib/server/services/configService.ts

@@ -6,9 +6,9 @@
  * the project.config.json file once and exposes typed sections.
  */
 
-import type { BreakpointConfig } from '../../shared/breakpoints';
-import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
-import type { ResponsiveScales } from '../../shared/responsiveScaling';
+import type { BreakpointConfig, BreakpointConfigInput, BreakpointEntry } from '../../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS, normalizeBreakpointConfig } from '../../shared/breakpoints';
+import type { ResponsiveScales, BreakpointScales } from '../../shared/responsiveScaling';
 import { DEFAULT_RESPONSIVE_SCALES } from '../../shared/responsiveScaling';
 import type { I18nConfig } from '../../shared/types/components';
 import type { LibrariesConfig, JSLibraryConfig, CSSLibraryConfig } from '../../shared/types/libraries';
@@ -28,7 +28,7 @@ export interface IconsConfig {
  * Raw project config structure from project.config.json
  */
 interface RawProjectConfig {
-  breakpoints?: Record<string, number>;
+  breakpoints?: BreakpointConfigInput;
   responsiveScales?: Partial<ResponsiveScales>;
   i18n?: unknown;
   icons?: IconsConfig;
@@ -84,23 +84,40 @@ export class ConfigService {
 
   /**
    * Get breakpoint configuration
-   * Returns validated breakpoints or defaults
+   * Returns validated and normalized breakpoints (always object format)
+   * Supports both legacy format { tablet: 1024 } and new format { tablet: { breakpoint: 1024, previewPoint: 768 } }
    */
   getBreakpoints(): BreakpointConfig {
     if (!this.config?.breakpoints || typeof this.config.breakpoints !== 'object') {
       return { ...DEFAULT_BREAKPOINTS };
     }
 
-    // Validate breakpoint values
-    const breakpoints: BreakpointConfig = {};
+    // Validate breakpoint values before normalization
+    const validInput: BreakpointConfigInput = {};
     for (const [key, value] of Object.entries(this.config.breakpoints)) {
       if (typeof value === 'number' && value > 0) {
-        breakpoints[key] = value;
+        // Legacy format: number
+        validInput[key] = value;
+      } else if (typeof value === 'object' && value !== null) {
+        // New format: object with breakpoint and optional previewPoint
+        const entry = value as BreakpointEntry;
+        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,
+          };
+        }
       }
     }
 
-    // Return validated breakpoints or defaults if none valid
-    return Object.keys(breakpoints).length > 0 ? breakpoints : { ...DEFAULT_BREAKPOINTS };
+    // Return normalized breakpoints or defaults if none valid
+    if (Object.keys(validInput).length === 0) {
+      return { ...DEFAULT_BREAKPOINTS };
+    }
+
+    return normalizeBreakpointConfig(validInput);
   }
 
   /**
@@ -115,18 +132,56 @@ export class ConfigService {
     return migrateI18nConfig(this.config.i18n);
   }
 
+  /**
+   * Deep merge scale categories, preserving user-defined breakpoints
+   * while filling in missing values from defaults
+   */
+  private mergeScaleCategory(
+    userScales: BreakpointScales | undefined,
+    defaultScales: BreakpointScales | undefined
+  ): BreakpointScales | undefined {
+    if (!userScales && !defaultScales) return undefined;
+    if (!userScales) return defaultScales ? { ...defaultScales } : undefined;
+    if (!defaultScales) return { ...userScales };
+
+    // User scales take precedence, but include defaults for breakpoints not specified
+    return {
+      ...defaultScales,
+      ...userScales,
+    };
+  }
+
   /**
    * Get responsive scales configuration
-   * Merges with defaults for any missing values
+   * Supports dynamic breakpoints - scales are keyed by breakpoint name
+   * Deep merges scale categories to preserve user breakpoint definitions
    */
   getResponsiveScales(): ResponsiveScales {
     if (!this.config?.responsiveScales || typeof this.config.responsiveScales !== 'object') {
       return { ...DEFAULT_RESPONSIVE_SCALES };
     }
 
+    const userScales = this.config.responsiveScales;
+
     return {
-      ...DEFAULT_RESPONSIVE_SCALES,
-      ...this.config.responsiveScales,
+      enabled: userScales.enabled ?? DEFAULT_RESPONSIVE_SCALES.enabled,
+      baseReference: userScales.baseReference ?? DEFAULT_RESPONSIVE_SCALES.baseReference,
+      fontSize: this.mergeScaleCategory(
+        userScales.fontSize as BreakpointScales | undefined,
+        DEFAULT_RESPONSIVE_SCALES.fontSize
+      ),
+      padding: this.mergeScaleCategory(
+        userScales.padding as BreakpointScales | undefined,
+        DEFAULT_RESPONSIVE_SCALES.padding
+      ),
+      margin: this.mergeScaleCategory(
+        userScales.margin as BreakpointScales | undefined,
+        DEFAULT_RESPONSIVE_SCALES.margin
+      ),
+      gap: this.mergeScaleCategory(
+        userScales.gap as BreakpointScales | undefined,
+        DEFAULT_RESPONSIVE_SCALES.gap
+      ),
     };
   }
 

package/lib/server/ssr/attributeBuilder.ts

@@ -7,6 +7,14 @@
  * Escape HTML special characters to prevent XSS
  */
 export function escapeHtml(unsafe: string): string {
+  // Handle non-string values defensively
+  if (typeof unsafe !== 'string') {
+    if (unsafe === null || unsafe === undefined) {
+      return '';
+    }
+    // Convert arrays/objects/numbers to string
+    unsafe = String(unsafe);
+  }
   return unsafe
     .replace(/&/g, '&')
     .replace(/</g, '&lt;')

package/lib/server/ssr/index.ts

@@ -14,7 +14,7 @@
  */
 
 // Main rendering functions
-export { renderPageSSR, extractPageMeta, generateMetaTags } from './ssrRenderer';
+export { renderPageSSR, extractPageMeta, generateMetaTags, buildComponentHTML } from './ssrRenderer';
 export type { CMSContext, PageMeta } from './ssrRenderer';
 export { generateSSRHTML } from './htmlGenerator';
 export type { SSRHTMLResult, GenerateSSRHTMLOptions } from './htmlGenerator';