@lowdefy/blocks-basic 0.0.0-experimental-20260324092624 → 0.0.0-experimental-20260324100109

package/dist/blocks/Anchor/Anchor.js

@@ -14,20 +14,19 @@
   limitations under the License.
 */ import React from 'react';
 import { get } from '@lowdefy/helpers';
-import { withBlockDefaults } from '@lowdefy/block-utils';
-const AnchorBlock = ({ blockId, classNames, events, components: { Icon, Link, ShortcutBadge }, methods, properties, styles })=>{
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const AnchorBlock = ({ blockId, events, components: { Icon, Link }, methods, properties })=>{
     const disabled = properties.disabled || get(events, 'onClick.loading');
     const { icon, title, ...linkProperties } = properties;
     return /*#__PURE__*/ React.createElement(Link, {
         id: blockId,
-        className: classNames?.element,
-        style: {
-            ...disabled ? {
+        className: methods.makeCssClass([
+            properties.style,
+            disabled && {
                 color: '#BEBEBE',
                 cursor: 'not-allowed'
-            } : {},
-            ...styles?.element
-        },
+            }
+        ]),
         disabled: disabled,
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
@@ -35,22 +34,19 @@ const AnchorBlock = ({ blockId, classNames, events, components: { Icon, Link, Sh
         ...linkProperties
     }, (defaultTitle)=>/*#__PURE__*/ React.createElement(React.Fragment, null, icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
-            classNames: {
-                element: classNames?.icon
-            },
             events: events,
             properties: get(events, 'onClick.loading') ? {
                 name: 'AiOutlineLoading3Quarters',
                 spin: true
-            } : icon,
-            styles: {
-                element: {
-                    marginRight: 4,
-                    ...styles?.icon
-                }
-            }
-        }), title || defaultTitle, /*#__PURE__*/ React.createElement(ShortcutBadge, {
-            shortcut: events.onClick?.shortcut
-        })));
+            } : icon
+        }), title || defaultTitle));
+};
+AnchorBlock.defaultProps = blockDefaultProps;
+AnchorBlock.meta = {
+    category: 'display',
+    icons: [
+        'AiOutlineLoading3Quarters'
+    ],
+    styles: []
 };
-export default withBlockDefaults(AnchorBlock);
+export default AnchorBlock;

package/dist/blocks/Anchor/{meta.js → schema.js}

@@ -13,18 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
-    icons: [
-        'AiOutlineLoading3Quarters'
-    ],
-    valueType: null,
-    cssKeys: {
-        element: 'The anchor element.',
-        icon: 'The icon in the Anchor.'
-    },
-    events: {
-        onClick: 'Called when Anchor is clicked.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -102,10 +91,27 @@
                 default: false,
                 description: 'Disable scrolling to the top of the page after page transition. Can only be used with pageId link and newTab false.'
             },
+            style: {
+                type: 'object',
+                description: 'Css style object to applied to anchor.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             title: {
                 type: 'string',
                 description: 'Text to display in the anchor.'
             }
         }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            onClick: {
+                type: 'array',
+                description: 'Called when Anchor is clicked.'
+            }
+        }
     }
 };

package/dist/blocks/Anchor/schema.json

@@ -0,0 +1,100 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "ariaLabel": {
+        "type": "string",
+        "description": "Arial-label to apply to link tag."
+      },
+      "back": {
+        "type": "boolean",
+        "description": "When the link is clicked, trigger the browser back."
+      },
+      "home": {
+        "type": "boolean",
+        "description": "When the link is clicked, route to the home page."
+      },
+      "input": {
+        "type": "object",
+        "description": "When the link is clicked, pass data as the input object to the next Lowdefy page.  Can only be used with pageId link and newTab false.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "urlQuery": {
+        "type": "object",
+        "description": "When the link is clicked, pass data as a url query to the next page.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable the anchor if true."
+      },
+      "icon": {
+        "type": ["string", "object"],
+        "description": "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block for anchor icon.",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "pageId": {
+        "type": "string",
+        "description": "When the link is clicked, route to the provided Lowdefy page."
+      },
+      "href": {
+        "type": "string",
+        "description": "The href to link to when the anchor link is clicked."
+      },
+      "url": {
+        "type": "string",
+        "description": "External url to link to when the anchor link is clicked."
+      },
+      "rel": {
+        "type": "string",
+        "default": "noopener noreferrer",
+        "description": "The relationship of the linked URL as space-separated link types."
+      },
+      "newTab": {
+        "type": "boolean",
+        "default": false,
+        "description": "Open link in a new tab when the anchor link is clicked."
+      },
+      "replace": {
+        "type": "boolean",
+        "default": false,
+        "description": "Prevent adding a new entry into browser history by replacing the url instead of pushing into history. Can only be used with pageId link and newTab false."
+      },
+      "scroll": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable scrolling to the top of the page after page transition. Can only be used with pageId link and newTab false."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to anchor.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "title": {
+        "type": "string",
+        "description": "Text to display in the anchor."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClick": {
+        "type": "array",
+        "description": "Called when Anchor is clicked."
+      }
+    }
+  }
+}

