meno-core 1.0.0

package/lib/shared/styleNodeUtils.ts

@@ -0,0 +1,102 @@
+/**
+ * Utilities for working with styles in ComponentNode structures
+ * Provides helper functions for applying and merging styles based on node type
+ */
+
+import type { ComponentNode, HtmlNode, ComponentInstanceNode, StyleValue, ResponsiveStyleObject } from './types';
+import { isComponentNode, isHtmlNode, isEmbedNode } from './nodeUtils';
+import { isResponsiveStyle } from './styleUtils';
+
+/**
+ * Apply styles to a ComponentNode based on its type
+ * - HTML nodes: styles go at top level (node.style)
+ * - Component instances: styles go in props.style
+ */
+export function applyStylesToNode(
+  node: ComponentNode,
+  styles: StyleValue | Record<string, string | number> | null | undefined,
+  viewportWidth?: number
+): ComponentNode {
+  if (!styles) return node;
+
+  if (isComponentNode(node)) {
+    // Component instance: put styles in props.style
+    if (!node.props) {
+      node.props = {};
+    }
+
+    node.props.style = { ...(node.props.style || {}), ...styles };
+  } else if (isHtmlNode(node) || isEmbedNode(node)) {
+    // HTML node and Embed node: put styles at top level
+    node.style = styles as StyleValue;
+  }
+
+  return node;
+}
+
+/**
+ * Merge instance styles with structure styles for a ComponentNode
+ * Instance styles override structure styles
+ */
+export function mergeNodeStyles(
+  node: ComponentNode,
+  instanceStyles: StyleValue | Record<string, string | number> | null | undefined,
+  viewportWidth?: number
+): ComponentNode {
+  if (!instanceStyles) return node;
+
+  if (isHtmlNode(node) || isEmbedNode(node)) {
+    // For HTML nodes and Embed nodes: merge instance styles with existing top-level styles
+    const existingStyle = node.style;
+    if (existingStyle && typeof existingStyle === 'object') {
+      node.style = {
+        ...(existingStyle as Record<string, any>),
+        ...(instanceStyles as Record<string, any>)
+      } as StyleValue;
+    } else {
+      node.style = instanceStyles as StyleValue;
+    }
+  } else if (isComponentNode(node)) {
+    // For component instances: merge into props.style
+    if (!node.props) {
+      node.props = {};
+    }
+    const existingStyle = node.props.style;
+    if (existingStyle && typeof existingStyle === 'object') {
+      node.props.style = {
+        ...(existingStyle as Record<string, any>),
+        ...(instanceStyles as Record<string, any>)
+      };
+    } else {
+      node.props.style = instanceStyles;
+    }
+  }
+
+  return node;
+}
+
+/**
+ * Extract styles from a ComponentNode based on its type
+ * Returns a flat style object ready for React props
+ */
+export function extractStylesFromNode(
+  node: ComponentNode,
+  viewportWidth?: number
+): Record<string, string | number> {
+  if (isComponentNode(node)) {
+    // Component instance: styles are in props.style
+    const style = node.props?.style;
+    if (!style) return {};
+
+    return style as Record<string, string | number>;
+  } else if (isHtmlNode(node) || isEmbedNode(node)) {
+    // HTML node and Embed node: styles are at top level
+    const style = node.style;
+    if (!style) return {};
+
+    return style as Record<string, string | number>;
+  }
+
+  return {};
+}
+

package/lib/shared/styleUtils.test.ts

