meno-core 1.0.0

package/lib/shared/colorVariableUtils.test.ts

@@ -0,0 +1,319 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  isColorVariable,
+  extractVariableName,
+  createVariableReference,
+  resolveColorVariable,
+  resolveColorVariablesInStyles,
+  getColorVariablesFromStyles,
+} from './colorVariableUtils';
+
+describe('colorVariableUtils', () => {
+  describe('isColorVariable', () => {
+    test('should return true for valid color variable references', () => {
+      expect(isColorVariable('var(--primary-color)')).toBe(true);
+      expect(isColorVariable('var(--background)')).toBe(true);
+      expect(isColorVariable('var(--text-dark)')).toBe(true);
+      expect(isColorVariable('var(--btn-bg)')).toBe(true);
+    });
+
+    test('should handle variables with numbers', () => {
+      expect(isColorVariable('var(--color-1)')).toBe(true);
+      expect(isColorVariable('var(--bg-2-main)')).toBe(true);
+    });
+
+    test('should trim whitespace', () => {
+      expect(isColorVariable('  var(--primary)  ')).toBe(true);
+      expect(isColorVariable('\tvar(--color)\t')).toBe(true);
+    });
+
+    test('should return false for invalid references', () => {
+      expect(isColorVariable('var(primary-color)')).toBe(false);
+      expect(isColorVariable('var(-primary)')).toBe(false);
+      expect(isColorVariable('var(--)')).toBe(false);
+      expect(isColorVariable('var(--primary-color')).toBe(false);
+      expect(isColorVariable('var--primary-color)')).toBe(false);
+    });
+
+    test('should return false for non-string values', () => {
+      expect(isColorVariable(123)).toBe(false);
+      expect(isColorVariable(null)).toBe(false);
+      expect(isColorVariable(undefined)).toBe(false);
+      expect(isColorVariable({})).toBe(false);
+      expect(isColorVariable([])).toBe(false);
+    });
+
+    test('should return false for empty string', () => {
+      expect(isColorVariable('')).toBe(false);
+    });
+
+    test('should return false for plain color values', () => {
+      expect(isColorVariable('#ff0000')).toBe(false);
+      expect(isColorVariable('rgb(255, 0, 0)')).toBe(false);
+      expect(isColorVariable('red')).toBe(false);
+    });
+  });
+
+  describe('extractVariableName', () => {
+    test('should extract variable name from valid reference', () => {
+      expect(extractVariableName('var(--primary-color)')).toBe('primary-color');
+      expect(extractVariableName('var(--background)')).toBe('background');
+      expect(extractVariableName('var(--text-dark)')).toBe('text-dark');
+    });
+
+    test('should handle variables with numbers', () => {
+      expect(extractVariableName('var(--color-1)')).toBe('color-1');
+      expect(extractVariableName('var(--bg-2-main)')).toBe('bg-2-main');
+    });
+
+    test('should return null for invalid references', () => {
+      expect(extractVariableName('var(primary-color)')).toBeNull();
+      expect(extractVariableName('primary-color')).toBeNull();
+      expect(extractVariableName('#ff0000')).toBeNull();
+      expect(extractVariableName('')).toBeNull();
+    });
+
+    test('should return null for malformed var syntax', () => {
+      expect(extractVariableName('var(--primary')).toBeNull();
+      expect(extractVariableName('var--primary)')).toBeNull();
+      expect(extractVariableName('var(--)')).toBeNull();
+    });
+  });
+
+  describe('createVariableReference', () => {
+    test('should create valid variable reference', () => {
+      expect(createVariableReference('primary-color')).toBe('var(--primary-color)');
+      expect(createVariableReference('background')).toBe('var(--background)');
+      expect(createVariableReference('text-dark')).toBe('var(--text-dark)');
+    });
+
+    test('should handle variables with numbers', () => {
+      expect(createVariableReference('color-1')).toBe('var(--color-1)');
+      expect(createVariableReference('bg-2-main')).toBe('var(--bg-2-main)');
+    });
+
+    test('should handle single word names', () => {
+      expect(createVariableReference('primary')).toBe('var(--primary)');
+      expect(createVariableReference('bg')).toBe('var(--bg)');
+    });
+
+    test('should handle empty string', () => {
+      expect(createVariableReference('')).toBe('var(--)');
+    });
+  });
+
+  describe('resolveColorVariable', () => {
+    const colorMap = {
+      'primary-color': '#3b82f6',
+      'background': '#ffffff',
+      'text-dark': '#1f2937',
+      'accent': 'rgb(239, 68, 68)',
+    };
+
+    test('should resolve valid variable to color value', () => {
+      expect(resolveColorVariable('var(--primary-color)', colorMap)).toBe('#3b82f6');
+      expect(resolveColorVariable('var(--background)', colorMap)).toBe('#ffffff');
+      expect(resolveColorVariable('var(--text-dark)', colorMap)).toBe('#1f2937');
+      expect(resolveColorVariable('var(--accent)', colorMap)).toBe('rgb(239, 68, 68)');
+    });
+
+    test('should return original value for non-variables', () => {
+      expect(resolveColorVariable('#ff0000', colorMap)).toBe('#ff0000');
+      expect(resolveColorVariable('red', colorMap)).toBe('red');
+      expect(resolveColorVariable('rgb(0, 0, 0)', colorMap)).toBe('rgb(0, 0, 0)');
+    });
+
+    test('should return original reference for undefined variable', () => {
+      expect(resolveColorVariable('var(--unknown)', colorMap)).toBe('var(--unknown)');
+      expect(resolveColorVariable('var(--missing)', colorMap)).toBe('var(--missing)');
+    });
+
+    test('should handle non-string values', () => {
+      expect(resolveColorVariable(123, colorMap)).toBe('123');
+      expect(resolveColorVariable(null, colorMap)).toBe('null');
+      expect(resolveColorVariable(undefined, colorMap)).toBe('undefined');
+    });
+
+    test('should handle empty color map', () => {
+      expect(resolveColorVariable('var(--primary)', {})).toBe('var(--primary)');
+      expect(resolveColorVariable('#ff0000', {})).toBe('#ff0000');
+    });
+  });
+
+  describe('resolveColorVariablesInStyles', () => {
+    const colorMap = {
+      'primary': '#3b82f6',
+      'background': '#ffffff',
+      'text': '#1f2937',
+    };
+
+    test('should resolve all color variables in styles', () => {
+      const styles = {
+        color: 'var(--text)',
+        backgroundColor: 'var(--background)',
+        borderColor: 'var(--primary)',
+      };
+
+      const resolved = resolveColorVariablesInStyles(styles, colorMap);
+
+      expect(resolved).toEqual({
+        color: '#1f2937',
+        backgroundColor: '#ffffff',
+        borderColor: '#3b82f6',
+      });
+    });
+
+    test('should preserve non-variable values', () => {
+      const styles = {
+        color: 'var(--text)',
+        backgroundColor: '#ffffff',
+        borderColor: 'red',
+        fontSize: '16px',
+      };
+
+      const resolved = resolveColorVariablesInStyles(styles, colorMap);
+
+      expect(resolved).toEqual({
+        color: '#1f2937',
+        backgroundColor: '#ffffff',
+        borderColor: 'red',
+        fontSize: '16px',
+      });
+    });
+
+    test('should handle empty styles object', () => {
+      const resolved = resolveColorVariablesInStyles({}, colorMap);
+      expect(resolved).toEqual({});
+    });
+
+    test('should handle styles with no variables', () => {
+      const styles = {
+        color: '#000000',
+        backgroundColor: 'white',
+        padding: '10px',
+      };
+
+      const resolved = resolveColorVariablesInStyles(styles, colorMap);
+
+      expect(resolved).toEqual(styles);
+    });
+
+    test('should preserve undefined variables', () => {
+      const styles = {
+        color: 'var(--unknown)',
+        backgroundColor: 'var(--background)',
+      };
+
+      const resolved = resolveColorVariablesInStyles(styles, colorMap);
+
+      expect(resolved).toEqual({
+        color: 'var(--unknown)',
+        backgroundColor: '#ffffff',
+      });
+    });
+
+    test('should handle non-string style values', () => {
+      const styles = {
+        color: 'var(--text)',
+        zIndex: 10,
+        opacity: 0.5,
+        display: null as any,
+      };
+
+      const resolved = resolveColorVariablesInStyles(styles, colorMap);
+
+      expect(resolved.color).toBe('#1f2937');
+      expect(resolved.zIndex).toBe(10);
+      expect(resolved.opacity).toBe(0.5);
+      expect(resolved.display).toBeNull();
+    });
+  });
+
+  describe('getColorVariablesFromStyles', () => {
+    test('should extract all color variable names from styles', () => {
+      const styles = {
+        color: 'var(--text)',
+        backgroundColor: 'var(--background)',
+        borderColor: 'var(--primary)',
+      };
+
+      const variables = getColorVariablesFromStyles(styles);
+
+      expect(variables).toContain('text');
+      expect(variables).toContain('background');
+      expect(variables).toContain('primary');
+      expect(variables.length).toBe(3);
+    });
+
+    test('should ignore non-variable values', () => {
+      const styles = {
+        color: 'var(--text)',
+        backgroundColor: '#ffffff',
+        borderColor: 'red',
+        padding: '10px',
+      };
+
+      const variables = getColorVariablesFromStyles(styles);
+
+      expect(variables).toEqual(['text']);
+    });
+
+    test('should handle empty styles object', () => {
+      const variables = getColorVariablesFromStyles({});
+      expect(variables).toEqual([]);
+    });
+
+    test('should handle styles with no variables', () => {
+      const styles = {
+        color: '#000000',
+        backgroundColor: 'white',
+        padding: '10px',
+      };
+
+      const variables = getColorVariablesFromStyles(styles);
+      expect(variables).toEqual([]);
+    });
+
+    test('should deduplicate variable names', () => {
+      const styles = {
+        color: 'var(--primary)',
+        backgroundColor: 'var(--primary)',
+        borderColor: 'var(--primary)',
+      };
+
+      const variables = getColorVariablesFromStyles(styles);
+
+      expect(variables).toEqual(['primary']);
+    });
+
+    test('should handle mixed variable and non-variable values', () => {
+      const styles = {
+        color: 'var(--text)',
+        backgroundColor: 'var(--background)',
+        borderColor: 'red',
+        outlineColor: 'var(--accent)',
+        padding: '10px',
+        margin: 0,
+      };
+
+      const variables = getColorVariablesFromStyles(styles);
+
+      expect(variables).toContain('text');
+      expect(variables).toContain('background');
+      expect(variables).toContain('accent');
+      expect(variables.length).toBe(3);
+    });
+
+    test('should handle invalid variable syntax gracefully', () => {
+      const styles = {
+        color: 'var(--text)',
+        backgroundColor: 'var(invalid)',
+        borderColor: 'var(--)',
+      };
+
+      const variables = getColorVariablesFromStyles(styles);
+
+      expect(variables).toEqual(['text']);
+    });
+  });
+});

