meno-core 1.0.53 → 1.0.54

package/lib/shared/styleNodeUtils.ts

@@ -15,7 +15,7 @@ import { isResponsiveStyle } from './styleUtils';
 export function applyStylesToNode(
   node: ComponentNode,
   styles: StyleValue | Record<string, string | number> | null | undefined,
-  viewportWidth?: number
+  viewportWidth?: number,
 ): ComponentNode {
   if (!styles) return node;
 
@@ -45,12 +45,11 @@ export function applyStylesToNode(
  */
 export function deepMergeStyles(
   existing: StyleValue | Record<string, any>,
-  instance: StyleValue | Record<string, any> | null | undefined
+  instance: StyleValue | Record<string, any> | null | undefined,
 ): StyleValue {
   if (!instance) return existing as StyleValue;
 
-  const bothResponsive =
-    isResponsiveStyle(existing as StyleValue) && isResponsiveStyle(instance as StyleValue);
+  const bothResponsive = isResponsiveStyle(existing as StyleValue) && isResponsiveStyle(instance as StyleValue);
 
   if (bothResponsive) {
     const e = existing as Record<string, any>;
@@ -78,7 +77,7 @@ export function deepMergeStyles(
 export function mergeNodeStyles(
   node: ComponentNode,
   instanceStyles: StyleValue | Record<string, string | number> | null | undefined,
-  viewportWidth?: number
+  viewportWidth?: number,
 ): ComponentNode {
   if (!instanceStyles) return node;
 
@@ -110,10 +109,7 @@ export function mergeNodeStyles(
  * 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> {
+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;
@@ -130,4 +126,3 @@ export function extractStylesFromNode(
 
   return {};
 }
-

package/lib/shared/styleUtils.test.ts

@@ -21,11 +21,13 @@ describe('styleUtils', () => {
     });
 
     test('should return true for object with multiple responsive keys', () => {
-      expect(isResponsiveStyle({
-        base: { color: 'red' },
-        tablet: { color: 'blue' },
-        mobile: { color: 'green' },
-      })).toBe(true);
+      expect(
+        isResponsiveStyle({
+          base: { color: 'red' },
+          tablet: { color: 'blue' },
+          mobile: { color: 'green' },
+        }),
+      ).toBe(true);
     });
 
     test('should return false for regular style object', () => {
@@ -58,10 +60,12 @@ describe('styleUtils', () => {
     });
 
     test('should handle object with base key and other properties', () => {
-      expect(isResponsiveStyle({
-        base: { color: 'red' },
-        customProp: 'value',
-      } as any)).toBe(true);
+      expect(
+        isResponsiveStyle({
+          base: { color: 'red' },
+          customProp: 'value',
+        } as any),
+      ).toBe(true);
     });
   });
 
@@ -71,41 +75,51 @@ describe('styleUtils', () => {
     });
 
     test('should return true for style object with string values', () => {
-      expect(isStyleObject({
-        color: 'red',
-        backgroundColor: 'blue',
-        padding: '10px',
-      })).toBe(true);
+      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);
+      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);
+      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);
+      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);
+      expect(
+        isStyleObject({
+          base: { color: 'red' },
+          tablet: { color: 'blue' },
+        }),
+      ).toBe(false);
     });
 
     test('should return false for object with only base key', () => {
@@ -138,25 +152,31 @@ describe('styleUtils', () => {
     });
 
     test('should return false for object with invalid value types', () => {
-      expect(isStyleObject({
-        color: 'red',
-        invalid: [],
-      })).toBe(false);
+      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);
+      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);
+      expect(
+        isStyleObject({
+          color: { _mapping: 'colors.primary' },
+          fontSize: '16px',
+          width: 100,
+        }),
+      ).toBe(true);
     });
   });
 
@@ -166,10 +186,12 @@ describe('styleUtils', () => {
     });
 
     test('should return true for responsive style object', () => {
-      expect(isStyleValue({
-        base: { color: 'red' },
-        tablet: { color: 'blue' },
-      })).toBe(true);
+      expect(
+        isStyleValue({
+          base: { color: 'red' },
+          tablet: { color: 'blue' },
+        }),
+      ).toBe(true);
     });
 
     test('should return true for object with base key', () => {
@@ -218,21 +240,25 @@ describe('styleUtils', () => {
     });
 
     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);
+      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);
+      expect(
+        isStyleValue({
+          color: 'red',
+          fontSize: '16px',
+          width: 100,
+          height: 200,
+          opacity: 0.8,
+        }),
+      ).toBe(true);
     });
   });
 });

