meno-core 1.0.1 → 1.0.2

package/lib/server/ssrRenderer.ts

@@ -995,11 +995,47 @@ async function renderNode(
       }
 
       // Render as <picture> element if AVIF is available
+      // Split classes: layout/sizing on <picture>, image-specific on <img>
       if (metadata?.avifSrcset) {
-        return `<picture>${classAttr ? `\n` : ''}` +
+        // Image-specific class prefixes that should stay on <img>
+        // objf- (object-fit), objp- (object-position), flt- (filter), tm- (transform), bs- (box-shadow)
+        // Border classes: br- (border-radius), bt- (border-top), bb- (border-bottom),
+        // bl- (border-left), border-r- (border-right), bc- (border-color)
+        // Note: 'b-' is border, but 'b' alone is display:block - need hyphen
+        const imgClassPrefixes = [
+          'objf-', 'objp-', 'flt-', 'tm-', 'bs-',
+          'br-', 'bt-', 'bb-', 'bl-', 'border-r-', 'bc-', 'b-'
+        ];
+        // Opacity classes (o-NUMBER) go on img, but overflow (o-h, o-a, o-s, o-v) stays on picture
+        const opacityPattern = /^o-\d/;
+
+        // Parse classes from classAttr
+        const classMatch = classAttr.match(/class="([^"]*)"/);
+        const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
+
+        // Split classes between picture and img
+        const imgClasses: string[] = [];
+        const pictureClasses: string[] = [];
+
+        for (const cls of allClasses) {
+          if (imgClassPrefixes.some(prefix => cls.startsWith(prefix)) || opacityPattern.test(cls)) {
+            imgClasses.push(cls);
+          } else {
+            pictureClasses.push(cls);
+          }
+        }
+
+        const pictureClassAttr = pictureClasses.length > 0
+          ? ` class="${escapeHtml(pictureClasses.join(' '))}"`
+          : '';
+        const imgClassAttr = imgClasses.length > 0
+          ? ` class="${escapeHtml(imgClasses.join(' '))}"`
+          : '';
+
+        return `<picture${pictureClassAttr}>` +
           `<source type="image/avif" srcset="${escapeHtml(metadata.avifSrcset)}" sizes="${escapeHtml(sizesAttr)}" />` +
           `<source type="image/webp" srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizesAttr)}" />` +
-          `<img${classAttr}${imgAttrs}${blurStyle}${attrs} />` +
+          `<img${imgClassAttr}${imgAttrs}${blurStyle}${attrs} />` +
           `</picture>`;
       }
 
@@ -1024,7 +1060,7 @@ async function renderNode(
 function buildAttributes(props: Record<string, unknown>, exclude: string[] = []): string {
   const attrs: string[] = [];
   // Internal props that should never be rendered as HTML attributes
-  const internalProps = ['type', 'tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
+  const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
   const defaultExclude = [...internalProps, ...exclude];
 
   // Regex to detect unresolved template strings like {{link.target}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"