@marvalt/dstyler 0.1.21 → 0.1.23

package/dist/index.js

@@ -2,431 +2,35 @@
 
 var React = require('react');
 
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_production;
-
-function requireReactJsxRuntime_production () {
-	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-	hasRequiredReactJsxRuntime_production = 1;
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	function jsxProd(type, config, maybeKey) {
-	  var key = null;
-	  void 0 !== maybeKey && (key = "" + maybeKey);
-	  void 0 !== config.key && (key = "" + config.key);
-	  if ("key" in config) {
-	    maybeKey = {};
-	    for (var propName in config)
-	      "key" !== propName && (maybeKey[propName] = config[propName]);
-	  } else maybeKey = config;
-	  config = maybeKey.ref;
-	  return {
-	    $$typeof: REACT_ELEMENT_TYPE,
-	    type: type,
-	    key: key,
-	    ref: void 0 !== config ? config : null,
-	    props: maybeKey
-	  };
-	}
-	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-	reactJsxRuntime_production.jsx = jsxProd;
-	reactJsxRuntime_production.jsxs = jsxProd;
-	return reactJsxRuntime_production;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_development;
-
-function requireReactJsxRuntime_development () {
-	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-	hasRequiredReactJsxRuntime_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function getComponentNameFromType(type) {
-	      if (null == type) return null;
-	      if ("function" === typeof type)
-	        return type.$$typeof === REACT_CLIENT_REFERENCE
-	          ? null
-	          : type.displayName || type.name || null;
-	      if ("string" === typeof type) return type;
-	      switch (type) {
-	        case REACT_FRAGMENT_TYPE:
-	          return "Fragment";
-	        case REACT_PROFILER_TYPE:
-	          return "Profiler";
-	        case REACT_STRICT_MODE_TYPE:
-	          return "StrictMode";
-	        case REACT_SUSPENSE_TYPE:
-	          return "Suspense";
-	        case REACT_SUSPENSE_LIST_TYPE:
-	          return "SuspenseList";
-	        case REACT_ACTIVITY_TYPE:
-	          return "Activity";
-	      }
-	      if ("object" === typeof type)
-	        switch (
-	          ("number" === typeof type.tag &&
-	            console.error(
-	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-	            ),
-	          type.$$typeof)
-	        ) {
-	          case REACT_PORTAL_TYPE:
-	            return "Portal";
-	          case REACT_CONTEXT_TYPE:
-	            return type.displayName || "Context";
-	          case REACT_CONSUMER_TYPE:
-	            return (type._context.displayName || "Context") + ".Consumer";
-	          case REACT_FORWARD_REF_TYPE:
-	            var innerType = type.render;
-	            type = type.displayName;
-	            type ||
-	              ((type = innerType.displayName || innerType.name || ""),
-	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
-	            return type;
-	          case REACT_MEMO_TYPE:
-	            return (
-	              (innerType = type.displayName || null),
-	              null !== innerType
-	                ? innerType
-	                : getComponentNameFromType(type.type) || "Memo"
-	            );
-	          case REACT_LAZY_TYPE:
-	            innerType = type._payload;
-	            type = type._init;
-	            try {
-	              return getComponentNameFromType(type(innerType));
-	            } catch (x) {}
-	        }
-	      return null;
-	    }
-	    function testStringCoercion(value) {
-	      return "" + value;
-	    }
-	    function checkKeyStringCoercion(value) {
-	      try {
-	        testStringCoercion(value);
-	        var JSCompiler_inline_result = !1;
-	      } catch (e) {
-	        JSCompiler_inline_result = true;
-	      }
-	      if (JSCompiler_inline_result) {
-	        JSCompiler_inline_result = console;
-	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-	        var JSCompiler_inline_result$jscomp$0 =
-	          ("function" === typeof Symbol &&
-	            Symbol.toStringTag &&
-	            value[Symbol.toStringTag]) ||
-	          value.constructor.name ||
-	          "Object";
-	        JSCompiler_temp_const.call(
-	          JSCompiler_inline_result,
-	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-	          JSCompiler_inline_result$jscomp$0
-	        );
-	        return testStringCoercion(value);
-	      }
-	    }
-	    function getTaskName(type) {
-	      if (type === REACT_FRAGMENT_TYPE) return "<>";
-	      if (
-	        "object" === typeof type &&
-	        null !== type &&
-	        type.$$typeof === REACT_LAZY_TYPE
-	      )
-	        return "<...>";
-	      try {
-	        var name = getComponentNameFromType(type);
-	        return name ? "<" + name + ">" : "<...>";
-	      } catch (x) {
-	        return "<...>";
-	      }
-	    }
-	    function getOwner() {
-	      var dispatcher = ReactSharedInternals.A;
-	      return null === dispatcher ? null : dispatcher.getOwner();
-	    }
-	    function UnknownOwner() {
-	      return Error("react-stack-top-frame");
-	    }
-	    function hasValidKey(config) {
-	      if (hasOwnProperty.call(config, "key")) {
-	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-	        if (getter && getter.isReactWarning) return false;
-	      }
-	      return void 0 !== config.key;
-	    }
-	    function defineKeyPropWarningGetter(props, displayName) {
-	      function warnAboutAccessingKey() {
-	        specialPropKeyWarningShown ||
-	          ((specialPropKeyWarningShown = true),
-	          console.error(
-	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-	            displayName
-	          ));
-	      }
-	      warnAboutAccessingKey.isReactWarning = true;
-	      Object.defineProperty(props, "key", {
-	        get: warnAboutAccessingKey,
-	        configurable: true
-	      });
-	    }
-	    function elementRefGetterWithDeprecationWarning() {
-	      var componentName = getComponentNameFromType(this.type);
-	      didWarnAboutElementRef[componentName] ||
-	        ((didWarnAboutElementRef[componentName] = true),
-	        console.error(
-	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-	        ));
-	      componentName = this.props.ref;
-	      return void 0 !== componentName ? componentName : null;
-	    }
-	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
-	      var refProp = props.ref;
-	      type = {
-	        $$typeof: REACT_ELEMENT_TYPE,
-	        type: type,
-	        key: key,
-	        props: props,
-	        _owner: owner
-	      };
-	      null !== (void 0 !== refProp ? refProp : null)
-	        ? Object.defineProperty(type, "ref", {
-	            enumerable: false,
-	            get: elementRefGetterWithDeprecationWarning
-	          })
-	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-	      type._store = {};
-	      Object.defineProperty(type._store, "validated", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: 0
-	      });
-	      Object.defineProperty(type, "_debugInfo", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: null
-	      });
-	      Object.defineProperty(type, "_debugStack", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugStack
-	      });
-	      Object.defineProperty(type, "_debugTask", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugTask
-	      });
-	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-	      return type;
-	    }
-	    function jsxDEVImpl(
-	      type,
-	      config,
-	      maybeKey,
-	      isStaticChildren,
-	      debugStack,
-	      debugTask
-	    ) {
-	      var children = config.children;
-	      if (void 0 !== children)
-	        if (isStaticChildren)
-	          if (isArrayImpl(children)) {
-	            for (
-	              isStaticChildren = 0;
-	              isStaticChildren < children.length;
-	              isStaticChildren++
-	            )
-	              validateChildKeys(children[isStaticChildren]);
-	            Object.freeze && Object.freeze(children);
-	          } else
-	            console.error(
-	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-	            );
-	        else validateChildKeys(children);
-	      if (hasOwnProperty.call(config, "key")) {
-	        children = getComponentNameFromType(type);
-	        var keys = Object.keys(config).filter(function (k) {
-	          return "key" !== k;
-	        });
-	        isStaticChildren =
-	          0 < keys.length
-	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
-	            : "{key: someKey}";
-	        didWarnAboutKeySpread[children + isStaticChildren] ||
-	          ((keys =
-	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
-	          console.error(
-	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-	            isStaticChildren,
-	            children,
-	            keys,
-	            children
-	          ),
-	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
-	      }
-	      children = null;
-	      void 0 !== maybeKey &&
-	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
-	      hasValidKey(config) &&
-	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
-	      if ("key" in config) {
-	        maybeKey = {};
-	        for (var propName in config)
-	          "key" !== propName && (maybeKey[propName] = config[propName]);
-	      } else maybeKey = config;
-	      children &&
-	        defineKeyPropWarningGetter(
-	          maybeKey,
-	          "function" === typeof type
-	            ? type.displayName || type.name || "Unknown"
-	            : type
-	        );
-	      return ReactElement(
-	        type,
-	        children,
-	        maybeKey,
-	        getOwner(),
-	        debugStack,
-	        debugTask
-	      );
-	    }
-	    function validateChildKeys(node) {
-	      isValidElement(node)
-	        ? node._store && (node._store.validated = 1)
-	        : "object" === typeof node &&
-	          null !== node &&
-	          node.$$typeof === REACT_LAZY_TYPE &&
-	          ("fulfilled" === node._payload.status
-	            ? isValidElement(node._payload.value) &&
-	              node._payload.value._store &&
-	              (node._payload.value._store.validated = 1)
-	            : node._store && (node._store.validated = 1));
-	    }
-	    function isValidElement(object) {
-	      return (
-	        "object" === typeof object &&
-	        null !== object &&
-	        object.$$typeof === REACT_ELEMENT_TYPE
-	      );
-	    }
-	    var React$1 = React,
-	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
-	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
-	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-	      ReactSharedInternals =
-	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-	      hasOwnProperty = Object.prototype.hasOwnProperty,
-	      isArrayImpl = Array.isArray,
-	      createTask = console.createTask
-	        ? console.createTask
-	        : function () {
-	            return null;
-	          };
-	    React$1 = {
-	      react_stack_bottom_frame: function (callStackForError) {
-	        return callStackForError();
-	      }
-	    };
-	    var specialPropKeyWarningShown;
-	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
-	      React$1,
-	      UnknownOwner
-	    )();
-	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-	    var didWarnAboutKeySpread = {};
-	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        false,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        true,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	  })();
-	return reactJsxRuntime_development;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
-}
-
-var jsxRuntimeExports = jsxRuntime.exports;
-
 /**
  * Detect sections from WordPress blocks
  * Sections are defined by core/group blocks (with or without alignment)
- * Sub-sections are core/columns blocks inside groups
+ * Blocks that aren't in groups are wrapped in implicit sections
  */
 function detectSections(blocks) {
     const sections = [];
     let sectionIndex = 0;
+    let currentNonGroupBlocks = [];
     for (const block of blocks) {
         // core/group blocks are sections
         if (block.name === 'core/group') {
+            // If we have accumulated non-group blocks, create a section for them first
+            if (currentNonGroupBlocks.length > 0) {
+                sections.push({
+                    id: `section-${sectionIndex}`,
+                    type: 'section',
+                    block: {
+                        name: 'core/group',
+                        attributes: {},
+                        innerBlocks: currentNonGroupBlocks,
+                    },
+                    blocks: currentNonGroupBlocks,
+                    index: sectionIndex,
+                });
+                sectionIndex++;
+                currentNonGroupBlocks = [];
+            }
+            // Create section for this group
             const attrs = block.attributes || {};
             const className = attrs.className;
             const customId = attrs.id;
@@ -443,6 +47,39 @@ function detectSections(blocks) {
             });
             sectionIndex++;
         }
+        else {
+            // Accumulate non-group blocks to wrap in a section later
+            currentNonGroupBlocks.push(block);
+        }
+    }
+    // If there are remaining non-group blocks, create a section for them
+    if (currentNonGroupBlocks.length > 0) {
+        sections.push({
+            id: `section-${sectionIndex}`,
+            type: 'section',
+            block: {
+                name: 'core/group',
+                attributes: {},
+                innerBlocks: currentNonGroupBlocks,
+            },
+            blocks: currentNonGroupBlocks,
+            index: sectionIndex,
+        });
+    }
+    // If no sections were created (no groups and no other blocks), create an empty section
+    // This shouldn't happen, but handle it gracefully
+    if (sections.length === 0 && blocks.length === 0) {
+        sections.push({
+            id: 'section-0',
+            type: 'section',
+            block: {
+                name: 'core/group',
+                attributes: {},
+                innerBlocks: [],
+            },
+            blocks: [],
+            index: 0,
+        });
     }
     return sections;
 }
