@lowdefy/client 4.7.2 → 5.0.0

package/dist/Client.js

@@ -44,6 +44,7 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
         id: "lowdefy-display-message",
         key: `${config.pageConfig.id}-display-message`,
         Component: lowdefy._internal.blockComponents.Message,
+        components: lowdefy._internal.components,
         methods: {
             registerMethod: (_, method)=>{
                 lowdefy._internal.displayMessage = method;
@@ -59,10 +60,10 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
         if (!context._internal.onInitDone) return '';
         return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Head, {
             Component: Components.Head,
-            properties: context._internal.RootAreas.map[config.pageConfig.blockId].eval.properties
+            properties: context._internal.RootSlots.map[config.pageConfig.blockId].eval.properties
         }), /*#__PURE__*/ React.createElement(Block, {
-            block: context._internal.RootAreas.map[config.pageConfig.blockId],
-            Blocks: context._internal.RootAreas,
+            block: context._internal.RootSlots.map[config.pageConfig.blockId],
+            Blocks: context._internal.RootSlots,
             context: context,
             lowdefy: lowdefy,
             parentLoading: false

package/dist/Context.js

@@ -12,9 +12,20 @@
   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 React from 'react';
+*/ import React, { useEffect } from 'react';
 import getContext from '@lowdefy/engine';
+import createShortcutManager from './createShortcutManager.js';
 import MountEvents from './MountEvents.js';
+const ShortcutEffect = ({ context })=>{
+    useEffect(()=>{
+        const manager = createShortcutManager();
+        manager.init(context);
+        return ()=>manager.destroy();
+    }, [
+        context
+    ]);
+    return null;
+};
 const Context = ({ children, config, jsMap, lowdefy, resetContext })=>{
     const context = getContext({
         config,
@@ -40,7 +51,9 @@ const Context = ({ children, config, jsMap, lowdefy, resetContext })=>{
         }
     }, (loadingOnInit)=>{
         if (loadingOnInit) return '';
-        return children(context);
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ShortcutEffect, {
+            context: context
+        }), children(context));
     });
 };
 export default Context;

package/dist/DisplayMessage.js

@@ -13,13 +13,12 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { makeCssClass } from '@lowdefy/block-utils';
-const DisplayMessage = ({ Component, id, methods })=>{
+const DisplayMessage = ({ Component, components, id, methods })=>{
     return /*#__PURE__*/ React.createElement(Component, {
         blockId: id,
+        components: components,
         key: id,
         methods: {
-            makeCssClass,
             registerMethod: methods.registerMethod,
             triggerEvent: ()=>undefined
         },

package/dist/ProgressBarController.js

@@ -13,7 +13,6 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useReducer, useEffect } from 'react';
-import { makeCssClass } from '@lowdefy/block-utils';
 const initialState = {
     progress: 0,
     onMounts: 0
@@ -72,9 +71,7 @@ const ProgressBarController = ({ id, lowdefy, resetContext })=>{
         blockId: id,
         components: lowdefy._internal.components,
         menus: lowdefy.menus,
-        methods: {
-            makeCssClass
-        },
+        methods: {},
         pageId: lowdefy.pageId,
         properties: state
     });

package/dist/block/CategorySwitch.js

@@ -14,12 +14,12 @@
   limitations under the License.
 */ import React from 'react';
 import { BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import InputContainer from './InputContainer.js';
 import Container from './Container.js';
 import List from './List.js';
 import LoadingBlock from './LoadingBlock.js';
+import resolveClassNames from './resolveClassNames.js';
 const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
     if (!block.eval) return null; // TODO: check Renderer updates before eval is executed for the first time on lists. See #520
     if (block.eval.visible === false) return /*#__PURE__*/ React.createElement("div", {
@@ -29,17 +29,20 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
         }
     });
     const Component = lowdefy._internal.blockComponents[block.type];
+    const classNames = resolveClassNames(block.eval.class);
     if (loading && type.isObject(block.eval.skeleton)) {
         return /*#__PURE__*/ React.createElement(LoadingBlock, {
             blockLayout: block.eval.layout,
             blockProperties: block.eval.properties,
-            blockStyle: block.eval.style,
+            blockStyle: block.eval.style?.block,
+            blockClass: classNames,
             context: context,
             lowdefy: lowdefy,
             skeleton: block.eval.skeleton
         });
     }
-    switch(Component.meta.category){
+    const category = lowdefy._internal.blockMetas[block.type]?.category;
+    switch(category){
         case 'list':
             return /*#__PURE__*/ React.createElement(List, {
                 block: block,
@@ -61,12 +64,11 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
         case 'input':
             return /*#__PURE__*/ React.createElement(BlockLayout, {
                 id: `bl-${block.blockId}`,
-                blockStyle: block.eval.style,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
+                style: block.eval.style?.block,
+                className: classNames.block,
+                layout: block.eval.layout
             }, /*#__PURE__*/ React.createElement(Component, {
                 methods: Object.assign(block.methods, {
-                    makeCssClass,
                     registerEvent: block.registerEvent,
                     registerMethod: block.registerMethod,
                     setValue: block.setValue,
@@ -74,14 +76,16 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
                 }),
                 basePath: lowdefy.basePath,
                 blockId: block.blockId,
+                classNames: classNames,
                 components: lowdefy._internal.components,
-                events: block.eval.events,
+                events: block.eval.events ?? {},
                 key: block.blockId,
                 loading: loading,
                 menus: lowdefy.menus,
                 pageId: lowdefy.pageId,
                 properties: block.eval.properties,
                 required: block.eval.required,
+                styles: block.eval.style ?? {},
                 validation: block.eval.validation,
                 value: block.value
             }));
@@ -97,26 +101,27 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
         default:
             return /*#__PURE__*/ React.createElement(BlockLayout, {
                 id: `bl-${block.blockId}`,
-                blockStyle: block.eval.style,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
+                style: block.eval.style?.block,
+                className: classNames.block,
+                layout: block.eval.layout
             }, /*#__PURE__*/ React.createElement(Component, {
                 methods: Object.assign(block.methods, {
-                    makeCssClass,
                     registerEvent: block.registerEvent,
                     registerMethod: block.registerMethod,
                     triggerEvent: block.triggerEvent
                 }),
                 basePath: lowdefy.basePath,
                 blockId: block.blockId,
+                classNames: classNames,
                 components: lowdefy._internal.components,
-                events: block.eval.events,
+                events: block.eval.events ?? {},
                 key: block.blockId,
                 loading: loading,
                 menus: lowdefy.menus,
                 pageId: lowdefy.pageId,
                 properties: block.eval.properties,
                 required: block.eval.required,
+                styles: block.eval.style ?? {},
                 validation: block.eval.validation
             }));
     }

package/dist/block/Container.js

@@ -14,27 +14,29 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
+import { cn } from '@lowdefy/block-utils';
 import Block from './Block.js';
+import resolveClassNames from './resolveClassNames.js';
 const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
+    const classNames = resolveClassNames(block.eval.class);
     const content = {};
     // eslint-disable-next-line prefer-destructuring
-    const areas = Blocks.subAreas[block.id][0].areas;
-    Object.keys(areas).forEach((areaKey, i)=>{
-        content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                area: block.eval.areas[areaKey],
-                areaKey: areaKey,
-                areaStyle: [
-                    areaStyle,
-                    block.eval.areas[areaKey]?.style
-                ],
-                id: `ar-${block.blockId}-${areaKey}`,
-                key: `ar-${block.blockId}-${areaKey}-${i}`,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
-            }, areas[areaKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
+    const slots = Blocks.subSlots[block.id][0].slots;
+    Object.keys(slots).forEach((slotKey, i)=>{
+        content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+                area: block.eval.slots[slotKey],
+                areaKey: slotKey,
+                style: {
+                    ...block.eval.slots[slotKey]?.style,
+                    ...contentStyle
+                },
+                className: cn(block.eval.class?.[slotKey]),
+                id: `ar-${block.blockId}-${slotKey}`,
+                key: `ar-${block.blockId}-${slotKey}-${i}`,
+                layout: block.eval.layout
+            }, slots[slotKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
                     block: bl,
-                    Blocks: Blocks.subAreas[block.id][0],
+                    Blocks: Blocks.subSlots[block.id][0],
                     context: context,
                     key: `co-${bl.blockId}-${k}`,
                     lowdefy: lowdefy,
@@ -42,28 +44,29 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: block.eval.style,
+        style: block.eval.style?.block,
+        className: classNames.block,
         id: `bl-${block.blockId}`,
-        layout: block.eval.layout,
-        makeCssClass: makeCssClass
+        layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
-            makeCssClass,
             registerEvent: block.registerEvent,
             registerMethod: block.registerMethod,
             triggerEvent: block.triggerEvent
         }),
         basePath: lowdefy.basePath,
         blockId: block.blockId,
+        classNames: classNames,
         components: lowdefy._internal.components,
         content: content,
-        events: block.eval.events,
+        events: block.eval.events ?? {},
         key: block.blockId,
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
         properties: block.eval.properties,
         required: block.eval.required,
+        styles: block.eval.style ?? {},
         validation: block.eval.validation
     }));
 };

package/dist/block/InputContainer.js

@@ -14,27 +14,29 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
+import { cn } from '@lowdefy/block-utils';
 import Block from './Block.js';
+import resolveClassNames from './resolveClassNames.js';
 const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })=>{
+    const classNames = resolveClassNames(block.eval.class);
     const content = {};
     // eslint-disable-next-line prefer-destructuring
-    const areas = Blocks.subAreas[block.id][0].areas;
-    Object.keys(areas).forEach((areaKey, i)=>{
-        content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                area: block.eval.areas[areaKey],
-                areaKey: areaKey,
-                areaStyle: [
-                    areaStyle,
-                    block.eval.areas[areaKey]?.style
-                ],
-                id: `ar-${block.blockId}-${areaKey}`,
-                key: `ar-${block.blockId}-${areaKey}-${i}`,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
-            }, areas[areaKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
+    const slots = Blocks.subSlots[block.id][0].slots;
+    Object.keys(slots).forEach((slotKey, i)=>{
+        content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+                area: block.eval.slots[slotKey],
+                areaKey: slotKey,
+                style: {
+                    ...block.eval.slots[slotKey]?.style,
+                    ...contentStyle
+                },
+                className: cn(block.eval.class?.[slotKey]),
+                id: `ar-${block.blockId}-${slotKey}`,
+                key: `ar-${block.blockId}-${slotKey}-${i}`,
+                layout: block.eval.layout
+            }, slots[slotKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
                     block: bl,
-                    Blocks: Blocks.subAreas[block.id][0],
+                    Blocks: Blocks.subSlots[block.id][0],
                     context: context,
                     key: `co-${bl.blockId}-${k}`,
                     lowdefy: lowdefy,
@@ -42,13 +44,12 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: block.eval.style,
+        style: block.eval.style?.block,
+        className: classNames.block,
         id: `bl-${block.blockId}`,
-        layout: block.eval.layout,
-        makeCssClass: makeCssClass
+        layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
-            makeCssClass,
             registerEvent: block.registerEvent,
             registerMethod: block.registerMethod,
             triggerEvent: block.triggerEvent,
@@ -61,15 +62,17 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
         }),
         basePath: lowdefy.basePath,
         blockId: block.blockId,
+        classNames: classNames,
         components: lowdefy._internal.components,
         content: content,
-        events: block.eval.events,
+        events: block.eval.events ?? {},
         key: block.blockId,
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
         properties: block.eval.properties,
         required: block.eval.required,
+        styles: block.eval.style ?? {},
         validation: block.eval.validation,
         value: block.value
     }));

package/dist/block/List.js

@@ -14,25 +14,27 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
+import { cn } from '@lowdefy/block-utils';
 import Block from './Block.js';
+import resolveClassNames from './resolveClassNames.js';
 const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
+    const classNames = resolveClassNames(block.eval.class);
     const content = {};
     const contentList = [];
-    Blocks.subAreas[block.id].forEach((SBlock)=>{
-        Object.keys(SBlock.areas).forEach((areaKey)=>{
-            content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                    area: block.eval.areas[areaKey],
-                    areaKey: areaKey,
-                    areaStyle: [
-                        areaStyle,
-                        block.eval.areas[areaKey]?.style
-                    ],
-                    id: `ar-${block.blockId}-${SBlock.id}-${areaKey}`,
-                    key: `ar-${block.blockId}-${SBlock.id}-${areaKey}`,
-                    layout: block.eval.layout,
-                    makeCssClass: makeCssClass
-                }, SBlock.areas[areaKey].blocks.map((bl)=>/*#__PURE__*/ React.createElement(Block, {
+    Blocks.subSlots[block.id].forEach((SBlock)=>{
+        Object.keys(SBlock.slots).forEach((slotKey)=>{
+            content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+                    area: block.eval.slots[slotKey],
+                    areaKey: slotKey,
+                    style: {
+                        ...block.eval.slots[slotKey]?.style,
+                        ...contentStyle
+                    },
+                    className: cn(block.eval.class?.[slotKey]),
+                    id: `ar-${block.blockId}-${SBlock.id}-${slotKey}`,
+                    key: `ar-${block.blockId}-${SBlock.id}-${slotKey}`,
+                    layout: block.eval.layout
+                }, SBlock.slots[slotKey].blocks.map((bl)=>/*#__PURE__*/ React.createElement(Block, {
                         block: bl,
                         Blocks: SBlock,
                         context: context,
@@ -46,13 +48,12 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         });
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: block.eval.style,
+        style: block.eval.style?.block,
+        className: classNames.block,
         id: `bl-${block.blockId}`,
-        layout: block.eval.layout,
-        makeCssClass: makeCssClass
+        layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
-            makeCssClass,
             moveItemDown: block.moveItemDown,
             moveItemUp: block.moveItemUp,
             pushItem: block.pushItem,
@@ -64,8 +65,9 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         }),
         basePath: lowdefy.basePath,
         blockId: block.blockId,
+        classNames: classNames,
         components: lowdefy._internal.components,
-        events: block.eval.events,
+        events: block.eval.events ?? {},
         key: block.blockId,
         list: contentList,
         loading: loading,
@@ -73,6 +75,7 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         pageId: lowdefy.pageId,
         properties: block.eval.properties,
         required: block.eval.required,
+        styles: block.eval.style ?? {},
         validation: block.eval.validation
     }));
 };

package/dist/block/LoadingBlock.js

@@ -14,11 +14,9 @@
   limitations under the License.
 */ import React, { useEffect } from 'react';
 import { BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import LoadingContainer from './LoadingContainer.js';
 import LoadingList from './LoadingList.js';
 const blockMethods = {
-    makeCssClass,
     moveItemDown: ()=>{},
     moveItemUp: ()=>{},
     pushItem: ()=>{},
@@ -29,7 +27,7 @@ const blockMethods = {
     triggerEvent: ()=>{},
     unshiftItem: ()=>{}
 };
-const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, context, lowdefy, skeleton })=>{
+const LoadingBlock = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, context, lowdefy, skeleton })=>{
     let Component = lowdefy._internal.blockComponents[skeleton.type];
     useEffect(()=>{
         if (!lowdefy._internal.blockComponents[skeleton.type]) {
@@ -41,7 +39,9 @@ const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, conte
         // default to box when a skeleton block is not found - should be a basic or loader block.
         Component = lowdefy._internal.blockComponents.Box;
     }
-    switch(Component.meta.category){
+    const resolvedType = Component === lowdefy._internal.blockComponents.Box ? 'Box' : skeleton.type;
+    const category = lowdefy._internal.blockMetas[resolvedType]?.category;
+    switch(category){
         case 'list':
             return /*#__PURE__*/ React.createElement(LoadingList, {
                 blockId: blockId,
@@ -52,6 +52,7 @@ const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, conte
             });
         case 'container':
             return /*#__PURE__*/ React.createElement(LoadingContainer, {
+                blockClass: blockClass,
                 blockId: blockId,
                 blockLayout: blockLayout,
                 blockProperties: blockProperties,
@@ -63,10 +64,10 @@ const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, conte
             });
         default:
             return /*#__PURE__*/ React.createElement(BlockLayout, {
-                blockStyle: skeleton.style ?? blockStyle,
+                style: skeleton.style ?? blockStyle,
                 id: `s-bl-${blockId}-${skeleton.id}`,
                 layout: skeleton.layout ?? blockLayout,
-                makeCssClass: makeCssClass
+                className: skeleton.class ?? blockClass
             }, /*#__PURE__*/ React.createElement(Component, {
                 basePath: lowdefy.basePath,
                 blockId: blockId,

package/dist/block/LoadingContainer.js

@@ -14,24 +14,19 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import LoadingBlock from './LoadingBlock.js';
-const LoadingContainer = ({ blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
+const LoadingContainer = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
     const content = {};
     // eslint-disable-next-line prefer-destructuring
-    Object.keys(skeleton.areas).forEach((areaKey, i)=>{
-        content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                area: skeleton.areas[areaKey],
-                areaKey: areaKey,
-                areaStyle: [
-                    areaStyle,
-                    skeleton.areas[areaKey]?.style
-                ],
-                id: `s-ar-${blockId}-${skeleton.id}-${areaKey}`,
-                key: `s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`,
-                layout: skeleton.layout ?? blockLayout,
-                makeCssClass: makeCssClass
-            }, skeleton.areas[areaKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
+    Object.keys(skeleton.slots).forEach((slotKey, i)=>{
+        content[slotKey] = ()=>/*#__PURE__*/ React.createElement(Area, {
+                area: skeleton.slots[slotKey],
+                areaKey: slotKey,
+                style: skeleton.slots[slotKey]?.style,
+                id: `s-ar-${blockId}-${skeleton.id}-${slotKey}`,
+                key: `s-ar-${blockId}-${skeleton.id}-${slotKey}-${i}`,
+                layout: skeleton.layout ?? blockLayout
+            }, skeleton.slots[slotKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
                     blockId: blockId,
                     context: context,
                     key: `s-co-${skl.id}-${k}`,
@@ -40,10 +35,10 @@ const LoadingContainer = ({ blockId, blockLayout, blockProperties, blockStyle, C
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: skeleton.style ?? blockStyle,
+        style: skeleton.style ?? blockStyle,
         id: `s-bl-${blockId}-${skeleton.id}`,
         layout: skeleton.layout ?? blockLayout,
-        makeCssClass: makeCssClass
+        className: skeleton.class ?? blockClass
     }, /*#__PURE__*/ React.createElement(Component, {
         basePath: lowdefy.basePath,
         blockId: blockId,
@@ -51,9 +46,7 @@ const LoadingContainer = ({ blockId, blockLayout, blockProperties, blockStyle, C
         content: content,
         key: skeleton.id,
         menus: lowdefy.menus,
-        methods: {
-            makeCssClass
-        },
+        methods: {},
         pageId: lowdefy.pageId,
         properties: skeleton.properties ?? blockProperties
     }));

package/dist/block/LoadingList.js

@@ -14,25 +14,20 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import LoadingBlock from './LoadingBlock.js';
-const LoadingList = ({ blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
+const LoadingList = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
     const content = {};
     const contentList = [];
     new Array(3).forEach(()=>{
-        Object.keys(skeleton.areas).forEach((areaKey, i)=>{
-            content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                    area: skeleton.areas[areaKey],
-                    areaKey: areaKey,
-                    areaStyle: [
-                        areaStyle,
-                        skeleton.areas[areaKey]?.style
-                    ],
-                    id: `s-ar-${blockId}-${skeleton.id}-${areaKey}`,
-                    key: `s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`,
-                    layout: skeleton.layout ?? blockLayout,
-                    makeCssClass: makeCssClass
-                }, skeleton.areas[areaKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
+        Object.keys(skeleton.slots).forEach((slotKey, i)=>{
+            content[slotKey] = ()=>/*#__PURE__*/ React.createElement(Area, {
+                    area: skeleton.slots[slotKey],
+                    areaKey: slotKey,
+                    style: skeleton.slots[slotKey]?.style,
+                    id: `s-ar-${blockId}-${skeleton.id}-${slotKey}`,
+                    key: `s-ar-${blockId}-${skeleton.id}-${slotKey}-${i}`,
+                    layout: skeleton.layout ?? blockLayout
+                }, skeleton.slots[slotKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
                         blockId: blockId,
                         context: context,
                         key: `s-co-${skl.id}-${k}`,
@@ -45,19 +40,17 @@ const LoadingList = ({ blockId, blockLayout, blockProperties, blockStyle, Compon
         });
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: skeleton.style ?? blockStyle,
+        style: skeleton.style ?? blockStyle,
         id: `s-bl-${blockId}-${skeleton.id}`,
         layout: skeleton.layout ?? blockLayout,
-        makeCssClass: makeCssClass
+        className: skeleton.class ?? blockClass
     }, /*#__PURE__*/ React.createElement(Component, {
         basePath: lowdefy.basePath,
         blockId: blockId,
         components: lowdefy._internal.components,
         list: contentList,
         menus: lowdefy.menus,
-        methods: {
-            makeCssClass
-        },
+        methods: {},
         pageId: lowdefy.pageId,
         properties: skeleton.properties ?? blockProperties
     }));

package/dist/{style.less → block/resolveClassNames.js}

@@ -12,18 +12,13 @@
   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.
-*/
-
-.icon-spin {
-  animation: spin 1s infinite linear;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+*/ import { cn } from '@lowdefy/block-utils';
+function resolveClassNames(evalClass) {
+    if (!evalClass) return {};
+    const resolved = {};
+    for (const [key, value] of Object.entries(evalClass)){
+        resolved[key] = cn(value);
+    }
+    return resolved;
 }
+export default resolveClassNames;

package/dist/createHandleError.js

@@ -17,6 +17,12 @@ import { serializer } from '@lowdefy/helpers';
 function createHandleError(lowdefy) {
     const loggedErrors = new Set();
     const logger = lowdefy._internal.logger;
+    function logError(error) {
+        if (!(error instanceof UserError)) {
+            lowdefy._runtimeErrorCallback?.(error);
+        }
+        logger.error(error);
+    }
     return async function handleError(error) {
         const errorKey = `${error.message}:${error.configKey || ''}`;
         if (loggedErrors.has(errorKey)) {
@@ -25,14 +31,14 @@ function createHandleError(lowdefy) {
         loggedErrors.add(errorKey);
         // UserError is client-only — log to browser console, never send to server
         if (error instanceof UserError) {
-            logger.error(error);
+            logError(error);
             return;
         }
         // Send known error types to server for logging with location resolution
         if (error.isLowdefyError) {
             // Server-originated errors already have source resolved — just display locally
             if (error.source) {
-                logger.error(error);
+                logError(error);
                 return;
             }
             // Client-originated errors — send to server for logging + location resolution
@@ -54,18 +60,18 @@ function createHandleError(lowdefy) {
                     // If server produced a consolidated ConfigError, log it and return early
                     // (cause chain includes original error)
                     if (serializedConfigError) {
-                        logger.error(serializer.deserialize(serializedConfigError));
+                        logError(serializer.deserialize(serializedConfigError));
                         return;
                     }
                 }
             } catch  {
             // Server logging failed - continue with local console
             }
-            logger.error(error);
+            logError(error);
             return;
         }
         // Other errors - just log locally
-        logger.error(error);
+        logError(error);
     };
 }
 export default createHandleError;

package/dist/createIcon.js

@@ -13,10 +13,10 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import classNames from 'classnames';
 import { omit, type } from '@lowdefy/helpers';
 import Icon from '@ant-design/icons';
-import { blockDefaultProps, ErrorBoundary, makeCssClass } from '@lowdefy/block-utils';
+import { cn, withBlockDefaults, ErrorBoundary } from '@lowdefy/block-utils';
+import iconStyles from './style.module.css';
 const lowdefyProps = [
     'actionLog',
     'basePath',
@@ -30,6 +30,7 @@ const lowdefyProps = [
     'registerEvent',
     'registerMethod',
     'schemaErrors',
+    'styles',
     'validation'
 ];
 const createIcon = (Icons)=>{
@@ -42,22 +43,20 @@ const createIcon = (Icons)=>{
         let spacedTitle = title.replace(/([A-Z])/g, ' $1').trim();
         return spacedTitle.substring(spacedTitle.indexOf(' ') + 1);
     };
-    const IconBlock = ({ blockId, events, methods, onClick, properties, ...props })=>{
+    const IconBlock = ({ blockId, classNames = {}, events, methods, onClick, properties, styles = {}, ...props })=>{
         const propertiesObj = type.isString(properties) ? {
             name: properties
         } : properties;
         const spin = (propertiesObj.spin || events.onClick?.loading) && !propertiesObj.disableLoadingIcon;
         const iconProps = {
             id: blockId,
-            className: classNames({
-                [makeCssClass([
-                    {
-                        cursor: (onClick || events.onClick) && 'pointer'
-                    },
-                    propertiesObj.style
-                ])]: true,
-                'icon-spin': spin
+            className: cn(classNames.element, {
+                [iconStyles['icon-spin']]: spin
             }),
+            style: {
+                cursor: onClick || events.onClick ? 'pointer' : undefined,
+                ...styles.element
+            },
             rotate: propertiesObj.rotate,
             color: propertiesObj.color,
             title: propertiesObj.title ?? formatTitle(propertiesObj.name),
@@ -87,7 +86,6 @@ const createIcon = (Icons)=>{
     const AntIcon = (all)=>/*#__PURE__*/ React.createElement(Icon, {
             component: ()=>/*#__PURE__*/ React.createElement(IconBlock, all)
         });
-    AntIcon.defaultProps = blockDefaultProps;
-    return AntIcon;
+    return withBlockDefaults(AntIcon);
 };
 export default createIcon;

package/dist/createShortcutBadge.js

@@ -0,0 +1,113 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  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 React from 'react';
+import styles from './style.module.css';
+const SPECIAL_KEY_DISPLAY = {
+    Escape: 'Esc',
+    Enter: '↵',
+    Backspace: '⌫',
+    Delete: '⌦',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    Tab: '⇥',
+    Space: '␣'
+};
+const MAC_MODIFIERS = {
+    mod: '⌘',
+    shift: '⇧',
+    alt: '⌥',
+    ctrl: '⌃'
+};
+const WIN_MODIFIERS = {
+    mod: 'Ctrl',
+    shift: 'Shift',
+    alt: 'Alt',
+    ctrl: 'Ctrl'
+};
+let isMacCached = null;
+function isMac() {
+    if (isMacCached !== null) return isMacCached;
+    if (typeof navigator !== 'undefined') {
+        isMacCached = navigator.userAgentData?.platform === 'macOS' || /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
+    } else {
+        isMacCached = false;
+    }
+    return isMacCached;
+}
+function parseShortcut(shortcut) {
+    // Sequence: "g i" → ["G", "then", "I"]
+    if (shortcut.includes(' ') && !shortcut.includes('+')) {
+        const parts = shortcut.split(' ');
+        const result = [];
+        parts.forEach((part, i)=>{
+            if (i > 0) result.push('then');
+            result.push(displayKey(part));
+        });
+        return result;
+    }
+    if (shortcut.includes(' ')) {
+        // Sequence with modifiers: "mod+G mod+I"
+        const parts = shortcut.split(' ');
+        const result = [];
+        parts.forEach((part, i)=>{
+            if (i > 0) result.push('then');
+            result.push(...parsePart(part));
+        });
+        return result;
+    }
+    return parsePart(shortcut);
+}
+function parsePart(part) {
+    const segments = part.split('+');
+    if (segments.length === 1) {
+        return [
+            displayKey(segments[0])
+        ];
+    }
+    const key = segments[segments.length - 1];
+    const modifiers = segments.slice(0, -1);
+    const modMap = isMac() ? MAC_MODIFIERS : WIN_MODIFIERS;
+    const result = modifiers.map((mod)=>modMap[mod.toLowerCase()] || mod);
+    result.push(displayKey(key));
+    return [
+        result.join('\u2009')
+    ];
+}
+function displayKey(key) {
+    if (SPECIAL_KEY_DISPLAY[key]) return SPECIAL_KEY_DISPLAY[key];
+    if (key.length === 1) return key.toUpperCase();
+    return key;
+}
+function createShortcutBadge() {
+    function ShortcutBadge({ shortcut }) {
+        if (!shortcut) return null;
+        const primary = Array.isArray(shortcut) ? shortcut[0] : shortcut;
+        if (!primary) return null;
+        const segments = parseShortcut(primary);
+        return /*#__PURE__*/ React.createElement("span", {
+            className: styles['shortcut-badge']
+        }, segments.map((segment, i)=>segment === 'then' ? /*#__PURE__*/ React.createElement("span", {
+                key: i,
+                className: styles['shortcut-then']
+            }, "then") : /*#__PURE__*/ React.createElement("kbd", {
+                key: i,
+                className: styles['shortcut-kbd']
+            }, segment)));
+    }
+    return ShortcutBadge;
+}
+export default createShortcutBadge;

package/dist/createShortcutManager.js

@@ -0,0 +1,135 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  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 { tinykeys } from 'tinykeys';
+const SPECIAL_KEYS = new Set([
+    'Escape',
+    'Enter',
+    'Backspace',
+    'Delete',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab',
+    'Space'
+]);
+const MODIFIER_MAP = {
+    mod: '$mod',
+    alt: 'Alt',
+    shift: 'Shift',
+    ctrl: 'Control'
+};
+const MODIFIER_VALUES = new Set([
+    '$mod',
+    'Alt',
+    'Shift',
+    'Control'
+]);
+function normalizeShortcut(shortcut) {
+    // Sequences are space-separated parts like "g i"
+    if (shortcut.includes(' ') && !shortcut.includes('+')) {
+        return shortcut.split(' ').map((part)=>normalizePart(part)).join(' ');
+    }
+    // Check for sequences that have modifiers: "mod+G mod+I" is invalid in tinykeys,
+    // but "g i" (no modifiers) is a sequence. Handle mixed case: split on space.
+    if (shortcut.includes(' ')) {
+        return shortcut.split(' ').map((part)=>normalizePart(part)).join(' ');
+    }
+    return normalizePart(shortcut);
+}
+function normalizePart(part) {
+    const segments = part.split('+');
+    if (segments.length === 1) {
+        // Single key, no modifiers
+        return normalizeKey(segments[0]);
+    }
+    const key = segments[segments.length - 1];
+    const modifiers = segments.slice(0, -1);
+    const normalizedModifiers = modifiers.map((mod)=>MODIFIER_MAP[mod.toLowerCase()] || mod);
+    return [
+        ...normalizedModifiers,
+        normalizeKey(key)
+    ].join('+');
+}
+function normalizeKey(key) {
+    if (SPECIAL_KEYS.has(key)) return key;
+    if (key.length === 1) return key.toLowerCase();
+    return key;
+}
+function hasModifier(normalizedShortcut) {
+    // Check the first part (for sequences, only first part matters for suppression)
+    const firstPart = normalizedShortcut.split(' ')[0];
+    return firstPart.split('+').some((segment)=>MODIFIER_VALUES.has(segment));
+}
+function collectShortcuts(context) {
+    const entries = [];
+    const blockMap = context._internal.RootSlots.map;
+    Object.values(blockMap).forEach((block)=>{
+        if (!block.Events || !block.Events.events) return;
+        Object.entries(block.Events.events).forEach(([eventName, event])=>{
+            if (!event.shortcut) return;
+            const shortcuts = Array.isArray(event.shortcut) ? event.shortcut : [
+                event.shortcut
+            ];
+            shortcuts.forEach((s)=>entries.push({
+                    block,
+                    eventName,
+                    shortcut: s
+                }));
+        });
+    });
+    return entries;
+}
+function createShortcutManager() {
+    let unsubscribe = null;
+    function init(context) {
+        const entries = collectShortcuts(context);
+        if (entries.length === 0) return;
+        const shortcutMap = {};
+        // Last entry wins for duplicates
+        entries.forEach(({ block, eventName, shortcut })=>{
+            const normalized = normalizeShortcut(shortcut);
+            const modded = hasModifier(normalized);
+            shortcutMap[normalized] = (event)=>{
+                // Visibility gating
+                if (block.visibleEval && block.visibleEval.output === false) return;
+                // Input field suppression for non-modifier shortcuts
+                if (!modded) {
+                    const tag = event.target?.tagName;
+                    if (tag === 'INPUT' || tag === 'TEXTAREA' || event.target?.isContentEditable) {
+                        return;
+                    }
+                }
+                event.preventDefault();
+                block.triggerEvent({
+                    name: eventName
+                });
+            };
+        });
+        const win = context._internal.lowdefy._internal.globals.window;
+        unsubscribe = tinykeys(win, shortcutMap);
+    }
+    function destroy() {
+        if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+        }
+    }
+    return {
+        init,
+        destroy
+    };
+}
+export default createShortcutManager;

package/dist/index.js

@@ -14,3 +14,4 @@
   limitations under the License.
 */ import Client from './Client.js';
 export default Client;
+export { default as useDarkMode } from './useDarkMode.js';

package/dist/initLowdefyContext.js

@@ -16,6 +16,7 @@
 import createAuthMethods from './auth/createAuthMethods.js';
 import createCallRequest from './createCallRequest.js';
 import createIcon from './createIcon.js';
+import createShortcutBadge from './createShortcutBadge.js';
 import createLinkComponent from './createLinkComponent.js';
 import createHandleError from './createHandleError.js';
 import { createBrowserLogger } from '@lowdefy/logger/browser';
@@ -25,8 +26,10 @@ function initLowdefyContext({ auth, Components, config, lowdefy, router, stage,
         lowdefy._internal = {
             actions: types.actions,
             blockComponents: types.blocks,
+            blockMetas: types.blockMetas ?? {},
             components: {
-                Icon: createIcon(types.icons)
+                Icon: createIcon(types.icons),
+                ShortcutBadge: createShortcutBadge()
             },
             displayMessage: ({ content })=>{
                 console.log(content);
@@ -54,6 +57,7 @@ function initLowdefyContext({ auth, Components, config, lowdefy, router, stage,
         lowdefy.contexts = {};
         lowdefy.inputs = {};
         lowdefy.lowdefyGlobal = config.rootConfig.lowdefyGlobal;
+        lowdefy.theme = config.rootConfig.theme ?? {};
         lowdefy._internal.callAPI = createCallAPI(lowdefy);
         lowdefy._internal.auth = createAuthMethods(lowdefy, auth);
         lowdefy._internal.callRequest = createCallRequest(lowdefy);
@@ -62,6 +66,7 @@ function initLowdefyContext({ auth, Components, config, lowdefy, router, stage,
         lowdefy._internal.updateBlock = (blockId)=>lowdefy._internal.updaters[blockId] && lowdefy._internal.updaters[blockId]();
         lowdefy._internal.logger = createBrowserLogger();
         lowdefy._internal.handleError = createHandleError(lowdefy);
+        lowdefy._internal.components.handleError = lowdefy._internal.handleError;
         if (stage === 'dev' || stage === 'e2e') {
             window.lowdefy = lowdefy;
         }

package/dist/style.module.css

@@ -0,0 +1,70 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  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.
+*/
+
+@layer components {
+  .icon-spin {
+    animation: spin 1s infinite linear;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .shortcut-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: var(--ant-margin-xs);
+    font-size: calc(var(--ant-font-size-sm) - 1px);
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .shortcut-kbd {
+    display: inline-block;
+    padding: 2px 5px;
+    font-size: calc(var(--ant-font-size-sm) - 1px);
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    background-color: var(--ant-color-fill-quaternary);
+    border-radius: var(--ant-border-radius-sm);
+    border: 1px solid var(--ant-color-border);
+  }
+
+  .shortcut-kbd + .shortcut-kbd {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .shortcut-kbd:has(+ .shortcut-kbd) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .shortcut-then {
+    margin: 0 2px;
+    font-size: calc(var(--ant-font-size-sm) - 2px);
+  }
+}

package/dist/useDarkMode.js

@@ -0,0 +1,84 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  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 { useCallback, useEffect, useState } from 'react';
+import { theme as antdTheme } from 'antd';
+const algorithmMap = {
+    default: antdTheme.defaultAlgorithm,
+    dark: antdTheme.darkAlgorithm,
+    compact: antdTheme.compactAlgorithm
+};
+function resolveAlgorithm(algorithm) {
+    if (Array.isArray(algorithm)) {
+        return algorithm.map((a)=>algorithmMap[a] || antdTheme.defaultAlgorithm);
+    }
+    return algorithmMap[algorithm] || antdTheme.defaultAlgorithm;
+}
+function stripDarkFromAlgorithm(algorithm) {
+    if (Array.isArray(algorithm)) {
+        const filtered = algorithm.filter((a)=>a !== 'dark');
+        return filtered.length > 0 ? filtered : 'default';
+    }
+    if (algorithm === 'dark') return 'default';
+    return algorithm;
+}
+function mergeAlgorithm(baseAlgorithm, isDark) {
+    if (!isDark) return baseAlgorithm;
+    const base = Array.isArray(baseAlgorithm) ? baseAlgorithm : baseAlgorithm ? [
+        baseAlgorithm
+    ] : [];
+    return [
+        ...base,
+        'dark'
+    ];
+}
+function resolveIsDark({ configDarkMode, userPreference, systemIsDark }) {
+    if (configDarkMode === 'dark') return true;
+    if (configDarkMode === 'light') return false;
+    // configDarkMode is 'system' or undefined — user preference decides
+    if (userPreference === 'dark') return true;
+    if (userPreference === 'light') return false;
+    // userPreference is 'system' — follow OS
+    return systemIsDark;
+}
+function useDarkMode({ baseAlgorithm, configDarkMode }) {
+    const cleanAlgorithm = stripDarkFromAlgorithm(baseAlgorithm);
+    const [userPreference, setUserPreference] = useState(()=>{
+        return window.localStorage?.getItem('lowdefy_darkMode') ?? 'system';
+    });
+    const [systemIsDark, setSystemIsDark] = useState(()=>{
+        return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
+    });
+    // Listen for OS theme changes
+    useEffect(()=>{
+        const mql = window.matchMedia?.('(prefers-color-scheme: dark)');
+        if (!mql?.addEventListener) return;
+        const handler = (e)=>setSystemIsDark(e.matches);
+        mql.addEventListener('change', handler);
+        return ()=>mql.removeEventListener('change', handler);
+    }, []);
+    const setPreference = useCallback((newPref)=>{
+        window.localStorage?.setItem('lowdefy_darkMode', newPref);
+        setUserPreference(newPref);
+    }, []);
+    window.__lowdefy_setDarkMode = setPreference;
+    const isDark = resolveIsDark({
+        configDarkMode,
+        userPreference,
+        systemIsDark
+    });
+    window.__lowdefy_isDark = isDark;
+    return resolveAlgorithm(mergeAlgorithm(cleanAlgorithm, isDark));
+}
+export default useDarkMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/client",
-  "version": "4.7.2",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Client",
   "homepage": "https://lowdefy.com",
@@ -33,24 +33,24 @@
     "dist/*"
   ],
   "dependencies": {
-    "@ant-design/icons": "4.8.0",
-    "@lowdefy/block-utils": "4.7.2",
-    "@lowdefy/engine": "4.7.2",
-    "@lowdefy/errors": "4.7.2",
-    "@lowdefy/helpers": "4.7.2",
-    "@lowdefy/layout": "4.7.2",
-    "@lowdefy/logger": "4.7.2",
-    "classnames": "2.3.2",
+    "@ant-design/icons": "6.1.0",
+    "antd": "6.3.1",
+    "@lowdefy/block-utils": "5.0.0",
+    "@lowdefy/engine": "5.0.0",
+    "@lowdefy/errors": "5.0.0",
+    "@lowdefy/helpers": "5.0.0",
+    "@lowdefy/layout": "5.0.0",
+    "@lowdefy/logger": "5.0.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tinykeys": "^3.0.0"
   },
   "devDependencies": {
-    "@emotion/jest": "11.10.5",
     "@jest/globals": "28.1.3",
-    "@lowdefy/jest-yaml-transform": "4.7.2",
-    "@swc/cli": "0.1.63",
-    "@swc/core": "1.3.99",
-    "@swc/jest": "0.2.29",
+    "@lowdefy/jest-yaml-transform": "5.0.0",
+    "@swc/cli": "0.8.0",
+    "@swc/core": "1.15.18",
+    "@swc/jest": "0.2.39",
     "@testing-library/dom": "8.19.1",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -63,7 +63,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "swc src --out-dir dist --config-file ../../.swcrc --delete-dir-on-start && pnpm copyfiles",
+    "build": "swc src --out-dir dist --config-file ../../.swcrc --cli-config-file ../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
     "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"