meno-core 1.0.19 → 1.0.21

package/lib/shared/styleValueRegistry.ts

@@ -7,6 +7,10 @@
 // Global registry mapping class names to original CSS values
 const registry = new Map<string, string | number>();
 
+// Registry for dynamic/fallback classes that include the CSS property name
+// Used for properties not in the standard propertyMap
+const dynamicRegistry = new Map<string, { property: string; value: string | number }>();
+
 /**
  * Register a style value for a class name
  * Called when generating utility class names from style objects
@@ -15,6 +19,14 @@ export function registerStyleValue(className: string, value: string | number): v
   registry.set(className, value);
 }
 
+/**
+ * Register a dynamic style (property + value) for a class name
+ * Used for properties not in propertyMap that need dynamic class generation
+ */
+export function registerDynamicStyle(className: string, property: string, value: string | number): void {
+  dynamicRegistry.set(className, { property, value });
+}
+
 /**
  * Get the original style value for a class name
  * Returns undefined if not registered (fallback to reverse-engineering)
@@ -23,20 +35,46 @@ export function getStyleValue(className: string): string | number | undefined {
   return registry.get(className);
 }
 
+/**
+ * Get the dynamic style (property + value) for a class name
+ * Returns undefined if not registered
+ */
+export function getDynamicStyle(className: string): { property: string; value: string | number } | undefined {
+  return dynamicRegistry.get(className);
+}
+
+/**
+ * Check if a class name is registered in the dynamic registry
+ */
+export function isDynamicClass(className: string): boolean {
+  return dynamicRegistry.has(className);
+}
+
+/**
+ * Get all registered dynamic class names
+ */
+export function getAllDynamicClasses(): string[] {
+  return Array.from(dynamicRegistry.keys());
+}
+
 /**
  * Clear all registered values
  * Useful for testing or resetting state
  */
 export function clearRegistry(): void {
   registry.clear();
+  dynamicRegistry.clear();
 }
 
 /**
  * Serialize registry for SSR embedding
- * Returns JSON string of all entries
+ * Returns JSON string of all entries (both standard and dynamic)
  */
 export function serializeRegistry(): string {
-  return JSON.stringify(Array.from(registry.entries()));
+  return JSON.stringify({
+    standard: Array.from(registry.entries()),
+    dynamic: Array.from(dynamicRegistry.entries()),
+  });
 }
 
 /**
@@ -44,8 +82,25 @@ export function serializeRegistry(): string {
  * Call on client to restore server-side registered values
  */
 export function hydrateRegistry(data: string): void {
-  const entries = JSON.parse(data) as [string, string | number][];
-  for (const [key, value] of entries) {
-    registry.set(key, value);
+  const parsed = JSON.parse(data);
+
+  // Handle both old format (array) and new format (object with standard/dynamic)
+  if (Array.isArray(parsed)) {
+    // Old format: just standard entries
+    for (const [key, value] of parsed as [string, string | number][]) {
+      registry.set(key, value);
+    }
+  } else {
+    // New format: { standard, dynamic }
+    if (parsed.standard) {
+      for (const [key, value] of parsed.standard as [string, string | number][]) {
+        registry.set(key, value);
+      }
+    }
+    if (parsed.dynamic) {
+      for (const [key, value] of parsed.dynamic as [string, { property: string; value: string | number }][]) {
+        dynamicRegistry.set(key, value);
+      }
+    }
   }
 }

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/utilityClassConfig.ts

@@ -76,6 +76,7 @@ export const propertyMap: Record<string, string> = {
   overflowWrap: 'ow',
   textIndent: 'ti',
   verticalAlign: 'va',
+  whiteSpace: 'whs',
 
   // Lists
   listStyle: 'lst',
@@ -213,6 +214,7 @@ export const prefixToCSSProperty: Record<string, string> = {
   ow: 'overflow-wrap',
   ti: 'text-indent',
   va: 'vertical-align',
+  whs: 'white-space',
 
   // Lists
   lst: 'list-style',
@@ -343,6 +345,13 @@ export const specialValueMappings: Record<string, Record<string, string>> = {
     text: 'us-text',
     all: 'us-all',
   },
+  whiteSpace: {
+    normal: 'whs-normal',
+    nowrap: 'whs-nowrap',
+    pre: 'whs-pre',
+    'pre-wrap': 'whs-pre-wrap',
+    'pre-line': 'whs-pre-line',
+  },
   // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
   // dynamically in utilityClassMapper.ts - no need to hardcode specific values here
 };
@@ -378,6 +387,11 @@ export const classToStyleSpecialCases: Record<string, { prop: string; value: str
   'us-auto': { prop: 'userSelect', value: 'auto' },
   'us-text': { prop: 'userSelect', value: 'text' },
   'us-all': { prop: 'userSelect', value: 'all' },
+  'whs-normal': { prop: 'whiteSpace', value: 'normal' },
+  'whs-nowrap': { prop: 'whiteSpace', value: 'nowrap' },
+  'whs-pre': { prop: 'whiteSpace', value: 'pre' },
+  'whs-pre-wrap': { prop: 'whiteSpace', value: 'pre-wrap' },
+  'whs-pre-line': { prop: 'whiteSpace', value: 'pre-line' },
   // Grid template columns
   'gtc-2': { prop: 'gridTemplateColumns', value: 'repeat(2, 1fr)' },
   'gtc-3': { prop: 'gridTemplateColumns', value: 'repeat(3, 1fr)' },

package/lib/shared/utilityClassMapper.ts

@@ -13,7 +13,7 @@ import {
   gradientPresets,
   borderPresets,
 } from './utilityClassConfig';
-import { registerStyleValue } from './styleValueRegistry';
+import { registerStyleValue, registerDynamicStyle } from './styleValueRegistry';
 
 // Function name abbreviations for shorter class names
 const functionAbbreviations: Record<string, string> = {
@@ -40,13 +40,54 @@ function isStyleMapping(value: unknown): value is StyleMapping {
   return typeof value === 'object' && value !== null && '_mapping' in value && (value as StyleMapping)._mapping === true;
 }
 
+/**
+ * Sanitize a value for use in a CSS class name
+ * Replaces special characters with safe alternatives
+ */
+function sanitizeClassValue(value: string): string {
+  return value
+    .replace(/\s+/g, '-')       // spaces to hyphens
+    .replace(/[()]/g, '')        // remove parentheses
+    .replace(/,/g, '_')          // commas to underscores
+    .replace(/%/g, 'p')          // percent to 'p'
+    .replace(/\./g, 'd')         // dots to 'd' (for decimals)
+    .replace(/[^\w-]/g, '');     // remove other special chars
+}
+
 /**
  * Converts a CSS property value to a utility class name
  * Example: { prop: "padding", value: "10px" } → "p-10px"
+ *
+ * For properties not in propertyMap, generates a dynamic class using
+ * a shortened property name prefix (e.g., "textOverflow" → "txov-ellipsis")
  */
 function propertyValueToClass(prop: string, value: string | number): string | null {
   const prefix = propertyMap[prop];
-  if (!prefix) return null;
+
+  // For properties not in propertyMap, generate a dynamic fallback class
+  if (!prefix) {
+    const stringValue = String(value);
+    // Generate a short prefix from the property name (first 2-4 chars of each word)
+    // e.g., "textOverflow" → "txov", "WebkitBackgroundClip" → "wbbg"
+    const dynamicPrefix = prop
+      .replace(/([A-Z])/g, '-$1')  // camelCase to kebab
+      .toLowerCase()
+      .split('-')
+      .filter(Boolean)
+      .map(word => word.slice(0, 2))  // first 2 chars of each word
+      .join('');
+
+    // Sanitize value for class name
+    const sanitizedValue = sanitizeClassValue(stringValue);
+    const className = `${dynamicPrefix}-${sanitizedValue}`;
+
+    // Convert camelCase to kebab-case for CSS property
+    const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+    // Register in dynamic registry with property info
+    registerDynamicStyle(className, cssProperty, value);
+    return className;
+  }
 
   const stringValue = String(value);
   let className: string | null = null;

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.19",
+  "version": "1.0.21",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"