meno-core 1.0.45 → 1.0.47

package/lib/server/astro/astroEmitHelpers.ts

@@ -0,0 +1,23 @@
+import { RAW_HTML_PREFIX } from '../../shared/constants';
+
+export function stripRawHtmlPrefixDeep<T>(value: T): T {
+  if (typeof value === 'string') {
+    return (value.startsWith(RAW_HTML_PREFIX) ? value.slice(RAW_HTML_PREFIX.length) : value) as T;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => stripRawHtmlPrefixDeep(item)) as unknown as T;
+  }
+  if (value !== null && typeof value === 'object') {
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+      out[k] = stripRawHtmlPrefixDeep(v);
+    }
+    return out as T;
+  }
+  return value;
+}
+
+/** Ensure a component name starts with an uppercase letter so Astro treats it as a component tag, not an HTML element. */
+export function astroComponentName(name: string): string {
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}

package/lib/server/astro/cmsPageEmitter.ts

@@ -10,6 +10,11 @@ import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
 import { transformCMSTemplate } from './templateTransformer';
 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
@@ -46,6 +51,8 @@ export interface CMSPageEmitOptions {
   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;
   /** Internationalization config */
@@ -56,6 +63,14 @@ export interface CMSPageEmitOptions {
   slugMappings?: SlugMap[];
   /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> */
   imageFormat?: 'webp' | 'avif';
+  /**
+   * Raw-HTML slice → processed HTML captured during the template's SSR pass.
+   * Ensures `<Fragment set:html>` matches SSR output for rich-text content
+   * (image rewriting, component expansion, link localization).
+   */
+  processedRawHtml?: Map<string, string>;
+  /** Rem conversion config for interactive CSS generation */
+  remConfig?: RemConversionConfig;
 }
 
 // ---------------------------------------------------------------------------
@@ -63,7 +78,12 @@ export interface CMSPageEmitOptions {
 // ---------------------------------------------------------------------------
 
 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 {
@@ -247,10 +267,13 @@ export function emitCMSPage(options: CMSPageEmitOptions): string {
     ssrFallbacks,
     pageName,
     breakpoints: breakpointsOpt,
+    responsiveScales,
     imageMetadataMap,
     i18nConfig,
     isMultiLocale,
     slugMappings,
+    processedRawHtml,
+    remConfig,
   } = options;
 
   const breakpoints = breakpointsOpt ?? DEFAULT_BREAKPOINTS;
@@ -289,6 +312,7 @@ export function emitCMSPage(options: CMSPageEmitOptions): string {
     fileType: 'page',
     fileName: pageName,
     breakpoints,
+    responsiveScales,
     imageMetadataMap,
     locale,
     cmsMode: true,
@@ -298,6 +322,10 @@ export function emitCMSPage(options: CMSPageEmitOptions): string {
     slugMappings,
     i18nDefaultLocale: i18nConfig.defaultLocale,
     imageFormat: options.imageFormat,
+    processedRawHtml,
+    imageImports: new Map<string, string>(),
+    fileDepth,
+    collectedInteractiveStyles: new Map<string, InteractiveStyles>(),
   };
 
   // Emit the template body
@@ -308,11 +336,21 @@ export function emitCMSPage(options: CMSPageEmitOptions): string {
   importLines.push(`import { getCollection } from 'astro:content';`);
   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) {
     const path = componentImportPath(fileDepth, comp);
-    importLines.push(`import ${comp} from '${path}';`);
+    importLines.push(`import ${astroComponentName(comp)} from '${path}';`);
   }
 
   // Build getStaticPaths
@@ -342,6 +380,11 @@ export function emitCMSPage(options: CMSPageEmitOptions): string {
   return v ?? '';
 }`;
 
+  // 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')}
 
@@ -361,7 +404,7 @@ ${resolverHelper}
   <div id="root">
 ${templateBody}  </div>
 </BaseLayout>
-`;
+${interactiveStyleSection}`;
 }
 
 /**

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

@@ -0,0 +1,59 @@
+import { describe, test, expect } from 'bun:test';
+import { emitAstroComponent } from './componentEmitter';
+import type { ComponentDefinition } from '../../shared/types';
+
+function makeComponent(overrides: Partial<ComponentDefinition['component']> = {}): ComponentDefinition {
+  return {
+    component: {
+      interface: {},
+      structure: { type: 'node', tag: 'div', children: [] } as unknown as ComponentDefinition['component']['structure'],
+      ...overrides,
+    },
+  };
+}
+
+describe('emitAstroComponent — RAW_HTML_PREFIX stripping', () => {
+  test('strips marker from rich-text string default in frontmatter', () => {
+    const def = makeComponent({
+      interface: {
+        text2: {
+          type: 'rich-text',
+          default: '<!--MENO_RAW_HTML-->SEO<br>Audit Blueprint',
+        } as unknown as import('../../shared/types').PropDefinition,
+      },
+    });
+    const out = emitAstroComponent('SeoAudit', def, {});
+    expect(out).not.toContain('MENO_RAW_HTML');
+    expect(out).toContain('text2 = "SEO<br>Audit Blueprint"');
+  });
+
+  test('strips marker from i18n default values', () => {
+    const def = makeComponent({
+      interface: {
+        text2: {
+          type: 'rich-text',
+          default: {
+            _i18n: true,
+            en: '<!--MENO_RAW_HTML-->SEO<br>Audit Blueprint',
+            pl: '<!--MENO_RAW_HTML-->Audyt SEO',
+          },
+        } as unknown as import('../../shared/types').PropDefinition,
+      },
+    });
+    const out = emitAstroComponent('SeoAudit', def, {});
+    expect(out).not.toContain('MENO_RAW_HTML');
+  });
+
+  test('leaves non-rich-text string defaults unchanged', () => {
+    const def = makeComponent({
+      interface: {
+        title: {
+          type: 'string',
+          default: 'Hello world',
+        } as unknown as import('../../shared/types').PropDefinition,
+      },
+    });
+    const out = emitAstroComponent('Heading', def, {});
+    expect(out).toContain('title = "Hello world"');
+  });
+});

package/lib/server/astro/componentEmitter.ts

@@ -12,6 +12,11 @@ import type { BasePropDefinition, ListPropDefinition, LinkPropValue } from '../.
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+import type { ResponsiveScales } from '../../shared/responsiveScaling';
+import { stripRawHtmlPrefixDeep, astroComponentName } from './astroEmitHelpers';
+import type { InteractiveStyles } from '../../shared/types/styles';
+import type { RemConversionConfig } from '../../shared/pxToRem';
+import { generateAllInteractiveCSS } from '../../shared/cssGeneration';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -49,7 +54,7 @@ function propDefToTSType(def: PropDefinition): string {
  */
 function formatDefault(def: PropDefinition): string | null {
   if (!('default' in def) || def.default === undefined) return null;
-  const val = def.default;
+  const val = stripRawHtmlPrefixDeep(def.default);
 
   if (typeof val === 'string') return JSON.stringify(val);
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
@@ -129,7 +134,9 @@ export function emitAstroComponent(
   def: ComponentDefinition,
   allComponents: Record<string, ComponentDefinition>,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
-  defaultLocale: string = 'en'
+  defaultLocale: string = 'en',
+  responsiveScales?: ResponsiveScales,
+  remConfig?: RemConversionConfig
 ): string {
   const comp = def.component;
   const propDefs = comp.interface || {};
@@ -152,7 +159,11 @@ export function emitAstroComponent(
     fileType: 'component',
     fileName: name,
     breakpoints,
+    responsiveScales,
     defaultLocale,
+    imageImports: new Map<string, string>(),
+    fileDepth: 0, // components live at src/components/
+    collectedInteractiveStyles: new Map<string, InteractiveStyles>(),
   };
 
   // Emit the template body
@@ -162,15 +173,25 @@ export function emitAstroComponent(
   templateBody = mergeClassNameOntoRoot(templateBody);
 
   // Build frontmatter (includes class prop for instance style support)
-  const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags, ctx.needsI18nResolver ? defaultLocale : undefined);
+  const frontmatter = buildFrontmatter(
+    name,
+    propDefs,
+    ctx.imports,
+    ctx.dynamicTags,
+    ctx.needsI18nResolver ? defaultLocale : undefined,
+    ctx.imageImports
+  );
 
   // Build style/script sections
   const styleSection = comp.css ? `\n<style>\n${comp.css}\n</style>\n` : '';
+  const interactiveStyleSection = ctx.collectedInteractiveStyles!.size > 0
+    ? `\n<style is:global>\n${generateAllInteractiveCSS(ctx.collectedInteractiveStyles!, breakpoints, remConfig, responsiveScales)}\n</style>\n`
+    : '';
   const scriptSection = comp.javascript
     ? buildScriptSection(comp.javascript, comp, propDefs)
     : '';
 
-  return `---\n${frontmatter}---\n${templateBody}${styleSection}${scriptSection}`;
+  return `---\n${frontmatter}---\n${templateBody}${styleSection}${interactiveStyleSection}${scriptSection}`;
 }
 
 /**
@@ -181,13 +202,24 @@ function buildFrontmatter(
   propDefs: Record<string, PropDefinition>,
   imports: Set<string>,
   dynamicTags?: Map<string, string>,
-  i18nDefaultLocale?: string
+  i18nDefaultLocale?: string,
+  imageImports?: Map<string, string>
 ): string {
   const lines: string[] = [];
 
   // Component imports
   for (const imp of Array.from(imports).sort()) {
-    lines.push(`import ${imp} from './${imp}.astro';`);
+    lines.push(`import ${astroComponentName(imp)} from './${imp}.astro';`);
+  }
+
+  // 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 (imageImports && imageImports.size > 0) {
+    lines.push(`import { Picture } from 'astro:assets';`);
+    const sortedImages = Array.from(imageImports.entries()).sort(([a], [b]) => a.localeCompare(b));
+    for (const [varName, importPath] of sortedImages) {
+      lines.push(`import ${varName} from '${importPath}';`);
+    }
   }
 
   if (lines.length > 0) lines.push('');
@@ -314,16 +346,25 @@ function transformDefineVarsJS(js: string, varNames: string[]): string {
 
 /**
  * Build the script section with proper el/props initialization.
- * - defineVars components: use Astro's define:vars to pass props into inline script
- * - other components: use is:inline to avoid module bundling
- * Both cases use document.currentScript.previousElementSibling to get el.
+ * Captures el immediately via document.currentScript.previousElementSibling,
+ * then defers actual JS execution until DOMContentLoaded so that external
+ * libraries (e.g. Swiper loaded with defer) are available.
  */
 function buildScriptSection(
   js: string,
   comp: StructuredComponentDefinition,
   propDefs: Record<string, PropDefinition>
 ): string {
-  const elInit = 'const el = document.currentScript.previousElementSibling;';
+  // Capture el immediately (document.currentScript is only valid during script execution)
+  // but defer the component init until DOMContentLoaded so deferred libraries are ready
+  // Remove whitespace-only text nodes so Astro's formatted HTML matches SSR's minified output.
+  // Without this, scripts that use firstChild/childNodes pick up whitespace between elements.
+  const cleanTextNodes = `(function _w(n){var c=n.firstChild,x;while(c){x=c.nextSibling;if(c.nodeType===3){if(!c.textContent.trim())n.removeChild(c)}else if(c.nodeType===1){if(c.tagName==='SCRIPT')n.removeChild(c);else _w(c)}c=x}})(el);`;
+
+  const deferWrapper = (innerJS: string) =>
+    `var el = document.currentScript.previousElementSibling;\n` +
+    `function __init__() {\n${cleanTextNodes}\n${innerJS}\n}\n` +
+    `if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', __init__); } else { __init__(); }`;
 
   if (comp.defineVars) {
     const vars = comp.defineVars === true
@@ -333,9 +374,9 @@ function buildScriptSection(
     if (vars.length > 0) {
       const transformedJS = transformDefineVarsJS(js, vars);
       const defineVarsObj = `{ ${vars.join(', ')} }`;
-      return `\n<script define:vars={${defineVarsObj}}>\n${elInit}\n${transformedJS}\n</script>\n`;
+      return `\n<script define:vars={${defineVarsObj}}>\n(function(){\n${deferWrapper(transformedJS)}\n})();\n</script>\n`;
     }
   }
 
-  return `\n<script is:inline>\n${elInit}\n${js}\n</script>\n`;
+  return `\n<script is:inline>\n(function(){\n${deferWrapper(js)}\n})();\n</script>\n`;
 }

package/lib/server/astro/cssCollector.ts

@@ -14,6 +14,8 @@ import type {
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { propertyToTailwind } from './tailwindMapper';
+import type { ResponsiveScales, CSSPropertyType } from '../../shared/responsiveScaling';
+import { getScaleMultiplier, scalePropertyValue } from '../../shared/responsiveScaling';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -40,7 +42,8 @@ function isResponsiveStyle(
 function collectFromStyle(
   style: StyleObject | ResponsiveStyleObject | undefined,
   classes: Set<string>,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
+  responsiveScales?: ResponsiveScales
 ): void {
   if (!style) return;
 
@@ -48,24 +51,46 @@ function collectFromStyle(
     for (const [bp, bpStyle] of Object.entries(style)) {
       if (!bpStyle) continue;
       let prefix = '';
+      let bpName: string | undefined;
       if (bp !== 'base') {
         const bpValue = breakpoints[bp]?.breakpoint;
         if (bpValue) {
           prefix = `max-[${bpValue}px]:`;
+          bpName = bp;
         }
       }
-      collectFromFlatStyle(bpStyle, prefix, classes);
+      collectFromFlatStyle(bpStyle, prefix, classes, breakpoints, responsiveScales, bpName);
     }
   } else {
-    collectFromFlatStyle(style, '', classes);
+    collectFromFlatStyle(style, '', classes, breakpoints, responsiveScales);
   }
 }
 
 function collectFromFlatStyle(
   style: StyleObject,
   prefix: string,
-  classes: Set<string>
+  classes: Set<string>,
+  breakpoints: BreakpointConfig,
+  responsiveScales?: ResponsiveScales,
+  sourceBreakpoint?: string
 ): void {
+  // Only auto-scale when mapping value lives in the base branch (or a flat
+  // top-level style). Mappings inside an explicit breakpoint branch already
+  // describe the override the author wants — don't re-scale them.
+  const shouldAutoScale =
+    responsiveScales?.enabled === true && sourceBreakpoint === undefined;
+
+  const scaleBreakpoints = shouldAutoScale
+    ? 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)
+    : [];
+
+  const baseRef = responsiveScales?.baseReference ?? 16;
+
   for (const [property, value] of Object.entries(style)) {
     if (!isStyleMapping(value)) continue;
 
@@ -75,6 +100,26 @@ function collectFromFlatStyle(
       if (twClass) {
         classes.add(prefix ? `${prefix}${twClass}` : twClass);
       }
+
+      // Safelist auto-scaled `max-[Npx]:` variants so Tailwind generates
+      // CSS for each breakpoint-scaled class the runtime might produce.
+      if (shouldAutoScale && responsiveScales) {
+        const strValue = String(cssValue);
+        if (strValue === '') continue;
+        for (const { name: bpName, value: bpPixels } of scaleBreakpoints) {
+          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;
+          classes.add(`max-[${bpPixels}px]:${scaledClass}`);
+        }
+      }
     }
   }
 }
@@ -85,27 +130,28 @@ function collectFromFlatStyle(
 function walkNode(
   node: ComponentNode | ComponentNode[] | string | number | null | undefined,
   classes: Set<string>,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
+  responsiveScales?: ResponsiveScales
 ): void {
   if (!node || typeof node === 'string' || typeof node === 'number') return;
 
   if (Array.isArray(node)) {
     for (const child of node) {
-      walkNode(child, classes, breakpoints);
+      walkNode(child, classes, breakpoints, responsiveScales);
     }
     return;
   }
 
   // Collect from style
   if ('style' in node && node.style) {
-    collectFromStyle(node.style as StyleObject | ResponsiveStyleObject, classes, breakpoints);
+    collectFromStyle(node.style as StyleObject | ResponsiveStyleObject, classes, breakpoints, responsiveScales);
   }
 
   // Collect from interactive styles
   if ('interactiveStyles' in node && Array.isArray((node as any).interactiveStyles)) {
     for (const rule of (node as any).interactiveStyles) {
       if (rule.style) {
-        collectFromStyle(rule.style, classes, breakpoints);
+        collectFromStyle(rule.style, classes, breakpoints, responsiveScales);
       }
     }
   }
@@ -114,7 +160,7 @@ function walkNode(
   if ('children' in node && node.children) {
     if (Array.isArray(node.children)) {
       for (const child of node.children) {
-        walkNode(child as ComponentNode, classes, breakpoints);
+        walkNode(child as ComponentNode, classes, breakpoints, responsiveScales);
       }
     }
   }
@@ -132,14 +178,15 @@ function walkNode(
  */
 export function collectAllMappingClasses(
   componentDefs: Record<string, ComponentDefinition>,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
+  responsiveScales?: ResponsiveScales
 ): Set<string> {
   const classes = new Set<string>();
 
   for (const def of Object.values(componentDefs)) {
     const structure = def.component?.structure;
     if (structure) {
-      walkNode(structure, classes, breakpoints);
+      walkNode(structure, classes, breakpoints, responsiveScales);
     }
   }