@@ -534,6 +171,12 @@ function selectBlockRenderer(block) {
     }
 }
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const BlockText = ({ block, className }) => {
     const attrs = block.attributes || {};
     const content = (attrs.content || attrs.text || '');
@@ -551,9 +194,15 @@ const BlockText = ({ block, className }) => {
         style.fontSize = `calc(1rem * var(--dstyler-font-scale) * ${attrs.level || 2})`;
         style.fontWeight = 'bold';
     }
-    return (jsxRuntimeExports.jsx(Tag, { className: className, style: style, dangerouslySetInnerHTML: { __html: content } }));
+    return (React.createElement(Tag, { className: className, style: style, dangerouslySetInnerHTML: { __html: content } }));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const BlockImage = ({ block, className }) => {
     const attrs = block.attributes || {};
     const url = (attrs.url || attrs.sourceUrl || '');
@@ -562,7 +211,7 @@ const BlockImage = ({ block, className }) => {
     const height = attrs.height;
     if (!url)
         return null;
-    return (jsxRuntimeExports.jsx("img", { src: url, alt: alt, width: width, height: height, className: className, style: {
+    return (React.createElement("img", { src: url, alt: alt, width: width, height: height, className: className, style: {
             maxWidth: '100%',
             height: 'auto',
             marginBottom: 'var(--dstyler-spacing-md)',
@@ -570,6 +219,12 @@ const BlockImage = ({ block, className }) => {
         }, loading: "lazy" }));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const BlockButton = ({ block, className }) => {
     const attrs = block.attributes || {};
     const text = (attrs.text || attrs.label || 'Button');
@@ -577,7 +232,7 @@ const BlockButton = ({ block, className }) => {
     const isExternal = typeof window !== 'undefined'
         ? url.startsWith('http') && !url.includes(window.location.hostname)
         : url.startsWith('http');
-    return (jsxRuntimeExports.jsx("a", { href: url, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, className: className, style: {
+    return (React.createElement("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)',
@@ -591,19 +246,31 @@ const BlockButton = ({ block, className }) => {
             e.currentTarget.style.opacity = '0.9';
         }, onMouseLeave: (e) => {
             e.currentTarget.style.opacity = '1';
-        }, children: text }));
+        } }, text));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const BlockForm = ({ block, className }) => {
     const attrs = block.attributes || {};
     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
-    return (jsxRuntimeExports.jsx("div", { className: className, style: {
+    return (React.createElement("div", { className: className, style: {
             marginBottom: 'var(--dstyler-spacing-lg)',
         }, dangerouslySetInnerHTML: { __html: content } }));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 /**
  * AutoBlock - Automatically selects and renders the appropriate block renderer
  *
@@ -612,28 +279,51 @@ const BlockForm = ({ block, className }) => {
  * 2. Use dstyler's built-in block renderers
  */
 const AutoBlock = ({ block, registry, className }) => {
+    // Recursively render innerBlocks if they exist
+    const renderInnerBlocks = () => {
+        if (!block.innerBlocks || block.innerBlocks.length === 0) {
+            return undefined;
+        }
+        if (registry) {
+            // Use registry to render innerBlocks recursively
+            return block.innerBlocks.map((innerBlock, index) => (React.createElement(AutoBlock, { key: `${innerBlock.name}-${index}`, block: innerBlock, registry: registry })));
+        }
+        // Fallback: use dstyler's renderers
+        return block.innerBlocks.map((innerBlock, index) => (React.createElement(AutoBlock, { key: `${innerBlock.name}-${index}`, block: innerBlock })));
+    };
+    const children = renderInnerBlocks();
     // If registry is provided, use it for rendering (integrates with wparser)
     if (registry && registry.renderers[block.name]) {
         const Renderer = registry.renderers[block.name];
-        return jsxRuntimeExports.jsx(Renderer, { block: block, context: { registry } });
+        return React.createElement(Renderer, { block: block, children: children, context: { registry } });
     }
     // Otherwise, use dstyler's block renderers
     const rendererName = selectBlockRenderer(block);
     switch (rendererName) {
         case 'BlockText':
-            return jsxRuntimeExports.jsx(BlockText, { block: block, className: className });
+            return React.createElement(BlockText, { block: block, className: className });
         case 'BlockImage':
-            return jsxRuntimeExports.jsx(BlockImage, { block: block, className: className });
+            return React.createElement(BlockImage, { block: block, className: className });
         case 'BlockButton':
-            return jsxRuntimeExports.jsx(BlockButton, { block: block, className: className });
+            return React.createElement(BlockButton, { block: block, className: className });
         case 'BlockForm':
-            return jsxRuntimeExports.jsx(BlockForm, { block: block, className: className });
+            return React.createElement(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)] }) }));
+            return (React.createElement("div", { style: { marginBottom: 'var(--dstyler-spacing-md)' } },
+                React.createElement("pre", { style: { fontSize: '0.875rem', color: '#666' } },
+                    block.name,
+                    ": ",
+                    JSON.stringify(block.attributes, null, 2))));
     }
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const SectionBase = ({ section, children }) => {
     const style = section.style || 'default';
     const bgColor = `var(--dstyler-color-${style})`;
@@ -642,15 +332,22 @@ const SectionBase = ({ section, children }) => {
         `dstyler-section-${style}`,
         section.customClass,
     ].filter(Boolean).join(' ');
-    return (jsxRuntimeExports.jsx("section", { className: className, id: section.customId, style: {
+    return (React.createElement("section", { className: className, id: section.customId, style: {
             backgroundColor: bgColor,
             padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
-        }, children: jsxRuntimeExports.jsx("div", { style: {
+        } },
+        React.createElement("div", { style: {
                 maxWidth: 'var(--dstyler-container-max-width, 1200px)',
                 margin: '0 auto',
-            }, children: children }) }));
+            } }, children)));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const SectionWave = ({ section, children, waveTop = true, waveBottom = true, }) => {
     const style = section.style || 'default';
     const bgColor = `var(--dstyler-color-${style})`;
@@ -661,23 +358,34 @@ const SectionWave = ({ section, children, waveTop = true, waveBottom = true, })
         section.customClass,
     ].filter(Boolean).join(' ');
     // Wave SVG
-    const waveSvg = (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 1440 120", preserveAspectRatio: "none", style: {
+    const waveSvg = (React.createElement("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: {
+        } },
+        React.createElement("path", { d: "M0,60 C240,0 480,120 720,60 C960,0 1200,120 1440,60 L1440,120 L0,120 Z" })));
+    return (React.createElement("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 }))] }));
+        } },
+        waveTop && React.createElement("div", { style: { marginTop: '-1px' } }, waveSvg),
+        React.createElement("div", { style: {
+                padding: 'var(--dstyler-spacing-xl) var(--dstyler-spacing-md)',
+            } },
+            React.createElement("div", { style: {
+                    maxWidth: 'var(--dstyler-container-max-width, 1200px)',
+                    margin: '0 auto',
+                } }, children)),
+        waveBottom && (React.createElement("div", { style: { marginBottom: '-1px', transform: 'rotate(180deg)' } }, waveSvg))));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const HeroDefault = ({ section, children }) => {
     const style = section.style || 'default';
     const bgColor = `var(--dstyler-color-${style})`;
@@ -687,20 +395,27 @@ const HeroDefault = ({ section, children }) => {
         `dstyler-hero-${style}`,
         section.customClass,
     ].filter(Boolean).join(' ');
-    return (jsxRuntimeExports.jsx("section", { className: className, id: section.customId, style: {
+    return (React.createElement("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: {
+        } },
+        React.createElement("div", { style: {
                 maxWidth: 'var(--dstyler-container-max-width, 1200px)',
                 margin: '0 auto',
                 textAlign: 'center',
-            }, children: children }) }));
+            } }, children)));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 const FooterMinimal = ({ section, children }) => {
     const style = section.style || 'default';
     const bgColor = `var(--dstyler-color-${style})`;
@@ -710,19 +425,26 @@ const FooterMinimal = ({ section, children }) => {
         `dstyler-footer-${style}`,
         section.customClass,
     ].filter(Boolean).join(' ');
-    return (jsxRuntimeExports.jsx("footer", { className: className, id: section.customId, style: {
+    return (React.createElement("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: {
+        } },
+        React.createElement("div", { style: {
                 maxWidth: 'var(--dstyler-container-max-width, 1200px)',
                 margin: '0 auto',
                 textAlign: 'center',
                 fontSize: '0.875rem',
                 color: 'var(--dstyler-color-text)',
-            }, children: children }) }));
+            } }, children)));
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 /**
  * AutoSection - Automatically selects and renders the appropriate section template
  */
@@ -732,10 +454,10 @@ const AutoSection = ({ section, registry }) => {
     const renderBlocks = () => {
         if (registry) {
             // Use registry for block rendering (integrates with wparser)
-            return section.blocks.map((block, index) => (jsxRuntimeExports.jsx(AutoBlock, { block: block, registry: registry }, `${block.name}-${index}`)));
+            return section.blocks.map((block, index) => (React.createElement(AutoBlock, { key: `${block.name}-${index}`, block: block, registry: registry })));
         }
         // Fallback to simple block rendering
-        return section.blocks.map((block, index) => (jsxRuntimeExports.jsx(AutoBlock, { block: block }, `${block.name}-${index}`)));
+        return section.blocks.map((block, index) => (React.createElement(AutoBlock, { key: `${block.name}-${index}`, block: block })));
     };
     // Select template component
     switch (templateName) {
@@ -743,17 +465,23 @@ const AutoSection = ({ section, registry }) => {
             const className = section.customClass?.toLowerCase() || '';
             const waveTop = className.includes('wave-top') || !className.includes('wave-bottom');
             const waveBottom = className.includes('wave-bottom') || !className.includes('wave-top');
-            return (jsxRuntimeExports.jsx(SectionWave, { section: section, waveTop: waveTop, waveBottom: waveBottom, children: renderBlocks() }));
+            return (React.createElement(SectionWave, { section: section, waveTop: waveTop, waveBottom: waveBottom }, renderBlocks()));
         }
         case 'HeroDefault':
-            return jsxRuntimeExports.jsx(HeroDefault, { section: section, children: renderBlocks() });
+            return React.createElement(HeroDefault, { section: section }, renderBlocks());
         case 'FooterMinimal':
-            return jsxRuntimeExports.jsx(FooterMinimal, { section: section, children: renderBlocks() });
+            return React.createElement(FooterMinimal, { section: section }, renderBlocks());
         default:
-            return jsxRuntimeExports.jsx(SectionBase, { section: section, children: renderBlocks() });
+            return React.createElement(SectionBase, { section: section }, renderBlocks());
     }
 };
 
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
 /**
  * StyledPage - Main entry point for dstyler
  *
@@ -774,7 +502,7 @@ const StyledPage = ({ page, registry }) => {
             style,
         };
     });
-    return (jsxRuntimeExports.jsx(React.Fragment, { children: styledSections.map((section) => (jsxRuntimeExports.jsx(AutoSection, { section: section, registry: registry }, section.id))) }));
+    return (React.createElement(React.Fragment, null, styledSections.map((section) => (React.createElement(AutoSection, { key: section.id, section: section, registry: registry })))));
 };
 
 const defaultTokens = {