@tuidom/elements 0.1.0

package/dist/layout/hFlexElement.js

@@ -0,0 +1,134 @@
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export function hflexFixed(value) {
+    return { type: "fixed", value };
+}
+export function hflexFit() {
+    return { type: "fit" };
+}
+export function hflexFill() {
+    return { type: "fill" };
+}
+export class HFlexElement extends TUIElement {
+    addChild(child, style) {
+        if (style.width.type === "fill") {
+            const hasFill = this.getChildren().some((c) => c.layoutStyle.width.type === "fill");
+            if (hasFill) {
+                throw new Error("HFlexElement supports at most one fill child");
+            }
+        }
+        child.layoutStyle = style;
+        this.appendChild(child);
+    }
+    replaceChildren(newChildren) {
+        let fillCount = 0;
+        for (const child of newChildren) {
+            const style = child.layoutStyle;
+            if (style?.width.type === "fill")
+                fillCount++;
+        }
+        if (fillCount > 1) {
+            throw new Error("HFlexElement supports at most one fill child");
+        }
+        this.setChildren(newChildren);
+    }
+    // ─── Intrinsic Size ───
+    getMinIntrinsicWidth(height) {
+        let sum = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.width.type === "fixed") {
+                sum += style.width.value;
+            }
+            else {
+                sum += child.getMinIntrinsicWidth(height);
+            }
+        }
+        return sum;
+    }
+    getMaxIntrinsicWidth(height) {
+        let sum = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.width.type === "fixed") {
+                sum += style.width.value;
+            }
+            else {
+                sum += child.getMaxIntrinsicWidth(height);
+            }
+        }
+        return sum;
+    }
+    getMinIntrinsicHeight(width) {
+        let max = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.height === "fill") {
+                max = Math.max(max, child.getMinIntrinsicHeight(width));
+            }
+            else {
+                max = Math.max(max, style.height);
+            }
+        }
+        return max;
+    }
+    getMaxIntrinsicHeight(width) {
+        let max = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.height === "fill") {
+                max = Math.max(max, child.getMaxIntrinsicHeight(width));
+            }
+            else {
+                max = Math.max(max, style.height);
+            }
+        }
+        return max;
+    }
+    // ─── Layout ───
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        const containerWidth = containerSize.width;
+        const containerHeight = containerSize.height;
+        let fixedSum = 0;
+        let fitSum = 0;
+        let fillChild = null;
+        // Pass 1: measure fixed and fit children
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            const childHeight = style.height === "fill" ? containerHeight : style.height;
+            if (style.width.type === "fixed") {
+                fixedSum += style.width.value;
+            }
+            else if (style.width.type === "fit") {
+                fitSum += child.getMaxIntrinsicWidth(childHeight);
+            }
+            else {
+                fillChild = child;
+            }
+        }
+        // Pass 2: compute fill width and lay out all children
+        const remaining = Math.max(0, containerWidth - fixedSum - fitSum);
+        let currentX = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            // Инвариант вложенности (Н2): дети не вылезают за контейнер — при
+            // нехватке места жадный кламп по остатку в порядке детей.
+            const childHeight = Math.min(style.height === "fill" ? containerHeight : style.height, containerHeight);
+            let childWidth;
+            if (style.width.type === "fixed") {
+                childWidth = style.width.value;
+            }
+            else if (style.width.type === "fit") {
+                childWidth = child.getMaxIntrinsicWidth(childHeight);
+            }
+            else {
+                childWidth = remaining;
+            }
+            childWidth = Math.max(0, Math.min(childWidth, containerWidth - currentX));
+            this.layoutChild(child, currentX, 0, BoxConstraints.tight(new Size(childWidth, childHeight)));
+            currentX += childWidth;
+        }
+        return containerSize;
+    }
+}

package/dist/layout/paddingContainerElement.d.ts

