meno-core 1.0.19 → 1.0.21

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

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

@@ -16,7 +16,8 @@ import { SlotMarkerType, SlotMarkerSchema, type SlotMarker } from './SlotMarkerT
 import { EmbedNodeType, EmbedNodeSchema, type EmbedNode } from './EmbedNodeType';
 import { LinkNodeType, LinkNodeSchema, type LinkNode } from './LinkNodeType';
 import { LocaleListNodeType, LocaleListNodeSchema, type LocaleListNode } from './LocaleListNodeType';
-import { CMSListNodeType, CMSListNodeSchema, type CMSListNode } from './CMSListNodeType';
+import { ListNodeType, ListNodeSchema, type ListNode } from './ListNodeType';
+
 /**
  * All built-in node type definitions
  * Type assertion needed because TypeScript sees each as a specific generic type
@@ -28,7 +29,7 @@ export const builtInNodeTypes: NodeTypeDefinition[] = [
   EmbedNodeType as NodeTypeDefinition,
   LinkNodeType as NodeTypeDefinition,
   LocaleListNodeType as NodeTypeDefinition,
-  CMSListNodeType as NodeTypeDefinition,
+  ListNodeType as NodeTypeDefinition,
 ];
 
 /**
@@ -41,7 +42,7 @@ export const nodeSchemas = {
   embed: EmbedNodeSchema,
   link: LinkNodeSchema,
   localeList: LocaleListNodeSchema,
-  cmsList: CMSListNodeSchema,
+  list: ListNodeSchema,
 };
 
 /**
@@ -59,7 +60,7 @@ export { SlotMarkerType, SlotMarkerSchema, type SlotMarker } from './SlotMarkerT
 export { EmbedNodeType, EmbedNodeSchema, type EmbedNode } from './EmbedNodeType';
 export { LinkNodeType, LinkNodeSchema, type LinkNode } from './LinkNodeType';
 export { LocaleListNodeType, LocaleListNodeSchema, type LocaleListNode } from './LocaleListNodeType';
-export { CMSListNodeType, CMSListNodeSchema, type CMSListNode } from './CMSListNodeType';
+export { ListNodeType, ListNodeSchema, type ListNode } from './ListNodeType';
 
 /**
  * Discriminated union of all component node types
@@ -72,4 +73,4 @@ export type ComponentNode =
   | EmbedNode
   | LinkNode
   | LocaleListNode
-  | CMSListNode;
+  | ListNode;

package/lib/shared/responsiveScaling.test.ts

@@ -9,6 +9,7 @@ import {
   DEFAULT_RESPONSIVE_SCALES,
   type ResponsiveScales,
   type CSSPropertyType,
+  type BreakpointScales,
 } from './responsiveScaling';
 
 describe('responsiveScaling', () => {
@@ -92,6 +93,26 @@ describe('responsiveScaling', () => {
       const scale = getScaleMultiplier(scales, 'fontSize', 'mobile');
       expect(scale).toBeNull();
     });
+
+    test('should support custom breakpoint names', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { large: 0.95, tablet: 0.88, small: 0.82, mobile: 0.75 }
+      };
+      expect(getScaleMultiplier(scales, 'fontSize', 'large')).toBe(0.95);
+      expect(getScaleMultiplier(scales, 'fontSize', 'small')).toBe(0.82);
+    });
+
+    test('should return null for undefined custom breakpoint', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { tablet: 0.88, mobile: 0.75 }
+      };
+      expect(getScaleMultiplier(scales, 'fontSize', 'large')).toBeNull();
+      expect(getScaleMultiplier(scales, 'fontSize', 'small')).toBeNull();
+    });
   });
 
   describe('parseMultiValue', () => {
@@ -239,6 +260,72 @@ describe('responsiveScaling', () => {
       expect(result.tablet).toBeDefined();
       expect(result.mobile).toBeUndefined();
     });
+
+    test('should calculate values for custom breakpoints', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { large: 0.95, tablet: 0.88, small: 0.82, mobile: 0.75 }
+      };
+      const result = getResponsiveValues(
+        '67px',
+        'fontSize',
+        scales,
+        ['large', 'tablet', 'small', 'mobile']
+      );
+      expect(result.base).toBe('67px');
+      expect(result.large).toBe('64px');  // 67 + (67-16) * (0.95-1) = 67 - 2.55 ≈ 64
+      expect(result.tablet).toBe('61px'); // 0.88 scale
+      expect(result.small).toBe('58px');  // 67 + (67-16) * (0.82-1) = 67 - 9.18 ≈ 58
+      expect(result.mobile).toBe('54px'); // 0.75 scale
+    });
+
+    test('should only calculate for specified breakpoints', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { large: 0.95, tablet: 0.88, small: 0.82, mobile: 0.75 }
+      };
+      // Only request large and small breakpoints
+      const result = getResponsiveValues(
+        '67px',
+        'fontSize',
+        scales,
+        ['large', 'small']
+      );
+      expect(result.base).toBe('67px');
+      expect(result.large).toBe('64px');
+      expect(result.small).toBe('58px');
+      expect(result.tablet).toBeUndefined();
+      expect(result.mobile).toBeUndefined();
+    });
+
+    test('should gracefully handle breakpoints without scale config', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { tablet: 0.88, mobile: 0.75 }
+      };
+      // Request breakpoints that don't have scales configured
+      const result = getResponsiveValues(
+        '67px',
+        'fontSize',
+        scales,
+        ['large', 'tablet', 'small', 'mobile']
+      );
+      expect(result.base).toBe('67px');
+      expect(result.large).toBeUndefined();  // No scale configured
+      expect(result.tablet).toBe('61px');
+      expect(result.small).toBeUndefined();  // No scale configured
+      expect(result.mobile).toBe('54px');
+    });
+
+    test('should default to tablet/mobile breakpoints for backward compatibility', () => {
+      const scales = { ...DEFAULT_RESPONSIVE_SCALES, enabled: true };
+      // No breakpointNames argument - should default to ['tablet', 'mobile']
+      const result = getResponsiveValues('67px', 'fontSize', scales);
+      expect(Object.keys(result).sort()).toEqual(['base', 'mobile', 'tablet']);
+    });
   });
 
   describe('DEFAULT_RESPONSIVE_SCALES', () => {

package/lib/shared/responsiveScaling.ts

@@ -4,26 +4,21 @@
  * using configured scale multipliers
  */
 
