meno-core 1.0.19 → 1.0.21

package/lib/server/ssrRenderer.test.ts

@@ -1214,8 +1214,9 @@ describe("SSR Renderer - CMSList rendering", () => {
 
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: "list",
+        sourceType: "collection",
+        source: "blog-posts",
         children: []
       } as unknown as ComponentNode
     };
@@ -1224,7 +1225,7 @@ describe("SSR Renderer - CMSList rendering", () => {
     const result = await renderPageSSR(pageData, {}, '/', '');
 
     expect(result.html).toBe('');
-    expect(consoleSpy).toHaveBeenCalledWith('CMSList requires CMS service');
+    expect(consoleSpy).toHaveBeenCalledWith('List with sourceType "collection" requires CMS service');
 
     consoleSpy.mockRestore();
   });
@@ -1918,3 +1919,196 @@ describe("SSR Renderer - Interactive Styles", () => {
     });
   });
 });
+
+describe("SSR Renderer - List node rendering", () => {
+  test("should render children for each item in list prop", async () => {
+    // Component with list prop definition
+    const components: Record<string, ComponentDefinition> = {
+      ItemsList: {
+        component: {
+          interface: {
+            items: {
+              type: 'list',
+              itemSchema: {
+                title: { type: 'string' }
+              },
+              default: []
+            }
+          },
+          structure: {
+            type: "list",
+            source: "items",
+            children: [
+              { type: "node", tag: "div", children: ["{{item.title}}"] }
+            ]
+          } as any
+        }
+      }
+    };
+
+    const pageData: JSONPage = {
+      root: {
+        type: "component",
+        component: "ItemsList",
+        props: {
+          items: [
+            { title: "First Item" },
+            { title: "Second Item" },
+            { title: "Third Item" }
+          ]
+        }
+      } as any
+    };
+
+    const result = await renderPageSSR(pageData, components, '/', '');
+
+    expect(result.html).toContain('First Item');
+    expect(result.html).toContain('Second Item');
+    expect(result.html).toContain('Third Item');
+  });
+
+  test("should provide item context variables (itemIndex, itemFirst, itemLast)", async () => {
+    const components: Record<string, ComponentDefinition> = {
+      TagsList: {
+        component: {
+          interface: {
+            tags: {
+              type: 'list',
+              itemSchema: {
+                name: { type: 'string' }
+              },
+              default: []
+            }
+          },
+          structure: {
+            type: "list",
+            source: "tags",
+            itemAs: "tag",
+            children: [
+              { type: "node", tag: "span", attributes: { 'data-index': '{{tagIndex}}', 'data-first': '{{tagFirst}}', 'data-last': '{{tagLast}}' }, children: ["{{tag.name}}"] }
+            ]
+          } as any
+        }
+      }
+    };
+
+    const pageData: JSONPage = {
+      root: {
+        type: "component",
+        component: "TagsList",
+        props: {
+          tags: [
+            { name: "Tag1" },
+            { name: "Tag2" }
+          ]
+        }
+      } as any
+    };
+
+    const result = await renderPageSSR(pageData, components, '/', '');
+
+    expect(result.html).toContain('data-index="0"');
+    expect(result.html).toContain('data-index="1"');
+    expect(result.html).toContain('data-first="true"');
+    expect(result.html).toContain('data-last="true"');
+    expect(result.html).toContain('Tag1');
+    expect(result.html).toContain('Tag2');
+  });
+
+  test("should render empty when list prop is empty", async () => {
+    const components: Record<string, ComponentDefinition> = {
+      EmptyList: {
+        component: {
+          interface: {
+            items: {
+              type: 'list',
+              itemSchema: {
+                title: { type: 'string' }
+              },
+              default: []
+            }
+          },
+          structure: {
+            type: "list",
+            source: "items",
+            children: [
+              { type: "node", tag: "div", children: ["{{item.title}}"] }
+            ]
+          } as any
+        }
+      }
+    };
+
+    const pageData: JSONPage = {
+      root: {
+        type: "component",
+        component: "EmptyList",
+        props: {
+          items: []
+        }
+      } as any
+    };
+
+    const result = await renderPageSSR(pageData, components, '/', '');
+
+    // Should not render any list items
+    expect(result.html).not.toContain('item.');
+  });
+
+  test("should support nested lists", async () => {
+    const components: Record<string, ComponentDefinition> = {
+      CategoryList: {
+        component: {
+          interface: {
+            categories: {
+              type: 'list',
+              itemSchema: {
+                name: { type: 'string' }
+              },
+              default: []
+            }
+          },
+          structure: {
+            type: "list",
+            source: "categories",
+            itemAs: "category",
+            children: [
+              { type: "node", tag: "div", children: [
+                "{{category.name}}",
+                {
+                  type: "list",
+                  source: "{{category.items}}",
+                  itemAs: "subItem",
+                  children: [
+                    { type: "node", tag: "span", children: ["{{subItem.label}}"] }
+                  ]
+                }
+              ] }
+            ]
+          } as any
+        }
+      }
+    };
+
+    const pageData: JSONPage = {
+      root: {
+        type: "component",
+        component: "CategoryList",
+        props: {
+          categories: [
+            { name: "Category A", items: [{ label: "Item A1" }, { label: "Item A2" }] },
+            { name: "Category B", items: [{ label: "Item B1" }] }
+          ]
+        }
+      } as any
+    };
+
+    const result = await renderPageSSR(pageData, components, '/', '');
+
+    expect(result.html).toContain('Category A');
+    expect(result.html).toContain('Category B');
+    expect(result.html).toContain('Item A1');
+    expect(result.html).toContain('Item A2');
+    expect(result.html).toContain('Item B1');
+  });
+});