@@ -0,0 +1,30 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export interface Padding {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export declare class PaddingContainerElement extends TUIElement {
+    private child;
+    private top;
+    private right;
+    private bottom;
+    private left;
+    constructor(child: TUIElement | null, padding?: Padding);
+    setChild(child: TUIElement | null): void;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(width: number): number;
+    getMaxIntrinsicHeight(width: number): number;
+    getPaddingTop(): number;
+    setPaddingTop(value: number): void;
+    getPaddingRight(): number;
+    setPaddingRight(value: number): void;
+    getPaddingBottom(): number;
+    setPaddingBottom(value: number): void;
+    getPaddingLeft(): number;
+    setPaddingLeft(value: number): void;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/layout/paddingContainerElement.js

@@ -0,0 +1,88 @@
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export class PaddingContainerElement extends TUIElement {
+    child;
+    top;
+    right;
+    bottom;
+    left;
+    constructor(child, padding) {
+        super();
+        this.child = child;
+        if (this.child)
+            this.appendChild(this.child);
+        this.top = padding?.top ?? 0;
+        this.right = padding?.right ?? 0;
+        this.bottom = padding?.bottom ?? 0;
+        this.left = padding?.left ?? 0;
+    }
+    setChild(child) {
+        if (this.child)
+            this.removeChild(this.child);
+        this.child = child;
+        if (this.child)
+            this.appendChild(this.child);
+        this.markDirty();
+    }
+    getMinIntrinsicWidth(height) {
+        const paddingX = this.left + this.right;
+        if (!this.child)
+            return paddingX;
+        return this.child.getMinIntrinsicWidth(Math.max(0, height - this.top - this.bottom)) + paddingX;
+    }
+    getMaxIntrinsicWidth(height) {
+        const paddingX = this.left + this.right;
+        if (!this.child)
+            return paddingX;
+        return this.child.getMaxIntrinsicWidth(Math.max(0, height - this.top - this.bottom)) + paddingX;
+    }
+    getMinIntrinsicHeight(width) {
+        const paddingY = this.top + this.bottom;
+        if (!this.child)
+            return paddingY;
+        return this.child.getMinIntrinsicHeight(Math.max(0, width - this.left - this.right)) + paddingY;
+    }
+    getMaxIntrinsicHeight(width) {
+        const paddingY = this.top + this.bottom;
+        if (!this.child)
+            return paddingY;
+        return this.child.getMaxIntrinsicHeight(Math.max(0, width - this.left - this.right)) + paddingY;
+    }
+    getPaddingTop() {
+        return this.top;
+    }
+    setPaddingTop(value) {
+        this.top = value;
+        this.markDirty();
+    }
+    getPaddingRight() {
+        return this.right;
+    }
+    setPaddingRight(value) {
+        this.right = value;
+        this.markDirty();
+    }
+    getPaddingBottom() {
+        return this.bottom;
+    }
+    setPaddingBottom(value) {
+        this.bottom = value;
+        this.markDirty();
+    }
+    getPaddingLeft() {
+        return this.left;
+    }
+    setPaddingLeft(value) {
+        this.left = value;
+        this.markDirty();
+    }
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        if (this.child) {
+            const childWidth = Math.max(0, containerSize.width - this.left - this.right);
+            const childHeight = Math.max(0, containerSize.height - this.top - this.bottom);
+            this.layoutChild(this.child, this.left, this.top, BoxConstraints.tight(new Size(childWidth, childHeight)));
+        }
+        return containerSize;
+    }
+}

package/dist/layout/sizedBoxElement.d.ts

@@ -0,0 +1,30 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Контейнер фиксированного «предпочтительного» размера: под входящими
+ * constraints резолвит размер как `preferredWidth`/`preferredHeight`
+ * (заклампленный в `[min, max]`) и кладёт единственного ребёнка tight на этот
+ * размер. Неуказанная ось делегируется max-intrinsic ребёнка (по этой оси
+ * ведёт себя как {@link FitContentElement}).
+ *
+ * Нужен для overlay-виджетов фиксированной ширины: слой даёт loose-constraints
+ * на всю доступную область, а виджету надо занять свой предпочтительный размер
+ * (FitContent тянется по контенту, HFlex/VStack — по детям, выразить нечем).
+ * Полностью theme-agnostic: цветов не знает.
+ */
+export declare class SizedBoxElement extends TUIElement {
+    private child;
+    private preferredWidth;
+    private preferredHeight;
+    constructor(preferredWidth?: number, preferredHeight?: number);
+    setPreferredWidth(value: number | undefined): void;
+    setPreferredHeight(value: number | undefined): void;
+    setChild(child: TUIElement | null): void;
+    getChild(): TUIElement | null;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(width: number): number;
+    getMaxIntrinsicHeight(width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+    render(context: RenderContext): void;
+}

package/dist/layout/sizedBoxElement.js

@@ -0,0 +1,74 @@
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Контейнер фиксированного «предпочтительного» размера: под входящими
+ * constraints резолвит размер как `preferredWidth`/`preferredHeight`
+ * (заклампленный в `[min, max]`) и кладёт единственного ребёнка tight на этот
+ * размер. Неуказанная ось делегируется max-intrinsic ребёнка (по этой оси
+ * ведёт себя как {@link FitContentElement}).
+ *
+ * Нужен для overlay-виджетов фиксированной ширины: слой даёт loose-constraints
+ * на всю доступную область, а виджету надо занять свой предпочтительный размер
+ * (FitContent тянется по контенту, HFlex/VStack — по детям, выразить нечем).
+ * Полностью theme-agnostic: цветов не знает.
+ */
+export class SizedBoxElement extends TUIElement {
+    child = null;
+    preferredWidth;
+    preferredHeight;
+    constructor(preferredWidth, preferredHeight) {
+        super();
+        this.preferredWidth = preferredWidth;
+        this.preferredHeight = preferredHeight;
+    }
+    setPreferredWidth(value) {
+        this.preferredWidth = value;
+        this.markDirty();
+    }
+    setPreferredHeight(value) {
+        this.preferredHeight = value;
+        this.markDirty();
+    }
+    setChild(child) {
+        if (this.child)
+            this.removeChild(this.child);
+        this.child = child;
+        if (this.child)
+            this.appendChild(this.child);
+        this.markDirty();
+    }
+    getChild() {
+        return this.child;
+    }
+    getMinIntrinsicWidth(height) {
+        return this.preferredWidth ?? this.child?.getMinIntrinsicWidth(height) ?? 0;
+    }
+    getMaxIntrinsicWidth(height) {
+        return this.preferredWidth ?? this.child?.getMaxIntrinsicWidth(height) ?? 0;
+    }
+    getMinIntrinsicHeight(width) {
+        return this.preferredHeight ?? this.child?.getMinIntrinsicHeight(width) ?? 0;
+    }
+    getMaxIntrinsicHeight(width) {
+        return this.preferredHeight ?? this.child?.getMaxIntrinsicHeight(width) ?? 0;
+    }
+    performLayout(constraints) {
+        const desiredWidth = this.getMaxIntrinsicWidth(this.preferredHeight ?? 0);
+        const desiredHeight = this.getMaxIntrinsicHeight(desiredWidth);
+        const size = constraints.constrain(new Size(desiredWidth, desiredHeight));
+        super.performLayout(BoxConstraints.tight(size));
+        if (this.child) {
+            this.layoutChild(this.child, 0, 0, BoxConstraints.tight(size));
+        }
+        return size;
+    }
+    render(context) {
+        if (this.child) {
+            // Ребёнок tight к собственному rect'у: клип не может опустеть —
+            // пустой контекст отсёк бы уже прунинг renderChildren родителя.
+            const childOffset = new Offset(this.child.localPosition.dx, this.child.localPosition.dy);
+            const childClip = new Rect(this.child.globalPosition, this.child.layoutSize);
+            this.child.render(context.withOffset(childOffset).withClip(childClip));
+        }
+    }
+}

package/dist/layout/vFlexElement.d.ts

@@ -0,0 +1,32 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export type VFlexChildSize = {
+    type: "fixed";
+    value: number;
+} | {
+    type: "fit";
+} | {
+    type: "fill";
+};
+export interface VFlexLayoutStyle {
+    height: VFlexChildSize;
+    width: number | "fill";
+}
+export declare function vflexFixed(value: number): VFlexChildSize;
+export declare function vflexFit(): VFlexChildSize;
+export declare function vflexFill(): VFlexChildSize;
+/**
+ * Вертикальный flex — зеркало {@link HFlexElement} с переставленными осями:
+ * главная ось — высота (fixed/fit/fill, максимум один fill), поперечная —
+ * ширина (число или "fill" на всю ширину контейнера). JSX-адаптер сознательно
+ * не заведён — добавляется симметрично HFlex при первом JSX-потребителе.
+ */
+export declare class VFlexElement extends TUIElement {
+    addChild(child: TUIElement, style: VFlexLayoutStyle): void;
+    replaceChildren(newChildren: TUIElement[]): void;
+    getMinIntrinsicHeight(width: number): number;
+    getMaxIntrinsicHeight(width: number): number;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/layout/vFlexElement.js

@@ -0,0 +1,136 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export function vflexFixed(value) {
+    return { type: "fixed", value };
+}
+export function vflexFit() {
+    return { type: "fit" };
+}
+export function vflexFill() {
+    return { type: "fill" };
+}
+/**
+ * Вертикальный flex — зеркало {@link HFlexElement} с переставленными осями:
+ * главная ось — высота (fixed/fit/fill, максимум один fill), поперечная —
+ * ширина (число или "fill" на всю ширину контейнера). JSX-адаптер сознательно
+ * не заведён — добавляется симметрично HFlex при первом JSX-потребителе.
+ */
+export class VFlexElement extends TUIElement {
+    addChild(child, style) {
+        if (style.height.type === "fill") {
+            const hasFill = this.getChildren().some((c) => c.layoutStyle.height.type === "fill");
+            if (hasFill) {
+                throw new Error("VFlexElement supports at most one fill child");
+            }
+        }
+        child.layoutStyle = style;
+        this.appendChild(child);
+    }
+    replaceChildren(newChildren) {
+        let fillCount = 0;
+        for (const child of newChildren) {
+            const style = child.layoutStyle;
+            if (style?.height.type === "fill")
+                fillCount++;
+        }
+        if (fillCount > 1) {
+            throw new Error("VFlexElement supports at most one fill child");
+        }
+        this.setChildren(newChildren);
+    }
+    // ─── Intrinsic Size ───
+    getMinIntrinsicHeight(width) {
+        let sum = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.height.type === "fixed") {
+                sum += style.height.value;
+            }
+            else {
+                sum += child.getMinIntrinsicHeight(width);
+            }
+        }
+        return sum;
+    }
+    getMaxIntrinsicHeight(width) {
+        let sum = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.height.type === "fixed") {
+                sum += style.height.value;
+            }
+            else {
+                sum += child.getMaxIntrinsicHeight(width);
+            }
+        }
+        return sum;
+    }
+    getMinIntrinsicWidth(height) {
+        let max = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.width === "fill") {
+                max = Math.max(max, child.getMinIntrinsicWidth(height));
+            }
+            else {
+                max = Math.max(max, style.width);
+            }
+        }
+        return max;
+    }
+    getMaxIntrinsicWidth(height) {
+        let max = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.width === "fill") {
+                max = Math.max(max, child.getMaxIntrinsicWidth(height));
+            }
+            else {
+                max = Math.max(max, style.width);
+            }
+        }
+        return max;
+    }
+    // ─── Layout ───
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        const containerWidth = containerSize.width;
+        const containerHeight = containerSize.height;
+        let fixedSum = 0;
+        let fitSum = 0;
+        // Pass 1: measure fixed and fit children
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            const childWidth = style.width === "fill" ? containerWidth : style.width;
+            if (style.height.type === "fixed") {
+                fixedSum += style.height.value;
+            }
+            else if (style.height.type === "fit") {
+                fitSum += child.getMaxIntrinsicHeight(childWidth);
+            }
+        }
+        // Pass 2: compute fill height and lay out all children
+        const remaining = Math.max(0, containerHeight - fixedSum - fitSum);
+        let currentY = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            // Инвариант вложенности (Н2): дети не вылезают за контейнер — при
+            // нехватке места жадный кламп по остатку в порядке детей.
+            const childWidth = Math.min(style.width === "fill" ? containerWidth : style.width, containerWidth);
+            let childHeight;
+            if (style.height.type === "fixed") {
+                childHeight = style.height.value;
+            }
+            else if (style.height.type === "fit") {
+                childHeight = child.getMaxIntrinsicHeight(childWidth);
+            }
+            else {
+                childHeight = remaining;
+            }
+            childHeight = Math.max(0, Math.min(childHeight, containerHeight - currentY));
+            this.layoutChild(child, 0, currentY, BoxConstraints.tight(new Size(childWidth, childHeight)));
+            currentY += childHeight;
+        }
+        return containerSize;
+    }
+}

