lecodes-cli 0.2.0 → 0.5.0

package/runtime/sdk/gl/Shape.ts

@@ -0,0 +1,98 @@
+// A collision shape, as an aspect on a 3D Node. PURE GEOMETRY: attaching a Shape does not by itself
+// make the node rigid or a sensor — pair it with a Physics (rigid body) or a Trigger (sensor), both
+// of which require a Shape. The Shape also makes the node pointer-pickable: on its own it creates a
+// lightweight "pick-only" JoltPhysics body (collides with nothing, exists only for the raycast), so
+// any node with a Shape can receive click/touchstart. Physics/Trigger REPLACE that body with the real
+// one. Set `raycast = false` to opt a shape out of pointer picking.
+//
+//   wall.aspect(Shape, { box: [1, 2, 1] }).aspect(Physics, { motion: 'static' })
+//   coin.aspect(Shape, { sphere: 0.5 }).aspect(Trigger)
+//   crate.aspect(Shape, {}).aspect(Physics)                 // auto box from the mesh AABB × world scale
+//
+// Explicit dims are world-space half-extents (not scaled by the node). Use {} ("auto") to track the
+// mesh × world scale. Note: a Shape-only pick body is a STATIC snapshot at attach time — for a moving
+// pickable object add a Physics body (which follows the sim), rather than relying on the pick body.
+
+import { Aspect } from "../core/Aspect"
+import { cx, cy, cz, type Vec3Like } from "../math/vec"
+import type { Node } from "./Node"
+
+export class Shape extends Aspect<"shape", Node> {
+  static readonly aspect = "shape"
+
+  /** Box half-extents [hx, hy, hz] (world units). */
+  box?: Vec3Like
+  /** Sphere radius. */
+  sphere?: number
+  /** Cylinder aligned on Y: half-height + radius. */
+  cylinder?: { halfHeight: number, radius: number }
+  /** Capsule aligned on Y: half-height of the cylinder section + radius. */
+  capsule?: { halfHeight: number, radius: number }
+  /** Whether pointer rays can hit this shape (click / touchstart). Default true. */
+  raycast = true
+
+  private _shapeId = 0
+  private _bodyId = 0
+
+  /** @internal native shape id (0 if the build has no physics). */
+  get shapeId(): number { return this._shapeId }
+  /** @internal current native body id (a pick-only body until Physics/Trigger claim it). */
+  get bodyId(): number { return this._bodyId }
+
+  onAttach(): void {
+    if (!_creator.physicsHasSupport || !_creator.physicsHasSupport()) return
+    this._shapeId = this._build()
+    if (this._shapeId) this._createPickBody()
+  }
+
+  onDetach(): void {
+    if (this._bodyId) { _creator.physicsRemoveBody(this._bodyId); this._bodyId = 0 }
+    if (this._shapeId) { _creator.physicsDestroyShape(this._shapeId); this._shapeId = 0 }
+  }
+
+  /** @internal Physics/Trigger take over: drop the pick body and hand back the shape id. */
+  _claim(): number {
+    if (this._bodyId) { _creator.physicsRemoveBody(this._bodyId); this._bodyId = 0 }
+    return this._shapeId
+  }
+  /** @internal Physics/Trigger report the body they created, so Shape owns its lifetime + pickability. */
+  _ownBody(bodyId: number): void {
+    this._bodyId = bodyId
+    if (!this.raycast && bodyId) _creator.physicsSetPickable(bodyId, false)
+  }
+  /** @internal restore a pick-only body when Physics/Trigger detach but the Shape remains. */
+  _recreatePickBody(): void {
+    if (!this._bodyId && this._shapeId) this._createPickBody()
+  }
+
+  private _createPickBody(): void {
+    this._bodyId = _creator.physicsCreateBody(this.node.id, this._shapeId, 0, 0, false, /*pickOnly*/ true)
+    if (!this.raycast && this._bodyId) _creator.physicsSetPickable(this._bodyId, false)
+  }
+
+  private _build(): number {
+    if (this.sphere !== undefined) return _creator.physicsBuildSphere(this.sphere)
+    if (this.cylinder) return _creator.physicsBuildCylinder(this.cylinder.halfHeight, this.cylinder.radius)
+    if (this.capsule) return _creator.physicsBuildCapsule(this.capsule.halfHeight, this.capsule.radius)
+    if (this.box) return _creator.physicsBuildBox(cx(this.box), cy(this.box), cz(this.box))
+
+    // auto: a box from the mesh AABB × world scale (so the physical box matches the rendered size).
+    const s = this.node.worldScale
+    let hx = 0.5, hy = 0.5, hz = 0.5
+    const geom = this.node.geometry
+    if (geom) {
+      const v = geom.vertices
+      let minX = Infinity, minY = Infinity, minZ = Infinity, maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity
+      for (let i = 0; i + 2 < v.length; i += 3) {
+        if (v[i] < minX) minX = v[i]
+        if (v[i] > maxX) maxX = v[i]
+        if (v[i + 1] < minY) minY = v[i + 1]
+        if (v[i + 1] > maxY) maxY = v[i + 1]
+        if (v[i + 2] < minZ) minZ = v[i + 2]
+        if (v[i + 2] > maxZ) maxZ = v[i + 2]
+      }
+      hx = (maxX - minX) * 0.5; hy = (maxY - minY) * 0.5; hz = (maxZ - minZ) * 0.5
+    }
+    return _creator.physicsBuildBox(hx * s.x, hy * s.y, hz * s.z)
+  }
+}

