@lowdefy/layout 4.7.3 → 5.1.0

package/dist/Area.js

@@ -13,29 +13,45 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Row } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-import gutterSetup from './gutterSetup.js';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import layoutParamsToArea from './layoutParamsToArea.js';
-const Area = ({ area = {}, areaKey, areaStyle, children, id, layout, makeCssClass })=>{
+import deriveAreaStyle from './deriveAreaStyle.js';
+const ALIGN_MAP = {
+    top: 'flex-start',
+    middle: 'center',
+    bottom: 'flex-end',
+    stretch: 'stretch'
+};
+const JUSTIFY_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    'space-between': 'space-between',
+    'space-around': 'space-around',
+    'space-evenly': 'space-evenly'
+};
+const Area = ({ area = {}, areaKey, children, id, layout, className, style })=>{
     const derivedArea = layoutParamsToArea({
         area,
         areaKey,
         layout
     });
-    return /*#__PURE__*/ React.createElement(Row, {
+    const gapStyle = deriveAreaStyle(derivedArea);
+    return /*#__PURE__*/ React.createElement("div", {
         id: id,
-        align: derivedArea.align,
-        className: makeCssClass(areaStyle),
-        gutter: gutterSetup(derivedArea.gutter),
-        justify: derivedArea.justify,
+        className: [
+            'lf-row',
+            className
+        ].filter(Boolean).join(' '),
         style: {
-            // antd keeps bottom margin which can cause overflow issues.
+            ...gapStyle,
+            alignItems: ALIGN_MAP[derivedArea.align],
+            justifyContent: JUSTIFY_MAP[derivedArea.justify],
             flexDirection: derivedArea.direction,
-            flexWrap: derivedArea.wrap,
-            overflow: derivedArea.overflow
+            flexWrap: derivedArea.wrap ?? 'wrap',
+            overflow: derivedArea.overflow,
+            ...style
         }
     }, children);
 };
-Area.defaultProps = blockDefaultProps;
-export default Area;
+export default withBlockDefaults(Area);

package/dist/BlockLayout.js

@@ -13,36 +13,33 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Col } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import deriveLayout from './deriveLayout.js';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const alignSelf = (align)=>{
-    if (align === 'bottom') {
-        return 'flex-end';
-    }
-    if (align === 'top') {
-        return 'flex-start';
-    }
-    if (align === 'middle') {
-        return 'center';
-    }
-    return align;
+const ALIGN_SELF_MAP = {
+    top: 'flex-start',
+    middle: 'center',
+    bottom: 'flex-end'
 };
-const BlockLayout = ({ id, blockStyle, children, layout = {}, makeCssClass })=>{
+const BlockLayout = ({ id, children, layout = {}, className, style })=>{
     if (layout.disabled) {
         return /*#__PURE__*/ React.createElement("div", {
             id: id,
-            className: makeCssClass(blockStyle)
+            className: className,
+            style: style
         }, children);
     }
-    return /*#__PURE__*/ React.createElement(Col, {
-        ...deriveLayout(layout),
-        style: {
-            alignSelf: alignSelf(layout.align)
-        },
+    const derived = deriveLayout(layout);
+    return /*#__PURE__*/ React.createElement("div", {
         id: id,
-        className: makeCssClass(blockStyle)
+        className: [
+            derived.className,
+            className
+        ].filter(Boolean).join(' '),
+        style: {
+            ...derived.style,
+            alignSelf: ALIGN_SELF_MAP[layout.selfAlign] ?? layout.selfAlign,
+            ...style
+        }
     }, children);
 };
-BlockLayout.defaultProps = blockDefaultProps;
-export default BlockLayout;
+export default withBlockDefaults(BlockLayout);

package/dist/deriveAreaStyle.js

@@ -0,0 +1,61 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+const BREAKPOINT_SUFFIXES = [
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    '2xl'
+];
+function setGapAxis(style, axis, value) {
+    if (type.isNumber(value)) {
+        style[`--lf-gap-${axis}`] = `${Math.round(value)}px`;
+        return;
+    }
+    if (type.isObject(value)) {
+        if (value.xs != null) {
+            style[`--lf-gap-${axis}`] = `${Math.round(value.xs)}px`;
+        }
+        for (const bp of BREAKPOINT_SUFFIXES){
+            if (value[bp] != null) {
+                style[`--lf-gap-${axis}-${bp}`] = `${Math.round(value[bp])}px`;
+            }
+        }
+    }
+}
+function deriveAreaStyle(area) {
+    const { gap } = area;
+    if (type.isNone(gap)) return {};
+    const style = {};
+    if (type.isNumber(gap)) {
+        const px = `${Math.round(gap)}px`;
+        style['--lf-gap-x'] = px;
+        style['--lf-gap-y'] = px;
+        return style;
+    }
+    if (type.isArray(gap)) {
+        setGapAxis(style, 'x', gap[0]);
+        setGapAxis(style, 'y', gap[1]);
+        return style;
+    }
+    if (type.isObject(gap)) {
+        setGapAxis(style, 'x', gap);
+        setGapAxis(style, 'y', gap);
+        return style;
+    }
+    return style;
+}
+export default deriveAreaStyle;

package/dist/deriveLayout.js

@@ -61,32 +61,29 @@ const deriveFlex = ({ flex, grow, shrink, size })=>{
     }
     return `${sanitizeGrow(grow)} ${sanitizeShrink(shrink)} ${sanitizeSize(size)}`;
 };
-const diffOffsetAndSpan = (obj)=>{
-    if (obj.offset && !obj.span) {
-        obj.span = 24 - obj.offset;
-        return obj;
+const resolveSpan = (span, offset)=>{
+    if (type.isNone(span)) {
+        return offset ? 24 - offset : 24;
     }
-    if (!obj.span) {
-        obj.span = 24;
+    return span;
+};
+const applyBreakpoint = (cssVars, classes, bp, obj)=>{
+    const suffix = bp ? `-${bp}` : '';
+    const span = resolveSpan(obj.span, obj.offset);
+    cssVars[`--lf-display${suffix}`] = span === 0 ? 'none' : 'block';
+    cssVars[`--lf-span${suffix}`] = span;
+    if (!type.isNone(obj.offset)) cssVars[`--lf-offset${suffix}`] = obj.offset;
+    if (!type.isNone(obj.order)) cssVars[`--lf-order${suffix}`] = obj.order;
+    if (!type.isNone(obj.push)) {
+        cssVars[`--lf-push${suffix}`] = obj.push;
+        if (!classes.includes('lf-col-push')) classes.push('lf-col-push');
+    }
+    if (!type.isNone(obj.pull)) {
+        cssVars[`--lf-pull${suffix}`] = obj.pull;
+        if (!classes.includes('lf-col-pull')) classes.push('lf-col-pull');
     }
-    return obj;
 };
-const deriveLayout = ({ flex, offset, order, pull, push, span, grow, shrink, size, xs, sm, md, lg, xl, xxl })=>{
-    let colProps = {
-        xs: {
-            span: 24
-        },
-        sm: {
-            span: 24
-        },
-        md: diffOffsetAndSpan({
-            offset,
-            order,
-            pull,
-            push,
-            span
-        })
-    };
+const deriveLayout = ({ flex, offset, order, pull, push, span, grow, shrink, size, xs, sm, md, lg, xl, '2xl': bp2xl })=>{
     const flexValue = deriveFlex({
         flex,
         grow,
@@ -94,42 +91,78 @@ const deriveLayout = ({ flex, offset, order, pull, push, span, grow, shrink, siz
         size
     });
     if (flexValue) {
-        colProps = {
-            flex: flexValue,
-            order
+        return {
+            className: '',
+            style: {
+                flex: flexValue,
+                order
+            }
         };
     }
+    const classes = [
+        'lf-col'
+    ];
+    const cssVars = {};
+    // Base (xs): always full width
+    cssVars['--lf-span'] = 24;
+    // md: uses top-level span/offset/order/push/pull
+    // Always emit --lf-span-md to break the CSS var() fallback chain
+    const mdSpan = resolveSpan(span, offset);
+    cssVars['--lf-span-md'] = mdSpan;
+    if (mdSpan === 0) cssVars['--lf-display-md'] = 'none';
+    if (!type.isNone(offset)) cssVars['--lf-offset-md'] = offset;
+    if (!type.isNone(order)) cssVars['--lf-order-md'] = order;
+    if (!type.isNone(push)) {
+        cssVars['--lf-push-md'] = push;
+        classes.push('lf-col-push');
+    }
+    if (!type.isNone(pull)) {
+        cssVars['--lf-pull-md'] = pull;
+        classes.push('lf-col-pull');
+    }
+    // sm: cascades down to xs (base vars) AND sets -sm vars
     if (type.isObject(sm)) {
-        colProps.sm = {
-            ...colProps.sm,
-            ...diffOffsetAndSpan(sm)
-        };
-        colProps.xs = {
-            ...colProps.xs,
-            ...diffOffsetAndSpan(sm)
+        const smObj = {
+            ...sm
         };
-    }
+        const smSpan = resolveSpan(smObj.span, smObj.offset);
+        cssVars['--lf-span'] = smSpan;
+        cssVars['--lf-display'] = smSpan === 0 ? 'none' : 'block';
+        if (!type.isNone(smObj.offset)) cssVars['--lf-offset'] = smObj.offset;
+        if (!type.isNone(smObj.order)) cssVars['--lf-order'] = smObj.order;
+        if (!type.isNone(smObj.push)) {
+            cssVars['--lf-push'] = smObj.push;
+            if (!classes.includes('lf-col-push')) classes.push('lf-col-push');
+        }
+        if (!type.isNone(smObj.pull)) {
+            cssVars['--lf-pull'] = smObj.pull;
+            if (!classes.includes('lf-col-pull')) classes.push('lf-col-pull');
+        }
+        applyBreakpoint(cssVars, classes, 'sm', smObj);
+    }
+    // xs: applied AFTER sm, overrides the sm→xs cascade
     if (type.isObject(xs)) {
-        colProps.xs = {
-            ...colProps.xs,
-            ...diffOffsetAndSpan(xs)
-        };
+        applyBreakpoint(cssVars, classes, null, {
+            ...xs
+        });
     }
+    // md override: spread-merge with baseline
     if (type.isObject(md)) {
-        colProps.md = {
-            ...colProps.md,
-            ...diffOffsetAndSpan(md)
-        };
-    }
-    if (type.isObject(lg)) {
-        colProps.lg = diffOffsetAndSpan(lg);
-    }
-    if (type.isObject(xl)) {
-        colProps.xl = diffOffsetAndSpan(xl);
-    }
-    if (type.isObject(xxl)) {
-        colProps.xxl = diffOffsetAndSpan(xxl);
-    }
-    return colProps;
+        applyBreakpoint(cssVars, classes, 'md', {
+            offset,
+            order,
+            push,
+            pull,
+            ...md
+        });
+    }
+    // lg, xl, 2xl: direct assignment — no baseline merge
+    if (type.isObject(lg)) applyBreakpoint(cssVars, classes, 'lg', lg);
+    if (type.isObject(xl)) applyBreakpoint(cssVars, classes, 'xl', xl);
+    if (type.isObject(bp2xl)) applyBreakpoint(cssVars, classes, '2xl', bp2xl);
+    return {
+        className: classes.join(' '),
+        style: cssVars
+    };
 };
 export default deriveLayout;

package/dist/grid.css

@@ -0,0 +1,334 @@
+/*
+  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 {
+  /* =====================================================
+     Row (Area)
+
+     --_gap is the resolved horizontal gap at the current
+     breakpoint. It's used for column-gap on the row AND
+     inherited by child .lf-col elements for the flex-basis
+     gap adjustment formula.
+     ===================================================== */
+  .lf-row {
+    --_gap: var(--lf-gap-x, 0px);
+    display: flex;
+    /* flex-wrap is set via inline style (derivedArea.wrap ?? 'wrap') */
+    column-gap: var(--_gap);
+    row-gap: var(--lf-gap-y, 0px);
+  }
+
+  @media (min-width: 640px) {
+    .lf-row {
+      --_gap: var(--lf-gap-x-sm, var(--lf-gap-x, 0px));
+      column-gap: var(--_gap);
+      row-gap: var(--lf-gap-y-sm, var(--lf-gap-y, 0px));
+    }
+  }
+  @media (min-width: 768px) {
+    .lf-row {
+      --_gap: var(--lf-gap-x-md, var(--lf-gap-x-sm, var(--lf-gap-x, 0px)));
+      column-gap: var(--_gap);
+      row-gap: var(--lf-gap-y-md, var(--lf-gap-y-sm, var(--lf-gap-y, 0px)));
+    }
+  }
+  @media (min-width: 1024px) {
+    .lf-row {
+      --_gap: var(--lf-gap-x-lg, var(--lf-gap-x-md, var(--lf-gap-x-sm, var(--lf-gap-x, 0px))));
+      column-gap: var(--_gap);
+      row-gap: var(--lf-gap-y-lg, var(--lf-gap-y-md, var(--lf-gap-y-sm, var(--lf-gap-y, 0px))));
+    }
+  }
+  @media (min-width: 1280px) {
+    .lf-row {
+      --_gap: var(
+        --lf-gap-x-xl,
+        var(--lf-gap-x-lg, var(--lf-gap-x-md, var(--lf-gap-x-sm, var(--lf-gap-x, 0px))))
+      );
+      column-gap: var(--_gap);
+      row-gap: var(
+        --lf-gap-y-xl,
+        var(--lf-gap-y-lg, var(--lf-gap-y-md, var(--lf-gap-y-sm, var(--lf-gap-y, 0px))))
+      );
+    }
+  }
+  @media (min-width: 1536px) {
+    .lf-row {
+      --_gap: var(
+        --lf-gap-x-2xl,
+        var(
+          --lf-gap-x-xl,
+          var(--lf-gap-x-lg, var(--lf-gap-x-md, var(--lf-gap-x-sm, var(--lf-gap-x, 0px))))
+        )
+      );
+      column-gap: var(--_gap);
+      row-gap: var(
+        --lf-gap-y-2xl,
+        var(
+          --lf-gap-y-xl,
+          var(--lf-gap-y-lg, var(--lf-gap-y-md, var(--lf-gap-y-sm, var(--lf-gap-y, 0px))))
+        )
+      );
+    }
+  }
+
+  /* =====================================================
+     Col (BlockLayout)
+
+     The flex-basis formula accounts for CSS gap to ensure
+     columns + gaps sum to exactly the container width:
+
+       flex-basis = span/24 * (100% + gap) - gap
+
+     Proof: for N columns summing to 24 spans with (N-1) gaps:
+       sum(span_i/24 * (W + G) - G) + (N-1)*G
+       = (W + G) * sum(span_i)/24 - N*G + (N-1)*G
+       = (W + G) * 1 - G = W  ✓
+
+     The --_gap variable is inherited from the parent .lf-row.
+     When gap is 0, the formula simplifies to span/24 * 100%.
+     ===================================================== */
+  .lf-col {
+    display: var(--lf-display, block);
+    min-height: 1px;
+    flex: 0 0 calc(var(--lf-span, 24) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px));
+    max-width: calc(var(--lf-span, 24) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px));
+    margin-inline-start: calc(var(--lf-offset, 0) / 24 * (100% + var(--_gap, 0px)));
+    order: var(--lf-order, 0);
+  }
+
+  /* Push/pull: only apply positioning when class is present */
+  .lf-col-push {
+    position: relative;
+    inset-inline-start: calc(var(--lf-push, 0) / 24 * (100% + var(--_gap, 0px)));
+  }
+  .lf-col-pull {
+    position: relative;
+    inset-inline-end: calc(var(--lf-pull, 0) / 24 * (100% + var(--_gap, 0px)));
+  }
+
+  /* --- sm (≥640px) --- */
+  @media (min-width: 640px) {
+    .lf-col {
+      display: var(--lf-display-sm, var(--lf-display, block));
+      flex: 0 0
+        calc(
+          var(--lf-span-sm, var(--lf-span, 24)) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+        );
+      max-width: calc(
+        var(--lf-span-sm, var(--lf-span, 24)) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+      );
+      margin-inline-start: calc(
+        var(--lf-offset-sm, var(--lf-offset, 0)) / 24 * (100% + var(--_gap, 0px))
+      );
+      order: var(--lf-order-sm, var(--lf-order, 0));
+    }
+    .lf-col-push {
+      inset-inline-start: calc(
+        var(--lf-push-sm, var(--lf-push, 0)) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+    .lf-col-pull {
+      inset-inline-end: calc(var(--lf-pull-sm, var(--lf-pull, 0)) / 24 * (100% + var(--_gap, 0px)));
+    }
+  }
+
+  /* --- md (≥768px) --- */
+  @media (min-width: 768px) {
+    .lf-col {
+      display: var(--lf-display-md, var(--lf-display-sm, var(--lf-display, block)));
+      flex: 0 0
+        calc(
+          var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24))) / 24 * (100% + var(--_gap, 0px)) -
+            var(--_gap, 0px)
+        );
+      max-width: calc(
+        var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24))) / 24 * (100% + var(--_gap, 0px)) -
+          var(--_gap, 0px)
+      );
+      margin-inline-start: calc(
+        var(--lf-offset-md, var(--lf-offset-sm, var(--lf-offset, 0))) / 24 *
+          (100% + var(--_gap, 0px))
+      );
+      order: var(--lf-order-md, var(--lf-order-sm, var(--lf-order, 0)));
+    }
+    .lf-col-push {
+      inset-inline-start: calc(
+        var(--lf-push-md, var(--lf-push-sm, var(--lf-push, 0))) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+    .lf-col-pull {
+      inset-inline-end: calc(
+        var(--lf-pull-md, var(--lf-pull-sm, var(--lf-pull, 0))) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+  }
+
+  /* --- lg (≥1024px) --- */
+  @media (min-width: 1024px) {
+    .lf-col {
+      display: var(
+        --lf-display-lg,
+        var(--lf-display-md, var(--lf-display-sm, var(--lf-display, block)))
+      );
+      flex: 0 0
+        calc(
+          var(--lf-span-lg, var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24)))) / 24 *
+            (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+        );
+      max-width: calc(
+        var(--lf-span-lg, var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24)))) / 24 *
+          (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+      );
+      margin-inline-start: calc(
+        var(--lf-offset-lg, var(--lf-offset-md, var(--lf-offset-sm, var(--lf-offset, 0)))) / 24 *
+          (100% + var(--_gap, 0px))
+      );
+      order: var(--lf-order-lg, var(--lf-order-md, var(--lf-order-sm, var(--lf-order, 0))));
+    }
+    .lf-col-push {
+      inset-inline-start: calc(
+        var(--lf-push-lg, var(--lf-push-md, var(--lf-push-sm, var(--lf-push, 0)))) / 24 *
+          (100% + var(--_gap, 0px))
+      );
+    }
+    .lf-col-pull {
+      inset-inline-end: calc(
+        var(--lf-pull-lg, var(--lf-pull-md, var(--lf-pull-sm, var(--lf-pull, 0)))) / 24 *
+          (100% + var(--_gap, 0px))
+      );
+    }
+  }
+
+  /* --- xl (≥1280px) --- */
+  @media (min-width: 1280px) {
+    .lf-col {
+      display: var(
+        --lf-display-xl,
+        var(--lf-display-lg, var(--lf-display-md, var(--lf-display-sm, var(--lf-display, block))))
+      );
+      flex: 0 0
+        calc(
+          var(
+              --lf-span-xl,
+              var(--lf-span-lg, var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24))))
+            ) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+        );
+      max-width: calc(
+        var(
+            --lf-span-xl,
+            var(--lf-span-lg, var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24))))
+          ) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+      );
+      margin-inline-start: calc(
+        var(
+            --lf-offset-xl,
+            var(--lf-offset-lg, var(--lf-offset-md, var(--lf-offset-sm, var(--lf-offset, 0))))
+          ) / 24 * (100% + var(--_gap, 0px))
+      );
+      order: var(
+        --lf-order-xl,
+        var(--lf-order-lg, var(--lf-order-md, var(--lf-order-sm, var(--lf-order, 0))))
+      );
+    }
+    .lf-col-push {
+      inset-inline-start: calc(
+        var(
+            --lf-push-xl,
+            var(--lf-push-lg, var(--lf-push-md, var(--lf-push-sm, var(--lf-push, 0))))
+          ) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+    .lf-col-pull {
+      inset-inline-end: calc(
+        var(
+            --lf-pull-xl,
+            var(--lf-pull-lg, var(--lf-pull-md, var(--lf-pull-sm, var(--lf-pull, 0))))
+          ) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+  }
+
+  /* --- 2xl (≥1536px) --- */
+  @media (min-width: 1536px) {
+    .lf-col {
+      display: var(
+        --lf-display-2xl,
+        var(
+          --lf-display-xl,
+          var(--lf-display-lg, var(--lf-display-md, var(--lf-display-sm, var(--lf-display, block))))
+        )
+      );
+      flex: 0 0
+        calc(
+          var(
+              --lf-span-2xl,
+              var(
+                --lf-span-xl,
+                var(--lf-span-lg, var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24))))
+              )
+            ) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+        );
+      max-width: calc(
+        var(
+            --lf-span-2xl,
+            var(
+              --lf-span-xl,
+              var(--lf-span-lg, var(--lf-span-md, var(--lf-span-sm, var(--lf-span, 24))))
+            )
+          ) / 24 * (100% + var(--_gap, 0px)) - var(--_gap, 0px)
+      );
+      margin-inline-start: calc(
+        var(
+            --lf-offset-2xl,
+            var(
+              --lf-offset-xl,
+              var(--lf-offset-lg, var(--lf-offset-md, var(--lf-offset-sm, var(--lf-offset, 0))))
+            )
+          ) / 24 * (100% + var(--_gap, 0px))
+      );
+      order: var(
+        --lf-order-2xl,
+        var(
+          --lf-order-xl,
+          var(--lf-order-lg, var(--lf-order-md, var(--lf-order-sm, var(--lf-order, 0))))
+        )
+      );
+    }
+    .lf-col-push {
+      inset-inline-start: calc(
+        var(
+            --lf-push-2xl,
+            var(
+              --lf-push-xl,
+              var(--lf-push-lg, var(--lf-push-md, var(--lf-push-sm, var(--lf-push, 0))))
+            )
+          ) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+    .lf-col-pull {
+      inset-inline-end: calc(
+        var(
+            --lf-pull-2xl,
+            var(
+              --lf-pull-xl,
+              var(--lf-pull-lg, var(--lf-pull-md, var(--lf-pull-sm, var(--lf-pull, 0))))
+            )
+          ) / 24 * (100% + var(--_gap, 0px))
+      );
+    }
+  }
+}

package/dist/layoutParamsToArea.js

@@ -13,16 +13,41 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import { type } from '@lowdefy/helpers';
-const layoutParamsToArea = ({ areaKey, area = {}, layout = {} })=>{
+function resolveDeprecated(layout, newName, ...oldNames) {
+    if (!type.isNone(layout[newName])) {
+        return layout[newName];
+    }
+    for (const oldName of oldNames){
+        if (!type.isNone(layout[oldName])) {
+            console.warn(`[Lowdefy] layout.${oldName} is deprecated. Use layout.${newName} instead.`);
+            return layout[oldName];
+        }
+    }
+    return undefined;
+}
+function resolveLayoutAlign(layout) {
+    if (!type.isNone(layout.align) && type.isNone(layout.selfAlign)) {
+        console.warn('[Lowdefy] layout.align for self-alignment is deprecated. Use layout.selfAlign instead.');
+        return undefined;
+    }
+    return layout.align;
+}
+function layoutParamsToArea({ areaKey, area = {}, layout = {} }) {
+    // Normalize area.gutter → area.gap (deprecated)
+    if (!type.isNone(area.gutter) && type.isNone(area.gap)) {
+        console.warn('[Lowdefy] slots.content.gutter is deprecated. Use gap instead.');
+        area.gap = area.gutter;
+    }
     if (areaKey !== 'content') {
         return area;
     }
-    area.align = type.isNone(area.align) ? layout.contentAlign : area.align;
-    area.direction = type.isNone(area.direction) ? layout.contentDirection : area.direction;
-    area.gutter = type.isNone(area.gutter) ? layout.contentGutter : area.gutter;
-    area.justify = type.isNone(area.justify) ? layout.contentJustify : area.justify;
-    area.overflow = type.isNone(area.overflow) ? layout.contentOverflow : area.overflow;
-    area.wrap = type.isNone(area.wrap) ? layout.contentWrap : area.wrap;
+    const layoutAlign = resolveLayoutAlign(layout);
+    if (type.isNone(area.gap)) area.gap = resolveDeprecated(layout, 'gap', 'contentGutter', 'contentGap');
+    if (type.isNone(area.align)) area.align = layoutAlign;
+    if (type.isNone(area.justify)) area.justify = resolveDeprecated(layout, 'justify', 'contentJustify');
+    if (type.isNone(area.direction)) area.direction = resolveDeprecated(layout, 'direction', 'contentDirection');
+    if (type.isNone(area.wrap)) area.wrap = resolveDeprecated(layout, 'wrap', 'contentWrap');
+    if (type.isNone(area.overflow)) area.overflow = resolveDeprecated(layout, 'overflow', 'contentOverflow');
     return area;
-};
+}
 export default layoutParamsToArea;

package/dist/layoutParamsToSlot.js

@@ -0,0 +1,53 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+function resolveDeprecated(layout, newName, ...oldNames) {
+    if (!type.isNone(layout[newName])) {
+        return layout[newName];
+    }
+    for (const oldName of oldNames){
+        if (!type.isNone(layout[oldName])) {
+            console.warn(`[Lowdefy] layout.${oldName} is deprecated. Use layout.${newName} instead.`);
+            return layout[oldName];
+        }
+    }
+    return undefined;
+}
+function resolveLayoutAlign(layout) {
+    if (!type.isNone(layout.align) && type.isNone(layout.selfAlign)) {
+        console.warn('[Lowdefy] layout.align for self-alignment is deprecated. Use layout.selfAlign instead.');
+        return undefined;
+    }
+    return layout.align;
+}
+function layoutParamsToSlot({ slotKey, slot = {}, layout = {} }) {
+    // Normalize slot.gutter → slot.gap (deprecated)
+    if (!type.isNone(slot.gutter) && type.isNone(slot.gap)) {
+        console.warn('[Lowdefy] slots.content.gutter is deprecated. Use gap instead.');
+        slot.gap = slot.gutter;
+    }
+    if (slotKey !== 'content') {
+        return slot;
+    }
+    const layoutAlign = resolveLayoutAlign(layout);
+    if (type.isNone(slot.gap)) slot.gap = resolveDeprecated(layout, 'gap', 'contentGutter', 'contentGap');
+    if (type.isNone(slot.align)) slot.align = layoutAlign;
+    if (type.isNone(slot.justify)) slot.justify = resolveDeprecated(layout, 'justify', 'contentJustify');
+    if (type.isNone(slot.direction)) slot.direction = resolveDeprecated(layout, 'direction', 'contentDirection');
+    if (type.isNone(slot.wrap)) slot.wrap = resolveDeprecated(layout, 'wrap', 'contentWrap');
+    if (type.isNone(slot.overflow)) slot.overflow = resolveDeprecated(layout, 'overflow', 'contentOverflow');
+    return slot;
+}
+export default layoutParamsToSlot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/layout",
-  "version": "4.7.3",
+  "version": "5.1.0",
   "license": "Apache-2.0",
   "description": "",
   "homepage": "https://lowdefy.com",
@@ -34,20 +34,18 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "4.7.3",
-    "@lowdefy/helpers": "4.7.3",
-    "antd": "4.24.14",
+    "@lowdefy/block-utils": "5.1.0",
+    "@lowdefy/helpers": "5.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@emotion/jest": "11.10.5",
     "@jest/globals": "28.1.3",
-    "@lowdefy/block-dev": "4.7.3",
-    "@lowdefy/jest-yaml-transform": "4.7.3",
-    "@swc/cli": "0.1.63",
-    "@swc/core": "1.3.99",
-    "@swc/jest": "0.2.29",
+    "@lowdefy/block-dev": "5.1.0",
+    "@lowdefy/jest-yaml-transform": "5.1.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",
@@ -60,7 +58,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"

package/dist/gutterSetup.js

@@ -1,25 +0,0 @@
-/*
-  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 { type } from '@lowdefy/helpers';
-const gutterSetup = (gutter)=>{
-    if (type.isInt(gutter) || type.isObject(gutter)) {
-        return [
-            gutter,
-            gutter
-        ];
-    }
-    return gutter;
-};
-export default gutterSetup;

package/dist/style.less

@@ -1,17 +0,0 @@
-/*
-  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 'antd/lib/grid/style/index.less';