package/dist/layout/vStackElement.d.ts

@@ -0,0 +1,18 @@
+import { BoxConstraints, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export interface VStackLayoutStyle {
+    width: number | "fill" | "stretch";
+    height: number;
+}
+export interface VStackLayoutState {
+    rect: Rect;
+}
+export declare class VStackElement extends TUIElement {
+    addChild(child: TUIElement, style: VStackLayoutStyle): void;
+    replaceChildren(newChildren: TUIElement[]): void;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/layout/vStackElement.js

@@ -0,0 +1,74 @@
+import { BoxConstraints, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export class VStackElement extends TUIElement {
+    addChild(child, style) {
+        child.layoutStyle = style;
+        this.appendChild(child);
+    }
+    replaceChildren(newChildren) {
+        this.setChildren(newChildren);
+    }
+    getMinIntrinsicWidth(height) {
+        let max = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.width === "fill" || style.width === "stretch") {
+                max = Math.max(max, child.getMinIntrinsicWidth(height));
+            }
+            else {
+                max = Math.max(max, style.width);
+            }
+        }
+        return max;
+    }
+    getMaxIntrinsicWidth(height) {
+        let max = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            if (style.width === "fill" || style.width === "stretch") {
+                max = Math.max(max, child.getMaxIntrinsicWidth(height));
+            }
+            else {
+                max = Math.max(max, style.width);
+            }
+        }
+        return max;
+    }
+    getMinIntrinsicHeight(_width) {
+        let sum = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            sum += style.height;
+        }
+        return sum;
+    }
+    getMaxIntrinsicHeight(_width) {
+        let sum = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            sum += style.height;
+        }
+        return sum;
+    }
+    performLayout(constraints) {
+        // First, call parent implementation to set allocatedSize and mark as clean
+        const containerSize = super.performLayout(constraints);
+        const containerWidth = containerSize.width;
+        let currentY = 0;
+        for (const child of this.getChildren()) {
+            const style = child.layoutStyle;
+            // Инвариант вложенности (Н2): дети не вылезают за контейнер — при
+            // нехватке места жадный кламп по остатку в порядке детей.
+            const childWidth = Math.min(style.width === "fill" || style.width === "stretch" ? containerWidth : style.width, containerWidth);
+            const childHeight = Math.max(0, Math.min(style.height, containerSize.height - currentY));
+            const childSize = new Size(childWidth, childHeight);
+            // Store in layoutState for compatibility
+            child.layoutState = {
+                rect: new Rect(new Point(0, currentY), childSize),
+            };
+            this.layoutChild(child, 0, currentY, BoxConstraints.tight(childSize));
+            currentY += childHeight;
+        }
+        return containerSize;
+    }
+}