package/dist/blocks/Box/Box.js

@@ -13,8 +13,8 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
-const Box = ({ blockId, classNames, content, events, methods, properties, styles })=>{
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const Box = ({ blockId, content, events, methods, properties })=>{
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         "data-testid": blockId,
@@ -24,12 +24,19 @@ const Box = ({ blockId, classNames, content, events, methods, properties, styles
         onPaste: ()=>methods.triggerEvent({
                 name: 'onPaste'
             }),
-        className: classNames?.element,
-        style: {
-            outline: 'none',
-            cursor: events.onClick && 'pointer',
-            ...styles?.element
-        }
+        className: methods.makeCssClass([
+            {
+                outline: 'none',
+                cursor: events.onClick && 'pointer'
+            },
+            properties.style
+        ])
     }, properties.content || content.content && content.content());
 };
-export default withBlockDefaults(Box);
+Box.defaultProps = blockDefaultProps;
+Box.meta = {
+    category: 'container',
+    icons: [],
+    styles: []
+};
+export default Box;

package/dist/blocks/Box/{meta.js → schema.js}

@@ -13,16 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'container',
-    icons: [],
-    valueType: null,
-    cssKeys: {
-        element: 'The Box element.'
-    },
-    events: {
-        onClick: 'Trigger actions when the Box is clicked.',
-        onPaste: 'Trigger actions when the element is focused and a paste event is triggered.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -30,6 +21,27 @@
             content: {
                 type: 'string',
                 description: 'Box content string. Overrides the "content" content area.'
+            },
+            style: {
+                type: 'object',
+                description: 'Css style object to apply to Box div.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            }
+        }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            onClick: {
+                type: 'array',
+                description: 'Trigger actions when the Box is clicked.'
+            },
+            onPaste: {
+                type: 'array',
+                description: 'Trigger actions when the element is focused and a paste event is triggered.'
             }
         }
     }

package/dist/blocks/Box/schema.json

@@ -0,0 +1,34 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "content": {
+        "type": "string",
+        "description": "Box content string. Overrides the \"content\" content area."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to Box div.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClick": {
+        "type": "array",
+        "description": "Trigger actions when the Box is clicked."
+      },
+      "onPaste": {
+        "type": "array",
+        "description": "Trigger actions when the element is focused and a paste event is triggered."
+      }
+    }
+  }
+}

package/dist/blocks/DangerousHtml/DangerousHtml.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import React from 'react';
 import DOMPurify from 'dompurify';
-import { withBlockDefaults } from '@lowdefy/block-utils';
+import { blockDefaultProps } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 let DangerousHtml = class DangerousHtml extends React.Component {
     componentDidMount() {
@@ -26,7 +26,7 @@ let DangerousHtml = class DangerousHtml extends React.Component {
         this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
     }
     render() {
-        const { blockId, classNames, styles } = this.props;
+        const { blockId, properties, methods } = this.props;
         return /*#__PURE__*/ React.createElement("div", {
             id: blockId,
             "data-testid": blockId,
@@ -35,8 +35,7 @@ let DangerousHtml = class DangerousHtml extends React.Component {
                     this.div = el;
                 }
             },
-            className: classNames?.element,
-            style: styles?.element
+            className: methods.makeCssClass(properties.style)
         });
     }
     constructor(props){
@@ -48,4 +47,10 @@ let DangerousHtml = class DangerousHtml extends React.Component {
         this.DOMPurifyOptions = props.properties.DOMPurifyOptions;
     }
 };
-export default withBlockDefaults(DangerousHtml);
+DangerousHtml.defaultProps = blockDefaultProps;
+DangerousHtml.meta = {
+    category: 'display',
+    icons: [],
+    styles: []
+};
+export default DangerousHtml;

package/dist/blocks/DangerousHtml/{meta.js → schema.js}

@@ -13,12 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
-    icons: [],
-    valueType: null,
-    cssKeys: {
-        element: 'The DangerousHtml element.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -36,6 +31,13 @@
                 docs: {
                     displayType: 'yaml'
                 }
+            },
+            style: {
+                type: 'object',
+                description: 'Css style object to apply to Html div.',
+                docs: {
+                    displayType: 'yaml'
+                }
             }
         }
     }