+/**
+ * Scale configuration for a CSS property category
+ * Keys are breakpoint names (e.g., 'tablet', 'mobile', 'small')
+ * Values are scale multipliers (e.g., 0.88, 0.75)
+ */
+export type BreakpointScales = Record<string, number>;
+
 export interface ResponsiveScales {
   enabled: boolean;
   baseReference: number;
-  fontSize?: {
-    tablet?: number;
-    mobile?: number;
-  };
-  padding?: {
-    tablet?: number;
-    mobile?: number;
-  };
-  margin?: {
-    tablet?: number;
-    mobile?: number;
-  };
-  gap?: {
-    tablet?: number;
-    mobile?: number;
-  };
-  [key: string]: any;
+  fontSize?: BreakpointScales;
+  padding?: BreakpointScales;
+  margin?: BreakpointScales;
+  gap?: BreakpointScales;
+  [key: string]: boolean | number | BreakpointScales | undefined;
 }
 
 export type CSSPropertyType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'rowGap' | 'columnGap';
@@ -73,16 +68,19 @@ export function calculateResponsiveValue(
 
 /**
  * Get the scale multiplier for a specific property and breakpoint
+ * @param scales - The responsive scales configuration
+ * @param property - The CSS property type (e.g., 'fontSize', 'padding')
+ * @param breakpoint - The breakpoint name (e.g., 'tablet', 'mobile', 'small')
  */
 export function getScaleMultiplier(
   scales: ResponsiveScales,
   property: CSSPropertyType,
-  breakpoint: 'tablet' | 'mobile'
+  breakpoint: string
 ): number | null {
   const category = getScaleCategory(property);
   if (!category || !scales[category]) return null;
 
-  const scaleConfig = scales[category] as Record<string, number> | undefined;
+  const scaleConfig = scales[category] as BreakpointScales | undefined;
   return scaleConfig?.[breakpoint] ?? null;
 }
 
@@ -143,11 +141,18 @@ export function scalePropertyValue(
 /**
  * Get responsive values for all breakpoints
  * Returns object with calculated values for each breakpoint
+ *
+ * @param baseValue - The base CSS value (e.g., '67px')
+ * @param property - The CSS property type (e.g., 'fontSize')
+ * @param scales - The responsive scales configuration
+ * @param breakpointNames - Optional array of breakpoint names to calculate values for.
+ *                          If not provided, defaults to ['tablet', 'mobile'] for backward compatibility.
  */
 export function getResponsiveValues(
   baseValue: string,
   property: CSSPropertyType,
-  scales: ResponsiveScales
+  scales: ResponsiveScales,
+  breakpointNames?: string[]
 ): Record<string, string | null> {
   if (!scales.enabled) {
     return { base: baseValue };
@@ -159,16 +164,15 @@ export function getResponsiveValues(
 
   const baseRef = scales.baseReference || 16;
 
-  // Calculate tablet value
-  const tabletScale = getScaleMultiplier(scales, property, 'tablet');
-  if (tabletScale !== null) {
-    result.tablet = scalePropertyValue(baseValue, baseRef, tabletScale);
-  }
+  // Use provided breakpoint names or default to tablet/mobile for backward compatibility
+  const breakpoints = breakpointNames ?? ['tablet', 'mobile'];
 
-  // Calculate mobile value
-  const mobileScale = getScaleMultiplier(scales, property, 'mobile');
-  if (mobileScale !== null) {
-    result.mobile = scalePropertyValue(baseValue, baseRef, mobileScale);
+  // Calculate value for each breakpoint
+  for (const breakpointName of breakpoints) {
+    const scale = getScaleMultiplier(scales, property, breakpointName);
+    if (scale !== null) {
+      result[breakpointName] = scalePropertyValue(baseValue, baseRef, scale);
+    }
   }
 
   return result;

package/lib/shared/responsiveStyleUtils.test.ts

@@ -11,8 +11,8 @@ import type { BreakpointConfig } from './breakpoints';
 
 describe('responsiveStyleUtils', () => {
   const breakpoints: BreakpointConfig = {
-    tablet: 1024,
-    mobile: 540,
+    tablet: { breakpoint: 1024, previewPoint: 768 },
+    mobile: { breakpoint: 540, previewPoint: 375 },
   };
 
   describe('mergeResponsiveStyles', () => {
@@ -110,9 +110,9 @@ describe('responsiveStyleUtils', () => {
 
     test('should handle custom breakpoints', () => {
       const customBreakpoints: BreakpointConfig = {
-        small: 480,
-        medium: 768,
-        large: 1200,
+        small: { breakpoint: 480, previewPoint: 375 },
+        medium: { breakpoint: 768, previewPoint: 768 },
+        large: { breakpoint: 1200, previewPoint: 1200 },
       };
 
       const style: ResponsiveStyleObject = {
@@ -239,8 +239,8 @@ describe('responsiveStyleUtils', () => {
 
     test('should work with custom breakpoints', () => {
       const customBreakpoints: BreakpointConfig = {
-        small: 480,
-        large: 1920,
+        small: { breakpoint: 480, previewPoint: 375 },
+        large: { breakpoint: 1920, previewPoint: 1920 },
       };
 
       expect(breakpointToViewportWidth('small', customBreakpoints)).toBe(480);

package/lib/shared/responsiveStyleUtils.ts

@@ -5,7 +5,7 @@
 
 import type { ResponsiveStyleObject, StyleObject, StyleValue } from './types';
 import type { BreakpointConfig, BreakpointName } from './breakpoints';
-import { DEFAULT_BREAKPOINTS, getBreakpointName } from './breakpoints';
+import { DEFAULT_BREAKPOINTS, getBreakpointName, getBreakpointValues } from './breakpoints';
 import { isResponsiveStyle } from './styleUtils';
 
 /**
@@ -31,13 +31,16 @@ export function mergeResponsiveStyles(
 ): StyleObject {
   // Start with base styles
   const merged: StyleObject = { ...(responsiveStyle.base || {}) };
-  
+
+  // Extract breakpoint values for comparisons
+  const breakpointValues = getBreakpointValues(breakpoints);
+
   if (strategy === 'all') {
     // Merge all breakpoints in order: base → breakpoints sorted by value descending
-    // Get all breakpoint names and sort by value (descending)
-    const breakpointEntries = Object.entries(breakpoints);
+    // Get all breakpoint names and sort by breakpoint value (descending)
+    const breakpointEntries = Object.entries(breakpointValues);
     breakpointEntries.sort((a, b) => b[1] - a[1]); // Sort descending by value
-    
+
     // Apply breakpoint styles in order (largest to smallest)
     for (const [name] of breakpointEntries) {
       if (responsiveStyle[name]) {
@@ -47,19 +50,19 @@ export function mergeResponsiveStyles(
   } else if (strategy === 'viewport' && viewportWidth !== undefined) {
     // Merge only up to active breakpoint based on viewport width
     const activeBreakpoint = getBreakpointName(viewportWidth, breakpoints);
-    
+
     // If active breakpoint is 'base', only apply base styles (already done above)
     if (activeBreakpoint === 'base') {
       // Base styles already applied, don't apply any other breakpoints
       return merged;
     }
-    
-    // Get all breakpoint names and sort by value (ascending) to find which ones to apply
-    const breakpointEntries = Object.entries(breakpoints);
+
+    // Get all breakpoint names and sort by breakpoint value (ascending) to find which ones to apply
+    const breakpointEntries = Object.entries(breakpointValues);
     breakpointEntries.sort((a, b) => a[1] - b[1]); // Sort ascending by value
-    
-    const activeBreakpointValue = breakpoints[activeBreakpoint];
-    
+
+    const activeBreakpointValue = breakpointValues[activeBreakpoint];
+
     // Apply styles for breakpoints that are <= active breakpoint value
     // This means: base (already applied) + all breakpoints up to and including the active one
     for (const [name, value] of breakpointEntries) {
@@ -68,7 +71,7 @@ export function mergeResponsiveStyles(
       }
     }
   }
-  
+
   return merged;
 }
 
@@ -126,14 +129,17 @@ export function breakpointToViewportWidth(
   breakpoint: BreakpointName,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
 ): number {
+  // Extract breakpoint values for comparisons
+  const breakpointValues = getBreakpointValues(breakpoints);
+
   if (breakpoint === 'base') {
     // Use a large viewport width to ensure only base styles are applied
     // Get the largest breakpoint value and add 1
-    const values = Object.values(breakpoints);
+    const values = Object.values(breakpointValues);
     const maxValue = values.length > 0 ? Math.max(...values) : 1024;
     return maxValue + 1;
   }
-  
+
   // Return the breakpoint value, or a default if not found
-  return breakpoints[breakpoint] ?? 1024;
+  return breakpointValues[breakpoint] ?? 1024;
 }

package/lib/shared/styleNodeUtils.ts

@@ -4,7 +4,7 @@
  */
 
 import type { ComponentNode, HtmlNode, ComponentInstanceNode, StyleValue, ResponsiveStyleObject } from './types';
-import { isComponentNode, isHtmlNode, isEmbedNode } from './nodeUtils';
+import { isComponentNode, isHtmlNode, isEmbedNode, isListNode } from './nodeUtils';
 import { isResponsiveStyle } from './styleUtils';
 
 /**
@@ -26,8 +26,8 @@ export function applyStylesToNode(
     }
 
     node.props.style = { ...(node.props.style || {}), ...styles };
-  } else if (isHtmlNode(node) || isEmbedNode(node)) {
-    // HTML node and Embed node: put styles at top level
+  } else if (isHtmlNode(node) || isEmbedNode(node) || isListNode(node)) {
+    // HTML node, Embed node, and List node: put styles at top level
     node.style = styles as StyleValue;
   }
 
@@ -45,8 +45,8 @@ export function mergeNodeStyles(
 ): ComponentNode {
   if (!instanceStyles) return node;
 
-  if (isHtmlNode(node) || isEmbedNode(node)) {
-    // For HTML nodes and Embed nodes: merge instance styles with existing top-level styles
+  if (isHtmlNode(node) || isEmbedNode(node) || isListNode(node)) {
+    // For HTML nodes, Embed nodes, and List nodes: merge instance styles with existing top-level styles
     const existingStyle = node.style;
     if (existingStyle && typeof existingStyle === 'object') {
       node.style = {