package/lib/server/validateStyleCoverage.ts

@@ -18,6 +18,10 @@ const missingStylesMap = new Map<string, MissingStyleReport>();
 
 /**
  * Check if a style property and value can be converted to a utility class
+ *
+ * All CSS properties now generate utility classes:
+ * - Known properties (in propertyMap) use standard prefixes
+ * - Unknown properties generate dynamic classes with auto-prefixes
  */
 function canGenerateClass(property: string, value: unknown): boolean {
   // Skip internal component properties that shouldn't be styles
@@ -30,11 +34,6 @@ function canGenerateClass(property: string, value: unknown): boolean {
     return true; // Skip reporting these - they're not CSS styles
   }
 
-  // Skip if property is not in our mapping
-  if (!propertyMap[property]) {
-    return false;
-  }
-
   // Skip if value is null, undefined, or empty - these don't need utility classes
   if (value === null || value === undefined || value === '') {
     return true;  // Skip reporting - nothing to convert
@@ -46,17 +45,15 @@ function canGenerateClass(property: string, value: unknown): boolean {
     return false;
   }
 
-  // Ignore complex values that shouldn't be utility classes
-  // But allow CSS var() functions since these can be converted to utility classes
+  // Object values cannot be converted to utility classes
   if (typeof value === 'object') {
     return false;
   }
 
-  // All string values are converted by the mapper - it handles:
-  // - CSS var() calls: "1px solid var(--border)" → "b-border"
-  // - Space-separated values: "0 4px 12px rgba(...)" → "bsh-0-4px-..."
-  // - Functions: "blur(8px)" → "flt-bl8"
-  // - Everything else via fallback: any value → "prefix-value"
+  // All CSS properties (including unknown ones) now generate utility classes:
+  // - Known properties use standard prefixes from propertyMap
+  // - Unknown properties generate dynamic classes registered in the dynamic registry
+  // - CSS var() calls, space-separated values, and functions are all handled
   return true;
 }
 
@@ -115,10 +112,10 @@ export function printMissingStyleWarnings(verbose = false): void {
 
   const warnings: string[] = [];
   warnings.push(
-    '\n⚠️  WARNING: Found styles without utility class mappings during build\n'
+    '\n⚠️  WARNING: Found styles that cannot be converted to utility classes\n'
   );
   warnings.push(
-    'These styles use complex values and remain as inline/component styles:\n'
+    'These styles use object values which cannot be serialized to class names:\n'
   );
 
   // Sort by frequency
@@ -144,9 +141,9 @@ export function printMissingStyleWarnings(verbose = false): void {
   }
 
   warnings.push('\n💡 Note:');
-  warnings.push('  • Simple functions (blur, translateY, scale, rotate, repeat) are converted automatically');
-  warnings.push('  • Complex values (gradients, rgba, calc with expressions) remain as inline styles');
-  warnings.push('  • These styles work correctly - this is just informational\n');
+  warnings.push('  • All string/number values are now converted to utility classes');
+  warnings.push('  • Object values (non-primitive) cannot be converted and will remain as-is');
+  warnings.push('  • This warning only appears for object-type style values\n');
 
   console.warn(warnings.join('\n'));
 }

package/lib/shared/breakpoints.test.ts

@@ -1,6 +1,14 @@
 import { describe, test, expect } from 'bun:test';
-import { getAllBreakpointNames, getBreakpointName, DEFAULT_BREAKPOINTS } from './breakpoints';
-import type { BreakpointConfig } from './breakpoints';
+import {
+  getAllBreakpointNames,
+  getBreakpointName,
+  DEFAULT_BREAKPOINTS,
+  normalizeBreakpointConfig,
+  getBreakpointValues,
+  getPreviewPointValues,
+  getBreakpointLabel,
+} from './breakpoints';
+import type { BreakpointConfig, BreakpointConfigInput } from './breakpoints';
 
 /**
  * breakpoints Tests
@@ -9,9 +17,118 @@ import type { BreakpointConfig } from './breakpoints';
 
 describe('breakpoints', () => {
   describe('DEFAULT_BREAKPOINTS', () => {
-    test('should have tablet and mobile breakpoints', () => {
-      expect(DEFAULT_BREAKPOINTS.tablet).toBe(1024);
-      expect(DEFAULT_BREAKPOINTS.mobile).toBe(540);
+    test('should have tablet and mobile breakpoints with new format', () => {
+      expect(DEFAULT_BREAKPOINTS.tablet.breakpoint).toBe(1024);
+      expect(DEFAULT_BREAKPOINTS.tablet.previewPoint).toBe(768);
+      expect(DEFAULT_BREAKPOINTS.mobile.breakpoint).toBe(540);
+      expect(DEFAULT_BREAKPOINTS.mobile.previewPoint).toBe(375);
+    });
+  });
+
+  describe('normalizeBreakpointConfig', () => {
+    test('should convert legacy number format to object format', () => {
+      const input: BreakpointConfigInput = {
+        tablet: 1024,
+        mobile: 540,
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tablet).toEqual({ breakpoint: 1024, previewPoint: 1024 });
+      expect(result.mobile).toEqual({ breakpoint: 540, previewPoint: 540 });
+    });
+
+    test('should preserve new object format', () => {
+      const input: BreakpointConfigInput = {
+        tablet: { breakpoint: 1024, previewPoint: 768 },
+        mobile: { breakpoint: 540, previewPoint: 375 },
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tablet).toEqual({ breakpoint: 1024, previewPoint: 768 });
+      expect(result.mobile).toEqual({ breakpoint: 540, previewPoint: 375 });
+    });
+
+    test('should handle mixed format', () => {
+      const input: BreakpointConfigInput = {
+        tablet: { breakpoint: 1024, previewPoint: 768 },
+        mobile: 540, // legacy
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tablet).toEqual({ breakpoint: 1024, previewPoint: 768 });
+      expect(result.mobile).toEqual({ breakpoint: 540, previewPoint: 540 });
+    });
+
+    test('should default previewPoint to breakpoint if not specified', () => {
+      const input: BreakpointConfigInput = {
+        tablet: { breakpoint: 1024 } as any, // Missing previewPoint
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tablet).toEqual({ breakpoint: 1024, previewPoint: 1024 });
+    });
+
+    test('should handle empty input', () => {
+      const result = normalizeBreakpointConfig({});
+      expect(result).toEqual({});
+    });
+
+    test('should preserve label when present', () => {
+      const input: BreakpointConfigInput = {
+        tablet: { breakpoint: 1024, previewPoint: 768, label: 'Tablet Landscape' },
+        mobile: { breakpoint: 540, previewPoint: 375, label: 'Phone' },
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tablet).toEqual({ breakpoint: 1024, previewPoint: 768, label: 'Tablet Landscape' });
+      expect(result.mobile).toEqual({ breakpoint: 540, previewPoint: 375, label: 'Phone' });
+    });
+
+    test('should not include label when not present', () => {
+      const input: BreakpointConfigInput = {
+        tablet: { breakpoint: 1024, previewPoint: 768 },
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tablet).toEqual({ breakpoint: 1024, previewPoint: 768 });
+      expect(result.tablet).not.toHaveProperty('label');
+    });
+
+    test('should handle mixed entries with and without labels', () => {
+      const input: BreakpointConfigInput = {
+        tabletLandscape: { breakpoint: 1024, previewPoint: 900, label: 'Tablet Landscape' },
+        tabletPortrait: { breakpoint: 768, previewPoint: 700 }, // no label
+        mobile: 540, // legacy format
+      };
+      const result = normalizeBreakpointConfig(input);
+
+      expect(result.tabletLandscape.label).toBe('Tablet Landscape');
+      expect(result.tabletPortrait).not.toHaveProperty('label');
+      expect(result.mobile).not.toHaveProperty('label');
+    });
+  });
+
+  describe('getBreakpointValues', () => {
+    test('should extract breakpoint values', () => {
+      const config: BreakpointConfig = {
+        tablet: { breakpoint: 1024, previewPoint: 768 },
+        mobile: { breakpoint: 540, previewPoint: 375 },
+      };
+      const result = getBreakpointValues(config);
+
+      expect(result).toEqual({ tablet: 1024, mobile: 540 });
+    });
+  });
+
+  describe('getPreviewPointValues', () => {
+    test('should extract preview point values', () => {
+      const config: BreakpointConfig = {
+        tablet: { breakpoint: 1024, previewPoint: 768 },
+        mobile: { breakpoint: 540, previewPoint: 375 },
+      };
+      const result = getPreviewPointValues(config);
+
+      expect(result).toEqual({ tablet: 768, mobile: 375 });
     });
   });
 
@@ -39,9 +156,9 @@ describe('breakpoints', () => {
 
     test('should handle custom breakpoints', () => {
       const customBreakpoints: BreakpointConfig = {
-        large: 1440,
-        medium: 960,
-        small: 480,
+        large: { breakpoint: 1440, previewPoint: 1200 },
+        medium: { breakpoint: 960, previewPoint: 800 },
+        small: { breakpoint: 480, previewPoint: 375 },
       };
       const names = getAllBreakpointNames(customBreakpoints);
       expect(names).toEqual(['base', 'large', 'medium', 'small']);
@@ -49,11 +166,11 @@ describe('breakpoints', () => {
 
     test('should sort custom breakpoints correctly', () => {
       const customBreakpoints: BreakpointConfig = {
-        xs: 320,
-        xl: 1920,
-        md: 768,
-        sm: 480,
-        lg: 1280,
+        xs: { breakpoint: 320, previewPoint: 320 },
+        xl: { breakpoint: 1920, previewPoint: 1920 },
+        md: { breakpoint: 768, previewPoint: 768 },
+        sm: { breakpoint: 480, previewPoint: 480 },
+        lg: { breakpoint: 1280, previewPoint: 1280 },
       };
       const names = getAllBreakpointNames(customBreakpoints);
       expect(names).toEqual(['base', 'xl', 'lg', 'md', 'sm', 'xs']);
@@ -65,15 +182,15 @@ describe('breakpoints', () => {
     });
 
     test('should handle single breakpoint', () => {
-      const names = getAllBreakpointNames({ mobile: 640 });
+      const names = getAllBreakpointNames({ mobile: { breakpoint: 640, previewPoint: 375 } });
       expect(names).toEqual(['base', 'mobile']);
     });
 
     test('should handle breakpoints with same values', () => {
       const customBreakpoints: BreakpointConfig = {
-        a: 1024,
-        b: 1024,
-        c: 540,
+        a: { breakpoint: 1024, previewPoint: 1024 },
+        b: { breakpoint: 1024, previewPoint: 768 },
+        c: { breakpoint: 540, previewPoint: 375 },
       };
       const names = getAllBreakpointNames(customBreakpoints);
       expect(names).toContain('base');
@@ -115,9 +232,9 @@ describe('breakpoints', () => {
 
     test('should work with custom breakpoints', () => {
       const customBreakpoints: BreakpointConfig = {
-        large: 1440,
-        medium: 960,
-        small: 480,
+        large: { breakpoint: 1440, previewPoint: 1200 },
+        medium: { breakpoint: 960, previewPoint: 800 },
+        small: { breakpoint: 480, previewPoint: 375 },
       };
 
       expect(getBreakpointName(1920, customBreakpoints)).toBe('base');
@@ -150,9 +267,9 @@ describe('breakpoints', () => {
 
     test('should find correct breakpoint when multiple are similar', () => {
       const customBreakpoints: BreakpointConfig = {
-        a: 1000,
-        b: 999,
-        c: 500,
+        a: { breakpoint: 1000, previewPoint: 1000 },
+        b: { breakpoint: 999, previewPoint: 999 },
+        c: { breakpoint: 500, previewPoint: 500 },
       };
 
       expect(getBreakpointName(1001, customBreakpoints)).toBe('base');
@@ -162,5 +279,75 @@ describe('breakpoints', () => {
       expect(getBreakpointName(500, customBreakpoints)).toBe('c');
       expect(getBreakpointName(499, customBreakpoints)).toBe('c');
     });
+
+    test('should use breakpoint value not previewPoint for determination', () => {
+      const customBreakpoints: BreakpointConfig = {
+        tablet: { breakpoint: 1024, previewPoint: 768 },
+        mobile: { breakpoint: 540, previewPoint: 375 },
+      };
+
+      // Should use breakpoint (1024) not previewPoint (768) for tablet threshold
+      expect(getBreakpointName(1024, customBreakpoints)).toBe('tablet');
+      expect(getBreakpointName(768, customBreakpoints)).toBe('tablet');
+      expect(getBreakpointName(1025, customBreakpoints)).toBe('base');
+
+      // Should use breakpoint (540) not previewPoint (375) for mobile threshold
+      expect(getBreakpointName(540, customBreakpoints)).toBe('mobile');
+      expect(getBreakpointName(375, customBreakpoints)).toBe('mobile');
+      expect(getBreakpointName(541, customBreakpoints)).toBe('tablet');
+    });
+  });
+
+  describe('getBreakpointLabel', () => {
+    test('should return "Desktop" for base', () => {
+      expect(getBreakpointLabel('base')).toBe('Desktop');
+      expect(getBreakpointLabel('base', DEFAULT_BREAKPOINTS)).toBe('Desktop');
+    });
+
+    test('should return custom label when set in config', () => {
+      const customBreakpoints: BreakpointConfig = {
+        tablet: { breakpoint: 1024, previewPoint: 768, label: 'Tablet Landscape' },
+        mobile: { breakpoint: 540, previewPoint: 375, label: 'Phone' },
+      };
+
+      expect(getBreakpointLabel('tablet', customBreakpoints)).toBe('Tablet Landscape');
+      expect(getBreakpointLabel('mobile', customBreakpoints)).toBe('Phone');
+    });
+
+    test('should auto-capitalize simple names when no label set', () => {
+      expect(getBreakpointLabel('tablet')).toBe('Tablet');
+      expect(getBreakpointLabel('mobile')).toBe('Mobile');
+    });
+
+    test('should convert camelCase to Title Case when no label set', () => {
+      const customBreakpoints: BreakpointConfig = {
+        tabletLandscape: { breakpoint: 1024, previewPoint: 900 },
+        tabletPortrait: { breakpoint: 768, previewPoint: 700 },
+        smallPhone: { breakpoint: 320, previewPoint: 320 },
+      };
+
+      expect(getBreakpointLabel('tabletLandscape', customBreakpoints)).toBe('Tablet Landscape');
+      expect(getBreakpointLabel('tabletPortrait', customBreakpoints)).toBe('Tablet Portrait');
+      expect(getBreakpointLabel('smallPhone', customBreakpoints)).toBe('Small Phone');
+    });
+
+    test('should handle breakpoint not in config', () => {
+      // If breakpoint doesn't exist in config, should still format the name
+      expect(getBreakpointLabel('unknownBreakpoint', DEFAULT_BREAKPOINTS)).toBe('Unknown Breakpoint');
+    });
+
+    test('should prefer label over auto-formatting', () => {
+      const customBreakpoints: BreakpointConfig = {
+        tabletLandscape: { breakpoint: 1024, previewPoint: 900, label: 'iPad Pro' },
+      };
+
+      // Should use the label, not auto-format "tabletLandscape"
+      expect(getBreakpointLabel('tabletLandscape', customBreakpoints)).toBe('iPad Pro');
+    });
+
+    test('should handle empty breakpoints config', () => {
+      expect(getBreakpointLabel('tablet', {})).toBe('Tablet');
+      expect(getBreakpointLabel('customBreakpoint', {})).toBe('Custom Breakpoint');
+    });
   });
 });