meno-core 1.0.44 → 1.0.46

package/lib/shared/cssGeneration.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, test } from 'bun:test';
-import { generateRuleForClass, generateUtilityCSS, extractUtilityClassesFromHTML } from './cssGeneration';
+import { generateRuleForClass, generateUtilityCSS, generateSingleClassCSS, extractUtilityClassesFromHTML, generateInteractiveCSS } from './cssGeneration';
+import { DEFAULT_BREAKPOINTS } from './breakpoints';
+import type { ResponsiveScales } from './responsiveScaling';
+import type { InteractiveStyles } from './types/styles';
 
 describe('extractUtilityClassesFromHTML', () => {
   test('extracts ins- classes', () => {
@@ -102,9 +105,33 @@ describe('cssGeneration', () => {
       expect(rule).toBe('border: 1px solid var(--primary);');
     });
 
-    test('border-color generates correctly', () => {
+    test('border-color with named CSS color outputs directly', () => {
       const rule = generateRuleForClass('bc-red');
-      expect(rule).toBe('border-color: var(--red);');
+      expect(rule).toBe('border-color: red;');
+    });
+
+    test('border-color with variable uses var()', () => {
+      const rule = generateRuleForClass('bc-primary');
+      expect(rule).toBe('border-color: var(--primary);');
+    });
+  });
+
+  describe('CSS named colors vs variables', () => {
+    test('color with named color outputs directly', () => {
+      expect(generateRuleForClass('c-red')).toBe('color: red;');
+      expect(generateRuleForClass('c-blue')).toBe('color: blue;');
+      expect(generateRuleForClass('c-transparent')).toBe('color: transparent;');
+    });
+
+    test('background-color with named color outputs directly', () => {
+      expect(generateRuleForClass('bgc-green')).toBe('background-color: green;');
+      expect(generateRuleForClass('bgc-white')).toBe('background-color: white;');
+    });
+
+    test('color with variable name still uses var()', () => {
+      expect(generateRuleForClass('c-primary')).toBe('color: var(--primary);');
+      expect(generateRuleForClass('c-text')).toBe('color: var(--text);');
+      expect(generateRuleForClass('bgc-background')).toBe('background-color: var(--background);');
     });
   });
 
@@ -190,3 +217,82 @@ describe('cssGeneration', () => {
     });
   });
 });
+
+describe('generateSingleClassCSS - responsive classes', () => {
+  test('generates correct media query for tablet-prefixed class', () => {
+    const css = generateSingleClassCSS('t-fs-132px', DEFAULT_BREAKPOINTS);
+    expect(css).toContain('@media (max-width: 1024px)');
+    expect(css).toContain('font-size: 132px');
+    expect(css).toContain('.t-fs-132px');
+  });
+
+  test('generates correct media query for mobile-prefixed class', () => {
+    const css = generateSingleClassCSS('mob-fs-24px', DEFAULT_BREAKPOINTS);
+    expect(css).toContain('@media (max-width: 540px)');
+    expect(css).toContain('font-size: 24px');
+    expect(css).toContain('.mob-fs-24px');
+  });
+
+  test('generates base rule for non-prefixed class', () => {
+    const css = generateSingleClassCSS('fs-48px', DEFAULT_BREAKPOINTS);
+    expect(css).toContain('.fs-48px');
+    expect(css).toContain('font-size: 48px');
+    expect(css).not.toContain('@media');
+  });
+});
+
+describe('generateInteractiveCSS — auto-responsive scaling', () => {
+  const scalesEnabled: ResponsiveScales = {
+    enabled: true,
+    baseReference: 16,
+    padding: { tablet: 0.75, mobile: 0.5 },
+    fontSize: { tablet: 0.88, mobile: 0.75 },
+  };
+
+  test('flat interactive style gets scaled @media overrides', () => {
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
+    ];
+    const css = generateInteractiveCSS('c_heading_text', styles, DEFAULT_BREAKPOINTS, undefined, scalesEnabled);
+    expect(css).toContain('.c_heading_text:hover { font-size: 100px; }');
+    // tablet: 100 + (100-16)*(0.88-1) = 89.92 → 90
+    expect(css).toContain('@media (max-width: 1024px) { .c_heading_text:hover { font-size: 90px; } }');
+    // mobile: 100 + (100-16)*(0.75-1) = 79
+    expect(css).toContain('@media (max-width: 540px) { .c_heading_text:hover { font-size: 79px; } }');
+  });
+
+  test('responsive style auto-scales properties not explicitly overridden', () => {
+    const styles: InteractiveStyles = [
+      {
+        prefix: '',
+        postfix: ':hover',
+        style: {
+          base: { padding: '40px', fontSize: '100px' },
+          tablet: { fontSize: '50px' }, // explicit tablet fontSize wins
+        },
+      },
+    ];
+    const css = generateInteractiveCSS('c_btn', styles, DEFAULT_BREAKPOINTS, undefined, scalesEnabled);
+    // Tablet @media must contain the explicit fontSize AND the auto-scaled padding
+    // padding tablet: 40 + (40-16)*(0.75-1) = 34
+    expect(css).toMatch(/@media \(max-width: 1024px\) \{[^}]*font-size:\s*50px[^}]*\}/);
+    expect(css).toMatch(/@media \(max-width: 1024px\) \{[^}]*padding:\s*34px[^}]*\}/);
+    // Mobile: no explicit branch — both padding and fontSize auto-scale from base
+    // padding mobile: 40 + (40-16)*(-0.5) = 28; fontSize mobile: 79
+    expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*padding:\s*28px[^}]*\}/);
+    expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*font-size:\s*79px[^}]*\}/);
+  });
+
+  test('scaling disabled is a no-op', () => {
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
+    ];
+    const cssNoScales = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS);
+    const cssDisabled = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS, undefined, {
+      ...scalesEnabled,
+      enabled: false,
+    });
+    expect(cssNoScales).toBe(cssDisabled);
+    expect(cssNoScales).not.toContain('@media');
+  });
+});

