@marvalt/wparser 0.1.20 → 0.1.22

package/dist/index.esm.js

@@ -1851,7 +1851,7 @@ const Image = ({ block }) => {
         const height = imageAttrs.height;
         imageUrl = getCloudflareVariantUrl(imageUrl, { width, height });
     }
-    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: "w-full h-auto object-cover rounded-lg", loading: "lazy" }));
+    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: "w-full h-auto max-w-full object-contain rounded-lg", loading: "lazy" }));
 };
 const List = ({ block, children }) => {
     const attrs = block.attributes || {};
@@ -1865,12 +1865,17 @@ const ListItem = ({ children }) => {
 const Group = ({ block, children }) => {
     const attrs = block.attributes || {};
     const align = attrs['align'];
+    // Layout can be an object with type property, or nested structure
     const layout = attrs['layout'];
     // Determine if this is a section-level group (has alignment) or content-level
     const isSection = align === 'full' || align === 'wide';
     const containerClass = getContainerClasses(align, layout);
     const spacingClass = isSection ? getSectionSpacingClasses() : getContentSpacingClasses();
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName(containerClass, spacingClass), children: children }));
+    // Ensure container class is always applied for constrained groups
+    const finalContainerClass = layout?.type === 'constrained' && align === 'wide'
+        ? 'container'
+        : containerClass;
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(finalContainerClass, spacingClass), children: children }));
 };
 const Columns = ({ block, children }) => {
     const attrs = block.attributes || {};
@@ -1979,7 +1984,7 @@ const MediaText = ({ block, children, context }) => {
             const finalImageUrl = isCloudflareImageUrl(imageUrl)
                 ? getCloudflareVariantUrl(imageUrl, { width: 1024 })
                 : imageUrl;
-            mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto rounded-lg shadow-lg object-cover", loading: "lazy" }));
+            mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto max-w-full rounded-lg shadow-lg object-contain", loading: "lazy" }));
         }
     }
     // Content is all other children
@@ -1989,17 +1994,23 @@ const MediaText = ({ block, children, context }) => {
     // So we should use 'w-full' to fill the parent container, not apply another max-width
     // Only use 'max-w-7xl' for truly standalone wide blocks (rare case)
     let alignClass;
+    let spacingClass;
     if (align === 'full') {
         alignClass = 'w-full';
+        // Full-width blocks are typically top-level sections, so add section spacing
+        spacingClass = getSectionSpacingClasses();
     }
     else if (align === 'wide') {
-        // Default to w-full for wide blocks (they're usually inside constrained containers)
-        // This ensures they fill the parent container which is already boxed
+        // Wide blocks are usually inside constrained groups (which already have container and spacing)
+        // So just fill the parent container without adding section spacing
         alignClass = 'w-full';
+        spacingClass = ''; // No section spacing - parent group handles it
     }
     else {
         // Default to contained width (not full width)
         alignClass = 'container mx-auto';
+        // Contained blocks might be standalone, so add section spacing
+        spacingClass = getSectionSpacingClasses();
     }
     // Vertical alignment classes
     const verticalAlignClass = verticalAlignment === 'top' ? 'items-start' :
@@ -2009,9 +2020,11 @@ const MediaText = ({ block, children, context }) => {
     const stackClass = 'flex-col md:flex-row';
     // Media position determines order
     const isMediaRight = mediaPosition === 'right';
-    // Add section spacing for consistent vertical rhythm
-    const spacingClass = getSectionSpacingClasses();
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, spacingClass, 'px-4'), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0 md:w-1/2'), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', 'md:w-1/2', getContentSpacingClasses()), children: contentElements.length > 0 ? contentElements : children })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, spacingClass), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0 md:w-1/2', 'overflow-hidden', // Ensure images don't overflow
+                    'max-w-full' // Ensure section doesn't exceed container
+                    ), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', 'w-full md:w-1/2', // Explicit width to ensure proper sizing
+                    'flex-shrink-0', // Prevent content from shrinking
+                    getContentSpacingClasses()), children: contentElements.length > 0 ? contentElements : children })] }) }));
 };
 const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety