meno-core 1.0.0

package/lib/shared/constants.ts

@@ -0,0 +1,116 @@
+/**
+ * Shared constants used across the application
+ */
+
+// Read PORT from environment variable, fallback to 3000
+// Safe for browser environments where process is not defined
+export const SERVER_PORT = typeof process !== 'undefined' && process.env?.PORT
+  ? parseInt(process.env.PORT, 10)
+  : 3000;
+
+export const API_ROUTES = {
+  PAGES: '/api/pages',
+  COMPONENTS: '/api/components',
+  YAML: '/api/yaml', // Legacy route name, now serves JSON
+  PAGE_DATA: '/api/page-data', // Returns parsed JSON for a specific page
+  COMPONENT_DATA: '/api/component-data', // Returns parsed JSON for a specific component
+  SAVE_PAGE: '/api/save-page',
+  SAVE_COMPONENT: '/api/save-component',
+  SAVE_COMPONENT_JS: '/api/save-component-js', // Save JavaScript to .js file
+  SAVE_COMPONENT_CSS: '/api/save-component-css', // Save CSS to .css file
+  COMPONENT_JS: '/api/component-js', // Get JavaScript from .js file
+  CONFIG: '/api/config', // Get project config
+  SAVE_CONFIG: '/api/save-config', // Save project config
+  SELECTION: '/api/selection', // Editor selection state (for AI integration)
+  // CMS API routes
+  CMS_COLLECTIONS: '/api/cms/collections', // List all CMS collections
+  CMS_BASE: '/api/cms', // Base path for CMS item operations
+  // Colors API routes
+  COLORS_CONFIG: '/api/colors-config', // Get full colors config
+  SAVE_COLORS: '/api/save-colors', // Save colors config
+} as const;
+
+export const HMR_ROUTE = '/hmr';
+
+export const FILE_PATTERNS = {
+  PAGES: './pages',
+  COMPONENTS: './components',
+} as const;
+
+export const DEFAULT_TIMEOUT = 5000;
+
+export const WEBSOCKET_STATES = {
+  CONNECTING: 0,
+  OPEN: 1,
+  CLOSING: 2,
+  CLOSED: 3,
+} as const;
+
+// Timeout constants
+export const NOT_FOUND_TIMEOUT_MS = 300;
+export const TAB_SWITCH_DELAY_MS = 100;
+export const IFRAME_HIGHLIGHT_DELAY_MS = 100;
+export const TREE_SCROLL_DELAY_MS = 200;
+export const HOVER_HIGHLIGHT_DELAY_MS = 50; // Delay before highlighting tree item after expansion
+
+// Server configuration
+export const MAX_PORT_ATTEMPTS = 10;
+
+// Message types for iframe-parent communication
+export const IFRAME_MESSAGE_TYPES = {
+  DELETE_ELEMENT: 'DELETE_ELEMENT',
+  TOGGLE_SELECTING_MODE: 'TOGGLE_SELECTING_MODE',
+  SET_TAB: 'SET_TAB',
+  COPY_ELEMENT: 'COPY_ELEMENT',
+  PASTE_ELEMENT: 'PASTE_ELEMENT',
+  ARROW_UP: 'ARROW_UP',
+  ARROW_DOWN: 'ARROW_DOWN',
+  ARROW_LEFT: 'ARROW_LEFT',
+  ARROW_RIGHT: 'ARROW_RIGHT',
+  OPEN_COMMAND_PALETTE: 'OPEN_COMMAND_PALETTE',
+  EDIT_COMPONENT: 'EDIT_COMPONENT',
+  NAVIGATE_BACK: 'NAVIGATE_BACK',
+  TOGGLE_ADDING_STYLE: 'TOGGLE_ADDING_STYLE',
+  MOVE_ELEMENT_UP: 'MOVE_ELEMENT_UP',
+  MOVE_ELEMENT_DOWN: 'MOVE_ELEMENT_DOWN',
+  SELECTION_CHANGED: 'SELECTION_CHANGED',
+  CMS_CONTEXT_UPDATE: 'CMS_CONTEXT_UPDATE',
+  CMS_CONTEXT_REQUEST: 'CMS_CONTEXT_REQUEST',
+} as const;
+
+// Component node type constants
+export const NODE_TYPE = {
+  NODE: 'node',
+  COMPONENT: 'component',
+  SLOT: 'slot',
+  EMBED: 'embed',
+  OBJECT_LINK: 'object-link',
+  LOCALE_LIST: 'locale-list',
+  TEXT: 'text',
+} as const;
+
+export type NodeType = typeof NODE_TYPE[keyof typeof NODE_TYPE];
+
+// Special path identifiers for component editing
+export const SPECIAL_PATHS = {
+  COMPONENT_INTERFACE: 'component_interface',
+  COMPONENT_JAVASCRIPT: 'component_javascript',
+  COMPONENT_CSS: 'component_css',
+  STRUCTURE_STYLE: 'structure_style',
+} as const;
+
+// Component type configuration
+export interface ComponentTypeConfig {
+  id: string;
+  label: string;
+  color: string;
+}
+
+export const DEFAULT_COMPONENT_TYPES: ComponentTypeConfig[] = [
+  { id: 'ui', label: 'UI', color: '#3b82f6' },
+  { id: 'layout', label: 'Layout', color: '#10b981' },
+  { id: 'content', label: 'Content', color: '#f59e0b' },
+];
+
+export const DEFAULT_ICON_COLOR = '#6b7280';
+