package/lib/shared/cssGeneration.ts

@@ -6,10 +6,11 @@
 
 import { prefixToCSSProperty, propertyMap } from './utilityClassConfig';
 import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegistry';
+import { isCssNamedColor } from './cssNamedColors';
 import type { BreakpointConfig, LegacyBreakpointConfig } from './breakpoints';
 import { DEFAULT_BREAKPOINTS, getBreakpointValues } from './breakpoints';
-import type { ResponsiveScales } from './responsiveScaling';
-import { scalePropertyValue } from './responsiveScaling';
+import type { ResponsiveScales, CSSPropertyType } from './responsiveScaling';
+import { scalePropertyValue, getScaleMultiplier } from './responsiveScaling';
 import type { InteractiveStyles, StyleObject, ResponsiveStyleObject, StyleValue } from './types/styles';
 import type { RemConversionConfig } from './pxToRem';
 import { applyRemConversion, convertPxToRem, shouldConvertProperty } from './pxToRem';
@@ -84,6 +85,17 @@ const AUTO_RESPONSIVE_TYPE_MAP: Record<string, string> = {
   'gap': 'gap',
   'row-gap': 'gap',
   'column-gap': 'gap',
+  'border-radius': 'borderRadius',
+  'border-top-left-radius': 'borderRadius',
+  'border-top-right-radius': 'borderRadius',
+  'border-bottom-left-radius': 'borderRadius',
+  'border-bottom-right-radius': 'borderRadius',
+  'width': 'size',
+  'height': 'size',
+  'max-width': 'size',
+  'max-height': 'size',
+  'min-width': 'size',
+  'min-height': 'size',
 };
 
 /**
@@ -384,7 +396,11 @@ export function generateRuleForClass(className: string): string | null {
   // unless it's a hex color (#...) or RGB value
   if ((prefix === 'bgc' || prefix === 'bg' || prefix === 'c' || prefix === 'bc')) {
     // If it's not a hex color, RGB value, or pixel value, treat it as a CSS variable name
+    // Unless it's a CSS named color (red, blue, transparent, etc.) — use directly
     if (!value.startsWith('#') && !value.includes('rgb') && !value.includes('px')) {
+      if (isCssNamedColor(value)) {
+        return `${cssProp}: ${value};`;
+      }
       return `${cssProp}: var(--${value});`;
     }
   }
@@ -838,12 +854,14 @@ export function generateInteractiveCSS(
   elementClass: string,
   interactiveStyles: InteractiveStyles,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
-  remConfig?: RemConversionConfig
+  remConfig?: RemConversionConfig,
+  responsiveScales?: ResponsiveScales
 ): string {
   const css: string[] = [];
 
   // Extract breakpoint values for CSS media queries
   const breakpointValues = getBreakpointValues(breakpoints);
+  const scalingEnabled = responsiveScales?.enabled === true;
 
   for (const rule of interactiveStyles) {
     const { prefix, postfix, style } = rule;
@@ -851,6 +869,11 @@ export function generateInteractiveCSS(
     // Build full selector: {prefix}.element{postfix}
     const fullSelector = `${prefix || ''}.${elementClass}${postfix || ''}`;
 
+    // Breakpoint styles (sorted by value descending)
+    const sortedBreakpoints = Object.entries(breakpointValues).sort(
+      ([, a], [, b]) => b - a
+    );
+
     if (isResponsiveStyle(style)) {
       // Generate responsive rules
       const responsive = style as ResponsiveStyleObject;
@@ -863,15 +886,30 @@ export function generateInteractiveCSS(
         }
       }
 
-      // Breakpoint styles (sorted by value descending)
-      const sortedBreakpoints = Object.entries(breakpointValues).sort(
-        ([, a], [, b]) => b - a
-      );
-
       for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
-        const breakpointStyles = responsive[breakpointName];
-        if (breakpointStyles && Object.keys(breakpointStyles).length > 0) {
-          const properties = applyRemConversion(styleObjectToCSS(breakpointStyles), remConfig);
+        const explicit = responsive[breakpointName];
+
+        // Merge explicit breakpoint styles with auto-scaled values derived
+        // from the base, skipping any property the author explicitly set.
+        let merged: StyleObject | null = null;
+        if (explicit && Object.keys(explicit).length > 0) {
+          merged = { ...explicit };
+        }
+
+        if (scalingEnabled && responsive.base) {
+          const scaled = scaleStyleForBreakpoint(
+            responsive.base,
+            responsiveScales!,
+            breakpointName,
+            new Set(Object.keys(explicit ?? {}))
+          );
+          if (Object.keys(scaled).length > 0) {
+            merged = { ...(merged ?? {}), ...scaled };
+          }
+        }
+
+        if (merged && Object.keys(merged).length > 0) {
+          const properties = applyRemConversion(styleObjectToCSS(merged), remConfig);
           if (properties) {
             css.push(
               `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${properties}; } }`
@@ -887,6 +925,24 @@ export function generateInteractiveCSS(
         if (properties) {
           css.push(`${fullSelector} { ${properties}; }`);
         }
+
+        // Auto-scale the flat style into each enabled breakpoint.
+        if (scalingEnabled) {
+          for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
+            const scaled = scaleStyleForBreakpoint(
+              flatStyle,
+              responsiveScales!,
+              breakpointName,
+              new Set()
+            );
+            if (Object.keys(scaled).length === 0) continue;
+            const scaledProps = applyRemConversion(styleObjectToCSS(scaled), remConfig);
+            if (!scaledProps) continue;
+            css.push(
+              `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${scaledProps}; } }`
+            );
+          }
+        }
       }
     }
   }
@@ -894,6 +950,45 @@ export function generateInteractiveCSS(
   return css.join('\n');
 }
 
+/**
+ * Build a new style object containing auto-scaled values for every property
+ * in a given base style that falls into a scale category at `breakpointName`.
+ * Properties listed in `skipProperties` are left out (the author has set an
+ * explicit override at that breakpoint).
+ */
+function scaleStyleForBreakpoint(
+  baseStyle: StyleObject,
+  responsiveScales: ResponsiveScales,
+  breakpointName: string,
+  skipProperties: Set<string>
+): StyleObject {
+  const result: StyleObject = {};
+  const baseRef = responsiveScales.baseReference ?? 16;
+
+  for (const [property, value] of Object.entries(baseStyle)) {
+    if (skipProperties.has(property)) continue;
+    if (typeof value === 'object' && value !== null && '_mapping' in value) continue;
+    if (value == null) continue;
+
+    const strValue = String(value);
+    if (strValue === '') continue;
+
+    const scale = getScaleMultiplier(
+      responsiveScales,
+      property as CSSPropertyType,
+      breakpointName
+    );
+    if (scale == null) continue;
+
+    const scaledValue = scalePropertyValue(strValue, baseRef, scale);
+    if (scaledValue == null || scaledValue === strValue) continue;
+
+    result[property] = scaledValue;
+  }
+
+  return result;
+}
+
 /**
  * Collect and generate CSS for all interactive styles in a page/component
  *
@@ -904,12 +999,13 @@ export function generateInteractiveCSS(
 export function generateAllInteractiveCSS(
   interactiveStylesMap: Map<string, InteractiveStyles>,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
-  remConfig?: RemConversionConfig
+  remConfig?: RemConversionConfig,
+  responsiveScales?: ResponsiveScales
 ): string {
   const cssBlocks: string[] = [];
 
   for (const [elementClass, styles] of interactiveStylesMap) {
-    const css = generateInteractiveCSS(elementClass, styles, breakpoints, remConfig);
+    const css = generateInteractiveCSS(elementClass, styles, breakpoints, remConfig, responsiveScales);
     if (css) {
       cssBlocks.push(css);
     }

package/lib/shared/cssNamedColors.ts

@@ -0,0 +1,47 @@
+/**
+ * CSS Named Colors
+ * Complete set of CSS Level 4 named colors + keywords
+ * Used to distinguish named colors from CSS variable references
+ */
+
+export const CSS_NAMED_COLORS: ReadonlySet<string> = new Set([
+  // CSS Level 4 named colors
+  'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
+  'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood',
+  'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
+  'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki',
+  'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon',
+  'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet',
+  'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue',
+  'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
+  'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey',
+  'honeydew', 'hotpink',
+  'indianred', 'indigo', 'ivory',
+  'khaki',
+  'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan',
+  'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon',
+  'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow',
+  'lime', 'limegreen', 'linen',
+  'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple',
+  'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred',
+  'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
+  'navajowhite', 'navy',
+  'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid',
+  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff',
+  'peru', 'pink', 'plum', 'powderblue', 'purple',
+  'rebeccapurple', 'red', 'rosybrown', 'royalblue',
+  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
+  'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
+  'tan', 'teal', 'thistle', 'tomato', 'turquoise',
+  'violet',
+  'wheat', 'white', 'whitesmoke',
+  'yellow', 'yellowgreen',
+  // CSS color keywords
+  'transparent', 'currentcolor',
+  // CSS-wide keywords (should never be wrapped in var())
+  'inherit', 'initial', 'unset', 'revert',
+]);
+
+export function isCssNamedColor(value: string): boolean {
+  return CSS_NAMED_COLORS.has(value.toLowerCase());
+}

