meno-core 1.0.46 → 1.0.48

package/lib/server/astro/nodeToAstro.ts

@@ -39,7 +39,7 @@ import { isI18nValue, resolveI18nValue, DEFAULT_I18N_CONFIG, buildLocalizedPath
 import { transformCMSTemplate, isTemplateExpression, transformItemTemplate, replaceItemMetaVars, rewriteItemVar } from './templateTransformer';
 import type { SlugMap } from '../../shared/slugTranslator';
 import { buildSlugIndex, translatePath } from '../../shared/slugTranslator';
-import { stripRawHtmlPrefixDeep } from './astroEmitHelpers';
+import { stripRawHtmlPrefixDeep, astroComponentName } from './astroEmitHelpers';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -127,6 +127,8 @@ export interface AstroEmitContext {
   imageImports?: Map<string, string>;
   /** File depth (relative to src/pages or src/components) for import path computation */
   fileDepth?: number;
+  /** Collected interactive styles during emission: elementClass → InteractiveStyles */
+  collectedInteractiveStyles?: Map<string, InteractiveStyles>;
 }
 
 // ---------------------------------------------------------------------------
@@ -1029,7 +1031,9 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
     node.generateElementClass
   ) {
     elementClass = buildElementClass(ctx, node.label);
-
+    if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
+      ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
+    }
   }
 
   const { classExpr, styleAttr } = buildClassAndStyleExpression(
@@ -1216,7 +1220,9 @@ function emitHtmlNode(node: HtmlNode, ctx: AstroEmitContext): string {
     node.generateElementClass
   ) {
     elementClass = buildElementClass(ctx, label);
-
+    if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
+      ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
+    }
   }
 
   const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
@@ -1243,8 +1249,8 @@ function emitHtmlNode(node: HtmlNode, ctx: AstroEmitContext): string {
 }
 
 function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContext): string {
-  const name = node.component;
-  ctx.imports.add(name);
+  const name = astroComponentName(node.component);
+  ctx.imports.add(node.component);
 
   const ifExpr = emitIfOpen(node, ctx);
 
@@ -1355,7 +1361,9 @@ function emitEmbedNode(node: EmbedNode, ctx: AstroEmitContext): string {
     node.generateElementClass
   ) {
     elementClass = buildElementClass(ctx, node.label);
-
+    if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
+      ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
+    }
   }
 
   const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
@@ -1428,7 +1436,9 @@ function emitLinkNode(node: LinkNode, ctx: AstroEmitContext): string {
     node.generateElementClass
   ) {
     elementClass = buildElementClass(ctx, node.label);
-
+    if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
+      ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
+    }
   }
 
   // Build class expression with olink base class