package/dist/blocks/DangerousHtml/schema.json

@@ -0,0 +1,30 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "html": {
+        "type": "string",
+        "description": "Content to be rendered as Html.",
+        "docs": {
+          "displayType": "text-area"
+        }
+      },
+      "DOMPurifyOptions": {
+        "type": "object",
+        "description": "Customize DOMPurify options. Options are only applied when the block is mounted, thus any parsed settings is only applied at first render.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to Html div.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  }
+}

package/dist/blocks/Html/Html.js

@@ -13,14 +13,19 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults, HtmlComponent } from '@lowdefy/block-utils';
-const HtmlBlock = ({ blockId, classNames, events, properties, methods, styles })=>/*#__PURE__*/ React.createElement(HtmlComponent, {
+import { blockDefaultProps, HtmlComponent } from '@lowdefy/block-utils';
+const HtmlBlock = ({ blockId, events, properties, methods })=>/*#__PURE__*/ React.createElement(HtmlComponent, {
         div: true,
         events: events,
         html: properties.html,
         id: blockId,
         methods: methods,
-        className: classNames?.element,
-        style: styles?.element
+        style: properties.style
     });
-export default withBlockDefaults(HtmlBlock);
+HtmlBlock.defaultProps = blockDefaultProps;
+HtmlBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: []
+};
+export default HtmlBlock;

package/dist/blocks/Html/{meta.js → schema.js}

@@ -13,15 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
-    icons: [],
-    valueType: null,
-    cssKeys: {
-        element: 'The Html element.'
-    },
-    events: {
-        onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -32,6 +24,23 @@
                 docs: {
                     displayType: 'text-area'
                 }
+            },
+            style: {
+                type: 'object',
+                description: 'Css style object to apply to Html div.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            }
+        }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            onTextSelection: {
+                type: 'array',
+                description: 'Trigger action when text is selected and pass selected text to the event object.'
             }
         }
     }

package/dist/blocks/Html/schema.json

@@ -0,0 +1,33 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "html": {
+        "type": "string",
+        "description": "Content to be rendered as Html.",
+        "docs": {
+          "displayType": "text-area"
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to Html div.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onTextSelection": {
+        "type": "array",
+        "description": "Trigger action when text is selected and pass selected text to the event object."
+      }
+    }
+  }
+}

package/dist/blocks/Icon/Icon.js

@@ -13,6 +13,12 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
+import { blockDefaultProps } from '@lowdefy/block-utils';
 const IconBlock = ({ components: { Icon }, ...props })=>/*#__PURE__*/ React.createElement(Icon, props);
-export default withBlockDefaults(IconBlock);
+IconBlock.defaultProps = blockDefaultProps;
+IconBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: []
+};
+export default IconBlock;

package/dist/blocks/Icon/{meta.js → schema.js}

@@ -13,15 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
-    icons: [],
-    valueType: null,
-    cssKeys: {
-        element: 'The Icon element.'
-    },
-    events: {
-        onClick: 'Trigger actions when icon is clicked.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -61,11 +53,28 @@
                 type: 'string',
                 description: 'Icon hover title for accessibility.'
             },
+            style: {
+                type: 'object',
+                description: 'CSS style object.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             disableLoadingIcon: {
                 type: 'boolean',
                 default: false,
                 description: "While loading after the icon has been clicked, don't render the loading icon."
             }
         }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            onClick: {
+                type: 'array',
+                description: 'Trigger actions when icon is clicked.'
+            }
+        }
     }
 };

package/dist/blocks/Icon/schema.json

