lecodes-cli 0.3.0 → 0.5.0

package/runtime/sdk/ui/UIContainer.ts

@@ -1,4 +1,4 @@
-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"
+import { ContainerElement, type AnimateStyle, type AppearStyle, type ChildrenFn, 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
 
@@ -11,21 +11,26 @@ export interface UIColumn {
   append(...nodes: UINodeChild[]): UIColumn
   insert(index: number, ...nodes: UINodeChild[]): UIColumn
   remove(...nodes: UINodeChild[]): UIColumn
-  setContent(nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[] | ChildrenFn): this
   
   onLayout(onLayout: OnLayoutCallback): this
 
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
+
   readonly children: UINodeChild[]
 }
 export function UIColumn(): UIColumn
-export function UIColumn(children: UINodeChild[]): UIColumn
+export function UIColumn(children: UINodeChild[] | ChildrenFn): 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 {
+export function UIColumn(...args: [] | [UINodeChild[] | ChildrenFn | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[] | ChildrenFn]): UIColumn {
   if (args.length === 0) {
     return new ContainerElement("column", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new ContainerElement("column", {}, args[0])
     } else {
       return new ContainerElement("column", args[0], [])
@@ -44,20 +49,25 @@ export interface UIRow {
   append(...nodes: UINodeChild[]): UIRow
   insert(index: number, ...nodes: UINodeChild[]): UIRow
   remove(...nodes: UINodeChild[]): UIRow
-  setContent(nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[] | ChildrenFn): this
 
   onLayout(onLayout: OnLayoutCallback): this
 
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
+
   readonly children: UINodeChild[],
 }
-export function UIRow(children: UINodeChild[]): UIRow
+export function UIRow(children: UINodeChild[] | ChildrenFn): 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 {
+export function UIRow(...args: [] | [UINodeChild[] | ChildrenFn | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[] | ChildrenFn]): UIRow {
   if (args.length === 0) {
     return new ContainerElement("row", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new ContainerElement("row", {}, args[0])
     } else {
       return new ContainerElement("row", args[0], [])
@@ -76,20 +86,25 @@ export interface UIBox {
   append(...nodes: UINodeChild[]): this
   insert(index: number, ...nodes: UINodeChild[]): this
   remove(...nodes: UINodeChild[]): this
-  setContent(nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[] | ChildrenFn): this
 
   onLayout(onLayout: OnLayoutCallback): this
 
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
+
   readonly children: UINodeChild[],
 }
-export function UIBox(children: UINodeChild[]): UIBox
+export function UIBox(children: UINodeChild[] | ChildrenFn): 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 {
+export function UIBox(...args: [] | [UINodeChild[] | ChildrenFn | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[] | ChildrenFn]): UIBox {
   if (args.length === 0) {
     return new ContainerElement("box", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new ContainerElement("box", {}, args[0])
     } else {
       return new ContainerElement("box", args[0], [])

package/runtime/sdk/ui/UIImage.ts

@@ -35,6 +35,11 @@ export interface UIImage {
   setSourceRect(x: number, y: number, w: number, h: number): this
 
   onLayout(onLayout: OnLayoutCallback): this
+
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 
 class ImageElement extends Element<"image"> {

package/runtime/sdk/ui/UIInput.ts

@@ -16,6 +16,11 @@ export interface UIInput {
   onFocus(callback: () => void): UIInput
   onBlur(callback: () => void): UIInput
   onLayout(onLayout: OnLayoutCallback): this
+
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 
 export interface UITextArea {
@@ -33,6 +38,11 @@ export interface UITextArea {
   onChange(callback: (value: string) => void): UITextArea
   onFocus(callback: () => void): UITextArea
   onBlur(callback: () => void): UITextArea
+
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 
 class InputElement<T extends "input" | "textarea"> extends Element<T> {

package/runtime/sdk/ui/UINode.ts

@@ -1,4 +1,5 @@
 import type { FetchResponse } from "../runtime/fetch"
+import { createBinding, disposeBinding } from "../core/signals"
 
 export interface UINode {
   readonly type: string
@@ -159,12 +160,39 @@ export type TextStyle =  {
   letterSpacing?: UIValue
 }
 
+// Pulls function-valued props out of `style` (mutating it — they must never reach the host bridge)
+// and returns them. A static value under the same key overrides (disposes) an existing binding.
+function extractBindings(el: any, style: any): [string, () => any][] | null {
+  let fns: [string, () => any][] | null = null
+  for (const key of Object.keys(style)) {
+    const value = style[key]
+    if (typeof value === "function") {
+      (fns ??= []).push([key, value])
+      delete style[key]
+    } else if (el._fx !== undefined) {
+      disposeBinding(el, key)
+    }
+  }
+  return fns
+}
+
+// One reactive binding per style key: re-runs when a signal the function read changes, writing
+// through the style proxy (so a mounted node hits _creatorUI.updateStyle, an unmounted one just
+// keeps _style current for the next mount).
+function applyBindings(el: any, fns: [string, () => any][]) {
+  for (const [ key, fn ] of fns) {
+    createBinding(el, key, () => { el.style[key] = fn() })
+  }
+}
+
 // Не надо переписывать эту функцию 10 раз, обрати внимание, что у тебя тут возвращается this
 function styleFunction(this: any, newStyle: any) {
+  const fns = extractBindings(this, newStyle)
   Object.assign(this._style, newStyle)
   if (this._id !== 0) {
     _creatorUI.mergeStyle(this._id, newStyle)
   }
+  if (fns) applyBindings(this, fns)
   return this
 }
 
@@ -176,6 +204,14 @@ const handler: ProxyHandler<any> = {
     return target._el._style[key]
   },
   set(target, key: string, value: string | number) {
+    if (typeof value === "function") {
+      // Reactive binding: `el.style.prop = () => sig.value`. Note a later plain write does NOT
+      // dispose the binding (this is the hot path) — override statically via `.style({ prop })`.
+      const el = target._el
+      const fn = value as unknown as () => any
+      createBinding(el, key, () => { el.style[key] = fn() })
+      return true
+    }
     if (target._el._id !== 0) {
       _creatorUI.updateStyle(target._el._id, key, value)
     }
@@ -194,8 +230,18 @@ 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 }
+// Reactive style input: every primitive-valued prop also accepts a `() => value` binding that
+// re-applies when a signal it read changes. Nested state blocks (onPressed, onLandscape, …) stay
+// static — bindings are extracted at the top level only.
+export type Reactive<T> = { [K in keyof T]: NonNullable<T[K]> extends object ? T[K] : T[K] | (() => T[K]) }
+
+// User-defined style classes: any `$`-prefixed key in .style() declares a state block (like
+// onPressed, but with any name), toggled from code via setClass/toggleClass. `duration`/`delay`
+// make the swap transition.
+export type ClassStyles<T> = { [key: `$${string}`]: T & { duration?: number, delay?: number } }
+
+export type StyleFn <R, T extends object> = ((this: R, style: Reactive<T> & { onLandscape?: T, onPortait?: T } & ClassStyles<DrawableStyle & BaseStyle>) => R)
+export type Style <R, T extends object> = StyleFn<R,T> & T & { onLandscape?: T, onPortait?: T } & ClassStyles<DrawableStyle & BaseStyle>
 
 export type AnimateStyle<R, T extends object> = ((this: R, style: T & { duration?: number, delay?: number, layer?: number, commit?: boolean }) => R)
 
@@ -216,6 +262,9 @@ export class Element<T extends string> {
   protected _styleProxy: any
   protected _appear: any
   protected _disappear: any
+  /** @internal Reactive bindings owned by this element (style key / "#text" → effect). The element
+   *  is the effect's only strong owner, so discarding a subtree lets its bindings collect with it. */
+  _fx?: Map<string, any>
 
   constructor(type: T, style: any) {
     this.type = type
@@ -224,6 +273,16 @@ export class Element<T extends string> {
       delete style.name
     }
     this._style = style
+    if (style) {
+      const fns = extractBindings(this, style)
+      if (fns) applyBindings(this, fns)   // sync first run — _style holds concrete values pre-mount
+    }
+    // Creation-site capture for the editor preview's element inspector: the host sets the flag
+    // before running the bundle, and the stack (mapped through the bundle's source map) points at
+    // the user code that created this element. Off everywhere else — zero cost when unset.
+    if ((globalThis as any).__lecodesCaptureSites) {
+      (this as any)._site = new Error("lecodes-site")
+    }
   }
 
   get style(): any {
@@ -237,18 +296,53 @@ export class Element<T extends string> {
     return proxy
   }
 
-  animateTo(style: any): this{ 
+  animateTo(style: any): this{
     _creatorUI.animateTo(this._id, style)
     if (style.commit !== false) {
       Object.assign(this._style, style)
     }
     return this
   }
-  animateFrom(style: any): this{ 
+  animateFrom(style: any): this{
     _creatorUI.animateFrom(this._id, style)
     return this
   }
 
+  /** @internal Active style-class names (stored without the `$`). Kept on the element — not just in
+   *  the layout engine — so hosts re-apply them when a detached node is re-mounted (screens
+   *  re-assign _id on every open). */
+  protected _classes?: Set<string>
+
+  /** Activate/deactivate a `$`-class declared in .style() (accepts the name with or without `$`). */
+  setClass(name: string, enabled: boolean): this {
+    if (name[0] === "$") name = name.slice(1)
+    if (enabled) {
+      (this._classes ??= new Set()).add(name)
+    } else {
+      this._classes?.delete(name)
+    }
+    if (this._id !== 0) {
+      _creatorUI.setClass(this._id, name, enabled)
+    }
+    return this
+  }
+
+  toggleClass(name: string): this {
+    return this.setClass(name, !this.hasClass(name))
+  }
+
+  hasClass(name: string): boolean {
+    return this._classes?.has(name[0] === "$" ? name.slice(1) : name) ?? false
+  }
+
+  /** Reactive class binding: keeps the `$`-class active exactly while `fn()` is true — re-runs
+   *  when a signal `fn` read changes. Re-binding the same name replaces the previous binding. */
+  bindClass(name: string, fn: () => boolean): this {
+    if (name[0] === "$") name = name.slice(1)
+    createBinding(this, "#class:" + name, () => { this.setClass(name, !!fn()) })
+    return this
+  }
+
   protected ll?: OnLayoutCallback[]
   onLayout(onLayout: OnLayoutCallback): this { 
     if (this.ll) {
@@ -260,14 +354,113 @@ export class Element<T extends string> {
   }
 }
 
+// ---- reactive children --------------------------------------------------------------------------
+
+export type ChildrenFn = () => UINodeChild[]
+
+// The container whose children binding is currently executing. __uiMap uses it as the cache owner;
+// nested bindings save/restore it, so each level caches on its own element.
+let currentMapOwner: any = null
+
+/**
+ * Compiler-emitted memoized map for reactive children. The chisel `reactiveUi` pass rewrites
+ * `list.map(fn)` inside a children binding to `__uiMap(list, fn, "<file>:<offset>")`, so unchanged
+ * items keep their element identity across re-runs (the reconciler then leaves them mounted).
+ * Cache: per (binding owner, call-site slot), keyed by item reference; duplicate items consume
+ * cached nodes in order. Outside a children binding, for non-array inputs, or for non-element
+ * results it behaves exactly like Array.prototype.map — a wrong rewrite can't change behavior.
+ */
+export function __uiMap(list: any, render: (item: any, index: number) => any, slot: string): any[] {
+  if (currentMapOwner === null || !Array.isArray(list)) {
+    return list?.map(render) ?? []
+  }
+  const slots: Map<string, Map<any, any[]>> = currentMapOwner._mapCache ??= new Map()
+  const prev = slots.get(slot)
+  const next = new Map<any, any[]>()
+  const out: any[] = []
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    const stack = prev?.get(item)
+    let node = stack !== undefined && stack.length > 0 ? stack.shift() : undefined
+    if (node === undefined) {
+      node = render(item, i)
+      if (!(node instanceof Element)) {
+        out.push(node)   // not a UI element — plain map semantics, never cached
+        continue
+      }
+    }
+    let arr = next.get(item)
+    if (arr === undefined) next.set(item, arr = [])
+    arr.push(node)
+    out.push(node)
+  }
+  // entries left in `prev` (items gone from the list) are dropped here; their nodes and bindings
+  // become unreachable and collect
+  slots.set(slot, next)
+  return out
+}
+
 export class ContainerElement<T extends string> extends Element<T> {
   children: any[] = []
 
-  constructor(type: T, style: any, children: any[]) {
+  constructor(type: T, style: any, children: any[] | ChildrenFn) {
     super(type, style)
-    this.children = children
+    if (typeof children === "function") {
+      this._bindChildren(children)
+    } else {
+      this.children = children
+    }
   }
-  
+
+  /** @internal Reactive children: re-runs when a signal read inside `fn` changes and reconciles
+   *  the result against the mounted children with minimal insert/remove ops. */
+  _bindChildren(fn: ChildrenFn) {
+    createBinding(this, "#children", () => {
+      const prevOwner = currentMapOwner
+      currentMapOwner = this
+      let next: UINodeChild[]
+      try {
+        next = fn()
+      } finally {
+        currentMapOwner = prevOwner
+      }
+      this._reconcile(Array.isArray(next) ? next : [])
+    })
+  }
+
+  /** @internal Identity diff of the current children against `next`: departed nodes are removed,
+   *  new ones inserted at their position, kept nodes stay mounted (so their host state survives).
+   *  A moved node is remove+insert — it remounts. Falsy entries are compacted away. */
+  _reconcile(next: UINodeChild[]) {
+    const target: any[] = []
+    for (const c of next) if (c) target.push(c)
+
+    if (this._id === 0) {
+      this.children.length = 0
+      this.children.push(...target)
+      return
+    }
+
+    // compact holes left by a previous static children array (falsy entries were never mounted)
+    for (let i = this.children.length - 1; i >= 0; i--) {
+      if (!this.children[i]) this.children.splice(i, 1)
+    }
+
+    const targetSet = new Set(target)
+    const departed = this.children.filter(c => !targetSet.has(c))
+    if (departed.length > 0) this.remove(...departed)
+
+    // this.children now mirrors the mounted order; walk the target and fix mismatches in place
+    for (let i = 0; i < target.length; i++) {
+      if (this.children[i] === target[i]) continue
+      const node = target[i]
+      if (this.children.includes(node, i + 1)) {
+        this.remove(node)   // moved forward — remount at its new position
+      }
+      this.insert(i, node)
+    }
+  }
+
   append(...nodes: UINodeChild[]): this {
     if (this._id === 0) {
       this.children.push(...nodes)
@@ -331,7 +524,12 @@ export class ContainerElement<T extends string> extends Element<T> {
     return this
   }
   
-  setContent(children: UINodeChild[]): this {
+  setContent(children: UINodeChild[] | ChildrenFn): this {
+    if (typeof children === "function") {
+      this._bindChildren(children)   // createBinding replaces a previous "#children" binding
+      return this
+    }
+    disposeBinding(this, "#children")  // static content overrides a reactive binding
     if (this._id !== 0) {
       _creatorUI.setContent(this._id, this.children, children)
     }

package/runtime/sdk/ui/UIScreen.ts

@@ -1,5 +1,5 @@
 import { TouchStartEvent } from "../runtime/touch"
-import { ContainerElement, type AnimateStyle, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type PaddingStyle, type ScrollStyle, type Style, type UINodeChild, } from "./UINode"
+import { ContainerElement, type AnimateStyle, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type PaddingStyle, type ScrollStyle, type Style, type UINodeChild, type ChildrenFn, } from "./UINode"
 
 export type UIScreenStyle = ContainerStyle & DrawableStyle & PaddingStyle & ScrollStyle & BaseStyle & ScrollStyle & { refreshControlColor?: Color }
 
@@ -21,7 +21,7 @@ export interface UIScreen <Scrollable extends boolean = false> {
   append(...nodes: UINodeChild[]): this
   insert(index: number, ...nodes: UINodeChild[]): this
   remove(...nodes: UINodeChild[]): this
-  setContent(nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[] | ChildrenFn): this
   
   readonly children: UINodeChild[],
 
@@ -36,6 +36,11 @@ export interface UIScreen <Scrollable extends boolean = false> {
 
   onLayout(onLayout: OnLayoutCallback): this
 
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
+
   onTouchStart(callback: (ev: TouchStartEvent<UIScreen<boolean>>) => void): this,
 }
 
@@ -109,14 +114,14 @@ export class ScreenElement extends ContainerElement<"screen"> {
 }
 
 export function UIScreen(): UIScreen<false>;
-export function UIScreen(children: UINodeChild[]): UIScreen<false>;
+export function UIScreen(children: UINodeChild[] | ChildrenFn): UIScreen<false>;
 export function UIScreen(style: UIScreenStyle): UIScreen<false>;
 export function UIScreen(style: UIScreenStyle, children: UINodeChild[]): UIScreen<false>;
-export function UIScreen(...args: [] | [UINodeChild[] | UIScreenStyle] | [UIScreenStyle, children: UINodeChild[]]): UIScreen<false> {
+export function UIScreen(...args: [] | [UINodeChild[] | ChildrenFn | UIScreenStyle] | [UIScreenStyle, children: UINodeChild[] | ChildrenFn]): UIScreen<false> {
   if (args.length === 0) {
     return new ScreenElement("screen", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new ScreenElement("screen", {}, args[0])
     } else {
       return new ScreenElement("screen", args[0], [])

package/runtime/sdk/ui/UIScrollable.ts

@@ -1,5 +1,5 @@
 import type { UIContainerStyle } from "./UIContainer"
-import { type Style, type AnimateStyle, type UINodeChild, type OnLayoutCallback, ContainerElement } from "./UINode"
+import { type Style, type AnimateStyle, type UINodeChild, type ChildrenFn, type OnLayoutCallback, ContainerElement } from "./UINode"
 
 export type ScrollStyle = { showScrollbar?: boolean, overscrollMode?: "none" | "absorb" | "default" }
 
@@ -14,10 +14,15 @@ export interface UIScrollable {
   append(...nodes: UINodeChild[]): UIScrollable
   insert(index: number, ...nodes: UINodeChild[]): UIScrollable
   remove(...nodes: UINodeChild[]): UIScrollable
-  setContent(nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[] | ChildrenFn): this
 
   onLayout(onLayout: OnLayoutCallback): this
 
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
+
   onScroll(callback: (scrollPosition: number) => void): UIScrollable,
   onScrollRelease(callback: () => void): UIScrollable,
   onOverscroll(callback: (delta: number) => void): UIScrollable
@@ -52,14 +57,14 @@ class ScrollableElement extends ContainerElement<"scrollable"> {
 }
 
 export function UIScrollable(): UIScrollable
-export function UIScrollable(children: UINodeChild[]): UIScrollable
+export function UIScrollable(children: UINodeChild[] | ChildrenFn): UIScrollable
 export function UIScrollable(style: UIScrollableStyle): UIScrollable
 export function UIScrollable(style: UIScrollableStyle, children: UINodeChild[]): UIScrollable
-export function UIScrollable(...args: [] | [UINodeChild[] | UIScrollableStyle] | [UIScrollableStyle, children: UINodeChild[]]): UIScrollable {
+export function UIScrollable(...args: [] | [UINodeChild[] | ChildrenFn | UIScrollableStyle] | [UIScrollableStyle, children: UINodeChild[] | ChildrenFn]): UIScrollable {
   if (args.length === 0) {
     return new ScrollableElement("scrollable", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new ScrollableElement("scrollable", {}, args[0])
     } else {
       return new ScrollableElement("scrollable", args[0], [])

package/runtime/sdk/ui/UISpacer.ts

@@ -6,6 +6,10 @@ export interface UISpacer {
   readonly type: "spacer",
   style: Style<this, UISpacerStyle>,
 
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 export function UISpacer(): UISpacer
 export function UISpacer(style: UISpacerStyle): UISpacer

package/runtime/sdk/ui/UIText.ts

@@ -1,3 +1,4 @@
+import { createBinding } from "../core/signals"
 import { Element, type AnimateStyle, type BaseStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type Style, type TextStyle } from "./UINode"
 
 export type UITextStyle = ElementStyle & TextStyle
@@ -10,13 +11,28 @@ export interface UIText {
   animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle & TextStyle>
 
   onLayout(onLayout: OnLayoutCallback): this
+
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 
 export class TextElement extends Element<"text"> {
   private _text: string
-  constructor(style: any, text: string) {
+  constructor(style: any, text: string | (() => string)) {
     super("text", style)
-    this._text = text
+    if (typeof text === "function") {
+      // Reactive content: re-runs when a signal `text()` read changes; the setter routes to
+      // _creatorUI.updateNode when mounted and just keeps _text current when not.
+      this._text = ""
+      createBinding(this, "#text", () => {
+        const value = text()
+        if (value !== this._text) this.text = value
+      })
+    } else {
+      this._text = text
+    }
   }
   get text(): string {
     return this._text
@@ -29,9 +45,9 @@ export class TextElement extends Element<"text"> {
   }
 }
 
-export function UIText(text: string): UIText;
-export function UIText(style: UITextStyle, text: string): UIText;
-export function UIText(...args: [string] | [UITextStyle, string]): UIText {
+export function UIText(text: string | (() => string)): UIText;
+export function UIText(style: UITextStyle, text: string | (() => string)): UIText;
+export function UIText(...args: [string | (() => string)] | [UITextStyle, string | (() => string)]): UIText {
   if (args.length === 1) {
     return new TextElement({}, args[0])
   } else {

package/runtime/sdk/ui/UIVideo.ts

@@ -11,6 +11,11 @@ export interface UIVideo {
   animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle>
 
   onLayout(onLayout: OnLayoutCallback): this
+
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 
 class VideoElement extends Element<"video"> {

package/runtime/sdk/ui/UIVirtualizedList.ts

@@ -45,6 +45,11 @@ export interface UIVirtualizedList<T = unknown> {
     /** Порог от верхнего края — подгрузка истории в чате */
     onStartReached(thresholdPx: number, callback: () => void): this
     onLayout(onLayout: OnLayoutCallback): this
+
+    setClass(name: string, enabled: boolean): this
+    toggleClass(name: string): this
+    hasClass(name: string): boolean
+    bindClass(name: string, fn: () => boolean): this
 }
 
 export class VListElement<T> extends Element<"vlist"> implements UIVirtualizedList<T> {

package/runtime/sdk/ui/UIWidget.ts

@@ -1,5 +1,5 @@
 import { TouchStartEvent } from "../runtime/touch"
-import { ContainerElement, type AnimateStyle, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type PaddingStyle, type PositionStyle, type Style, type UINodeChild } from "./UINode"
+import { ContainerElement, type AnimateStyle, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type PaddingStyle, type PositionStyle, type Style, type UINodeChild, type ChildrenFn } from "./UINode"
 
 
 export type UIWidgetStyle = ContainerStyle & DrawableStyle & PaddingStyle & BaseStyle & PositionStyle & {
@@ -23,7 +23,7 @@ export interface UIWidget {
   append(...nodes: UINodeChild[]): UIWidget
   insert(index: number, ...nodes: UINodeChild[]): UIWidget
   remove(...nodes: UINodeChild[]): UIWidget
-  setContent(nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[] | ChildrenFn): this
   
   readonly children: UINodeChild[],
 
@@ -31,6 +31,11 @@ export interface UIWidget {
   onTouchStart(callback: (ev: TouchStartEvent<UIWidget>) => void): this,
   onOverlayTap(callback: () => void): this,
   onBackPressed(callback: () => void): this
+
+  setClass(name: string, enabled: boolean): this
+  toggleClass(name: string): this
+  hasClass(name: string): boolean
+  bindClass(name: string, fn: () => boolean): this
 }
 
 
@@ -79,14 +84,14 @@ export class WidgetElement extends ContainerElement<"widget"> {
 
 
 export function UIWidget(): UIWidget;
-export function UIWidget(children: UINodeChild[]): UIWidget;
+export function UIWidget(children: UINodeChild[] | ChildrenFn): UIWidget;
 export function UIWidget(style: UIWidgetStyle): UIWidget;
 export function UIWidget(style: UIWidgetStyle, children: UINodeChild[]): UIWidget;
-export function UIWidget(...args: [] | [UINodeChild[] | UIWidgetStyle] | [UIWidgetStyle, children: UINodeChild[]]): UIWidget {
+export function UIWidget(...args: [] | [UINodeChild[] | ChildrenFn | UIWidgetStyle] | [UIWidgetStyle, children: UINodeChild[] | ChildrenFn]): UIWidget {
   if (args.length === 0) {
     return new WidgetElement("widget", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new WidgetElement("widget", {}, args[0])
     } else {
       return new WidgetElement("widget", args[0], [])