package/lib/shared/cssGeneration.ts

@@ -0,0 +1,481 @@
+/**
+ * Shared CSS Generation Module
+ * Unified CSS generation logic for both editor and static render systems
+ * Used by both client and server to ensure consistent CSS output
+ */
+
+import { prefixToCSSProperty, propertyMap } from './utilityClassConfig';
+import type { BreakpointConfig } from './breakpoints';
+import { DEFAULT_BREAKPOINTS } from './breakpoints';
+import type { ResponsiveScales } from './responsiveScaling';
+import { scalePropertyValue } from './responsiveScaling';
+
+/**
+ * Escape special characters in CSS class names using backslash notation
+ * Characters that have special meaning in CSS selectors need to be escaped
+ */
+function escapeCSSClassName(className: string): string {
+  // Escape special characters with backslash
+  // This includes: . # [ ] ( ) { } ; : , > + ~ etc.
+  return className.replace(/[.#[\](){};<>+~:,\s]/g, '\\$&');
+}
+
+// Define all possible utility class rules
+const utilityClassRules: Record<string, string> = {
+  // Display utilities (short forms from specialValueMappings)
+  f: 'display: flex;',
+  'fd-col': 'flex-direction: column;',
+  'fd-row': 'flex-direction: row;',
+  g: 'display: grid;',
+  b: 'display: block;',
+  i: 'display: inline;',
+  ib: 'display: inline-block;',
+  h: 'display: none;',
+
+  // Justify Content (short forms)
+  'jc-c': 'justify-content: center;',
+  'jc-s': 'justify-content: flex-start;',
+  'jc-e': 'justify-content: flex-end;',
+  'jc-b': 'justify-content: space-between;',
+  'jc-a': 'justify-content: space-around;',
+
+  // Align Items (short forms)
+  'ai-c': 'align-items: center;',
+  'ai-s': 'align-items: flex-start;',
+  'ai-e': 'align-items: flex-end;',
+  'ai-b': 'align-items: baseline;',
+
+  // Overflow (short forms)
+  'o-h': 'overflow: hidden;',
+  'o-a': 'overflow: auto;',
+  'o-s': 'overflow: scroll;',
+  'o-v': 'overflow: visible;',
+
+  // Cursor (full forms)
+  'cursor-pointer': 'cursor: pointer;',
+  'cursor-default': 'cursor: default;',
+};
+
+/**
+ * Extract CSS property and value from a utility class
+ * Returns { property: CSS property name, value: CSS value } or null if not a dynamic class
+ */
+function extractPropertyAndValue(className: string): { property: string; value: string } | null {
+  // Parse prefix-value pattern (e.g., "p-10px", "fs-48px")
+  const knownPrefixes = Object.keys(prefixToCSSProperty).sort((a, b) => b.length - a.length);
+
+  for (const knownPrefix of knownPrefixes) {
+    if (className.startsWith(knownPrefix + '-')) {
+      const classValue = className.substring(knownPrefix.length + 1);
+      const cssProp = prefixToCSSProperty[knownPrefix];
+      if (cssProp) {
+        return { property: cssProp, value: classValue };
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Generate CSS rule for a utility class
+ * Handles dynamic classes like p-10px, m-20px, fs-48px, etc.
+ */
+export function generateRuleForClass(className: string): string | null {
+  // Check if it's a predefined rule
+  if (utilityClassRules[className]) {
+    return utilityClassRules[className];
+  }
+
+  // Parse prefix-value pattern (e.g., "p-10px", "fs-48px", "p-92px-0", "bgc-background-light")
+  // Try to match known prefixes first by checking longest prefixes first
+  const knownPrefixes = Object.keys(prefixToCSSProperty).sort((a, b) => b.length - a.length);
+
+  let prefix = '';
+  let classValue = '';
+
+  for (const knownPrefix of knownPrefixes) {
+    if (className.startsWith(knownPrefix + '-')) {
+      prefix = knownPrefix;
+      classValue = className.substring(knownPrefix.length + 1); // +1 for the hyphen
+      break;
+    }
+  }
+
+  if (!prefix || !classValue) return null;
+
+  // Look up the CSS property from prefix
+  const cssProp = prefixToCSSProperty[prefix];
+  if (!cssProp) return null;
+
+  // Handle border with special syntax BEFORE hyphen conversion (e.g., b-1px-solid-text)
+  // This needs the original hyphenated format to parse correctly
+  if (prefix === 'b' && classValue.includes('-')) {
+    const parts = classValue.split('-');
+    const width = parts[0];
+    const borderStyle = parts[1] || 'solid';
+    const borderColor = parts[2] ? `var(--${parts[2]})` : 'currentColor';
+    return `border: ${width} ${borderStyle} ${borderColor};`;
+  }
+
+  // Handle border-radius with CSS variables (e.g., br-background)
+  if (prefix === 'br' && classValue.includes('-') && !classValue.match(/^\d+px$/)) {
+    return `border-radius: var(--${classValue});`;
+  }
+
+  // Convert hyphenated values back to spaces, but preserve negative numbers
+  // Handle cases like:
+  // - "92px-0" → "92px 0" (space between values)
+  // - "-0.015" → "-0.015" (negative number)
+  // - "0-5px" → "0 5px" (space between values)
+  // - "1px-solid" → "1px solid" (border shorthand)
+  let value = classValue;
+
+  // Pattern to match CSS values that should be preceded by a space instead of hyphen
+  // Includes: digits, auto, inherit, initial, unset, border style keywords, and CSS function names
+  const valuePattern = /\d|auto|inherit|initial|unset|solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden|minmax|repeat|clamp|calc|min|max|fit-content|var/;
+
+  // If value starts with hyphen, preserve it as a negative number
+  if (value.startsWith('-')) {
+    // For negative values, only replace hyphens that come after the first character
+    // This way "-0.015" stays as is, but "-10px-5px" becomes "-10px 5px"
+    value = value[0] + value.substring(1).replace(new RegExp(`-(?=${valuePattern.source})`, 'g'), ' ');
+  } else {
+    // For positive values, replace hyphens normally
+    value = value.replace(new RegExp(`-(?=${valuePattern.source})`, 'g'), ' ');
+  }
+
+  // Convert 'p' suffix to '%' for percentage values (e.g., "50p" → "50%")
+  value = value.replace(/(\d+)p(?!\w)/g, '$1%');
+
+  // Handle special multi-property prefixes
+  if (prefix === 'px') {
+    // padding-left and padding-right
+    return `padding-left: ${value}; padding-right: ${value};`;
+  }
+  if (prefix === 'py') {
+    // padding-top and padding-bottom
+    return `padding-top: ${value}; padding-bottom: ${value};`;
+  }
+  if (prefix === 'mx') {
+    // margin-left and margin-right
+    return `margin-left: ${value}; margin-right: ${value};`;
+  }
+  if (prefix === 'my') {
+    // margin-top and margin-bottom
+    return `margin-top: ${value}; margin-bottom: ${value};`;
+  }
+
+  // Handle CSS variables for color properties
+  // For color (c), background-color (bgc), and border-color (bc), treat as CSS variables
+  // unless it's a hex color (#...) or RGB value
+  if ((prefix === 'bgc' || prefix === 'c' || prefix === 'bc')) {
+    // If it's not a hex color, RGB value, or pixel value, treat it as a CSS variable name
+    if (!value.startsWith('#') && !value.includes('rgb') && !value.includes('px')) {
+      return `${cssProp}: var(--${value});`;
+    }
+  }
+
+  // Standard case: prefix-value (e.g., p-10px, fs-48px, ta-center)
+  return `${cssProp}: ${value};`;
+}
+
+/**
+ * Generate CSS for all utility classes used in the application
+ * Scans through all classes and generates the necessary CSS rules
+ * Optionally applies responsive scaling based on configuration
+ */
+export function generateUtilityCSS(
+  usedClasses: Set<string>,
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
+  responsiveScales?: ResponsiveScales
+): string {
+  const css: string[] = [];
+  const baseClasses = new Set<string>();
+  const autoResponsiveClasses = new Set<string>(); // Classes that should get auto-scaling
+
+  // Create a map for responsive breakpoint classes
+  // Map from prefix (e.g., 't', 'm') to the class name and breakpoint info
+  type BreakpointClassMap = Record<string, { classes: Set<string>; breakpointName: string; value: number }>;
+  const responsiveClasses: BreakpointClassMap = {};
+
+  // Initialize responsive class sets for each breakpoint
+  for (const [breakpointName, breakpointValue] of Object.entries(breakpoints)) {
+    // Generate prefix from breakpoint name, avoiding conflicts with property prefixes
+    // For 'mobile', use 'mob' to avoid conflict with 'margin' (m-), etc.
+    let prefix = breakpointName.charAt(0).toLowerCase();
+    if (breakpointName.toLowerCase() === 'mobile') {
+      prefix = 'mob'; // Use 'mob' instead of 'm' to avoid margin conflict
+    }
+
+    responsiveClasses[prefix] = {
+      classes: new Set<string>(),
+      breakpointName,
+      value: breakpointValue
+    };
+  }
+
+  // Separate classes by breakpoint
+  for (const className of usedClasses) {
+    let matched = false;
+
+    // Try to match against any responsive breakpoint prefix
+    for (const prefix of Object.keys(responsiveClasses)) {
+      if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
+        const potentialClass = className.substring(prefix.length + 1);
+        const rule = generateRuleForClass(potentialClass);
+
+        // If it generates a valid rule and doesn't look like a margin value, treat as breakpoint class
+        // Margin values are typically: auto, 0, or pixel/percentage values (like 10px, 92px, 50p)
+        if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+          responsiveClasses[prefix].classes.add(potentialClass);
+          matched = true;
+          break;
+        }
+      }
+    }
+
+    if (!matched) {
+      baseClasses.add(className);
+
+      // Check if this class should get auto-responsive scaling
+      if (responsiveScales?.enabled) {
+        const propValue = extractPropertyAndValue(className);
+        if (propValue) {
+          // Check if this property type has scaling configured
+          const typeMap: Record<string, string> = {
+            'padding': 'padding',
+            'padding-left': 'padding',
+            'padding-right': 'padding',
+            'padding-top': 'padding',
+            'padding-bottom': 'padding',
+            'margin': 'margin',
+            'margin-left': 'margin',
+            'margin-right': 'margin',
+            'margin-top': 'margin',
+            'margin-bottom': 'margin',
+            'font-size': 'fontSize',
+            'gap': 'gap',
+            'row-gap': 'gap',
+            'column-gap': 'gap',
+          };
+
+          const category = typeMap[propValue.property];
+          if (category && responsiveScales[category as keyof ResponsiveScales]) {
+            autoResponsiveClasses.add(className);
+          }
+        }
+      }
+    }
+  }
+
+  // Generate base rules
+  for (const className of baseClasses) {
+    const rule = generateRuleForClass(className);
+    if (rule) {
+      // Escape special characters in class name for CSS selector
+      const escapedClassName = escapeCSSClassName(className);
+      css.push(`.${escapedClassName} { ${rule} }`);
+    }
+  }
+
+  // Map to collect auto-responsive media queries by breakpoint
+  type MediaQueryMap = Record<string, { classes: Array<{ className: string; rule: string }>; value: number }>;
+  const autoResponsiveMediaQueries: MediaQueryMap = {};
+
+  // Generate auto-responsive rules for classes with enabled scaling
+  if (responsiveScales?.enabled) {
+    const typeMap: Record<string, string> = {
+      'padding': 'padding',
+      'padding-left': 'padding',
+      'padding-right': 'padding',
+      'padding-top': 'padding',
+      'padding-bottom': 'padding',
+      'margin': 'margin',
+      'margin-left': 'margin',
+      'margin-right': 'margin',
+      'margin-top': 'margin',
+      'margin-bottom': 'margin',
+      'font-size': 'fontSize',
+      'gap': 'gap',
+      'row-gap': 'gap',
+      'column-gap': 'gap',
+    };
+
+    for (const className of autoResponsiveClasses) {
+      const propValue = extractPropertyAndValue(className);
+      if (!propValue) continue;
+
+      const category = typeMap[propValue.property];
+      if (!category) continue;
+
+      const scaleConfig = responsiveScales[category as keyof ResponsiveScales] as any;
+      if (!scaleConfig) continue;
+
+      const baseRef = responsiveScales.baseReference || 16;
+      const escapedClassName = escapeCSSClassName(className);
+
+      // Generate scaled rules for each breakpoint
+      for (const [breakpointName, breakpointValue] of Object.entries(breakpoints)) {
+        const scaleType = breakpointName === 'mobile' ? 'mobile' : 'tablet';
+        const scale = scaleConfig[scaleType];
+        if (!scale) continue;
+
+        const scaledValue = scalePropertyValue(propValue.value, baseRef, scale);
+        if (!scaledValue) continue;
+
+        // Initialize media query entry if not exists
+        if (!autoResponsiveMediaQueries[breakpointName]) {
+          autoResponsiveMediaQueries[breakpointName] = {
+            classes: [],
+            value: breakpointValue
+          };
+        }
+
+        autoResponsiveMediaQueries[breakpointName].classes.push({
+          className: escapedClassName,
+          rule: `${propValue.property}: ${scaledValue};`
+        });
+      }
+    }
+  }
+
+  // Generate media queries in two separate sections:
+  // 1. Auto-responsive classes FIRST (baseline responsive behavior)
+  // 2. Manual breakpoint classes AFTER (explicit overrides)
+  // This ensures manual t-, mob- classes always override auto-responsive rules
+
+  // Sort auto-responsive media queries by breakpoint value (descending)
+  const sortedAutoResponsive = Object.entries(autoResponsiveMediaQueries)
+    .sort(([, a], [, b]) => b.value - a.value);
+
+  // Generate auto-responsive media queries first
+  for (const [breakpointName, mq] of sortedAutoResponsive) {
+    if (mq.classes.length === 0) continue;
+
+    css.push(`@media (max-width: ${mq.value}px) {`);
+    for (const { className, rule } of mq.classes) {
+      css.push(`  .${className} { ${rule} }`);
+    }
+    css.push('}');
+  }
+
+  // Sort manual responsive classes by breakpoint value (descending)
+  const sortedManualResponsive = Object.entries(responsiveClasses)
+    .filter(([, info]) => info.classes.size > 0)
+    .sort(([, a], [, b]) => b.value - a.value);
+
+  // Generate manual breakpoint media queries after
+  for (const [prefix, breakpointInfo] of sortedManualResponsive) {
+    const rules: string[] = [];
+
+    for (const className of breakpointInfo.classes) {
+      const rule = generateRuleForClass(className);
+      if (rule) {
+        const escapedClassName = escapeCSSClassName(className);
+        rules.push(`  .${prefix}-${escapedClassName} { ${rule} }`);
+      }
+    }
+
+    if (rules.length > 0) {
+      css.push(`@media (max-width: ${breakpointInfo.value}px) {`);
+      css.push(...rules);
+      css.push('}');
+    }
+  }
+
+  return css.join('\n');
+}
+
+/**
+ * Extract all utility classes from a rendered HTML string
+ * Identifies utility classes by checking against known prefixes from propertyMap
+ */
+export function extractUtilityClassesFromHTML(html: string): Set<string> {
+  const classes = new Set<string>();
+  const classRegex = /class="([^"]*)"/g;
+  let match;
+
+  // Get all known utility prefixes from propertyMap
+  const knownPrefixes = new Set(Object.values(propertyMap));
+  // Also include special/short form prefixes from utilityClassRules
+  const specialPrefixes = new Set([
+    // Display short forms
+    'f', 'fd-col', 'fd-row', 'g', 'b', 'i', 'ib', 'h',
+    // Justify content
+    'jc-c', 'jc-s', 'jc-e', 'jc-b', 'jc-a',
+    // Align items
+    'ai-c', 'ai-s', 'ai-e', 'ai-b',
+    // Overflow
+    'o-h', 'o-a', 'o-s', 'o-v',
+    // Cursor
+    'cursor-pointer', 'cursor-default',
+  ]);
+
+  while ((match = classRegex.exec(html)) !== null) {
+    const classString = match[1];
+    const classList = classString.split(/\s+/);
+
+    for (const className of classList) {
+      // Skip empty class names
+      if (!className || className.length === 0) continue;
+
+      // Check if it's a special/short form class
+      if (specialPrefixes.has(className)) {
+        classes.add(className);
+        continue;
+      }
+
+      // Check for responsive prefix (like 't-', 'mob-', 's-', etc.) and process accordingly
+      let classToCheck = className;
+      let hasResponsivePrefix = false;
+
+      // Extract responsive prefix if present
+      // Check for multi-letter prefix first (e.g., 'mob-' for mobile)
+      if (className.startsWith('mob-') && className.length > 4) {
+        classToCheck = className.substring(4); // Remove 'mob-' prefix
+        hasResponsivePrefix = true;
+      }
+      // Then check for single-letter prefixes (t-, s-, l-, x-, u-)
+      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)
+        // NOTE: We exclude 'm' because it conflicts with margin prefix - use 'mob' instead
+        if (['t', 's', 'l', 'x', 'u'].includes(firstChar)) {
+          classToCheck = className.substring(2); // Remove responsive prefix
+          hasResponsivePrefix = true;
+        }
+      }
+
+      // Check if it starts with a known prefix
+      // Handle both single-letter (like 'p-', 'w-') and multi-letter (like 'jc-', 'ai-')
+      for (const prefix of knownPrefixes) {
+        if (classToCheck === prefix) {
+          // Exact match (like 'f' for flex, 'g' for grid)
+          classes.add(className);
+          break;
+        } else if (classToCheck.startsWith(prefix + '-')) {
+          // Prefix with hyphen separator (like 'p-10px', 'fs-16px', or 't-p-10px')
+          classes.add(className);
+          break;
+        }
+      }
+
+      // Also check special prefixes for responsive classes
+      if (hasResponsivePrefix && !classes.has(className)) {
+        for (const specialPrefix of specialPrefixes) {
+          if (classToCheck === specialPrefix) {
+            classes.add(className);
+            break;
+          } else if (classToCheck.startsWith(specialPrefix + '-')) {
+            classes.add(className);
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  return classes;
+}