meno-core 1.0.44 → 1.0.46

package/lib/shared/responsiveStyleUtils.test.ts

@@ -72,21 +72,20 @@ describe('responsiveStyleUtils', () => {
 
       test('should merge base + tablet for tablet viewport', () => {
         const merged = mergeResponsiveStyles(responsiveStyle, 'viewport', 800, breakpoints);
-        // viewport 800 falls into tablet range (<=1024), applies all breakpoints with value <= 1024
-        // This means base + mobile (540) + tablet (1024) are all applied
+        // viewport 800 falls into tablet range (<=1024), but NOT mobile range (<=540)
+        // Only base + tablet are applied; mobile styles don't bleed into tablet
         expect(merged.color).toBe('red');
-        expect(merged.fontSize).toBe('16px'); // tablet overrides mobile
-        expect(merged.padding).toBe('10px'); // mobile overrides base, then tablet doesn't override
+        expect(merged.fontSize).toBe('16px'); // tablet overrides base
+        expect(merged.padding).toBe('20px'); // inherits from base, mobile does NOT apply
         expect(merged.margin).toBe('10px'); // from tablet
       });
 
       test('should merge all for mobile viewport', () => {
         const merged = mergeResponsiveStyles(responsiveStyle, 'viewport', 480, breakpoints);
         expect(merged.color).toBe('red');
-        expect(merged.fontSize).toBe('14px'); // mobile overrides
-        expect(merged.padding).toBe('10px'); // mobile overrides
-        // margin from tablet is NOT applied because tablet breakpoint (1024) > mobile breakpoint (540)
-        expect(merged.margin).toBeUndefined();
+        expect(merged.fontSize).toBe('14px'); // mobile overrides tablet and base
+        expect(merged.padding).toBe('10px'); // mobile overrides base
+        expect(merged.margin).toBe('10px'); // tablet margin cascades down to mobile
       });
 
       test('should handle exact breakpoint values', () => {

package/lib/shared/responsiveStyleUtils.ts

@@ -57,16 +57,15 @@ export function mergeResponsiveStyles(
       return merged;
     }
 
-    // Get all breakpoint names and sort by breakpoint value (ascending) to find which ones to apply
+    // Get all breakpoint names and sort by breakpoint value (descending)
+    // so larger breakpoints apply first, then smaller ones override — matching CSS cascade
     const breakpointEntries = Object.entries(breakpointValues);
-    breakpointEntries.sort((a, b) => a[1] - b[1]); // Sort ascending by value
-
-    const activeBreakpointValue = breakpointValues[activeBreakpoint];
+    breakpointEntries.sort((a, b) => b[1] - a[1]); // Sort descending by value
 
-    // Apply styles for breakpoints that are <= active breakpoint value
-    // This means: base (already applied) + all breakpoints up to and including the active one
+    // Apply styles for breakpoints whose range includes this viewport width
+    // A breakpoint with max-width N only applies when viewportWidth <= N
     for (const [name, value] of breakpointEntries) {
-      if (value <= activeBreakpointValue && responsiveStyle[name]) {
+      if (viewportWidth <= value && responsiveStyle[name]) {
         Object.assign(merged, responsiveStyle[name]);
       }
     }

package/lib/shared/types/components.ts

@@ -9,7 +9,7 @@ import type { LibrariesConfig } from './libraries';
 /**
  * Prop type definitions
  */
-export type PropType = 'string' | 'select' | 'boolean' | 'number' | 'link' | 'file' | 'rich-text' | 'list';
+export type PropType = 'string' | 'select' | 'boolean' | 'number' | 'link' | 'file' | 'rich-text' | 'embed' | 'list';
 
 /**
  * Project-level enum configuration

package/lib/shared/types/variables.test.ts

@@ -10,7 +10,7 @@ import type { CSSVariable } from './variables';
 describe('VARIABLE_TYPES', () => {
   it('has all expected scaling types', () => {
     const values = VARIABLE_TYPES.map(t => t.value);
-    expect(values).toEqual(['fontSize', 'padding', 'margin', 'gap', 'none']);
+    expect(values).toEqual(['fontSize', 'padding', 'margin', 'gap', 'borderRadius', 'size', 'none']);
   });
 });
 
@@ -54,9 +54,16 @@ describe('getDefaultScalingType', () => {
     expect(getDefaultScalingType('gap')).toBe('gap');
   });
 
+  it('returns borderRadius for border-radius group', () => {
+    expect(getDefaultScalingType('border-radius')).toBe('borderRadius');
+  });
+
+  it('returns size for size group', () => {
+    expect(getDefaultScalingType('size')).toBe('size');
+  });
+
   it('returns none for other groups', () => {
     expect(getDefaultScalingType('letter-spacing')).toBe('none');
-    expect(getDefaultScalingType('border-radius')).toBe('none');
     expect(getDefaultScalingType('other')).toBe('none');
   });
 });

package/lib/shared/types/variables.ts

@@ -8,7 +8,7 @@
  * Maps to responsiveScales categories for automatic responsive scaling
  * 'none' means no responsive scaling is applied
  */
-export type VariableType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'none';
+export type VariableType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'borderRadius' | 'size' | 'none';
 
 /**
  * UI filtering group for a CSS variable.
@@ -137,6 +137,8 @@ export const VARIABLE_TYPES: { value: VariableType; label: string }[] = [
   { value: 'padding', label: 'Padding' },
   { value: 'margin', label: 'Margin' },
   { value: 'gap', label: 'Gap' },
+  { value: 'borderRadius', label: 'Border Radius' },
+  { value: 'size', label: 'Width / Height' },
   { value: 'none', label: 'None' },
 ];
 
@@ -156,6 +158,8 @@ export function getDefaultScalingType(group: string, cssProperty?: string): Vari
   if (group === 'margin') return 'margin';
   if (group === 'padding') return 'padding';
   if (group === 'gap') return 'gap';
+  if (group === 'border-radius') return 'borderRadius';
+  if (group === 'size') return 'size';
   return 'none';
 }
 

package/lib/shared/utilityClassMapper.ts

@@ -89,7 +89,20 @@ function propertyValueToClass(prop: string, value: string | number): string | nu
     return className;
   }
 
-  const stringValue = String(value);
+  let stringValue = String(value);
+
+  // Strip outer quotes from fontFamily values (e.g. "Space Grotesk" → Space Grotesk)
+  if (prop === 'fontFamily') {
+    stringValue = stringValue.split(',').map(font => {
+      const trimmed = font.trim();
+      if ((trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+          (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+        return trimmed.slice(1, -1);
+      }
+      return trimmed;
+    }).join(', ');
+  }
+
   let className: string | null = null;
 
   // Check for special value mappings first

package/lib/shared/validation/propValidator.ts

@@ -168,6 +168,12 @@ function validateSingleProp(
       typeValid = typeof value === 'string';
       break;
 
+    case 'embed':
+      // Embed type stores raw HTML string
+      coercedValue = value;
+      typeValid = typeof value === 'string';
+      break;
+
     case 'list':
       // List type accepts arrays and i18n values (i18n values will be resolved later)
       coercedValue = value;

package/lib/shared/validation/schemas.ts

@@ -15,12 +15,12 @@ import { NODE_TYPE } from '../constants';
 /**
  * Prop type schema - validates PropType values (excluding list for base definition)
  */
-export const BasePropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text']);
+export const BasePropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text', 'embed']);
 
 /**
  * Full prop type schema including list
  */
-export const PropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text', 'list']);
+export const PropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text', 'embed', 'list']);
 
 /**
  * Base prop definition schema (for non-list props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"