@@ -1525,7 +1535,9 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
     node.generateElementClass
   ) {
     elementClass = buildElementClass(ctx, node.label);
-
+    if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
+      ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
+    }
   }
 
   const { classExpr, styleAttr } = buildClassAndStyleExpression(
@@ -1784,7 +1796,9 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
   let elementClass: string | null = null;
   if ((node.interactiveStyles && (node.interactiveStyles as InteractiveStyles).length > 0) || node.generateElementClass) {
     elementClass = buildElementClass(ctx, node.label);
-
+    if (elementClass && (node.interactiveStyles as InteractiveStyles)?.length && ctx.collectedInteractiveStyles) {
+      ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
+    }
   }
 
   const { classExpr: containerClassExpr, styleAttr: containerStyleAttr } = buildClassAndStyleExpression(

package/lib/server/astro/pageEmitter.ts

@@ -10,6 +10,10 @@ import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
 import type { ImageMetadataMap } from '../ssr/imageMetadata';
 import type { SlugMap } from '../../shared/slugTranslator';
 import type { ResponsiveScales } from '../../shared/responsiveScaling';
+import type { InteractiveStyles } from '../../shared/types/styles';
+import type { RemConversionConfig } from '../../shared/pxToRem';
+import { generateAllInteractiveCSS } from '../../shared/cssGeneration';
+import { astroComponentName } from './astroEmitHelpers';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -62,6 +66,8 @@ export interface PageEmitOptions {
    * (image rewriting, component expansion, link localization).
    */
   processedRawHtml?: Map<string, string>;
+  /** Rem conversion config for interactive CSS generation */
+  remConfig?: RemConversionConfig;
 }
 
 // ---------------------------------------------------------------------------
@@ -121,6 +127,7 @@ export function emitAstroPage(options: PageEmitOptions): string {
     slugMappings,
     imageFormat,
     processedRawHtml,
+    remConfig,
   } = options;
 
   const breakpoints = breakpointsOpt ?? DEFAULT_BREAKPOINTS;
@@ -156,6 +163,7 @@ export function emitAstroPage(options: PageEmitOptions): string {
     processedRawHtml,
     imageImports: new Map<string, string>(),
     fileDepth,
+    collectedInteractiveStyles: new Map<string, InteractiveStyles>(),
   };
 
   // Emit the template body
@@ -186,7 +194,7 @@ export function emitAstroPage(options: PageEmitOptions): string {
   const componentImports = Array.from(ctx.imports).sort();
   for (const comp of componentImports) {
     const path = componentImportPath(fileDepth, comp);
-    importLines.push(`import ${comp} from '${path}';`);
+    importLines.push(`import ${astroComponentName(comp)} from '${path}';`);
   }
 
   // Build script paths array
@@ -205,6 +213,11 @@ export function emitAstroPage(options: PageEmitOptions): string {
     ? '\n' + ctx.frontmatterLines.join('\n')
     : '';
 
+  // Generate interactive style block for page-level interactive styles
+  const interactiveStyleSection = ctx.collectedInteractiveStyles!.size > 0
+    ? `\n<style is:global>\n${generateAllInteractiveCSS(ctx.collectedInteractiveStyles!, breakpoints, remConfig, responsiveScales)}\n</style>\n`
+    : '';
+
   return `---
 ${importLines.join('\n')}${extraFrontmatter}
 ---
@@ -220,7 +233,7 @@ ${importLines.join('\n')}${extraFrontmatter}
   <div id="root">
 ${templateBody}  </div>
 </BaseLayout>
-`;
+${interactiveStyleSection}`;
 }
 
 /**

package/lib/server/index.ts

@@ -66,7 +66,7 @@ export { buildStaticPages } from '../../build-static';
 export { buildAstroProject } from '../../build-astro';
 
 // Webflow export
-export { buildWebflowPayload } from './webflow';
+export { buildWebflowPayload, wrapInWebflowTemplate } from './webflow';
 export type {
   WebflowExportPayload,
   WebflowPage,

package/lib/server/jsonLoader.test.ts

@@ -5,13 +5,10 @@ import {
   mapPathToPageName,
   getBreakpointConfig,
   setBreakpointConfig,
-  getResponsiveScalesConfig,
-  setResponsiveScalesConfig,
   getI18nConfig,
   setI18nConfig,
 } from './jsonLoader';
 import { DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
-import { DEFAULT_RESPONSIVE_SCALES } from '../shared/responsiveScaling';
 import { DEFAULT_I18N_CONFIG } from '../shared/i18n';
 
 describe('jsonLoader', () => {
@@ -76,20 +73,6 @@ describe('jsonLoader', () => {
     });
   });
 
-  describe('responsive scales config cache', () => {
-    test('returns default config initially', () => {
-      const config = getResponsiveScalesConfig();
-      expect(config.enabled).toBe(DEFAULT_RESPONSIVE_SCALES.enabled);
-    });
-
-    test('returns cached config after set', () => {
-      const customConfig = { enabled: true, baseReference: 20 };
-      setResponsiveScalesConfig(customConfig);
-      const config = getResponsiveScalesConfig();
-      expect(config.baseReference).toBe(20);
-    });
-  });
-
   describe('i18n config cache', () => {
     test('returns default config initially', () => {
       const config = getI18nConfig();

package/lib/server/jsonLoader.ts

@@ -9,8 +9,6 @@ import type { ComponentDefinition } from '../shared/types';
 import type { BreakpointConfig, BreakpointConfigInput, BreakpointEntry } from '../shared/breakpoints';
 import { readTextFile, fileExists } from './runtime';
 import { DEFAULT_BREAKPOINTS, normalizeBreakpointConfig } from '../shared/breakpoints';
-import type { ResponsiveScales, BreakpointScales } from '../shared/responsiveScaling';
-import { DEFAULT_RESPONSIVE_SCALES } from '../shared/responsiveScaling';
 import type { I18nConfig } from '../shared/types/components';
 import { DEFAULT_I18N_CONFIG, migrateI18nConfig } from '../shared/i18n';
 import type { PrefetchConfig } from '../shared/types/prefetch';
@@ -385,85 +383,6 @@ export function setBreakpointConfig(config: BreakpointConfig): void {
   cachedBreakpoints = config;
 }
 
-/**
- * Deep merge scale categories, preserving user-defined breakpoints
- * while filling in missing values from defaults
- */
-function mergeScaleCategory(
-  userScales: BreakpointScales | undefined,
-  defaultScales: BreakpointScales | undefined
-): BreakpointScales | undefined {
-  if (!userScales && !defaultScales) return undefined;
-  if (!userScales) return defaultScales ? { ...defaultScales } : undefined;
-  if (!defaultScales) return { ...userScales };
-
-  // User scales take precedence, but include defaults for breakpoints not specified
-  return {
-    ...defaultScales,
-    ...userScales,
-  };
-}
-
-/**
- * Load and validate responsive scales configuration from project.config.json
- * Supports dynamic breakpoints - scales are keyed by breakpoint name
- */
-export async function loadResponsiveScalesConfig(): Promise<ResponsiveScales> {
-  try {
-    const configContent = await loadJSONFile(projectPaths.config());
-    if (configContent) {
-      const config = parseJSON<{ responsiveScales?: Partial<ResponsiveScales> }>(configContent);
-
-      if (config.responsiveScales && typeof config.responsiveScales === 'object') {
-        // Deep merge scale categories to preserve user breakpoint definitions
-        // while filling in missing values from defaults
-        const scales: ResponsiveScales = {
-          enabled: config.responsiveScales.enabled ?? DEFAULT_RESPONSIVE_SCALES.enabled,
-          baseReference: config.responsiveScales.baseReference ?? DEFAULT_RESPONSIVE_SCALES.baseReference,
-          fontSize: mergeScaleCategory(
-            config.responsiveScales.fontSize as BreakpointScales | undefined,
-            DEFAULT_RESPONSIVE_SCALES.fontSize
-          ),
-          padding: mergeScaleCategory(
-            config.responsiveScales.padding as BreakpointScales | undefined,
-            DEFAULT_RESPONSIVE_SCALES.padding
-          ),
-          margin: mergeScaleCategory(
-            config.responsiveScales.margin as BreakpointScales | undefined,
-            DEFAULT_RESPONSIVE_SCALES.margin
-          ),
-          gap: mergeScaleCategory(
-            config.responsiveScales.gap as BreakpointScales | undefined,
-            DEFAULT_RESPONSIVE_SCALES.gap
-          ),
-        };
-
-        return scales;
-      }
-    }
-  } catch (error) {
-  }
-
-  return { ...DEFAULT_RESPONSIVE_SCALES };
-}
-
-/**
- * Get responsive scales config synchronously (for cases where async is not available)
- * Uses cached value if available, otherwise defaults
- */
-let cachedResponsiveScales: ResponsiveScales | null = null;
-
-export function getResponsiveScalesConfig(): ResponsiveScales {
-  if (cachedResponsiveScales) {
-    return cachedResponsiveScales;
-  }
-  return { ...DEFAULT_RESPONSIVE_SCALES };
-}
-
-export function setResponsiveScalesConfig(config: ResponsiveScales): void {
-  cachedResponsiveScales = config;
-}
-
 /**
  * Load and validate i18n configuration from project.config.json
  * Automatically migrates old string[] format to new LocaleConfig[] format

package/lib/server/routes/api/variables.ts

@@ -5,7 +5,8 @@
 
 import { variableService } from '../../services/VariableService';
 import { generateVariablesCSS } from '../../cssGenerator';
-import { loadBreakpointConfig, loadResponsiveScalesConfig } from '../../jsonLoader';
+import { loadBreakpointConfig } from '../../jsonLoader';
+import { configService } from '../../services/configService';
 import { jsonResponse } from './shared';
 
 /**
@@ -22,9 +23,10 @@ export async function handleVariablesStatusRoute(): Promise<Response> {
  * Returns generated CSS custom properties from variables.json
  */
 export async function handleVariablesCSSRoute(): Promise<Response> {
+  await configService.load();
   const variablesConfig = await variableService.loadConfig();
   const breakpointConfig = await loadBreakpointConfig();
-  const responsiveScalesConfig = await loadResponsiveScalesConfig();
+  const responsiveScalesConfig = configService.getResponsiveScales();
   const css = generateVariablesCSS(variablesConfig, breakpointConfig, responsiveScalesConfig);
   return new Response(css, {
     headers: { 'Content-Type': 'text/css' }

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

@@ -27,6 +27,7 @@ mock.module('./ssrRenderer', () => ({
 const mockConfigService = {
   load: mock(async () => {}),
   getLibraries: mock(() => undefined),
+  getResponsiveScales: mock(() => ({ enabled: false, baseReference: 16 })),
 };
 
 mock.module('../services/configService', () => ({
@@ -34,13 +35,11 @@ mock.module('../services/configService', () => ({
 }));
 
 const mockLoadBreakpointConfig = mock(async () => ({ breakpoints: [] }));
-const mockLoadResponsiveScalesConfig = mock(async () => ({}));
 const mockLoadIconsConfig = mock(async () => ({ favicon: '', appleTouchIcon: '' }));
 const mockLoadPrefetchConfig = mock(async () => ({ enabled: false }));
 
 mock.module('../jsonLoader', () => ({
   loadBreakpointConfig: mockLoadBreakpointConfig,
-  loadResponsiveScalesConfig: mockLoadResponsiveScalesConfig,
   loadIconsConfig: mockLoadIconsConfig,
   loadPrefetchConfig: mockLoadPrefetchConfig,
 }));
@@ -976,10 +975,11 @@ describe('generateSSRHTML', () => {
       expect(result).toContain('cursor: pointer');
     });
 
-    test('should include img width/height 100% reset', async () => {
+    test('should include img max-width/height auto reset', async () => {
       const result = (await generateSSRHTML(minimalPage)) as string;
       expect(result).toContain('img {');
-      expect(result).toContain('width: 100%');
+      expect(result).toContain('max-width: 100%');
+      expect(result).toContain('height: auto');
     });
 
     test('should include olink and oem utility classes', async () => {

package/lib/server/ssr/htmlGenerator.ts

@@ -8,7 +8,7 @@ import type { ComponentDefinition, JSONPage, PageLibrariesConfig, CustomCodeConf
 import type { SlugMap } from '../../shared/slugTranslator';
 import type { CMSService } from '../services/cmsService';
 import { configService } from '../services/configService';
-import { loadBreakpointConfig, loadResponsiveScalesConfig, loadIconsConfig, loadPrefetchConfig } from '../jsonLoader';
+import { loadBreakpointConfig, loadIconsConfig, loadPrefetchConfig } from '../jsonLoader';
 import { generateFontCSS, generateFontPreloadTags, loadProjectConfig } from '../../shared/fontLoader';
 import { colorService } from '../services/ColorService';
 import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
@@ -378,7 +378,7 @@ export async function generateSSRHTML(
   // Extract and generate utility CSS from rendered HTML
   const usedUtilityClasses = extractUtilityClassesFromHTML(rendered.html);
   const breakpointConfig = await loadBreakpointConfig();
-  const responsiveScalesConfig = await loadResponsiveScalesConfig();
+  const responsiveScalesConfig = configService.getResponsiveScales();
 
   // Load and generate CSS custom properties from variables.json
   const variablesConfig = await variableService.loadConfig();
@@ -411,12 +411,17 @@ button {
   cursor: pointer;
   outline: inherit;
 }
+img {
+  max-width: 100%;
+  height: auto;
+}
 picture {
   display: block;
 }
 .olink {
   text-decoration: none;
   display: block;
+  color: inherit;
 }
 .oem {
   display: inline-block;

package/lib/server/ssr/imageMetadata.ts

@@ -88,15 +88,21 @@ export async function buildImageMetadataMap(): Promise<ImageMetadataMap> {
         }
       }
 
-      // Add main image as largest option (use original width or 2400 as fallback)
-      const mainWidth = entry.width || 2400;
-      if (entry.formats.webp) {
-        webpSrcsetParts.push(`/images/${encodeURIComponent(`${baseName}.webp`)} ${mainWidth}w`);
-      } else {
-        webpSrcsetParts.push(`/images/${encodeURIComponent(filename)} ${mainWidth}w`);
-      }
-      if (entry.formats.avif) {
-        avifSrcsetParts.push(`/images/${encodeURIComponent(`${baseName}.avif`)} ${mainWidth}w`);
+      // Add main image as largest option (use original width or 2400 as fallback).
+      // Only do this when at least one responsive variant exists — a single-entry
+      // srcset paired with sizes="100vw" makes the browser scale tiny images
+      // (e.g. 24×24 icons) up to full viewport width.
+      const hasVariants = entry.variants.length > 0;
+      if (hasVariants) {
+        const mainWidth = entry.width || 2400;
+        if (entry.formats.webp) {
+          webpSrcsetParts.push(`/images/${encodeURIComponent(`${baseName}.webp`)} ${mainWidth}w`);
+        } else {
+          webpSrcsetParts.push(`/images/${encodeURIComponent(filename)} ${mainWidth}w`);
+        }
+        if (entry.formats.avif) {
+          avifSrcsetParts.push(`/images/${encodeURIComponent(`${baseName}.avif`)} ${mainWidth}w`);
+        }
       }
 
       const metadata: ImageMetadata = {

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

@@ -31,7 +31,6 @@ mock.module('../jsonLoader', () => ({
     ],
   }),
   loadIconsConfig: async () => ({ favicon: '', appleTouchIcon: '' }),
-  loadResponsiveScalesConfig: async () => ({}),
   loadPrefetchConfig: async () => ({ enabled: false }),
 }));
 
@@ -717,6 +716,20 @@ describe('ssrRenderer', () => {
       expect(html).toBe('');
     });
 
+    test('skips node with unresolved string-template if', async () => {
+      // {{buttonText}} stays unresolved when the referenced prop is undefined
+      // (evaluateTemplate's backward-compat fallback returns the original template).
+      // Treat unresolved templates as falsy so the node is hidden.
+      const node = {
+        type: 'link',
+        href: '/page',
+        children: 'link',
+        if: '{{buttonText}}',
+      };
+      const html = await render(node);
+      expect(html).toBe('');
+    });
+
     test('evaluates boolean mapping if condition - renders when mapped to true', async () => {
       // Component renders within buildComponentHTML with componentResolvedProps
       // We need to use a component that sets up the mapping context
@@ -1478,6 +1491,95 @@ describe('ssrRenderer', () => {
       expect(result.html).toContain('Submit');
     });
 
+    test('applies instance styles when component root is a LinkNode', async () => {
+      // Mirrors the figmaexport Button: component structure rooted in a LinkNode.
+      // Instance style overrides must be merged onto the rendered <a>.
+      const buttonDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'link',
+            href: '{{link}}',
+            style: { base: { backgroundColor: '#ffffff', color: '#000000' } },
+            children: ['{{text}}'],
+          },
+          interface: {
+            text: { type: 'string', default: 'Buy Tickets' },
+            link: { type: 'link', default: { href: '/tickets' } },
+          },
+          acceptsStyles: true,
+        } as any,
+      };
+
+      const pageData: JSONPage = {
+        root: {
+          type: 'node',
+          tag: 'div',
+          children: [
+            {
+              type: 'component',
+              component: 'Button',
+              props: { text: 'Partner with us', link: '/partner' },
+              style: {
+                base: { backgroundColor: '#252525', color: '#ffffff' },
+                tablet: {},
+                mobile: {},
+              },
+            },
+          ],
+        } as any,
+      };
+
+      const result = await renderPageSSR(pageData, { Button: buttonDef });
+      // The <a> should exist with the component's default class plus the instance override classes.
+      expect(result.html).toMatch(/<a\s+href="\/partner"[^>]*class="[^"]*olink[^"]*"/);
+      // Instance style for backgroundColor "#252525" produces the bgc-#252525 utility class.
+      expect(result.html).toContain('bgc-#252525');
+      // Instance style for color "#ffffff" (the override) produces c-#ffffff.
+      expect(result.html).toContain('c-#ffffff');
+    });
+
+    test('instance style overrides structure style on the same property', async () => {
+      // Regression: previously the structure's mb-0 and the instance's mb-32px both
+      // ended up as same-specificity utility classes on the rendered element, and
+      // the structure's class won by source order — opposite of client behavior.
+      // Instance styles must replace structure styles per-property at merge time.
+      const buttonDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'node',
+            tag: 'button',
+            style: { base: { marginBottom: 0, padding: '8px' } },
+            children: ['{{text}}'],
+          },
+          interface: {
+            text: { type: 'string', default: 'Click' },
+          },
+          acceptsStyles: true,
+        } as any,
+      };
+
+      const pageData: JSONPage = {
+        root: {
+          type: 'node',
+          tag: 'div',
+          children: [
+            {
+              type: 'component',
+              component: 'Button',
+              props: { text: 'Hi' },
+              style: { base: { marginBottom: '32px' } },
+            },
+          ],
+        } as any,
+      };
+
+      const result = await renderPageSSR(pageData, { Button: buttonDef });
+      expect(result.html).toContain('mb-32px');
+      expect(result.html).not.toContain('mb-0');
+      // Untouched structure properties remain.
+      expect(result.html).toContain('p-8px');
+    });
+
     test('extracts locale from path when not explicitly provided', async () => {
       const i18nConfig = {
         defaultLocale: 'en',