@@ -0,0 +1,238 @@
+import { describe, test, expect } from 'bun:test';
+import { isResponsiveStyle, isStyleObject, isStyleValue } from './styleUtils';
+
+/**
+ * styleUtils Tests
+ * Tests style type guards and utilities
+ */
+
+describe('styleUtils', () => {
+  describe('isResponsiveStyle', () => {
+    test('should return true for object with base key', () => {
+      expect(isResponsiveStyle({ base: { color: 'red' } })).toBe(true);
+    });
+
+    test('should return true for object with tablet key', () => {
+      expect(isResponsiveStyle({ tablet: { color: 'blue' } })).toBe(true);
+    });
+
+    test('should return true for object with mobile key', () => {
+      expect(isResponsiveStyle({ mobile: { color: 'green' } })).toBe(true);
+    });
+
+    test('should return true for object with multiple responsive keys', () => {
+      expect(isResponsiveStyle({
+        base: { color: 'red' },
+        tablet: { color: 'blue' },
+        mobile: { color: 'green' },
+      })).toBe(true);
+    });
+
+    test('should return false for regular style object', () => {
+      expect(isResponsiveStyle({ color: 'red', fontSize: '16px' })).toBe(false);
+    });
+
+    test('should return false for null', () => {
+      expect(isResponsiveStyle(null)).toBe(false);
+    });
+
+    test('should return false for undefined', () => {
+      expect(isResponsiveStyle(undefined)).toBe(false);
+    });
+
+    test('should return false for string', () => {
+      expect(isResponsiveStyle('red')).toBe(false);
+    });
+
+    test('should return false for number', () => {
+      expect(isResponsiveStyle(16)).toBe(false);
+    });
+
+    test('should return false for array', () => {
+      expect(isResponsiveStyle([])).toBe(false);
+      expect(isResponsiveStyle([{ color: 'red' }])).toBe(false);
+    });
+
+    test('should return false for empty object', () => {
+      expect(isResponsiveStyle({})).toBe(false);
+    });
+
+    test('should handle object with base key and other properties', () => {
+      expect(isResponsiveStyle({
+        base: { color: 'red' },
+        customProp: 'value',
+      })).toBe(true);
+    });
+  });
+
+  describe('isStyleObject', () => {
+    test('should return true for simple style object', () => {
+      expect(isStyleObject({ color: 'red', fontSize: '16px' })).toBe(true);
+    });
+
+    test('should return true for style object with string values', () => {
+      expect(isStyleObject({
+        color: 'red',
+        backgroundColor: 'blue',
+        padding: '10px',
+      })).toBe(true);
+    });
+
+    test('should return true for style object with number values', () => {
+      expect(isStyleObject({
+        width: 100,
+        height: 200,
+        opacity: 0.5,
+      })).toBe(true);
+    });
+
+    test('should return true for style object with mixed string and number', () => {
+      expect(isStyleObject({
+        color: 'red',
+        width: 100,
+        fontSize: '16px',
+        opacity: 0.8,
+      })).toBe(true);
+    });
+
+    test('should return true for style object with _mapping property', () => {
+      expect(isStyleObject({
+        color: { _mapping: 'theme.colors.primary' },
+      })).toBe(true);
+    });
+
+    test('should return false for responsive style object', () => {
+      expect(isStyleObject({
+        base: { color: 'red' },
+        tablet: { color: 'blue' },
+      })).toBe(false);
+    });
+
+    test('should return false for object with only base key', () => {
+      expect(isStyleObject({ base: { color: 'red' } })).toBe(false);
+    });
+
+    test('should return false for null', () => {
+      expect(isStyleObject(null)).toBe(false);
+    });
+
+    test('should return false for undefined', () => {
+      expect(isStyleObject(undefined)).toBe(false);
+    });
+
+    test('should return false for string', () => {
+      expect(isStyleObject('red')).toBe(false);
+    });
+
+    test('should return false for number', () => {
+      expect(isStyleObject(100)).toBe(false);
+    });
+
+    test('should return false for array', () => {
+      expect(isStyleObject([])).toBe(false);
+      expect(isStyleObject([{ color: 'red' }])).toBe(false);
+    });
+
+    test('should return false for empty object', () => {
+      expect(isStyleObject({})).toBe(true); // Empty object is technically a valid StyleObject
+    });
+
+    test('should return false for object with invalid value types', () => {
+      expect(isStyleObject({
+        color: 'red',
+        invalid: [],
+      })).toBe(false);
+    });
+
+    test('should return false for object with nested objects without _mapping', () => {
+      expect(isStyleObject({
+        color: 'red',
+        nested: { prop: 'value' },
+      })).toBe(false);
+    });
+
+    test('should handle complex StyleMapping objects', () => {
+      expect(isStyleObject({
+        color: { _mapping: 'colors.primary' },
+        fontSize: '16px',
+        width: 100,
+      })).toBe(true);
+    });
+  });
+
+  describe('isStyleValue', () => {
+    test('should return true for simple style object', () => {
+      expect(isStyleValue({ color: 'red', fontSize: '16px' })).toBe(true);
+    });
+
+    test('should return true for responsive style object', () => {
+      expect(isStyleValue({
+        base: { color: 'red' },
+        tablet: { color: 'blue' },
+      })).toBe(true);
+    });
+
+    test('should return true for object with base key', () => {
+      expect(isStyleValue({ base: { color: 'red' } })).toBe(true);
+    });
+
+    test('should return true for object with tablet key', () => {
+      expect(isStyleValue({ tablet: { color: 'blue' } })).toBe(true);
+    });
+
+    test('should return true for object with mobile key', () => {
+      expect(isStyleValue({ mobile: { color: 'green' } })).toBe(true);
+    });
+
+    test('should return true for style object with numbers', () => {
+      expect(isStyleValue({ width: 100, height: 200 })).toBe(true);
+    });
+
+    test('should return true for style object with _mapping', () => {
+      expect(isStyleValue({ color: { _mapping: 'theme.primary' } })).toBe(true);
+    });
+
+    test('should return false for null', () => {
+      expect(isStyleValue(null)).toBe(false);
+    });
+
+    test('should return false for undefined', () => {
+      expect(isStyleValue(undefined)).toBe(false);
+    });
+
+    test('should return false for string', () => {
+      expect(isStyleValue('red')).toBe(false);
+    });
+
+    test('should return false for number', () => {
+      expect(isStyleValue(100)).toBe(false);
+    });
+
+    test('should return false for array', () => {
+      expect(isStyleValue([])).toBe(false);
+      expect(isStyleValue([{ color: 'red' }])).toBe(false);
+    });
+
+    test('should return true for empty object', () => {
+      expect(isStyleValue({})).toBe(true);
+    });
+
+    test('should handle complex responsive styles', () => {
+      expect(isStyleValue({
+        base: { color: 'red', fontSize: '18px' },
+        tablet: { color: 'blue', fontSize: '16px' },
+        mobile: { color: 'green', fontSize: '14px' },
+      })).toBe(true);
+    });
+
+    test('should handle complex style objects', () => {
+      expect(isStyleValue({
+        color: 'red',
+        fontSize: '16px',
+        width: 100,
+        height: 200,
+        opacity: 0.8,
+      })).toBe(true);
+    });
+  });
+});

