meno-core 1.0.45 → 1.0.47

package/lib/server/astro/nodeToAstro.ts

@@ -29,6 +29,7 @@ import type {
 } from '../../shared/types/styles';
 import { responsiveStylesToTailwind, propertyToTailwind } from './tailwindMapper';
 import type { BreakpointConfig } from '../../shared/breakpoints';
+import type { ResponsiveScales } from '../../shared/responsiveScaling';
 import { generateElementClassName, type ElementClassContext } from '../../shared/elementClassName';
 import { isVoidElement, hasIf, hasChildren, isSlotContent as isSlotContentNode } from '../../shared/nodeUtils';
 import { NODE_TYPE, RAW_HTML_PREFIX } from '../../shared/constants';
@@ -38,6 +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, astroComponentName } from './astroEmitHelpers';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -64,6 +66,8 @@ export interface AstroEmitContext {
   fileName: string;
   /** Breakpoint config for responsive Tailwind classes */
   breakpoints: BreakpointConfig;
+  /** Responsive scales config for auto-scaling spacing/typography/sizing */
+  responsiveScales?: ResponsiveScales;
   /** Dynamic tag definitions collected during traversal (for frontmatter) */
   dynamicTags?: Map<string, string>;
   /** Image metadata map for responsive image generation */
@@ -102,8 +106,29 @@ export interface AstroEmitContext {
   slugMappings?: SlugMap[];
   /** I18n default locale (for slug translation) */
   i18nDefaultLocale?: string;
+  /**
+   * Raw-HTML slice → processed HTML captured during the SSR pass for this page.
+   * Used by the RAW_HTML_PREFIX branch to emit rich-text content that has had
+   * image rewriting, component expansion, and link localization applied.
+   */
+  processedRawHtml?: Map<string, string>;
   /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> with AVIF+WebP sources */
   imageFormat?: 'webp' | 'avif';
+  /**
+   * Static image imports collected during emission: varName → import path
+   * relative to the emitting file. Drives `import foo from '...'` in
+   * frontmatter and unlocks astro:assets <Picture> for static local images.
+   *
+   * Note: this is a Map (ref-shared across child ctx spreads), so mutations
+   * inside list/dynamic inner contexts remain visible to the parent. A
+   * separate boolean flag would be dropped by `{ ...ctx }` shallow copies —
+   * the presence of any entry here implies `import { Picture } from 'astro:assets'`.
+   */
+  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>;
 }
 
 // ---------------------------------------------------------------------------
@@ -206,7 +231,12 @@ function escapeJSX(s: string): string {
  * Escape a string for use inside a JS template literal
  */
 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');
 }
 
 /**
@@ -311,7 +341,7 @@ function buildClassAndStyleExpression(
 ): { classExpr: string; styleAttr: string } {
   // Static Tailwind classes from non-mapping styles
   const result = style
-    ? responsiveStylesToTailwind(style, ctx.breakpoints)
+    ? responsiveStylesToTailwind(style, ctx.breakpoints, ctx.responsiveScales)
     : { classes: [], dynamicStyles: {} };
   const staticClasses = result.classes;
   const dynamicStyles = result.dynamicStyles;
@@ -439,7 +469,7 @@ function resolveTemplate(text: string, ctx: AstroEmitContext): string {
     if (ctx.listItemBinding) propName = rewriteItemVar(propName, ctx.listItemBinding);
     if (ctx.listIndexVar) propName = replaceItemMetaVars(propName, ctx.listIndexVar, ctx.listSourceVar);
     // Rich-text props contain HTML - render unescaped via set:html
-    if (ctx.componentProps[propName]?.type === 'rich-text') {
+    if (ctx.componentProps[propName]?.type === 'rich-text' || ctx.componentProps[propName]?.type === 'embed') {
       return `<Fragment set:html={${propName}} />`;
     }
     return `{${propName}}`;
@@ -475,6 +505,7 @@ function buildElementClass(
   });
 }
 
+
 /**
  * Build HTML attributes string from node attributes
  */
@@ -555,6 +586,7 @@ function buildAttributesString(
  * Format a prop value for Astro template usage
  */
 function formatPropValue(value: unknown): string {
+  value = stripRawHtmlPrefixDeep(value);
   if (typeof value === 'string') return `"${escapeJSX(value)}"`;
   if (typeof value === 'number') return `{${value}}`;
   if (typeof value === 'boolean') return `{${value}}`;
@@ -591,12 +623,13 @@ export function nodeToAstro(
   if (typeof node === 'object' && !Array.isArray(node) && isI18nValue(node)) {
     const resolved = resolveI18n(node, ctx);
     if (typeof resolved === 'string') {
-      return `${ind(ctx)}${escapeJSX(resolved)}\n`;
+      // Delegate to the text-node path so RAW_HTML_PREFIX gets emitted via <Fragment set:html>.
+      return nodeToAstro(resolved, ctx);
     }
     // In component def without locale: wrap with r() resolver
     if (ctx.isComponentDef && isI18nValue(resolved)) {
       ctx.needsI18nResolver = true;
-      return `${ind(ctx)}{r(${JSON.stringify(resolved)})}\n`;
+      return `${ind(ctx)}{r(${JSON.stringify(stripRawHtmlPrefixDeep(resolved))})}\n`;
     }
     // If resolution returned a non-string (e.g. array), stringify it
     return `${ind(ctx)}${String(resolved ?? '')}\n`;
@@ -617,9 +650,12 @@ export function nodeToAstro(
     if (hasTemplates(node) && ctx.isComponentDef) {
       return `${ind(ctx)}${resolveTemplate(node, ctx)}\n`;
     }
-    // Raw HTML marker (from rich-text fields) - render unescaped via set:html
+    // Raw HTML marker (from rich-text fields) - render unescaped via set:html.
+    // Prefer the SSR-processed HTML when available so image rewriting, component
+    // expansion, and link localization match what meno-core renders at runtime.
     if (node.startsWith(RAW_HTML_PREFIX)) {
-      const rawHtml = node.slice(RAW_HTML_PREFIX.length);
+      const rawSlice = node.slice(RAW_HTML_PREFIX.length);
+      const rawHtml = ctx.processedRawHtml?.get(rawSlice) ?? rawSlice;
       return `${ind(ctx)}<Fragment set:html={\`${escapeTemplateLiteral(rawHtml)}\`} />\n`;
     }
     return `${ind(ctx)}${escapeJSX(node)}\n`;
@@ -681,6 +717,12 @@ const IMG_OPACITY_PATTERN = /^opacity-/;
  */
 const DEFAULT_SIZES = '100vw';
 
+/**
+ * Tailwind classes applied to the inner <img> so it fills its wrapper (<picture>)
+ * when a responsive/blurred image wraps the element.
+ */
+const IMG_FILL_CLASSES = ['block', 'w-full', 'h-full'];
+
 /**
  * Split Tailwind classes into picture (layout) and img (visual) groups.
  * Layout classes go on <picture>, image-specific classes go on <img>.
@@ -702,10 +744,283 @@ function splitImageClasses(allClasses: string[]): { pictureClasses: string[]; im
   return { pictureClasses, imgClasses };
 }
 
+/**
+ * Extract a pixel width from a style value. Returns null for %, vw, auto,
+ * or any other non-px value we can't translate into a sizes hint.
+ */
+function extractPxWidth(val: unknown): number | null {
+  if (typeof val === 'number' && Number.isFinite(val) && val > 0) return val;
+  if (typeof val !== 'string') return null;
+  const match = val.trim().match(/^(\d+(?:\.\d+)?)px$/);
+  if (!match) return null;
+  const n = parseFloat(match[1]);
+  return n > 0 ? n : null;
+}
+
+/**
+ * Compute a `sizes` attribute from a node's responsive style + breakpoint config.
+ * Produces something like `(max-width: 540px) 400px, (max-width: 1024px) 500px, 700px`
+ * so the browser can pick the smallest srcset variant that covers the rendered width
+ * at each viewport. Falls back to `100vw` when no usable px width is available.
+ */
+function computeSizesAttribute(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  breakpoints: BreakpointConfig
+): string {
+  if (!style) return DEFAULT_SIZES;
+
+  const responsive = isResponsiveStyle(style as any);
+  const baseStyle: StyleObject | undefined = responsive
+    ? (style as ResponsiveStyleObject).base
+    : (style as StyleObject);
+
+  // Base (desktop) width — the biggest viewport
+  const baseWidth = baseStyle ? extractPxWidth((baseStyle as StyleObject).width) : null;
+  // If even the base width is unknown, nothing we can do — use 100vw.
+  if (baseWidth == null) return DEFAULT_SIZES;
+
+  // Walk breakpoints from smallest to largest so the emitted media queries
+  // are ordered from narrowest to widest, with the unconditional base last.
+  const bpEntries = Object.entries(breakpoints).sort(
+    (a, b) => a[1].breakpoint - b[1].breakpoint
+  );
+
+  const parts: string[] = [];
+  // Track the "effective" width as we walk up: if a breakpoint doesn't set its
+  // own width, it inherits from the next step up, and ultimately from base.
+  // We walk ascending, so we need to resolve by looking from smallest bp up to base.
+  for (const [name, entry] of bpEntries) {
+    let effective: number | null = null;
+    if (responsive) {
+      // Look at this bp, then larger bps, then base
+      const bpStyle = (style as ResponsiveStyleObject)[name];
+      effective = bpStyle ? extractPxWidth((bpStyle as StyleObject).width) : null;
+      if (effective == null) {
+        // Inherit from next-larger breakpoint(s)
+        for (const [largerName, largerEntry] of bpEntries) {
+          if (largerEntry.breakpoint <= entry.breakpoint) continue;
+          const largerStyle = (style as ResponsiveStyleObject)[largerName];
+          const larger = largerStyle ? extractPxWidth((largerStyle as StyleObject).width) : null;
+          if (larger != null) {
+            effective = larger;
+            break;
+          }
+        }
+      }
+      if (effective == null) effective = baseWidth;
+    } else {
+      effective = baseWidth;
+    }
+    parts.push(`(max-width: ${entry.breakpoint}px) ${effective}px`);
+  }
+  parts.push(`${baseWidth}px`);
+  return parts.join(', ');
+}
+
+/**
+ * Merge additional CSS declarations into an existing ` style="..."` attribute
+ * string. If no style attribute exists yet, builds one. The inputs are raw CSS
+ * already escaped for HTML attribute context.
+ */
+function injectInlineStyle(styleAttr: string, extraCss: string): string {
+  if (!extraCss) return styleAttr;
+  if (!styleAttr) return ` style="${extraCss}"`;
+  return styleAttr.replace(/style="([^"]*)"/, (_, existing: string) => {
+    const trimmed = existing.trimEnd();
+    const sep = trimmed.length > 0 && !trimmed.endsWith(';') ? ';' : '';
+    return `style="${existing}${sep}${extraCss}"`;
+  });
+}
+
 /**
  * Emit an <img> node as a <picture> element with AVIF/WebP sources when
  * image metadata is available, or as a plain <img> with srcset otherwise.
  */
+// Widths used for <Picture> srcset generation. Mirrors
+// RESPONSIVE_WIDTHS in imageMetadata.ts.
+const PICTURE_WIDTHS = [500, 800, 1080, 1600, 2400];
+
+/**
+ * Turn an image path like `/images/sub/hero-photo.jpg` into a stable JS
+ * identifier (`imgSubHeroPhoto`) for use as an ESM import variable.
+ */
+function imagePathToVarName(srcPath: string): string {
+  const stripped = srcPath.replace(/^\/+/, '').replace(/^images\//, '').replace(/\.[^.]+$/, '');
+  const parts = stripped.split(/[/_\-\s.]+/).filter(Boolean);
+  if (parts.length === 0) return 'imgAsset';
+  const camel = parts
+    .map((p, i) => {
+      const clean = p.replace(/[^a-zA-Z0-9]/g, '');
+      if (!clean) return '';
+      if (i === 0) return clean.toLowerCase();
+      return clean[0].toUpperCase() + clean.slice(1).toLowerCase();
+    })
+    .join('');
+  if (!camel) return 'imgAsset';
+  return 'img' + camel[0].toUpperCase() + camel.slice(1);
+}
+
+/**
+ * Compute an ESM import path relative to the emitting file for a Meno image
+ * URL. For file depth N (e.g. `src/pages/en/about.astro` is depth 1), the
+ * path is `'../'.repeat(N + 1) + 'assets/images/<rest>'`.
+ */
+function imageImportPath(srcPath: string, fileDepth: number): string {
+  const rest = srcPath.replace(/^\/+/, '').replace(/^images\//, '');
+  const ups = '../'.repeat(Math.max(0, fileDepth) + 1);
+  return `${ups}assets/images/${rest}`;
+}
+
+/**
+ * Decide whether an image src can be switched to <Picture>. Only plain
+ * literal local paths (`/images/...`) with known metadata qualify — CMS
+ * templates, list-item bindings, component props, and remote URLs take the
+ * legacy <img>/<picture> path.
+ */
+function isStaticImageSrc(src: string | undefined, ctx: AstroEmitContext): src is string {
+  if (!src) return false;
+  if (typeof src !== 'string') return false;
+  if (hasTemplates(src)) return false;
+  if (!src.startsWith('/images/')) return false;
+  if (!ctx.imageMetadataMap?.has(src)) return false;
+  return true;
+}
+
+/**
+ * Register (or reuse) an ESM image import on the emit context. Returns the
+ * JS variable name to reference in the generated template.
+ */
+function registerStaticImageImport(src: string, ctx: AstroEmitContext): string {
+  if (!ctx.imageImports) ctx.imageImports = new Map();
+  const depth = ctx.fileDepth ?? 0;
+  const importPath = imageImportPath(src, depth);
+
+  for (const [existingName, existingPath] of ctx.imageImports) {
+    if (existingPath === importPath) return existingName;
+  }
+
+  const base = imagePathToVarName(src);
+  let name = base;
+  let counter = 2;
+  while (ctx.imageImports.has(name)) {
+    name = `${base}${counter++}`;
+  }
+  ctx.imageImports.set(name, importPath);
+  return name;
+}
+
+/**
+ * Split a static `classExpr` into the outer layout classes (for <picture> /
+ * wrapper) and the inner image classes (for the emitted <img> inside
+ * <Picture>). Mirrors `splitImageClasses()` used by the legacy emitter so
+ * object-cover / opacity-* keep landing on the <img>. Returns null when the
+ * class expression is dynamic (class:list) — callers fall back to div wrap.
+ */
+function splitStaticClassExpr(
+  classExpr: string
+): { outerClasses: string[]; innerClasses: string[] } | null {
+  if (classExpr.includes('class:list=')) return null;
+  const classMatch = classExpr.match(/class="([^"]*)"/);
+  if (!classMatch) return { outerClasses: [], innerClasses: [] };
+  const all = classMatch[1].split(/\s+/).filter(Boolean);
+  const { pictureClasses, imgClasses } = splitImageClasses(all);
+  return { outerClasses: pictureClasses, innerClasses: imgClasses };
+}
+
+/**
+ * Format a static class+style pair as an Astro `pictureAttributes={{...}}`
+ * prop. `classValue` comes pre-split (outer layout classes only).
+ */
+function formatPictureAttributesProp(
+  classValue: string,
+  styleAttr: string
+): string {
+  const styleMatch = styleAttr.match(/style="([^"]*)"/);
+  const parts: string[] = [];
+  if (classValue) parts.push(`class: ${JSON.stringify(classValue)}`);
+  if (styleMatch) parts.push(`style: ${JSON.stringify(styleMatch[1])}`);
+  if (parts.length === 0) return '';
+  return ` pictureAttributes={{${parts.join(', ')}}}`;
+}
+
+/**
+ * Emit a static local image as an astro:assets <Picture>. Called only after
+ * isStaticImageSrc() has passed. Non-static paths should never reach here.
+ */
+function emitStaticPictureImage(
+  src: string,
+  alt: string | undefined,
+  loading: string | undefined,
+  fetchpriority: string | undefined,
+  sizesValue: string,
+  classExpr: string,
+  styleAttr: string,
+  ifExpr: string,
+  ifClose: string,
+  blurHash: string | undefined,
+  ctx: AstroEmitContext
+): string {
+  const varName = registerStaticImageImport(src, ctx);
+
+  const widthsLiteral = `[${PICTURE_WIDTHS.join(', ')}]`;
+  const altAttr = alt !== undefined ? ` alt="${escapeJSX(String(alt))}"` : ' alt=""';
+  const loadingAttr = loading ? ` loading="${escapeJSX(loading)}"` : '';
+  const fetchpriorityAttr = fetchpriority ? ` fetchpriority="${escapeJSX(fetchpriority)}"` : '';
+
+  // Split classes so object-cover / opacity land on the <img>, not the
+  // outer <picture>/wrapper. splitStaticClassExpr returns null for dynamic
+  // class:list — callers fall back to a <div> wrapper without splitting.
+  const split = splitStaticClassExpr(classExpr);
+
+  if (blurHash) {
+    // Blur placeholder: put the blur background-image + layout classes on
+    // the <picture> element via pictureAttributes. This mirrors the legacy
+    // path where <picture> was both the blur host and layout container.
+    // The inner <img> gets fill + img-specific classes and clears the blur
+    // on load via this.parentElement (direct parent = <picture>).
+    const blurCss = `background-image:url(${escapeJSX(blurHash)});background-size:cover`;
+    const blurStyleAttr = injectInlineStyle(styleAttr, blurCss);
+    const onloadAttr = ` onload="this.parentElement.style.backgroundImage=''"`;
+
+    if (split) {
+      const outerClassValue = split.outerClasses.join(' ');
+      const pictureAttrs = formatPictureAttributesProp(outerClassValue, blurStyleAttr);
+      const innerClasses = [...split.innerClasses, ...IMG_FILL_CLASSES];
+      const innerClassAttr = ` class="${innerClasses.join(' ')}"`;
+      return `${ifExpr}${ind(ctx)}<Picture${pictureAttrs} src={${varName}}${altAttr}${innerClassAttr} formats={['avif','webp']} widths={${widthsLiteral}} sizes="${escapeJSX(sizesValue)}"${loadingAttr}${fetchpriorityAttr}${onloadAttr} />\n${ifClose}`;
+    }
+
+    // Dynamic class:list: fall back to a <div> wrapper since we can't
+    // convert class:list to a pictureAttributes JS object.
+    const wrapperClassExpr = classExpr;
+    const wrapperStyleAttr = injectInlineStyle(styleAttr, blurCss);
+    const fillClassAttr = ` class="${IMG_FILL_CLASSES.join(' ')}"`;
+    return (
+      `${ifExpr}${ind(ctx)}<div${wrapperClassExpr}${wrapperStyleAttr}>\n` +
+      `${ind(ctx)}  <Picture pictureAttributes={{class: "${IMG_FILL_CLASSES.join(' ')}"}} src={${varName}}${altAttr}${fillClassAttr} formats={['avif','webp']} widths={${widthsLiteral}} sizes="${escapeJSX(sizesValue)}"${loadingAttr}${fetchpriorityAttr} onload="this.parentElement.parentElement.style.backgroundImage=''" />\n` +
+      `${ind(ctx)}</div>\n${ifClose}`
+    );
+  }
+
+  // Non-blur case: forward outer classes via pictureAttributes so they land
+  // on the <picture>, inner img-specific classes as `class` on <Picture>.
+  if (split) {
+    const outerClassValue = split.outerClasses.join(' ');
+    const innerClassAttr = split.innerClasses.length > 0
+      ? ` class="${split.innerClasses.join(' ')}"`
+      : '';
+    const pictureAttrs = formatPictureAttributesProp(outerClassValue, styleAttr);
+    return `${ifExpr}${ind(ctx)}<Picture${pictureAttrs} src={${varName}}${altAttr}${innerClassAttr} formats={['avif','webp']} widths={${widthsLiteral}} sizes="${escapeJSX(sizesValue)}"${loadingAttr}${fetchpriorityAttr} />\n${ifClose}`;
+  }
+
+  // Dynamic class:list: wrap in a <div> so the dynamic expression survives.
+  return (
+    `${ifExpr}${ind(ctx)}<div${classExpr}${styleAttr}>\n` +
+    `${ind(ctx)}  <Picture src={${varName}}${altAttr} formats={['avif','webp']} widths={${widthsLiteral}} sizes="${escapeJSX(sizesValue)}"${loadingAttr}${fetchpriorityAttr} />\n` +
+    `${ind(ctx)}</div>\n${ifClose}`
+  );
+}
+
 function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
   const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
 
@@ -716,6 +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(
@@ -744,7 +1062,26 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
     if (height === undefined && metadata.height) height = metadata.height;
   }
 
-  const sizesValue = sizes || DEFAULT_SIZES;
+  // Compute real sizes from responsive style widths; user override wins.
+  const sizesValue = sizes || computeSizesAttribute(style, ctx.breakpoints);
+
+  // Static local image → astro:assets <Picture> (ESM import, Astro-managed
+  // optimization). Predicate rejects CMS/list/template/remote src.
+  if (isStaticImageSrc(src, ctx)) {
+    return emitStaticPictureImage(
+      src,
+      alt,
+      loading,
+      fetchpriority,
+      sizesValue,
+      classExpr,
+      styleAttr,
+      emitIfOpen(node, ctx),
+      emitIfClose(node, ctx),
+      metadata?.blurHash,
+      ctx
+    );
+  }
 
   // Build remaining attributes (exclude image-specific ones we handle manually)
   const imageSpecificKeys = new Set(['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority']);
@@ -765,56 +1102,82 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
   if (width !== undefined) imgAttrs += ` width="${escapeJSX(String(width))}"`;
   if (height !== undefined) imgAttrs += ` height="${escapeJSX(String(height))}"`;
 
-  // Blur placeholder style
-  let blurStyle = '';
-  if (metadata?.blurHash) {
-    blurStyle = ` style="background-image: url(${escapeJSX(metadata.blurHash)}); background-size: cover;" onload="this.style.backgroundImage=''"`;
-  }
+  const hasAvif = !!(metadata?.avifSrcset && ctx.imageFormat !== 'webp');
+  const hasBlur = !!metadata?.blurHash;
+  // Any time we need a wrapper to host the blur placeholder or <source> tags.
+  const useWrapper = hasAvif || hasBlur;
+
+  // Blur placeholder is painted on the wrapper element (NOT the <img>, which
+  // is a replaced element and doesn't paint CSS backgrounds reliably).
+  // Once the real image loads we clear the background on the wrapper so the
+  // low-quality placeholder disappears.
+  const blurWrapperCss = hasBlur
+    ? `background-image:url(${escapeJSX(metadata!.blurHash!)});background-size:cover`
+    : '';
+  const blurOnload = hasBlur
+    ? ` onload="this.parentElement.style.backgroundImage=''"`
+    : '';
 
   // Conditional rendering
   const ifExpr = emitIfOpen(node, ctx);
   const ifClose = emitIfClose(node, ctx);
 
-  // If we have AVIF srcset and format allows, render as <picture> with split classes
-  if (metadata?.avifSrcset && ctx.imageFormat !== 'webp') {
-    // Extract static classes from classExpr for splitting
-    const classMatch = classExpr.match(/class="([^"]*)"/);
+  if (useWrapper) {
+    // The inner <img> must fill the picture wrapper; otherwise it renders at
+    // its intrinsic size and the wrapper's layout (w/h/position) is wasted.
+    const imgFillClasses = IMG_FILL_CLASSES.slice();
+
     const classListMatch = classExpr.match(/class:list={\[(.+)\]}/);
+    const classMatch = classExpr.match(/class="([^"]*)"/);
 
+    let pictureClassExpr = '';
+    let imgClassAttr = '';
     if (classListMatch) {
-      // Dynamic class:list - put it all on the picture, img gets none
-      // (splitting dynamic classes is too complex; layout on picture is the safer default)
+      // Dynamic class:list - put it all on the picture. The inner img only
+      // needs fill classes (splitting dynamic class lists isn't worth it).
+      pictureClassExpr = classExpr;
+      imgClassAttr = ` class="${imgFillClasses.join(' ')}"`;
+    } else {
+      const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
+      const { pictureClasses, imgClasses } = splitImageClasses(allClasses);
+      const fullImgClasses = [...imgClasses, ...imgFillClasses];
+      pictureClassExpr = pictureClasses.length > 0 ? ` class="${pictureClasses.join(' ')}"` : '';
+      imgClassAttr = fullImgClasses.length > 0 ? ` class="${fullImgClasses.join(' ')}"` : '';
+    }
+
+    const wrapperStyleAttr = injectInlineStyle(styleAttr, blurWrapperCss);
+
+    // With AVIF: full <picture> + <source> elements
+    if (hasAvif) {
       return (
-        `${ifExpr}${ind(ctx)}<picture${classExpr}${styleAttr}>\n` +
-        `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
-        `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
-        `${ind(ctx)}  <img${imgAttrs}${blurStyle}${otherAttrsStr} />\n` +
+        `${ifExpr}${ind(ctx)}<picture${pictureClassExpr}${wrapperStyleAttr}>\n` +
+        `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata!.avifSrcset!)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata!.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurOnload}${otherAttrsStr} />\n` +
         `${ind(ctx)}</picture>\n${ifClose}`
       );
     }
 
-    const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
-    const { pictureClasses, imgClasses } = splitImageClasses(allClasses);
-
-    const pictureClassAttr = pictureClasses.length > 0 ? ` class="${pictureClasses.join(' ')}"` : '';
-    const imgClassAttr = imgClasses.length > 0 ? ` class="${imgClasses.join(' ')}"` : '';
-
+    // No AVIF, but we still need the wrapper for blur. Put srcset on the <img>
+    // itself since we're not using <source>.
+    if (metadata?.srcset) {
+      imgAttrs += ` srcset="${escapeJSX(metadata.srcset)}"`;
+      imgAttrs += ` sizes="${escapeJSX(sizesValue)}"`;
+    }
     return (
-      `${ifExpr}${ind(ctx)}<picture${pictureClassAttr}${styleAttr}>\n` +
-      `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
-      `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
-      `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurStyle}${otherAttrsStr} />\n` +
+      `${ifExpr}${ind(ctx)}<picture${pictureClassExpr}${wrapperStyleAttr}>\n` +
+      `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurOnload}${otherAttrsStr} />\n` +
       `${ind(ctx)}</picture>\n${ifClose}`
     );
   }
 
-  // Fallback: regular img with WebP srcset if available
+  // No wrapper needed: plain <img> with optional srcset/sizes
   if (metadata?.srcset) {
     imgAttrs += ` srcset="${escapeJSX(metadata.srcset)}"`;
     imgAttrs += ` sizes="${escapeJSX(sizesValue)}"`;
   }
 
-  return `${ifExpr}${ind(ctx)}<img${classExpr}${styleAttr}${imgAttrs}${blurStyle}${otherAttrsStr} />\n${ifClose}`;
+  return `${ifExpr}${ind(ctx)}<img${classExpr}${styleAttr}${imgAttrs}${otherAttrsStr} />\n${ifClose}`;
 }
 
 function emitHtmlNode(node: HtmlNode, ctx: AstroEmitContext): string {
@@ -857,6 +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);
@@ -883,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);
 
