@marvalt/dstyler 0.1.18 → 0.1.21

package/dist/index.js

@@ -2,239 +2,6 @@
 
 var React = require('react');
 
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-const defaultTokens = {
-    colors: {
-        primary: '#1a73e8',
-        secondary: '#34a853',
-        background: '#ffffff',
-        text: '#222222',
-        heading: '#222222',
-        default: '#ffffff',
-        alternate: '#f5f5f5',
-        highlight: '#e8f0fe',
-    },
-    spacing: {
-        sm: 8,
-        md: 16,
-        lg: 32,
-        xl: 64,
-    },
-    typography: {
-        body: 'Inter, sans-serif',
-        heading: 'Inter, sans-serif',
-        scale: 1.2,
-    },
-};
-
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-/**
- * Convert WordPress theme styles to design tokens
- */
-function convertWordPressToTokens(wpStyles) {
-    if (!wpStyles) {
-        return defaultTokens;
-    }
-    const palette = wpStyles.theme_palette || {};
-    // Typography priority: Customizer (wpStyles.typography) > Theme Editor fonts (if present separately) > defaults
-    // Note: Theme Editor fonts are not explicitly separated in current schema; assume Customizer holds them if provided.
-    const tokens = {
-        ...defaultTokens,
-        colors: {
-            ...defaultTokens.colors,
-            ...(wpStyles.colors?.primary && { primary: wpStyles.colors.primary }),
-            ...(wpStyles.colors?.secondary && { secondary: wpStyles.colors.secondary }),
-            ...(wpStyles.colors?.text && { text: wpStyles.colors.text }),
-            ...(wpStyles.colors?.heading && { heading: wpStyles.colors.heading }),
-            ...(wpStyles.colors?.background && {
-                background: wpStyles.colors.background,
-                default: wpStyles.colors.background,
-            }),
-        },
-        typography: {
-            ...defaultTokens.typography,
-            ...(wpStyles.typography?.heading_font_family && {
-                heading: wpStyles.typography.heading_font_family
-            }),
-            ...(wpStyles.typography?.body_font_family && {
-                body: wpStyles.typography.body_font_family
-            }),
-        },
-    };
-    // Ensure heading color falls back to text if not provided
-    if (!tokens.colors.heading) {
-        tokens.colors.heading =
-            // Prefer explicit heading color if provided by Theme Editor
-            wpStyles.colors?.heading ||
-                // Then Theme Editor palette contrast (matches heading color choice in editor)
-                palette['contrast'] ||
-                // Then palette primary
-                palette['primary'] ||
-                // Then explicit primary fallback
-                wpStyles.colors?.primary ||
-                tokens.colors.text;
-    }
-    // Generate alternate and highlight colors from primary/background
-    if (tokens.colors.primary && tokens.colors.background) {
-        // Alternate: slightly darker/lighter than background
-        tokens.colors.alternate = adjustBrightness(tokens.colors.background, -0.05);
-        // Highlight: tinted with primary color
-        tokens.colors.highlight = blendColors(tokens.colors.background, tokens.colors.primary, 0.1);
-    }
-    return tokens;
-}
-/**
- * Adjust brightness of a hex color
- */
-function adjustBrightness(hex, amount) {
-    const num = parseInt(hex.replace('#', ''), 16);
-    const r = Math.max(0, Math.min(255, ((num >> 16) & 0xff) + (amount * 255)));
-    const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + (amount * 255)));
-    const b = Math.max(0, Math.min(255, (num & 0xff) + (amount * 255)));
-    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
-}
-/**
- * Blend two colors
- */
-function blendColors(color1, color2, ratio) {
-    const c1 = hexToRgb(color1);
-    const c2 = hexToRgb(color2);
-    if (!c1 || !c2)
-        return color1;
-    const r = Math.round(c1.r + (c2.r - c1.r) * ratio);
-    const g = Math.round(c1.g + (c2.g - c1.g) * ratio);
-    const b = Math.round(c1.b + (c2.b - c1.b) * ratio);
-    return `rgb(${r}, ${g}, ${b})`;
-}
-function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
-        }
-        : null;
-}
-
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-const THEME_STYLE_ID = 'dstyler-theme-vars';
-function tokensToCSS(tokens) {
-    return `
-    --dstyler-color-primary: ${tokens.colors.primary};
-    --dstyler-color-secondary: ${tokens.colors.secondary};
-    --dstyler-color-background: ${tokens.colors.background};
-    --dstyler-color-text: ${tokens.colors.text};
-    --dstyler-color-heading: ${tokens.colors.heading || tokens.colors.text};
-    --dstyler-color-default: ${tokens.colors.default};
-    --dstyler-color-alternate: ${tokens.colors.alternate};
-    --dstyler-color-highlight: ${tokens.colors.highlight};
-    --dstyler-spacing-sm: ${tokens.spacing.sm}px;
-    --dstyler-spacing-md: ${tokens.spacing.md}px;
-    --dstyler-spacing-lg: ${tokens.spacing.lg}px;
-    --dstyler-spacing-xl: ${tokens.spacing.xl}px;
-    --dstyler-font-body: ${tokens.typography.body};
-    --dstyler-font-heading: ${tokens.typography.heading};
-    --dstyler-font-scale: ${tokens.typography.scale};
-  `;
-}
-function ensureStyleElement() {
-    if (typeof document === 'undefined')
-        return null;
-    let el = document.getElementById(THEME_STYLE_ID);
-    if (!el) {
-        el = document.createElement('style');
-        el.id = THEME_STYLE_ID;
-        document.head.appendChild(el);
-    }
-    return el;
-}
-/**
- * Inject CSS variables from design tokens into :root
- */
-function injectCSSVariables(tokens) {
-    const el = ensureStyleElement();
-    if (!el)
-        return;
-    el.textContent = `:root { ${tokensToCSS(tokens)} }`;
-}
-/**
- * Inject CSS variables for both light and dark themes.
- * Light applies to :root, dark applies when [data-theme="dark"] is present.
- */
-function injectDualThemeCSS(light, dark) {
-    const el = ensureStyleElement();
-    if (!el)
-        return;
-    el.textContent = `
-    :root { ${tokensToCSS(light)} }
-    :root[data-theme="dark"] { ${tokensToCSS(dark)} }
-  `;
-}
-
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-/**
- * ThemeProvider - Provides design tokens to the application
- *
- * Priority order:
- * 1. customTokens (highest priority - overrides everything)
- * 2. WordPress styles (converted to tokens)
- * 3. Default tokens (fallback)
- */
-const ThemeProvider = ({ children, wpStyles, customTokens, darkWpStyles, darkTokens, mode = 'light', }) => {
-    React.useEffect(() => {
-        // Light tokens: custom -> wpStyles -> default
-        const lightTokens = customTokens || convertWordPressToTokens(wpStyles);
-        // Dark tokens: provided -> wpStylesDark -> fallback to light
-        const resolvedDarkTokens = darkTokens || (darkWpStyles ? convertWordPressToTokens(darkWpStyles) : lightTokens);
-        if (mode === 'dark') {
-            injectDualThemeCSS(lightTokens, resolvedDarkTokens);
-            if (typeof document !== 'undefined') {
-                document.documentElement.setAttribute('data-theme', 'dark');
-            }
-            return;
-        }
-        if (mode === 'system') {
-            const prefersDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-            injectDualThemeCSS(lightTokens, resolvedDarkTokens);
-            if (typeof document !== 'undefined') {
-                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-            }
-            return;
-        }
-        // Default to light
-        injectDualThemeCSS(lightTokens, resolvedDarkTokens);
-        if (typeof document !== 'undefined') {
-            document.documentElement.setAttribute('data-theme', 'light');
-        }
-    }, [wpStyles, customTokens, darkWpStyles, darkTokens, mode]);
-    // Return children if provided, otherwise return null (theme still applies via useEffect)
-    if (children === undefined || children === null) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, children);
-};
-
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production = {};
@@ -650,21 +417,80 @@ if (process.env.NODE_ENV === 'production') {
 var jsxRuntimeExports = jsxRuntime.exports;
 
 /**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
+ * Detect sections from WordPress blocks
+ * Sections are defined by core/group blocks (with or without alignment)
+ * Sub-sections are core/columns blocks inside groups
  */
+function detectSections(blocks) {
+    const sections = [];
+    let sectionIndex = 0;
+    for (const block of blocks) {
+        // core/group blocks are sections
+        if (block.name === 'core/group') {
+            const attrs = block.attributes || {};
+            const className = attrs.className;
+            const customId = attrs.id;
+            // Extract blocks from innerBlocks
+            const innerBlocks = block.innerBlocks || [];
+            sections.push({
+                id: `section-${sectionIndex}`,
+                type: 'section',
+                block,
+                blocks: innerBlocks,
+                index: sectionIndex,
+                customClass: className,
+                customId,
+            });
+            sectionIndex++;
+        }
+    }
+    return sections;
+}
 /**
- * Select template component based on section properties
+ * Determine section style based on alternating logic and custom classes
+ * Rules:
+ * - default is always first
+ * - after default follows alternate
+ * - highlight resets - next section is default
  */
-function selectTemplate(section) {
-    const block = section.block;
-    const attrs = block.attributes || {};
+function determineSectionStyle(section, previousStyle) {
     const className = section.customClass?.toLowerCase() || '';
-    // Check for hero/cover blocks
-    if (block.name === 'core/cover') {
-        return 'HeroDefault';
+    // Check for custom class overrides first
+    if (className.includes('highlight') || className.includes('highlight-section')) {
+        return 'highlight';
+    }
+    if (className.includes('dark') || className.includes('dark-section')) {
+        return 'alternate';
+    }
+    if (className.includes('default') || className.includes('default-section')) {
+        return 'default';
+    }
+    // Alternating logic
+    if (section.index === 0) {
+        return 'default';
+    }
+    if (previousStyle === 'highlight') {
+        return 'default';
+    }
+    if (previousStyle === 'default') {
+        return 'alternate';
+    }
+    if (previousStyle === 'alternate') {
+        return 'default';
+    }
+    return 'default';
+}
+
+/**
+ * Select template component based on section properties
+ */
+function selectTemplate(section) {
+    const block = section.block;
+    const attrs = block.attributes || {};
+    const className = section.customClass?.toLowerCase() || '';
+    // Check for hero/cover blocks
+    if (block.name === 'core/cover') {
+        return 'HeroDefault';
     }
     // Check for footer (could be detected by block name or class)
     if (className.includes('footer') || block.name === 'core/footer') {
@@ -678,101 +504,6 @@ function selectTemplate(section) {
     return 'SectionBase';
 }
 
-const SectionBase = ({ section, children }) => {
-    const style = section.style || 'default';
-    const bgColor = `var(--dstyler-color-${style})`;
-    const className = [
-        'dstyler-section',
-        `dstyler-section-${style}`,
-        section.customClass,
-    ].filter(Boolean).join(' ');
-    return (jsxRuntimeExports.jsx("section", { className: className, id: section.customId, style: {
-            backgroundColor: bgColor,
-            padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
-        }, children: jsxRuntimeExports.jsx("div", { style: {
-                maxWidth: 'var(--dstyler-container-max-width, 1200px)',
-                margin: '0 auto',
-            }, children: children }) }));
-};
-
-const SectionWave = ({ section, children, waveTop = true, waveBottom = true, }) => {
-    const style = section.style || 'default';
-    const bgColor = `var(--dstyler-color-${style})`;
-    const className = [
-        'dstyler-section',
-        'dstyler-section-wave',
-        `dstyler-section-${style}`,
-        section.customClass,
-    ].filter(Boolean).join(' ');
-    // Wave SVG
-    const waveSvg = (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 1440 120", preserveAspectRatio: "none", style: {
-            width: '100%',
-            height: '60px',
-            display: 'block',
-            fill: bgColor,
-        }, children: jsxRuntimeExports.jsx("path", { d: "M0,60 C240,0 480,120 720,60 C960,0 1200,120 1440,60 L1440,120 L0,120 Z" }) }));
-    return (jsxRuntimeExports.jsxs("section", { className: className, id: section.customId, style: {
-            backgroundColor: bgColor,
-            position: 'relative',
-        }, children: [waveTop && (jsxRuntimeExports.jsx("div", { style: { marginTop: '-1px' }, children: waveSvg })), jsxRuntimeExports.jsx("div", { style: {
-                    padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
-                }, children: jsxRuntimeExports.jsx("div", { style: {
-                        maxWidth: 'var(--dstyler-container-max-width, 1200px)',
-                        margin: '0 auto',
-                    }, children: children }) }), waveBottom && (jsxRuntimeExports.jsx("div", { style: { marginBottom: '-1px', transform: 'rotate(180deg)' }, children: waveSvg }))] }));
-};
-
-const HeroDefault = ({ section, children }) => {
-    const style = section.style || 'default';
-    const bgColor = `var(--dstyler-color-${style})`;
-    const className = [
-        'dstyler-hero',
-        'dstyler-hero-default',
-        `dstyler-hero-${style}`,
-        section.customClass,
-    ].filter(Boolean).join(' ');
-    return (jsxRuntimeExports.jsx("section", { className: className, id: section.customId, style: {
-            backgroundColor: bgColor,
-            padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
-            minHeight: '50vh',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, children: jsxRuntimeExports.jsx("div", { style: {
-                maxWidth: 'var(--dstyler-container-max-width, 1200px)',
-                margin: '0 auto',
-                textAlign: 'center',
-            }, children: children }) }));
-};
-
-const FooterMinimal = ({ section, children }) => {
-    const style = section.style || 'default';
-    const bgColor = `var(--dstyler-color-${style})`;
-    const className = [
-        'dstyler-footer',
-        'dstyler-footer-minimal',
-        `dstyler-footer-${style}`,
-        section.customClass,
-    ].filter(Boolean).join(' ');
-    return (jsxRuntimeExports.jsx("footer", { className: className, id: section.customId, style: {
-            backgroundColor: bgColor,
-            padding: 'var(--dstyler-spacing-lg) var(--dstyler-spacing-md)',
-            borderTop: '1px solid var(--dstyler-color-alternate)',
-        }, children: jsxRuntimeExports.jsx("div", { style: {
-                maxWidth: 'var(--dstyler-container-max-width, 1200px)',
-                margin: '0 auto',
-                textAlign: 'center',
-                fontSize: '0.875rem',
-                color: 'var(--dstyler-color-text)',
-            }, children: children }) }));
-};
-
-/**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
 /**
  * Select block renderer based on block type
  */
@@ -793,7 +524,7 @@ function selectBlockRenderer(block) {
         case 'core/shortcode':
             // Check if it's a form shortcode
             const attrs = block.attributes || {};
-            const content = attrs.content || attrs.html || '';
+            const content = (attrs.content || attrs.html || '');
             if (content.includes('[gravityform') || content.includes('[mauticform')) {
                 return 'BlockForm';
             }
@@ -805,7 +536,7 @@ function selectBlockRenderer(block) {
 
 const BlockText = ({ block, className }) => {
     const attrs = block.attributes || {};
-    const content = attrs.content || attrs.text || '';
+    const content = (attrs.content || attrs.text || '');
     const tagName = block.name === 'core/heading'
         ? `h${attrs.level || 2}`
         : 'p';
@@ -825,40 +556,38 @@ const BlockText = ({ block, className }) => {
 
 const BlockImage = ({ block, className }) => {
     const attrs = block.attributes || {};
-    const url = attrs.url || attrs.sourceUrl || '';
-    const alt = attrs.alt || attrs.altText || '';
+    const url = (attrs.url || attrs.sourceUrl || '');
+    const alt = (attrs.alt || attrs.altText || '');
     const width = attrs.width;
     const height = attrs.height;
     if (!url)
         return null;
-    const style = {
-        maxWidth: '100%',
-        height: 'auto',
-        marginBottom: 'var(--dstyler-spacing-md)',
-        borderRadius: '8px',
-    };
-    return (jsxRuntimeExports.jsx("img", { src: url, alt: alt, width: width, height: height, className: className, style: style, loading: "lazy" }));
+    return (jsxRuntimeExports.jsx("img", { src: url, alt: alt, width: width, height: height, className: className, style: {
+            maxWidth: '100%',
+            height: 'auto',
+            marginBottom: 'var(--dstyler-spacing-md)',
+            borderRadius: '8px',
+        }, loading: "lazy" }));
 };
 
 const BlockButton = ({ block, className }) => {
     const attrs = block.attributes || {};
-    const text = attrs.text || attrs.label || 'Button';
-    const url = attrs.url || attrs.linkUrl || '#';
+    const text = (attrs.text || attrs.label || 'Button');
+    const url = (attrs.url || attrs.linkUrl || '#');
     const isExternal = typeof window !== 'undefined'
         ? url.startsWith('http') && !url.includes(window.location.hostname)
         : url.startsWith('http');
-    const style = {
-        display: 'inline-block',
-        padding: 'var(--dstyler-spacing-md) var(--dstyler-spacing-lg)',
-        backgroundColor: 'var(--dstyler-color-primary)',
-        color: '#ffffff',
-        textDecoration: 'none',
-        borderRadius: '4px',
-        fontWeight: '500',
-        marginBottom: 'var(--dstyler-spacing-md)',
-        transition: 'opacity 0.2s',
-    };
-    return (jsxRuntimeExports.jsx("a", { href: url, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, className: className, style: style, onMouseEnter: (e) => {
+    return (jsxRuntimeExports.jsx("a", { href: url, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, className: className, style: {
+            display: 'inline-block',
+            padding: 'var(--dstyler-spacing-md) var(--dstyler-spacing-lg)',
+            backgroundColor: 'var(--dstyler-color-primary)',
+            color: '#ffffff',
+            textDecoration: 'none',
+            borderRadius: '4px',
+            fontWeight: '500',
+            marginBottom: 'var(--dstyler-spacing-md)',
+            transition: 'opacity 0.2s',
+        }, onMouseEnter: (e) => {
             e.currentTarget.style.opacity = '0.9';
         }, onMouseLeave: (e) => {
             e.currentTarget.style.opacity = '1';
@@ -867,16 +596,22 @@ const BlockButton = ({ block, className }) => {
 
 const BlockForm = ({ block, className }) => {
     const attrs = block.attributes || {};
-    const content = attrs.content || attrs.html || '';
+    const content = (attrs.content || attrs.html || '');
     // For now, just render the HTML content
     // In the future, this could parse and render using Gravity Forms or Mautic components
-    const style = {
-        marginBottom: 'var(--dstyler-spacing-lg)',
-    };
-    return (jsxRuntimeExports.jsx("div", { className: className, style: style, dangerouslySetInnerHTML: { __html: content } }));
+    return (jsxRuntimeExports.jsx("div", { className: className, style: {
+            marginBottom: 'var(--dstyler-spacing-lg)',
+        }, dangerouslySetInnerHTML: { __html: content } }));
 };
 
-const AutoBlock = ({ block, registry }) => {
+/**
+ * AutoBlock - Automatically selects and renders the appropriate block renderer
+ *
+ * Priority:
+ * 1. Use registry renderer if available (integrates with wparser)
+ * 2. Use dstyler's built-in block renderers
+ */
+const AutoBlock = ({ block, registry, className }) => {
     // If registry is provided, use it for rendering (integrates with wparser)
     if (registry && registry.renderers[block.name]) {
         const Renderer = registry.renderers[block.name];
@@ -886,19 +621,111 @@ const AutoBlock = ({ block, registry }) => {
     const rendererName = selectBlockRenderer(block);
     switch (rendererName) {
         case 'BlockText':
-            return jsxRuntimeExports.jsx(BlockText, { block: block });
+            return jsxRuntimeExports.jsx(BlockText, { block: block, className: className });
         case 'BlockImage':
-            return jsxRuntimeExports.jsx(BlockImage, { block: block });
+            return jsxRuntimeExports.jsx(BlockImage, { block: block, className: className });
         case 'BlockButton':
-            return jsxRuntimeExports.jsx(BlockButton, { block: block });
+            return jsxRuntimeExports.jsx(BlockButton, { block: block, className: className });
         case 'BlockForm':
-            return jsxRuntimeExports.jsx(BlockForm, { block: block });
+            return jsxRuntimeExports.jsx(BlockForm, { block: block, className: className });
         default:
             // Fallback: render block name or content
             return (jsxRuntimeExports.jsx("div", { style: { marginBottom: 'var(--dstyler-spacing-md)' }, children: jsxRuntimeExports.jsxs("pre", { style: { fontSize: '0.875rem', color: '#666' }, children: [block.name, ": ", JSON.stringify(block.attributes, null, 2)] }) }));
     }
 };
 
+const SectionBase = ({ section, children }) => {
+    const style = section.style || 'default';
+    const bgColor = `var(--dstyler-color-${style})`;
+    const className = [
+        'dstyler-section',
+        `dstyler-section-${style}`,
+        section.customClass,
+    ].filter(Boolean).join(' ');
+    return (jsxRuntimeExports.jsx("section", { className: className, id: section.customId, style: {
+            backgroundColor: bgColor,
+            padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
+        }, children: jsxRuntimeExports.jsx("div", { style: {
+                maxWidth: 'var(--dstyler-container-max-width, 1200px)',
+                margin: '0 auto',
+            }, children: children }) }));
+};
+
+const SectionWave = ({ section, children, waveTop = true, waveBottom = true, }) => {
+    const style = section.style || 'default';
+    const bgColor = `var(--dstyler-color-${style})`;
+    const className = [
+        'dstyler-section',
+        'dstyler-section-wave',
+        `dstyler-section-${style}`,
+        section.customClass,
+    ].filter(Boolean).join(' ');
+    // Wave SVG
+    const waveSvg = (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 1440 120", preserveAspectRatio: "none", style: {
+            width: '100%',
+            height: '60px',
+            display: 'block',
+            fill: bgColor,
+        }, children: jsxRuntimeExports.jsx("path", { d: "M0,60 C240,0 480,120 720,60 C960,0 1200,120 1440,60 L1440,120 L0,120 Z" }) }));
+    return (jsxRuntimeExports.jsxs("section", { className: className, id: section.customId, style: {
+            backgroundColor: bgColor,
+            position: 'relative',
+        }, children: [waveTop && jsxRuntimeExports.jsx("div", { style: { marginTop: '-1px' }, children: waveSvg }), jsxRuntimeExports.jsx("div", { style: {
+                    padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
+                }, children: jsxRuntimeExports.jsx("div", { style: {
+                        maxWidth: 'var(--dstyler-container-max-width, 1200px)',
+                        margin: '0 auto',
+                    }, children: children }) }), waveBottom && (jsxRuntimeExports.jsx("div", { style: { marginBottom: '-1px', transform: 'rotate(180deg)' }, children: waveSvg }))] }));
+};
+
+const HeroDefault = ({ section, children }) => {
+    const style = section.style || 'default';
+    const bgColor = `var(--dstyler-color-${style})`;
+    const className = [
+        'dstyler-hero',
+        'dstyler-hero-default',
+        `dstyler-hero-${style}`,
+        section.customClass,
+    ].filter(Boolean).join(' ');
+    return (jsxRuntimeExports.jsx("section", { className: className, id: section.customId, style: {
+            backgroundColor: bgColor,
+            padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
+            minHeight: '50vh',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: jsxRuntimeExports.jsx("div", { style: {
+                maxWidth: 'var(--dstyler-container-max-width, 1200px)',
+                margin: '0 auto',
+                textAlign: 'center',
+            }, children: children }) }));
+};
+
+const FooterMinimal = ({ section, children }) => {
+    const style = section.style || 'default';
+    const bgColor = `var(--dstyler-color-${style})`;
+    const className = [
+        'dstyler-footer',
+        'dstyler-footer-minimal',
+        `dstyler-footer-${style}`,
+        section.customClass,
+    ].filter(Boolean).join(' ');
+    return (jsxRuntimeExports.jsx("footer", { className: className, id: section.customId, style: {
+            backgroundColor: bgColor,
+            padding: 'var(--dstyler-spacing-lg) var(--dstyler-spacing-md)',
+            borderTop: '1px solid var(--dstyler-color-alternate)',
+        }, children: jsxRuntimeExports.jsx("div", { style: {
+                maxWidth: 'var(--dstyler-container-max-width, 1200px)',
+                margin: '0 auto',
+                textAlign: 'center',
+                fontSize: '0.875rem',
+                color: 'var(--dstyler-color-text)',
+            }, children: children }) }));
+};
+
+/**
+ * AutoSection - Automatically selects and renders the appropriate section template
+ */
 const AutoSection = ({ section, registry }) => {
     const templateName = selectTemplate(section);
     // Render blocks using AutoBlock or registry
@@ -919,85 +746,20 @@ const AutoSection = ({ section, registry }) => {
             return (jsxRuntimeExports.jsx(SectionWave, { section: section, waveTop: waveTop, waveBottom: waveBottom, children: renderBlocks() }));
         }
         case 'HeroDefault':
-            return (jsxRuntimeExports.jsx(HeroDefault, { section: section, children: renderBlocks() }));
+            return jsxRuntimeExports.jsx(HeroDefault, { section: section, children: renderBlocks() });
         case 'FooterMinimal':
-            return (jsxRuntimeExports.jsx(FooterMinimal, { section: section, children: renderBlocks() }));
+            return jsxRuntimeExports.jsx(FooterMinimal, { section: section, children: renderBlocks() });
         default:
-            return (jsxRuntimeExports.jsx(SectionBase, { section: section, children: renderBlocks() }));
+            return jsxRuntimeExports.jsx(SectionBase, { section: section, children: renderBlocks() });
     }
 };
 
 /**
- * @license GPL-3.0-or-later
+ * StyledPage - Main entry point for dstyler
  *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
- */
-/**
- * Detect sections from WordPress blocks
- * Sections are defined by core/group blocks (with or without alignment)
- * Sub-sections are core/columns blocks inside groups
+ * Detects sections from WordPress blocks and applies alternating styles
+ * Integrates with wparser's registry for block rendering
  */
-function detectSections(blocks) {
-    const sections = [];
-    let sectionIndex = 0;
-    for (const block of blocks) {
-        // core/group blocks are sections
-        if (block.name === 'core/group') {
-            const attrs = block.attributes || {};
-            const className = attrs.className;
-            const customId = attrs.id;
-            // Extract blocks from innerBlocks
-            const innerBlocks = block.innerBlocks || [];
-            sections.push({
-                id: `section-${sectionIndex}`,
-                type: 'section',
-                block,
-                blocks: innerBlocks,
-                index: sectionIndex,
-                customClass: className,
-                customId,
-            });
-            sectionIndex++;
-        }
-    }
-    return sections;
-}
-/**
- * Determine section style based on alternating logic and custom classes
- * Rules:
- * - default is always first
- * - after default follows alternate
- * - highlight resets - next section is default
- */
-function determineSectionStyle(section, previousStyle) {
-    const className = section.customClass?.toLowerCase() || '';
-    // Check for custom class overrides first
-    if (className.includes('highlight') || className.includes('highlight-section')) {
-        return 'highlight';
-    }
-    if (className.includes('dark') || className.includes('dark-section')) {
-        return 'alternate';
-    }
-    if (className.includes('default') || className.includes('default-section')) {
-        return 'default';
-    }
-    // Alternating logic
-    if (section.index === 0) {
-        return 'default';
-    }
-    if (previousStyle === 'highlight') {
-        return 'default';
-    }
-    if (previousStyle === 'default') {
-        return 'alternate';
-    }
-    if (previousStyle === 'alternate') {
-        return 'default';
-    }
-    return 'default';
-}
-
 const StyledPage = ({ page, registry }) => {
     const blocks = page.blocks || [];
     // Detect sections from blocks
@@ -1012,25 +774,175 @@ const StyledPage = ({ page, registry }) => {
             style,
         };
     });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: styledSections.map((section) => (jsxRuntimeExports.jsx(AutoSection, { section: section, registry: registry }, section.id))) }));
+    return (jsxRuntimeExports.jsx(React.Fragment, { children: styledSections.map((section) => (jsxRuntimeExports.jsx(AutoSection, { section: section, registry: registry }, section.id))) }));
+};
+
+const defaultTokens = {
+    colors: {
+        primary: '#1a73e8',
+        secondary: '#34a853',
+        background: '#ffffff',
+        text: '#222222',
+        heading: '#222222',
+        default: '#ffffff',
+        alternate: '#f5f5f5',
+        highlight: '#e8f0fe',
+    },
+    spacing: {
+        sm: 8,
+        md: 16,
+        lg: 32,
+        xl: 64,
+    },
+    typography: {
+        body: 'Inter, sans-serif',
+        heading: 'Inter, sans-serif',
+        scale: 1.2,
+    },
 };
 
 /**
- * @license GPL-3.0-or-later
- *
- * This file is part of the MarVAlt Open SDK.
- * Copyright (c) 2025 Vibune Pty Ltd.
+ * Adjust brightness of a hex color
  */
+function adjustBrightness(hex, amount) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, Math.min(255, ((num >> 16) & 0xff) + (amount * 255)));
+    const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + (amount * 255)));
+    const b = Math.max(0, Math.min(255, (num & 0xff) + (amount * 255)));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
 /**
- * Responsive utility functions
+ * Blend two colors
  */
-function getResponsiveValue(mobile, tablet, desktop) {
-    if (!tablet && !desktop) {
-        return typeof mobile === 'number' ? `${mobile}px` : mobile;
+function blendColors(color1, color2, ratio) {
+    const c1 = hexToRgb(color1);
+    const c2 = hexToRgb(color2);
+    if (!c1 || !c2)
+        return color1;
+    const r = Math.round(c1.r + (c2.r - c1.r) * ratio);
+    const g = Math.round(c1.g + (c2.g - c1.g) * ratio);
+    const b = Math.round(c1.b + (c2.b - c1.b) * ratio);
+    return `rgb(${r}, ${g}, ${b})`;
+}
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+/**
+ * Convert WordPress theme styles to design tokens
+ */
+function convertWordPressToTokens(wpStyles) {
+    if (!wpStyles) {
+        return defaultTokens;
     }
-    // For now, return mobile value
-    // In the future, this could use CSS custom properties with media queries
-    return typeof mobile === 'number' ? `${mobile}px` : mobile;
+    const palette = wpStyles.theme_palette || {};
+    // Typography priority: Customizer (wpStyles.typography) > Theme Editor fonts > defaults
+    const tokens = {
+        ...defaultTokens,
+        colors: {
+            ...defaultTokens.colors,
+            ...(wpStyles.colors?.primary && { primary: wpStyles.colors.primary }),
+            ...(wpStyles.colors?.secondary && { secondary: wpStyles.colors.secondary }),
+            ...(wpStyles.colors?.text && { text: wpStyles.colors.text }),
+            // heading handled below to allow palette fallback
+            ...(wpStyles.colors?.background && {
+                background: wpStyles.colors.background,
+                default: wpStyles.colors.background,
+            }),
+        },
+        typography: {
+            ...defaultTokens.typography,
+            ...(wpStyles.typography?.heading_font_family && {
+                heading: wpStyles.typography.heading_font_family,
+            }),
+            ...(wpStyles.typography?.body_font_family && {
+                body: wpStyles.typography.body_font_family,
+            }),
+        },
+    };
+    // Explicit heading override (may be undefined/empty), then fallback below
+    tokens.colors.heading = wpStyles.colors?.heading || undefined;
+    // Ensure heading color falls back to text if not provided
+    if (!tokens.colors.heading) {
+        tokens.colors.heading =
+            // Prefer explicit heading color if provided by Theme Editor
+            wpStyles.colors?.heading ||
+                // Then Theme Editor palette contrast (matches heading color choice in editor)
+                palette['contrast'] ||
+                // Then palette primary
+                palette['primary'] ||
+                // Then explicit primary fallback
+                wpStyles.colors?.primary ||
+                tokens.colors.text;
+    }
+    // Generate alternate and highlight colors from primary/background
+    if (tokens.colors.primary && tokens.colors.background) {
+        // Alternate: slightly darker/lighter than background
+        tokens.colors.alternate = adjustBrightness(tokens.colors.background, -0.05);
+        // Highlight: tinted with primary color
+        tokens.colors.highlight = blendColors(tokens.colors.background, tokens.colors.primary, 0.1);
+    }
+    return tokens;
+}
+
+const THEME_STYLE_ID = 'dstyler-theme-vars';
+function tokensToCSS(tokens) {
+    return `
+    --dstyler-color-primary: ${tokens.colors.primary};
+    --dstyler-color-secondary: ${tokens.colors.secondary};
+    --dstyler-color-background: ${tokens.colors.background};
+    --dstyler-color-text: ${tokens.colors.text};
+    --dstyler-color-heading: ${tokens.colors.heading || tokens.colors.text};
+    --dstyler-color-default: ${tokens.colors.default};
+    --dstyler-color-alternate: ${tokens.colors.alternate};
+    --dstyler-color-highlight: ${tokens.colors.highlight};
+    --dstyler-spacing-sm: ${tokens.spacing.sm}px;
+    --dstyler-spacing-md: ${tokens.spacing.md}px;
+    --dstyler-spacing-lg: ${tokens.spacing.lg}px;
+    --dstyler-spacing-xl: ${tokens.spacing.xl}px;
+    --dstyler-font-body: ${tokens.typography.body};
+    --dstyler-font-heading: ${tokens.typography.heading};
+    --dstyler-font-scale: ${tokens.typography.scale};
+  `;
+}
+function ensureStyleElement() {
+    if (typeof document === 'undefined')
+        return null;
+    let el = document.getElementById(THEME_STYLE_ID);
+    if (!el) {
+        el = document.createElement('style');
+        el.id = THEME_STYLE_ID;
+        document.head.appendChild(el);
+    }
+    return el;
+}
+/**
+ * Inject CSS variables from design tokens into :root
+ */
+function injectCSSVariables(tokens) {
+    const el = ensureStyleElement();
+    if (!el)
+        return;
+    el.textContent = `:root { ${tokensToCSS(tokens)} }`;
+}
+/**
+ * Inject CSS variables for both light and dark themes.
+ * Light applies to :root, dark applies when [data-theme="dark"] is present.
+ */
+function injectDualThemeCSS(light, dark) {
+    const el = ensureStyleElement();
+    if (!el)
+        return;
+    el.textContent = `
+    :root { ${tokensToCSS(light)} }
+    :root[data-theme="dark"] { ${tokensToCSS(dark)} }
+  `;
 }
 
 /**
@@ -1039,6 +951,78 @@ function getResponsiveValue(mobile, tablet, desktop) {
  * This file is part of the MarVAlt Open SDK.
  * Copyright (c) 2025 Vibune Pty Ltd.
  */
+/**
+ * ThemeProvider - Provides design tokens to the application
+ *
+ * Priority order:
+ * 1. customTokens (highest priority - overrides everything)
+ * 2. WordPress styles (converted to tokens)
+ * 3. Default tokens (fallback)
+ */
+const ThemeProvider = ({ children, wpStyles, customTokens, darkWpStyles, darkTokens, mode = 'light', }) => {
+    React.useEffect(() => {
+        // Light tokens: custom -> wpStyles -> default
+        const lightTokens = customTokens || convertWordPressToTokens(wpStyles);
+        // Dark tokens: provided -> wpStylesDark -> fallback to light
+        const resolvedDarkTokens = darkTokens || (darkWpStyles ? convertWordPressToTokens(darkWpStyles) : lightTokens);
+        if (mode === 'dark') {
+            injectDualThemeCSS(lightTokens, resolvedDarkTokens);
+            if (typeof document !== 'undefined') {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            }
+            return;
+        }
+        if (mode === 'system') {
+            const prefersDark = typeof window !== 'undefined' &&
+                window.matchMedia &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches;
+            injectDualThemeCSS(lightTokens, resolvedDarkTokens);
+            if (typeof document !== 'undefined') {
+                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+            }
+            return;
+        }
+        // Default to light
+        injectDualThemeCSS(lightTokens, resolvedDarkTokens);
+        if (typeof document !== 'undefined') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        }
+    }, [wpStyles, customTokens, darkWpStyles, darkTokens, mode]);
+    // Return children if provided, otherwise return null (theme still applies via useEffect)
+    if (children === undefined || children === null) {
+        return null;
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+
+/**
+ * Check if a color is dark (for determining text color)
+ */
+function isColorDark(color) {
+    // Remove # if present
+    const hex = color.replace('#', '');
+    // Handle RGB/RGBA format
+    if (color.startsWith('rgb')) {
+        const match = color.match(/\d+/g);
+        if (match && match.length >= 3) {
+            const r = parseInt(match[0], 10);
+            const g = parseInt(match[1], 10);
+            const b = parseInt(match[2], 10);
+            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+            return brightness < 128;
+        }
+    }
+    // Handle hex format
+    if (hex.length === 6) {
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness < 128;
+    }
+    // Default to light background
+    return false;
+}
 /**
  * Create a colorMapper from design tokens and WordPress theme palette
  *
@@ -1065,7 +1049,9 @@ function getResponsiveValue(mobile, tablet, desktop) {
  */
 function createColorMapperFromTokens(tokens, themePalette, overrides) {
     // Debug logging
-    if (typeof window !== 'undefined' && typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
+    if (typeof window !== 'undefined' &&
+        typeof process !== 'undefined' &&
+        process.env.NODE_ENV === 'development') {
         console.log('🎨 createColorMapperFromTokens - themePalette:', themePalette);
         console.log('🎨 createColorMapperFromTokens - tokens:', tokens);
     }
@@ -1082,7 +1068,9 @@ function createColorMapperFromTokens(tokens, themePalette, overrides) {
             const textColor = isDark ? 'text-white' : 'text-gray-900';
             // Include both bg (for background mapping) and text-[color] (for text mapping), plus contrast helper
             const result = `bg-[${color}] text-[${color}] ${textColor}`;
-            if (typeof window !== 'undefined' && typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
+            if (typeof window !== 'undefined' &&
+                typeof process !== 'undefined' &&
+                process.env.NODE_ENV === 'development') {
                 console.log(`🎨 Color mapper - ${wpColorName}:`, result, '(from theme palette)');
             }
             return result;
@@ -1090,53 +1078,25 @@ function createColorMapperFromTokens(tokens, themePalette, overrides) {
         // Fallback: Map WordPress theme colors to design tokens
         // Using Tailwind's arbitrary value syntax for hex colors
         const defaultMap = {
-            'base': `bg-[${tokens.colors.background}] text-[${tokens.colors.text}]`,
-            'background': `bg-[${tokens.colors.background}] text-[${tokens.colors.text}]`,
-            'foreground': `text-[${tokens.colors.text}]`,
-            'contrast': `bg-[${themePalette?.contrast || tokens.colors.text}] text-[${tokens.colors.background}]`,
-            'primary': `bg-[${themePalette?.primary || tokens.colors.primary}] text-[${themePalette?.primary || tokens.colors.primary}]`,
-            'secondary': `bg-[${themePalette?.secondary || tokens.colors.secondary}] text-[${themePalette?.secondary || tokens.colors.secondary}]`,
-            'heading': `text-[${tokens.colors.heading || tokens.colors.text}]`,
-            'accent': `bg-[${tokens.colors.highlight}] text-[${tokens.colors.highlight}]`,
+            base: `bg-[${tokens.colors.background}] text-[${tokens.colors.text}]`,
+            background: `bg-[${tokens.colors.background}] text-[${tokens.colors.text}]`,
+            foreground: `text-[${tokens.colors.text}]`,
+            contrast: `bg-[${themePalette?.contrast || tokens.colors.text}] text-[${tokens.colors.background}]`,
+            primary: `bg-[${themePalette?.primary || tokens.colors.primary}] text-[${themePalette?.primary || tokens.colors.primary}]`,
+            secondary: `bg-[${themePalette?.secondary || tokens.colors.secondary}] text-[${themePalette?.secondary || tokens.colors.secondary}]`,
+            heading: `text-[${tokens.colors.heading || tokens.colors.text}]`,
+            accent: `bg-[${tokens.colors.highlight}] text-[${tokens.colors.highlight}]`,
             'accent-1': `bg-[${themePalette?.['accent-1'] || tokens.colors.primary}] text-[${themePalette?.['accent-1'] || tokens.colors.primary}]`,
             'accent-2': `bg-[${themePalette?.['accent-2'] || tokens.colors.secondary}] text-[${themePalette?.['accent-2'] || tokens.colors.secondary}]`,
             'accent-3': `bg-[${themePalette?.['accent-3'] || tokens.colors.highlight}] text-[${themePalette?.['accent-3'] || tokens.colors.highlight}]`,
             'accent-4': `bg-[${themePalette?.['accent-4'] || tokens.colors.alternate}] text-[${themePalette?.['accent-4'] || tokens.colors.alternate}]`,
             'accent-5': `bg-[${themePalette?.['accent-5'] || tokens.colors.default}] text-[${themePalette?.['accent-5'] || tokens.colors.default}]`,
             'accent-6': `bg-[${themePalette?.['accent-6'] || themePalette?.primary || tokens.colors.primary}] text-[${themePalette?.['accent-6'] || themePalette?.primary || tokens.colors.primary}]`,
-            'transparent': 'bg-transparent',
+            transparent: 'bg-transparent',
         };
         return wpColorName ? defaultMap[wpColorName] || null : null;
     };
 }
-/**
- * Check if a color is dark (for determining text color)
- */
-function isColorDark(color) {
-    // Remove # if present
-    const hex = color.replace('#', '');
-    // Handle RGB/RGBA format
-    if (color.startsWith('rgb')) {
-        const match = color.match(/\d+/g);
-        if (match && match.length >= 3) {
-            const r = parseInt(match[0], 10);
-            const g = parseInt(match[1], 10);
-            const b = parseInt(match[2], 10);
-            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-            return brightness < 128;
-        }
-    }
-    // Handle hex format
-    if (hex.length === 6) {
-        const r = parseInt(hex.substring(0, 2), 16);
-        const g = parseInt(hex.substring(2, 4), 16);
-        const b = parseInt(hex.substring(4, 6), 16);
-        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-        return brightness < 128;
-    }
-    // Default to light background
-    return false;
-}
 /**
  * Create a colorMapper with semantic Tailwind classes
  *
@@ -1164,9 +1124,9 @@ function createColorMapperWithSemanticClasses(tokens, overrides) {
         // Map WordPress theme colors to semantic Tailwind classes
         // Assumes your Tailwind config has primary, secondary, muted, etc. defined
         const defaultMap = {
-            'base': 'bg-white',
-            'contrast': 'bg-gray-900 text-white',
-            'transparent': 'bg-transparent',
+            base: 'bg-white',
+            contrast: 'bg-gray-900 text-white',
+            transparent: 'bg-transparent',
             'accent-1': 'bg-primary text-primary-foreground',
             'accent-2': 'bg-secondary text-secondary-foreground',
             'accent-3': 'bg-muted text-muted-foreground',
@@ -1178,8 +1138,30 @@ function createColorMapperWithSemanticClasses(tokens, overrides) {
     };
 }
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+/**
+ * Responsive utility functions
+ */
+function getResponsiveValue(mobile, tablet, desktop) {
+    if (!tablet && !desktop) {
+        return typeof mobile === 'number' ? `${mobile}px` : mobile;
+    }
+    // For now, return mobile value
+    // In the future, this could use CSS custom properties with media queries
+    return typeof mobile === 'number' ? `${mobile}px` : mobile;
+}
+
 exports.AutoBlock = AutoBlock;
 exports.AutoSection = AutoSection;
+exports.BlockButton = BlockButton;
+exports.BlockForm = BlockForm;
+exports.BlockImage = BlockImage;
+exports.BlockText = BlockText;
 exports.FooterMinimal = FooterMinimal;
 exports.HeroDefault = HeroDefault;
 exports.SectionBase = SectionBase;