meno-core 1.0.45 → 1.0.46

package/lib/server/astro/pageEmitter.ts

@@ -9,6 +9,7 @@ import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
 import type { ImageMetadataMap } from '../ssr/imageMetadata';
 import type { SlugMap } from '../../shared/slugTranslator';
+import type { ResponsiveScales } from '../../shared/responsiveScaling';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -43,6 +44,8 @@ export interface PageEmitOptions {
   pageName: string;
   /** Breakpoint config for responsive Tailwind classes */
   breakpoints?: BreakpointConfig;
+  /** Responsive scales config for auto-scaling at breakpoints */
+  responsiveScales?: ResponsiveScales;
   /** Image metadata map for responsive image generation */
   imageMetadataMap?: ImageMetadataMap;
   /** I18n config for locale list rendering */
@@ -53,6 +56,12 @@ export interface PageEmitOptions {
   slugMappings?: SlugMap[];
   /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> */
   imageFormat?: 'webp' | 'avif';
+  /**
+   * Raw-HTML slice → processed HTML captured during the page's SSR pass.
+   * Ensures `<Fragment set:html>` matches SSR output for rich-text content
+   * (image rewriting, component expansion, link localization).
+   */
+  processedRawHtml?: Map<string, string>;
 }
 
 // ---------------------------------------------------------------------------
@@ -60,7 +69,12 @@ export interface PageEmitOptions {
 // ---------------------------------------------------------------------------
 
 function escapeTemplateLiteral(s: string): string {
-  return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+  return s
+    .replace(/\\/g, '\\\\')
+    .replace(/`/g, '\\`')
+    .replace(/\$\{/g, '\\${')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
 }
 
 function escapeJSX(s: string): string {
@@ -100,11 +114,13 @@ export function emitAstroPage(options: PageEmitOptions): string {
     ssrFallbacks,
     pageName,
     breakpoints: breakpointsOpt,
+    responsiveScales,
     imageMetadataMap,
     i18nConfig,
     currentPageSlugMap,
     slugMappings,
     imageFormat,
+    processedRawHtml,
   } = options;
 
   const breakpoints = breakpointsOpt ?? DEFAULT_BREAKPOINTS;
@@ -127,6 +143,7 @@ export function emitAstroPage(options: PageEmitOptions): string {
     fileType: 'page',
     fileName: pageName,
     breakpoints,
+    responsiveScales,
     imageMetadataMap,
     locale,
     i18nConfig,
@@ -136,6 +153,9 @@ export function emitAstroPage(options: PageEmitOptions): string {
     slugMappings,
     i18nDefaultLocale: i18nConfig?.defaultLocale,
     imageFormat,
+    processedRawHtml,
+    imageImports: new Map<string, string>(),
+    fileDepth,
   };
 
   // Emit the template body
@@ -152,6 +172,16 @@ export function emitAstroPage(options: PageEmitOptions): string {
 
   importLines.push(`import BaseLayout from '${layoutImportPath}';`);
 
+  // Static image imports (astro:assets <Picture>). Map size is the single
+  // source of truth — a separate boolean would be lost by child-ctx spreads.
+  if (ctx.imageImports && ctx.imageImports.size > 0) {
+    importLines.push(`import { Picture } from 'astro:assets';`);
+    const sortedImages = Array.from(ctx.imageImports.entries()).sort(([a], [b]) => a.localeCompare(b));
+    for (const [varName, importPath] of sortedImages) {
+      importLines.push(`import ${varName} from '${importPath}';`);
+    }
+  }
+
   // Sort component imports alphabetically
   const componentImports = Array.from(ctx.imports).sort();
   for (const comp of componentImports) {

package/lib/server/astro/tailwindMapper.test.ts

@@ -0,0 +1,119 @@
+/**
+ * Tests for tailwindMapper.ts — specifically the auto-responsive scaling
+ * pass in `responsiveStylesToTailwind`.
+ */
+
+import { describe, test, expect } from 'bun:test';
+import { responsiveStylesToTailwind } from './tailwindMapper';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import type { ResponsiveScales } from '../../shared/responsiveScaling';
+
+const scalesEnabled: ResponsiveScales = {
+  enabled: true,
+  baseReference: 16,
+  padding: { tablet: 0.75, mobile: 0.5 },
+  fontSize: { tablet: 0.88, mobile: 0.75 },
+  gap: { tablet: 0.65, mobile: 0.4 },
+};
+
+const scalesDisabled: ResponsiveScales = {
+  ...scalesEnabled,
+  enabled: false,
+};
+
+describe('responsiveStylesToTailwind — auto-responsive scaling', () => {
+  test('emits scaled max-[Npx]: variants for base scalable property', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { base: { padding: '40px' } },
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    // base: 40px; tablet: 40 + (40-16)*(0.75-1) = 34px; mobile: 40 + (40-16)*(0.5-1) = 28px
+    expect(classes).toEqual([
+      'p-[40px]',
+      'max-[1024px]:p-[34px]',
+      'max-[540px]:p-[28px]',
+    ]);
+  });
+
+  test('explicit breakpoint override wins — no auto-scaled variant for that breakpoint/property pair', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { base: { padding: '40px' }, tablet: { padding: '30px' } },
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    expect(classes).toContain('p-[40px]');
+    expect(classes).toContain('max-[1024px]:p-[30px]');
+    // no max-[1024px]:p-[34px] auto-scaled variant
+    expect(classes).not.toContain('max-[1024px]:p-[34px]');
+    // mobile still gets auto-scaled from base since it has no explicit override
+    expect(classes).toContain('max-[540px]:p-[28px]');
+  });
+
+  test('scaling disabled → output identical to no-scaling path', () => {
+    const withScales = responsiveStylesToTailwind(
+      { base: { padding: '40px' } },
+      DEFAULT_BREAKPOINTS,
+      scalesDisabled
+    );
+    const withoutScales = responsiveStylesToTailwind(
+      { base: { padding: '40px' } },
+      DEFAULT_BREAKPOINTS
+    );
+    expect(withScales.classes).toEqual(withoutScales.classes);
+    expect(withScales.classes).toEqual(['p-[40px]']);
+  });
+
+  test('values at or below baseReference produce no scaled variants', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { base: { padding: '8px' } }, // 8 < 16 → stays unchanged → skipped
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    expect(classes).toEqual(['p-[8px]']);
+  });
+
+  test('non-scalable property (e.g. color) is left untouched', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { base: { color: '#abc' } },
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    // Just the base color class — no max-[Npx] prefix because color isn't in any scale category
+    expect(classes.filter((c) => c.startsWith('max-['))).toEqual([]);
+  });
+
+  test('multi-value properties scale every numeric part', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { base: { padding: '40px 80px' } },
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    // tablet: 40→34, 80→64; mobile: 40→28, 80→48
+    expect(classes).toContain('max-[1024px]:p-[34px_64px]');
+    expect(classes).toContain('max-[540px]:p-[28px_48px]');
+  });
+
+  test('flat style object (no `base`) gets no auto-scaling', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { padding: '40px' },
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    // A flat style is treated as base with no breakpoints — nothing to
+    // auto-scale *into*. The scaling pass only runs on the responsive branch.
+    expect(classes.filter((c) => c.startsWith('max-['))).toEqual([]);
+  });
+
+  test('fontSize scales using the fontSize category', () => {
+    const { classes } = responsiveStylesToTailwind(
+      { base: { fontSize: '100px' } },
+      DEFAULT_BREAKPOINTS,
+      scalesEnabled
+    );
+    // tablet: 100 + (100-16)*(0.88-1) = 100 - 10.08 = round(89.92) = 90
+    // mobile: 100 + (100-16)*(0.75-1) = 100 - 21 = 79
+    expect(classes).toContain('max-[1024px]:text-[length:90px]');
+    expect(classes).toContain('max-[540px]:text-[length:79px]');
+  });
+});

package/lib/server/astro/tailwindMapper.ts

@@ -10,6 +10,8 @@ import type {
   StyleMapping,
 } from '../../shared/types/styles';
 import type { BreakpointConfig } from '../../shared/breakpoints';
+import type { ResponsiveScales, CSSPropertyType } from '../../shared/responsiveScaling';
+import { getScaleMultiplier, scalePropertyValue } from '../../shared/responsiveScaling';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -551,7 +553,8 @@ export function stylesToTailwind(
  */
 export function responsiveStylesToTailwind(
   style: StyleObject | ResponsiveStyleObject | null | undefined,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
+  responsiveScales?: ResponsiveScales
 ): { classes: string[]; dynamicStyles: Record<string, string> } {
   if (!style) return { classes: [], dynamicStyles: {} };
 
@@ -597,6 +600,13 @@ export function responsiveStylesToTailwind(
       allClasses.push(...classes.map(cls => `${prefix}${cls}`));
       Object.assign(allDynamicStyles, dynamicStyles);
     }
+
+    // Auto-responsive scaling: for each scalable base property, emit scaled
+    // max-[Npx]: variants for every enabled breakpoint that doesn't already
+    // have an explicit override for that property.
+    if (responsiveScales?.enabled === true && responsive.base) {
+      appendAutoScaledClasses(responsive, breakpoints, responsiveScales, allClasses);
+    }
   } else {
     // Flat style object — treat as base
     const { classes, dynamicStyles } = stylesToTailwind(style as StyleObject);
@@ -606,3 +616,59 @@ export function responsiveStylesToTailwind(
 
   return { classes: allClasses, dynamicStyles: allDynamicStyles };
 }
+
+/**
+ * Emit `max-[Npx]:` class variants with pre-scaled values for every base
+ * property in a scale category, skipping breakpoints where the author set
+ * an explicit override for the same property.
+ *
+ * Breakpoints are processed in descending pixel order so the emitted class
+ * order matches the cascade order Tailwind's variant compiler expects.
+ */
+function appendAutoScaledClasses(
+  responsive: ResponsiveStyleObject,
+  breakpoints: BreakpointConfig,
+  responsiveScales: ResponsiveScales,
+  out: string[]
+): void {
+  const base = responsive.base;
+  if (!base) return;
+
+  const baseRef = responsiveScales.baseReference ?? 16;
+
+  const sortedBps = Object.entries(breakpoints)
+    .map(([name, cfg]) => ({ name, value: cfg?.breakpoint }))
+    .filter((bp): bp is { name: string; value: number } =>
+      typeof bp.value === 'number' && bp.value > 0
+    )
+    .sort((a, b) => b.value - a.value);
+
+  for (const [property, value] of Object.entries(base)) {
+    if (isStyleMapping(value)) continue;
+    if (value == null) continue;
+
+    const strValue = String(value);
+    if (strValue === '' || hasTemplateExpression(strValue)) continue;
+
+    for (const { name: bpName, value: bpPixels } of sortedBps) {
+      // Explicit override at this breakpoint wins — skip auto-scaling.
+      const bpBranch = responsive[bpName] as StyleObject | undefined;
+      if (bpBranch && property in bpBranch) continue;
+
+      const scale = getScaleMultiplier(
+        responsiveScales,
+        property as CSSPropertyType,
+        bpName
+      );
+      if (scale == null) continue;
+
+      const scaledValue = scalePropertyValue(strValue, baseRef, scale);
+      if (scaledValue == null || scaledValue === strValue) continue;
+
+      const scaledClass = propertyToTailwind(property, scaledValue);
+      if (!scaledClass) continue;
+
+      out.push(`max-[${bpPixels}px]:${scaledClass}`);
+    }
+  }
+}

package/lib/server/runtime/httpServer.ts

@@ -7,7 +7,12 @@ const isBun = typeof globalThis.Bun !== 'undefined';
 
 export interface RuntimeServer {
   port: number;
-  stop(): void;
+  /**
+   * Stop the server. When `force` is true, active connections are
+   * closed immediately (Bun: closeActiveConnections=true). Defaults to
+   * a graceful stop that lets in-flight requests finish.
+   */
+  stop(force?: boolean): void;
 }
 
 export interface RuntimeWSClient {
@@ -76,8 +81,8 @@ function createBunServer(options: ServerOptions): RuntimeServer {
 
   return {
     port: server.port ?? port,
-    stop() {
-      server.stop();
+    stop(force?: boolean) {
+      server.stop(force === true);
     },
   };
 }
@@ -219,7 +224,10 @@ async function createNodeServer(options: ServerOptions): Promise<RuntimeServer>
 
       resolve({
         port: actualPort,
-        stop() {
+        stop(_force?: boolean) {
+          // Node http.Server.close is graceful by default; the force
+          // flag is accepted for API parity with Bun but currently has
+          // no additional effect on the Node path.
           server.close();
         },
       });

package/lib/server/ssr/htmlGenerator.ts

@@ -388,7 +388,7 @@ export async function generateSSRHTML(
 
   // Generate interactive styles CSS from map collected during render
   const interactiveCSS = rendered.interactiveStylesMap.size > 0
-    ? generateAllInteractiveCSS(rendered.interactiveStylesMap, breakpointConfig, remConversionConfig)
+    ? generateAllInteractiveCSS(rendered.interactiveStylesMap, breakpointConfig, remConversionConfig, responsiveScalesConfig)
     : '';
 
   // Print warnings for any unmapped styles found during build

package/lib/server/ssr/jsCollector.ts

@@ -128,8 +128,8 @@ __meno.initComponent("${name}", function(el, props) {
   ${js}
 });`);
     } else {
-      // No defineVars - emit as-is (backward compatible)
-      jsCodeBlocks.push(`// Component: ${name}\n${js}`);
+      // No defineVars - wrap in IIFE to prevent variable conflicts between components
+      jsCodeBlocks.push(`// Component: ${name}\n(function(){\n${js}\n})();`);
     }
   };
 

package/lib/server/ssr/ssrRenderer.test.ts

@@ -1891,6 +1891,38 @@ describe('ssrRenderer', () => {
       const html = await render(node);
       expect(html).toContain('<p>Rich <strong>text</strong></p>');
     });
+
+    test('exposes processedRawHtmlCollector mapping raw slice → processed HTML', async () => {
+      const { RAW_HTML_PREFIX } = await import('../../shared/constants');
+      const rawSlice = '<p>Rich <strong>text</strong></p>';
+      const node = {
+        type: 'node',
+        tag: 'div',
+        children: `${RAW_HTML_PREFIX}${rawSlice}`,
+      };
+      const result = await buildComponentHTML(node as any);
+      expect(result.processedRawHtmlCollector).toBeInstanceOf(Map);
+      expect(result.processedRawHtmlCollector.get(rawSlice)).toBe(rawSlice);
+    });
+
+    test('collector records localized links for non-default locale rich text', async () => {
+      const { RAW_HTML_PREFIX } = await import('../../shared/constants');
+      const rawSlice = '<p>See <a href="/about">story</a></p>';
+      const node = {
+        type: 'node',
+        tag: 'div',
+        children: `${RAW_HTML_PREFIX}${rawSlice}`,
+      };
+      const result = await buildComponentHTML(
+        node as any,
+        {},
+        {},
+        'fr',
+        { defaultLocale: 'en', locales: [{ code: 'en' }, { code: 'fr' }] } as any,
+      );
+      const processed = result.processedRawHtmlCollector.get(rawSlice);
+      expect(processed).toContain('href="/fr/about"');
+    });
   });
 
   // -----------------------------------------------------------------------

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);
@@ -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');
+  });
+});