@@ -0,0 +1,63 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "color": {
+        "type": "string",
+        "description": "Primary icon color.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "name": {
+        "type": "string",
+        "default": "AiOutlineCloseCircle",
+        "description": "Name of icon to be displayed."
+      },
+      "rotate": {
+        "type": "number",
+        "description": "Number of degrees to rotate the icon."
+      },
+      "size": {
+        "type": ["string", "number"],
+        "description": "Size of the icon.",
+        "docs": {
+          "displayType": "number"
+        }
+      },
+      "spin": {
+        "type": "boolean",
+        "default": false,
+        "description": "Continuously spin icon with animation."
+      },
+      "title": {
+        "type": "string",
+        "description": "Icon hover title for accessibility."
+      },
+      "style": {
+        "type": "object",
+        "description": "CSS style object.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "disableLoadingIcon": {
+        "type": "boolean",
+        "default": false,
+        "description": "While loading after the icon has been clicked, don't render the loading icon."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClick": {
+        "type": "array",
+        "description": "Trigger actions when icon is clicked."
+      }
+    }
+  }
+}

package/dist/blocks/Img/Img.js

@@ -13,21 +13,29 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
-const ImgBlock = ({ blockId, classNames, events, properties, methods, styles })=>{
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const ImgBlock = ({ blockId, events, properties, methods })=>{
+    const { style, ...allProps } = properties;
     return /*#__PURE__*/ React.createElement("img", {
-        ...properties,
+        ...allProps,
         id: blockId,
         "data-testid": blockId,
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        className: classNames?.element,
-        style: {
-            outline: 'none',
-            cursor: events.onClick && 'pointer',
-            ...styles?.element
-        }
+        className: methods.makeCssClass([
+            {
+                outline: 'none',
+                cursor: events.onClick && 'pointer'
+            },
+            style
+        ])
     });
 };
-export default withBlockDefaults(ImgBlock);
+ImgBlock.defaultProps = blockDefaultProps;
+ImgBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: []
+};
+export default ImgBlock;

package/dist/blocks/Img/{meta.js → schema.js}

@@ -13,12 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
-    icons: [],
-    valueType: null,
-    cssKeys: {
-        element: 'The Img element.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -74,6 +69,13 @@
                     displayType: 'text-area'
                 }
             },
+            style: {
+                type: 'object',
+                description: 'Css style object to applied to the image.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             width: {
                 type: 'number',
                 description: 'Width of the image.'

package/dist/blocks/Img/schema.json

@@ -0,0 +1,59 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "required": ["src"],
+    "properties": {
+      "src": {
+        "type": "string",
+        "description": "The image URL."
+      },
+      "alt": {
+        "type": "string",
+        "description": "Alternative text description of the image."
+      },
+      "crossOrigin": {
+        "type": "string",
+        "enum": ["anonymous", "use-credentials"],
+        "description": "Indicates if the fetching of the image must be done using a CORS request."
+      },
+      "decoding": {
+        "type": "string",
+        "enum": ["sync", "async", "auto"],
+        "description": "An image decoding hint to the browser. Sync for atomic presentation with other content, async,  to reduce delay in presenting other content and auto leave to browser to decide."
+      },
+      "height": {
+        "type": "number",
+        "description": "Height of the image."
+      },
+      "loading": {
+        "type": "string",
+        "enum": ["eager", "lazy"],
+        "description": "How the browser should load the image. Eager loads the image immediately, lazy, defers loading until the image it reaches a calculated distance from the viewport, as defined by the browser."
+      },
+      "sizes": {
+        "type": "string",
+        "description": "Indicating a set of source sizes of strings separated by commas."
+      },
+      "srcSet": {
+        "type": "string",
+        "description": "Possible image sources for the user agent to use, strings separated by commas.",
+        "docs": {
+          "displayType": "text-area"
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to the image.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "width": {
+        "type": "number",
+        "description": "Width of the image."
+      }
+    }
+  }
+}

package/dist/blocks/List/List.js

@@ -13,9 +13,9 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useEffect } from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
+import { blockDefaultProps } from '@lowdefy/block-utils';
 import Box from '../Box/Box.js';
