@opentui/core 0.1.2 → 0.1.3

package/3d.js

@@ -33734,6 +33734,64 @@ function getKeyHandler() {
   return keyHandler;
 }
 
+// src/lib/yoga.options.ts
+function parseAlign(value) {
+  switch (value.toLowerCase()) {
+    case "auto":
+      return Align.Auto;
+    case "flex-start":
+      return Align.FlexStart;
+    case "center":
+      return Align.Center;
+    case "flex-end":
+      return Align.FlexEnd;
+    case "stretch":
+      return Align.Stretch;
+    case "baseline":
+      return Align.Baseline;
+    case "space-between":
+      return Align.SpaceBetween;
+    case "space-around":
+      return Align.SpaceAround;
+    case "space-evenly":
+      return Align.SpaceEvenly;
+    default:
+      return Align.Auto;
+  }
+}
+function parseFlexDirection(value) {
+  switch (value.toLowerCase()) {
+    case "column":
+      return FlexDirection.Column;
+    case "column-reverse":
+      return FlexDirection.ColumnReverse;
+    case "row":
+      return FlexDirection.Row;
+    case "row-reverse":
+      return FlexDirection.RowReverse;
+    default:
+      return FlexDirection.Column;
+  }
+}
+function parseJustify(value) {
+  switch (value.toLowerCase()) {
+    case "flex-start":
+      return Justify.FlexStart;
+    case "center":
+      return Justify.Center;
+    case "flex-end":
+      return Justify.FlexEnd;
+    case "space-between":
+      return Justify.SpaceBetween;
+    case "space-around":
+      return Justify.SpaceAround;
+    case "space-evenly":
+      return Justify.SpaceEvenly;
+    default:
+      return Justify.FlexStart;
+  }
+}
+
 // src/Renderable.ts
 var renderableNumber = 1;
 function validateOptions(id, options) {
@@ -33748,6 +33806,59 @@ function validateOptions(id, options) {
     }
   }
 }
