lecodes-cli 0.9.2 → 0.10.1

package/runtime/sdk/inject.ts

@@ -126,4 +126,4 @@ export { Camera } from "./gl/Camera"
 export { Ray } from "./gl/Ray"
 export { Plane } from "./gl/Plane"
 export { Noise } from "./gl/Noise"
-export { Particles, dynamic, dynamicColor } from "./gl/Particles"
+export { Particles, Trail, curve, colorCurve } from "./gl/Particles"

package/runtime/sdk/ui/NativeView.ts

@@ -11,7 +11,7 @@
 
 import { _channelCall, _channelEmit, _channelOff, _channelOn, type ChannelListeners } from "../runtime/channel"
 import { _bumpNavEpoch, _navSupported, _setCurrent, Presentable, type PresentOptions } from "./presentable"
-import { Element, type AnimateStyle, type BaseStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Style } from "./UINode"
+import { Element, type AnimateStyle, type BaseStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Classes, type Style } from "./UINode"
 
 export type UINativeViewStyle = ElementStyle & DrawableStyle
 
@@ -42,10 +42,10 @@ export interface NativeView {
 
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 let nextViewId = 1

package/runtime/sdk/ui/UIButton.ts

@@ -1,6 +1,6 @@
 import { ClickEvent, TouchStartEvent, LongPressEvent } from "../runtime/touch"
 import type { ClickEvent as ClickEventType, TouchStartEvent as TouchStartEventType, LongPressEvent as LongPressEventType } from "../runtime/touch"
-import { type ElementStyle, type ContainerStyle, type Style, ContainerElement, type DrawableStyle, type UINodeChild, type ChildrenFn, type OnLayoutCallback, type BoundingClientRect, type BaseStyle, type AnimateStyle, type Color } from "./UINode"
+import { type ElementStyle, type ContainerStyle, type Classes, type Style, ContainerElement, type DrawableStyle, type UINodeChild, type ChildrenFn, type OnLayoutCallback, type BoundingClientRect, type BaseStyle, type AnimateStyle, type Color } from "./UINode"
 
 export type UIButtonStyle = ElementStyle & DrawableStyle & ContainerStyle & { rippleColor?: Color | "default" }
 
@@ -27,10 +27,10 @@ export interface UIButton {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 
   readonly children: UINodeChild[],
 }

package/runtime/sdk/ui/UIContainer.ts

@@ -1,4 +1,4 @@
-import { ContainerElement, type AnimateStyle, type AppearStyle, type ChildrenFn, type ContainerStyle, type DisappearStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, 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 BoundingClientRect, type Classes, type Style, type StyleFn, type UINode, type UINodeChild } from "./UINode"
 
 export type UIContainerStyle = ElementStyle & DrawableStyle & ContainerStyle
 
@@ -16,10 +16,10 @@ export interface UIColumn {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 
   readonly children: UINodeChild[]
 }
@@ -55,10 +55,10 @@ export interface UIRow {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 
   readonly children: UINodeChild[],
 }
@@ -94,10 +94,10 @@ export interface UIBox {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 
   readonly children: UINodeChild[],
 }

package/runtime/sdk/ui/UIImage.ts

@@ -2,7 +2,7 @@ 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 BoundingClientRect, type Style } from "./UINode"
+import { Element, type AnimateStyle, type Color, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Classes, type Style } from "./UINode"
 
 export type UIImageStyle = ElementStyle & { borderRadius?: number, objectFit?: "cover" | "contain" | "fill", tintColor?: Color }
 