package/lib/shared/cssProperties.ts

@@ -327,6 +327,95 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
  */
 export const CSS_PROPERTIES = Object.keys(CSS_PROPERTIES_DEFINITION);
 
+/**
+ * Popularity tiers for CSS properties (lower = more common).
+ * Properties not listed default to tier 3.
+ * Used to sort autocomplete suggestions within each match group.
+ */
+const CSS_PROPERTY_PRIORITY: Record<string, number> = {
+  // Tier 1: Most commonly used
+  display: 1,
+  position: 1,
+  width: 1,
+  height: 1,
+  margin: 1,
+  padding: 1,
+  color: 1,
+  backgroundColor: 1,
+  fontSize: 1,
+  fontWeight: 1,
+  border: 1,
+  borderRadius: 1,
+  flex: 1,
+  flexDirection: 1,
+  justifyContent: 1,
+  alignItems: 1,
+  gap: 1,
+  opacity: 1,
+  overflow: 1,
+  zIndex: 1,
+  top: 1,
+  right: 1,
+  bottom: 1,
+  left: 1,
+  cursor: 1,
+  background: 1,
+  boxShadow: 1,
+  transition: 1,
+  transform: 1,
+  lineHeight: 1,
+  textAlign: 1,
+
+  // Tier 2: Common but less frequent
+  maxWidth: 2,
+  maxHeight: 2,
+  minWidth: 3,
+  minHeight: 3,
+  marginTop: 2,
+  marginBottom: 2,
+  marginLeft: 2,
+  marginRight: 2,
+  paddingTop: 2,
+  paddingBottom: 2,
+  paddingLeft: 2,
+  paddingRight: 2,
+  fontFamily: 2,
+  fontStyle: 2,
+  textDecoration: 2,
+  textTransform: 2,
+  letterSpacing: 2,
+  borderWidth: 2,
+  borderStyle: 2,
+  borderColor: 2,
+  borderBottom: 2,
+  borderTop: 2,
+  flexWrap: 2,
+  flexGrow: 2,
+  flexShrink: 2,
+  flexBasis: 2,
+  alignSelf: 2,
+  gridTemplateColumns: 2,
+  gridTemplateRows: 2,
+  backgroundImage: 2,
+  backgroundSize: 2,
+  backgroundPosition: 2,
+  whiteSpace: 2,
+  textOverflow: 2,
+  visibility: 2,
+  pointerEvents: 2,
+  userSelect: 2,
+  boxSizing: 2,
+  objectFit: 2,
+  filter: 2,
+  animation: 2,
+  outline: 2,
+  inset: 2,
+};
+
+function getPropertyPriority(property: string): number {
+  return CSS_PROPERTY_PRIORITY[property] ?? 3;
+}
+
 /**
  * CSS Property Groups for organizing styles in the editor
  * Order determines display order in the UI
@@ -406,7 +495,7 @@ function matchesAbbreviation(property: string, input: string): boolean {
  * Supports both startsWith matching and camelCase abbreviation matching
  */
 export function filterCSSProperties(input: string): string[] {
-  const normalizedInput = input.trim();
+  const normalizedInput = (input ?? '').trim();
   if (!normalizedInput) {
     return CSS_PROPERTIES.slice(0, 15); // Show first 15 by default
   }
@@ -422,8 +511,14 @@ export function filterCSSProperties(input: string): string[] {
     !startsWithMatches.includes(prop) // Don't duplicate startsWith matches
   );
 
-  // Combine results: exact matches first, then fuzzy matches
-  return [...startsWithMatches, ...abbreviationMatches];
+  // Sort each group by popularity, then combine: exact matches first, then fuzzy matches
+  const byPriority = (a: string, b: string) =>
+    getPropertyPriority(a) - getPropertyPriority(b);
+
+  return [
+    ...startsWithMatches.sort(byPriority),
+    ...abbreviationMatches.sort(byPriority),
+  ];
 }
 
 /**
@@ -449,7 +544,7 @@ export function filterPropertyValues(propertyName: string, input: string): strin
     return []; // No predefined values for this property
   }
 
-  const normalizedInput = input.trim().toLowerCase();
+  const normalizedInput = (input ?? '').trim().toLowerCase();
   if (!normalizedInput) {
     return values; // Return all values if no input
   }

package/lib/shared/index.ts

@@ -23,6 +23,7 @@ export * from './styleUtils';
 export * from './cssProperties';
 export * from './cssGeneration';
 export * from './colorProperties';
+export * from './cssNamedColors';
 export * from './utilityClassMapper';
 export * from './elementClassName';
 export * from './styleValueRegistry';

package/lib/shared/nodeUtils.ts

@@ -146,6 +146,34 @@ export function isSlotMarker(node: ComponentNode | null | undefined): node is Sl
   return node?.type === NODE_TYPE.SLOT;
 }
 
+/**
+ * Check whether a component definition's structure contains any slot marker.
+ *
+ * Used by callers that decide whether to preserve a component instance's
+ * `children` (e.g. the Figma paste swap) — there is no point passing children
+ * to a component whose template will never render them.
+ */
+export function componentHasSlot(def: ComponentDefinition | undefined | null): boolean {
+  const structure = def?.component?.structure;
+  if (!structure) return false;
+  return structureContainsSlot(structure);
+}
+
+function structureContainsSlot(node: unknown): boolean {
+  if (node == null) return false;
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      if (structureContainsSlot(item)) return true;
+    }
+    return false;
+  }
+  if (typeof node !== 'object') return false;
+  const obj = node as Record<string, unknown>;
+  if (obj.type === NODE_TYPE.SLOT) return true;
+  if (obj.children !== undefined) return structureContainsSlot(obj.children);
+  return false;
+}
+
 /**
  * Type guard to check if a node is an embed node
  */

