@bindtty/layout 0.1.0-alpha.1 → 0.1.0-alpha.3

package/README.md

@@ -16,14 +16,13 @@ const layoutTree = layoutRoot(runtime.root, {
 
 ## 已支持的 intrinsic 布局
 
-`screen`、`box`、`vstack`、`hstack`、`text`、`spacer`，以及 `fragment` / `show` / `for` 结构节点。
+`screen`、`box`、`vstack`、`hstack`、`text`、`spacer`，以及 `fragment` / `show` / `for` 结构节点。交互控件请使用 `@bindtty/widgets` 的组合实现。
 
-intrinsic `button` / `input` 在 schema 有定义，但 layout 会抛 `Unsupported layout element`；交互控件请使用 `@bindtty/widgets` 的组合实现。
-
-高级 layout props（width、height、gap、flex、clip/scroll）见 [doc/specs/YOGA_AND_TEXT.md](../../doc/specs/YOGA_AND_TEXT.md) 与 [doc/packages/LAYOUT.md](../../doc/packages/LAYOUT.md)。默认 engine 为 `YogaLayoutEngine`。
+高级 layout props 见 [doc/specs/LAYOUT_PROPS.md](../../doc/specs/LAYOUT_PROPS.md)（支持矩阵；运行 `npm run gen:layout-props` 同步文档）。默认 engine 为 `YogaLayoutEngine`。
 
 ## 文档
 
+- [doc/specs/LAYOUT_PROPS.md](../../doc/specs/LAYOUT_PROPS.md) — layout prop 支持矩阵
 - [doc/packages/LAYOUT.md](../../doc/packages/LAYOUT.md) — 包落地设计
 - [doc/specs/YOGA_AND_TEXT.md](../../doc/specs/YOGA_AND_TEXT.md) — text + Yoga 摘要
 - [doc/specs/SCROLL_VIEWPORT.md](../../doc/specs/SCROLL_VIEWPORT.md) — clip / scroll

package/dist/basic-engine.js

@@ -1,81 +1,6 @@
 import { layoutText, readTextWrapMode } from "@bindtty/text";
+import { basicSupportedPropsByTag, readOverflow, validateElementProps } from "./layout-props.js";
 import { clampNonNegative, toNonNegativeNumber } from "./measure.js";
-const supportedPropsByTag = {
-    screen: new Set(),
-    vstack: new Set(),
-    hstack: new Set(),
-    box: new Set([
-        "padding",
-        "border",
-        "height",
-        "width",
-        "overflow",
-        "scrollX",
-        "scrollY"
-    ]),
-    text: new Set(["value", "wrap", "color", "bold"]),
-    spacer: new Set(["size"]),
-    button: new Set(["value", "disabled"]),
-    input: new Set(["value", "placeholder"])
-};
-const futureLayoutProps = new Set([
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "paddingX",
-    "paddingY",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "margin",
-    "marginX",
-    "marginY",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "gap",
-    "flexDirection",
-    "flexWrap",
-    "justifyContent",
-    "alignItems",
-    "flexGrow",
-    "flexShrink"
-]);
-const layoutPropAliases = new Map([
-    ["padding-top", "paddingTop"],
-    ["padding-right", "paddingRight"],
-    ["padding-bottom", "paddingBottom"],
-    ["padding-left", "paddingLeft"],
-    ["padding-x", "paddingX"],
-    ["padding-y", "paddingY"],
-    ["margin-top", "marginTop"],
-    ["margin-right", "marginRight"],
-    ["margin-bottom", "marginBottom"],
-    ["margin-left", "marginLeft"],
-    ["margin-x", "marginX"],
-    ["margin-y", "marginY"],
-    ["flex-direction", "flexDirection"],
-    ["flex-wrap", "flexWrap"],
-    ["justify-content", "justifyContent"],
-    ["align-items", "alignItems"],
-    ["flex-grow", "flexGrow"],
-    ["flex-shrink", "flexShrink"],
-    ["min-width", "minWidth"],
-    ["min-height", "minHeight"],
-    ["max-width", "maxWidth"],
-    ["max-height", "maxHeight"]
-]);
-const nonLayoutProps = new Set([
-    "id",
-    "focusStyle",
-    "onKey",
-    "onFocusChange"
-]);
 export function createBasicLayoutEngine() {
     return {
         layout(root, options) {
@@ -104,7 +29,7 @@ function measureNode(node, constraint) {
     }
 }
 function measureElement(node, constraint) {
-    validateElementProps(node);
+    validateElementProps(node, basicSupportedPropsByTag[node.tag]);
     switch (node.tag) {
         case "screen":
             return {
@@ -121,9 +46,6 @@ function measureElement(node, constraint) {
             return measureFlowChildren(node.children, "row", constraint);
         case "box":
             return measureBox(node, constraint);
-        case "button":
-        case "input":
-            throw new Error(`Unsupported layout element: ${node.tag}`);
     }
 }
 function measureTextElement(node, constraint) {
@@ -209,7 +131,7 @@ function arrangeStructureNode(node, rect, constraint) {
     };
 }
 function arrangeElement(node, rect, constraint) {
-    validateElementProps(node);
+    validateElementProps(node, basicSupportedPropsByTag[node.tag]);
     switch (node.tag) {
         case "screen":
             return arrangeFlowElement(node, rect, rect, "column", constraint);
@@ -222,9 +144,6 @@ function arrangeElement(node, rect, constraint) {
         case "text":
         case "spacer":
             return createLeafLayout(node, rect);
-        case "button":
-        case "input":
-            throw new Error(`Unsupported layout element: ${node.tag}`);
     }
 }
 function arrangeBox(node, rect, constraint) {
@@ -363,50 +282,12 @@ function getStructureChildren(node) {
             return node.children;
     }
 }
-function validateElementProps(node) {
-    const supportedProps = supportedPropsByTag[node.tag];
-    const seenCanonicalProps = new Map();
-    const canonicalProps = [];
-    for (const propName of Object.keys(node.props)) {
-        if (nonLayoutProps.has(propName)) {
-            continue;
-        }
-        const canonicalName = layoutPropAliases.get(propName) ?? propName;
-        const previousName = seenCanonicalProps.get(canonicalName);
-        if (previousName && previousName !== propName) {
-            throw new Error(`Duplicate layout prop: ${canonicalName} / ${propName}`);
-        }
-        seenCanonicalProps.set(canonicalName, propName);
-        canonicalProps.push(canonicalName);
-    }
-    for (const canonicalName of canonicalProps) {
-        if (!supportedProps.has(canonicalName) &&
-            futureLayoutProps.has(canonicalName)) {
-            throw new Error(`Unsupported layout prop: ${canonicalName}`);
-        }
-    }
-    if (node.tag === "box") {
-        readOverflow(node.props.overflow);
-    }
-    if (node.tag === "text") {
-        readTextWrapMode(node.props.wrap);
-    }
-}
 function readOptionalSize(value) {
     if (value === null || value === undefined) {
         return undefined;
     }
     return toNonNegativeNumber(value);
 }
-function readOverflow(value) {
-    if (value === null || value === undefined) {
-        return "visible";
-    }
-    if (value === "visible" || value === "clip") {
-        return value;
-    }
-    throw new Error(`Unsupported overflow value: ${String(value)}`);
-}
 function readScrollOffset(value) {
     return Math.floor(toNonNegativeNumber(value));
 }

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { createBasicLayoutEngine } from "./basic-engine.js";
 export { createYogaLayoutEngine } from "./yoga-engine.js";
 export { layoutRoot } from "./layout.js";
+export { basicSupportedPropsByTag, futureLayoutProps, getLayoutPropMatrixStatus, matrixLayoutProps, resolveMargin, resolvePadding, yogaSupportedPropsByTag } from "./layout-props.js";
+export type { BoxMarginEdges, BoxPaddingEdges, LayoutElementTag, LayoutPropMatrixStatus, MatrixLayoutProp } from "./layout-props.js";
 export { createZeroRect } from "./measure.js";
 export type { LayoutFlow } from "./intrinsic.js";
 export type { LayoutEngine, LayoutEngineOptions, LayoutNode, LayoutOptions, LayoutRect, LayoutScrollOffset, LayoutSize, LayoutViewport } from "./types.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { createBasicLayoutEngine } from "./basic-engine.js";
 export { createYogaLayoutEngine } from "./yoga-engine.js";
 export { layoutRoot } from "./layout.js";
+export { basicSupportedPropsByTag, futureLayoutProps, getLayoutPropMatrixStatus, matrixLayoutProps, resolveMargin, resolvePadding, yogaSupportedPropsByTag } from "./layout-props.js";
 export { createZeroRect } from "./measure.js";

package/dist/layout-props.d.ts

@@ -0,0 +1,24 @@
+import type { MountedElementNode } from "@bindtty/vnode";
+export type LayoutOverflow = "visible" | "clip";
+export type LayoutElementTag = MountedElementNode["tag"];
+export declare const yogaSupportedPropsByTag: Record<LayoutElementTag, ReadonlySet<string>>;
+export declare const basicSupportedPropsByTag: Record<LayoutElementTag, ReadonlySet<string>>;
+export declare const futureLayoutProps: Set<string>;
+export declare const layoutPropAliases: Map<string, string>;
+export declare const nonLayoutProps: Set<string>;
+export declare const matrixLayoutProps: readonly ["width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "border", "overflow", "scrollX", "scrollY", "gap", "flexWrap", "justifyContent", "alignItems", "flexGrow", "flexShrink", "flexDirection"];
+export type MatrixLayoutProp = (typeof matrixLayoutProps)[number];
+export type LayoutPropMatrixStatus = "supported" | "future" | "na";
+export interface BoxPaddingEdges {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type BoxMarginEdges = BoxPaddingEdges;
+export declare function resolvePadding(props: Record<string, unknown>): BoxPaddingEdges;
+export declare function resolveMargin(props: Record<string, unknown>): BoxMarginEdges;
+export declare function getLayoutPropMatrixStatus(tag: LayoutElementTag, prop: MatrixLayoutProp, engine?: "yoga" | "basic"): LayoutPropMatrixStatus;
+export declare function readLayoutProp(props: Record<string, unknown>, canonicalName: string): unknown;
+export declare function readOverflow(value: unknown): LayoutOverflow;
+export declare function validateElementProps(node: MountedElementNode, supportedProps: ReadonlySet<string>): void;

package/dist/layout-props.js

@@ -0,0 +1,288 @@
+import { readTextWrapMode } from "@bindtty/text";
+import { toNonNegativeNumber } from "./measure.js";
+const yogaMinMaxSizeProps = [
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight"
+];
+const yogaBoxEdgePaddingProps = [
+    "paddingX",
+    "paddingY",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft"
+];
+const yogaMarginProps = [
+    "margin",
+    "marginX",
+    "marginY",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft"
+];
+const yogaLayoutItemTags = [
+    ...yogaMinMaxSizeProps,
+    ...yogaMarginProps
+];
+export const yogaSupportedPropsByTag = {
+    screen: new Set([
+        "gap",
+        "flexWrap",
+        "justifyContent",
+        "alignItems",
+        "flexGrow",
+        "flexShrink"
+    ]),
+    vstack: new Set([
+        "gap",
+        "flexWrap",
+        "justifyContent",
+        "alignItems",
+        "flexGrow",
+        "flexShrink",
+        ...yogaLayoutItemTags
+    ]),
+    hstack: new Set([
+        "gap",
+        "flexWrap",
+        "justifyContent",
+        "alignItems",
+        "flexGrow",
+        "flexShrink",
+        ...yogaLayoutItemTags
+    ]),
+    box: new Set([
+        "padding",
+        "border",
+        "height",
+        "width",
+        "overflow",
+        "scrollX",
+        "scrollY",
+        "gap",
+        "flexWrap",
+        "justifyContent",
+        "alignItems",
+        "flexGrow",
+        "flexShrink",
+        ...yogaLayoutItemTags,
+        ...yogaBoxEdgePaddingProps
+    ]),
+    text: new Set([
+        "value",
+        "wrap",
+        "color",
+        "bold",
+        "flexGrow",
+        "flexShrink",
+        ...yogaLayoutItemTags
+    ]),
+    spacer: new Set(["size", "flexGrow", "flexShrink", ...yogaLayoutItemTags])
+};
+export const basicSupportedPropsByTag = {
+    screen: new Set(),
+    vstack: new Set(),
+    hstack: new Set(),
+    box: new Set([
+        "padding",
+        "border",
+        "height",
+        "width",
+        "overflow",
+        "scrollX",
+        "scrollY"
+    ]),
+    text: new Set(["value", "wrap", "color", "bold"]),
+    spacer: new Set(["size"])
+};
+export const futureLayoutProps = new Set([
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "paddingX",
+    "paddingY",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginX",
+    "marginY",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "gap",
+    "flexDirection",
+    "flexWrap",
+    "justifyContent",
+    "alignItems",
+    "flexGrow",
+    "flexShrink"
+]);
+export const layoutPropAliases = new Map([
+    ["padding-top", "paddingTop"],
+    ["padding-right", "paddingRight"],
+    ["padding-bottom", "paddingBottom"],
+    ["padding-left", "paddingLeft"],
+    ["padding-x", "paddingX"],
+    ["padding-y", "paddingY"],
+    ["margin-top", "marginTop"],
+    ["margin-right", "marginRight"],
+    ["margin-bottom", "marginBottom"],
+    ["margin-left", "marginLeft"],
+    ["margin-x", "marginX"],
+    ["margin-y", "marginY"],
+    ["flex-direction", "flexDirection"],
+    ["flex-wrap", "flexWrap"],
+    ["justify-content", "justifyContent"],
+    ["align-items", "alignItems"],
+    ["flex-grow", "flexGrow"],
+    ["flex-shrink", "flexShrink"],
+    ["min-width", "minWidth"],
+    ["min-height", "minHeight"],
+    ["max-width", "maxWidth"],
+    ["max-height", "maxHeight"]
+]);
+export const nonLayoutProps = new Set([
+    "id",
+    "focusStyle",
+    "focusable",
+    "onKeyCapture",
+    "onKey",
+    "onFocusChange"
+]);
+export const matrixLayoutProps = [
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginX",
+    "marginY",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "border",
+    "overflow",
+    "scrollX",
+    "scrollY",
+    "gap",
+    "flexWrap",
+    "justifyContent",
+    "alignItems",
+    "flexGrow",
+    "flexShrink",
+    "flexDirection"
+];
+export function resolvePadding(props) {
+    const base = toNonNegativeNumber(readLayoutProp(props, "padding"));
+    const paddingX = readLayoutProp(props, "paddingX");
+    const paddingY = readLayoutProp(props, "paddingY");
+    const axisX = paddingX !== undefined ? toNonNegativeNumber(paddingX) : base;
+    const axisY = paddingY !== undefined ? toNonNegativeNumber(paddingY) : base;
+    const top = readLayoutProp(props, "paddingTop");
+    const right = readLayoutProp(props, "paddingRight");
+    const bottom = readLayoutProp(props, "paddingBottom");
+    const left = readLayoutProp(props, "paddingLeft");
+    return {
+        top: top !== undefined ? toNonNegativeNumber(top) : axisY,
+        right: right !== undefined ? toNonNegativeNumber(right) : axisX,
+        bottom: bottom !== undefined ? toNonNegativeNumber(bottom) : axisY,
+        left: left !== undefined ? toNonNegativeNumber(left) : axisX
+    };
+}
+export function resolveMargin(props) {
+    const base = toNonNegativeNumber(readLayoutProp(props, "margin"));
+    const marginX = readLayoutProp(props, "marginX");
+    const marginY = readLayoutProp(props, "marginY");
+    const axisX = marginX !== undefined ? toNonNegativeNumber(marginX) : base;
+    const axisY = marginY !== undefined ? toNonNegativeNumber(marginY) : base;
+    const top = readLayoutProp(props, "marginTop");
+    const right = readLayoutProp(props, "marginRight");
+    const bottom = readLayoutProp(props, "marginBottom");
+    const left = readLayoutProp(props, "marginLeft");
+    return {
+        top: top !== undefined ? toNonNegativeNumber(top) : axisY,
+        right: right !== undefined ? toNonNegativeNumber(right) : axisX,
+        bottom: bottom !== undefined ? toNonNegativeNumber(bottom) : axisY,
+        left: left !== undefined ? toNonNegativeNumber(left) : axisX
+    };
+}
+export function getLayoutPropMatrixStatus(tag, prop, engine = "yoga") {
+    const supportedProps = engine === "yoga" ? yogaSupportedPropsByTag[tag] : basicSupportedPropsByTag[tag];
+    if (supportedProps.has(prop)) {
+        return "supported";
+    }
+    if (futureLayoutProps.has(prop)) {
+        return "future";
+    }
+    return "na";
+}
+export function readLayoutProp(props, canonicalName) {
+    if (hasOwn(props, canonicalName)) {
+        return props[canonicalName];
+    }
+    for (const [alias, canonical] of layoutPropAliases) {
+        if (canonical === canonicalName && hasOwn(props, alias)) {
+            return props[alias];
+        }
+    }
+    return undefined;
+}
+export function readOverflow(value) {
+    if (value === null || value === undefined) {
+        return "visible";
+    }
+    if (value === "visible" || value === "clip") {
+        return value;
+    }
+    throw new Error(`Unsupported overflow value: ${String(value)}`);
+}
+export function validateElementProps(node, supportedProps) {
+    const seenCanonicalProps = new Map();
+    const canonicalProps = [];
+    for (const propName of Object.keys(node.props)) {
+        if (nonLayoutProps.has(propName)) {
+            continue;
+        }
+        const canonicalName = layoutPropAliases.get(propName) ?? propName;
+        const previousName = seenCanonicalProps.get(canonicalName);
+        if (previousName && previousName !== propName) {
+            throw new Error(`Duplicate layout prop: ${canonicalName} / ${propName}`);
+        }
+        seenCanonicalProps.set(canonicalName, propName);
+        canonicalProps.push(canonicalName);
+    }
+    for (const canonicalName of canonicalProps) {
+        if (!supportedProps.has(canonicalName) &&
+            futureLayoutProps.has(canonicalName)) {
+            throw new Error(`Unsupported layout prop: ${canonicalName}`);
+        }
+    }
+    if (node.tag === "box") {
+        readOverflow(node.props.overflow);
+    }
+    if (node.tag === "text") {
+        readTextWrapMode(node.props.wrap);
+    }
+}
+function hasOwn(object, key) {
+    return Object.prototype.hasOwnProperty.call(object, key);
+}

package/dist/yoga-engine.js

@@ -1,109 +1,7 @@
 import Yoga from "yoga-layout";
 import { layoutText, readTextWrapMode } from "@bindtty/text";
+import { readLayoutProp, readOverflow, resolveMargin, resolvePadding, validateElementProps, yogaSupportedPropsByTag } from "./layout-props.js";
 import { clampNonNegative, toNonNegativeNumber } from "./measure.js";
-const supportedPropsByTag = {
-    screen: new Set([
-        "gap",
-        "flexWrap",
-        "justifyContent",
-        "alignItems",
-        "flexGrow",
-        "flexShrink"
-    ]),
-    vstack: new Set([
-        "gap",
-        "flexWrap",
-        "justifyContent",
-        "alignItems",
-        "flexGrow",
-        "flexShrink"
-    ]),
-    hstack: new Set([
-        "gap",
-        "flexWrap",
-        "justifyContent",
-        "alignItems",
-        "flexGrow",
-        "flexShrink"
-    ]),
-    box: new Set([
-        "padding",
-        "border",
-        "height",
-        "width",
-        "overflow",
-        "scrollX",
-        "scrollY",
-        "gap",
-        "flexWrap",
-        "justifyContent",
-        "alignItems",
-        "flexGrow",
-        "flexShrink"
-    ]),
-    text: new Set(["value", "wrap", "color", "bold", "flexGrow", "flexShrink"]),
-    spacer: new Set(["size", "flexGrow", "flexShrink"]),
-    button: new Set(["value", "disabled", "flexGrow", "flexShrink"]),
-    input: new Set(["value", "placeholder", "flexGrow", "flexShrink"])
-};
-const futureLayoutProps = new Set([
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "paddingX",
-    "paddingY",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "margin",
-    "marginX",
-    "marginY",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "gap",
-    "flexDirection",
-    "flexWrap",
-    "justifyContent",
-    "alignItems",
-    "flexGrow",
-    "flexShrink"
-]);
-const layoutPropAliases = new Map([
-    ["padding-top", "paddingTop"],
-    ["padding-right", "paddingRight"],
-    ["padding-bottom", "paddingBottom"],
-    ["padding-left", "paddingLeft"],
-    ["padding-x", "paddingX"],
-    ["padding-y", "paddingY"],
-    ["margin-top", "marginTop"],
-    ["margin-right", "marginRight"],
-    ["margin-bottom", "marginBottom"],
-    ["margin-left", "marginLeft"],
-    ["margin-x", "marginX"],
-    ["margin-y", "marginY"],
-    ["flex-direction", "flexDirection"],
-    ["flex-wrap", "flexWrap"],
-    ["justify-content", "justifyContent"],
-    ["align-items", "alignItems"],
-    ["flex-grow", "flexGrow"],
-    ["flex-shrink", "flexShrink"],
-    ["min-width", "minWidth"],
-    ["min-height", "minHeight"],
-    ["max-width", "maxWidth"],
-    ["max-height", "maxHeight"]
-]);
-const nonLayoutProps = new Set([
-    "id",
-    "focusStyle",
-    "onKey",
-    "onFocusChange"
-]);
 const defaultYogaAdapter = {
     createNode() {
         return Yoga.Node.create();
@@ -170,8 +68,10 @@ function configureYogaNode(entry, inheritedFlow, options) {
     }
 }
 function configureYogaElement(node, yogaNode, inheritedFlow, options) {
-    validateElementProps(node);
+    validateElementProps(node, yogaSupportedPropsByTag[node.tag]);
     applyYogaItemProps(node, yogaNode);
+    applyYogaSizeProps(node, yogaNode);
+    applyYogaMarginProps(node, yogaNode);
     switch (node.tag) {
         case "screen":
             yogaNode.setWidth(options.viewport.width);
@@ -196,14 +96,10 @@ function configureYogaElement(node, yogaNode, inheritedFlow, options) {
         case "spacer":
             configureYogaSpacer(node, yogaNode, inheritedFlow);
             return;
-        case "button":
-        case "input":
-            throw new Error(`Unsupported layout element: ${node.tag}`);
     }
 }
 function configureYogaBox(node, yogaNode) {
     const border = node.props.border ? 1 : 0;
-    const padding = toNonNegativeNumber(node.props.padding);
     const width = readOptionalSize(node.props.width);
     const height = readOptionalSize(node.props.height);
     const overflow = readOverflow(node.props.overflow);
@@ -218,13 +114,26 @@ function configureYogaBox(node, yogaNode) {
     if (border > 0) {
         yogaNode.setBorder(Yoga.EDGE_ALL, border);
     }
-    if (padding > 0) {
-        yogaNode.setPadding(Yoga.EDGE_ALL, padding);
-    }
+    applyYogaBoxPadding(node, yogaNode);
     if (overflow === "clip" || hasOwn(node.props, "scrollX") || hasOwn(node.props, "scrollY")) {
         yogaNode.setOverflow(Yoga.OVERFLOW_HIDDEN);
     }
 }
+function applyYogaBoxPadding(node, yogaNode) {
+    const padding = resolvePadding(node.props);
+    if (padding.top > 0) {
+        yogaNode.setPadding(Yoga.EDGE_TOP, padding.top);
+    }
+    if (padding.right > 0) {
+        yogaNode.setPadding(Yoga.EDGE_RIGHT, padding.right);
+    }
+    if (padding.bottom > 0) {
+        yogaNode.setPadding(Yoga.EDGE_BOTTOM, padding.bottom);
+    }
+    if (padding.left > 0) {
+        yogaNode.setPadding(Yoga.EDGE_LEFT, padding.left);
+    }
+}
 function configureYogaText(node, yogaNode) {
     const text = String(node.props.value ?? "");
     const wrap = readTextWrapMode(node.props.wrap);
@@ -294,12 +203,13 @@ function readContentRect(entry, rect) {
     if (entry.mounted.kind !== "element" || entry.mounted.tag !== "box") {
         return rect;
     }
-    const inset = getBoxInset(entry.mounted);
+    const borderSize = entry.mounted.props.border ? 1 : 0;
+    const padding = resolvePadding(entry.mounted.props);
     return {
-        x: rect.x + inset,
-        y: rect.y + inset,
-        width: clampNonNegative(rect.width - inset * 2),
-        height: clampNonNegative(rect.height - inset * 2)
+        x: rect.x + borderSize + padding.left,
+        y: rect.y + borderSize + padding.top,
+        width: clampNonNegative(rect.width - borderSize * 2 - padding.left - padding.right),
+        height: clampNonNegative(rect.height - borderSize * 2 - padding.top - padding.bottom)
     };
 }
 function applyBoxMetadata(node, layout) {
@@ -327,8 +237,11 @@ function readContentSize(layout) {
     let width = layout.contentRect.width;
     let height = layout.contentRect.height;
     for (const child of layout.children) {
-        width = Math.max(width, child.rect.x + child.rect.width - layout.contentRect.x);
-        height = Math.max(height, child.rect.y + child.rect.height - layout.contentRect.y);
+        const margin = child.mounted.kind === "element"
+            ? resolveMargin(child.mounted.props)
+            : { top: 0, right: 0, bottom: 0, left: 0 };
+        width = Math.max(width, child.rect.x + child.rect.width + margin.right - layout.contentRect.x);
+        height = Math.max(height, child.rect.y + child.rect.height + margin.bottom - layout.contentRect.y);
     }
     return {
         width: clampNonNegative(width),
@@ -359,35 +272,6 @@ function getStructureChildren(node) {
             return node.children;
     }
 }
-function validateElementProps(node) {
-    const supportedProps = supportedPropsByTag[node.tag];
-    const seenCanonicalProps = new Map();
-    const canonicalProps = [];
-    for (const propName of Object.keys(node.props)) {
-        if (nonLayoutProps.has(propName)) {
-            continue;
-        }
-        const canonicalName = layoutPropAliases.get(propName) ?? propName;
-        const previousName = seenCanonicalProps.get(canonicalName);
-        if (previousName && previousName !== propName) {
-            throw new Error(`Duplicate layout prop: ${canonicalName} / ${propName}`);
-        }
-        seenCanonicalProps.set(canonicalName, propName);
-        canonicalProps.push(canonicalName);
-    }
-    for (const canonicalName of canonicalProps) {
-        if (!supportedProps.has(canonicalName) &&
-            futureLayoutProps.has(canonicalName)) {
-            throw new Error(`Unsupported layout prop: ${canonicalName}`);
-        }
-    }
-    if (node.tag === "box") {
-        readOverflow(node.props.overflow);
-    }
-    if (node.tag === "text") {
-        readTextWrapMode(node.props.wrap);
-    }
-}
 function getMeasureWidth(width, widthMode, wrap) {
     if (wrap === "legacy" || widthMode === Yoga.MEASURE_MODE_UNDEFINED) {
         return undefined;
@@ -417,6 +301,39 @@ function applyYogaItemProps(node, yogaNode) {
         yogaNode.setFlexShrink(flexShrink);
     }
 }
+function applyYogaSizeProps(node, yogaNode) {
+    const minWidth = readOptionalSize(readLayoutProp(node.props, "minWidth"));
+    const minHeight = readOptionalSize(readLayoutProp(node.props, "minHeight"));
+    const maxWidth = readOptionalSize(readLayoutProp(node.props, "maxWidth"));
+    const maxHeight = readOptionalSize(readLayoutProp(node.props, "maxHeight"));
+    if (minWidth !== undefined) {
+        yogaNode.setMinWidth(minWidth);
+    }
+    if (minHeight !== undefined) {
+        yogaNode.setMinHeight(minHeight);
+    }
+    if (maxWidth !== undefined) {
+        yogaNode.setMaxWidth(maxWidth);
+    }
+    if (maxHeight !== undefined) {
+        yogaNode.setMaxHeight(maxHeight);
+    }
+}
+function applyYogaMarginProps(node, yogaNode) {
+    const margin = resolveMargin(node.props);
+    if (margin.top > 0) {
+        yogaNode.setMargin(Yoga.EDGE_TOP, margin.top);
+    }
+    if (margin.right > 0) {
+        yogaNode.setMargin(Yoga.EDGE_RIGHT, margin.right);
+    }
+    if (margin.bottom > 0) {
+        yogaNode.setMargin(Yoga.EDGE_BOTTOM, margin.bottom);
+    }
+    if (margin.left > 0) {
+        yogaNode.setMargin(Yoga.EDGE_LEFT, margin.left);
+    }
+}
 function applyYogaContainerProps(node, yogaNode) {
     const gap = readOptionalSize(readLayoutProp(node.props, "gap"));
     const flexWrap = readLayoutProp(node.props, "flexWrap");
@@ -481,35 +398,12 @@ function readYogaJustifyContent(value) {
             throw new Error(`Unsupported justifyContent value: ${String(value)}`);
     }
 }
-function readLayoutProp(props, canonicalName) {
-    if (hasOwn(props, canonicalName)) {
-        return props[canonicalName];
-    }
-    for (const [alias, canonical] of layoutPropAliases) {
-        if (canonical === canonicalName && hasOwn(props, alias)) {
-            return props[alias];
-        }
-    }
-    return undefined;
-}
-function getBoxInset(node) {
-    return (node.props.border ? 1 : 0) + toNonNegativeNumber(node.props.padding);
-}
 function readOptionalSize(value) {
     if (value === null || value === undefined) {
         return undefined;
     }
     return toNonNegativeNumber(value);
 }
-function readOverflow(value) {
-    if (value === null || value === undefined) {
-        return "visible";
-    }
-    if (value === "visible" || value === "clip") {
-        return value;
-    }
-    throw new Error(`Unsupported overflow value: ${String(value)}`);
-}
 function readScrollOffset(value) {
     return Math.floor(toNonNegativeNumber(value));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bindtty/layout",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "type": "module",
   "description": "Layout tree generation for BindTTY mounted nodes.",
   "main": "./dist/index.js",
@@ -21,14 +21,14 @@
     "test": "npm run build --workspace @bindtty/text && npm run build --workspace @bindtty/vnode && npm run build --workspace @bindtty/jsx-runtime && npm run build --workspace @bindtty/runtime && npm run build && tsc -p test/tsconfig.json && node --test test/dist/*.test.js"
   },
   "dependencies": {
-    "@bindtty/text": "0.1.0-alpha.1",
-    "@bindtty/vnode": "0.1.0-alpha.1",
+    "@bindtty/text": "0.1.0-alpha.3",
+    "@bindtty/vnode": "0.1.0-alpha.3",
     "yoga-layout": "3.2.1"
   },
   "devDependencies": {
-    "@bindtty/jsx-runtime": "0.1.0-alpha.1",
-    "@bindtty/runtime": "0.1.0-alpha.1",
-    "@bindtty/signal": "0.1.0-alpha.1",
+    "@bindtty/jsx-runtime": "0.1.0-alpha.3",
+    "@bindtty/runtime": "0.1.0-alpha.3",
+    "@bindtty/signal": "0.1.0-alpha.3",
     "@types/node": "^22.0.0",
     "typescript": "^5.5.0"
   },