package/lib/shared/colorVariableUtils.ts

@@ -0,0 +1,97 @@
+/**
+ * Color Variable Utilities
+ * Handles resolution and validation of color variables in styles
+ */
+
+/**
+ * Check if a value is a color variable reference
+ * @example "var(--primary-color)" -> true
+ */
+export function isColorVariable(value: string | unknown): value is string {
+  if (typeof value !== 'string') return false;
+  return /^var\(--[\w-]+\)$/.test(value.trim());
+}
+
+/**
+ * Extract variable name from a color variable reference
+ * @example "var(--primary-color)" -> "primary-color"
+ */
+export function extractVariableName(value: string): string | null {
+  const match = value.match(/^var\(--([^)]+)\)$/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Create a color variable reference
+ * @example "primary-color" -> "var(--primary-color)"
+ */
+export function createVariableReference(variableName: string): string {
+  return `var(--${variableName})`;
+}
+
+/**
+ * Resolve a color variable to its actual value
+ * @param value - The style value (may be a variable reference or actual color)
+ * @param colorMap - Map of variable names to color values
+ * @returns Resolved color value or original value if not a variable
+ */
+export function resolveColorVariable(
+  value: string | unknown,
+  colorMap: Record<string, string>
+): string {
+  if (!isColorVariable(value)) {
+    return String(value);
+  }
+
+  const varName = extractVariableName(value);
+  if (!varName) {
+    return String(value);
+  }
+
+  return colorMap[varName] || String(value);
+}
+
+/**
+ * Replace color variables in a style object
+ * @param styles - Style object with potential variable references
+ * @param colorMap - Map of variable names to color values
+ * @returns New style object with variables resolved
+ */
+export function resolveColorVariablesInStyles(
+  styles: Record<string, any>,
+  colorMap: Record<string, string>
+): Record<string, any> {
+  const resolved: Record<string, any> = {};
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (typeof value === 'string') {
+      resolved[key] = resolveColorVariable(value, colorMap);
+    } else {
+      resolved[key] = value;
+    }
+  }
+
+  return resolved;
+}
+
+/**
+ * Get all color variable references from a style object
+ * @param styles - Style object to search
+ * @returns Array of variable names found in styles
+ */
+export function getColorVariablesFromStyles(
+  styles: Record<string, any>
+): string[] {
+  const variables = new Set<string>();
+
+  for (const value of Object.values(styles)) {
+    if (isColorVariable(value)) {
+      const varName = extractVariableName(value);
+      if (varName) {
+        variables.add(varName);
+      }
+    }
+  }
+
+  return Array.from(variables);
+}