-const List = ({ blockId, classNames, events, list, methods, properties, styles })=>{
+const List = ({ blockId, events, list, methods, properties })=>{
     useEffect(()=>{
         methods.registerMethod('pushItem', methods.pushItem);
         methods.registerMethod('unshiftItem', methods.unshiftItem);
@@ -26,17 +26,15 @@ const List = ({ blockId, classNames, events, list, methods, properties, styles }
     return /*#__PURE__*/ React.createElement(Box, {
         blockId: blockId,
         events: events,
-        properties: {},
-        classNames: classNames,
-        styles: {
-            element: {
+        properties: {
+            style: {
                 ...properties.direction ? {
                     display: 'flex',
                     flexDirection: properties.direction,
                     flexWrap: properties.wrap ? properties.wrap : 'wrap',
                     overflow: properties.scroll ? 'auto' : 'visible'
                 } : {},
-                ...styles?.element
+                ...properties.style
             }
         },
         methods: methods,
@@ -45,4 +43,11 @@ const List = ({ blockId, classNames, events, list, methods, properties, styles }
         }
     });
 };
-export default withBlockDefaults(List);
+List.defaultProps = blockDefaultProps;
+List.meta = {
+    category: 'list',
+    valueType: 'array',
+    icons: [],
+    styles: []
+};
+export default List;

package/dist/blocks/List/{meta.js → schema.js}

@@ -13,15 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'list',
-    icons: [],
-    valueType: 'array',
-    cssKeys: {
-        element: 'The List element.'
-    },
-    events: {
-        onClick: 'Trigger actions when the List is clicked.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -48,6 +40,23 @@
             scroll: {
                 type: 'boolean',
                 description: "Specifies whether scrolling should be applied to the List, can be true or false. Applies the 'overflow' css property to the List block - defaults to 'visible', requires List direction to be set."
+            },
+            style: {
+                type: 'object',
+                description: 'Css style object to apply to List block.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            }
+        }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            onClick: {
+                type: 'array',
+                description: 'Trigger actions when the List is clicked.'
             }
         }
     }

package/dist/blocks/List/schema.json

@@ -0,0 +1,40 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "direction": {
+        "type": "string",
+        "enum": ["row", "column", "row-reverse", "column-reverse"],
+        "description": "List content along a 'row' or down a 'column'. Applies the 'flex-direction' css property to the List block."
+      },
+      "wrap": {
+        "type": "string",
+        "enum": ["wrap", "nowrap", "wrap-reverse"],
+        "description": "Specifies wrapping style to be applied to List block as 'wrap', 'nowrap' or 'wrap-reverse'. Applies the 'flex-wrap' css property to the List block - defaults to 'wrap', requires List direction to be set."
+      },
+      "scroll": {
+        "type": "boolean",
+        "description": "Specifies whether scrolling should be applied to the List, can be true or false. Applies the 'overflow' css property to the List block - defaults to 'visible', requires List direction to be set."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to List block.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClick": {
+        "type": "array",
+        "description": "Trigger actions when the List is clicked."
+      }
+    }
+  }
+}

package/dist/blocks/Span/Span.js

@@ -13,18 +13,25 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
-const Span = ({ blockId, classNames, content, events, methods, properties, styles })=>/*#__PURE__*/ React.createElement("span", {
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const Span = ({ blockId, content, events, methods, properties })=>/*#__PURE__*/ React.createElement("span", {
         id: blockId,
         "data-testid": blockId,
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        className: classNames?.element,
-        style: {
-            outline: 'none',
-            cursor: events.onClick && 'pointer',
-            ...styles?.element
-        }
+        className: methods.makeCssClass([
+            {
+                outline: 'none',
+                cursor: events.onClick && 'pointer'
+            },
+            properties.style
+        ])
     }, properties.content || content.content && content.content());
-export default withBlockDefaults(Span);
+Span.defaultProps = blockDefaultProps;
+Span.meta = {
+    category: 'container',
+    icons: [],
+    styles: []
+};
+export default Span;

package/dist/blocks/Span/{meta.js → schema.js}

@@ -13,15 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'container',
-    icons: [],
-    valueType: null,
-    cssKeys: {
-        element: 'The Span element.'
-    },
-    events: {
-        onClick: 'Trigger actions when the Span is clicked.'
-    },
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -29,6 +21,23 @@
             content: {
                 type: 'string',
                 description: 'Span content string. Overrides the "content" content area.'
+            },
+            style: {
+                type: 'object',
+                description: 'Css style object to apply to Span div.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            }
+        }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            onClick: {
+                type: 'array',
+                description: 'Trigger actions when the Span is clicked.'
             }
         }
     }

package/dist/blocks/Span/schema.json

@@ -0,0 +1,30 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "content": {
+        "type": "string",
+        "description": "Span content string. Overrides the \"content\" content area."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to Span div.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClick": {
+        "type": "array",
+        "description": "Trigger actions when the Span is clicked."
+      }
+    }
+  }
+}

package/dist/blocks/Throw/Throw.js

@@ -13,9 +13,15 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
+import { blockDefaultProps } from '@lowdefy/block-utils';
 const Throw = ({ properties })=>{
     const message = properties.message || 'Intentional error thrown by Throw block';
     throw new Error(message);
 };