package/runtime/sdk/gl/Texture.ts

@@ -1,6 +1,6 @@
 // A 3D GPU texture, decoded natively by creator-gl. Load from a URL or an already-fetched response.
 
-import { fetch, type FetchResponse } from "../runtime/fetch"
+import { fetch, type FetchResponse, type File } from "../runtime/fetch"
 
 export class Texture {
   /** @internal native texture handle. */
@@ -19,7 +19,18 @@ export class Texture {
     this._id = id
   }
 
-  static load(source: string | FetchResponse): Promise<Texture> {
+  // Wrap a Canvas's baked surface as a 3D texture (RGBA8, already rasterized → synchronous, no decode).
+  // The id is cached on the canvas (opaque _tex3dId), so backing several materials shares one texture and
+  // canvas.update() re-uploads it. Structural type avoids a Canvas import (keeps 3D free of 2D-canvas code).
+  static fromCanvas(canvas: { _bakeSurface(): number, width: number, height: number, pixelRatio: number, _tex3dId: number }): Texture {
+    if (!canvas._tex3dId) {
+      const surfaceId = canvas._bakeSurface()
+      canvas._tex3dId = _creator.createTextureFromCanvas(surfaceId)
+    }
+    return new Texture(Math.round(canvas.width * canvas.pixelRatio), Math.round(canvas.height * canvas.pixelRatio), canvas._tex3dId)
+  }
+
+  static load(source: string | FetchResponse | File): Promise<Texture> {
     if (typeof source === "string") {
       return fetch(source, { useOnce: true }).then((resp) => {
         if (resp.status >= 400) {

package/runtime/sdk/gl/Trigger.ts

@@ -0,0 +1,46 @@
+// A trigger zone, as an aspect on a 3D Node. Requires a Shape (its geometry); creates a static SENSOR
+// body from it, so a physics body overlapping the zone fires the node's 'enter' / 'exit' events
+// instead of colliding. A trigger does not block movement, and is still pointer-pickable.
+//
+//   const goal = new Mesh(box(), material)
+//     .aspect(Shape, { box: [1, 2, 1] })
+//     .aspect(Trigger)
+//   goal.addEventListener('enter', other => win(other))
+//   goal.addEventListener('exit',  other => …)
+
+import { Aspect } from "../core/Aspect"
+import { cx, cy, cz, type Vec3Like } from "../math/vec"
+import { Shape } from "./Shape"
+import { ensurePhysicsEvents } from "./physicsEvents"
+import type { Node } from "./Node"
+
+export class Trigger extends Aspect<"trigger", Node> {
+  static readonly aspect = "trigger"
+
+  private _bodyId = 0
+  /** Native body id (0 if no physics support). */
+  get id(): number { return this._bodyId }
+
+  onAttach(): void {
+    if (!_creator.physicsHasSupport || !_creator.physicsHasSupport()) return
+    const shape = this.node.get(Shape)
+    if (!shape) {
+      throw new Error("Trigger requires a Shape aspect — add it first: node.aspect(Shape, {…}).aspect(Trigger)")
+    }
+    const shapeId = shape._claim()
+    this._bodyId = _creator.physicsCreateBody(this.node.id, shapeId, 0 /* static */, 0, true /* sensor */, false)
+    shape._ownBody(this._bodyId)
+    ensurePhysicsEvents() // routes overlap events → the node's 'enter' / 'exit'
+  }
+
+  onDetach(): void {
+    if (this._bodyId) { _creator.physicsRemoveBody(this._bodyId); this._bodyId = 0 }
+    this.node.get(Shape)?._recreatePickBody()
+  }
+
+  /** Reposition the trigger zone to a world point. */
+  moveTo(p: Vec3Like): this {
+    if (this._bodyId) _creator.physicsSetBodyPosition(this._bodyId, cx(p), cy(p), cz(p))
+    return this
+  }
+}

package/runtime/sdk/gl/physicsEvents.ts

@@ -0,0 +1,20 @@
+// Routes native physics contact/sensor events to the owning nodes' 'enter'/'exit' events. Each event
+// is delivered to BOTH nodes with the other as the argument. type: 0 = enter (contact/overlap began),
+// 1 = exit (ended). Registered lazily on the first trigger/physics body or 'enter'/'exit' listener.
+
+import { nodeRegistry } from "./Node"
+
+let registered = false
+export const ensurePhysicsEvents = (): void => {
+  if (registered) return
+  if (!_creator.setOnPhysicsEvent) return // physics-less build / bridge without the hook
+  registered = true
+  _creator.setOnPhysicsEvent((a, b, type) => {
+    const na = nodeRegistry.get(a)
+    const nb = nodeRegistry.get(b)
+    if (!na || !nb) return
+    const channel = type === 1 ? "exit" : "enter"
+    na._emitCollision(channel, nb)
+    nb._emitCollision(channel, na)
+  })
+}

package/runtime/sdk/inject.ts

@@ -17,6 +17,12 @@ export { Color } from "./core/color"
 // ---- aspects (attachable node capabilities) ----
 export { Aspect, type With } from "./core/Aspect"
 
+// ---- reactivity (signals; UI text/style props also accept `() => value` bindings) ----
+export { signal, computed, effect, type Signal, type Computed } from "./core/signals"
+
+// ---- canvas (core 2D drawing that bakes to a texture; shared by 2D/3D/UI) ----
+export { Canvas, Bitmap } from "./canvas/Canvas"
+
 // ---- platform runtime (injected globals; the host provides the lower-level _creator* bridges) ----
 export { toast, SvgSource } from "./runtime/misc"
 export { fetch, fetchLocal, FormData, File } from "./runtime/fetch"
@@ -25,7 +31,9 @@ export { device } from "./runtime/device"
 export { Input } from "./runtime/input"
 export { WebSocket } from "./runtime/net"
 export { AudioPlayer, VideoPlayer } from "./runtime/media"
+export { CameraViewer } from "./runtime/camera"
 export { openFilePicker } from "./runtime/files"
+export { share } from "./runtime/share"
 export { ClickEvent, TouchStartEvent } from "./runtime/touch"
 
 // ---- 2D engine (creator-2d) ----
@@ -34,9 +42,9 @@ export { Node2D } from "./g2/Node2D"
 export { Camera2D } from "./g2/Camera2D"
 export { Sprite } from "./g2/Sprite"
 export { SpriteAnimation } from "./g2/SpriteAnimation"
-export { Shape } from "./g2/Shape"
+export { Shape2D } from "./g2/Shape2D"
 export { Physics2D } from "./g2/Physics2D"
-export { Trigger } from "./g2/Trigger"
+export { Trigger2D } from "./g2/Trigger2D"
 export { CharacterController2D } from "./g2/CharacterController2D"
 export { Tilemap } from "./g2/Tilemap"
 export { Texture2D } from "./g2/Texture2D"
@@ -56,6 +64,7 @@ export {
   UIVirtualizedList,
   Router,
   registerFont,
+  __uiMap,
 } from "./ui/UI"
 
 // ---- animate ----
@@ -71,8 +80,10 @@ export { Scene, ARScene } from "./gl/Scene"
 export { Node } from "./gl/Node"
 export { Mesh } from "./gl/Mesh"
 export { Model } from "./gl/Model"
+export { Shape } from "./gl/Shape"
 export { Physics } from "./gl/Physics"
-export { Collider } from "./gl/Collider"
+export { Trigger } from "./gl/Trigger"
+export { CharacterController } from "./gl/CharacterController"
 export { ModelAnimation } from "./gl/ModelAnimation"
 export { Light } from "./gl/Light"
 export { Material } from "./gl/Material"

package/runtime/sdk/runtime/camera.ts

@@ -0,0 +1,31 @@
+// Device camera → a still-photo File. Ported from worker/src/utils/CameraViewer.ts. Permission is
+// requested through the engine bridge's `requestCamera` (same as QRScanner); the live preview and the
+// capture go through `_creatorUtils.camera*`. `takePhoto()` returns a File (a host buffer handle), so
+// the shot can be used as a texture (`Texture2D.load(file)`), uploaded via FormData, or shared.
+
+import { File } from "./fetch"
+
+export class CameraViewer {
+  /** Ask for camera permission and start the live preview (default: the back camera). */
+  static async open(facingMode: "front" | "back" = "back"): Promise<void> {
+    await new Promise<void>((res, rej) => _creator.requestCamera(res, rej))
+    await new Promise<void>((res, rej) => _creatorUtils.cameraOpen(facingMode, res, rej))
+  }
+
+  /** Switch between the front and back camera while the preview is open. */
+  static setFacingMode(facingMode: "front" | "back"): void {
+    _creatorUtils.cameraSetFacingMode(facingMode)
+  }
+
+  /** Capture a still frame as an image File (host-encoded). */
+  static takePhoto(): Promise<File> {
+    return new Promise<File>((res, rej) => {
+      _creatorUtils.cameraTakePhoto((bufferId, name, size) => res(new File(bufferId, name, size)), rej)
+    })
+  }
+
+  /** Stop the preview and release the camera. */
+  static close(): void {
+    _creatorUtils.cameraClose()
+  }
+}

package/runtime/sdk/runtime/device.ts

@@ -17,6 +17,32 @@ export const device = {
   get language(): string {
     return _creatorUtils.language
   },
+  /** Display device-pixel ratio (physical px per logical/CSS px): 1 on standard displays, 2–3 on
+   *  retina / iOS. Bake a Canvas at this ratio for crisp output without hardcoding, e.g.
+   *  `new Canvas(w, h, { pixelRatio: device.pixelRatio })`. NOTE: the web 2D/GL surface currently
+   *  renders at logical resolution, so on web this only helps UI canvases / is forward-looking for
+   *  2D; on iOS (physical surface) it makes 2D canvases crisp. Falls back to 1 if the host omits it. */
+  get pixelRatio(): number {
+    return _creatorUtils.pixelRatio || 1
+  },
+  /** Current display width in logical px — the same value the "resize" event delivers, but readable at
+   *  any time (not only inside the listener). 0 until the host has reported a size. */
+  get width(): number {
+    return _creatorUI.getDisplaySize?.()?.[0] ?? 0
+  },
+  /** Current display height in logical px — the same value the "resize" event delivers, readable at any
+   *  time. 0 until the host has reported a size. */
+  get height(): number {
+    return _creatorUI.getDisplaySize?.()?.[1] ?? 0
+  },
+  /** Opt into the precise-touch system where the platform supports it. OFF by default. When on, fast
+   *  strokes are sampled at the touch digitizer's full rate (iOS coalesced touches, ≈120–240 Hz) instead
+   *  of once per display frame (~60 Hz), so a pointer-heavy app (drawing, handwriting, dragging) gets more
+   *  points and smoother lines. Leave it off for tap/button UIs. No-op on hosts without a coalesced-input
+   *  concept (web already coalesces pointermove; headless). */
+  setPreciseTouch(enabled: boolean): void {
+    _creatorUtils.setPreciseTouch?.(enabled)
+  },
   addEventListener(channel: "resize", callback: ResizeCallback): void {
     if (channel !== "resize") return
     resizeListeners.push(callback)

package/runtime/sdk/runtime/share.ts

@@ -0,0 +1,9 @@
+// Share a media File (image/video) via the OS share sheet. Wraps `_creatorUtils.shareMedia`, which
+// takes the host buffer id behind the File. On iOS the sheet also lets the user save to Files/Photos;
+// on web it saves (downloads) the file. `text` is an optional caption/message.
+
+import type { File, FetchResponse } from "./fetch"
+
+export function share(media: File | FetchResponse, text?: string): void {
+  _creatorUtils.shareMedia((media as any).id ?? (media as any)._id, text)
+}

package/runtime/sdk/ui/UI.ts

@@ -16,4 +16,8 @@ export { UIScrollable, type UIScrollableStyle } from './UIScrollable'
 
 export { UIVirtualizedList } from './UIVirtualizedList'
 
-export { Router } from './router'
+export { Router } from './router'
+
+// Internal: memoized map for reactive children — the chisel `reactiveUi` pass rewrites
+// `list.map(fn)` inside children bindings to `__uiMap(list, fn, slot)` calls.
+export { __uiMap } from './UINode'

package/runtime/sdk/ui/UIButton.ts

@@ -1,6 +1,6 @@
 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"
+import { type ElementStyle, type ContainerStyle, type Style, ContainerElement, type DrawableStyle, type UINodeChild, type ChildrenFn, type OnLayoutCallback, type BaseStyle, type AnimateStyle, type Color } from "./UINode"
 
 export type UIButtonStyle = ElementStyle & DrawableStyle & ContainerStyle & { rippleColor?: Color | "default" }
 
@@ -18,9 +18,15 @@ export interface UIButton {
   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[],
 }
 
@@ -66,14 +72,14 @@ class ButtonElement extends ContainerElement<"button"> {
 }
 
 export function UIButton(): UIButton;
-export function UIButton(children: UINodeChild[]): UIButton;
+export function UIButton(children: UINodeChild[] | ChildrenFn): 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 {
+export function UIButton(...args: [] | [UINodeChild[] | ChildrenFn | UIButtonStyle] | [UIButtonStyle, children: UINodeChild[] | ChildrenFn]): UIButton {
   if (args.length === 0) {
     return new ButtonElement("button", {}, [])
   } else if (args.length === 1) {
-    if (Array.isArray(args[0])) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
       return new ButtonElement("button", {}, args[0])
     } else {
       return new ButtonElement("button", args[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

@@ -1,13 +1,28 @@
 import type { FetchResponse } from "../runtime/fetch"
 import type { SvgSourceValue as SvgSource } from "../runtime/misc"
 import type { File } from "../runtime/fetch"
+import { Canvas, isCanvas } from "../canvas/Canvas"
 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 }
 
+/** A baked Canvas surface as an image source. The UI backend resolves it to a UI texture — see
+ *  docs/canvas-contract.md ("Pending"). */
+export type CanvasImageSource = { canvasSurface: number }
+
+/** Accepted image sources. A Canvas is baked to a surface marker on assign. */
+export type ImageSource = string | FetchResponse | File | SvgSource | Canvas
+
+const toSrc = (src: ImageSource): string | FetchResponse | File | SvgSource | CanvasImageSource =>
+  isCanvas(src) ? { canvasSurface: src._bakeSurface() } : src
+
+/** The stored/resolved image source (a Canvas is resolved to a surface marker). */
+export type ResolvedImageSource = string | FetchResponse | File | SvgSource | CanvasImageSource
+
 export interface UIImage {
   readonly type: "image",
-  src: string | FetchResponse | File | SvgSource,
+  get src(): ResolvedImageSource
+  set src(value: ImageSource)
   style: Style<this, UIImageStyle>
   animateTo: AnimateStyle<this, UIImageStyle>
   animateFrom: AnimateStyle<this, UIImageStyle>
@@ -20,26 +35,31 @@ 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"> {
-  private _src: string | FetchResponse | File | SvgSource
+  private _src: ResolvedImageSource
   // 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) {
+  constructor(style: any, src: ImageSource) {
     super("image", style)
-    this._src = src
+    this._src = toSrc(src)
   }
 
-  get src() {
+  get src(): ResolvedImageSource {
     return this._src
   }
-  set src(value) {
-    this._src = value
+  set src(value: ImageSource) {
+    this._src = toSrc(value)
     if (this._id !== 0) {
-      _creatorUI.updateNode(this._id, "src", value)
+      _creatorUI.updateNode(this._id, "src", this._src)
     }
   }
 
@@ -57,9 +77,9 @@ class ImageElement extends Element<"image"> {
   }
 }
 
-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 {
+export function UIImage(src: ImageSource): UIImage
+export function UIImage(style: UIImageStyle, src: ImageSource): UIImage
+export function UIImage(...args: [ImageSource] | [UIImageStyle, ImageSource]): UIImage {
   if (args.length === 1) {
     return new ImageElement({}, args[0])
   } else {

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> {