@marvalt/wparser 0.1.23 → 0.1.25

package/dist/index.cjs

@@ -1390,7 +1390,7 @@ function renderBlock(block, registry, key, options, page) {
     const children = block.innerBlocks && block.innerBlocks.length
         ? block.innerBlocks.map((child, i) => renderBlock(child, registry, `${key}-${i}`, options, page))
         : undefined;
-    const node = Renderer({ block, children, context: { registry, page } });
+    const node = Renderer({ block, children, context: { registry, page, colorMapper: registry.colorMapper } });
     if (options?.debugWrappers) {
         return (jsxRuntimeExports.jsx("div", { "data-block": block.name, className: "wp-block", children: node }, key));
     }
@@ -1662,98 +1662,6 @@ function extractImageUrlWithFallback(block) {
     return getImageUrl(block);
 }
 
-/**
- * Style mapping utilities
- * Maps WordPress block attributes to Tailwind CSS classes
- */
-/**
- * Map WordPress alignment to Tailwind classes
- */
-function getAlignmentClasses(align) {
-    if (!align)
-        return '';
-    switch (align) {
-        case 'full':
-            return 'w-full';
-        case 'wide':
-            return 'max-w-7xl mx-auto';
-        case 'center':
-            return 'mx-auto';
-        case 'left':
-            return 'mr-auto';
-        case 'right':
-            return 'ml-auto';
-        default:
-            return '';
-    }
-}
-/**
- * Map WordPress text alignment to Tailwind classes
- */
-function getTextAlignClasses(textAlign) {
-    if (!textAlign)
-        return '';
-    switch (textAlign) {
-        case 'center':
-            return 'text-center';
-        case 'left':
-            return 'text-left';
-        case 'right':
-            return 'text-right';
-        default:
-            return '';
-    }
-}
-/**
- * Map WordPress font size to Tailwind classes
- */
-function getFontSizeClasses(fontSize) {
-    if (!fontSize)
-        return '';
-    // Map WordPress font sizes to Tailwind
-    const sizeMap = {
-        'small': 'text-sm',
-        'medium': 'text-base',
-        'large': 'text-lg',
-        'x-large': 'text-xl',
-        'xx-large': 'text-3xl',
-        'xxx-large': 'text-4xl',
-    };
-    return sizeMap[fontSize] || '';
-}
-/**
- * Get container classes based on layout and alignment
- */
-function getContainerClasses(align, layout) {
-    const alignClass = getAlignmentClasses(align);
-    // If layout is constrained, use container
-    if (layout?.type === 'constrained') {
-        return align === 'full' ? 'w-full' : 'container';
-    }
-    return alignClass || 'container';
-}
-/**
- * Get spacing classes for sections
- */
-function getSectionSpacingClasses() {
-    return 'py-16 md:py-24';
-}
-/**
- * Get content spacing classes
- */
-function getContentSpacingClasses() {
-    return 'space-y-6';
-}
-/**
- * Build className string from multiple class sources
- */
-function buildClassName(...classes) {
-    return classes
-        .filter((cls) => Boolean(cls && cls.trim()))
-        .join(' ')
-        .trim();
-}
-
 /**
  * Cloudflare Images URL helpers for wparser package
  * Formats Cloudflare image URLs with variants for optimal performance
@@ -1790,834 +1698,968 @@ const getCloudflareVariantUrl = (url, options) => {
     return `${base}/${variant}`;
 };
 
-const Paragraph = ({ block, context }) => {
-    const content = getBlockTextContent(block);
+/**
+ * Extract background image URL from a block
+ * Checks various possible sources: cloudflareUrl, url, backgroundImage, innerHTML, featured image
+ */
+function extractBackgroundImage(block, page) {
     const attrs = block.attributes || {};
-    const textAlign = getTextAlignClasses(attrs['align']);
-    // Check if content contains shortcodes
-    const hasShortcodes = /\[(\w+)/.test(content);
-    if (hasShortcodes && context.registry.shortcodes) {
-        const parts = renderTextWithShortcodes(content, context.registry);
-        // Check if any part is a block-level element (section, div, etc.)
-        // If so, render without wrapping in <p> to avoid DOM nesting violations
-        const isBlockLevelElement = (element) => {
-            if (!React.isValidElement(element)) {
-                return false;
-            }
-            const type = element.type;
-            // Check for block-level HTML elements
-            if (typeof type === 'string' && ['section', 'div', 'article', 'header', 'footer', 'aside', 'nav'].includes(type)) {
-                return true;
-            }
-            // Check if it's React.Fragment - recursively check its children
-            if (type === React.Fragment) {
-                const fragmentProps = element.props;
-                const children = React.Children.toArray(fragmentProps.children);
-                return children.some((child) => isBlockLevelElement(child));
-            }
-            // Check if it's a React component (likely block-level)
-            // Most custom components render block-level content
-            if (typeof type === 'function' || (typeof type === 'object' && type !== null && type !== React.Fragment)) {
-                return true;
-            }
-            return false;
-        };
-        const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
-        if (hasBlockLevelContent) {
-            // Render block-level content without <p> wrapper
-            return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: parts });
-        }
-        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', textAlign), children: parts });
+    // Check if block uses featured image
+    if (attrs['useFeaturedImage'] === true && page?._embedded?.['wp:featuredmedia']?.[0]?.source_url) {
+        return page._embedded['wp:featuredmedia'][0].source_url;
     }
-    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', textAlign), children: content });
-};
-const Heading = ({ block, children }) => {
+    // Use the improved extraction function that handles incomplete cloudflareUrl
+    // This will check cloudflareUrl first, then innerHTML, then regular attributes
+    return extractImageUrlWithFallback(block);
+}
+/**
+ * Extract image URL from a block
+ * Returns Cloudflare URL if available, otherwise WordPress URL
+ */
+function extractImageUrl(block) {
+    // Use the improved extraction function that handles incomplete cloudflareUrl
+    return extractImageUrlWithFallback(block);
+}
+/**
+ * Extract image attributes (url, alt, width, height)
+ */
+function extractImageAttributes(block) {
+    return getImageAttributes(block);
+}
+/**
+ * Extract title/heading text from a block
+ */
+function extractTitle(block) {
     const attrs = block.attributes || {};
-    const { level = 2 } = attrs;
-    const content = getBlockTextContent(block);
-    const textAlign = getTextAlignClasses(attrs['textAlign']);
-    const fontSize = getFontSizeClasses(attrs['fontSize']);
-    const Tag = `h${Math.min(Math.max(Number(level) || 2, 1), 6)}`;
-    // Default heading sizes if fontSize not specified
-    const sizeClass = fontSize || (level === 1 ? 'text-4xl' : level === 2 ? 'text-3xl' : level === 3 ? 'text-2xl' : 'text-xl');
-    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold text-gray-900', sizeClass, textAlign), children: children ?? content }));
-};
-const Image = ({ block }) => {
-    const imageAttrs = getImageAttributes(block);
-    if (!imageAttrs.url)
-        return null;
-    // Use Cloudflare variant URL if it's a Cloudflare image
-    let imageUrl = imageAttrs.url;
-    if (isCloudflareImageUrl(imageUrl)) {
-        const width = imageAttrs.width || 1024;
-        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 rounded-lg object-cover", style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
-};
-const List = ({ block, children }) => {
+    const title = attrs['title'] || attrs['content'] || getBlockTextContent(block);
+    return typeof title === 'string' ? title.trim() : null;
+}
+/**
+ * Extract content/text from a block
+ * Returns React node for rendering
+ */
+function extractContent(block, context) {
+    const text = getBlockTextContent(block);
+    return text || null;
+}
+/**
+ * Extract media position from media-text block
+ */
+function extractMediaPosition(block) {
     const attrs = block.attributes || {};
-    const { ordered } = attrs;
-    const Tag = ordered ? 'ol' : 'ul';
-    return React.createElement(Tag, { className: 'list-disc pl-6 space-y-2 text-gray-700' }, children);
-};
-const ListItem = ({ children }) => {
-    return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: children });
-};
-const Group = ({ block, children }) => {
+    const position = attrs['mediaPosition'] || 'left';
+    return position === 'right' ? 'right' : 'left';
+}
+/**
+ * Extract vertical alignment from block
+ */
+function extractVerticalAlignment(block) {
     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();
-    // 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 alignment = attrs['verticalAlignment'] || 'center';
+    if (alignment === 'top' || alignment === 'bottom') {
+        return alignment;
+    }
+    return 'center';
+}
+/**
+ * Extract alignment (full, wide, contained) from block
+ */
+function extractAlignment(block) {
     const attrs = block.attributes || {};
     const align = attrs['align'];
-    const alignClass = getAlignmentClasses(align);
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName('grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12', alignClass), children: children }));
-};
-const Column = ({ block, children }) => {
-    const attrs = block.attributes || {};
-    const width = attrs['width'];
-    // Handle column width (e.g., "50%" becomes flex-basis)
-    const style = width ? { flexBasis: width } : undefined;
-    return (jsxRuntimeExports.jsx("div", { className: "space-y-4", style: style, children: children }));
-};
-const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
-const ButtonBlock = ({ block }) => {
+    if (align === 'full' || align === 'wide') {
+        return align;
+    }
+    return 'contained';
+}
+/**
+ * Extract overlay color from cover block
+ */
+function extractOverlayColor(block) {
     const attrs = block.attributes || {};
-    let url = attrs['url'];
-    let text = attrs['text'];
-    attrs['linkDestination'];
-    // Extract from innerHTML if not in attributes (buttons often store data in innerHTML)
-    if (!url && block.innerHTML) {
-        const linkMatch = block.innerHTML.match(/<a[^>]+href=["']([^"']+)["'][^>]*>([^<]+)<\/a>/i);
-        if (linkMatch) {
-            url = linkMatch[1];
-            text = linkMatch[2] || text;
-        }
-    }
-    // Get text from block content if still missing
-    if (!text) {
-        text = getBlockTextContent(block);
+    const overlayColor = attrs['overlayColor'];
+    if (typeof overlayColor === 'string') {
+        return overlayColor;
     }
-    if (!url && !text)
-        return null;
-    const buttonText = text || 'Learn more';
-    // Handle internal vs external links
-    const isExternal = url && (url.startsWith('http://') || url.startsWith('https://'));
-    const linkProps = isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-primary-foreground font-medium hover:bg-primary/90 transition-colors", ...linkProps, children: buttonText }));
-};
-const Cover = ({ block, children }) => {
+    return null;
+}
+/**
+ * Extract dim ratio (overlay opacity) from cover block
+ */
+function extractDimRatio(block) {
     const attrs = block.attributes || {};
-    const { url, id, backgroundImage, cloudflareUrl, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
-    // Get background image URL from various possible sources
-    // Use the improved extraction function that handles incomplete cloudflareUrl
-    let bgImageUrl = null;
-    // First, try cloudflareUrl if it's valid
-    if (cloudflareUrl && isValidCloudflareUrl(cloudflareUrl)) {
-        bgImageUrl = cloudflareUrl;
+    const dimRatio = attrs['dimRatio'];
+    if (typeof dimRatio === 'number') {
+        return dimRatio;
     }
-    // If not valid or not found, try regular attributes
-    if (!bgImageUrl) {
-        bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url) || null;
+    return 0;
+}
+/**
+ * Extract min height from block
+ */
+function extractMinHeight(block) {
+    const attrs = block.attributes || {};
+    const minHeight = attrs['minHeight'];
+    const minHeightUnit = attrs['minHeightUnit'] || 'vh';
+    if (typeof minHeight === 'number') {
+        return { value: minHeight, unit: minHeightUnit };
     }
-    // If still not found, use the fallback extraction (from innerHTML)
-    if (!bgImageUrl) {
-        bgImageUrl = extractImageUrlWithFallback(block);
+    return null;
+}
+/**
+ * Extract heading level from heading block
+ */
+function extractHeadingLevel(block) {
+    const attrs = block.attributes || {};
+    const level = attrs['level'];
+    if (typeof level === 'number' && level >= 1 && level <= 6) {
+        return level;
     }
-    // Convert to Cloudflare URL variant if it's a Cloudflare image
-    if (bgImageUrl) {
-        if (isCloudflareImageUrl(bgImageUrl)) {
-            // Use full width for cover images
-            bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
-        }
+    return 2; // Default to h2
+}
+/**
+ * Extract text alignment from block
+ */
+function extractTextAlign(block) {
+    const attrs = block.attributes || {};
+    const align = attrs['align'] || attrs['textAlign'];
+    if (align === 'left' || align === 'center' || align === 'right') {
+        return align;
     }
-    // Build alignment classes
-    const alignClass = getAlignmentClasses(align);
-    // Build style object
-    const style = {};
-    if (minHeight) {
-        const minHeightValue = typeof minHeight === 'number' ? minHeight : parseFloat(String(minHeight));
-        style.minHeight = minHeightUnit === 'vh' ? `${minHeightValue}vh` : `${minHeightValue}px`;
+    return null;
+}
+/**
+ * Extract font size from block
+ */
+function extractFontSize(block) {
+    const attrs = block.attributes || {};
+    const fontSize = attrs['fontSize'];
+    return typeof fontSize === 'string' ? fontSize : null;
+}
+/**
+ * Convert image URL to Cloudflare variant if it's a Cloudflare URL
+ */
+function convertImageToCloudflareVariant(url, options = {}) {
+    if (!url)
+        return null;
+    if (isCloudflareImageUrl(url)) {
+        const width = options.width || 1024;
+        const height = options.height;
+        return getCloudflareVariantUrl(url, { width, height });
     }
-    if (bgImageUrl) {
-        style.backgroundImage = `url(${bgImageUrl})`;
-        style.backgroundSize = 'cover';
-        style.backgroundPosition = 'center';
-        if (hasParallax) {
-            style.backgroundAttachment = 'fixed';
+    return url;
+}
+/**
+ * Extract title from innerBlocks (finds first heading block)
+ */
+function extractTitleFromInnerBlocks(block) {
+    const innerBlocks = block.innerBlocks || [];
+    // Recursively search for heading blocks
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/heading') {
+            return getBlockTextContent(innerBlock);
         }
+        // Recursively search nested blocks
+        const nestedTitle = extractTitleFromInnerBlocks(innerBlock);
+        if (nestedTitle)
+            return nestedTitle;
     }
-    // Calculate overlay opacity
-    const overlayOpacity = typeof dimRatio === 'number' ? dimRatio / 100 : 0;
-    return (jsxRuntimeExports.jsxs("div", { className: buildClassName('relative w-full', alignClass), style: style, children: [overlayOpacity > 0 && (jsxRuntimeExports.jsx("span", { className: "absolute inset-0 z-0", style: {
-                    backgroundColor: overlayColor === 'contrast' ? '#000000' : (overlayColor || '#000000'),
-                    opacity: overlayOpacity,
-                }, "aria-hidden": "true" })), jsxRuntimeExports.jsx("div", { className: buildClassName('relative z-10', align === 'full' ? 'w-full' : 'container mx-auto px-4'), children: children })] }));
-};
-const MediaText = ({ block, children, context }) => {
-    const attrs = block.attributes || {};
-    const { mediaPosition = 'left', verticalAlignment = 'center', imageFill = false, align, } = attrs;
-    // Access innerBlocks to identify media vs content
+    return null;
+}
+/**
+ * Extract subtitle/description from innerBlocks (finds first paragraph block)
+ */
+function extractSubtitleFromInnerBlocks(block) {
     const innerBlocks = block.innerBlocks || [];
-    // Find media block (image or video)
-    let mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
-    // Render children - media-text typically has media as first child, then content
-    const childrenArray = React.Children.toArray(children);
-    let mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
-        ? childrenArray[mediaBlockIndex]
-        : null;
-    // If no media element from innerBlocks, try to extract image URL
-    if (!mediaElement) {
-        const imageUrl = extractImageUrlWithFallback(block);
-        if (imageUrl) {
-            // Convert to Cloudflare variant if it's a Cloudflare URL
-            // extractImageUrlWithFallback already handles incomplete cloudflareUrl by falling back to innerHTML
-            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", style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
+    // Recursively search for paragraph blocks
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/paragraph') {
+            const text = getBlockTextContent(innerBlock);
+            if (text && text.trim()) {
+                return text;
+            }
         }
+        // Recursively search nested blocks
+        const nestedSubtitle = extractSubtitleFromInnerBlocks(innerBlock);
+        if (nestedSubtitle)
+            return nestedSubtitle;
     }
-    // Content is all other children
-    const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
-    // Build alignment classes - ensure proper container width
-    // For 'wide', media-text blocks are typically inside constrained groups (which use 'container' class)
-    // 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') {
-        // 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
+    return null;
+}
+/**
+ * Extract buttons from innerBlocks (finds buttons block and extracts button data)
+ */
+function extractButtonsFromInnerBlocks(block) {
+    const buttons = [];
+    const innerBlocks = block.innerBlocks || [];
+    // Find buttons block
+    const findButtonsBlock = (blocks) => {
+        for (const innerBlock of blocks) {
+            if (innerBlock.name === 'core/buttons') {
+                return innerBlock;
+            }
+            if (innerBlock.innerBlocks) {
+                const found = findButtonsBlock(innerBlock.innerBlocks);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    const buttonsBlock = findButtonsBlock(innerBlocks);
+    if (!buttonsBlock || !buttonsBlock.innerBlocks) {
+        return buttons;
     }
-    else {
-        // Default to contained width (not full width)
-        alignClass = 'container mx-auto';
-        // Contained blocks might be standalone, so add section spacing
-        spacingClass = getSectionSpacingClasses();
+    // Extract button data from button blocks
+    for (const buttonBlock of buttonsBlock.innerBlocks) {
+        if (buttonBlock.name === 'core/button') {
+            const attrs = buttonBlock.attributes || {};
+            const url = attrs['url'];
+            const text = attrs['text'] || getBlockTextContent(buttonBlock);
+            // Try to extract from innerHTML if not in attributes
+            if (!url && buttonBlock.innerHTML) {
+                const linkMatch = buttonBlock.innerHTML.match(/<a[^>]+href=["']([^"']+)["'][^>]*>([^<]+)<\/a>/i);
+                if (linkMatch) {
+                    const extractedUrl = linkMatch[1];
+                    const extractedText = linkMatch[2] || text;
+                    if (extractedUrl) {
+                        buttons.push({
+                            text: extractedText || 'Learn More',
+                            url: extractedUrl,
+                            isExternal: extractedUrl.startsWith('http://') || extractedUrl.startsWith('https://'),
+                        });
+                    }
+                }
+            }
+            else if (url && text) {
+                buttons.push({
+                    text,
+                    url,
+                    isExternal: url.startsWith('http://') || url.startsWith('https://'),
+                });
+            }
+        }
     }
-    // Vertical alignment classes
-    const verticalAlignClass = verticalAlignment === 'top' ? 'items-start' :
-        verticalAlignment === 'bottom' ? 'items-end' :
-            'items-center';
-    // Stack on mobile
-    const stackClass = 'flex-col md:flex-row';
-    // Media position determines order
-    const isMediaRight = mediaPosition === 'right';
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, spacingClass), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12', 'w-full'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'w-full md:w-1/2', 'min-w-0', // Allow flex item to shrink below content size
-                    'overflow-hidden' // Ensure images don't overflow
-                    ), 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
-                    'min-w-0', // Allow flex item to shrink below content size
-                    getContentSpacingClasses()), children: contentElements.length > 0 ? contentElements : children })] }) }));
-};
-const Fallback = ({ block, children }) => {
-    // Minimal fallback; do not render innerHTML directly in v1 for safety
-    return jsxRuntimeExports.jsx("div", { "data-unknown-block": block.name, children: children });
-};
-function createDefaultRegistry() {
-    const renderers = {
-        'core/paragraph': Paragraph,
-        'core/heading': Heading,
-        'core/image': Image,
-        'core/list': List,
-        'core/list-item': ListItem,
-        'core/group': Group,
-        'core/columns': Columns,
-        'core/column': Column,
-        'core/separator': Separator,
-        'core/button': ButtonBlock,
-        'core/buttons': ({ block, children }) => {
-            const attrs = block.attributes || {};
-            const layout = attrs['layout'];
-            const justifyContent = layout?.justifyContent || 'left';
-            const justifyClass = justifyContent === 'center' ? 'justify-center' :
-                justifyContent === 'right' ? 'justify-end' :
-                    'justify-start';
-            return jsxRuntimeExports.jsx("div", { className: buildClassName('flex flex-wrap gap-3', justifyClass), children: children });
-        },
-        'core/quote': ({ children }) => jsxRuntimeExports.jsx("blockquote", { className: "border-l-4 pl-4 italic", children: children }),
-        'core/code': ({ block }) => (jsxRuntimeExports.jsx("pre", { className: "bg-gray-100 p-3 rounded text-sm overflow-auto", children: jsxRuntimeExports.jsx("code", { children: getString(block) }) })),
-        'core/preformatted': ({ block }) => jsxRuntimeExports.jsx("pre", { children: getString(block) }),
-        'core/table': ({ children }) => jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: jsxRuntimeExports.jsx("table", { className: "table-auto w-full", children: children }) }),
-        'core/table-row': ({ children }) => jsxRuntimeExports.jsx("tr", { children: children }),
-        'core/table-cell': ({ children }) => jsxRuntimeExports.jsx("td", { className: "border px-3 py-2", children: children }),
-        // Cover block - hero sections with background images
-        'core/cover': Cover,
-        // Media & Text block - side-by-side media and content
-        'core/media-text': MediaText,
-        // HTML block - render innerHTML as-is
-        // Note: Shortcodes in HTML blocks are not parsed (they would need to be in text content)
-        'core/html': ({ block }) => {
-            const html = block.innerHTML || '';
-            return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: html } });
-        },
-    };
-    return {
-        renderers,
-        shortcodes: {}, // Empty by default - apps extend this
-        fallback: Fallback,
-    };
-}
-// Legacy function for backward compatibility - use getBlockTextContent instead
-function getString(block) {
-    return getBlockTextContent(block);
+    return buttons;
 }
