@lowdefy/client 5.0.0 → 5.2.0

package/dist/block/Container.js

@@ -23,6 +23,7 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
     // eslint-disable-next-line prefer-destructuring
     const slots = Blocks.subSlots[block.id][0].slots;
     Object.keys(slots).forEach((slotKey, i)=>{
+        if (slots[slotKey].blocks.length === 0) return;
         content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
                 area: block.eval.slots[slotKey],
                 areaKey: slotKey,

package/dist/block/InputContainer.js

@@ -23,6 +23,7 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
     // eslint-disable-next-line prefer-destructuring
     const slots = Blocks.subSlots[block.id][0].slots;
     Object.keys(slots).forEach((slotKey, i)=>{
+        if (slots[slotKey].blocks.length === 0) return;
         content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
                 area: block.eval.slots[slotKey],
                 areaKey: slotKey,

package/dist/block/List.js

@@ -15,6 +15,7 @@
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
 import { cn } from '@lowdefy/block-utils';
+import { get } from '@lowdefy/helpers';
 import Block from './Block.js';
 import resolveClassNames from './resolveClassNames.js';
 const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
@@ -23,6 +24,7 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
     const contentList = [];
     Blocks.subSlots[block.id].forEach((SBlock)=>{
         Object.keys(SBlock.slots).forEach((slotKey)=>{
+            if (SBlock.slots[slotKey].blocks.length === 0) return;
             content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
                     area: block.eval.slots[slotKey],
                     areaKey: slotKey,
@@ -70,6 +72,7 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         events: block.eval.events ?? {},
         key: block.blockId,
         list: contentList,
+        value: get(context.state, block.blockId) ?? [],
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,

package/dist/createLinkComponent.js

@@ -3,9 +3,10 @@ import { createLink } from '@lowdefy/engine';
 import { type } from '@lowdefy/helpers';
 const createLinkComponent = (lowdefy, Link)=>{
     const { window } = lowdefy._internal.globals;
-    const backLink = ({ ariaLabel, children, className, id, onClick = ()=>{}, rel })=>/*#__PURE__*/ React.createElement("a", {
+    const backLink = ({ ariaLabel, children, className, id, onClick = ()=>{}, rel, style })=>/*#__PURE__*/ React.createElement("a", {
             id: id,
             className: className,
+            style: style,
             rel: rel,
             "aria-label": ariaLabel ?? 'back',
             onClick: (...params)=>{
@@ -13,11 +14,12 @@ const createLinkComponent = (lowdefy, Link)=>{
                 onClick(...params);
             }
         }, type.isFunction(children) ? children(id) : children);
-    const newOriginLink = ({ ariaLabel, children, className, href, id, onClick = ()=>{}, newTab, pageId, query, rel, url })=>{
+    const newOriginLink = ({ ariaLabel, children, className, href, id, onClick = ()=>{}, newTab, pageId, query, rel, style, url })=>{
         return /*#__PURE__*/ React.createElement("a", {
             id: id,
             "aria-label": ariaLabel,
             className: className,
+            style: style,
             href: href ?? `${url}${query ? `?${query}` : ''}`,
             rel: rel ?? (newTab && 'noopener noreferrer'),
             target: newTab && '_blank',
@@ -27,13 +29,14 @@ const createLinkComponent = (lowdefy, Link)=>{
             }
         }, type.isFunction(children) ? children(pageId ?? url ?? id) : children);
     };
-    const sameOriginLink = ({ ariaLabel, children, className, id, newTab, onClick = ()=>{}, pageId, pathname, query, rel, replace, scroll, setInput, url })=>{
+    const sameOriginLink = ({ ariaLabel, children, className, id, newTab, onClick = ()=>{}, pageId, pathname, query, rel, replace, scroll, setInput, style, url })=>{
         if (newTab) {
             return(// eslint-disable-next-line react/jsx-no-target-blank
             /*#__PURE__*/ React.createElement("a", {
                 id: id,
                 "aria-label": ariaLabel,
                 className: className,
+                style: style,
                 href: `${window.location.origin}${lowdefy.basePath}${pathname}${query ? `?${query}` : ''}`,
                 rel: rel ?? 'noopener noreferrer',
                 target: "_blank",
@@ -54,6 +57,7 @@ const createLinkComponent = (lowdefy, Link)=>{
             id: id,
             "aria-label": ariaLabel,
             className: className,
+            style: style,
             rel: rel,
             onClick: (...params)=>{
                 setInput();
@@ -61,9 +65,10 @@ const createLinkComponent = (lowdefy, Link)=>{
             }
         }, type.isFunction(children) ? children(pageId ?? url ?? id) : children));
     };
-    const noLink = ({ className, children, id, onClick = ()=>{} })=>/*#__PURE__*/ React.createElement("span", {
+    const noLink = ({ className, children, id, onClick = ()=>{}, style })=>/*#__PURE__*/ React.createElement("span", {
             id: id,
             className: className,
+            style: style,
             onClick: onClick
         }, type.isFunction(children) ? children(id) : children);
     return createLink({

package/dist/getOrCreateAntdCssContainer.js

@@ -0,0 +1,31 @@
+/*
+  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.
+*/ // Create a container element for antd's CSS-in-JS injection that is positioned
+// AFTER the @layer order declaration in <head>. Without this, antd's StyleProvider
+// prepends <style> tags to the top of <head>, placing them before the @layer
+// declaration and breaking the cascade layer priority (antd becomes lowest instead
+// of overriding Tailwind's preflight).
+function getOrCreateAntdCssContainer() {
+    if (typeof document === 'undefined') return undefined;
+    const existing = document.getElementById('__antd-css-container');
+    if (existing) return existing;
+    const anchor = document.getElementById('__lf-layer-order');
+    if (!anchor) return undefined;
+    const container = document.createElement('div');
+    container.id = '__antd-css-container';
+    anchor.after(container);
+    return container;
+}
+export default getOrCreateAntdCssContainer;

package/dist/index.js

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

package/dist/useDarkMode.js

@@ -12,7 +12,7 @@
   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 { useCallback, useEffect, useMemo, useState } from 'react';
 import { theme as antdTheme } from 'antd';
 const algorithmMap = {
     default: antdTheme.defaultAlgorithm,
@@ -52,7 +52,23 @@ function resolveIsDark({ configDarkMode, userPreference, systemIsDark }) {
     // userPreference is 'system' — follow OS
     return systemIsDark;
 }
-function useDarkMode({ baseAlgorithm, configDarkMode }) {
+function mergeComponents(shared, mode) {
+    if (!shared && !mode) return undefined;
+    const keys = new Set([
+        ...Object.keys(shared ?? {}),
+        ...Object.keys(mode ?? {})
+    ]);
+    const merged = {};
+    keys.forEach((name)=>{
+        merged[name] = {
+            ...(shared ?? {})[name] ?? {},
+            ...(mode ?? {})[name] ?? {}
+        };
+    });
+    return merged;
+}
+function useDarkMode({ antd, configDarkMode }) {
+    const baseAlgorithm = antd?.algorithm;
     const cleanAlgorithm = stripDarkFromAlgorithm(baseAlgorithm);
     const [userPreference, setUserPreference] = useState(()=>{
         return window.localStorage?.getItem('lowdefy_darkMode') ?? 'system';
@@ -79,6 +95,53 @@ function useDarkMode({ baseAlgorithm, configDarkMode }) {
         systemIsDark
     });
     window.__lowdefy_isDark = isDark;
-    return resolveAlgorithm(mergeAlgorithm(cleanAlgorithm, isDark));
+    const sharedToken = antd?.token;
+    const lightToken = antd?.lightToken;
+    const darkToken = antd?.darkToken;
+    const sharedComponents = antd?.components;
+    const lightComponents = antd?.lightComponents;
+    const darkComponents = antd?.darkComponents;
+    const token = useMemo(()=>{
+        const modeToken = isDark ? darkToken : lightToken;
+        if (!sharedToken && !modeToken) return undefined;
+        return {
+            ...sharedToken ?? {},
+            ...modeToken ?? {}
+        };
+    }, [
+        isDark,
+        sharedToken,
+        lightToken,
+        darkToken
+    ]);
+    const components = useMemo(()=>mergeComponents(sharedComponents, isDark ? darkComponents : lightComponents), [
+        isDark,
+        sharedComponents,
+        lightComponents,
+        darkComponents
+    ]);
+    // Keep the <html> background in sync with the resolved mode. The _document.js
+    // inline script sets an initial background before hydration; this effect takes
+    // over once React is active and updates on every dark/light toggle.
+    const darkBg = darkToken?.colorBgLayout;
+    const lightBg = lightToken?.colorBgLayout;
+    useEffect(()=>{
+        if (isDark) {
+            document.documentElement.style.backgroundColor = darkBg ?? '#000';
+        } else if (lightBg) {
+            document.documentElement.style.backgroundColor = lightBg;
+        } else {
+            document.documentElement.style.removeProperty('background-color');
+        }
+    }, [
+        isDark,
+        darkBg,
+        lightBg
+    ]);
+    return {
+        algorithm: resolveAlgorithm(mergeAlgorithm(cleanAlgorithm, isDark)),
+        token,
+        components
+    };
 }
 export default useDarkMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/client",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Client",
   "homepage": "https://lowdefy.com",
@@ -35,19 +35,19 @@
   "dependencies": {
     "@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",
+    "@lowdefy/block-utils": "5.2.0",
+    "@lowdefy/engine": "5.2.0",
+    "@lowdefy/errors": "5.2.0",
+    "@lowdefy/helpers": "5.2.0",
+    "@lowdefy/layout": "5.2.0",
+    "@lowdefy/logger": "5.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tinykeys": "^3.0.0"
   },
   "devDependencies": {
     "@jest/globals": "28.1.3",
-    "@lowdefy/jest-yaml-transform": "5.0.0",
+    "@lowdefy/jest-yaml-transform": "5.2.0",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",
     "@swc/jest": "0.2.39",