-export default withBlockDefaults(Throw);
+Throw.defaultProps = blockDefaultProps;
+Throw.meta = {
+    category: 'display',
+    icons: [],
+    styles: []
+};
+export default Throw;

package/dist/blocks/Throw/{meta.js → schema.js}

@@ -13,9 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
-    icons: [],
-    valueType: null,
+    type: 'object',
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -26,5 +24,10 @@
                 default: 'Intentional error thrown by Throw block'
             }
         }
+    },
+    events: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {}
     }
 };

package/dist/blocks/Throw/schema.json

@@ -0,0 +1,19 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "message": {
+        "type": "string",
+        "description": "Error message to throw.",
+        "default": "Intentional error thrown by Throw block"
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {}
+  }
+}

package/dist/{metas.js → schemas.js}

@@ -12,12 +12,12 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ export { default as Anchor } from './blocks/Anchor/meta.js';
-export { default as Box } from './blocks/Box/meta.js';
-export { default as DangerousHtml } from './blocks/DangerousHtml/meta.js';
-export { default as Html } from './blocks/Html/meta.js';
-export { default as Icon } from './blocks/Icon/meta.js';
-export { default as Img } from './blocks/Img/meta.js';
-export { default as List } from './blocks/List/meta.js';
-export { default as Span } from './blocks/Span/meta.js';
-export { default as Throw } from './blocks/Throw/meta.js';
+*/ export { default as Anchor } from './blocks/Anchor/schema.js';
+export { default as Box } from './blocks/Box/schema.js';
+export { default as DangerousHtml } from './blocks/DangerousHtml/schema.js';
+export { default as Html } from './blocks/Html/schema.js';
+export { default as Icon } from './blocks/Icon/schema.js';
+export { default as Img } from './blocks/Img/schema.js';
+export { default as List } from './blocks/List/schema.js';
+export { default as Span } from './blocks/Span/schema.js';
+export { default as Throw } from './blocks/Throw/schema.js';

package/dist/types.js

@@ -1,4 +1,4 @@
-/*
+/* eslint-disable import/namespace */ /*
   Copyright 2020-2026 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,6 +12,21 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ import { extractBlockTypes } from '@lowdefy/block-utils';
-import * as metas from './metas.js';
-export default extractBlockTypes(metas);
+*/ import * as blocks from './blocks.js';
+const icons = {};
+const styles = {};
+Object.keys(blocks).forEach((block)=>{
+    icons[block] = blocks[block].meta.icons ?? [];
+    styles[block] = blocks[block].meta.styles ?? [];
+});
+export default {
+    blocks: Object.keys(blocks),
+    icons,
+    styles: {
+        default: [],
+        ...styles
+    }
+}; // export default {
+ //   blocks: ['Anchor', 'Box', 'DangerousHtml', 'Html', 'Icon', 'Img', 'List', 'Span'],
+ //   styles: { default: ['style.less'], Anchor: ['blocks/Anchor/style.less']  },
+ // };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-basic",
-  "version": "0.0.0-experimental-20260324092624",
+  "version": "0.0.0-experimental-20260324100109",
   "license": "Apache-2.0",
   "description": "Basic html Lowdefy blocks.",
   "homepage": "https://lowdefy.com",
@@ -35,32 +35,32 @@
     "./*": "./dist/*",
     "./blocks": "./dist/blocks.js",
     "./e2e": "./dist/e2e.js",
-    "./metas": "./dist/metas.js",
+    "./schemas": "./dist/schemas.js",
     "./types": "./dist/types.js"
   },
   "files": [
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "0.0.0-experimental-20260324092624",
-    "@lowdefy/helpers": "0.0.0-experimental-20260324092624",
+    "@lowdefy/block-utils": "0.0.0-experimental-20260324100109",
+    "@lowdefy/helpers": "0.0.0-experimental-20260324100109",
     "dompurify": "3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260324092624",
-    "@lowdefy/e2e-utils": "0.0.0-experimental-20260324092624",
+    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260324100109",
+    "@lowdefy/e2e-utils": "0.0.0-experimental-20260324100109",
     "@playwright/test": "1.50.1",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "1.15.18",
+    "@swc/cli": "0.1.63",
+    "@swc/core": "1.3.99",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
+    "build": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && pnpm copyfiles",
     "clean": "rm -rf dist",
     "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",