package/lib/shared/styleUtils.ts

@@ -0,0 +1,63 @@
+/**
+ * Shared Style Utilities
+ */
+
+import type { ResponsiveStyleObject, StyleValue, StyleObject } from './types';
+
+/**
+ * Check if a style value is a responsive style object
+ */
+export function isResponsiveStyle(style: StyleValue): style is ResponsiveStyleObject {
+  if (!style || typeof style !== 'object' || Array.isArray(style)) {
+    return false;
+  }
+  
+  // Check if it has base, tablet, or mobile keys (indicating responsive format)
+  return 'base' in style || 'tablet' in style || 'mobile' in style;
+}
+
+/**
+ * Type guard to check if a value is a StyleObject
+ */
+export function isStyleObject(style: unknown): style is StyleObject {
+  if (!style || typeof style !== 'object' || Array.isArray(style)) {
+    return false;
+  }
+  
+  // StyleObject is a record of string keys to string | number | StyleMapping values
+  // Check that it's not a ResponsiveStyleObject (which has base/tablet/mobile keys)
+  // Use proper type narrowing instead of assertion
+  if (!('base' in style) && !('tablet' in style) && !('mobile' in style)) {
+    // All values should be string, number, or objects with _mapping property
+    const obj = style as Record<string, unknown>;
+    return Object.values(obj).every(value => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        return true;
+      }
+      if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return '_mapping' in value; // StyleMapping
+      }
+      return false;
+    });
+  }
+  
+  return false; // This is a ResponsiveStyleObject, not a StyleObject
+}
+
+/**
+ * Type guard to check if a value is a StyleValue (either StyleObject or ResponsiveStyleObject)
+ */
+export function isStyleValue(style: unknown): style is StyleValue {
+  if (!style || typeof style !== 'object' || Array.isArray(style)) {
+    return false;
+  }
+  
+  // Check if it's a ResponsiveStyleObject
+  if (isResponsiveStyle(style)) {
+    return true;
+  }
+  
+  // Check if it's a StyleObject
+  return isStyleObject(style);
+}
+

