lecodes-cli 0.1.6 → 0.2.0

package/runtime/sdk/ui/UI.ts

@@ -0,0 +1,19 @@
+// Renderer-side contract + per-renderer status (DOM / canvas-ui / desktop) for every component
+// below is tracked in packages/canvas-ui/COMPONENTS.md.
+export { UIButton, type UIButtonStyle } from './UIButton'
+export { UIScreen, type UIScreenStyle } from './UIScreen'
+export { UISpacer, type UISpacerStyle } from './UISpacer'
+export { UIText, type UITextStyle } from './UIText'
+export { registerFont } from './fonts'
+export { UIImage, type UIImageStyle } from './UIImage'
+export { UIVideo, type UIVideoStyle } from './UIVideo'
+export { UIInput, UITextArea, type UIInputStyle } from './UIInput'
+
+export { UIWidget, type UIWidgetStyle } from './UIWidget'
+
+export { UIRow, UIColumn, UIBox, type UIContainerStyle } from './UIContainer'
+export { UIScrollable, type UIScrollableStyle } from './UIScrollable'
+
+export { UIVirtualizedList } from './UIVirtualizedList'
+
+export { Router } from './router'

package/runtime/sdk/ui/UIButton.ts

@@ -0,0 +1,84 @@
+import { ClickEvent, TouchStartEvent } from "../runtime/touch"
+import type { ClickEvent as ClickEventType, TouchStartEvent as TouchStartEventType } from "../runtime/touch"
+import { type ElementStyle, type ContainerStyle, type Style, ContainerElement, type DrawableStyle, type UINodeChild, type OnLayoutCallback, type BaseStyle, type AnimateStyle, type Color } from "./UINode"
+
+export type UIButtonStyle = ElementStyle & DrawableStyle & ContainerStyle & { rippleColor?: Color | "default" }
+
+export interface UIButton {
+  readonly type: "button",
+
+  style: Style<this, UIButtonStyle & { onPressed?: DrawableStyle & BaseStyle & { duration?: number } }>,
+  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle>,
+  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle>
+
+  onClick(callback: (ev: ClickEventType<UIButton>) => void): this,
+  onTouchStart(callback: (ev: TouchStartEventType<UIButton>) => void): this,
+  isPressed(): boolean,
+
+  append(...nodes: UINodeChild[]): this
+  insert(index: number, ...nodes: UINodeChild[]): this
+  remove(...nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[]): this
+
+  onLayout(onLayout: OnLayoutCallback): this
+  readonly children: UINodeChild[],
+}
+
+
+class ButtonElement extends ContainerElement<"button"> {
+
+  readonly clickListeners: any[] = []
+  readonly touchStartListeners: any[] = []
+
+  onClick (callback: any): this {
+    this.clickListeners.push(callback)
+    return this
+  }
+  _emitClick(pointerId: number, clientX: number, clientY: number) {
+    const touchEvent = new ClickEvent(clientX, clientY, pointerId)
+    touchEvent.target = this
+    for (let callback of this.clickListeners) {
+      callback(touchEvent)
+    }
+    return null
+  }
+
+  onTouchStart (callback: any): this {
+    this.touchStartListeners.push(callback)
+    return this
+  }
+  _emitTouchStart(pointerId: number, clientX: number, clientY: number): any {
+    const touchEvent = new TouchStartEvent(clientX, clientY, pointerId)
+    touchEvent.target = this
+    for (let callback of this.touchStartListeners) {
+      callback(touchEvent)
+      if ((touchEvent as any)._trackHandler) {
+        return (touchEvent as any)._trackHandler
+      }
+    }
+    return null
+  }
+
+  isPressed(): boolean {
+    if (!this._id) return false
+    return _creatorUI.isButtonPressed(this._id)
+  }
+}
+
+export function UIButton(): UIButton;
+export function UIButton(children: UINodeChild[]): UIButton;
+export function UIButton(style: UIButtonStyle): UIButton;
+export function UIButton(style: UIButtonStyle, children: UINodeChild[]): UIButton;
+export function UIButton(...args: [] | [UINodeChild[] | UIButtonStyle] | [UIButtonStyle, children: UINodeChild[]]): UIButton {
+  if (args.length === 0) {
+    return new ButtonElement("button", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new ButtonElement("button", {}, args[0])
+    } else {
+      return new ButtonElement("button", args[0], [])
+    }
+  } else {
+    return new ButtonElement("button", args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIContainer.ts

@@ -0,0 +1,100 @@
+import { ContainerElement, type AnimateStyle, type AppearStyle, type ContainerStyle, type DisappearStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type Style, type StyleFn, type UINode, type UINodeChild } from "./UINode"
+
+export type UIContainerStyle = ElementStyle & DrawableStyle & ContainerStyle
+
+export interface UIColumn {
+  readonly type: "column",
+  style: Style<this, UIContainerStyle>,
+  animateTo: AnimateStyle<this, UIContainerStyle>
+  animateFrom: AnimateStyle<this, UIContainerStyle>
+
+  append(...nodes: UINodeChild[]): UIColumn
+  insert(index: number, ...nodes: UINodeChild[]): UIColumn
+  remove(...nodes: UINodeChild[]): UIColumn
+  setContent(nodes: UINodeChild[]): this
+  
+  onLayout(onLayout: OnLayoutCallback): this
+
+  readonly children: UINodeChild[]
+}
+export function UIColumn(): UIColumn
+export function UIColumn(children: UINodeChild[]): UIColumn
+export function UIColumn(style: UIContainerStyle): UIColumn
+export function UIColumn(style: UIContainerStyle, children: UINodeChild[]): UIColumn
+export function UIColumn(...args: [] | [UINodeChild[] | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[]]): UIColumn {
+  if (args.length === 0) {
+    return new ContainerElement("column", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new ContainerElement("column", {}, args[0])
+    } else {
+      return new ContainerElement("column", args[0], [])
+    }
+  } else {
+    return new ContainerElement("column", args[0], args[1])
+  }
+}
+
+export interface UIRow {
+  readonly type: "row",
+  style: Style<this, UIContainerStyle>,
+  animateTo: AnimateStyle<this, UIContainerStyle>,
+  animateFrom: AnimateStyle<this, UIContainerStyle>,
+
+  append(...nodes: UINodeChild[]): UIRow
+  insert(index: number, ...nodes: UINodeChild[]): UIRow
+  remove(...nodes: UINodeChild[]): UIRow
+  setContent(nodes: UINodeChild[]): this
+
+  onLayout(onLayout: OnLayoutCallback): this
+
+  readonly children: UINodeChild[],
+}
+export function UIRow(children: UINodeChild[]): UIRow
+export function UIRow(style: UIContainerStyle): UIRow
+export function UIRow(style: UIContainerStyle, children: UINodeChild[]): UIRow
+export function UIRow(...args: [] | [UINodeChild[] | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[]]): UIRow {
+  if (args.length === 0) {
+    return new ContainerElement("row", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new ContainerElement("row", {}, args[0])
+    } else {
+      return new ContainerElement("row", args[0], [])
+    }
+  } else {
+    return new ContainerElement("row", args[0], args[1])
+  }
+}
+
+export interface UIBox {
+  readonly type: "box",
+  style: Style<this, UIContainerStyle>,
+  animateTo: AnimateStyle<this, UIContainerStyle>,
+  animateFrom: AnimateStyle<this, UIContainerStyle>,
+
+  append(...nodes: UINodeChild[]): this
+  insert(index: number, ...nodes: UINodeChild[]): this
+  remove(...nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[]): this
+
+  onLayout(onLayout: OnLayoutCallback): this
+
+  readonly children: UINodeChild[],
+}
+export function UIBox(children: UINodeChild[]): UIBox
+export function UIBox(style: UIContainerStyle): UIBox
+export function UIBox(style: UIContainerStyle, children: UINodeChild[]): UIBox
+export function UIBox(...args: [] | [UINodeChild[] | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[]]): UIBox {
+  if (args.length === 0) {
+    return new ContainerElement("box", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new ContainerElement("box", {}, args[0])
+    } else {
+      return new ContainerElement("box", args[0], [])
+    }
+  } else {
+    return new ContainerElement("box", args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIImage.ts

@@ -0,0 +1,68 @@
+import type { FetchResponse } from "../runtime/fetch"
+import type { SvgSourceValue as SvgSource } from "../runtime/misc"
+import type { File } from "../runtime/fetch"
+import { Element, type AnimateStyle, type Color, type ElementStyle, type OnLayoutCallback, type Style } from "./UINode"
+
+export type UIImageStyle = ElementStyle & { borderRadius?: number, objectFit?: "cover" | "contain" | "fill", tintColor?: Color }
+
+export interface UIImage {
+  readonly type: "image",
+  src: string | FetchResponse | File | SvgSource,
+  style: Style<this, UIImageStyle>
+  animateTo: AnimateStyle<this, UIImageStyle>
+  animateFrom: AnimateStyle<this, UIImageStyle>
+
+  // Render only a sub-rectangle of the source texture (coords/size in texture pixels).
+  // This is the atlas / spritesheet primitive: the initial crop is the first call, sprite
+  // animation is swapping the rect per frame. The rect's w/h become the node's intrinsic
+  // size (one frame, not the whole atlas) and it overrides objectFit — the cropped frame
+  // always fills the box.
+  setSourceRect(x: number, y: number, w: number, h: number): this
+
+  onLayout(onLayout: OnLayoutCallback): this
+}
+
+class ImageElement extends Element<"image"> {
+  private _src: string | FetchResponse | File | SvgSource
+  // Current source sub-rect; undefined until the first setSourceRect. Kept on the node (not
+  // just sent as a command) so a crop set while detached (_id == 0) is reapplied at mount —
+  // the viewer reads it when it creates the element.
+  private _sourceRect?: [number, number, number, number]
+  constructor(style: any, src: string | FetchResponse | File | SvgSource) {
+    super("image", style)
+    this._src = src
+  }
+
+  get src() {
+    return this._src
+  }
+  set src(value) {
+    this._src = value
+    if (this._id !== 0) {
+      _creatorUI.updateNode(this._id, "src", value)
+    }
+  }
+
+  setSourceRect(x: number, y: number, w: number, h: number): this {
+    // Stash on the node so a crop set before mount is reapplied when the element is created.
+    this._sourceRect = [x, y, w, h]
+    // Live mutation: fast channel (not _style → no PX_VALUE density scaling: these are texture
+    // pixels, a different coordinate space). On a detached node there is nothing to mutate yet —
+    // the stash above carries it to mount. The viewer decides relayout vs draw-only by comparing
+    // w/h against the rect it has stashed on the element.
+    if (this._id !== 0) {
+      _creatorUI.setSourceRect(this._id, x, y, w, h)
+    }
+    return this
+  }
+}
+
+export function UIImage(src: string | FetchResponse | File | SvgSource): UIImage
+export function UIImage(style: UIImageStyle, src: string | FetchResponse | File | SvgSource): UIImage
+export function UIImage(...args: [string | FetchResponse | File | SvgSource] | [UIImageStyle, string | FetchResponse | File | SvgSource]): UIImage {
+  if (args.length === 1) {
+    return new ImageElement({}, args[0])
+  } else {
+    return new ImageElement(args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIInput.ts

@@ -0,0 +1,78 @@
+import { type ElementStyle, type DrawableStyle, type Style, type StyleFn, type AppearStyle, type DisappearStyle, Element, type TextStyle, type Color, type OnLayoutCallback, type BaseStyle, type AnimateStyle } from "./UINode";
+
+type InputStyle = { placeholder?: string, placeholderColor?: Color, type?: "text" | "password" | "search" }
+export type UIInputStyle = ElementStyle & DrawableStyle & TextStyle & InputStyle
+
+export interface UIInput {
+  readonly type: "input",
+
+  value: string
+
+  style: Style<this, UIInputStyle & { onFocused?: DrawableStyle & BaseStyle & { duration?: number } }>,
+  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle>
+  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle>
+
+  onChange(callback: (value: string) => void): UIInput
+  onFocus(callback: () => void): UIInput
+  onBlur(callback: () => void): UIInput
+  onLayout(onLayout: OnLayoutCallback): this
+}
+
+export interface UITextArea {
+  readonly type: "textarea",
+
+  value: string
+
+  style: Style<this, UIInputStyle & { onFocused?: DrawableStyle & BaseStyle & { duration?: number } }>,
+  // styleV: StyleFn<this, UIInputStyle>,
+  // styleH: StyleFn<this, UIInputStyle>,
+
+  // appear: AppearStyle<this, UIInputStyle>
+  // disappear: DisappearStyle<this, UIInputStyle>
+
+  onChange(callback: (value: string) => void): UITextArea
+  onFocus(callback: () => void): UITextArea
+  onBlur(callback: () => void): UITextArea
+}
+
+class InputElement<T extends "input" | "textarea"> extends Element<T> {
+  
+  readonly cl: Function[] = []
+  readonly fl: Function[] = []
+  readonly bl: Function[] = []
+
+  get value() {
+    return _creatorUI.getTextValue(this._id)
+  }
+  set value(value: string) {
+    if (this._id !== 0) {
+      _creatorUI.updateNode(this._id, "value", value)
+    }
+  }
+
+  onChange (callback: (value: string) => void): this {
+    this.cl.push(callback)
+    return this
+  }
+  onFocus(callback: () => void): this {
+    this.fl.push(callback)
+    return this
+  }
+  onBlur(callback: () => void): this {
+    this.bl.push(callback)
+    return this
+  }
+}
+
+export function UIInput(): UIInput;
+export function UIInput(style: UIInputStyle): UIInput;
+export function UIInput(style?: UIInputStyle): UIInput {
+  return new InputElement("input", style ?? {})
+}
+
+export function UITextArea(): UITextArea;
+export function UITextArea(style: UIInputStyle): UITextArea;
+export function UITextArea(style?: UIInputStyle): UITextArea {
+  return new InputElement("textarea", style ?? {})
+}
+

package/runtime/sdk/ui/UINode.ts

@@ -0,0 +1,342 @@
+import type { FetchResponse } from "../runtime/fetch"
+
+export interface UINode {
+  readonly type: string
+  /** Author-given semantic name (a stable selector for tests + AI review feedback). */
+  readonly name?: string
+  style: Style<this, any>
+}
+
+export type UINodeChild = UINode | null | undefined | false
+
+export type Color = number | string | null
+
+export type BaseStyle = {
+  opacity?: number | `${number}`,
+  transform?: string | null,
+  backgroundColor?: Color | null,
+  bgColor?: Color | null,
+  overflow?: "visible" | "hidden",
+  boxSizing?: "border-box" | "content-box",
+  /**
+   * Author-given semantic name — a stable selector for tests and for marking elements in the AI
+   * code-review feedback loop. NOT a style: it's extracted at construction (never sent to the layout
+   * engine) and surfaced on the node + in the renderer's serialized output. Available on every element.
+   */
+  name?: string,
+}
+
+export type DrawableStyle = {
+  backgroundImage?: FetchResponse | File | string | null,
+  bgGradient?: string,
+  backgroundGradient?: string,
+  bgImage?: FetchResponse  | File | string | null,
+  backgroundSize?: "cover" | "contain" | "tile",
+  bgSize?: "cover" | "contain" | "tile",
+  border?: string | number | null,
+  borderWidth?: number,
+  borderColor?: Color,
+
+  borderLeft?: string | number | null,
+  borderLeftWidth?: number,
+  borderLeftColor?: Color,
+  borderTop?: string | number | null,
+  borderTopWidth?: number,
+  borderTopColor?: Color,
+  borderRight?: string | number | null,
+  borderRightWidth?: number,
+  borderRightColor?: Color,
+  borderBottom?: string | number | null,
+  borderBottomWidth?: number,
+  borderBottomColor?: Color,
+
+  borderRadius?: UIValue | string,
+  borderTopLeftRadius?: UIValue,
+  borderTopRightRadius?: UIValue,
+  borderBottomLeftRadius?: UIValue,
+  borderBottomRightRadius?: UIValue,
+
+  pointerEvents?: "all" | "none",
+}
+
+export type ContainerStyle = {
+  flexDirection?: "row" | "column",
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-evenly",
+  alignItems?: "flex-start" | "center" | "flex-end" | "stretch",
+  gap?: UIValue,
+  flexWrap?: "nowrap" | "wrap" | "wrap-reverse"
+}
+
+export type ScrollStyle = {
+  scrollX?: "auto" | "all" | "none",
+  scrollY?: "auto" | "all" | "none"
+}
+
+type UIValue = number | 
+  `${number}px` | 
+  `${number}vw` | 
+  `${number}vh` | 
+  `${number}vmin` | 
+  `${number}vmax` | 
+  `${number}em` | 
+  `calc(${string})` |
+  `min(${string})` |
+  `max(${string})` |
+  `${string}%` |
+  `clamp(${string})`
+
+export type PaddingStyle = {
+  paddingLeft?: UIValue | "safe-left" | "safe-left-comfort",
+  paddingTop?: UIValue | "safe-top" | "safe-top-comfort",
+  paddingRight?: UIValue | "safe-right" | "safe-right-comfort",
+  paddingBottom?: UIValue | "safe-bottom" | "safe-bottom-comfort",
+  padding?: UIValue | "safe-all" | "safe-all-comfort",
+  paddingHorizontal?: UIValue,
+  paddingVertical?: UIValue,
+
+  pl?: UIValue | "safe-left" | "safe-left-comfort",
+  pt?: UIValue | "safe-top" | "safe-top-comfort",
+  pr?: UIValue | "safe-right" | "safe-right-comfort",
+  pb?: UIValue | "safe-bottom" | "safe-bottom-comfort",
+  p?: UIValue | "safe-all" | "safe-all-comfort",
+  px?: UIValue,
+  py?: UIValue,
+}
+
+
+
+export type MarginStyle = {
+  marginLeft?: UIValue | "auto" | "safe-left" | "safe-left-comfort",
+  marginTop?: UIValue | "auto" | "safe-top" | "safe-top-comfort",
+  marginRight?: UIValue | "auto" | "safe-right" | "safe-right-comfort",
+  marginBottom?: UIValue | "auto" | "safe-bottom" | "safe-bottom-comfort",
+  margin?: UIValue | "auto" | "safe-all" | "safe-all-comfort",
+  marginHorizontal?: UIValue | "auto",
+  marginVertical?: UIValue | "auto",
+
+  ml?: UIValue | "auto" | "safe-left" | "safe-left-comfort",
+  mt?: UIValue | "auto" | "safe-top" | "safe-top-comfort",
+  mr?: UIValue | "auto" | "safe-right" | "safe-right-comfort",
+  mb?: UIValue | "auto" | "safe-bottom" | "safe-bottom-comfort",
+  m?: UIValue | "auto" | "safe-all" | "safe-all-comfort",
+  mx?: UIValue | "auto",
+  my?: UIValue | "auto",
+}
+
+export type PositionStyle = {
+  top?: UIValue | `${number}%` | 'safe-top' | 'safe-top-comfort',
+  left?: UIValue | `${number}%` | 'safe-left' | 'safe-left-comfort',
+  bottom?: UIValue | `${number}%` | 'safe-bottom' | 'safe-bottom-comfort',
+  right?: UIValue | `${number}%` | 'safe-right' | 'safe-right-comfort',
+  width?: UIValue | `${number}%` | "auto",
+  height?: UIValue | `${number}%` | "auto",
+  maxWidth?: UIValue | `${number}%` | "auto",
+  maxHeight?: UIValue | `${number}%` | "auto",
+  minWidth?: UIValue | `${number}%` | "auto",
+  minHeight?: UIValue | `${number}%` | "auto",
+}
+
+export type ElementStyle = PaddingStyle & MarginStyle & BaseStyle & PositionStyle & {
+  position?: "absolute" | "static" | "relative",
+  aspectRatio?: number,
+  flex?: number | string,
+  flexGrow?: number,
+  flexShrink?: number,
+  flexBase?: UIValue | `${number}%` | "auto",
+  alignSelf?: "flex-start" | "center" | "flex-end" | "stretch",
+  display?: "none" | "flex"
+}
+
+export type TextStyle =  {
+  textAlign?: "start" | "center" | "end" | "left" | "right"
+  fontFamily?: string,
+  fontSize?: UIValue,
+  lineHeight?: UIValue | "normal",
+  fontWeight?: number | `${number}` | "normal" | "bold",
+  fontStyle?: "normal" | "italic",
+  color?: Color,
+  textDecoration?: "underline" | "line-through" | "none",
+  letterSpacing?: UIValue
+}
+
+// Не надо переписывать эту функцию 10 раз, обрати внимание, что у тебя тут возвращается this
+function styleFunction(this: any, newStyle: any) {
+  Object.assign(this._style, newStyle)
+  if (this._id !== 0) {
+    _creatorUI.mergeStyle(this._id, newStyle)
+  }
+  return this
+}
+
+const handler: ProxyHandler<any> = {
+  get(target, key, receiver) {
+    if (key === "_raw") {
+      return target._el._style
+    }
+    return target._el._style[key]
+  },
+  set(target, key: string, value: string | number) {
+    if (target._el._id !== 0) {
+      _creatorUI.updateStyle(target._el._id, key, value)
+    }
+    target._el._style[key] = value
+    return true
+  },
+  getOwnPropertyDescriptor(target, p) {
+    return Object.getOwnPropertyDescriptor(target._el._style, p)
+  },
+  ownKeys(target) {    
+    return Object.keys(target._el._style)
+  }
+}
+
+function Style() {
+  
+}
+
+export type StyleFn <R, T extends object> = ((this: R, style: T & { onLandscape?: T, onPortait?: T }) => R)
+export type Style <R, T extends object> = StyleFn<R,T> & T & { onLandscape?: T, onPortait?: T }
+
+export type AnimateStyle<R, T extends object> = ((this: R, style: T & { duration?: number, delay?: number, layer?: number, commit?: boolean }) => R)
+
+export type AppearStyle <R, T> = (arg: { from: T, duration?: number, delay?: number }) => R
+export type DisappearStyle <R, T> = (arg: { to: T, duration?: number, delay?: number }) => R
+
+export type OnLayoutCallback = (layout: { left: number, top: number, width: number, height: number }) => void
+
+export class Element<T extends string> {
+  readonly type: T
+  /** Author-given semantic name (LeCodes `name`) — see BaseStyle.name. Extracted from the options
+   *  object so it never reaches the layout engine; the renderer reads it off the node. */
+  readonly name?: string
+  protected _style: any
+
+  protected _id: number = 0
+
+  protected _styleProxy: any
+  protected _appear: any
+  protected _disappear: any
+
+  constructor(type: T, style: any) {
+    this.type = type
+    if (style && typeof style.name === "string" && style.name.length > 0) {
+      this.name = style.name
+      delete style.name
+    }
+    this._style = style
+  }
+
+  get style(): any {
+    if (this._styleProxy) return this._styleProxy
+    const obj = styleFunction.bind(this)
+    // @ts-ignore
+    obj._el = this
+
+    const proxy = new Proxy(obj, handler)
+    this._styleProxy = proxy
+    return proxy
+  }
+
+  animateTo(style: any): this{ 
+    _creatorUI.animateTo(this._id, style)
+    if (style.commit !== false) {
+      Object.assign(this._style, style)
+    }
+    return this
+  }
+  animateFrom(style: any): this{ 
+    _creatorUI.animateFrom(this._id, style)
+    return this
+  }
+
+  protected ll?: OnLayoutCallback[]
+  onLayout(onLayout: OnLayoutCallback): this { 
+    if (this.ll) {
+      this.ll.push(onLayout)
+    } else {
+      this.ll = [ onLayout ]
+    }
+    return this
+  }
+}
+
+export class ContainerElement<T extends string> extends Element<T> {
+  children: any[] = []
+
+  constructor(type: T, style: any, children: any[]) {
+    super(type, style)
+    this.children = children
+  }
+  
+  append(...nodes: UINodeChild[]): this {
+    if (this._id === 0) {
+      this.children.push(...nodes)
+      return this
+    }
+    let index = 0
+    for (let child of this.children) {
+      if (child) {
+        index++
+      }
+    }
+    for (let node of nodes) {
+      if (!node) continue
+      _creatorUI.insertNode(index, this._id, node) 
+      index++
+    }
+    this.children.push(...nodes)
+    return this
+  }
+  insert(index: number, ...nodes: UINodeChild[]): this {
+    if (this._id === 0) {
+      this.children.splice(index, 0, ...nodes)
+      return this
+    }
+
+    let _index = 0
+    for (let i = 0; i < index; i++) {
+      if (this.children[i]) {
+        _index++
+      }
+    }
+    for (let node of nodes) {
+      if (!node) continue
+      _creatorUI.insertNode(_index, this._id, node) 
+      _index++
+    }
+    this.children.splice(index, 0, ...nodes)
+    return this
+  }
+  remove(...nodesToDelete: UINode[]): this {
+    const set = new Set(nodesToDelete)
+
+    for (let i = 0; i < this.children.length; i++) {
+      if (set.has(this.children[i])) {
+        set.delete(this.children[i])
+        this.children.splice(i, 1)
+        i--
+
+        if (set.size === 0) {
+          break
+        }
+      }
+    }
+
+    if (this._id === 0) {
+      return this
+    }
+    for (let node of nodesToDelete) {
+      _creatorUI.removeNode(this._id, node)
+    }
+    return this
+  }
+  
+  setContent(children: UINodeChild[]): this {
+    if (this._id !== 0) {
+      _creatorUI.setContent(this._id, this.children, children)
+    }
+    this.children.length = 0
+    this.children.push(...children)
+    return this
+  }
+}