-
 /**
- * Check if a block matches a pattern
+ * Extract text alignment from inner blocks
+ * Recursively searches for heading or paragraph blocks with textAlign attribute
+ * Also checks group blocks for justifyContent in layout
+ * Priority: heading/paragraph textAlign takes precedence over group justifyContent
  */
-function matchesPattern(block, pattern) {
-    // Check block name
-    if (block.name !== pattern.name) {
-        return false;
-    }
-    // Check attributes if specified
-    if (pattern.attributes) {
-        const blockAttrs = block.attributes || {};
-        for (const [key, value] of Object.entries(pattern.attributes)) {
-            if (blockAttrs[key] !== value) {
-                return false;
+function extractTextAlignFromInnerBlocks(block) {
+    const innerBlocks = block.innerBlocks || [];
+    // First, recursively search for heading or paragraph blocks with textAlign
+    // (These take priority over group justifyContent)
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/heading' || innerBlock.name === 'core/paragraph') {
+            const attrs = innerBlock.attributes || {};
+            const textAlign = attrs['textAlign'];
+            if (textAlign === 'left' || textAlign === 'center' || textAlign === 'right') {
+                return textAlign;
             }
         }
+        // Recursively search nested blocks for headings/paragraphs first
+        const nestedAlign = extractTextAlignFromInnerBlocks(innerBlock);
+        if (nestedAlign)
+            return nestedAlign;
     }
-    // Check innerBlocks patterns if specified
-    if (pattern.innerBlocks && pattern.innerBlocks.length > 0) {
-        const blockInnerBlocks = block.innerBlocks || [];
-        // If pattern specifies innerBlocks, check if block has matching innerBlocks
-        for (const innerPattern of pattern.innerBlocks) {
-            // Find at least one matching innerBlock
-            const hasMatch = blockInnerBlocks.some(innerBlock => matchesPattern(innerBlock, innerPattern));
-            if (!hasMatch) {
-                return false;
-            }
+    // Only check group blocks if no heading/paragraph alignment found
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/group') {
+            const attrs = innerBlock.attributes || {};
+            const layout = attrs['layout'];
+            const justifyContent = layout?.justifyContent;
+            if (justifyContent === 'left')
+                return 'left';
+            if (justifyContent === 'center')
+                return 'center';
+            if (justifyContent === 'right')
+                return 'right';
         }
     }
-    return true;
+    return null;
 }
 /**
- * Find the best matching component mapping for a block
- * Returns the mapping with highest priority that matches, or null
+ * Parse contentPosition string into horizontal and vertical alignment
+ * Format: "horizontal vertical" (e.g., "center center", "left top", "right bottom")
  */
-function findMatchingMapping(block, mappings) {
-    // Sort by priority (higher first), then by order in array
-    const sortedMappings = [...mappings].sort((a, b) => {
-        const priorityA = a.priority ?? 0;
-        const priorityB = b.priority ?? 0;
-        if (priorityA !== priorityB) {
-            return priorityB - priorityA; // Higher priority first
+function parseContentPosition(contentPosition) {
+    if (!contentPosition) {
+        return { horizontal: 'left', vertical: 'center' };
+    }
+    const parts = contentPosition.trim().split(/\s+/);
+    const horizontal = parts[0] || 'left';
+    const vertical = parts[1] || 'center';
+    return {
+        horizontal: (horizontal === 'center' || horizontal === 'right' ? horizontal : 'left'),
+        vertical: (vertical === 'top' || vertical === 'bottom' ? vertical : 'center'),
+    };
+}
+/**
+ * Extract video iframe HTML from innerBlocks (finds HTML block with iframe)
+ */
+function extractVideoIframeFromInnerBlocks(block) {
+    const innerBlocks = block.innerBlocks || [];
+    // Recursively search for HTML blocks with iframe
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/html' && innerBlock.innerHTML) {
+            // Check if innerHTML contains an iframe
+            if (innerBlock.innerHTML.includes('<iframe')) {
+                return innerBlock.innerHTML;
+            }
         }
-        return 0; // Keep original order for same priority
-    });
-    // Find first matching mapping
-    for (const mapping of sortedMappings) {
-        if (matchesPattern(block, mapping.pattern)) {
-            return mapping;
+        // Recursively search nested blocks
+        if (innerBlock.innerBlocks) {
+            const nestedVideo = extractVideoIframeFromInnerBlocks(innerBlock);
+            if (nestedVideo)
+                return nestedVideo;
         }
     }
     return null;
 }
-
 /**
- * Create an enhanced registry that supports pattern-based component mapping
+ * Extract and map background color from block attributes
+ * Uses colorMapper from context to convert WordPress theme colors to app CSS classes
  *
- * This combines the default registry (for fallback) with app-specific component mappings.
- * When a block matches a pattern, it uses the mapped component. Otherwise, it falls back
- * to the default renderer.
+ * WordPress controls which color is applied (via backgroundColor attribute),
+ * app controls what it means (via colorMapper function)
  *
- * @param mappings - Array of component mappings with patterns
- * @param baseRegistry - Optional base registry (defaults to createDefaultRegistry())
- * @returns Enhanced registry with pattern matching capabilities
+ * @param block - WordPress block to extract background color from
+ * @param context - Render context containing optional colorMapper
+ * @returns CSS class string (e.g., 'bg-gray-100') or null if no mapping
  *
  * @example
  * ```ts
- * const mappings: ComponentMapping[] = [
- *   {
- *     pattern: { name: 'core/cover' },
- *     component: HomeHeroSection,
- *     extractProps: (block) => ({
- *       backgroundImage: extractBackgroundImage(block),
- *       title: extractTitle(block),
- *     }),
- *     wrapper: SectionWrapper,
- *   },
- * ];
- *
- * const registry = createEnhancedRegistry(mappings);
+ * // In WordPress, group block has: backgroundColor: "accent-5"
+ * // In app, colorMapper maps: "accent-5" → "bg-gray-100"
+ * // Result: extractBackgroundColor returns "bg-gray-100"
  * ```
  */
-function createEnhancedRegistry(mappings = [], baseRegistry) {
-    const base = baseRegistry || createDefaultRegistry();
-    // Create enhanced renderers that check patterns first
-    const enhancedRenderers = {
-        ...base.renderers,
-    };
-    // Override renderers for blocks that have mappings
-    // We need to check patterns at render time, so we create a wrapper renderer
-    const createPatternRenderer = (blockName) => {
-        return (props) => {
-            const { block, context } = props;
-            // Find matching mapping
-            const mapping = findMatchingMapping(block, mappings);
-            if (mapping) {
-                // Extract props from block
-                const componentProps = mapping.extractProps(block, context);
-                // Render component
-                const Component = mapping.component;
-                const content = jsxRuntimeExports.jsx(Component, { ...componentProps });
-                // Wrap with wrapper if provided
-                if (mapping.wrapper) {
-                    const Wrapper = mapping.wrapper;
-                    return jsxRuntimeExports.jsx(Wrapper, { block: block, children: content });
-                }
-                return content;
-            }
-            // Fall back to default renderer
-            const defaultRenderer = base.renderers[blockName] || base.fallback;
-            return defaultRenderer(props);
-        };
-    };
-    // For each mapping, override the renderer for that block name
-    for (const mapping of mappings) {
-        const blockName = mapping.pattern.name;
-        if (blockName) {
-            enhancedRenderers[blockName] = createPatternRenderer(blockName);
-        }
-    }
-    // Create matchBlock function
-    const matchBlock = (block) => {
-        return findMatchingMapping(block, mappings);
-    };
-    return {
-        ...base,
-        renderers: enhancedRenderers,
-        mappings,
-        matchBlock,
-    };
-}
-
-const WPContent = ({ blocks, registry, className, page }) => {
-    if (!Array.isArray(blocks)) {
-        if (process.env.NODE_ENV !== 'production') {
-            // eslint-disable-next-line no-console
-            console.warn('WPContent: invalid blocks prop');
-        }
+function extractBackgroundColor(block, context) {
+    const attrs = block.attributes || {};
+    const wpColorName = attrs['backgroundColor'] || attrs['background'];
+    if (!wpColorName || typeof wpColorName !== 'string') {
         return null;
     }
-    if (!registry || !registry.renderers) {
-        throw new Error('WPContent: registry is required');
+    // Use colorMapper from context if available
+    if (context.colorMapper) {
+        return context.colorMapper(wpColorName);
     }
-    const ast = parseGutenbergBlocks(blocks);
-    return (jsxRuntimeExports.jsx("div", { className: className, children: renderNodes(ast, registry, undefined, page) }));
-};
+    // Fallback: return null (no background applied)
+    return null;
+}
 
 /**
- * Hero logic:
- * - If the content contains a [HEROSECTION] shortcode (case-insensitive), do NOT auto-hero.
- * - Else, if the page has featured media, render a hero section using the image as background.
+ * Style mapping utilities
+ * Maps WordPress block attributes to Tailwind CSS classes
  */
-const WPPage = ({ page, registry, className }) => {
-    if (!page || !Array.isArray(page.blocks)) {
-        if (process.env.NODE_ENV !== 'production') {
-            // eslint-disable-next-line no-console
-            console.warn('WPPage: invalid page prop');
-        }
-        return null;
-    }
-    if (!registry || !registry.renderers) {
-        throw new Error('WPPage: registry is required');
-    }
-    const hasHeroShortcode = React.useMemo(() => detectHeroShortcode(page.blocks), [page.blocks]);
-    const featured = getFeaturedImage(page);
-    return (jsxRuntimeExports.jsxs("article", { className: className, children: [!hasHeroShortcode && featured && (jsxRuntimeExports.jsx(HeroFromFeatured, { featured: featured, title: page.title?.rendered })), jsxRuntimeExports.jsx(WPContent, { blocks: page.blocks, registry: registry, page: page })] }));
-};
-function detectHeroShortcode(blocks) {
-    for (const block of blocks) {
-        const html = (block.innerHTML || '').toLowerCase();
-        if (html.includes('[herosection]'))
-            return true;
-        // Check if this is a cover block (which is a hero section)
-        if (block.name === 'core/cover')
-            return true;
-        if (block.innerBlocks?.length && detectHeroShortcode(block.innerBlocks))
-            return true;
-    }
-    return false;
-}
-function getFeaturedImage(page) {
-    const fm = page._embedded?.['wp:featuredmedia'];
-    if (Array.isArray(fm) && fm.length > 0)
-        return fm[0];
-    return null;
-}
-const HeroFromFeatured = ({ featured, title }) => {
-    const url = featured.source_url;
-    if (!url)
-        return null;
-    return (jsxRuntimeExports.jsx("section", { className: "w-full h-[40vh] min-h-[280px] flex items-end bg-cover bg-center", style: { backgroundImage: `url(${url})` }, "aria-label": featured.alt_text || title || 'Hero', children: jsxRuntimeExports.jsx("div", { className: "container mx-auto px-4 py-8 bg-gradient-to-t from-black/50 to-transparent w-full", children: title && jsxRuntimeExports.jsx("h1", { className: "text-white text-4xl font-bold drop-shadow", children: title }) }) }));
-};
-
-class WPErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError() {
-        return { hasError: true };
-    }
-    componentDidCatch(error) {
-        if (process.env.NODE_ENV !== 'production') {
-            // eslint-disable-next-line no-console
-            console.error('WPErrorBoundary caught error:', error);
-        }
-    }
-    render() {
-        if (this.state.hasError) {
-            return this.props.fallback ?? null;
-        }
-        return this.props.children;
-    }
-}
-
 /**
- * Extract background image URL from a block
- * Checks various possible sources: cloudflareUrl, url, backgroundImage, innerHTML, featured image
+ * Map WordPress alignment to Tailwind classes
  */
-function extractBackgroundImage(block, page) {
-    const attrs = block.attributes || {};
-    // Check if block uses featured image
-    if (attrs['useFeaturedImage'] === true && page?._embedded?.['wp:featuredmedia']?.[0]?.source_url) {
-        return page._embedded['wp:featuredmedia'][0].source_url;
+function getAlignmentClasses(align) {
+    if (!align)
+        return '';
+    switch (align) {
+        case 'full':
+            return 'w-full';
+        case 'wide':
+            return 'max-w-7xl mx-auto';
+        case 'center':
+            return 'mx-auto';
+        case 'left':
+            return 'mr-auto';
+        case 'right':
+            return 'ml-auto';
+        default:
+            return '';
     }
-    // Use the improved extraction function that handles incomplete cloudflareUrl
-    // This will check cloudflareUrl first, then innerHTML, then regular attributes
-    return extractImageUrlWithFallback(block);
-}
-/**
- * Extract image URL from a block
- * Returns Cloudflare URL if available, otherwise WordPress URL
- */
-function extractImageUrl(block) {
-    // Use the improved extraction function that handles incomplete cloudflareUrl
-    return extractImageUrlWithFallback(block);
 }
 /**
- * Extract image attributes (url, alt, width, height)
+ * Map WordPress text alignment to Tailwind classes
  */
-function extractImageAttributes(block) {
-    return getImageAttributes(block);
+function getTextAlignClasses(textAlign) {
+    if (!textAlign)
+        return '';
+    switch (textAlign) {
+        case 'center':
+            return 'text-center';
+        case 'left':
+            return 'text-left';
+        case 'right':
+            return 'text-right';
+        default:
+            return '';
+    }
 }
 /**
- * Extract title/heading text from a block
+ * Map WordPress font size to Tailwind classes
  */
-function extractTitle(block) {
-    const attrs = block.attributes || {};
-    const title = attrs['title'] || attrs['content'] || getBlockTextContent(block);
-    return typeof title === 'string' ? title.trim() : null;
+function getFontSizeClasses(fontSize) {
+    if (!fontSize)
+        return '';
+    // Map WordPress font sizes to Tailwind
+    const sizeMap = {
+        'small': 'text-sm',
+        'medium': 'text-base',
+        'large': 'text-lg',
+        'x-large': 'text-xl',
+        'xx-large': 'text-3xl',
+        'xxx-large': 'text-4xl',
+    };
+    return sizeMap[fontSize] || '';
 }
 /**
- * Extract content/text from a block
- * Returns React node for rendering
+ * Get container classes based on layout and alignment
  */
-function extractContent(block, context) {
-    const text = getBlockTextContent(block);
-    return text || null;
+function getContainerClasses(align, layout) {
+    const alignClass = getAlignmentClasses(align);
+    // If layout is constrained, use container
+    if (layout?.type === 'constrained') {
+        return align === 'full' ? 'w-full' : 'container';
+    }
+    return alignClass || 'container';
 }
 /**
- * Extract media position from media-text block
+ * Get spacing classes for sections
  */
-function extractMediaPosition(block) {
-    const attrs = block.attributes || {};
-    const position = attrs['mediaPosition'] || 'left';
-    return position === 'right' ? 'right' : 'left';
+function getSectionSpacingClasses() {
+    return 'py-16 md:py-24';
 }
 /**
- * Extract vertical alignment from block
+ * Get content spacing classes
  */
-function extractVerticalAlignment(block) {
-    const attrs = block.attributes || {};
-    const alignment = attrs['verticalAlignment'] || 'center';
-    if (alignment === 'top' || alignment === 'bottom') {
-        return alignment;
-    }
-    return 'center';
+function getContentSpacingClasses() {
+    return 'space-y-6';
 }
 /**
- * Extract alignment (full, wide, contained) from block
+ * Build className string from multiple class sources
  */
-function extractAlignment(block) {
-    const attrs = block.attributes || {};
-    const align = attrs['align'];
-    if (align === 'full' || align === 'wide') {
-        return align;
-    }
-    return 'contained';
+function buildClassName(...classes) {
+    return classes
+        .filter((cls) => Boolean(cls && cls.trim()))
+        .join(' ')
+        .trim();
 }
-/**
- * Extract overlay color from cover block
- */
-function extractOverlayColor(block) {
+
+const Paragraph = ({ block, context }) => {
+    const content = getBlockTextContent(block);
     const attrs = block.attributes || {};
-    const overlayColor = attrs['overlayColor'];
-    if (typeof overlayColor === 'string') {
-        return overlayColor;
+    const textAlign = getTextAlignClasses(attrs['align']);
+    // Check if content contains shortcodes
+    const hasShortcodes = /\[(\w+)/.test(content);
+    if (hasShortcodes && context.registry.shortcodes) {
+        const parts = renderTextWithShortcodes(content, context.registry);
+        // Check if any part is a block-level element (section, div, etc.)
+        // If so, render without wrapping in <p> to avoid DOM nesting violations
+        const isBlockLevelElement = (element) => {
+            if (!React.isValidElement(element)) {
+                return false;
+            }
+            const type = element.type;
+            // Check for block-level HTML elements
+            if (typeof type === 'string' && ['section', 'div', 'article', 'header', 'footer', 'aside', 'nav'].includes(type)) {
+                return true;
+            }
+            // Check if it's React.Fragment - recursively check its children
+            if (type === React.Fragment) {
+                const fragmentProps = element.props;
+                const children = React.Children.toArray(fragmentProps.children);
+                return children.some((child) => isBlockLevelElement(child));
+            }
+            // Check if it's a React component (likely block-level)
+            // Most custom components render block-level content
+            if (typeof type === 'function' || (typeof type === 'object' && type !== null && type !== React.Fragment)) {
+                return true;
+            }
+            return false;
+        };
+        const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
+        if (hasBlockLevelContent) {
+            // Render block-level content without <p> wrapper
+            return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: parts });
+        }
+        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700 my-4', textAlign), children: parts });
     }
-    return null;
-}
-/**
- * Extract dim ratio (overlay opacity) from cover block
- */
-function extractDimRatio(block) {
+    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700 my-4', textAlign), children: content });
+};
+const Heading = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const dimRatio = attrs['dimRatio'];
-    if (typeof dimRatio === 'number') {
-        return dimRatio;
+    const { level = 2 } = attrs;
+    const content = getBlockTextContent(block);
+    const textAlign = getTextAlignClasses(attrs['textAlign']);
+    const fontSize = getFontSizeClasses(attrs['fontSize']);
+    const Tag = `h${Math.min(Math.max(Number(level) || 2, 1), 6)}`;
+    // Default heading sizes if fontSize not specified
+    const sizeClass = fontSize || (level === 1 ? 'text-4xl' : level === 2 ? 'text-3xl' : level === 3 ? 'text-2xl' : 'text-xl');
+    // Add spacing: mt for top (except first heading), mb for bottom
+    // Use larger bottom margin for headings to create visual separation
+    const spacingClass = level === 1 ? 'mt-8 mb-6' : level === 2 ? 'mt-6 mb-4' : 'mt-4 mb-3';
+    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold text-gray-900', sizeClass, textAlign, spacingClass), children: children ?? content }));
+};
+const Image = ({ block }) => {
+    const imageAttrs = getImageAttributes(block);
+    if (!imageAttrs.url)
+        return null;
+    // Use Cloudflare variant URL if it's a Cloudflare image
+    let imageUrl = imageAttrs.url;
+    if (isCloudflareImageUrl(imageUrl)) {
+        const width = imageAttrs.width || 1024;
+        const height = imageAttrs.height;
+        imageUrl = getCloudflareVariantUrl(imageUrl, { width, height });
     }
-    return 0;
-}
-/**
- * Extract min height from block
- */
-function extractMinHeight(block) {
+    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: "w-full h-auto rounded-lg object-cover my-4", style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
+};
+const List = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const minHeight = attrs['minHeight'];
-    const minHeightUnit = attrs['minHeightUnit'] || 'vh';
-    if (typeof minHeight === 'number') {
-        return { value: minHeight, unit: minHeightUnit };
-    }
-    return null;
-}
-/**
- * Extract heading level from heading block
- */
-function extractHeadingLevel(block) {
+    const { ordered } = attrs;
+    const Tag = ordered ? 'ol' : 'ul';
+    return React.createElement(Tag, { className: 'list-disc pl-6 space-y-2 text-gray-700 my-4' }, children);
+};
+const ListItem = ({ children }) => {
+    return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: children });
+};
+const Group = ({ block, children, context }) => {
     const attrs = block.attributes || {};
-    const level = attrs['level'];
-    if (typeof level === 'number' && level >= 1 && level <= 6) {
-        return level;
-    }
-    return 2; // Default to h2
-}
-/**
- * Extract text alignment from block
- */
-function extractTextAlign(block) {
+    const align = attrs['align'];
+    // Layout can be an object with type property, or nested structure
+    const layout = attrs['layout'];
+    // Extract background color using color mapper
+    const backgroundColor = extractBackgroundColor(block, context);
+    // 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();
+    // Ensure container class is always applied for constrained groups
+    const finalContainerClass = layout?.type === 'constrained' && align === 'wide'
+        ? 'container'
+        : containerClass;
+    // Build className with background color if present
+    const className = buildClassName(finalContainerClass, spacingClass, backgroundColor // This will be null if no mapping, which is fine
+    );
+    return (jsxRuntimeExports.jsx("div", { className: className, children: children }));
+};
+const Columns = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const align = attrs['align'] || attrs['textAlign'];
-    if (align === 'left' || align === 'center' || align === 'right') {
-        return align;
-    }
-    return null;
-}
-/**
- * Extract font size from block
- */
-function extractFontSize(block) {
+    const align = attrs['align'];
+    const alignClass = getAlignmentClasses(align);
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName('grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12', alignClass), children: children }));
+};
+const Column = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const fontSize = attrs['fontSize'];
-    return typeof fontSize === 'string' ? fontSize : null;
-}
-/**
- * Convert image URL to Cloudflare variant if it's a Cloudflare URL
- */
-function convertImageToCloudflareVariant(url, options = {}) {
-    if (!url)
+    const width = attrs['width'];
+    // Handle column width (e.g., "50%" becomes flex-basis)
+    const style = width ? { flexBasis: width } : undefined;
+    return (jsxRuntimeExports.jsx("div", { className: "space-y-4", style: style, children: children }));
+};
+const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
+const ButtonBlock = ({ block }) => {
+    const attrs = block.attributes || {};
+    let url = attrs['url'];
+    let text = attrs['text'];
+    attrs['linkDestination'];
+    // Extract from innerHTML if not in attributes (buttons often store data in innerHTML)
+    if (!url && block.innerHTML) {
+        const linkMatch = block.innerHTML.match(/<a[^>]+href=["']([^"']+)["'][^>]*>([^<]+)<\/a>/i);
+        if (linkMatch) {
+            url = linkMatch[1];
+            text = linkMatch[2] || text;
+        }
+    }
+    // Get text from block content if still missing
+    if (!text) {
+        text = getBlockTextContent(block);
+    }
+    if (!url && !text)
         return null;
-    if (isCloudflareImageUrl(url)) {
-        const width = options.width || 1024;
-        const height = options.height;
-        return getCloudflareVariantUrl(url, { width, height });
+    const buttonText = text || 'Learn more';
+    // Handle internal vs external links
+    const isExternal = url && (url.startsWith('http://') || url.startsWith('https://'));
+    const linkProps = isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-primary-foreground font-medium hover:bg-primary/90 transition-colors", ...linkProps, children: buttonText }));
+};
+const Cover = ({ block, children }) => {
+    const attrs = block.attributes || {};
+    const { url, id, backgroundImage, cloudflareUrl, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
+    // Get background image URL from various possible sources
+    // Use the improved extraction function that handles incomplete cloudflareUrl
+    let bgImageUrl = null;
+    // First, try cloudflareUrl if it's valid
+    if (cloudflareUrl && isValidCloudflareUrl(cloudflareUrl)) {
+        bgImageUrl = cloudflareUrl;
     }
-    return url;
-}
-/**
- * Extract title from innerBlocks (finds first heading block)
- */
-function extractTitleFromInnerBlocks(block) {
-    const innerBlocks = block.innerBlocks || [];
-    // Recursively search for heading blocks
-    for (const innerBlock of innerBlocks) {
-        if (innerBlock.name === 'core/heading') {
-            return getBlockTextContent(innerBlock);
+    // If not valid or not found, try regular attributes
+    if (!bgImageUrl) {
+        bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url) || null;
+    }
+    // If still not found, use the fallback extraction (from innerHTML)
+    if (!bgImageUrl) {
+        bgImageUrl = extractImageUrlWithFallback(block);
+    }
+    // Convert to Cloudflare URL variant if it's a Cloudflare image
+    if (bgImageUrl) {
+        if (isCloudflareImageUrl(bgImageUrl)) {
+            // Use full width for cover images
+            bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
         }
-        // Recursively search nested blocks
-        const nestedTitle = extractTitleFromInnerBlocks(innerBlock);
-        if (nestedTitle)
-            return nestedTitle;
     }
-    return null;
-}
-/**
- * Extract subtitle/description from innerBlocks (finds first paragraph block)
- */
-function extractSubtitleFromInnerBlocks(block) {
-    const innerBlocks = block.innerBlocks || [];
-    // Recursively search for paragraph blocks
-    for (const innerBlock of innerBlocks) {
-        if (innerBlock.name === 'core/paragraph') {
-            const text = getBlockTextContent(innerBlock);
-            if (text && text.trim()) {
-                return text;
-            }
+    // Build alignment classes
+    const alignClass = getAlignmentClasses(align);
+    // Build style object
+    const style = {};
+    if (minHeight) {
+        const minHeightValue = typeof minHeight === 'number' ? minHeight : parseFloat(String(minHeight));
+        style.minHeight = minHeightUnit === 'vh' ? `${minHeightValue}vh` : `${minHeightValue}px`;
+    }
+    if (bgImageUrl) {
+        style.backgroundImage = `url(${bgImageUrl})`;
+        style.backgroundSize = 'cover';
+        style.backgroundPosition = 'center';
+        if (hasParallax) {
+            style.backgroundAttachment = 'fixed';
         }
-        // Recursively search nested blocks
-        const nestedSubtitle = extractSubtitleFromInnerBlocks(innerBlock);
-        if (nestedSubtitle)
-            return nestedSubtitle;
     }
-    return null;
-}
-/**
- * Extract buttons from innerBlocks (finds buttons block and extracts button data)
- */
-function extractButtonsFromInnerBlocks(block) {
-    const buttons = [];
+    // Calculate overlay opacity
+    const overlayOpacity = typeof dimRatio === 'number' ? dimRatio / 100 : 0;
+    return (jsxRuntimeExports.jsxs("div", { className: buildClassName('relative w-full', alignClass), style: style, children: [overlayOpacity > 0 && (jsxRuntimeExports.jsx("span", { className: "absolute inset-0 z-0", style: {
+                    backgroundColor: overlayColor === 'contrast' ? '#000000' : (overlayColor || '#000000'),
+                    opacity: overlayOpacity,
+                }, "aria-hidden": "true" })), jsxRuntimeExports.jsx("div", { className: buildClassName('relative z-10', align === 'full' ? 'w-full' : 'container mx-auto px-4'), children: children })] }));
+};
+const MediaText = ({ block, children, context }) => {
+    const attrs = block.attributes || {};
+    const { mediaPosition = 'left', verticalAlignment = 'center', imageFill = false, align, } = attrs;
+    // Access innerBlocks to identify media vs content
     const innerBlocks = block.innerBlocks || [];
-    // Find buttons block
-    const findButtonsBlock = (blocks) => {
-        for (const innerBlock of blocks) {
-            if (innerBlock.name === 'core/buttons') {
-                return innerBlock;
-            }
-            if (innerBlock.innerBlocks) {
-                const found = findButtonsBlock(innerBlock.innerBlocks);
-                if (found)
-                    return found;
-            }
+    // Find media block (image or video)
+    let mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
+    // Render children - media-text typically has media as first child, then content
+    const childrenArray = React.Children.toArray(children);
+    let mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
+        ? childrenArray[mediaBlockIndex]
+        : null;
+    // If no media element from innerBlocks, try to extract image URL
+    if (!mediaElement) {
+        const imageUrl = extractImageUrlWithFallback(block);
+        if (imageUrl) {
+            // Convert to Cloudflare variant if it's a Cloudflare URL
+            // extractImageUrlWithFallback already handles incomplete cloudflareUrl by falling back to innerHTML
+            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", style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
         }
-        return null;
-    };
-    const buttonsBlock = findButtonsBlock(innerBlocks);
-    if (!buttonsBlock || !buttonsBlock.innerBlocks) {
-        return buttons;
     }
-    // Extract button data from button blocks
-    for (const buttonBlock of buttonsBlock.innerBlocks) {
-        if (buttonBlock.name === 'core/button') {
-            const attrs = buttonBlock.attributes || {};
-            const url = attrs['url'];
-            const text = attrs['text'] || getBlockTextContent(buttonBlock);
-            // Try to extract from innerHTML if not in attributes
-            if (!url && buttonBlock.innerHTML) {
-                const linkMatch = buttonBlock.innerHTML.match(/<a[^>]+href=["']([^"']+)["'][^>]*>([^<]+)<\/a>/i);
-                if (linkMatch) {
-                    const extractedUrl = linkMatch[1];
-                    const extractedText = linkMatch[2] || text;
-                    if (extractedUrl) {
-                        buttons.push({
-                            text: extractedText || 'Learn More',
-                            url: extractedUrl,
-                            isExternal: extractedUrl.startsWith('http://') || extractedUrl.startsWith('https://'),
-                        });
-                    }
-                }
+    // Content is all other children
+    const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
+    // Build alignment classes - ensure proper container width
+    // For 'wide', media-text blocks are typically inside constrained groups (which use 'container' class)
+    // 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') {
+        // 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' :
+        verticalAlignment === 'bottom' ? 'items-end' :
+            'items-center';
+    // Stack on mobile
+    const stackClass = 'flex-col md:flex-row';
+    // Media position determines order
+    const isMediaRight = mediaPosition === 'right';
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, spacingClass), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12', 'w-full'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'w-full md:w-1/2', 'min-w-0', // Allow flex item to shrink below content size
+                    'overflow-hidden' // Ensure images don't overflow
+                    ), 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
+                    'min-w-0', // Allow flex item to shrink below content size
+                    getContentSpacingClasses()), children: contentElements.length > 0 ? contentElements : children })] }) }));
+};
+const Fallback = ({ block, children }) => {
+    // Minimal fallback; do not render innerHTML directly in v1 for safety
+    return jsxRuntimeExports.jsx("div", { "data-unknown-block": block.name, children: children });
+};
+function createDefaultRegistry(colorMapper) {
+    const renderers = {
+        'core/paragraph': Paragraph,
+        'core/heading': Heading,
+        'core/image': Image,
+        'core/list': List,
+        'core/list-item': ListItem,
+        'core/group': Group,
+        'core/columns': Columns,
+        'core/column': Column,
+        'core/separator': Separator,
+        'core/button': ButtonBlock,
+        'core/buttons': ({ block, children }) => {
+            const attrs = block.attributes || {};
+            const layout = attrs['layout'];
+            const justifyContent = layout?.justifyContent || 'left';
+            const justifyClass = justifyContent === 'center' ? 'justify-center' :
+                justifyContent === 'right' ? 'justify-end' :
+                    'justify-start';
+            return jsxRuntimeExports.jsx("div", { className: buildClassName('flex flex-wrap gap-3', justifyClass), children: children });
+        },
+        'core/quote': ({ children }) => jsxRuntimeExports.jsx("blockquote", { className: "border-l-4 pl-4 italic", children: children }),
+        'core/code': ({ block }) => (jsxRuntimeExports.jsx("pre", { className: "bg-gray-100 p-3 rounded text-sm overflow-auto", children: jsxRuntimeExports.jsx("code", { children: getString(block) }) })),
+        'core/preformatted': ({ block }) => jsxRuntimeExports.jsx("pre", { children: getString(block) }),
+        'core/table': ({ children }) => jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: jsxRuntimeExports.jsx("table", { className: "table-auto w-full", children: children }) }),
+        'core/table-row': ({ children }) => jsxRuntimeExports.jsx("tr", { children: children }),
+        'core/table-cell': ({ children }) => jsxRuntimeExports.jsx("td", { className: "border px-3 py-2", children: children }),
+        // Cover block - hero sections with background images
+        'core/cover': Cover,
+        // Media & Text block - side-by-side media and content
+        'core/media-text': MediaText,
+        // HTML block - render innerHTML as-is
+        // Note: Shortcodes in HTML blocks are not parsed (they would need to be in text content)
+        'core/html': ({ block }) => {
+            const html = block.innerHTML || '';
+            return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+        },
+    };
+    return {
+        renderers,
+        shortcodes: {}, // Empty by default - apps extend this
+        fallback: Fallback,
+        colorMapper,
+    };
+}
+// Legacy function for backward compatibility - use getBlockTextContent instead
+function getString(block) {
+    return getBlockTextContent(block);
+}
+
+/**
+ * Check if a block matches a pattern
+ */
+function matchesPattern(block, pattern) {
+    // Check block name
+    if (block.name !== pattern.name) {
+        return false;
+    }
+    // Check attributes if specified
+    if (pattern.attributes) {
+        const blockAttrs = block.attributes || {};
+        for (const [key, value] of Object.entries(pattern.attributes)) {
+            if (blockAttrs[key] !== value) {
+                return false;
             }
-            else if (url && text) {
-                buttons.push({
-                    text,
-                    url,
-                    isExternal: url.startsWith('http://') || url.startsWith('https://'),
-                });
+        }
+    }
+    // Check innerBlocks patterns if specified
+    if (pattern.innerBlocks && pattern.innerBlocks.length > 0) {
+        const blockInnerBlocks = block.innerBlocks || [];
+        // If pattern specifies innerBlocks, check if block has matching innerBlocks
+        for (const innerPattern of pattern.innerBlocks) {
+            // Find at least one matching innerBlock
+            const hasMatch = blockInnerBlocks.some(innerBlock => matchesPattern(innerBlock, innerPattern));
+            if (!hasMatch) {
+                return false;
             }
         }
     }
-    return buttons;
+    return true;
 }
 /**
- * Extract text alignment from inner blocks
- * Recursively searches for heading or paragraph blocks with textAlign attribute
- * Also checks group blocks for justifyContent in layout
- * Priority: heading/paragraph textAlign takes precedence over group justifyContent
+ * Find the best matching component mapping for a block
+ * Returns the mapping with highest priority that matches, or null
  */
-function extractTextAlignFromInnerBlocks(block) {
-    const innerBlocks = block.innerBlocks || [];
-    // First, recursively search for heading or paragraph blocks with textAlign
-    // (These take priority over group justifyContent)
-    for (const innerBlock of innerBlocks) {
-        if (innerBlock.name === 'core/heading' || innerBlock.name === 'core/paragraph') {
-            const attrs = innerBlock.attributes || {};
-            const textAlign = attrs['textAlign'];
-            if (textAlign === 'left' || textAlign === 'center' || textAlign === 'right') {
-                return textAlign;
-            }
+function findMatchingMapping(block, mappings) {
+    // Sort by priority (higher first), then by order in array
+    const sortedMappings = [...mappings].sort((a, b) => {
+        const priorityA = a.priority ?? 0;
+        const priorityB = b.priority ?? 0;
+        if (priorityA !== priorityB) {
+            return priorityB - priorityA; // Higher priority first
         }
-        // Recursively search nested blocks for headings/paragraphs first
-        const nestedAlign = extractTextAlignFromInnerBlocks(innerBlock);
-        if (nestedAlign)
-            return nestedAlign;
-    }
-    // Only check group blocks if no heading/paragraph alignment found
-    for (const innerBlock of innerBlocks) {
-        if (innerBlock.name === 'core/group') {
-            const attrs = innerBlock.attributes || {};
-            const layout = attrs['layout'];
-            const justifyContent = layout?.justifyContent;
-            if (justifyContent === 'left')
-                return 'left';
-            if (justifyContent === 'center')
-                return 'center';
-            if (justifyContent === 'right')
-                return 'right';
+        return 0; // Keep original order for same priority
+    });
+    // Find first matching mapping
+    for (const mapping of sortedMappings) {
+        if (matchesPattern(block, mapping.pattern)) {
+            return mapping;
         }
     }
     return null;
 }
+
 /**
- * Parse contentPosition string into horizontal and vertical alignment
- * Format: "horizontal vertical" (e.g., "center center", "left top", "right bottom")
+ * Create an enhanced registry that supports pattern-based component mapping
+ *
+ * This combines the default registry (for fallback) with app-specific component mappings.
+ * When a block matches a pattern, it uses the mapped component. Otherwise, it falls back
+ * to the default renderer.
+ *
+ * @param mappings - Array of component mappings with patterns
+ * @param baseRegistry - Optional base registry (defaults to createDefaultRegistry())
+ * @returns Enhanced registry with pattern matching capabilities
+ *
+ * @example
+ * ```ts
+ * const mappings: ComponentMapping[] = [
+ *   {
+ *     pattern: { name: 'core/cover' },
+ *     component: HomeHeroSection,
+ *     extractProps: (block) => ({
+ *       backgroundImage: extractBackgroundImage(block),
+ *       title: extractTitle(block),
+ *     }),
+ *     wrapper: SectionWrapper,
+ *   },
+ * ];
+ *
+ * const registry = createEnhancedRegistry(mappings);
+ * ```
  */
-function parseContentPosition(contentPosition) {
-    if (!contentPosition) {
-        return { horizontal: 'left', vertical: 'center' };
+function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper) {
+    const base = baseRegistry || createDefaultRegistry(colorMapper);
+    // Create enhanced renderers that check patterns first
+    const enhancedRenderers = {
+        ...base.renderers,
+    };
+    // Override renderers for blocks that have mappings
+    // We need to check patterns at render time, so we create a wrapper renderer
+    const createPatternRenderer = (blockName) => {
+        return (props) => {
+            const { block, context } = props;
+            // Find matching mapping
+            const mapping = findMatchingMapping(block, mappings);
+            if (mapping) {
+                // Extract props from block
+                const componentProps = mapping.extractProps(block, context);
+                // Render component
+                const Component = mapping.component;
+                const content = jsxRuntimeExports.jsx(Component, { ...componentProps });
+                // Wrap with wrapper if provided
+                if (mapping.wrapper) {
+                    const Wrapper = mapping.wrapper;
+                    return jsxRuntimeExports.jsx(Wrapper, { block: block, children: content });
+                }
+                return content;
+            }
+            // Fall back to default renderer
+            const defaultRenderer = base.renderers[blockName] || base.fallback;
+            return defaultRenderer(props);
+        };
+    };
+    // For each mapping, override the renderer for that block name
+    for (const mapping of mappings) {
+        const blockName = mapping.pattern.name;
+        if (blockName) {
+            enhancedRenderers[blockName] = createPatternRenderer(blockName);
+        }
     }
-    const parts = contentPosition.trim().split(/\s+/);
-    const horizontal = parts[0] || 'left';
-    const vertical = parts[1] || 'center';
+    // Create matchBlock function
+    const matchBlock = (block) => {
+        return findMatchingMapping(block, mappings);
+    };
     return {
-        horizontal: (horizontal === 'center' || horizontal === 'right' ? horizontal : 'left'),
-        vertical: (vertical === 'top' || vertical === 'bottom' ? vertical : 'center'),
+        ...base,
+        renderers: enhancedRenderers,
+        mappings,
+        matchBlock,
+        // Use provided colorMapper or inherit from base registry
+        colorMapper: colorMapper || base.colorMapper,
     };
 }
+
+const WPContent = ({ blocks, registry, className, page }) => {
+    if (!Array.isArray(blocks)) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn('WPContent: invalid blocks prop');
+        }
+        return null;
+    }
+    if (!registry || !registry.renderers) {
+        throw new Error('WPContent: registry is required');
+    }
+    const ast = parseGutenbergBlocks(blocks);
+    return (jsxRuntimeExports.jsx("div", { className: className, children: renderNodes(ast, registry, undefined, page) }));
+};
+
 /**
- * Extract video iframe HTML from innerBlocks (finds HTML block with iframe)
+ * Hero logic:
+ * - If the content contains a [HEROSECTION] shortcode (case-insensitive), do NOT auto-hero.
+ * - Else, if the page has featured media, render a hero section using the image as background.
  */
-function extractVideoIframeFromInnerBlocks(block) {
-    const innerBlocks = block.innerBlocks || [];
-    // Recursively search for HTML blocks with iframe
-    for (const innerBlock of innerBlocks) {
-        if (innerBlock.name === 'core/html' && innerBlock.innerHTML) {
-            // Check if innerHTML contains an iframe
-            if (innerBlock.innerHTML.includes('<iframe')) {
-                return innerBlock.innerHTML;
-            }
-        }
-        // Recursively search nested blocks
-        if (innerBlock.innerBlocks) {
-            const nestedVideo = extractVideoIframeFromInnerBlocks(innerBlock);
-            if (nestedVideo)
-                return nestedVideo;
+const WPPage = ({ page, registry, className }) => {
+    if (!page || !Array.isArray(page.blocks)) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn('WPPage: invalid page prop');
         }
+        return null;
+    }
+    if (!registry || !registry.renderers) {
+        throw new Error('WPPage: registry is required');
+    }
+    const hasHeroShortcode = React.useMemo(() => detectHeroShortcode(page.blocks), [page.blocks]);
+    const featured = getFeaturedImage(page);
+    return (jsxRuntimeExports.jsxs("article", { className: className, children: [!hasHeroShortcode && featured && (jsxRuntimeExports.jsx(HeroFromFeatured, { featured: featured, title: page.title?.rendered })), jsxRuntimeExports.jsx(WPContent, { blocks: page.blocks, registry: registry, page: page })] }));
+};
+function detectHeroShortcode(blocks) {
+    for (const block of blocks) {
+        const html = (block.innerHTML || '').toLowerCase();
+        if (html.includes('[herosection]'))
+            return true;
+        // Check if this is a cover block (which is a hero section)
+        if (block.name === 'core/cover')
+            return true;
+        if (block.innerBlocks?.length && detectHeroShortcode(block.innerBlocks))
+            return true;
     }
+    return false;
+}
+function getFeaturedImage(page) {
+    const fm = page._embedded?.['wp:featuredmedia'];
+    if (Array.isArray(fm) && fm.length > 0)
+        return fm[0];
     return null;
 }
+const HeroFromFeatured = ({ featured, title }) => {
+    const url = featured.source_url;
+    if (!url)
+        return null;
+    return (jsxRuntimeExports.jsx("section", { className: "w-full h-[40vh] min-h-[280px] flex items-end bg-cover bg-center", style: { backgroundImage: `url(${url})` }, "aria-label": featured.alt_text || title || 'Hero', children: jsxRuntimeExports.jsx("div", { className: "container mx-auto px-4 py-8 bg-gradient-to-t from-black/50 to-transparent w-full", children: title && jsxRuntimeExports.jsx("h1", { className: "text-white text-4xl font-bold drop-shadow", children: title }) }) }));
+};
+
+class WPErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error('WPErrorBoundary caught error:', error);
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback ?? null;
+        }
+        return this.props.children;
+    }
+}
 
 /**
  * Convert image URL with optional Cloudflare variant transformation
@@ -2712,6 +2754,7 @@ exports.convertImageUrls = convertImageUrls;
 exports.createDefaultRegistry = createDefaultRegistry;
 exports.createEnhancedRegistry = createEnhancedRegistry;
 exports.extractAlignment = extractAlignment;
+exports.extractBackgroundColor = extractBackgroundColor;
 exports.extractBackgroundImage = extractBackgroundImage;
 exports.extractButtonsFromInnerBlocks = extractButtonsFromInnerBlocks;
 exports.extractContent = extractContent;