meno-core 1.0.19 → 1.0.21

package/lib/shared/breakpoints.ts

@@ -4,17 +4,94 @@
  * Supports dynamic breakpoints from project.config.json
  */
 
-export const DEFAULT_BREAKPOINTS = {
-  tablet: 1024,
-  mobile: 540,
-} as const;
+/**
+ * Extended breakpoint entry with separate CSS threshold and editor preview width
+ * - breakpoint: The CSS media query threshold (max-width value)
+ * - previewPoint: The width used in editor preview mode (defaults to breakpoint if not specified)
+ * - label: Optional display label for UI (e.g., "Tablet Landscape", "Phone")
+ */
+export interface BreakpointEntry {
+  breakpoint: number;
+  previewPoint: number;
+  label?: string;
+}
+
+/**
+ * Input format for breakpoint config - supports both legacy (number) and new (object) format
+ * Legacy: { tablet: 1024 }
+ * New: { tablet: { breakpoint: 1024, previewPoint: 768 } }
+ */
+export type BreakpointConfigInput = Record<string, number | BreakpointEntry>;
+
+/**
+ * Normalized breakpoint config - always uses object format
+ */
+export type BreakpointConfig = Record<string, BreakpointEntry>;
 
-// BreakpointConfig now supports any breakpoint names from config
-export type BreakpointConfig = Record<string, number>;
+/**
+ * Legacy format for backward compatibility (simple number values)
+ */
+export type LegacyBreakpointConfig = Record<string, number>;
 
 // BreakpointName is now a string to support dynamic breakpoints
 export type BreakpointName = string;
 