package/lib/shared/constants.test.ts

@@ -0,0 +1,175 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  SERVER_PORT,
+  API_ROUTES,
+  HMR_ROUTE,
+  FILE_PATTERNS,
+  DEFAULT_TIMEOUT,
+  WEBSOCKET_STATES,
+  NOT_FOUND_TIMEOUT_MS,
+  TAB_SWITCH_DELAY_MS,
+  IFRAME_HIGHLIGHT_DELAY_MS,
+  TREE_SCROLL_DELAY_MS,
+  HOVER_HIGHLIGHT_DELAY_MS,
+  MAX_PORT_ATTEMPTS,
+  IFRAME_MESSAGE_TYPES,
+  NODE_TYPE,
+  SPECIAL_PATHS,
+  DEFAULT_COMPONENT_TYPES,
+  DEFAULT_ICON_COLOR,
+} from './constants';
+
+describe('constants', () => {
+  describe('SERVER_PORT', () => {
+    test('returns a valid port number', () => {
+      expect(typeof SERVER_PORT).toBe('number');
+      expect(SERVER_PORT).toBeGreaterThan(0);
+      expect(SERVER_PORT).toBeLessThan(65536);
+    });
+  });
+
+  describe('API_ROUTES', () => {
+    test('contains all expected route definitions', () => {
+      expect(API_ROUTES.PAGES).toBe('/api/pages');
+      expect(API_ROUTES.COMPONENTS).toBe('/api/components');
+      expect(API_ROUTES.YAML).toBe('/api/yaml');
+      expect(API_ROUTES.PAGE_DATA).toBe('/api/page-data');
+      expect(API_ROUTES.COMPONENT_DATA).toBe('/api/component-data');
+      expect(API_ROUTES.SAVE_PAGE).toBe('/api/save-page');
+      expect(API_ROUTES.SAVE_COMPONENT).toBe('/api/save-component');
+      expect(API_ROUTES.SAVE_COMPONENT_JS).toBe('/api/save-component-js');
+      expect(API_ROUTES.SAVE_COMPONENT_CSS).toBe('/api/save-component-css');
+      expect(API_ROUTES.COMPONENT_JS).toBe('/api/component-js');
+      expect(API_ROUTES.CONFIG).toBe('/api/config');
+      expect(API_ROUTES.SAVE_CONFIG).toBe('/api/save-config');
+      expect(API_ROUTES.SELECTION).toBe('/api/selection');
+      expect(API_ROUTES.COLORS_CONFIG).toBe('/api/colors-config');
+      expect(API_ROUTES.SAVE_COLORS).toBe('/api/save-colors');
+    });
+
+    test('all routes are strings starting with /api/', () => {
+      Object.values(API_ROUTES).forEach(route => {
+        expect(typeof route).toBe('string');
+        expect(route.startsWith('/api/')).toBe(true);
+      });
+    });
+  });
+
+  describe('HMR_ROUTE', () => {
+    test('is defined correctly', () => {
+      expect(HMR_ROUTE).toBe('/hmr');
+    });
+  });
+
+  describe('FILE_PATTERNS', () => {
+    test('contains expected patterns', () => {
+      expect(FILE_PATTERNS.PAGES).toBe('./pages');
+      expect(FILE_PATTERNS.COMPONENTS).toBe('./components');
+    });
+  });
+
+  describe('DEFAULT_TIMEOUT', () => {
+    test('is a positive number', () => {
+      expect(typeof DEFAULT_TIMEOUT).toBe('number');
+      expect(DEFAULT_TIMEOUT).toBeGreaterThan(0);
+      expect(DEFAULT_TIMEOUT).toBe(5000);
+    });
+  });
+
+  describe('WEBSOCKET_STATES', () => {
+    test('matches WebSocket standard state values', () => {
+      expect(WEBSOCKET_STATES.CONNECTING).toBe(0);
+      expect(WEBSOCKET_STATES.OPEN).toBe(1);
+      expect(WEBSOCKET_STATES.CLOSING).toBe(2);
+      expect(WEBSOCKET_STATES.CLOSED).toBe(3);
+    });
+  });
+
+  describe('timeout constants', () => {
+    test('all timeout values are positive numbers', () => {
+      expect(NOT_FOUND_TIMEOUT_MS).toBe(300);
+      expect(TAB_SWITCH_DELAY_MS).toBe(100);
+      expect(IFRAME_HIGHLIGHT_DELAY_MS).toBe(100);
+      expect(TREE_SCROLL_DELAY_MS).toBe(200);
+      expect(HOVER_HIGHLIGHT_DELAY_MS).toBe(50);
+    });
+  });
+
+  describe('MAX_PORT_ATTEMPTS', () => {
+    test('is a positive number', () => {
+      expect(MAX_PORT_ATTEMPTS).toBe(10);
+    });
+  });
+
+  describe('IFRAME_MESSAGE_TYPES', () => {
+    test('contains all expected message types', () => {
+      expect(IFRAME_MESSAGE_TYPES.DELETE_ELEMENT).toBe('DELETE_ELEMENT');
+      expect(IFRAME_MESSAGE_TYPES.TOGGLE_SELECTING_MODE).toBe('TOGGLE_SELECTING_MODE');
+      expect(IFRAME_MESSAGE_TYPES.SET_TAB).toBe('SET_TAB');
+      expect(IFRAME_MESSAGE_TYPES.COPY_ELEMENT).toBe('COPY_ELEMENT');
+      expect(IFRAME_MESSAGE_TYPES.PASTE_ELEMENT).toBe('PASTE_ELEMENT');
+      expect(IFRAME_MESSAGE_TYPES.ARROW_UP).toBe('ARROW_UP');
+      expect(IFRAME_MESSAGE_TYPES.ARROW_DOWN).toBe('ARROW_DOWN');
+      expect(IFRAME_MESSAGE_TYPES.ARROW_LEFT).toBe('ARROW_LEFT');
+      expect(IFRAME_MESSAGE_TYPES.ARROW_RIGHT).toBe('ARROW_RIGHT');
+      expect(IFRAME_MESSAGE_TYPES.OPEN_COMMAND_PALETTE).toBe('OPEN_COMMAND_PALETTE');
+      expect(IFRAME_MESSAGE_TYPES.EDIT_COMPONENT).toBe('EDIT_COMPONENT');
+      expect(IFRAME_MESSAGE_TYPES.NAVIGATE_BACK).toBe('NAVIGATE_BACK');
+      expect(IFRAME_MESSAGE_TYPES.TOGGLE_ADDING_STYLE).toBe('TOGGLE_ADDING_STYLE');
+      expect(IFRAME_MESSAGE_TYPES.MOVE_ELEMENT_UP).toBe('MOVE_ELEMENT_UP');
+      expect(IFRAME_MESSAGE_TYPES.MOVE_ELEMENT_DOWN).toBe('MOVE_ELEMENT_DOWN');
+      expect(IFRAME_MESSAGE_TYPES.SELECTION_CHANGED).toBe('SELECTION_CHANGED');
+    });
+  });
+
+  describe('NODE_TYPE', () => {
+    test('contains all expected node types', () => {
+      expect(NODE_TYPE.NODE).toBe('node');
+      expect(NODE_TYPE.COMPONENT).toBe('component');
+      expect(NODE_TYPE.SLOT).toBe('slot');
+      expect(NODE_TYPE.EMBED).toBe('embed');
+      expect(NODE_TYPE.OBJECT_LINK).toBe('object-link');
+      expect(NODE_TYPE.LOCALE_LIST).toBe('locale-list');
+      expect(NODE_TYPE.TEXT).toBe('text');
+    });
+  });
+
+  describe('SPECIAL_PATHS', () => {
+    test('contains all expected special path identifiers', () => {
+      expect(SPECIAL_PATHS.COMPONENT_INTERFACE).toBe('component_interface');
+      expect(SPECIAL_PATHS.COMPONENT_JAVASCRIPT).toBe('component_javascript');
+      expect(SPECIAL_PATHS.COMPONENT_CSS).toBe('component_css');
+      expect(SPECIAL_PATHS.STRUCTURE_STYLE).toBe('structure_style');
+    });
+  });
+
+  describe('DEFAULT_COMPONENT_TYPES', () => {
+    test('is an array with expected component types', () => {
+      expect(Array.isArray(DEFAULT_COMPONENT_TYPES)).toBe(true);
+      expect(DEFAULT_COMPONENT_TYPES.length).toBe(3);
+    });
+
+    test('contains ui, layout, and content types', () => {
+      const ids = DEFAULT_COMPONENT_TYPES.map(t => t.id);
+      expect(ids).toContain('ui');
+      expect(ids).toContain('layout');
+      expect(ids).toContain('content');
+    });
+
+    test('each type has id, label, and color', () => {
+      DEFAULT_COMPONENT_TYPES.forEach(type => {
+        expect(typeof type.id).toBe('string');
+        expect(typeof type.label).toBe('string');
+        expect(typeof type.color).toBe('string');
+        expect(type.color.startsWith('#')).toBe(true);
+      });
+    });
+  });
+
+  describe('DEFAULT_ICON_COLOR', () => {
+    test('is a valid hex color', () => {
+      expect(DEFAULT_ICON_COLOR).toBe('#6b7280');
+      expect(DEFAULT_ICON_COLOR.startsWith('#')).toBe(true);
+    });
+  });
+});