package/lib/shared/themeDefaults.test.ts

@@ -0,0 +1,113 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  DEFAULT_PROPS_PANEL_SPACING,
+  DEFAULT_INPUT_STYLE,
+  DEFAULT_TEXTAREA_STYLE,
+  DEFAULT_PROPS_PANEL_COLORS,
+  type PropsPanelColors,
+  type PropsPanelSpacing,
+  type PropsPanelInputStyle,
+} from './themeDefaults';
+
+describe('themeDefaults', () => {
+  describe('DEFAULT_PROPS_PANEL_SPACING', () => {
+    test('should have tight spacing of 2px', () => {
+      expect(DEFAULT_PROPS_PANEL_SPACING.tight).toBe('2px');
+    });
+
+    test('should have normal spacing of 4px', () => {
+      expect(DEFAULT_PROPS_PANEL_SPACING.normal).toBe('4px');
+    });
+
+    test('should have loose spacing of 8px', () => {
+      expect(DEFAULT_PROPS_PANEL_SPACING.loose).toBe('8px');
+    });
+  });
+
+  describe('DEFAULT_INPUT_STYLE', () => {
+    test('should have Consolas monospace font', () => {
+      expect(DEFAULT_INPUT_STYLE.fontFamily).toBe('Consolas, monospace');
+    });
+
+    test('should have 12px font size', () => {
+      expect(DEFAULT_INPUT_STYLE.fontSize).toBe('12px');
+    });
+
+    test('should have 4px 6px padding', () => {
+      expect(DEFAULT_INPUT_STYLE.padding).toBe('4px 6px');
+    });
+
+    test('should have 3px border radius', () => {
+      expect(DEFAULT_INPUT_STYLE.borderRadius).toBe('3px');
+    });
+
+    test('should have no outline', () => {
+      expect(DEFAULT_INPUT_STYLE.outline).toBe('none');
+    });
+  });
+
+  describe('DEFAULT_TEXTAREA_STYLE', () => {
+    test('should inherit font family', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.fontFamily).toBe('inherit');
+    });
+
+    test('should have 13px font size', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.fontSize).toBe('13px');
+    });
+
+    test('should have 4px 6px padding', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.padding).toBe('4px 6px');
+    });
+
+    test('should have 3px border radius', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.borderRadius).toBe('3px');
+    });
+
+    test('should have no outline', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.outline).toBe('none');
+    });
+  });
+
+  describe('DEFAULT_PROPS_PANEL_COLORS', () => {
+    test('should have dark theme background colors', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.background).toBe('#1e1e1e');
+      expect(DEFAULT_PROPS_PANEL_COLORS.backgroundSecondary).toBe('#2d2d2d');
+      expect(DEFAULT_PROPS_PANEL_COLORS.backgroundTertiary).toBe('#252525');
+    });
+
+    test('should have border colors', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.border).toBe('#333333');
+      expect(DEFAULT_PROPS_PANEL_COLORS.borderSecondary).toBe('#444444');
+    });
+
+    test('should have text colors', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.text).toBe('#cccccc');
+      expect(DEFAULT_PROPS_PANEL_COLORS.textSecondary).toBe('#cccccc');
+      expect(DEFAULT_PROPS_PANEL_COLORS.textMuted).toBe('#888888');
+    });
+
+    test('should have code syntax colors', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.codeString).toBe('#ce9178');
+      expect(DEFAULT_PROPS_PANEL_COLORS.codeNumber).toBe('#b5cea8');
+      expect(DEFAULT_PROPS_PANEL_COLORS.codeKey).toBe('#9cdcfe');
+      expect(DEFAULT_PROPS_PANEL_COLORS.codeType).toBe('#4ec9b0');
+    });
+
+    test('should have button colors', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.buttonPrimary).toBe('#007acc');
+      expect(DEFAULT_PROPS_PANEL_COLORS.buttonPrimaryHover).toBe('#0098ff');
+      expect(DEFAULT_PROPS_PANEL_COLORS.buttonSecondary).toBe('#007acc');
+      expect(DEFAULT_PROPS_PANEL_COLORS.buttonDanger).toBe('#f48771');
+      expect(DEFAULT_PROPS_PANEL_COLORS.buttonDangerHover).toBe('#ff6b6b');
+    });
+
+    test('should have input colors', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.inputBackground).toBe('#1e1e1e');
+      expect(DEFAULT_PROPS_PANEL_COLORS.inputBorder).toBe('#444444');
+    });
+
+    test('should have hover background color', () => {
+      expect(DEFAULT_PROPS_PANEL_COLORS.hoverBackground).toBe('#2a2d2e');
+    });
+  });
+});