@@ -39,10 +39,10 @@ export interface UIImage {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 class ImageElement extends Element<"image"> {

package/runtime/sdk/ui/UIInput.ts

@@ -1,4 +1,4 @@
-import { type ElementStyle, type DrawableStyle, type Style, type StyleFn, type AppearStyle, type DisappearStyle, Element, type TextStyle, type Color, type OnLayoutCallback, type BoundingClientRect, type BaseStyle, type AnimateStyle } from "./UINode";
+import { type ElementStyle, type DrawableStyle, type Classes, type Style, type StyleFn, type AppearStyle, type DisappearStyle, Element, type TextStyle, type Color, type OnLayoutCallback, type BoundingClientRect, type BaseStyle, type AnimateStyle } from "./UINode";
 
 type InputStyle = {
   placeholder?: string,
@@ -71,10 +71,10 @@ export interface UIInput {
   /** Release focus (dismisses the keyboard when this input held it). */
   blur(): void
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 export interface UITextArea {
@@ -98,10 +98,10 @@ export interface UITextArea {
   /** Release focus (dismisses the keyboard when this text area held it). */
   blur(): void
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 class InputElement<T extends "input" | "textarea"> extends Element<T> {

package/runtime/sdk/ui/UINode.ts

@@ -6,6 +6,8 @@ export interface UINode {
   /** Author-given semantic name (a stable selector for tests + AI review feedback). */
   readonly name?: string
   style: Style<this, any>
+  /** Style-class proxy — read/set/toggle/bind the `$`-classes declared in `.style()`. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 export type UINodeChild = UINode | null | undefined | false
@@ -238,13 +240,73 @@ const handler: ProxyHandler<any> = {
   getOwnPropertyDescriptor(target, p) {
     return Object.getOwnPropertyDescriptor(target._el._style, p)
   },
-  ownKeys(target) {    
+  ownKeys(target) {
     return Object.keys(target._el._style)
   }
 }
 
+// ---- the el.class proxy --------------------------------------------------------------------------
+
+// `$checked` and `checked` name the same class — `$` is only the declaration-site prefix in .style().
+const classKey = (name: string) => name[0] === "$" ? name.slice(1) : name
+
+// Single-class state write, shared by the set trap, the batch form and binding re-runs. No-op when
+// the state already matches, so an unchanged binding re-run doesn't resend over the bridge.
+function writeClass(el: any, name: string, enabled: boolean) {
+  if ((el._classes?.has(name) ?? false) === enabled) return
+  if (enabled) {
+    (el._classes ??= new Set()).add(name)
+  } else {
+    el._classes.delete(name)
+  }
+  if (el._id !== 0) {
+    _creatorUI.setClass(el._id, name, enabled)
+  }
+}
+
+// One class write: a function value installs/replaces a reactive binding, a plain value replaces
+// the binding (last write wins — unlike the style proxy's hot-path caveat, a stale class binding
+// silently reverting a later plain write would be a footgun, and class flips are never per-frame).
+function writeClassValue(el: any, name: string, value: ClassValue) {
+  name = classKey(name)
+  if (typeof value === "function") {
+    createBinding(el, "#class:" + name, () => { writeClass(el, name, !!value()) })
+  } else {
+    if (el._fx !== undefined) disposeBinding(el, "#class:" + name)
+    writeClass(el, name, !!value)
+  }
+}
+
+// The callable target of the el.class proxy (batch form), bound to the element like styleFunction.
+function classFunction(this: any, classes: Record<string, ClassValue>) {
+  for (const key of Object.keys(classes)) {
+    writeClassValue(this, key, classes[key])
+  }
+  return this
+}
+
+const classHandler: ProxyHandler<any> = {
+  get(target, key) {
+    if (typeof key !== "string") return undefined
+    return target._el._classes?.has(classKey(key)) ?? false
+  },
+  set(target, key, value) {
+    if (typeof key === "string") writeClassValue(target._el, key, value)
+    return true
+  },
+  // Object.keys(el.class) / spread list the ACTIVE class names (inspection + tests).
+  getOwnPropertyDescriptor(target, p) {
+    if (typeof p !== "string" || !(target._el._classes?.has(classKey(p)) ?? false)) return undefined
+    return { value: true, enumerable: true, configurable: true, writable: true }
+  },
+  ownKeys(target) {
+    const classes = target._el._classes
+    return classes !== undefined ? [ ...classes ] : []
+  }
+}
+
 function Style() {
-  
+
 }
 
 // Reactive style input: every primitive-valued prop also accepts a `() => value` binding that
@@ -253,7 +315,7 @@ function Style() {
 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`
+// onPressed, but with any name), toggled from code via the `el.class` proxy. `duration`/`delay`
 // make the swap transition. Class state INHERITS down the tree (CSS-`.dark`-on-body style): a
 // class set on a node also activates same-name `$` blocks on all descendants within the same
 // root — see docs/style-class-cascade-plan.md. `$pressed`/`$focused` are reserved: hosts toggle
@@ -265,6 +327,30 @@ export type Reactive<T> = { [K in keyof T]: NonNullable<T[K]> extends object ? T
 // tests/ui-types.test.ts.
 export type ClassStyles<T> = { [key: `$${string}`]: T & { duration?: number, delay?: number } }
 
+/** Value accepted by a `el.class` write: a boolean sets the class, a `() => boolean` binds it —
+ *  the class then tracks the signals the function reads (re-evaluated on change). Reads through
+ *  the proxy always return a plain boolean, never the bound function. */
+export type ClassValue = boolean | (() => boolean)
+
+/** The `el.class` proxy — the runtime switch for `$`-class blocks declared in `.style()`
+ *  (see {@link ClassStyles}). One surface, mirroring `el.style`:
+ *
+ *  ```ts
+ *  el.class.checked                    // read: is it active on THIS element? → boolean
+ *  el.class.checked = true             // activate (false deactivates)
+ *  el.class.open = !el.class.open      // toggle
+ *  el.class.done = () => todo.done.value          // reactive binding (signals)
+ *  el.class({ checked: true, done: () => … })     // batch form — returns the element, chainable
+ *  ```
+ *
+ *  Class names are accepted with or without the declaration-site `$` prefix. `R` is the concrete
+ *  node type, so the batch form chains like `.style()`.
+ *
+ *  Typing note: property access is `any` because an index signature can't give reads (`boolean`)
+ *  and writes ({@link ClassValue}) different types — the batch form is the fully typed path;
+ *  single-key writes are runtime-coerced with `!!`. */
+export type Classes<R> = ((classes: Record<string, ClassValue>) => R) & { [key: string]: any }
+
 // NB: do NOT annotate `this: R` here. `this` is a parameter position, so it makes R contravariant,
 // which makes every node type INVARIANT in its own type params (and in `this`). That is what made
 // `UIScreen<false>` unassignable to `UIScreen<boolean>` (a navigator page), and would block any
@@ -273,7 +359,7 @@ export type ClassStyles<T> = { [key: `$${string}`]: T & { duration?: number, del
 // R stays only in the (covariant) return, so `.style()` still returns the concrete node type for
 // chaining. Guarded by the type tests in tests/ui-types.test-d.ts.
 // Orientation state blocks — override props applied only in landscape / portrait (like a `$`-class,
-// keyed by device orientation instead of setClass). Same full-`T` rule as class blocks.
+// keyed by device orientation instead of `el.class`). Same full-`T` rule as class blocks.
 export type OrientationStyles<T> = {
   onLandscape?: T,
   onPortrait?: T,
@@ -397,37 +483,31 @@ export class Element<T extends string> {
    *  re-assign _id on every open). */
   protected _classes?: Set<string>
 
-  /** Activate/deactivate a `$`-class declared in .style() (accepts the name with or without `$`).
-   *  The class cascades: it is also active on every descendant (their same-name `$` blocks light
-   *  up), until the subtree's root — hosted screens/widgets don't inherit. `hasClass`/`toggleClass`
-   *  reflect only THIS node's own classes; there is no opt-out below an active ancestor. */
-  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
-  }
+  protected _classProxy?: any
+
+  /** Style-class control — flips the `$`-class blocks declared in `.style()`. One proxy, same
+   *  contract as `el.style`:
+   *
+   *  - `el.class.checked` — read: is the class active on THIS element? → `boolean`
+   *  - `el.class.checked = true` / `= false` — activate / deactivate
+   *  - `el.class.open = !el.class.open` — toggle
+   *  - `el.class.done = () => todo.done.value` — reactive: the class tracks the signals the
+   *    function reads; a later write to the same class (plain or function) replaces the binding
+   *  - `el.class({ checked: true, done: () => … })` — batch form, returns the element (chainable)
+   *
+   *  Names are accepted with or without the leading `$`. A class set on an element CASCADES: it is
+   *  also active on every descendant (their same-name `$` blocks light up), until the subtree's
+   *  root — hosted screens/widgets don't inherit. Reads reflect only this element's own classes;
+   *  there is no opt-out below an active ancestor. `Object.keys(el.class)` lists the active names. */
+  get class(): any {
+    if (this._classProxy) return this._classProxy
+    const obj = classFunction.bind(this)
+    // @ts-ignore
+    obj._el = this
 
-  /** 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
+    const proxy = new Proxy(obj, classHandler)
+    this._classProxy = proxy
+    return proxy
   }
 
   protected ll?: OnLayoutCallback[]

package/runtime/sdk/ui/UIPager.ts

@@ -1,4 +1,4 @@
-import { ContainerElement, type AnimateStyle, type BaseStyle, type ChildrenFn, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Style, type UINodeChild } from "./UINode"
+import { ContainerElement, type AnimateStyle, type BaseStyle, type ChildrenFn, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Classes, type Style, type UINodeChild } from "./UINode"
 import { disposeBinding } from "../core/signals"
 import type { UIScreen } from "./UIScreen"
 
@@ -84,10 +84,10 @@ export interface UIPager {
   onLayout(onLayout: OnLayoutCallback): this,
   getBoundingClientRect(): BoundingClientRect | null,
 
-  setClass(name: string, enabled: boolean): this,
-  toggleClass(name: string): this,
-  hasClass(name: string): boolean,
-  bindClass(name: string, fn: () => boolean): this,
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>,
 }
 
 export class PagerElement extends ContainerElement<"pager"> {
@@ -268,7 +268,6 @@ export class PagerElement extends ContainerElement<"pager"> {
   // top, this pager is active. The hook reads screen._pagerOwner LIVE (not a captured `this`), so
   // re-homing a screen into another pager activates the right one.
   private _track(screen: any): void {
-    console.log("_track()")
     screen._pagerOwner = this
     if (!screen._pagerHooked) {
       screen._pagerHooked = true
@@ -277,9 +276,7 @@ export class PagerElement extends ContainerElement<"pager"> {
     }
   }
   _activate(): void {
-    console.log("openCount: " + this._openCount)
     if (++this._openCount === 1 && _activeStack.indexOf(this) < 0) {
-      console.log("activate")
       _activeStack.push(this)
     }
   }
@@ -288,7 +285,6 @@ export class PagerElement extends ContainerElement<"pager"> {
       this._openCount = 0
       const i = _activeStack.indexOf(this)
       if (i >= 0) _activeStack.splice(i, 1)
-      console.log(`Deactivate. Curent stack is ${_activeStack.length}`)
     }
   }
 }

package/runtime/sdk/ui/UIScreen.ts

@@ -1,6 +1,6 @@
 import { TouchStartEvent } from "../runtime/touch"
 import { _bumpNavEpoch, _navSupported, _setCurrent, Presentable, type PresentOptions } from "./presentable"
-import { ContainerElement, type AnimateStyle, type BaseStyle, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type BoundingClientRect, type PaddingStyle, type Style, type UINodeChild, type ChildrenFn, } from "./UINode"
+import { ContainerElement, type AnimateStyle, type BaseStyle, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type BoundingClientRect, type PaddingStyle, type Classes, type Style, type UINodeChild, type ChildrenFn, } from "./UINode"
 
 export type UIScreenStyle = ContainerStyle & DrawableStyle & PaddingStyle & BaseStyle
 
@@ -46,10 +46,10 @@ export interface UIScreen {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 
   onTouchStart(callback: (ev: TouchStartEvent<UIScreen>) => void): this,
 }

package/runtime/sdk/ui/UIScrollable.ts

@@ -1,5 +1,5 @@
 import type { UIContainerStyle } from "./UIContainer"
-import { type Style, type AnimateStyle, type UINodeChild, type ChildrenFn, type OnLayoutCallback, type BoundingClientRect, type Color, ContainerElement } from "./UINode"
+import { type Classes, type Style, type AnimateStyle, type UINodeChild, type ChildrenFn, type OnLayoutCallback, type BoundingClientRect, type Color, ContainerElement } from "./UINode"
 
 // refreshControlColor tints the native pull-to-refresh spinner (pairs with onRefresh).
 // keyboardDismissMode: how a scroll gesture in THIS scrollable dismisses the keyboard.
@@ -28,10 +28,10 @@ export interface UIScrollable {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 
   onScroll(callback: (scrollPosition: number) => void): UIScrollable,
   onScrollRelease(callback: () => void): UIScrollable,

package/runtime/sdk/ui/UISpacer.ts

@@ -1,4 +1,4 @@
-import { Element, type ElementStyle, type Style, type StyleFn } from "./UINode"
+import { Element, type ElementStyle, type Classes, type Style, type StyleFn } from "./UINode"
 
 export type UISpacerStyle = ElementStyle
 
@@ -6,10 +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
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 export function UISpacer(): UISpacer
 export function UISpacer(style: UISpacerStyle): UISpacer

package/runtime/sdk/ui/UIText.ts

@@ -1,5 +1,5 @@
 import { createBinding } from "../core/signals"
-import { Element, type AnimateStyle, type BaseStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Style, type TextStyle } from "./UINode"
+import { Element, type AnimateStyle, type BaseStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Classes, type Style, type TextStyle } from "./UINode"
 
 export type UITextStyle = ElementStyle & TextStyle & DrawableStyle
 
@@ -13,10 +13,10 @@ export interface UIText {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 export class TextElement extends Element<"text"> {

package/runtime/sdk/ui/UIVideo.ts

@@ -1,6 +1,6 @@
 import type { VideoPlayer } from "../runtime/media"
 import { _bumpNavEpoch, _navSupported, _setCurrent, Presentable, type PresentOptions } from "./presentable"
-import { Element, type AnimateStyle, type AppearStyle, type BaseStyle, type DisappearStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Style, type StyleFn } from "./UINode"
+import { Element, type AnimateStyle, type AppearStyle, type BaseStyle, type DisappearStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Classes, type Style, type StyleFn } from "./UINode"
 
 export type UIVideoStyle = ElementStyle & DrawableStyle & { objectFit?: "cover" | "contain" | "fill" }
 
@@ -22,10 +22,10 @@ export interface UIVideo {
   onLayout(onLayout: OnLayoutCallback): this
   getBoundingClientRect(): BoundingClientRect | null
 
-  setClass(name: string, enabled: boolean): this
-  toggleClass(name: string): this
-  hasClass(name: string): boolean
-  bindClass(name: string, fn: () => boolean): this
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }
 
 class VideoElement extends Element<"video"> implements Presentable {

package/runtime/sdk/ui/UIVirtualizedList.ts

@@ -1,4 +1,4 @@
-import { Element, type Color, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type PaddingStyle, type Style, type UINodeChild } from "./UINode"
+import { Element, type Color, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type PaddingStyle, type Classes, type Style, type UINodeChild } from "./UINode"
 
 // refreshControlColor tints the native pull-to-refresh spinner (pairs with onRefresh).
 export type UIVirtualizedListStyle = DrawableStyle & ElementStyle & { refreshControlColor?: Color }
@@ -51,10 +51,10 @@ export interface UIVirtualizedList<T = unknown> {
     onLayout(onLayout: OnLayoutCallback): this
     getBoundingClientRect(): BoundingClientRect | null
 
-    setClass(name: string, enabled: boolean): this
-    toggleClass(name: string): this
-    hasClass(name: string): boolean
-    bindClass(name: string, fn: () => boolean): this
+    /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+     *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+     *  Classes cascade to descendants. See {@link Classes}. */
+    readonly class: Classes<this>
 }
 
 export class VListElement<T> extends Element<"vlist"> implements UIVirtualizedList<T> {

package/runtime/sdk/ui/UIWidget.ts

@@ -1,6 +1,6 @@
 import { TouchStartEvent } from "../runtime/touch"
 import { _descOf, _navSupported, Presentable } from "./presentable"
-import { ContainerElement, type AnimateStyle, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type BoundingClientRect, type PaddingStyle, type PositionStyle, type Style, type UINodeChild, type ChildrenFn } from "./UINode"
+import { ContainerElement, type AnimateStyle, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type OnLayoutCallback, type BoundingClientRect, type PaddingStyle, type PositionStyle, type Classes, type Style, type UINodeChild, type ChildrenFn } from "./UINode"
 
 
 export type UIWidgetStyle = ContainerStyle & DrawableStyle & PaddingStyle & BaseStyle & PositionStyle & {
@@ -49,10 +49,10 @@ export interface UIWidget {
   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
+  /** Style-class proxy — read `el.class.checked`, set `el.class.checked = true`, toggle with
+   *  `!el.class.checked`, bind `el.class.done = () => sig.value`, batch/chain `el.class({ … })`.
+   *  Classes cascade to descendants. See {@link Classes}. */
+  readonly class: Classes<this>
 }