+function isValidPercentage(value) {
+  if (typeof value === "string" && value.endsWith("%")) {
+    const numPart = value.slice(0, -1);
+    const num = parseFloat(numPart);
+    return !Number.isNaN(num);
+  }
+  return false;
+}
+function isMarginType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  if (value === "auto") {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isPaddingType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isPositionType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  if (value === "auto") {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isDimensionType(value) {
+  return isPositionType(value);
+}
+function isFlexBasisType(value) {
+  if (value === undefined || value === "auto") {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return false;
+}
+function isSizeType(value) {
+  if (value === undefined) {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
 
 class Renderable extends EventEmitter3 {
   static renderablesByNumber = new Map;
@@ -33869,19 +33980,39 @@ class Renderable extends EventEmitter3 {
     return this._x;
   }
   set x(value) {
-    this.setPosition({
-      left: value
-    });
+    this.left = value;
+  }
+  get top() {
+    return this._position.top;
   }
   set top(value) {
-    this.setPosition({
-      top: value
-    });
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ top: value });
+    }
+  }
+  get right() {
+    return this._position.right;
+  }
+  set right(value) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ right: value });
+    }
+  }
+  get bottom() {
+    return this._position.bottom;
+  }
+  set bottom(value) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ bottom: value });
+    }
+  }
+  get left() {
+    return this._position.left;
   }
   set left(value) {
-    this.setPosition({
-      left: value
-    });
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ left: value });
+    }
   }
   get y() {
     if (this.parent && this._positionType === "relative") {
@@ -33890,25 +34021,27 @@ class Renderable extends EventEmitter3 {
     return this._y;
   }
   set y(value) {
-    this.setPosition({
-      top: value
-    });
+    this.top = value;
   }
   get width() {
     return this._widthValue;
   }
   set width(value) {
-    this._width = value;
-    this.layoutNode.setWidth(value);
-    this.requestLayout();
+    if (isDimensionType(value)) {
+      this._width = value;
+      this.layoutNode.setWidth(value);
+      this.requestLayout();
+    }
   }
   get height() {
     return this._heightValue;
   }
   set height(value) {
-    this._height = value;
-    this.layoutNode.setHeight(value);
-    this.requestLayout();
+    if (isDimensionType(value)) {
+      this._height = value;
+      this.layoutNode.setHeight(value);
+      this.requestLayout();
+    }
   }
   get zIndex() {
     return this._zIndex;
@@ -33930,13 +34063,13 @@ class Renderable extends EventEmitter3 {
   }
   setupYogaProperties(options) {
     const node = this.layoutNode.yogaNode;
-    if (options.flexBasis !== undefined) {
+    if (isFlexBasisType(options.flexBasis)) {
       node.setFlexBasis(options.flexBasis);
     }
-    if (options.minWidth !== undefined) {
+    if (isSizeType(options.minWidth)) {
       node.setMinWidth(options.minWidth);
     }
-    if (options.minHeight !== undefined) {
+    if (isSizeType(options.minHeight)) {
       node.setMinHeight(options.minHeight);
     }
     if (options.flexGrow !== undefined) {
@@ -33951,19 +34084,19 @@ class Renderable extends EventEmitter3 {
       node.setFlexShrink(shrinkValue);
     }
     if (options.flexDirection !== undefined) {
-      node.setFlexDirection(options.flexDirection);
+      node.setFlexDirection(parseFlexDirection(options.flexDirection));
     }
     if (options.alignItems !== undefined) {
-      node.setAlignItems(options.alignItems);
+      node.setAlignItems(parseAlign(options.alignItems));
     }
     if (options.justifyContent !== undefined) {
-      node.setJustifyContent(options.justifyContent);
+      node.setJustifyContent(parseJustify(options.justifyContent));
     }
-    if (options.width !== undefined) {
+    if (isDimensionType(options.width)) {
       this._width = options.width;
       this.layoutNode.setWidth(options.width);
     }
-    if (options.height !== undefined) {
+    if (isDimensionType(options.height)) {
       this._height = options.height;
       this.layoutNode.setHeight(options.height);
     }
@@ -33971,49 +34104,93 @@ class Renderable extends EventEmitter3 {
     if (this._positionType === "absolute") {
       node.setPositionType(PositionType.Absolute);
     }
-    if (options.position) {
-      this._position = options.position;
-      this.updateYogaPosition(options.position);
+    const hasPositionProps = options.top !== undefined || options.right !== undefined || options.bottom !== undefined || options.left !== undefined;
+    if (hasPositionProps) {
+      this._position = {
+        top: options.top,
+        right: options.right,
+        bottom: options.bottom,
+        left: options.left
+      };
+      this.updateYogaPosition(this._position);
     }
-    if (options.maxWidth !== undefined) {
+    if (isSizeType(options.maxWidth)) {
       node.setMaxWidth(options.maxWidth);
     }
-    if (options.maxHeight !== undefined) {
+    if (isSizeType(options.maxHeight)) {
       node.setMaxHeight(options.maxHeight);
     }
-    this.margin = options.margin;
-    this.padding = options.padding;
+    this.setupMarginAndPadding(options);
+  }
+  setupMarginAndPadding(options) {
+    const node = this.layoutNode.yogaNode;
+    if (isMarginType(options.margin)) {
+      node.setMargin(Edge2.Top, options.margin);
+      node.setMargin(Edge2.Right, options.margin);
+      node.setMargin(Edge2.Bottom, options.margin);
+      node.setMargin(Edge2.Left, options.margin);
+    }
+    if (isMarginType(options.marginTop)) {
+      node.setMargin(Edge2.Top, options.marginTop);
+    }
+    if (isMarginType(options.marginRight)) {
+      node.setMargin(Edge2.Right, options.marginRight);
+    }
+    if (isMarginType(options.marginBottom)) {
+      node.setMargin(Edge2.Bottom, options.marginBottom);
+    }
+    if (isMarginType(options.marginLeft)) {
+      node.setMargin(Edge2.Left, options.marginLeft);
+    }
+    if (isPaddingType(options.padding)) {
+      node.setPadding(Edge2.Top, options.padding);
+      node.setPadding(Edge2.Right, options.padding);
+      node.setPadding(Edge2.Bottom, options.padding);
+      node.setPadding(Edge2.Left, options.padding);
+    }
+    if (isPaddingType(options.paddingTop)) {
+      node.setPadding(Edge2.Top, options.paddingTop);
+    }
+    if (isPaddingType(options.paddingRight)) {
+      node.setPadding(Edge2.Right, options.paddingRight);
+    }
+    if (isPaddingType(options.paddingBottom)) {
+      node.setPadding(Edge2.Bottom, options.paddingBottom);
+    }
+    if (isPaddingType(options.paddingLeft)) {
+      node.setPadding(Edge2.Left, options.paddingLeft);
+    }
   }
   setPosition(position) {
-    this._position = position;
+    this._position = { ...this._position, ...position };
     this.updateYogaPosition(position);
   }
   updateYogaPosition(position) {
     const node = this.layoutNode.yogaNode;
     const { top, right, bottom, left } = position;
     if (this._positionType === "relative") {
-      if (top !== undefined) {
+      if (isPositionType(top)) {
         if (top === "auto") {
           node.setPositionAuto(Edge2.Top);
         } else {
           node.setPosition(Edge2.Top, top);
         }
       }
-      if (right !== undefined) {
+      if (isPositionType(right)) {
         if (right === "auto") {
           node.setPositionAuto(Edge2.Right);
         } else {
           node.setPosition(Edge2.Right, right);
         }
       }
-      if (bottom !== undefined) {
+      if (isPositionType(bottom)) {
         if (bottom === "auto") {
           node.setPositionAuto(Edge2.Bottom);
         } else {
           node.setPosition(Edge2.Bottom, bottom);
         }
       }
-      if (left !== undefined) {
+      if (isPositionType(left)) {
         if (left === "auto") {
           node.setPositionAuto(Edge2.Left);
         } else {
@@ -34041,76 +34218,114 @@ class Renderable extends EventEmitter3 {
     this.requestLayout();
   }
   set flexDirection(direction) {
-    this.layoutNode.yogaNode.setFlexDirection(direction);
+    this.layoutNode.yogaNode.setFlexDirection(parseFlexDirection(direction));
     this.requestLayout();
   }
   set alignItems(alignItems) {
-    this.layoutNode.yogaNode.setAlignItems(alignItems);
+    this.layoutNode.yogaNode.setAlignItems(parseAlign(alignItems));
     this.requestLayout();
   }
   set justifyContent(justifyContent) {
-    this.layoutNode.yogaNode.setJustifyContent(justifyContent);
+    this.layoutNode.yogaNode.setJustifyContent(parseJustify(justifyContent));
     this.requestLayout();
   }
   set flexBasis(basis) {
-    this.layoutNode.yogaNode.setFlexBasis(basis);
-    this.requestLayout();
+    if (isFlexBasisType(basis)) {
+      this.layoutNode.yogaNode.setFlexBasis(basis);
+      this.requestLayout();
+    }
   }
   set minWidth(minWidth) {
-    this.layoutNode.yogaNode.setMinWidth(minWidth);
-    this.requestLayout();
+    if (isSizeType(minWidth)) {
+      this.layoutNode.yogaNode.setMinWidth(minWidth);
+      this.requestLayout();
+    }
   }
   set maxWidth(maxWidth) {
-    this.layoutNode.yogaNode.setMaxWidth(maxWidth);
-    this.requestLayout();
+    if (isSizeType(maxWidth)) {
+      this.layoutNode.yogaNode.setMaxWidth(maxWidth);
+      this.requestLayout();
+    }
   }
   set minHeight(minHeight) {
-    this.layoutNode.yogaNode.setMinHeight(minHeight);
-    this.requestLayout();
+    if (isSizeType(minHeight)) {
+      this.layoutNode.yogaNode.setMinHeight(minHeight);
+      this.requestLayout();
+    }
   }
   set maxHeight(maxHeight) {
-    this.layoutNode.yogaNode.setMaxHeight(maxHeight);
-    this.requestLayout();
+    if (isSizeType(maxHeight)) {
+      this.layoutNode.yogaNode.setMaxHeight(maxHeight);
+      this.requestLayout();
+    }
   }
   set margin(margin) {
-    const node = this.layoutNode.yogaNode;
-    if (typeof margin === "object") {
-      const { top, right, bottom, left } = margin;
-      if (top !== undefined)
-        node.setMargin(Edge2.Top, top);
-      if (right !== undefined)
-        node.setMargin(Edge2.Right, right);
-      if (bottom !== undefined)
-        node.setMargin(Edge2.Bottom, bottom);
-      if (left !== undefined)
-        node.setMargin(Edge2.Left, left);
-    } else if (margin !== undefined) {
+    if (isMarginType(margin)) {
+      const node = this.layoutNode.yogaNode;
       node.setMargin(Edge2.Top, margin);
       node.setMargin(Edge2.Right, margin);
       node.setMargin(Edge2.Bottom, margin);
       node.setMargin(Edge2.Left, margin);
+      this.requestLayout();
+    }
+  }
+  set marginTop(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge2.Top, margin);
+      this.requestLayout();
+    }
+  }
+  set marginRight(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge2.Right, margin);
+      this.requestLayout();
+    }
+  }
+  set marginBottom(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge2.Bottom, margin);
+      this.requestLayout();
+    }
+  }
+  set marginLeft(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge2.Left, margin);
+      this.requestLayout();
     }
-    this.requestLayout();
   }
   set padding(padding) {
-    const node = this.layoutNode.yogaNode;
-    if (typeof padding === "object") {
-      const { top, right, bottom, left } = padding;
-      if (top !== undefined)
-        node.setPadding(Edge2.Top, top);
-      if (right !== undefined)
-        node.setPadding(Edge2.Right, right);
-      if (bottom !== undefined)
-        node.setPadding(Edge2.Bottom, bottom);
-      if (left !== undefined)
-        node.setPadding(Edge2.Left, left);
-    } else if (padding !== undefined) {
+    if (isPaddingType(padding)) {
+      const node = this.layoutNode.yogaNode;
       node.setPadding(Edge2.Top, padding);
       node.setPadding(Edge2.Right, padding);
       node.setPadding(Edge2.Bottom, padding);
       node.setPadding(Edge2.Left, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingTop(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge2.Top, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingRight(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge2.Right, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingBottom(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge2.Bottom, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingLeft(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge2.Left, padding);
+      this.requestLayout();
     }
-    this.requestLayout();
   }
   getLayoutNode() {
     return this.layoutNode;

package/Renderable.d.ts

@@ -1,9 +1,9 @@
 import { OptimizedBuffer, type RenderContext, type MouseEvent, type SelectionState } from ".";
 import { EventEmitter } from "events";
-import { FlexDirection, Direction, PositionType, Edge, Align, Justify } from "yoga-layout";
 import { TrackedNode } from "./lib/TrackedNode";
 import type { ParsedKey } from "./lib/parse.keypress";
 import { type KeyHandler } from "./lib/KeyHandler";
+import { type AlignString, type FlexDirectionString, type JustifyString, type PositionTypeString } from "./lib/yoga.options";
 export declare enum LayoutEvents {
     LAYOUT_CHANGED = "layout-changed",
     ADDED = "added",
@@ -14,7 +14,6 @@ export declare enum RenderableEvents {
     FOCUSED = "focused",
     BLURRED = "blurred"
 }
-export { Justify, Align, FlexDirection, Direction, PositionType, Edge };
 export interface Position {
     top?: number | "auto" | `${number}%`;
     right?: number | "auto" | `${number}%`;
@@ -24,28 +23,29 @@ export interface Position {
 export interface LayoutOptions {
     flexGrow?: number;
     flexShrink?: number;
-    flexDirection?: FlexDirection;
-    alignItems?: Align;
-    justifyContent?: Justify;
+    flexDirection?: FlexDirectionString;
+    alignItems?: AlignString;
+    justifyContent?: JustifyString;
     flexBasis?: number | "auto" | undefined;
-    positionType?: "absolute" | "relative";
-    position?: Position;
+    positionType?: PositionTypeString;
+    top?: number | "auto" | `${number}%`;
+    right?: number | "auto" | `${number}%`;
+    bottom?: number | "auto" | `${number}%`;
+    left?: number | "auto" | `${number}%`;
     minWidth?: number;
     minHeight?: number;
     maxWidth?: number;
     maxHeight?: number;
-    margin?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    } | number | "auto" | `${number}%`;
-    padding?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    } | number | `${number}%`;
+    margin?: number | "auto" | `${number}%`;
+    marginTop?: number | "auto" | `${number}%`;
+    marginRight?: number | "auto" | `${number}%`;
+    marginBottom?: number | "auto" | `${number}%`;
+    marginLeft?: number | "auto" | `${number}%`;
+    padding?: number | `${number}%`;
+    paddingTop?: number | `${number}%`;
+    paddingRight?: number | `${number}%`;
+    paddingBottom?: number | `${number}%`;
+    paddingLeft?: number | `${number}%`;
     enableLayout?: boolean;
 }
 export interface RenderableOptions extends Partial<LayoutOptions> {
@@ -55,6 +55,12 @@ export interface RenderableOptions extends Partial<LayoutOptions> {
     visible?: boolean;
     buffered?: boolean;
 }
+export declare function isMarginType(value: any): value is number | "auto" | `${number}%`;
+export declare function isPaddingType(value: any): value is number | `${number}%`;
+export declare function isPositionType(value: any): value is number | "auto" | `${number}%`;
+export declare function isDimensionType(value: any): value is number | "auto" | `${number}%`;
+export declare function isFlexBasisType(value: any): value is number | "auto" | undefined;
+export declare function isSizeType(value: any): value is number | `${number}%` | undefined;
 export declare abstract class Renderable extends EventEmitter {
     static renderablesByNumber: Map<number, Renderable>;
     readonly id: string;
@@ -77,7 +83,7 @@ export declare abstract class Renderable extends EventEmitter {
     protected keyHandler: KeyHandler;
     protected keypressHandler: ((key: ParsedKey) => void) | null;
     protected layoutNode: TrackedNode;
-    protected _positionType: "absolute" | "relative";
+    protected _positionType: PositionTypeString;
     protected _position: Position;
     private renderableMap;
     private renderableArray;
@@ -100,8 +106,14 @@ export declare abstract class Renderable extends EventEmitter {
     needsUpdate(): void;
     get x(): number;
     set x(value: number);
-    set top(value: number);
-    set left(value: number);
+    get top(): number | "auto" | `${number}%` | undefined;
+    set top(value: number | "auto" | `${number}%` | undefined);
+    get right(): number | "auto" | `${number}%` | undefined;
+    set right(value: number | "auto" | `${number}%` | undefined);
+    get bottom(): number | "auto" | `${number}%` | undefined;
+    set bottom(value: number | "auto" | `${number}%` | undefined);
+    get left(): number | "auto" | `${number}%` | undefined;
+    set left(value: number | "auto" | `${number}%` | undefined);
     get y(): number;
     set y(value: number);
     get width(): number;
@@ -113,20 +125,29 @@ export declare abstract class Renderable extends EventEmitter {
     requestZIndexSort(): void;
     private ensureZIndexSorted;
     private setupYogaProperties;
+    private setupMarginAndPadding;
     setPosition(position: Position): void;
     private updateYogaPosition;
     set flexGrow(grow: number);
     set flexShrink(shrink: number);
-    set flexDirection(direction: FlexDirection);
-    set alignItems(alignItems: Align);
-    set justifyContent(justifyContent: Justify);
+    set flexDirection(direction: FlexDirectionString);
+    set alignItems(alignItems: AlignString);
+    set justifyContent(justifyContent: JustifyString);
     set flexBasis(basis: number | "auto" | undefined);
     set minWidth(minWidth: number | `${number}%` | undefined);
     set maxWidth(maxWidth: number | `${number}%` | undefined);
     set minHeight(minHeight: number | `${number}%` | undefined);
     set maxHeight(maxHeight: number | `${number}%` | undefined);
-    set margin(margin: LayoutOptions["margin"]);
-    set padding(padding: LayoutOptions["padding"]);
+    set margin(margin: number | "auto" | `${number}%` | undefined);
+    set marginTop(margin: number | "auto" | `${number}%` | undefined);
+    set marginRight(margin: number | "auto" | `${number}%` | undefined);
+    set marginBottom(margin: number | "auto" | `${number}%` | undefined);
+    set marginLeft(margin: number | "auto" | `${number}%` | undefined);
+    set padding(padding: number | `${number}%` | undefined);
+    set paddingTop(padding: number | `${number}%` | undefined);
+    set paddingRight(padding: number | `${number}%` | undefined);
+    set paddingBottom(padding: number | `${number}%` | undefined);
+    set paddingLeft(padding: number | `${number}%` | undefined);
     getLayoutNode(): TrackedNode;
     updateFromLayout(): void;
     protected onLayoutResize(width: number, height: number): void;

package/index.js

@@ -1989,6 +1989,64 @@ function getKeyHandler() {
   return keyHandler;
 }
 
+// src/lib/yoga.options.ts
+function parseAlign(value) {
+  switch (value.toLowerCase()) {
+    case "auto":
+      return Align.Auto;
+    case "flex-start":
+      return Align.FlexStart;
+    case "center":
+      return Align.Center;
+    case "flex-end":
+      return Align.FlexEnd;
+    case "stretch":
+      return Align.Stretch;
+    case "baseline":
+      return Align.Baseline;
+    case "space-between":
+      return Align.SpaceBetween;
+    case "space-around":
+      return Align.SpaceAround;
+    case "space-evenly":
+      return Align.SpaceEvenly;
+    default:
+      return Align.Auto;
+  }
+}
+function parseFlexDirection(value) {
+  switch (value.toLowerCase()) {
+    case "column":
+      return FlexDirection.Column;
+    case "column-reverse":
+      return FlexDirection.ColumnReverse;
+    case "row":
+      return FlexDirection.Row;
+    case "row-reverse":
+      return FlexDirection.RowReverse;
+    default:
+      return FlexDirection.Column;
+  }
+}
+function parseJustify(value) {
+  switch (value.toLowerCase()) {
+    case "flex-start":
+      return Justify.FlexStart;
+    case "center":
+      return Justify.Center;
+    case "flex-end":
+      return Justify.FlexEnd;
+    case "space-between":
+      return Justify.SpaceBetween;
+    case "space-around":
+      return Justify.SpaceAround;
+    case "space-evenly":
+      return Justify.SpaceEvenly;
+    default:
+      return Justify.FlexStart;
+  }
+}
+
 // src/Renderable.ts
 var LayoutEvents;
 ((LayoutEvents2) => {
@@ -2015,6 +2073,59 @@ function validateOptions(id, options) {
     }
   }
 }
+function isValidPercentage(value) {
+  if (typeof value === "string" && value.endsWith("%")) {
+    const numPart = value.slice(0, -1);
+    const num = parseFloat(numPart);
+    return !Number.isNaN(num);
+  }
+  return false;
+}
+function isMarginType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  if (value === "auto") {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isPaddingType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isPositionType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  if (value === "auto") {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isDimensionType(value) {
+  return isPositionType(value);
+}
+function isFlexBasisType(value) {
+  if (value === undefined || value === "auto") {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return false;
+}
+function isSizeType(value) {
+  if (value === undefined) {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
 
 class Renderable extends EventEmitter3 {
   static renderablesByNumber = new Map;
@@ -2136,19 +2247,39 @@ class Renderable extends EventEmitter3 {
     return this._x;
   }
   set x(value) {
-    this.setPosition({
-      left: value
-    });
+    this.left = value;
+  }
+  get top() {
+    return this._position.top;
   }
   set top(value) {
-    this.setPosition({
-      top: value
-    });
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ top: value });
+    }
+  }
+  get right() {
+    return this._position.right;
+  }
+  set right(value) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ right: value });
+    }
+  }
+  get bottom() {
+    return this._position.bottom;
+  }
+  set bottom(value) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ bottom: value });
+    }
+  }
+  get left() {
+    return this._position.left;
   }
   set left(value) {
-    this.setPosition({
-      left: value
-    });
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ left: value });
+    }
   }
   get y() {
     if (this.parent && this._positionType === "relative") {
@@ -2157,25 +2288,27 @@ class Renderable extends EventEmitter3 {
     return this._y;
   }
   set y(value) {
-    this.setPosition({
-      top: value
-    });
+    this.top = value;
   }
   get width() {
     return this._widthValue;
   }
   set width(value) {
-    this._width = value;
-    this.layoutNode.setWidth(value);
-    this.requestLayout();
+    if (isDimensionType(value)) {
+      this._width = value;
+      this.layoutNode.setWidth(value);
+      this.requestLayout();
+    }
   }
   get height() {
     return this._heightValue;
   }
   set height(value) {
-    this._height = value;
-    this.layoutNode.setHeight(value);
-    this.requestLayout();
+    if (isDimensionType(value)) {
+      this._height = value;
+      this.layoutNode.setHeight(value);
+      this.requestLayout();
+    }
   }
   get zIndex() {
     return this._zIndex;
@@ -2197,13 +2330,13 @@ class Renderable extends EventEmitter3 {
   }
   setupYogaProperties(options) {
     const node = this.layoutNode.yogaNode;
-    if (options.flexBasis !== undefined) {
+    if (isFlexBasisType(options.flexBasis)) {
       node.setFlexBasis(options.flexBasis);
     }
-    if (options.minWidth !== undefined) {
+    if (isSizeType(options.minWidth)) {
       node.setMinWidth(options.minWidth);
     }
-    if (options.minHeight !== undefined) {
+    if (isSizeType(options.minHeight)) {
       node.setMinHeight(options.minHeight);
     }
     if (options.flexGrow !== undefined) {
@@ -2218,19 +2351,19 @@ class Renderable extends EventEmitter3 {
       node.setFlexShrink(shrinkValue);
     }
     if (options.flexDirection !== undefined) {
-      node.setFlexDirection(options.flexDirection);
+      node.setFlexDirection(parseFlexDirection(options.flexDirection));
     }
     if (options.alignItems !== undefined) {
-      node.setAlignItems(options.alignItems);
+      node.setAlignItems(parseAlign(options.alignItems));
     }
     if (options.justifyContent !== undefined) {
-      node.setJustifyContent(options.justifyContent);
+      node.setJustifyContent(parseJustify(options.justifyContent));
     }
-    if (options.width !== undefined) {
+    if (isDimensionType(options.width)) {
       this._width = options.width;
       this.layoutNode.setWidth(options.width);
     }
-    if (options.height !== undefined) {
+    if (isDimensionType(options.height)) {
       this._height = options.height;
       this.layoutNode.setHeight(options.height);
     }
@@ -2238,49 +2371,93 @@ class Renderable extends EventEmitter3 {
     if (this._positionType === "absolute") {
       node.setPositionType(PositionType.Absolute);
     }
-    if (options.position) {
-      this._position = options.position;
-      this.updateYogaPosition(options.position);
+    const hasPositionProps = options.top !== undefined || options.right !== undefined || options.bottom !== undefined || options.left !== undefined;
+    if (hasPositionProps) {
+      this._position = {
+        top: options.top,
+        right: options.right,
+        bottom: options.bottom,
+        left: options.left
+      };
+      this.updateYogaPosition(this._position);
     }
-    if (options.maxWidth !== undefined) {
+    if (isSizeType(options.maxWidth)) {
       node.setMaxWidth(options.maxWidth);
     }
-    if (options.maxHeight !== undefined) {
+    if (isSizeType(options.maxHeight)) {
       node.setMaxHeight(options.maxHeight);
     }
-    this.margin = options.margin;
-    this.padding = options.padding;
+    this.setupMarginAndPadding(options);
+  }
+  setupMarginAndPadding(options) {
+    const node = this.layoutNode.yogaNode;
+    if (isMarginType(options.margin)) {
+      node.setMargin(Edge.Top, options.margin);
+      node.setMargin(Edge.Right, options.margin);
+      node.setMargin(Edge.Bottom, options.margin);
+      node.setMargin(Edge.Left, options.margin);
+    }
+    if (isMarginType(options.marginTop)) {
+      node.setMargin(Edge.Top, options.marginTop);
+    }
+    if (isMarginType(options.marginRight)) {
+      node.setMargin(Edge.Right, options.marginRight);
+    }
+    if (isMarginType(options.marginBottom)) {
+      node.setMargin(Edge.Bottom, options.marginBottom);
+    }
+    if (isMarginType(options.marginLeft)) {
+      node.setMargin(Edge.Left, options.marginLeft);
+    }
+    if (isPaddingType(options.padding)) {
+      node.setPadding(Edge.Top, options.padding);
+      node.setPadding(Edge.Right, options.padding);
+      node.setPadding(Edge.Bottom, options.padding);
+      node.setPadding(Edge.Left, options.padding);
+    }
+    if (isPaddingType(options.paddingTop)) {
+      node.setPadding(Edge.Top, options.paddingTop);
+    }
+    if (isPaddingType(options.paddingRight)) {
+      node.setPadding(Edge.Right, options.paddingRight);
+    }
+    if (isPaddingType(options.paddingBottom)) {
+      node.setPadding(Edge.Bottom, options.paddingBottom);
+    }
+    if (isPaddingType(options.paddingLeft)) {
+      node.setPadding(Edge.Left, options.paddingLeft);
+    }
   }
   setPosition(position) {
-    this._position = position;
+    this._position = { ...this._position, ...position };
     this.updateYogaPosition(position);
   }
   updateYogaPosition(position) {
     const node = this.layoutNode.yogaNode;
     const { top, right, bottom, left } = position;
     if (this._positionType === "relative") {
-      if (top !== undefined) {
+      if (isPositionType(top)) {
         if (top === "auto") {
           node.setPositionAuto(Edge.Top);
         } else {
           node.setPosition(Edge.Top, top);
         }
       }
-      if (right !== undefined) {
+      if (isPositionType(right)) {
         if (right === "auto") {
           node.setPositionAuto(Edge.Right);
         } else {
           node.setPosition(Edge.Right, right);
         }
       }
-      if (bottom !== undefined) {
+      if (isPositionType(bottom)) {
         if (bottom === "auto") {
           node.setPositionAuto(Edge.Bottom);
         } else {
           node.setPosition(Edge.Bottom, bottom);
         }
       }
-      if (left !== undefined) {
+      if (isPositionType(left)) {
         if (left === "auto") {
           node.setPositionAuto(Edge.Left);
         } else {
@@ -2308,76 +2485,114 @@ class Renderable extends EventEmitter3 {
     this.requestLayout();
   }
   set flexDirection(direction) {
-    this.layoutNode.yogaNode.setFlexDirection(direction);
+    this.layoutNode.yogaNode.setFlexDirection(parseFlexDirection(direction));
     this.requestLayout();
   }
   set alignItems(alignItems) {
-    this.layoutNode.yogaNode.setAlignItems(alignItems);
+    this.layoutNode.yogaNode.setAlignItems(parseAlign(alignItems));
     this.requestLayout();
   }
   set justifyContent(justifyContent) {
-    this.layoutNode.yogaNode.setJustifyContent(justifyContent);
+    this.layoutNode.yogaNode.setJustifyContent(parseJustify(justifyContent));
     this.requestLayout();
   }
   set flexBasis(basis) {
-    this.layoutNode.yogaNode.setFlexBasis(basis);
-    this.requestLayout();
+    if (isFlexBasisType(basis)) {
+      this.layoutNode.yogaNode.setFlexBasis(basis);
+      this.requestLayout();
+    }
   }
   set minWidth(minWidth) {
-    this.layoutNode.yogaNode.setMinWidth(minWidth);
-    this.requestLayout();
+    if (isSizeType(minWidth)) {
+      this.layoutNode.yogaNode.setMinWidth(minWidth);
+      this.requestLayout();
+    }
   }
   set maxWidth(maxWidth) {
-    this.layoutNode.yogaNode.setMaxWidth(maxWidth);
-    this.requestLayout();
+    if (isSizeType(maxWidth)) {
+      this.layoutNode.yogaNode.setMaxWidth(maxWidth);
+      this.requestLayout();
+    }
   }
   set minHeight(minHeight) {
-    this.layoutNode.yogaNode.setMinHeight(minHeight);
-    this.requestLayout();
+    if (isSizeType(minHeight)) {
+      this.layoutNode.yogaNode.setMinHeight(minHeight);
+      this.requestLayout();
+    }
   }
   set maxHeight(maxHeight) {
-    this.layoutNode.yogaNode.setMaxHeight(maxHeight);
-    this.requestLayout();
+    if (isSizeType(maxHeight)) {
+      this.layoutNode.yogaNode.setMaxHeight(maxHeight);
+      this.requestLayout();
+    }
   }
   set margin(margin) {
-    const node = this.layoutNode.yogaNode;
-    if (typeof margin === "object") {
-      const { top, right, bottom, left } = margin;
-      if (top !== undefined)
-        node.setMargin(Edge.Top, top);
-      if (right !== undefined)
-        node.setMargin(Edge.Right, right);
-      if (bottom !== undefined)
-        node.setMargin(Edge.Bottom, bottom);
-      if (left !== undefined)
-        node.setMargin(Edge.Left, left);
-    } else if (margin !== undefined) {
+    if (isMarginType(margin)) {
+      const node = this.layoutNode.yogaNode;
       node.setMargin(Edge.Top, margin);
       node.setMargin(Edge.Right, margin);
       node.setMargin(Edge.Bottom, margin);
       node.setMargin(Edge.Left, margin);
+      this.requestLayout();
+    }
+  }
+  set marginTop(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Top, margin);
+      this.requestLayout();
+    }
+  }
+  set marginRight(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Right, margin);
+      this.requestLayout();
+    }
+  }
+  set marginBottom(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Bottom, margin);
+      this.requestLayout();
+    }
+  }
+  set marginLeft(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Left, margin);
+      this.requestLayout();
     }
-    this.requestLayout();
   }
   set padding(padding) {
-    const node = this.layoutNode.yogaNode;
-    if (typeof padding === "object") {
-      const { top, right, bottom, left } = padding;
-      if (top !== undefined)
-        node.setPadding(Edge.Top, top);
-      if (right !== undefined)
-        node.setPadding(Edge.Right, right);
-      if (bottom !== undefined)
-        node.setPadding(Edge.Bottom, bottom);
-      if (left !== undefined)
-        node.setPadding(Edge.Left, left);
-    } else if (padding !== undefined) {
+    if (isPaddingType(padding)) {
+      const node = this.layoutNode.yogaNode;
       node.setPadding(Edge.Top, padding);
       node.setPadding(Edge.Right, padding);
       node.setPadding(Edge.Bottom, padding);
       node.setPadding(Edge.Left, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingTop(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Top, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingRight(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Right, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingBottom(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Bottom, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingLeft(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Left, padding);
+      this.requestLayout();
     }
-    this.requestLayout();
   }
   getLayoutNode() {
     return this.layoutNode;
@@ -8816,7 +9031,7 @@ Error details:
 }
 // src/renderables/Box.ts
 class BoxRenderable extends Renderable {
-  _bg;
+  _backgroundColor;
   _border;
   _borderStyle;
   _borderColor;
@@ -8828,7 +9043,7 @@ class BoxRenderable extends Renderable {
   _titleAlignment;
   constructor(id, options) {
     super(id, options);
-    this._bg = parseColor(options.bg || "transparent");
+    this._backgroundColor = parseColor(options.backgroundColor || "transparent");
     this._border = options.border ?? true;
     this._borderStyle = options.borderStyle || "single";
     this._borderColor = parseColor(options.borderColor || "#FFFFFF");
@@ -8840,14 +9055,14 @@ class BoxRenderable extends Renderable {
     this._titleAlignment = options.titleAlignment || "left";
     this.applyYogaBorders();
   }
-  get bg() {
-    return this._bg;
+  get backgroundColor() {
+    return this._backgroundColor;
   }
-  set bg(value) {
+  set backgroundColor(value) {
     if (value) {
       const newColor = parseColor(value);
-      if (this._bg !== newColor) {
-        this._bg = newColor;
+      if (this._backgroundColor !== newColor) {
+        this._backgroundColor = newColor;
         this.needsUpdate();
       }
     }
@@ -8924,7 +9139,7 @@ class BoxRenderable extends Renderable {
       customBorderChars: this.customBorderChars,
       border: this._border,
       borderColor: currentBorderColor,
-      backgroundColor: this._bg,
+      backgroundColor: this._backgroundColor,
       shouldFill: this.shouldFill,
       title: this._title,
       titleAlignment: this._titleAlignment
@@ -10074,6 +10289,12 @@ export {
   magenta,
   loadTemplate,
   italic,
+  isSizeType,
+  isPositionType,
+  isPaddingType,
+  isMarginType,
+  isFlexBasisType,
+  isDimensionType,
   hsvToRgb,
   hexToRgb,
   green,
@@ -10138,21 +10359,16 @@ export {
   RenderableEvents,
   Renderable,
   RGBA,
-  PositionType,
   OptimizedBuffer,
   MouseEvent,
   MouseButton,
   LayoutEvents,
   KeyHandler,
-  Justify,
   InputRenderableEvents,
   InputRenderable,
   GroupRenderable,
   FrameBufferRenderable,
-  FlexDirection,
-  Edge,
   DistortionEffect,
-  Direction,
   DebugOverlayCorner,
   CliRenderer,
   CliRenderEvents,
@@ -10162,7 +10378,6 @@ export {
   BorderCharArrays,
   BlurEffect,
   BloomEffect,
-  Align,
   ASCIIFontSelectionHelper,
   ASCIIFontRenderable
 };

package/lib/yoga.options.d.ts

@@ -0,0 +1,31 @@
+import { BoxSizing, Align, Dimension, Direction, Display, Edge, FlexDirection, Gutter, Justify, LogLevel, MeasureMode, Overflow, PositionType, Unit, Wrap } from "yoga-layout";
+export type AlignString = "auto" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | "space-between" | "space-around" | "space-evenly";
+export type BoxSizingString = "border-box" | "content-box";
+export type DimensionString = "width" | "height";
+export type DirectionString = "inherit" | "ltr" | "rtl";
+export type DisplayString = "flex" | "none" | "contents";
+export type EdgeString = "left" | "top" | "right" | "bottom" | "start" | "end" | "horizontal" | "vertical" | "all";
+export type FlexDirectionString = "column" | "column-reverse" | "row" | "row-reverse";
+export type GutterString = "column" | "row" | "all";
+export type JustifyString = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+export type LogLevelString = "error" | "warn" | "info" | "debug" | "verbose" | "fatal";
+export type MeasureModeString = "undefined" | "exactly" | "at-most";
+export type OverflowString = "visible" | "hidden" | "scroll";
+export type PositionTypeString = "static" | "relative" | "absolute";
+export type UnitString = "undefined" | "point" | "percent" | "auto";
+export type WrapString = "no-wrap" | "wrap" | "wrap-reverse";
+export declare function parseAlign(value: string): Align;
+export declare function parseBoxSizing(value: string): BoxSizing;
+export declare function parseDimension(value: string): Dimension;
+export declare function parseDirection(value: string): Direction;
+export declare function parseDisplay(value: string): Display;
+export declare function parseEdge(value: string): Edge;
+export declare function parseFlexDirection(value: string): FlexDirection;
+export declare function parseGutter(value: string): Gutter;
+export declare function parseJustify(value: string): Justify;
+export declare function parseLogLevel(value: string): LogLevel;
+export declare function parseMeasureMode(value: string): MeasureMode;
+export declare function parseOverflow(value: string): Overflow;
+export declare function parsePositionType(value: string): PositionType;
+export declare function parseUnit(value: string): Unit;
+export declare function parseWrap(value: string): Wrap;

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "OpenTUI is a TypeScript library for building terminal user interfaces (TUIs)",
   "license": "MIT",
   "repository": {
@@ -32,11 +32,11 @@
     "bun-webgpu": "0.1.3",
     "planck": "^1.4.2",
     "three": "0.177.0",
-    "@opentui/core-darwin-x64": "^0.1.2",
-    "@opentui/core-darwin-arm64": "^0.1.2",
-    "@opentui/core-linux-x64": "^0.1.2",
-    "@opentui/core-linux-arm64": "^0.1.2",
-    "@opentui/core-win32-x64": "^0.1.2",
-    "@opentui/core-win32-arm64": "^0.1.2"
+    "@opentui/core-darwin-x64": "0.1.3",
+    "@opentui/core-darwin-arm64": "0.1.3",
+    "@opentui/core-linux-x64": "0.1.3",
+    "@opentui/core-linux-arm64": "0.1.3",
+    "@opentui/core-win32-x64": "0.1.3",
+    "@opentui/core-win32-arm64": "0.1.3"
   }
 }

package/renderables/Box.d.ts

@@ -4,7 +4,7 @@ import { RGBA } from "../types";
 import { type BorderStyle, type BorderSides, type BorderCharacters, type BorderSidesConfig } from "../lib";
 import type { ColorInput } from "../types";
 export interface BoxOptions extends RenderableOptions {
-    bg?: string | RGBA;
+    backgroundColor?: string | RGBA;
     borderStyle?: BorderStyle;
     border?: boolean | BorderSides[];
     borderColor?: string | RGBA;
@@ -15,7 +15,7 @@ export interface BoxOptions extends RenderableOptions {
     focusedBorderColor?: ColorInput;
 }
 export declare class BoxRenderable extends Renderable {
-    protected _bg: RGBA;
+    protected _backgroundColor: RGBA;
     protected _border: boolean | BorderSides[];
     protected _borderStyle: BorderStyle;
     protected _borderColor: RGBA;
@@ -26,8 +26,8 @@ export declare class BoxRenderable extends Renderable {
     protected _title?: string;
     protected _titleAlignment: "left" | "center" | "right";
     constructor(id: string, options: BoxOptions);
-    get bg(): RGBA;
-    set bg(value: RGBA | string | undefined);
+    get backgroundColor(): RGBA;
+    set backgroundColor(value: RGBA | string | undefined);
     get border(): boolean | BorderSides[];
     set border(value: boolean | BorderSides[]);
     get borderStyle(): BorderStyle;