@@ -929,16 +1295,24 @@ function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContex
       } else if (ctx.isComponentDef && isI18nValue(value)) {
         // i18n object in component def — wrap with r() resolver (resolved at runtime via Astro.currentLocale)
         ctx.needsI18nResolver = true;
-        propParts.push(`${key}={r(${JSON.stringify(value)})}`);
+        propParts.push(`${key}={r(${JSON.stringify(stripRawHtmlPrefixDeep(value))})}`);
       } else {
-        propParts.push(`${key}=${formatPropValue(value)}`);
+        // Rich-text / embed props contain HTML/SVG — pass as template literal
+        // so the component can render via set:html without entity escaping
+        const targetInterface = ctx.globalComponents[name]?.component?.interface;
+        const propDef = targetInterface?.[key];
+        if (typeof value === 'string' && (propDef?.type === 'rich-text' || propDef?.type === 'embed')) {
+          propParts.push(`${key}={\`${escapeTemplateLiteral(stripRawHtmlPrefixDeep(value) as string)}\`}`);
+        } else {
+          propParts.push(`${key}=${formatPropValue(value)}`);
+        }
       }
     }
   }
 
   // Instance-level style overrides as className (Tailwind)
   if (node.style) {
-    const { classes: instanceClasses } = responsiveStylesToTailwind(node.style as StyleObject | ResponsiveStyleObject, ctx.breakpoints);
+    const { classes: instanceClasses } = responsiveStylesToTailwind(node.style as StyleObject | ResponsiveStyleObject, ctx.breakpoints, ctx.responsiveScales);
     if (instanceClasses.length > 0) {
       propParts.push(`class="${instanceClasses.join(' ')}"`);
     }
@@ -946,7 +1320,11 @@ function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContex
 
   const propsStr = propParts.length > 0 ? ' ' + propParts.join(' ') : '';
 
-  const children = emitChildren(node.children, ctx);
+  // Reset elementPath to [0] when entering a component instance, matching SSR's
+  // renderComponent behavior. This ensures hash-based element class names for
+  // slot content are identical between SSR (CSS) and Astro (HTML).
+  const childCtx = { ...ctx, elementPath: [0] };
+  const children = emitChildren(node.children, childCtx);
 
   if (!children.trim()) {
     return `${ifExpr}${ind(ctx)}<${name}${propsStr} />\n${emitIfClose(node, ctx)}`;
@@ -983,6 +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);
@@ -1055,6 +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
@@ -1151,6 +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(
@@ -1163,6 +1550,24 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
   const src = node.src as string | undefined;
   const alt = node.alt as string | undefined;
 
+  // Static local image → astro:assets <Picture>
+  if (isStaticImageSrc(src, ctx)) {
+    const staticMeta = ctx.imageMetadataMap!.get(src)!;
+    return emitStaticPictureImage(
+      src,
+      alt,
+      undefined,
+      undefined,
+      computeSizesAttribute(style, ctx.breakpoints),
+      classExpr,
+      styleAttr,
+      '',
+      '',
+      staticMeta.blurHash,
+      ctx
+    );
+  }
+
   let imgAttrs = '';
   if (src) imgAttrs += ` src="${escapeJSX(String(src))}"`;
   if (alt !== undefined) imgAttrs += ` alt="${escapeJSX(String(alt))}"`;
@@ -1170,32 +1575,43 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
   // Check for image metadata for responsive images
   const metadata = src ? ctx.imageMetadataMap?.get(String(src)) : undefined;
 
-  if (metadata) {
-    let width = metadata.width;
-    let height = metadata.height;
-    if (width !== undefined) imgAttrs += ` width="${width}"`;
-    if (height !== undefined) imgAttrs += ` height="${height}"`;
-
-    let blurStyle = '';
-    if (metadata.blurHash) {
-      blurStyle = ` style="background-image: url(${escapeJSX(metadata.blurHash)}); background-size: cover;" onload="this.style.backgroundImage=''"`;
-    }
+  if (!metadata) {
+    return `${ind(ctx)}<img${classExpr}${styleAttr}${imgAttrs} />\n`;
+  }
 
-    const sizesValue = DEFAULT_SIZES;
+  if (metadata.width !== undefined) imgAttrs += ` width="${metadata.width}"`;
+  if (metadata.height !== undefined) imgAttrs += ` height="${metadata.height}"`;
 
-    if (metadata.avifSrcset && ctx.imageFormat !== 'webp') {
-      const classMatch = classExpr.match(/class="([^"]*)"/);
-      const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
-      const { pictureClasses, imgClasses } = splitImageClasses(allClasses);
+  const sizesValue = computeSizesAttribute(style, ctx.breakpoints);
 
-      const pictureClassAttr = pictureClasses.length > 0 ? ` class="${pictureClasses.join(' ')}"` : '';
-      const imgClassAttr = imgClasses.length > 0 ? ` class="${imgClasses.join(' ')}"` : '';
+  const hasAvif = !!(metadata.avifSrcset && ctx.imageFormat !== 'webp');
+  const hasBlur = !!metadata.blurHash;
+  const useWrapper = hasAvif || hasBlur;
 
+  const blurWrapperCss = hasBlur
+    ? `background-image:url(${escapeJSX(metadata.blurHash!)});background-size:cover`
+    : '';
+  const blurOnload = hasBlur
+    ? ` onload="this.parentElement.style.backgroundImage=''"`
+    : '';
+
+  if (useWrapper) {
+    const imgFillClasses = IMG_FILL_CLASSES.slice();
+    const classMatch = classExpr.match(/class="([^"]*)"/);
+    const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
+    const { pictureClasses, imgClasses } = splitImageClasses(allClasses);
+    const fullImgClasses = [...imgClasses, ...imgFillClasses];
+
+    const pictureClassAttr = pictureClasses.length > 0 ? ` class="${pictureClasses.join(' ')}"` : '';
+    const imgClassAttr = fullImgClasses.length > 0 ? ` class="${fullImgClasses.join(' ')}"` : '';
+    const wrapperStyleAttr = injectInlineStyle(styleAttr, blurWrapperCss);
+
+    if (hasAvif) {
       return (
-        `${ind(ctx)}<picture${pictureClassAttr}${styleAttr}>\n` +
-        `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}<picture${pictureClassAttr}${wrapperStyleAttr}>\n` +
+        `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset!)}" sizes="${escapeJSX(sizesValue)}" />\n` +
         `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
-        `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurStyle} />\n` +
+        `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurOnload} />\n` +
         `${ind(ctx)}</picture>\n`
       );
     }
@@ -1204,6 +1620,16 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
       imgAttrs += ` srcset="${escapeJSX(metadata.srcset)}"`;
       imgAttrs += ` sizes="${escapeJSX(sizesValue)}"`;
     }
+    return (
+      `${ind(ctx)}<picture${pictureClassAttr}${wrapperStyleAttr}>\n` +
+      `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurOnload} />\n` +
+      `${ind(ctx)}</picture>\n`
+    );
+  }
+
+  if (metadata.srcset) {
+    imgAttrs += ` srcset="${escapeJSX(metadata.srcset)}"`;
+    imgAttrs += ` sizes="${escapeJSX(sizesValue)}"`;
   }
 
   return `${ind(ctx)}<img${classExpr}${styleAttr}${imgAttrs} />\n`;
@@ -1370,6 +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(
@@ -1381,17 +1810,17 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
 
   // Build item classes
   const itemStyle = node.itemStyle as StyleObject | ResponsiveStyleObject | undefined;
-  const itemResult = itemStyle ? responsiveStylesToTailwind(itemStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const itemResult = itemStyle ? responsiveStylesToTailwind(itemStyle, ctx.breakpoints, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
   const itemClasses = itemResult.classes;
 
   // Build active item classes (item + active combined)
   const activeItemStyle = node.activeItemStyle as StyleObject | ResponsiveStyleObject | undefined;
-  const activeResult = activeItemStyle ? responsiveStylesToTailwind(activeItemStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const activeResult = activeItemStyle ? responsiveStylesToTailwind(activeItemStyle, ctx.breakpoints, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
   const activeItemClasses = [...itemClasses, ...activeResult.classes];
 
   // Build separator classes
   const separatorStyle = node.separatorStyle as StyleObject | ResponsiveStyleObject | undefined;
-  const sepResult = separatorStyle ? responsiveStylesToTailwind(separatorStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const sepResult = separatorStyle ? responsiveStylesToTailwind(separatorStyle, ctx.breakpoints, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
   const separatorClasses = sepResult.classes;
 
   // Build locale icon map
@@ -1404,7 +1833,7 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
 
   // Flag classes
   const flagStyle = node.flagStyle as StyleObject | ResponsiveStyleObject | undefined;
-  const flagResult = flagStyle ? responsiveStylesToTailwind(flagStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const flagResult = flagStyle ? responsiveStylesToTailwind(flagStyle, ctx.breakpoints, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
   const flagClasses = flagResult.classes;
 
   // Build links