package/lib/shared/themeDefaults.ts

@@ -0,0 +1,103 @@
+/**
+ * Shared theme color defaults
+ * Used by PropsPanel and StyleEditor to avoid duplication
+ */
+
+export interface PropsPanelColors {
+  background: string;
+  backgroundSecondary: string;
+  backgroundTertiary: string;
+  border: string;
+  borderSecondary: string;
+  text: string;
+  textSecondary: string;
+  textMuted: string;
+  codeString: string;
+  codeNumber: string;
+  codeKey: string;
+  codeType: string;
+  buttonPrimary: string;
+  buttonPrimaryHover: string;
+  buttonSecondary: string;
+  buttonDanger: string;
+  buttonDangerHover: string;
+  inputBackground: string;
+  inputBorder: string;
+  hoverBackground: string;
+}
+
+/**
+ * Spacing constants for props panel components
+ */
+export interface PropsPanelSpacing {
+  tight: string;    // 2px - for label:colon:input gaps
+  normal: string;    // 4px - for standard gaps
+  loose: string;     // 8px - for larger gaps
+}
+
+export const DEFAULT_PROPS_PANEL_SPACING: PropsPanelSpacing = {
+  tight: '2px',
+  normal: '4px',
+  loose: '8px',
+};
+
+/**
+ * Base input style properties
+ */
+export interface PropsPanelInputStyle {
+  fontFamily: string;
+  fontSize: string;
+  padding: string;
+  borderRadius: string;
+  outline: string;
+  border?: string;
+}
+
+/**
+ * Base input style defaults
+ */
+export const DEFAULT_INPUT_STYLE: Omit<PropsPanelInputStyle, 'border' | 'color' | 'background'> = {
+  fontFamily: 'Consolas, monospace',
+  fontSize: '12px',
+  padding: '4px 6px',
+  borderRadius: '3px',
+  outline: 'none',
+};
+
+/**
+ * Base textarea style defaults
+ */
+export const DEFAULT_TEXTAREA_STYLE: Omit<PropsPanelInputStyle, 'border' | 'color' | 'background'> = {
+  fontFamily: 'inherit',
+  fontSize: '13px',
+  padding: '4px 6px',
+  borderRadius: '3px',
+  outline: 'none',
+};
+
+/**
+ * Default dark theme colors for props panel
+ */
+export const DEFAULT_PROPS_PANEL_COLORS: PropsPanelColors = {
+  background: '#1e1e1e',
+  backgroundSecondary: '#2d2d2d',
+  backgroundTertiary: '#252525',
+  border: '#333333',
+  borderSecondary: '#444444',
+  text: '#cccccc',
+  textSecondary: '#cccccc',
+  textMuted: '#888888',
+  codeString: '#ce9178',
+  codeNumber: '#b5cea8',
+  codeKey: '#9cdcfe',
+  codeType: '#4ec9b0',
+  buttonPrimary: '#007acc',
+  buttonPrimaryHover: '#0098ff',
+  buttonSecondary: '#007acc',
+  buttonDanger: '#f48771',
+  buttonDangerHover: '#ff6b6b',
+  inputBackground: '#1e1e1e',
+  inputBorder: '#444444',
+  hoverBackground: '#2a2d2e',
+};
+