@bindtty/layout 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,29 @@
+# @bindtty/layout
+
+Layout tree generation for BindTTY mounted nodes.
+
+将 `MountedNode` 树转换为带绝对坐标的 `LayoutNode` 树，供 `@bindtty/renderer-terminal` 绘制。
+
+## API
+
+```ts
+import { layoutRoot, createBasicLayoutEngine } from "@bindtty/layout";
+
+const layoutTree = layoutRoot(runtime.root, {
+  viewport: { width: 80, height: 24 }
+});
+```
+
+## 已支持的 intrinsic 布局
+
+`screen`、`box`、`vstack`、`hstack`、`text`、`spacer`，以及 `fragment` / `show` / `for` 结构节点。
+
+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`。
+
+## 文档
+
+- [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.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutEngine } from "./types.js";
+export declare function createBasicLayoutEngine(): LayoutEngine;

package/dist/basic-engine.js

@@ -0,0 +1,418 @@
+import { layoutText, readTextWrapMode } from "@bindtty/text";
+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) {
+            if (!root) {
+                return null;
+            }
+            const constraint = {
+                width: options.viewport.width,
+                height: options.viewport.height,
+                flow: "column"
+            };
+            const measured = measureNode(root, constraint);
+            const rect = createRootRect(root, measured, options);
+            return arrangeNode(root, rect, constraint);
+        }
+    };
+}
+function measureNode(node, constraint) {
+    switch (node.kind) {
+        case "element":
+            return measureElement(node, constraint);
+        case "fragment":
+        case "show":
+        case "for":
+            return measureFlowChildren(getStructureChildren(node), constraint.flow, constraint);
+    }
+}
+function measureElement(node, constraint) {
+    validateElementProps(node);
+    switch (node.tag) {
+        case "screen":
+            return {
+                width: constraint.width,
+                height: constraint.height
+            };
+        case "text":
+            return measureTextElement(node, constraint);
+        case "spacer":
+            return measureSpacer(node, constraint);
+        case "vstack":
+            return measureFlowChildren(node.children, "column", constraint);
+        case "hstack":
+            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) {
+    const text = String(node.props.value ?? "");
+    const wrap = readTextWrapMode(node.props.wrap);
+    const layout = layoutText(text, {
+        width: wrap === "legacy" ? undefined : constraint.width,
+        wrap
+    });
+    return {
+        width: layout.width,
+        height: layout.height
+    };
+}
+function measureSpacer(node, constraint) {
+    const size = toNonNegativeNumber(node.props.size);
+    if (constraint.flow === "row") {
+        return {
+            width: size,
+            height: constraint.height
+        };
+    }
+    return {
+        width: constraint.width,
+        height: size
+    };
+}
+function measureBox(node, constraint) {
+    const edges = getBoxEdges(node);
+    const inset = getBoxInset(edges);
+    const width = readOptionalSize(node.props.width);
+    const height = readOptionalSize(node.props.height);
+    const contentConstraint = {
+        ...shrinkConstraint(constraint, edges),
+        ...(width === undefined
+            ? {}
+            : { width: clampNonNegative(width - inset * 2) }),
+        ...(height === undefined
+            ? {}
+            : { height: clampNonNegative(height - inset * 2) })
+    };
+    const childrenSize = measureFlowChildren(node.children, "column", contentConstraint);
+    return {
+        width: width ?? childrenSize.width + inset * 2,
+        height: height ?? childrenSize.height + inset * 2
+    };
+}
+function measureFlowChildren(children, flow, constraint) {
+    let width = 0;
+    let height = 0;
+    for (const child of children) {
+        const childSize = measureNode(child, {
+            ...constraint,
+            flow
+        });
+        if (flow === "row") {
+            width += childSize.width;
+            height = Math.max(height, childSize.height);
+        }
+        else {
+            width = Math.max(width, childSize.width);
+            height += childSize.height;
+        }
+    }
+    return { width, height };
+}
+function arrangeNode(node, rect, constraint) {
+    switch (node.kind) {
+        case "element":
+            return arrangeElement(node, rect, constraint);
+        case "fragment":
+        case "show":
+        case "for":
+            return arrangeStructureNode(node, rect, constraint);
+    }
+}
+function arrangeStructureNode(node, rect, constraint) {
+    return {
+        mounted: node,
+        rect,
+        contentRect: rect,
+        children: arrangeFlowChildren(getStructureChildren(node), rect, constraint.flow, constraint)
+    };
+}
+function arrangeElement(node, rect, constraint) {
+    validateElementProps(node);
+    switch (node.tag) {
+        case "screen":
+            return arrangeFlowElement(node, rect, rect, "column", constraint);
+        case "vstack":
+            return arrangeFlowElement(node, rect, rect, "column", constraint);
+        case "hstack":
+            return arrangeFlowElement(node, rect, rect, "row", constraint);
+        case "box":
+            return arrangeBox(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) {
+    const edges = getBoxEdges(node);
+    const inset = getBoxInset(edges);
+    const contentRect = {
+        x: rect.x + inset,
+        y: rect.y + inset,
+        width: clampNonNegative(rect.width - inset * 2),
+        height: clampNonNegative(rect.height - inset * 2)
+    };
+    const contentConstraint = {
+        ...constraint,
+        width: contentRect.width,
+        height: contentRect.height
+    };
+    const layout = arrangeFlowElement(node, rect, contentRect, "column", contentConstraint);
+    const overflow = readOverflow(node.props.overflow);
+    const hasScrollX = hasOwn(node.props, "scrollX");
+    const hasScrollY = hasOwn(node.props, "scrollY");
+    if (overflow === "clip") {
+        layout.clip = contentRect;
+    }
+    if (overflow === "clip" || hasScrollX || hasScrollY) {
+        const naturalContentSize = measureFlowChildren(node.children, "column", contentConstraint);
+        layout.contentSize = {
+            width: Math.max(contentRect.width, naturalContentSize.width),
+            height: Math.max(contentRect.height, naturalContentSize.height)
+        };
+    }
+    if (hasScrollX || hasScrollY) {
+        const contentSize = layout.contentSize ?? {
+            width: contentRect.width,
+            height: contentRect.height
+        };
+        const maxY = clampNonNegative(contentSize.height - contentRect.height);
+        layout.scrollOffset = {
+            x: 0,
+            y: clamp(readScrollOffset(node.props.scrollY), 0, maxY)
+        };
+    }
+    return layout;
+}
+function arrangeFlowElement(node, rect, contentRect, flow, constraint) {
+    return {
+        mounted: node,
+        rect,
+        contentRect,
+        children: arrangeFlowChildren(node.children, contentRect, flow, constraint)
+    };
+}
+function arrangeFlowChildren(children, contentRect, flow, constraint) {
+    const arrangedChildren = [];
+    let cursorX = contentRect.x;
+    let cursorY = contentRect.y;
+    for (const child of children) {
+        const childConstraint = {
+            width: contentRect.width,
+            height: contentRect.height,
+            flow
+        };
+        const childSize = measureNode(child, childConstraint);
+        const childRect = flow === "row"
+            ? {
+                x: cursorX,
+                y: contentRect.y,
+                width: childSize.width,
+                height: childSize.height
+            }
+            : {
+                x: contentRect.x,
+                y: cursorY,
+                width: childSize.width,
+                height: childSize.height
+            };
+        arrangedChildren.push(arrangeNode(child, childRect, childConstraint));
+        if (flow === "row") {
+            cursorX += childSize.width;
+        }
+        else {
+            cursorY += childSize.height;
+        }
+    }
+    return arrangedChildren;
+}
+function createLeafLayout(node, rect) {
+    return {
+        mounted: node,
+        rect,
+        contentRect: rect,
+        children: []
+    };
+}
+function createRootRect(root, measured, options) {
+    if (root.kind === "element" && root.tag === "screen") {
+        return {
+            x: 0,
+            y: 0,
+            width: options.viewport.width,
+            height: options.viewport.height
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: measured.width,
+        height: measured.height
+    };
+}
+function getBoxEdges(node) {
+    return {
+        border: node.props.border ? 1 : 0,
+        padding: toNonNegativeNumber(node.props.padding)
+    };
+}
+function getBoxInset(edges) {
+    return edges.border + edges.padding;
+}
+function shrinkConstraint(constraint, edges) {
+    const inset = getBoxInset(edges) * 2;
+    return {
+        ...constraint,
+        width: clampNonNegative(constraint.width - inset),
+        height: clampNonNegative(constraint.height - inset)
+    };
+}
+function getStructureChildren(node) {
+    switch (node.kind) {
+        case "fragment":
+            return node.children;
+        case "show":
+            return node.activeBranch ? [node.activeBranch] : [];
+        case "for":
+            return node.items.map((item) => item.node);
+        case "element":
+            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));
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function hasOwn(object, key) {
+    return Object.prototype.hasOwnProperty.call(object, key);
+}

package/dist/engine.d.ts

@@ -0,0 +1,3 @@
+export { createBasicLayoutEngine } from "./basic-engine.js";
+export { layoutRoot } from "./layout.js";
+export type { LayoutEngine, LayoutEngineOptions, LayoutOptions } from "./types.js";

package/dist/engine.js

@@ -0,0 +1,2 @@
+export { createBasicLayoutEngine } from "./basic-engine.js";
+export { layoutRoot } from "./layout.js";

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { createBasicLayoutEngine } from "./basic-engine.js";
+export { createYogaLayoutEngine } from "./yoga-engine.js";
+export { layoutRoot } from "./layout.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

@@ -0,0 +1,4 @@
+export { createBasicLayoutEngine } from "./basic-engine.js";
+export { createYogaLayoutEngine } from "./yoga-engine.js";
+export { layoutRoot } from "./layout.js";
+export { createZeroRect } from "./measure.js";

package/dist/intrinsic.d.ts

@@ -0,0 +1,5 @@
+export type LayoutFlow = "row" | "column";
+export interface LayoutSize {
+    width: number;
+    height: number;
+}

package/dist/intrinsic.js

@@ -0,0 +1 @@
+export {};

package/dist/layout.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutNode, LayoutOptions } from "./types.js";
+import type { MountedNode } from "@bindtty/vnode";
+export declare function layoutRoot(root: MountedNode | null, options: LayoutOptions): LayoutNode | null;

package/dist/layout.js

@@ -0,0 +1,7 @@
+import { createYogaLayoutEngine } from "./yoga-engine.js";
+const defaultEngine = createYogaLayoutEngine();
+export function layoutRoot(root, options) {
+    return (options.engine ?? defaultEngine).layout(root, {
+        viewport: options.viewport
+    });
+}

package/dist/measure.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutRect } from "./types.js";
+export declare function createZeroRect(): LayoutRect;
+export declare function clampNonNegative(value: number): number;
+export declare function toNonNegativeNumber(value: unknown, fallback?: number): number;

package/dist/measure.js

@@ -0,0 +1,16 @@
+export function createZeroRect() {
+    return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    };
+}
+export function clampNonNegative(value) {
+    return Math.max(0, value);
+}
+export function toNonNegativeNumber(value, fallback = 0) {
+    return typeof value === "number" && Number.isFinite(value)
+        ? Math.max(0, value)
+        : fallback;
+}

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+import type { MountedNode } from "@bindtty/vnode";
+export interface LayoutRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface LayoutViewport {
+    width: number;
+    height: number;
+}
+export interface LayoutSize {
+    width: number;
+    height: number;
+}
+export interface LayoutScrollOffset {
+    x: number;
+    y: number;
+}
+export interface LayoutNode {
+    mounted: MountedNode;
+    rect: LayoutRect;
+    contentRect: LayoutRect;
+    clip?: LayoutRect;
+    scrollOffset?: LayoutScrollOffset;
+    contentSize?: LayoutSize;
+    children: LayoutNode[];
+}
+export interface LayoutEngineOptions {
+    viewport: LayoutViewport;
+}
+export interface LayoutEngine {
+    layout(root: MountedNode | null, options: LayoutEngineOptions): LayoutNode | null;
+}
+export interface LayoutOptions extends LayoutEngineOptions {
+    engine?: LayoutEngine;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/yoga-engine.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutEngine } from "./types.js";
+export declare function createYogaLayoutEngine(): LayoutEngine;

package/dist/yoga-engine.js

@@ -0,0 +1,521 @@
+import Yoga from "yoga-layout";
+import { layoutText, readTextWrapMode } from "@bindtty/text";
+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();
+    },
+    calculateLayout(node, width, height) {
+        node.calculateLayout(width, height, Yoga.DIRECTION_LTR);
+    },
+    freeRecursive(node) {
+        node.freeRecursive();
+    }
+};
+export function createYogaLayoutEngine() {
+    return {
+        layout(root, options) {
+            if (!root) {
+                return null;
+            }
+            const entry = buildYogaTree(root, "column", options, defaultYogaAdapter);
+            try {
+                defaultYogaAdapter.calculateLayout(entry.yogaNode, getRootLayoutWidth(root, options), getRootLayoutHeight(root, options));
+                return readLayoutTree(entry, options);
+            }
+            finally {
+                defaultYogaAdapter.freeRecursive(entry.yogaNode);
+            }
+        }
+    };
+}
+function buildYogaTree(node, inheritedFlow, options, adapter) {
+    const yogaNode = adapter.createNode();
+    const entry = {
+        mounted: node,
+        yogaNode,
+        children: []
+    };
+    try {
+        configureYogaNode(entry, inheritedFlow, options);
+        const childFlow = getChildFlow(node, inheritedFlow);
+        const children = getStructureChildren(node);
+        for (const child of children) {
+            const childEntry = buildYogaTree(child, childFlow, options, adapter);
+            entry.children.push(childEntry);
+            yogaNode.insertChild(childEntry.yogaNode, entry.children.length - 1);
+        }
+        return entry;
+    }
+    catch (error) {
+        yogaNode.freeRecursive();
+        throw error;
+    }
+}
+function configureYogaNode(entry, inheritedFlow, options) {
+    const { mounted: node, yogaNode } = entry;
+    yogaNode.setBoxSizing(Yoga.BOX_SIZING_BORDER_BOX);
+    switch (node.kind) {
+        case "fragment":
+        case "show":
+        case "for":
+            yogaNode.setFlexDirection(readYogaFlexDirection(inheritedFlow));
+            return;
+        case "element":
+            configureYogaElement(node, yogaNode, inheritedFlow, options);
+            return;
+    }
+}
+function configureYogaElement(node, yogaNode, inheritedFlow, options) {
+    validateElementProps(node);
+    applyYogaItemProps(node, yogaNode);
+    switch (node.tag) {
+        case "screen":
+            yogaNode.setWidth(options.viewport.width);
+            yogaNode.setHeight(options.viewport.height);
+            yogaNode.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
+            applyYogaContainerProps(node, yogaNode);
+            return;
+        case "vstack":
+            yogaNode.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
+            applyYogaContainerProps(node, yogaNode);
+            return;
+        case "hstack":
+            yogaNode.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
+            applyYogaContainerProps(node, yogaNode);
+            return;
+        case "box":
+            configureYogaBox(node, yogaNode);
+            return;
+        case "text":
+            configureYogaText(node, yogaNode);
+            return;
+        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);
+    yogaNode.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
+    applyYogaContainerProps(node, yogaNode);
+    if (width !== undefined) {
+        yogaNode.setWidth(width);
+    }
+    if (height !== undefined) {
+        yogaNode.setHeight(height);
+    }
+    if (border > 0) {
+        yogaNode.setBorder(Yoga.EDGE_ALL, border);
+    }
+    if (padding > 0) {
+        yogaNode.setPadding(Yoga.EDGE_ALL, padding);
+    }
+    if (overflow === "clip" || hasOwn(node.props, "scrollX") || hasOwn(node.props, "scrollY")) {
+        yogaNode.setOverflow(Yoga.OVERFLOW_HIDDEN);
+    }
+}
+function configureYogaText(node, yogaNode) {
+    const text = String(node.props.value ?? "");
+    const wrap = readTextWrapMode(node.props.wrap);
+    yogaNode.setMeasureFunc((width, widthMode, _height, _heightMode) => {
+        const measured = layoutText(text, {
+            width: getMeasureWidth(width, widthMode, wrap),
+            wrap
+        });
+        return measured;
+    });
+}
+function configureYogaSpacer(node, yogaNode, inheritedFlow) {
+    const size = toNonNegativeNumber(node.props.size);
+    if (inheritedFlow === "row") {
+        yogaNode.setWidth(size);
+    }
+    else {
+        yogaNode.setHeight(size);
+    }
+}
+function readLayoutTree(entry, options) {
+    const rootRect = createRootRect(entry, options);
+    return readLayoutEntry(entry, rootRect);
+}
+function readLayoutEntry(entry, rect) {
+    const contentRect = readContentRect(entry, rect);
+    const children = entry.children.map((child) => {
+        const childRect = readChildRect(child, rect);
+        return readLayoutEntry(child, childRect);
+    });
+    const layout = {
+        mounted: entry.mounted,
+        rect,
+        contentRect,
+        children
+    };
+    if (entry.mounted.kind === "element" && entry.mounted.tag === "box") {
+        applyBoxMetadata(entry.mounted, layout);
+    }
+    return layout;
+}
+function createRootRect(entry, options) {
+    if (entry.mounted.kind === "element" && entry.mounted.tag === "screen") {
+        return {
+            x: 0,
+            y: 0,
+            width: options.viewport.width,
+            height: options.viewport.height
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: entry.yogaNode.getComputedWidth(),
+        height: entry.yogaNode.getComputedHeight()
+    };
+}
+function readChildRect(entry, parentRect) {
+    return {
+        x: parentRect.x + entry.yogaNode.getComputedLeft(),
+        y: parentRect.y + entry.yogaNode.getComputedTop(),
+        width: entry.yogaNode.getComputedWidth(),
+        height: entry.yogaNode.getComputedHeight()
+    };
+}
+function readContentRect(entry, rect) {
+    if (entry.mounted.kind !== "element" || entry.mounted.tag !== "box") {
+        return rect;
+    }
+    const inset = getBoxInset(entry.mounted);
+    return {
+        x: rect.x + inset,
+        y: rect.y + inset,
+        width: clampNonNegative(rect.width - inset * 2),
+        height: clampNonNegative(rect.height - inset * 2)
+    };
+}
+function applyBoxMetadata(node, layout) {
+    const overflow = readOverflow(node.props.overflow);
+    const hasScrollX = hasOwn(node.props, "scrollX");
+    const hasScrollY = hasOwn(node.props, "scrollY");
+    if (overflow === "clip") {
+        layout.clip = layout.contentRect;
+    }
+    if (overflow === "clip" || hasScrollX || hasScrollY) {
+        layout.contentSize = readContentSize(layout);
+    }
+    if (hasScrollX || hasScrollY) {
+        const contentSize = layout.contentSize ?? {
+            width: layout.contentRect.width,
+            height: layout.contentRect.height
+        };
+        layout.scrollOffset = {
+            x: clamp(readScrollOffset(node.props.scrollX), 0, clampNonNegative(contentSize.width - layout.contentRect.width)),
+            y: clamp(readScrollOffset(node.props.scrollY), 0, clampNonNegative(contentSize.height - layout.contentRect.height))
+        };
+    }
+}
+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);
+    }
+    return {
+        width: clampNonNegative(width),
+        height: clampNonNegative(height)
+    };
+}
+function getChildFlow(node, inheritedFlow) {
+    if (node.kind !== "element") {
+        return inheritedFlow;
+    }
+    if (node.tag === "hstack") {
+        return "row";
+    }
+    if (node.tag === "screen" || node.tag === "vstack" || node.tag === "box") {
+        return "column";
+    }
+    return inheritedFlow;
+}
+function getStructureChildren(node) {
+    switch (node.kind) {
+        case "fragment":
+            return node.children;
+        case "show":
+            return node.activeBranch ? [node.activeBranch] : [];
+        case "for":
+            return node.items.map((item) => item.node);
+        case "element":
+            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;
+    }
+    return width;
+}
+function readYogaFlexDirection(flow) {
+    return flow === "row" ? Yoga.FLEX_DIRECTION_ROW : Yoga.FLEX_DIRECTION_COLUMN;
+}
+function getRootLayoutWidth(root, options) {
+    return root.kind === "element" && root.tag === "screen"
+        ? options.viewport.width
+        : undefined;
+}
+function getRootLayoutHeight(root, options) {
+    return root.kind === "element" && root.tag === "screen"
+        ? options.viewport.height
+        : undefined;
+}
+function applyYogaItemProps(node, yogaNode) {
+    const flexGrow = readOptionalSize(readLayoutProp(node.props, "flexGrow"));
+    const flexShrink = readOptionalSize(readLayoutProp(node.props, "flexShrink"));
+    if (flexGrow !== undefined) {
+        yogaNode.setFlexGrow(flexGrow);
+    }
+    if (flexShrink !== undefined) {
+        yogaNode.setFlexShrink(flexShrink);
+    }
+}
+function applyYogaContainerProps(node, yogaNode) {
+    const gap = readOptionalSize(readLayoutProp(node.props, "gap"));
+    const flexWrap = readLayoutProp(node.props, "flexWrap");
+    const alignItems = readLayoutProp(node.props, "alignItems");
+    const justifyContent = readLayoutProp(node.props, "justifyContent");
+    if (gap !== undefined) {
+        yogaNode.setGap(Yoga.GUTTER_ALL, gap);
+    }
+    if (flexWrap !== undefined) {
+        yogaNode.setFlexWrap(readYogaFlexWrap(flexWrap));
+    }
+    if (alignItems !== undefined) {
+        yogaNode.setAlignItems(readYogaAlignItems(alignItems));
+    }
+    if (justifyContent !== undefined) {
+        yogaNode.setJustifyContent(readYogaJustifyContent(justifyContent));
+    }
+}
+function readYogaFlexWrap(value) {
+    switch (value) {
+        case "nowrap":
+            return Yoga.WRAP_NO_WRAP;
+        case "wrap":
+            return Yoga.WRAP_WRAP;
+        case "wrap-reverse":
+            return Yoga.WRAP_WRAP_REVERSE;
+        default:
+            throw new Error(`Unsupported flexWrap value: ${String(value)}`);
+    }
+}
+function readYogaAlignItems(value) {
+    switch (value) {
+        case "stretch":
+            return Yoga.ALIGN_STRETCH;
+        case "flex-start":
+            return Yoga.ALIGN_FLEX_START;
+        case "center":
+            return Yoga.ALIGN_CENTER;
+        case "flex-end":
+            return Yoga.ALIGN_FLEX_END;
+        case "baseline":
+            return Yoga.ALIGN_BASELINE;
+        default:
+            throw new Error(`Unsupported alignItems value: ${String(value)}`);
+    }
+}
+function readYogaJustifyContent(value) {
+    switch (value) {
+        case "flex-start":
+            return Yoga.JUSTIFY_FLEX_START;
+        case "center":
+            return Yoga.JUSTIFY_CENTER;
+        case "flex-end":
+            return Yoga.JUSTIFY_FLEX_END;
+        case "space-between":
+            return Yoga.JUSTIFY_SPACE_BETWEEN;
+        case "space-around":
+            return Yoga.JUSTIFY_SPACE_AROUND;
+        case "space-evenly":
+            return Yoga.JUSTIFY_SPACE_EVENLY;
+        default:
+            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));
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function hasOwn(object, key) {
+    return Object.prototype.hasOwnProperty.call(object, key);
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@bindtty/layout",
+  "version": "0.1.0-alpha.1",
+  "type": "module",
+  "description": "Layout tree generation for BindTTY mounted nodes.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build",
+    "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",
+    "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",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.5.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lithdoo/BindTTY.git",
+    "directory": "packages/layout"
+  },
+  "bugs": {
+    "url": "https://github.com/lithdoo/BindTTY/issues"
+  },
+  "homepage": "https://github.com/lithdoo/BindTTY/tree/main/packages/layout#readme"
+}