+export const DEFAULT_BREAKPOINTS: BreakpointConfig = {
+  tablet: { breakpoint: 1024, previewPoint: 768 },
+  mobile: { breakpoint: 540, previewPoint: 375 },
+} as const;
+
+/**
+ * Normalize a breakpoint config input to the full object format
+ * Converts legacy number format to object format
+ * If previewPoint is not specified, defaults to breakpoint value
+ */
+export function normalizeBreakpointConfig(
+  input: BreakpointConfigInput | LegacyBreakpointConfig
+): BreakpointConfig {
+  const result: BreakpointConfig = {};
+
+  for (const [name, value] of Object.entries(input)) {
+    if (typeof value === 'number') {
+      // Legacy format: number -> { breakpoint: value, previewPoint: value }
+      result[name] = { breakpoint: value, previewPoint: value };
+    } else if (typeof value === 'object' && value !== null) {
+      // New format: ensure both values exist, preserve label if present
+      result[name] = {
+        breakpoint: value.breakpoint,
+        previewPoint: value.previewPoint ?? value.breakpoint,
+        ...(value.label !== undefined && { label: value.label }),
+      };
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Get just the breakpoint values for CSS generation (media queries)
+ * Returns Record<string, number> with breakpoint values
+ */
+export function getBreakpointValues(config: BreakpointConfig): LegacyBreakpointConfig {
+  const result: LegacyBreakpointConfig = {};
+  for (const [name, entry] of Object.entries(config)) {
+    result[name] = entry.breakpoint;
+  }
+  return result;
+}
+
+/**
+ * Get just the preview point values for editor preview
+ * Returns Record<string, number> with previewPoint values
+ */
+export function getPreviewPointValues(config: BreakpointConfig): LegacyBreakpointConfig {
+  const result: LegacyBreakpointConfig = {};
+  for (const [name, entry] of Object.entries(config)) {
+    result[name] = entry.previewPoint;
+  }
+  return result;
+}
+
 /**
  * Get all breakpoint names from the breakpoint configuration
  * Always includes 'base' plus all keys from the config
@@ -25,17 +102,17 @@ export function getAllBreakpointNames(
 ): BreakpointName[] {
   // Base is always included first
   const names: BreakpointName[] = ['base'];
-  
-  // Get all breakpoint names from config and sort by value (descending)
+
+  // Get all breakpoint names from config and sort by breakpoint value (descending)
   // This ensures proper order: largest viewport first
   const breakpointEntries = Object.entries(breakpoints);
-  breakpointEntries.sort((a, b) => b[1] - a[1]); // Sort descending by value
-  
+  breakpointEntries.sort((a, b) => b[1].breakpoint - a[1].breakpoint); // Sort descending by breakpoint value
+
   // Add breakpoint names in sorted order
   for (const [name] of breakpointEntries) {
     names.push(name);
   }
-  
+
   return names;
 }
 
@@ -43,23 +120,53 @@ export function getAllBreakpointNames(
  * Get active breakpoint name based on viewport width
  * Returns the smallest breakpoint that the viewport width is less than or equal to
  * If viewport is larger than all breakpoints, returns 'base'
+ * Uses .breakpoint value for comparison (CSS threshold)
  */
 export function getBreakpointName(
   viewportWidth: number,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
 ): BreakpointName {
-  // Sort breakpoints by value (ascending) to find the smallest one that matches
+  // Sort breakpoints by breakpoint value (ascending) to find the smallest one that matches
   const breakpointEntries = Object.entries(breakpoints);
-  breakpointEntries.sort((a, b) => a[1] - b[1]); // Sort ascending by value
-  
+  breakpointEntries.sort((a, b) => a[1].breakpoint - b[1].breakpoint); // Sort ascending by breakpoint value
+
   // Find the smallest breakpoint that viewport width is <= to
-  for (const [name, value] of breakpointEntries) {
-    if (viewportWidth <= value) {
+  for (const [name, entry] of breakpointEntries) {
+    if (viewportWidth <= entry.breakpoint) {
       return name;
     }
   }
-  
+
   // If viewport is larger than all breakpoints, return 'base'
   return 'base';
 }
 
+/**
+ * Get display label for a breakpoint
+ * Priority:
+ * 1. Label from config (if set)
+ * 2. "Desktop" for 'base'
+ * 3. Auto-capitalized name (camelCase -> Title Case)
+ */
+export function getBreakpointLabel(
+  name: BreakpointName,
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+): string {
+  // Base always returns "Desktop"
+  if (name === 'base') {
+    return 'Desktop';
+  }
+
+  // Check for custom label in config
+  const entry = breakpoints[name];
+  if (entry?.label) {
+    return entry.label;
+  }
+
+  // Auto-format: camelCase -> Title Case
+  // e.g., "tabletLandscape" -> "Tablet Landscape"
+  return name
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim();
+}

package/lib/shared/constants.test.ts

@@ -130,7 +130,7 @@ describe('constants', () => {
       expect(NODE_TYPE.EMBED).toBe('embed');
       expect(NODE_TYPE.LINK).toBe('link');
       expect(NODE_TYPE.LOCALE_LIST).toBe('locale-list');
-      expect(NODE_TYPE.CMS_LIST).toBe('cms-list');
+      expect(NODE_TYPE.LIST).toBe('list');
     });
   });
 

package/lib/shared/constants.ts

@@ -35,6 +35,8 @@ export const API_ROUTES = {
   SAVE_COLORS: '/api/save-colors', // Save colors config
   // Page deletion
   DELETE_PAGE: '/api/delete-page', // Delete a page
+  // Component preview
+  COMPONENT_PREVIEW: '/api/component-preview', // Render component preview HTML
 } as const;
 
 export const HMR_ROUTE = '/hmr';
@@ -92,6 +94,8 @@ export const IFRAME_MESSAGE_TYPES = {
   REDO_REQUEST: 'REDO_REQUEST',
   TOGGLE_INTERACTIVITY_EDITOR: 'TOGGLE_INTERACTIVITY_EDITOR',
   SET_BREAKPOINT: 'SET_BREAKPOINT',
+  PAGE_DATA_PREVIEW: 'PAGE_DATA_PREVIEW', // Editor → Iframe for component hover preview
+  PAGE_DATA_PREVIEW_REVERT: 'PAGE_DATA_PREVIEW_REVERT', // Editor → Iframe to revert preview
 } as const;
 
 // Component node type constants
@@ -102,7 +106,7 @@ export const NODE_TYPE = {
   EMBED: 'embed',
   LINK: 'link',
   LOCALE_LIST: 'locale-list',
-  CMS_LIST: 'cms-list',
+  LIST: 'list',
 } as const;
 
 export type NodeType = typeof NODE_TYPE[keyof typeof NODE_TYPE];

package/lib/shared/cssGeneration.test.ts

@@ -40,6 +40,14 @@ describe('extractUtilityClassesFromHTML', () => {
     const classes = extractUtilityClassesFromHTML(html);
     expect(classes.has('bgi-linear-gradient(#0000,-#0f1442-94%)')).toBe(true);
   });
+
+  test('extracts l- (left) classes correctly without treating as responsive prefix', () => {
+    const html = '<div class="l-10px l-auto l-0"></div>';
+    const classes = extractUtilityClassesFromHTML(html);
+    expect(classes.has('l-10px')).toBe(true);
+    expect(classes.has('l-auto')).toBe(true);
+    expect(classes.has('l-0')).toBe(true);
+  });
 });
 
 describe('generateUtilityCSS end-to-end', () => {
@@ -56,6 +64,15 @@ describe('generateUtilityCSS end-to-end', () => {
     const css = generateUtilityCSS(classes);
     expect(css).toContain('background-image: linear-gradient(#000, #fff)');
   });
+
+  test('generates CSS for l- (left) classes from HTML', () => {
+    const html = '<div class="l-10px l-auto l-0"></div>';
+    const classes = extractUtilityClassesFromHTML(html);
+    const css = generateUtilityCSS(classes);
+    expect(css).toContain('left: 10px');
+    expect(css).toContain('left: auto');
+    expect(css).toContain('left: 0');
+  });
 });
 
 describe('cssGeneration', () => {

package/lib/shared/cssGeneration.ts

@@ -5,9 +5,9 @@
  */
 
 import { prefixToCSSProperty, propertyMap } from './utilityClassConfig';
-import { getStyleValue } from './styleValueRegistry';
-import type { BreakpointConfig } from './breakpoints';
-import { DEFAULT_BREAKPOINTS } from './breakpoints';
+import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegistry';
+import type { BreakpointConfig, LegacyBreakpointConfig } from './breakpoints';
+import { DEFAULT_BREAKPOINTS, getBreakpointValues } from './breakpoints';
 import type { ResponsiveScales } from './responsiveScaling';
 import { scalePropertyValue } from './responsiveScaling';
 import type { InteractiveStyles, StyleObject, ResponsiveStyleObject, StyleValue } from './types/styles';
@@ -67,6 +67,13 @@ const utilityClassRules: Record<string, string> = {
   'us-text': 'user-select: text;',
   'us-all': 'user-select: all;',
 
+  // White space
+  'whs-normal': 'white-space: normal;',
+  'whs-nowrap': 'white-space: nowrap;',
+  'whs-pre': 'white-space: pre;',
+  'whs-pre-wrap': 'white-space: pre-wrap;',
+  'whs-pre-line': 'white-space: pre-line;',
+
   // Shadow presets
   'sh-0': 'box-shadow: none;',
   'sh-1': 'box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);',
@@ -132,11 +139,25 @@ export function generateRuleForClass(className: string): string | null {
     }
   }
 
-  if (!prefix || !classValue) return null;
+  if (!prefix || !classValue) {
+    // Check dynamic registry for classes with unknown prefixes
+    const dynamicStyle = getDynamicStyle(className);
+    if (dynamicStyle) {
+      return `${dynamicStyle.property}: ${dynamicStyle.value};`;
+    }
+    return null;
+  }
 
   // Look up the CSS property from prefix
   const cssProp = prefixToCSSProperty[prefix];
-  if (!cssProp) return null;
+  if (!cssProp) {
+    // Check dynamic registry for classes with unknown prefixes
+    const dynamicStyle = getDynamicStyle(className);
+    if (dynamicStyle) {
+      return `${dynamicStyle.property}: ${dynamicStyle.value};`;
+    }
+    return null;
+  }
 
   // Handle border-side classes (bt-, bb-, bl-, border-r-) with special syntax FIRST
   // Generate ONLY width and style, NOT color - allows bc- to control color independently
@@ -314,13 +335,16 @@ export function generateUtilityCSS(
   const baseClasses = new Set<string>();
   const autoResponsiveClasses = new Set<string>(); // Classes that should get auto-scaling
 
+  // Extract breakpoint values for CSS media queries
+  const breakpointValues = getBreakpointValues(breakpoints);
+
   // Create a map for responsive breakpoint classes
   // Map from prefix (e.g., 't', 'm') to the class name and breakpoint info
   type BreakpointClassMap = Record<string, { classes: Set<string>; breakpointName: string; value: number }>;
   const responsiveClasses: BreakpointClassMap = {};
 
   // Initialize responsive class sets for each breakpoint
-  for (const [breakpointName, breakpointValue] of Object.entries(breakpoints)) {
+  for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
     // Generate prefix from breakpoint name, avoiding conflicts with property prefixes
     // For 'mobile', use 'mob' to avoid conflict with 'margin' (m-), etc.
     let prefix = breakpointName.charAt(0).toLowerCase();
@@ -436,9 +460,10 @@ export function generateUtilityCSS(
       const escapedClassName = escapeCSSClassName(className);
 
       // Generate scaled rules for each breakpoint
-      for (const [breakpointName, breakpointValue] of Object.entries(breakpoints)) {
-        const scaleType = breakpointName === 'mobile' ? 'mobile' : 'tablet';
-        const scale = scaleConfig[scaleType];
+      for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
+        // Use the actual breakpoint name to look up the scale
+        // This allows custom breakpoints like 'small', 'large', etc. to have their own scales
+        const scale = scaleConfig[breakpointName];
         if (!scale) continue;
 
         const scaledValue = scalePropertyValue(propValue.value, baseRef, scale);
@@ -530,6 +555,8 @@ export function extractUtilityClassesFromHTML(html: string): Set<string> {
     'o-h', 'o-a', 'o-s', 'o-v',
     // Cursor
     'cursor-pointer', 'cursor-default',
+    // White space
+    'whs-normal', 'whs-nowrap', 'whs-pre', 'whs-pre-wrap', 'whs-pre-line',
   ]);
 
   while ((match = classRegex.exec(html)) !== null) {
@@ -560,9 +587,10 @@ export function extractUtilityClassesFromHTML(html: string): Set<string> {
       else if (className.length > 2 && className.charAt(1) === '-' && className.match(/^[a-z]-/)) {
         const firstChar = className.charAt(0);
         // Only treat as responsive prefix if it looks like a breakpoint indicator
-        // Common breakpoint prefixes: t (tablet), s (small), l (large), x (extra), u (ultra)
+        // Common breakpoint prefixes: t (tablet), s (small), x (extra), u (ultra)
         // NOTE: We exclude 'm' because it conflicts with margin prefix - use 'mob' instead
-        if (['t', 's', 'l', 'x', 'u'].includes(firstChar)) {
+        // NOTE: We exclude 'l' because it conflicts with left property prefix - use 'lg' instead
+        if (['t', 's', 'x', 'u'].includes(firstChar)) {
           classToCheck = className.substring(2); // Remove responsive prefix
           hasResponsivePrefix = true;
         }
@@ -594,6 +622,12 @@ export function extractUtilityClassesFromHTML(html: string): Set<string> {
           }
         }
       }
+
+      // Check if it's a dynamic class (registered in the dynamic registry)
+      // This handles classes for properties not in propertyMap
+      if (!classes.has(className) && isDynamicClass(className)) {
+        classes.add(className);
+      }
     }
   }
 
@@ -673,6 +707,9 @@ export function generateInteractiveCSS(
 ): string {
   const css: string[] = [];
 
+  // Extract breakpoint values for CSS media queries
+  const breakpointValues = getBreakpointValues(breakpoints);
+
   for (const rule of interactiveStyles) {
     const { prefix, postfix, style } = rule;
 
@@ -692,7 +729,7 @@ export function generateInteractiveCSS(
       }
 
       // Breakpoint styles (sorted by value descending)
-      const sortedBreakpoints = Object.entries(breakpoints).sort(
+      const sortedBreakpoints = Object.entries(breakpointValues).sort(
         ([, a], [, b]) => b - a
       );
 

package/lib/shared/index.ts

@@ -114,3 +114,6 @@ export * from './globalTemplateContext';
 
 // CMS query parsing utilities
 export * from './cmsQueryParser';
+
+// Prop resolution utilities
+export { resolvePropsFromDefinition, isRichTextMarker, richTextMarkerToHtml } from './propResolver';

package/lib/shared/itemTemplateUtils.test.ts

@@ -298,10 +298,52 @@ describe('itemTemplateUtils', () => {
       });
     });
 
-    it('should not process arrays (leave them as-is)', () => {
+    it('should process arrays with template strings', () => {
       const props = { items: ['{{item.title}}', '{{item.url}}'] };
       const result = processItemPropsTemplate(props, baseContext);
-      expect(result).toEqual({ items: ['{{item.title}}', '{{item.url}}'] });
+      expect(result).toEqual({ items: ['Test Title', '/test-url'] });
+    });
+
+    it('should process nested arrays', () => {
+      const props = {
+        outer: [
+          ['{{item.title}}', 'static'],
+          ['{{item.url}}'],
+        ]
+      };
+      const result = processItemPropsTemplate(props, baseContext);
+      expect(result).toEqual({
+        outer: [
+          ['Test Title', 'static'],
+          ['/test-url'],
+        ]
+      });
+    });
+
+    it('should process arrays containing objects with templates', () => {
+      const props = {
+        items: [
+          { label: '{{item.title}}', href: '{{item.url}}' },
+          { label: 'Static', href: '/static' },
+        ]
+      };
+      const result = processItemPropsTemplate(props, baseContext);
+      expect(result).toEqual({
+        items: [
+          { label: 'Test Title', href: '/test-url' },
+          { label: 'Static', href: '/static' },
+        ]
+      });
+    });
+
+    it('should handle mixed array content', () => {
+      const props = {
+        tags: ['{{item.title}}', 42, true, null, { nested: '{{item.url}}' }]
+      };
+      const result = processItemPropsTemplate(props, baseContext);
+      expect(result).toEqual({
+        tags: ['Test Title', 42, true, null, { nested: '/test-url' }]
+      });
     });
 
     it('should handle mixed content', () => {

package/lib/shared/itemTemplateUtils.ts

@@ -217,8 +217,21 @@ export function processItemPropsTemplate(
   for (const [key, value] of Object.entries(props)) {
     if (typeof value === 'string' && hasItemTemplates(value)) {
       result[key] = processItemTemplate(value, ctx, resolveValue);
-    } else if (value && typeof value === 'object' && !Array.isArray(value)) {
-      // Recursively process nested objects (but not arrays or null)
+    } else if (Array.isArray(value)) {
+      // Process arrays - recursively handle each element
+      result[key] = value.map(item => {
+        if (typeof item === 'string' && hasItemTemplates(item)) {
+          return processItemTemplate(item, ctx, resolveValue);
+        } else if (item && typeof item === 'object' && !Array.isArray(item)) {
+          return processItemPropsTemplate(item as Record<string, unknown>, ctx, resolveValue);
+        } else if (Array.isArray(item)) {
+          // Handle nested arrays recursively
+          return processItemPropsTemplate({ _arr: item }, ctx, resolveValue)._arr;
+        }
+        return item;
+      });
+    } else if (value && typeof value === 'object') {
+      // Recursively process nested objects (not arrays or null)
       result[key] = processItemPropsTemplate(value as Record<string, unknown>, ctx, resolveValue);
     } else {
       result[key] = value;

package/lib/shared/nodeUtils.ts

@@ -3,7 +3,11 @@
  * Provides helper functions for working with ComponentNode types
  */
 
-import type { ComponentNode, ComponentInstanceNode, HtmlNode, SlotMarker, EmbedNode, LinkNode, LocaleListNode, CMSListNode, ComponentDefinition, StructuredComponentDefinition } from './types';
+import type { ComponentNode, ComponentInstanceNode, HtmlNode, SlotMarker, EmbedNode, LinkNode, LocaleListNode, ComponentDefinition, StructuredComponentDefinition } from './types';
+import type { ListNode } from './registry/nodeTypes/ListNodeType';
+
+// For backward compatibility during migration
+type CMSListNode = ListNode;
 import { NODE_TYPE } from './constants';
 
 /**
@@ -122,9 +126,24 @@ export function isLocaleListNode(node: ComponentNode | null | undefined): node i
 
 /**
  * Type guard to check if a node is a CMS list node
+ * @deprecated Use isListNode() and check sourceType === 'collection' instead.
+ * Kept for backward compatibility during migration.
+ */
+export function isCMSListNode(node: unknown): node is ListNode {
+  if (node === null || typeof node !== 'object') return false;
+  const n = node as Record<string, unknown>;
+  // Support both old cms-list type and new list with sourceType: 'collection'
+  return n.type === 'cms-list' || (n.type === NODE_TYPE.LIST && n.sourceType === 'collection');
+}
+
+/**
+ * Type guard to check if a node is a list node (unified type)
  */
-export function isCMSListNode(node: unknown): node is CMSListNode {
-  return node !== null && typeof node === 'object' && (node as Record<string, unknown>).type === NODE_TYPE.CMS_LIST;
+export function isListNode(node: unknown): node is ListNode {
+  if (node === null || typeof node !== 'object') return false;
+  const n = node as Record<string, unknown>;
+  // Support both old cms-list type (for migration) and new list type
+  return n.type === NODE_TYPE.LIST || n.type === 'cms-list';
 }
 
 /**
@@ -133,7 +152,7 @@ export function isCMSListNode(node: unknown): node is CMSListNode {
 export function isValidNodeType(type: string): type is typeof NODE_TYPE[keyof typeof NODE_TYPE] {
   return type === NODE_TYPE.NODE || type === NODE_TYPE.COMPONENT || type === NODE_TYPE.SLOT ||
     type === NODE_TYPE.EMBED || type === NODE_TYPE.LINK || type === NODE_TYPE.LOCALE_LIST ||
-    type === NODE_TYPE.CMS_LIST;
+    type === NODE_TYPE.LIST || type === 'cms-list'; // 'cms-list' supported for migration
 }
 
 /**

package/lib/shared/registry/BaseNodeTypeRegistry.test.ts

@@ -42,7 +42,7 @@ describe('BaseNodeTypeRegistry', () => {
   describe('registerAll', () => {
     it('should register multiple node type definitions', () => {
       registry.registerAll(builtInNodeTypes);
-      expect(registry.size).toBe(7);
+      expect(registry.size).toBe(7);  // 7 node types after cms-list merged into list
       expect(registry.has(NODE_TYPE.NODE)).toBe(true);
       expect(registry.has(NODE_TYPE.COMPONENT)).toBe(true);
       expect(registry.has(NODE_TYPE.EMBED)).toBe(true);
@@ -185,6 +185,6 @@ describe('globalNodeTypeManager', () => {
     registerBuiltInNodeTypes();
     expect(globalNodeTypeManager.has(NODE_TYPE.NODE)).toBe(true);
     expect(globalNodeTypeManager.has(NODE_TYPE.EMBED)).toBe(true);
-    expect(globalNodeTypeManager.getAll().length).toBe(7);
+    expect(globalNodeTypeManager.getAll().length).toBe(7);  // 7 node types after cms-list merged into list
   });
 });