package/lib/shared/styleUtils.ts

@@ -11,7 +11,7 @@ export function isResponsiveStyle(style: StyleValue): style is ResponsiveStyleOb
   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;
 }
@@ -23,14 +23,14 @@ 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 => {
+    return Object.values(obj).every((value) => {
       if (typeof value === 'string' || typeof value === 'number') {
         return true;
       }
@@ -40,7 +40,7 @@ export function isStyleObject(style: unknown): style is StyleObject {
       return false;
     });
   }
-  
+
   return false; // This is a ResponsiveStyleObject, not a StyleObject
 }
 
@@ -51,7 +51,7 @@ 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 as StyleValue)) {
     return true;
@@ -60,4 +60,3 @@ export function isStyleValue(style: unknown): style is StyleValue {
   // Check if it's a StyleObject
   return isStyleObject(style);
 }
-

package/lib/shared/themeDefaults.test.ts

@@ -26,16 +26,16 @@ describe('themeDefaults', () => {
   });
 
   describe('DEFAULT_INPUT_STYLE', () => {
-    test('should have Consolas monospace font', () => {
-      expect(DEFAULT_INPUT_STYLE.fontFamily).toBe('Consolas, monospace');
+    test('should have Inter UI font stack', () => {
+      expect(DEFAULT_INPUT_STYLE.fontFamily).toBe("'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif");
     });
 
-    test('should have 12px font size', () => {
-      expect(DEFAULT_INPUT_STYLE.fontSize).toBe('12px');
+    test('should have 13px font size', () => {
+      expect(DEFAULT_INPUT_STYLE.fontSize).toBe('13px');
     });
 
-    test('should have 4px 6px padding', () => {
-      expect(DEFAULT_INPUT_STYLE.padding).toBe('4px 6px');
+    test('should have 6px 8px padding', () => {
+      expect(DEFAULT_INPUT_STYLE.padding).toBe('6px 8px');
     });
 
     test('should have 3px border radius', () => {
@@ -56,8 +56,8 @@ describe('themeDefaults', () => {
       expect(DEFAULT_TEXTAREA_STYLE.fontSize).toBe('13px');
     });
 
-    test('should have 4px 6px padding', () => {
-      expect(DEFAULT_TEXTAREA_STYLE.padding).toBe('4px 6px');
+    test('should have 6px 8px padding', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.padding).toBe('6px 8px');
     });
 
     test('should have 3px border radius', () => {
@@ -103,7 +103,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have input colors', () => {
-      expect(DEFAULT_PROPS_PANEL_COLORS.inputBackground).toBe('#1e1e1e');
+      expect(DEFAULT_PROPS_PANEL_COLORS.inputBackground).toBe('#2a2a2a');
       expect(DEFAULT_PROPS_PANEL_COLORS.inputBorder).toBe('#444444');
     });
 
@@ -120,7 +120,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have border colors', () => {
-      expect(LIGHT_PROPS_PANEL_COLORS.border).toBe('#e0e0e0');
+      expect(LIGHT_PROPS_PANEL_COLORS.border).toBe('#e4e8ec');
       expect(LIGHT_PROPS_PANEL_COLORS.borderSecondary).toBe('#d0d0d0');
     });
 
@@ -146,7 +146,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have input colors', () => {
-      expect(LIGHT_PROPS_PANEL_COLORS.inputBackground).toBe('#ffffff');
+      expect(LIGHT_PROPS_PANEL_COLORS.inputBackground).toBe('#f5f7fa');
       expect(LIGHT_PROPS_PANEL_COLORS.inputBorder).toBe('#d0d0d0');
     });
 

package/lib/shared/themeDefaults.ts

@@ -31,9 +31,9 @@ export interface PropsPanelColors {
  * 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
+  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 = {
@@ -129,4 +129,3 @@ export const LIGHT_PROPS_PANEL_COLORS: PropsPanelColors = {
   hoverBackground: '#f0f0f0',
   variableBackground: '#ebedf0',
 };
-