meno-core 1.0.45 → 1.0.47

package/lib/server/ssr/ssrRenderer.ts

@@ -119,6 +119,12 @@ interface SSRContext {
   isProductionBuild?: boolean;
   /** Collector for SSR fallback HTML of complex nodes (list, locale-list) keyed by element path */
   ssrFallbackCollector?: Map<string, string>;
+  /**
+   * Collector mapping the raw slice of a RAW_HTML_PREFIX string to its fully processed HTML
+   * (after image rewriting, component expansion, and link localization). Consumed by the
+   * Astro exporter so its `<Fragment set:html>` output matches SSR exactly.
+   */
+  processedRawHtmlCollector?: Map<string, string>;
   /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> with AVIF+WebP sources */
   imageFormat?: 'webp' | 'avif';
 }
@@ -369,7 +375,7 @@ export async function buildComponentHTML(
   cmsContext?: CMSContext,
   cmsService?: CMSService,
   isProductionBuild?: boolean
-): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string> }> {
+): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string>; processedRawHtmlCollector: Map<string, string> }> {
   // Create map to collect interactive styles during render
   const interactiveStylesMap = new Map<string, InteractiveStyles>();
   // Create array to collect high-priority images for preloading
@@ -378,8 +384,10 @@ export async function buildComponentHTML(
   const neededCollections = new Set<string>();
   // Create map to collect SSR fallback HTML for complex nodes (list, locale-list)
   const ssrFallbackCollector = new Map<string, string>();
+  // Create map to collect raw-HTML → processed-HTML for Astro exporter parity
+  const processedRawHtmlCollector = new Map<string, string>();
 
-  if (!node) return { html: '', interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector };
+  if (!node) return { html: '', interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector, processedRawHtmlCollector };
 
   // Register components for this render
   ssrComponentRegistry.merge(globalComponents);
@@ -411,12 +419,13 @@ export async function buildComponentHTML(
     neededCollections, // Track collections that need client-side data
     isProductionBuild,
     ssrFallbackCollector, // Collect SSR fallback HTML for complex nodes
+    processedRawHtmlCollector, // Collect raw→processed HTML for Astro exporter
     imageFormat: configService.getImageFormat(),
   };
 
   const html = await renderNode(node, ctx);
 
-  return { html, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector };
+  return { html, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector, processedRawHtmlCollector };
 }
 
 /**
@@ -803,10 +812,12 @@ async function renderNode(
       }
       // Check for raw HTML marker (from rich-text fields) - don't escape
       if (text.startsWith(RAW_HTML_PREFIX)) {
-        let rawHtml = text.slice(RAW_HTML_PREFIX.length);
+        const rawSlice = text.slice(RAW_HTML_PREFIX.length);
+        let rawHtml = rawSlice;
         if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap, ctx.imageFormat);
         rawHtml = await expandRichTextComponents(rawHtml, ctx);
         rawHtml = localizeRichTextLinks(rawHtml, ctx);
+        ctx.processedRawHtmlCollector?.set(rawSlice, rawHtml);
         return rawHtml;
       }
       return escapeHtml(text);
@@ -823,10 +834,12 @@ async function renderNode(
     }
     // Check for raw HTML marker (from rich-text fields) - don't escape
     if (text.startsWith(RAW_HTML_PREFIX)) {
-      let rawHtml = text.slice(RAW_HTML_PREFIX.length);
+      const rawSlice = text.slice(RAW_HTML_PREFIX.length);
+      let rawHtml = rawSlice;
       if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap, ctx.imageFormat);
       rawHtml = await expandRichTextComponents(rawHtml, ctx);
       rawHtml = localizeRichTextLinks(rawHtml, ctx);
+      ctx.processedRawHtmlCollector?.set(rawSlice, rawHtml);
       return rawHtml;
     }
     return escapeHtml(text);
@@ -1230,15 +1243,15 @@ async function renderComponent(
 
     // Merge instance style overrides, className, and attributes
     // processedStructure is typically an HTML node (the component's root element)
-    // Handle both component nodes and HTML nodes
+    // Handle component nodes, HTML nodes, and Link nodes (Link and HTML share top-level style/attributes)
     const rootNode = processedStructure as ComponentNode & { props?: Record<string, unknown>; style?: any; attributes?: Record<string, string | number | boolean> };
-    if (isComponentNode(rootNode) || isHtmlNode(rootNode)) {
+    if (isComponentNode(rootNode) || isHtmlNode(rootNode) || isLinkNode(rootNode)) {
       if (!rootNode.props) {
         rootNode.props = {};
       }
 
-      // For HTML root nodes, merge styles into node.style (where the renderer reads them)
-      if (isHtmlNode(rootNode)) {
+      // For HTML and Link root nodes, merge styles into node.style (where the renderer reads them)
+      if (isHtmlNode(rootNode) || isLinkNode(rootNode)) {
         if (propsWithStyleAndAttrs.style) {
           const existingStyle = rootNode.style;
           if (existingStyle && typeof existingStyle === 'object') {
@@ -1264,8 +1277,8 @@ async function renderComponent(
 
       // Merge className from component instance (includes responsive utility classes)
       if (propsWithStyleAndAttrs.className) {
-        if (isHtmlNode(rootNode)) {
-          // For HTML root nodes, merge into attributes where the renderer reads them
+        if (isHtmlNode(rootNode) || isLinkNode(rootNode)) {
+          // For HTML and Link root nodes, merge into attributes where the renderer reads them
           if (!rootNode.attributes) rootNode.attributes = {};
           const existingClass = (rootNode.attributes.class || '') as string;
           rootNode.attributes.class = existingClass
@@ -1280,11 +1293,11 @@ async function renderComponent(
       }
 
       // Merge attributes into props
-      Object.assign(rootNode.props, nodeAttributes);
+      Object.assign(rootNode.props as Record<string, unknown>, nodeAttributes);
 
-      // Forward nodeAttributes to rootNode.attributes for HTML root nodes
+      // Forward nodeAttributes to rootNode.attributes for HTML/Link root nodes
       // so attributes from outer components (e.g. data-component) reach the final HTML element
-      if (isHtmlNode(rootNode) && Object.keys(nodeAttributes).length > 0) {
+      if ((isHtmlNode(rootNode) || isLinkNode(rootNode)) && Object.keys(nodeAttributes).length > 0) {
         if (!rootNode.attributes) {
           rootNode.attributes = {};
         }
@@ -1428,7 +1441,7 @@ async function renderHtmlElement(
   if (voidElements.includes(tag.toLowerCase())) {
     // Special handling for img tags - inject srcset and render as <picture> when AVIF available
     if (tag.toLowerCase() === 'img') {
-      return renderImageElement(propsWithStyleAndAttrs, classAttr, attrs, ctx);
+      return renderImageElement(propsWithStyleAndAttrs, classAttr, styleAttr, attrs, ctx);
     }
 
     return `<${tag}${classAttr}${styleAttr}${attrs} />`;
@@ -1443,6 +1456,7 @@ async function renderHtmlElement(
 function renderImageElement(
   propsWithStyleAndAttrs: Record<string, unknown>,
   classAttr: string,
+  styleAttr: string,
   attrs: string,
   ctx: SSRContext
 ): string {
@@ -1525,7 +1539,7 @@ function renderImageElement(
       ? ` class="${escapeHtml(imgClasses.join(' '))}"`
       : '';
 
-    return `<picture${pictureClassAttr}>` +
+    return `<picture${pictureClassAttr}${styleAttr}>` +
       `<source type="image/avif" srcset="${escapeHtml(metadata.avifSrcset)}" sizes="${escapeHtml(sizesAttr)}" />` +
       `<source type="image/webp" srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizesAttr)}" />` +
       `<img${imgClassAttr}${imgAttrs}${attrs} />` +
@@ -1538,7 +1552,7 @@ function renderImageElement(
     imgAttrs += ` sizes="${escapeHtml(sizesAttr)}"`;
   }
 
-  return `<img${classAttr}${imgAttrs}${attrs} />`;
+  return `<img${classAttr}${styleAttr}${imgAttrs}${attrs} />`;
 }
 
 /**
@@ -1699,7 +1713,7 @@ export async function renderPageSSR(
   cmsContext?: CMSContext,
   cmsService?: CMSService,
   isProductionBuild?: boolean
-): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string> }> {
+): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string>; processedRawHtmlCollector: Map<string, string> }> {
   // Extract page content
   const rootNode = pageData?.root || undefined;
   if (!rootNode) {
@@ -1735,9 +1749,9 @@ export async function renderPageSSR(
 
   // Render the component tree to HTML with i18n and CMS support
   // Also collect interactive styles, preload images, and needed collections during render
-  const { html: contentHTML, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector } = rootNode
+  const { html: contentHTML, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector, processedRawHtmlCollector } = rootNode
     ? await buildComponentHTML(rootNode, globalComponents, pageComponents, effectiveLocale, config, slugMappings, pagePath, cmsContext, cmsService, isProductionBuild)
-    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>(), preloadImages: [], neededCollections: new Set<string>(), ssrFallbackCollector: new Map<string, string>() };
+    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>(), preloadImages: [], neededCollections: new Set<string>(), ssrFallbackCollector: new Map<string, string>(), processedRawHtmlCollector: new Map<string, string>() };
 
   // Collect JavaScript and CSS from all components
   const javascript = await collectComponentJavaScript(globalComponents, pageComponents);
@@ -1769,5 +1783,6 @@ export async function renderPageSSR(
     preloadImages,
     neededCollections,
     ssrFallbackCollector,
+    processedRawHtmlCollector,
   };
 }

package/lib/shared/constants.ts

@@ -139,6 +139,7 @@ export const IFRAME_MESSAGE_TYPES = {
   DUPLICATE_ELEMENT: 'DUPLICATE_ELEMENT',
   MAKE_COMPONENT: 'MAKE_COMPONENT',
   SWAP_TO_COMPONENT: 'SWAP_TO_COMPONENT',
+  SMART_CONNECT: 'SMART_CONNECT',
 } as const;
 
 // Component node type constants

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';
@@ -395,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});`;
     }
   }
@@ -849,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;
@@ -862,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;
@@ -874,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}; } }`
@@ -898,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}; } }`
+            );
+          }
+        }
       }
     }
   }
@@ -905,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
  *
@@ -915,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

@@ -495,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
   }
@@ -544,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/styleNodeUtils.test.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'bun:test';
 import { applyStylesToNode, mergeNodeStyles, extractStylesFromNode } from './styleNodeUtils';
-import type { HtmlNode, ComponentInstanceNode } from './types';
+import type { HtmlNode, ComponentInstanceNode, LinkNode } from './types';
 import { NODE_TYPE } from './constants';
 
 describe('styleNodeUtils', () => {
@@ -37,6 +37,13 @@ describe('styleNodeUtils', () => {
       const result = applyStylesToNode(node as any, styles);
       expect(result.style).toEqual(styles);
     });
+
+    test('should apply styles to link node at top level', () => {
+      const node: LinkNode = { type: NODE_TYPE.LINK, href: '/foo', children: [] };
+      const styles = { backgroundColor: '#252525', color: '#ffffff' };
+      const result = applyStylesToNode(node, styles);
+      expect(result.style).toEqual(styles);
+    });
   });
 
   describe('mergeNodeStyles', () => {
@@ -87,6 +94,34 @@ describe('styleNodeUtils', () => {
       const result = mergeNodeStyles(node, instanceStyles);
       expect((result as ComponentInstanceNode).props?.style).toEqual(instanceStyles);
     });
+
+    test('should merge styles for link node at top level', () => {
+      const node: LinkNode = {
+        type: NODE_TYPE.LINK,
+        href: '/foo',
+        children: [],
+        style: { color: '#000000', backgroundColor: '#ffffff' }
+      };
+      const instanceStyles = { backgroundColor: '#252525', color: '#ffffff' };
+      const result = mergeNodeStyles(node, instanceStyles);
+      expect(result.style).toEqual({ backgroundColor: '#252525', color: '#ffffff' });
+    });
+
+    test('should deep-merge responsive styles for link node', () => {
+      const node: LinkNode = {
+        type: NODE_TYPE.LINK,
+        href: '/foo',
+        children: [],
+        style: { base: { color: '#000', padding: '8px' }, tablet: { fontSize: '14px' }, mobile: {} }
+      };
+      const instanceStyles = { base: { backgroundColor: '#252525', color: '#fff' }, tablet: {}, mobile: {} };
+      const result = mergeNodeStyles(node, instanceStyles);
+      expect(result.style).toEqual({
+        base: { color: '#fff', padding: '8px', backgroundColor: '#252525' },
+        tablet: { fontSize: '14px' },
+        mobile: {},
+      });
+    });
   });
 
   describe('extractStylesFromNode', () => {
@@ -128,5 +163,16 @@ describe('styleNodeUtils', () => {
       const styles = extractStylesFromNode(node as any);
       expect(styles).toEqual({ width: '100%' });
     });
+
+    test('should extract styles from link node', () => {
+      const node: LinkNode = {
+        type: NODE_TYPE.LINK,
+        href: '/foo',
+        children: [],
+        style: { backgroundColor: '#252525' }
+      };
+      const styles = extractStylesFromNode(node);
+      expect(styles).toEqual({ backgroundColor: '#252525' });
+    });
   });
 });