package/lib/shared/responsiveScaling.test.ts

@@ -175,10 +175,21 @@ describe('responsiveScaling', () => {
       expect(result).toBeNull();
     });
 
-    test('should scale percentage value', () => {
+    test('should NOT scale percentage value', () => {
+      // % is relative to the container and should pass through unchanged
       const result = scaleValue('100%', 16, 0.5);
-      // 100 + (100 - 16) * (0.5 - 1) = 100 + 84 * (-0.5) = 100 - 42 = 58
-      expect(result).toBe('58%');
+      expect(result).toBe('100%');
+    });
+
+    test('should NOT scale em value (small)', () => {
+      // em is relative to local font-size and should pass through unchanged
+      const result = scaleValue('2em', 16, 0.75);
+      expect(result).toBe('2em');
+    });
+
+    test('should NOT scale em value (large)', () => {
+      const result = scaleValue('20em', 16, 0.75);
+      expect(result).toBe('20em');
     });
   });
 
@@ -216,6 +227,12 @@ describe('responsiveScaling', () => {
       const result = scalePropertyValue('inherit', 16, 0.88);
       expect(result).toBe('inherit');
     });
+
+    test('should pass % and em through while scaling px in mixed values', () => {
+      // 20px → 19px; 50% stays; 2em stays
+      const result = scalePropertyValue('20px 50% 2em', 16, 0.75);
+      expect(result).toBe('19px 50% 2em');
+    });
   });
 
   describe('getResponsiveValues', () => {

package/lib/shared/responsiveScaling.ts

@@ -18,10 +18,12 @@ export interface ResponsiveScales {
   padding?: BreakpointScales;
   margin?: BreakpointScales;
   gap?: BreakpointScales;
+  borderRadius?: BreakpointScales;
+  size?: BreakpointScales;
   [key: string]: boolean | number | BreakpointScales | undefined;
 }
 
-export type CSSPropertyType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'rowGap' | 'columnGap';
+export type CSSPropertyType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'rowGap' | 'columnGap' | 'borderRadius' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'width' | 'height' | 'maxWidth' | 'maxHeight' | 'minWidth' | 'minHeight';
 
 /**
  * Map CSS property to its scale category
@@ -33,6 +35,8 @@ function getScaleCategory(property: CSSPropertyType): keyof ResponsiveScales | n
   if (propertyStr.startsWith('padding')) return 'padding';
   if (propertyStr.startsWith('margin')) return 'margin';
   if (property === 'gap' || property === 'rowGap' || property === 'columnGap') return 'gap';
+  if (propertyStr === 'borderRadius' || (propertyStr.startsWith('border') && propertyStr.includes('Radius'))) return 'borderRadius';
+  if (property === 'width' || property === 'height' || property === 'maxWidth' || property === 'maxHeight' || property === 'minWidth' || property === 'minHeight') return 'size';
   return null;
 }
 
@@ -108,6 +112,12 @@ export function scaleValue(
   const parsed = parseValue(valueStr);
   if (!parsed) return null;
 
+  // `%` and `em` are already relative to their rendering context
+  // (container / local font-size), so they should not be rescaled.
+  if (parsed.unit === '%' || parsed.unit === 'em') {
+    return valueStr.trim();
+  }
+
   const scaledValue = calculateResponsiveValue(parsed.value, baseReference, scale);
   return `${scaledValue}${parsed.unit}`;
 }
@@ -178,6 +188,42 @@ export function getResponsiveValues(
   return result;
 }
 
+/**
+ * Resolve the effective value of a CSS variable at a given breakpoint.
+ *
+ * Precedence (mirrors generateVariablesCSS in cssGenerator.ts so the editor
+ * widget stays in sync with what the browser will render):
+ *   1. `breakpoint === 'base'` → variable.value
+ *   2. explicit per-variable override → variable.scales[breakpoint]
+ *   3. globally-scaled value (ResponsiveScales multiplier for variable.type)
+ *   4. fallback → variable.value
+ */
+export function resolveVariableValueAtBreakpoint(
+  variable: { value: string; type: string; scales?: Record<string, string> },
+  breakpoint: string,
+  responsiveScales?: ResponsiveScales | null
+): string {
+  if (breakpoint === 'base') return variable.value;
+
+  const override = variable.scales?.[breakpoint];
+  if (override !== undefined) return override;
+
+  if (responsiveScales?.enabled && variable.type !== 'none') {
+    const scale = getScaleMultiplier(
+      responsiveScales,
+      variable.type as CSSPropertyType,
+      breakpoint
+    );
+    if (scale !== null) {
+      const baseRef = responsiveScales.baseReference || 16;
+      const scaled = scalePropertyValue(variable.value, baseRef, scale);
+      if (scaled !== null) return scaled;
+    }
+  }
+
+  return variable.value;
+}
+
 /**
  * Default responsive scales configuration
  */
@@ -200,4 +246,12 @@ export const DEFAULT_RESPONSIVE_SCALES: ResponsiveScales = {
     tablet: 0.65,
     mobile: 0.4,
   },
+  borderRadius: {
+    tablet: 0.85,
+    mobile: 0.7,
+  },
+  size: {
+    tablet: 0.9,
+    mobile: 0.75,
+  },
 };