meno-core 1.0.20 → 1.0.21

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/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 = {

package/lib/shared/tree/PathBuilder.ts

@@ -10,7 +10,7 @@
 import type { Path } from '../pathArrayUtils';
 import type { PageData, ComponentNode } from '../types';
 import { getRootData } from '../treePathUtils';
-import { isComponentNode, isSlotMarker, isLocaleListNode, isCMSListNode } from '../nodeUtils';
+import { isComponentNode, isSlotMarker, isLocaleListNode, isCMSListNode, isListNode } from '../nodeUtils';
 
 /**
  * Node path data containing both logical and rendered paths
@@ -289,7 +289,7 @@ export function buildTreePathsWithRendered(
         if (
           typeof child === 'object' &&
           child !== null &&
-          ('tag' in child || 'component' in child || 'html' in child || 'src' in child || 'href' in child || isLocaleListNode(child) || isCMSListNode(child) || (cumulativeInstancePath && isSlotMarker(child)))
+          ('tag' in child || 'component' in child || 'html' in child || 'src' in child || 'href' in child || isLocaleListNode(child) || isCMSListNode(child) || isListNode(child) || (cumulativeInstancePath && isSlotMarker(child)))
         ) {
           const childPath = [...currentPath, index];
           traverse(child as ComponentNode, childPath);
@@ -361,7 +361,7 @@ export function buildComponentTreePaths(
         if (
           typeof child === 'object' &&
           child !== null &&
-          ('tag' in child || 'component' in child || 'html' in child || 'src' in child || 'href' in child || isLocaleListNode(child) || isCMSListNode(child) || isSlotMarker(child))
+          ('tag' in child || 'component' in child || 'html' in child || 'src' in child || 'href' in child || isLocaleListNode(child) || isCMSListNode(child) || isListNode(child) || isSlotMarker(child))
         ) {
           const childPath = [...currentPath, index];
           traverse(child as ComponentNode, childPath);

package/lib/shared/treePathUtils.ts

@@ -293,14 +293,16 @@ export function isComponentNodeParent(
   // - SlotMarker: type === 'slot'
   // - LinkNode: type === 'link'
   // - EmbedNode: type === 'embed'
-  // - CMSListNode: type === 'cms-list'
+  // - ListNode: type === 'list' (also handles legacy 'cms-list' for migration)
+  const nodeType = (parent as any).type;
   return 'type' in parent && (
     'tag' in parent ||
     'component' in parent ||
-    parent.type === 'slot' ||
-    parent.type === 'link' ||
-    parent.type === 'embed' ||
-    parent.type === 'cms-list'
+    nodeType === 'slot' ||
+    nodeType === 'link' ||
+    nodeType === 'embed' ||
+    nodeType === 'cms-list' ||  // Legacy support for migration
+    nodeType === 'list'
   );
 }
 

package/lib/shared/types/cms.ts

@@ -147,64 +147,11 @@ export interface CMSListQuery {
 }
 
 /**
- * CMSList node - a special built-in component that renders its children
- * for each matching CMS item. Supports filtering, sorting, and pagination.
- *
- * Context variables available in children (with named context):
- * - {{<itemAs>.field}} - Access CMS item fields (e.g., {{post.title}})
- * - {{<itemAs>Index}} - Zero-based index of current item (e.g., {{postIndex}})
- * - {{<itemAs>First}} - Boolean, true if first item (e.g., {{postFirst}})
- * - {{<itemAs>Last}} - Boolean, true if last item (e.g., {{postLast}})
- *
- * Legacy context (still supported):
- * - {{item.field}}, {{itemIndex}}, {{itemFirst}}, {{itemLast}}
+ * @deprecated CMSListNode is now replaced by ListNode with sourceType: 'collection'.
+ * This type alias is kept for backward compatibility during migration.
+ * Import ListNode from '../registry/nodeTypes/ListNodeType' instead.
  */
-export interface CMSListNode {
-  type: 'cms-list';
-  /** Custom label displayed in structure tree */
-  label?: string;
-  /** Conditional rendering - skip node when false */
-  if?: { field: string; operator?: 'eq' | 'neq' | 'truthy' | 'falsy'; value?: unknown };
-  /** Inline styles */
-  style?: Record<string, unknown>;
-  /** Interactive CSS rules (hover, active, etc.) */
-  interactiveStyles?: Array<{
-    style: Record<string, unknown>;
-    name?: string;
-    prefix?: string;
-    postfix?: string;
-    previewProp?: string;
-  }>;
-  /** Generate element class without styles (for custom CSS) */
-  generateElementClass?: boolean;
-  /** HTML attributes */
-  attributes?: Record<string, string | number | boolean>;
-  /** Collection to query */
-  collection: string;
-  /** Variable name for item in templates (default: singular of collection) */
-  itemAs?: string;
-  /** Direct item IDs or template expression for referenced items (e.g., "{{post.authorId}}") */
-  items?: string | string[];
-  /** Filter conditions */
-  filter?: CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown>;
-  /** Sort configuration */
-  sort?: CMSSortConfig | CMSSortConfig[];
-  /** Maximum number of items to return */
-  limit?: number;
-  /** Number of items to skip */
-  offset?: number;
-  /** Exclude the current CMS item from the list (useful for "related items" sections) */
-  excludeCurrentItem?: boolean;
-  /**
-   * 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?: boolean;
-  /** Children are repeated for each item */
-  children?: unknown[];
-}
+export type CMSListNode = import('../registry/nodeTypes/ListNodeType').ListNode;
 
 /**
  * Configuration for nested CMS list placeholders.

package/lib/shared/types/components.ts

@@ -8,7 +8,7 @@ import type { ComponentNode } from './nodes';
 /**
  * Prop type definitions
  */
-export type PropType = 'string' | 'select' | 'boolean' | 'number' | 'link' | 'file' | 'rich-text';
+export type PropType = 'string' | 'select' | 'boolean' | 'number' | 'link' | 'file' | 'rich-text' | 'list';
 
 /**
  * Internationalization (i18n) value object
@@ -53,15 +53,56 @@ export interface LinkPropValue {
 }
 
 /**
- * Prop definition with improved type safety
+ * Base prop definition without list-specific fields
  */
-export interface PropDefinition {
-  type: PropType;
+export interface BasePropDefinition {
+  type: Exclude<PropType, 'list'>;
   default?: string | number | boolean | I18nValue | LinkPropValue;
   options?: readonly string[];  // Required for "select" type
   accept?: string;  // For "file" type: MIME pattern like "image/*", "video/*"
 }
 
+/**
+ * List item schema - defines the structure of each item in a list prop
+ * Uses the same prop types as component interfaces (except nested lists)
+ */
+export type ListItemSchema = Record<string, BasePropDefinition>;
+
+/**
+ * List item value type
+ */
+export type ListItemValue = Record<string, string | number | boolean | LinkPropValue | null>;
+
+/**
+ * List prop definition - for array/list data
+ */
+export interface ListPropDefinition {
+  type: 'list';
+  /** Schema defining the structure of each list item */
+  itemSchema: ListItemSchema;
+  /** Default value is an array of items */
+  default?: ListItemValue[];
+}
+
+/**
+ * Prop definition with improved type safety
+ */
+export type PropDefinition = BasePropDefinition | ListPropDefinition;
+
+/**
+ * Type guard to check if a prop definition is a list type
+ */
+export function isListPropDefinition(def: PropDefinition): def is ListPropDefinition {
+  return def.type === 'list';
+}
+
+/**
+ * Type guard to check if a prop definition is a base (non-list) type
+ */
+export function isBasePropDefinition(def: PropDefinition): def is BasePropDefinition {
+  return def.type !== 'list';
+}
+
 /**
  * Structured component definition
  */

package/lib/shared/types/index.ts

@@ -22,6 +22,10 @@ export type {
   ComponentDefinition,
   StructuredComponentDefinition,
   PropDefinition,
+  BasePropDefinition,
+  ListPropDefinition,
+  ListItemSchema,
+  ListItemValue,
   PropType,
   JSONPage,
   PageData,
@@ -29,6 +33,12 @@ export type {
   I18nValue,
   I18nConfig,
   LocaleConfig,
+  LinkPropValue,
+} from './components';
+
+export {
+  isListPropDefinition,
+  isBasePropDefinition,
 } from './components';
 
 // Export all style types
@@ -80,6 +90,9 @@ export type {
   ReferenceLocation,
 } from './cms';
 
+// Export ListNode from registry (unified list node type)
+export type { ListNode } from '../registry/nodeTypes/ListNodeType';
+
 // Export CMS utilities
 export { singularize } from './cms';
 

package/lib/shared/validation/propValidator.ts

@@ -94,7 +94,9 @@ function validateSingleProp(
     return { valid: true };
   }
 
-  const { type, options } = propDef;
+  const { type } = propDef;
+  // Options is only available on select type (from BasePropDefinition)
+  const options = 'options' in propDef ? propDef.options : undefined;
 
   // Type checking and coercion
   let coercedValue: unknown;
@@ -164,6 +166,12 @@ function validateSingleProp(
       typeValid = typeof value === 'string';
       break;
 
+    case 'list':
+      // List type accepts arrays
+      coercedValue = value;
+      typeValid = Array.isArray(value);
+      break;
+
     default:
       return {
         valid: false,

package/lib/shared/validation/schemas.ts

@@ -13,21 +13,48 @@ import type { StyleObject, StyleMapping, LinkMapping } from '../types/styles';
 import { NODE_TYPE } from '../constants';
 
 /**
- * Prop type schema - validates PropType values
+ * Prop type schema - validates PropType values (excluding list for base definition)
  */
-export const PropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text']);
+export const BasePropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text']);
 
 /**
- * Prop definition schema
- * Validates prop definitions from component interfaces
+ * Full prop type schema including list
+ */
+export const PropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text', 'list']);
+
+/**
+ * Base prop definition schema (for non-list props)
  */
-export const PropDefinitionSchema = z.object({
-  type: PropTypeSchema,
+export const BasePropDefinitionSchema = z.object({
+  type: BasePropTypeSchema,
   default: z.union([z.string(), z.number(), z.boolean(), z.object({ href: z.string(), target: z.string().optional() })]).optional(),
   options: z.array(z.string()).readonly().optional(),
   accept: z.string().optional(), // For 'file' type: MIME pattern like "image/*", "video/*"
 }).passthrough();
 
+/**
+ * List item schema - defines structure of each item in a list prop
+ */
+export const ListItemSchemaSchema = z.record(z.string(), BasePropDefinitionSchema);
+
+/**
+ * List prop definition schema
+ */
+export const ListPropDefinitionSchema = z.object({
+  type: z.literal('list'),
+  itemSchema: ListItemSchemaSchema,
+  default: z.array(z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), z.object({ href: z.string(), target: z.string().optional() }), z.null()]))).optional(),
+}).passthrough();
+
+/**
+ * Prop definition schema (union of base and list)
+ * Validates prop definitions from component interfaces
+ */
+export const PropDefinitionSchema = z.union([
+  ListPropDefinitionSchema,
+  BasePropDefinitionSchema,
+]);
+
 /**
  * Style mapping schema
  */
@@ -124,10 +151,16 @@ export const InteractiveStylesSchema = z.array(InteractiveStyleRuleSchema);
 
 /**
  * Slot marker schema
+ * default: Optional default content when instance has no children
+ * Can be an array of ComponentNodes or a string
  */
-export const SlotMarkerSchema = z.object({
+export const SlotMarkerSchema: z.ZodType<any> = z.lazy(() => z.object({
   type: z.literal(NODE_TYPE.SLOT),
-}).passthrough();
+  default: z.union([
+    z.array(z.union([ComponentNodeSchema, z.string()])),
+    z.string(),
+  ]).optional(),
+}).passthrough());
 
 /**
  * Component node schema - discriminated union (forward declaration)
@@ -226,28 +259,41 @@ export const LocaleListNodeSchema: z.ZodType<any> = z.lazy(() => z.object({
 }).passthrough());
 
 /**
- * CMS List node schema (basic version for ComponentNodeSchema union)
- * Full validation with filter/sort is in CMSListNodeSchema below
+ * Unified List node schema (basic version for ComponentNodeSchema union)
+ * Handles both prop-based lists and CMS collection-based lists.
+ * Uses sourceType to distinguish: 'prop' (default) or 'collection'.
+ * Also supports legacy 'cms-list' type for backward compatibility.
  */
-export const CMSListNodeSchemaBasic: z.ZodType<any> = z.lazy(() => z.object({
-  type: z.literal(NODE_TYPE.CMS_LIST),
-  collection: z.string(),
+export const ListNodeSchemaBasic: z.ZodType<any> = z.lazy(() => z.object({
+  type: z.union([z.literal(NODE_TYPE.LIST), z.literal('cms-list')]), // Support both for migration
+  sourceType: z.enum(['prop', 'collection']).optional(), // defaults to 'prop'
+  source: z.string().optional(), // Source prop name or collection name
+  collection: z.string().optional(), // Legacy field for cms-list migration
+  tag: z.string().optional(), // Wrapper element tag, defaults to 'div'
   label: z.string().optional(),
   if: IfConditionSchema.optional(),
   style: StyleValueSchema.optional(),
   interactiveStyles: InteractiveStylesSchema.optional(),
   generateElementClass: z.boolean().optional(),
   itemAs: z.string().optional(),
+  // Collection-specific options
   items: z.union([z.string(), z.array(z.string())]).optional(),
   filter: z.unknown().optional(),
   sort: z.unknown().optional(),
   limit: z.number().optional(),
   offset: z.number().optional(),
   excludeCurrentItem: z.boolean().optional(),
+  emitTemplate: z.boolean().optional(),
   attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
   children: z.array(z.union([ComponentNodeSchema, z.string()])).optional(),
 }).passthrough());
 
+/**
+ * @deprecated Use ListNodeSchemaBasic instead.
+ * Kept for backward compatibility during migration.
+ */
+export const CMSListNodeSchemaBasic = ListNodeSchemaBasic;
+
 /**
  * Component node schema - discriminated union (now defined after dependencies)
  */
@@ -258,7 +304,7 @@ ComponentNodeSchema = z.union([
   EmbedNodeSchema,
   LinkNodeSchema,
   LocaleListNodeSchema,
-  CMSListNodeSchemaBasic,
+  ListNodeSchemaBasic,
 ]);
 
 // Export ComponentNodeSchema

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"

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

@@ -1,109 +0,0 @@
-/**
- * CMS List Node Type Definition
- * Renders children for each CMS item in a collection
- */
-
-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';
-
-// Schema is the SINGLE source of truth
-const CMSListNodeSchemaInternal = z.object({
-  type: z.literal('cms-list'),
-  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(),
-  /** Collection to query */
-  collection: z.string(),
-  /** Filter conditions */
-  filter: z.union([
-    z.object({
-      field: z.string(),
-      operator: z.enum(['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'contains', 'in']).optional(),
-      value: z.unknown(),
-    }),
-    z.array(z.object({
-      field: z.string(),
-      operator: z.enum(['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'contains', 'in']).optional(),
-      value: z.unknown(),
-    })),
-    z.record(z.unknown()),
-  ]).optional(),
-  /** Sort configuration */
-  sort: 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(),
-    })),
-  ]).optional(),
-  /** 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 CMSListNode = z.infer<typeof CMSListNodeSchemaInternal>;
-
-// Export schema for validation/schemas.ts
-export const CMSListNodeSchema = CMSListNodeSchemaInternal;
-
-export const CMSListNodeType = createNodeType({
-  type: NODE_TYPE.CMS_LIST,
-  displayName: 'CMS List',
-  category: 'special',
-  schema: CMSListNodeSchemaInternal,
-
-  defaultValues: {
-    collection: '',
-    children: [],
-    style: { base: {} },
-  },
-
-  treeDisplay: {
-    icon: 'HTML_ELEMENT',
-    getLabel: (node) => {
-      const cmsNode = node as CMSListNode;
-      return cmsNode.collection ? `CMS List: ${cmsNode.collection}` : 'CMS List';
-    },
-  },
-
-  clientRenderer: (node, context) => {
-    const cmsNode = node as CMSListNode;
-    // In editor, shows placeholder with collection name
-    return h('div', {
-      key: context.key,
-      'data-cms-list': 'true',
-      'data-collection': cmsNode.collection,
-      style: {
-        padding: '8px 12px',
-        background: 'rgba(139, 92, 246, 0.1)',
-        border: '1px dashed rgba(139, 92, 246, 0.5)',
-        borderRadius: '4px',
-        color: '#8b5cf6',
-        fontSize: '12px',
-      },
-    }, `[CMS List: ${cmsNode.collection || 'No collection'}]`);
-  },
-
-  ssrRenderer: (_node, _context) => {
-    // Placeholder - actual SSR is handled by processCMSList in ssrRenderer.ts
-    return '<!-- cms-list rendered by processCMSList -->';
-  },
-
-  capabilities: {
-    canHaveChildren: true,
-    requiresProps: ['collection'],
-  },
-});