meno-core 1.0.20 → 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/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

@@ -587,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;
         }

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
   });
 });

package/lib/shared/registry/nodeTypes/ListNodeType.ts

@@ -0,0 +1,186 @@
+/**
+ * Unified List Node Type Definition
+ * Renders children for each item from either component props or CMS collections.
+ *
+ * Replaces both the original 'list' and 'cms-list' node types with a unified
+ * implementation that uses sourceType to determine data source.
+ */
+
+import { z } from 'zod';
+import { createElement as h } from 'react';
+import { StyleValueSchema, InteractiveStylesSchema, IfConditionSchema } from '../../validation/schemas';
+import { createNodeType } from '../createNodeType';
+import { NODE_TYPE } from '../../constants';
+
+// Filter condition schema (shared with CMS list queries)
+const CMSFilterConditionSchema = z.object({
+  field: z.string(),
+  operator: z.enum(['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'contains', 'in']).optional(),
+  value: z.unknown(),
+});
+
+// Sort configuration schema
+const CMSSortConfigSchema = z.union([
+  z.object({
+    field: z.string(),
+    order: z.enum(['asc', 'desc']).optional(),
+  }),
+  z.array(z.object({
+    field: z.string(),
+    order: z.enum(['asc', 'desc']).optional(),
+  })),
+]);
+
+// Schema is the SINGLE source of truth
+const ListNodeSchemaInternal = z.object({
+  type: z.literal('list'),
+  /**
+   * Data source type:
+   * - 'prop': Read items from component props (default)
+   * - 'collection': Query items from CMS collection
+   */
+  sourceType: z.enum(['prop', 'collection']).default('prop'),
+  /**
+   * Source identifier:
+   * - For sourceType 'prop': Prop name (e.g., "items") or template expression (e.g., "{{category.items}}")
+   * - For sourceType 'collection': Collection name (e.g., "posts", "authors")
+   */
+  source: z.string(),
+  /**
+   * HTML element tag for the list container.
+   * Defaults to 'div'. Common alternatives: 'ul', 'ol', 'section', 'nav', 'article'.
+   */
+  tag: z.string().optional(),
+  label: z.string().optional(), // Custom label displayed in structure tree
+  if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+  style: StyleValueSchema.optional(),
+  interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
+  generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  /**
+   * Variable name for item in templates.
+   * - For sourceType 'prop': defaults to 'item'
+   * - For sourceType 'collection': defaults to singularized collection name
+   */
+  itemAs: z.string().optional(),
+
+  // Collection-only options (ignored when sourceType: 'prop')
+  /** Direct item IDs or template expression for referenced items (e.g., "{{post.authorId}}") */
+  items: z.union([z.string(), z.array(z.string())]).optional(),
+  /** Filter conditions */
+  filter: z.union([
+    CMSFilterConditionSchema,
+    z.array(CMSFilterConditionSchema),
+    z.record(z.unknown()),
+  ]).optional(),
+  /** Sort configuration */
+  sort: CMSSortConfigSchema.optional(),
+  /** Exclude the current CMS item from the list (useful for "related items" sections) */
+  excludeCurrentItem: z.boolean().optional(),
+  /**
+   * Emit item template for dynamic client-side rendering.
+   * When true, SSR emits a `<template data-meno-item>` element with unprocessed
+   * {{item.field}} placeholders. MenoFilter uses this to render items beyond
+   * the SSR'd limit dynamically.
+   */
+  emitTemplate: z.boolean().optional(),
+
+  // Shared options
+  /** Maximum number of items to return */
+  limit: z.number().optional(),
+  /** Number of items to skip */
+  offset: z.number().optional(),
+  /** Children are repeated for each item */
+  children: z.array(z.unknown()).optional(),
+}).passthrough();
+
+// TypeScript type inferred from schema
+export type ListNode = z.infer<typeof ListNodeSchemaInternal>;
+
+// Export schema for validation/schemas.ts
+export const ListNodeSchema = ListNodeSchemaInternal;
+
+export const ListNodeType = createNodeType({
+  type: NODE_TYPE.LIST,
+  displayName: 'List',
+  category: 'special',
+  schema: ListNodeSchemaInternal,
+
+  defaultValues: {
+    sourceType: 'prop',
+    source: '',
+    children: [],
+    style: { base: {} },
+  },
+
+  treeDisplay: {
+    icon: 'HTML_ELEMENT',
+    getLabel: (node) => {
+      const listNode = node as ListNode;
+      const sourceType = listNode.sourceType || 'prop';
+      const prefix = sourceType === 'collection' ? 'CMS List' : 'List';
+      return listNode.source ? `${prefix}: ${listNode.source}` : prefix;
+    },
+  },
+
+  clientRenderer: (node, context) => {
+    const listNode = node as ListNode;
+    const sourceType = listNode.sourceType || 'prop';
+    const isCollection = sourceType === 'collection';
+
+    // Different styling for collection vs prop lists
+    const bgColor = isCollection ? 'rgba(139, 92, 246, 0.1)' : 'rgba(59, 130, 246, 0.1)';
+    const borderColor = isCollection ? 'rgba(139, 92, 246, 0.5)' : 'rgba(59, 130, 246, 0.5)';
+    const textColor = isCollection ? '#8b5cf6' : '#3b82f6';
+    const label = isCollection ? 'CMS List' : 'List';
+
+    return h('div', {
+      key: context.key,
+      'data-list': 'true',
+      'data-source-type': sourceType,
+      'data-source': listNode.source,
+      style: {
+        padding: '8px 12px',
+        background: bgColor,
+        border: `1px dashed ${borderColor}`,
+        borderRadius: '4px',
+        color: textColor,
+        fontSize: '12px',
+      },
+    }, `[${label}: ${listNode.source || 'No source'}]`);
+  },
+
+  ssrRenderer: (_node, _context) => {
+    // Placeholder - actual SSR is handled by processList in ssrRenderer.ts
+    return '<!-- list rendered by processList -->';
+  },
+
+  capabilities: {
+    canHaveChildren: true,
+    requiresProps: ['source'],
+  },
+
+  editableFields: [
+    {
+      name: 'sourceType',
+      label: 'Source Type',
+      type: 'select',
+      required: false,
+      options: ['prop', 'collection'],
+    },
+    {
+      name: 'source',
+      label: 'Source',
+      type: 'string',
+      required: true,
+      placeholder: 'e.g., items or posts'
+    },
+    {
+      name: 'itemAs',
+      label: 'Item Variable',
+      type: 'string',
+      required: false,
+      placeholder: 'default: item (prop) or singular (collection)'
+    }
+  ],
+});

package/lib/shared/registry/nodeTypes/SlotMarkerType.ts

@@ -7,8 +7,14 @@ import { z } from 'zod';
 import { createNodeType } from '../createNodeType';
 
 // Schema is the SINGLE source of truth
+// Note: default uses z.any() to avoid circular reference with ComponentNodeSchema
+// Full validation is done via the schema in validation/schemas.ts
 const SlotMarkerSchemaInternal = z.object({
   type: z.literal('slot'),
+  default: z.union([
+    z.array(z.any()),
+    z.string(),
+  ]).optional(),
 }).passthrough();
 
 // TypeScript type inferred from schema