lecodes-cli 0.7.1 → 0.8.0

package/runtime/sdk/ui/UI.ts

@@ -10,10 +10,12 @@ export { UIVideo, type UIVideoStyle } from './UIVideo'
 export { UIInput, UITextArea, type UIInputStyle } from './UIInput'
 
 export { UIWidget, type UIWidgetStyle } from './UIWidget'
+export { UIModal, type UIModalStyle } from './UIModal'
+export { UIPopover, type UIPopoverStyle, type UIPopoverAnchor } from './UIPopover'
 
 export { UIRow, UIColumn, UIBox, type UIContainerStyle } from './UIContainer'
 export { UIScrollable, type UIScrollableStyle } from './UIScrollable'
-export { UIScreenHost, type UIScreenHostStyle } from './UIScreenHost'
+export { UIPager, type UIPagerStyle } from './UIPager'
 
 export { UIVirtualizedList } from './UIVirtualizedList'
 

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 BaseStyle, type AnimateStyle, type Color } from "./UINode"
+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"
 
 export type UIButtonStyle = ElementStyle & DrawableStyle & ContainerStyle & { rippleColor?: Color | "default" }
 
@@ -25,6 +25,7 @@ export interface UIButton {
   setContent(nodes: UINodeChild[] | ChildrenFn): this
 
   onLayout(onLayout: OnLayoutCallback): this
+  getBoundingClientRect(): BoundingClientRect | null
 
   setClass(name: string, enabled: boolean): this
   toggleClass(name: string): this
@@ -94,20 +95,24 @@ class ButtonElement extends ContainerElement<"button"> {
   }
 }
 
+// Buttons are row + centered by default: the icon+label button is the norm, and yoga's column
+// default was a recurring authoring/codegen trap.
+const BUTTON_DEFAULTS = { flexDirection: "row", justifyContent: "center", alignItems: "center" } as const
+
 export function UIButton(): 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[] | ChildrenFn | UIButtonStyle] | [UIButtonStyle, children: UINodeChild[] | ChildrenFn]): UIButton {
   if (args.length === 0) {
-    return new ButtonElement("button", {}, [])
+    return new ButtonElement("button", { ...BUTTON_DEFAULTS }, [])
   } else if (args.length === 1) {
     if (Array.isArray(args[0]) || typeof args[0] === "function") {
-      return new ButtonElement("button", {}, args[0])
+      return new ButtonElement("button", { ...BUTTON_DEFAULTS }, args[0])
     } else {
-      return new ButtonElement("button", args[0], [])
+      return new ButtonElement("button", { ...BUTTON_DEFAULTS, ...args[0] }, [])
     }
   } else {
-    return new ButtonElement("button", args[0], args[1])
+    return new ButtonElement("button", { ...BUTTON_DEFAULTS, ...args[0] }, args[1])
   }
 }

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 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 Style, type StyleFn, type UINode, type UINodeChild } from "./UINode"
 
 export type UIContainerStyle = ElementStyle & DrawableStyle & ContainerStyle
 
@@ -14,6 +14,7 @@ export interface UIColumn {
   setContent(nodes: UINodeChild[] | ChildrenFn): this
   
   onLayout(onLayout: OnLayoutCallback): this
+  getBoundingClientRect(): BoundingClientRect | null
 
   setClass(name: string, enabled: boolean): this
   toggleClass(name: string): this
@@ -52,6 +53,7 @@ export interface UIRow {
   setContent(nodes: UINodeChild[] | ChildrenFn): this
 
   onLayout(onLayout: OnLayoutCallback): this
+  getBoundingClientRect(): BoundingClientRect | null
 
   setClass(name: string, enabled: boolean): this
   toggleClass(name: string): this
@@ -60,20 +62,21 @@ export interface UIRow {
 
   readonly children: UINodeChild[],
 }
+export function UIRow(): 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[] | ChildrenFn | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[] | ChildrenFn]): UIRow {
   if (args.length === 0) {
-    return new ContainerElement("row", {}, [])
+    return new ContainerElement("row", { flexDirection: "row" }, [])
   } else if (args.length === 1) {
     if (Array.isArray(args[0]) || typeof args[0] === "function") {
-      return new ContainerElement("row", {}, args[0])
+      return new ContainerElement("row", { flexDirection: "row" }, args[0])
     } else {
-      return new ContainerElement("row", args[0], [])
+      return new ContainerElement("row", { flexDirection: "row", ...args[0] }, [])
     }
   } else {
-    return new ContainerElement("row", args[0], args[1])
+    return new ContainerElement("row", { flexDirection: "row", ...args[0] }, args[1])
   }
 }
 
@@ -89,6 +92,7 @@ export interface UIBox {
   setContent(nodes: UINodeChild[] | ChildrenFn): this
 
   onLayout(onLayout: OnLayoutCallback): this
+  getBoundingClientRect(): BoundingClientRect | null
 
   setClass(name: string, enabled: boolean): this
   toggleClass(name: string): this
@@ -97,19 +101,22 @@ export interface UIBox {
 
   readonly children: UINodeChild[],
 }
+const BOX_DEFAULTS = { justifyContent: "center", alignItems: "center" } as const
+
+export function UIBox(): 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[] | ChildrenFn | UIContainerStyle] | [UIContainerStyle, children: UINodeChild[] | ChildrenFn]): UIBox {
   if (args.length === 0) {
-    return new ContainerElement("box", {}, [])
+    return new ContainerElement("box", { ...BOX_DEFAULTS }, [])
   } else if (args.length === 1) {
     if (Array.isArray(args[0]) || typeof args[0] === "function") {
-      return new ContainerElement("box", {}, args[0])
+      return new ContainerElement("box", { ...BOX_DEFAULTS }, args[0])
     } else {
-      return new ContainerElement("box", args[0], [])
+      return new ContainerElement("box", { ...BOX_DEFAULTS, ...args[0] }, [])
     }
   } else {
-    return new ContainerElement("box", args[0], args[1])
+    return new ContainerElement("box", { ...BOX_DEFAULTS, ...args[0] }, args[1])
   }
 }

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 Style } from "./UINode"
+import { Element, type AnimateStyle, type Color, type ElementStyle, type OnLayoutCallback, type BoundingClientRect, type Style } from "./UINode"
 
 export type UIImageStyle = ElementStyle & { borderRadius?: number, objectFit?: "cover" | "contain" | "fill", tintColor?: Color }
 
@@ -14,7 +14,9 @@ export type CanvasImageSource = { canvasSurface: number }
 export type ImageSource = string | FetchResponse | File | SvgSource | Canvas
 
 const toSrc = (src: ImageSource): string | FetchResponse | File | SvgSource | CanvasImageSource =>
-  isCanvas(src) ? { canvasSurface: src._bakeSurface() } : src
+  // _bakeSurfaceForUI (not _bakeSurface) also flags the canvas UI-bound, so canvas.update() later
+  // refreshes this image node in place — that's what makes an animated UIImage(canvas) update.
+  isCanvas(src) ? { canvasSurface: src._bakeSurfaceForUI() } : src
 
 /** The stored/resolved image source (a Canvas is resolved to a surface marker). */
 export type ResolvedImageSource = string | FetchResponse | File | SvgSource | CanvasImageSource
@@ -35,6 +37,7 @@ export interface UIImage {
   setSourceRect(x: number, y: number, w: number, h: number): this
 
   onLayout(onLayout: OnLayoutCallback): this
+  getBoundingClientRect(): BoundingClientRect | null
 
   setClass(name: string, enabled: boolean): this
   toggleClass(name: string): this

package/runtime/sdk/ui/UIInput.ts

@@ -1,21 +1,60 @@
-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" }
+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";
+
+type InputStyle = {
+  placeholder?: string,
+  placeholderColor?: Color,
+  /**
+   * Keyboard hint, NOT a validator — `number` does not block pasted letters; validate in your own
+   * onChange. The phone-pad value is `phone` (LeCodes has no `tel`).
+   */
+  type?: "text" | "password" | "search" | "phone" | "email" | "number" | "decimal" | "url",
+  /**
+   * What the layout does while the keyboard is up (decided by the FOCUSED input). `true` (default):
+   * the layout viewport shrinks to the area above the keyboard — one relayout. `false`: the keyboard
+   * overlays the UI with NO layout recalculation — for chat composers that manage their own inset
+   * (pair with `app.keyboardHeight` / the app `"keyboard"` event) and full-screen canvases where a
+   * reflow is worse than overlap.
+   */
+  keyboardShrink?: boolean,
+  /** Hard cap on the text length — enforced by the host while typing/pasting. */
+  maxLength?: number,
+  /** Auto-capitalization hint; omitted = platform default. */
+  autocapitalize?: "none" | "words" | "sentences" | "characters",
+  /** Enable/disable the platform autocorrection & suggestions; omitted = platform default. */
+  autocorrect?: boolean,
+}
 export type UIInputStyle = ElementStyle & DrawableStyle & TextStyle & InputStyle
 
+/** UIInput-only (a UITextArea's Enter is a newline, period): the return-key label. */
+type SubmitStyle = {
+  /**
+   * Return-key label. On submit the keyboard dismisses UNLESS `enterKey` is `"next"` — then the
+   * app is expected to call `otherInput.focus()` from `onSubmit`, so the keyboard never blinks.
+   */
+  enterKey?: "done" | "go" | "next" | "search" | "send",
+}
+
 export interface UIInput {
   readonly type: "input",
 
   value: string
 
-  style: Style<this, UIInputStyle & { onFocused?: UIInputStyle & { duration?: number } }>,
+  style: Style<this, UIInputStyle & SubmitStyle & { onFocused?: UIInputStyle & { 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
+  /** The keyboard's return key was pressed. `value` is the current text. See `enterKey`. */
+  onSubmit(callback: (value: string) => void): UIInput
   onLayout(onLayout: OnLayoutCallback): this
+  getBoundingClientRect(): BoundingClientRect | null
+
+  /** Focus the input (opens the keyboard). No-op before mount. */
+  focus(): void
+  /** Release focus (dismisses the keyboard when this input held it). */
+  blur(): void
 
   setClass(name: string, enabled: boolean): this
   toggleClass(name: string): this
@@ -39,6 +78,11 @@ export interface UITextArea {
   onFocus(callback: () => void): UITextArea
   onBlur(callback: () => void): UITextArea
 
+  /** Focus the text area (opens the keyboard). No-op before mount. */
+  focus(): void
+  /** 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
@@ -46,10 +90,11 @@ export interface UITextArea {
 }
 
 class InputElement<T extends "input" | "textarea"> extends Element<T> {
-  
+
   readonly cl: Function[] = []
   readonly fl: Function[] = []
   readonly bl: Function[] = []
+  readonly sl: Function[] = []
 
   get value() {
     return _creatorUI.getTextValue(this._id)
@@ -60,6 +105,12 @@ class InputElement<T extends "input" | "textarea"> extends Element<T> {
     }
   }
 
+  // `phone` is SDK-surface only — hosts (and the web's verbatim `el.type`) keep HTML's `tel` as
+  // the wire format, so the rename never reaches them.
+  _mapStyle(style: any): void {
+    if (style.type === "phone") style.type = "tel"
+  }
+
   onChange (callback: (value: string) => void): this {
     this.cl.push(callback)
     return this
@@ -72,17 +123,33 @@ class InputElement<T extends "input" | "textarea"> extends Element<T> {
     this.bl.push(callback)
     return this
   }
+  onSubmit(callback: (value: string) => void): this {
+    this.sl.push(callback)
+    return this
+  }
+
+  // Focus rides the existing value channel (updateNode "focus") — no new ABI method.
+  focus(): void {
+    if (this._id !== 0) {
+      _creatorUI.updateNode(this._id, "focus", true)
+    }
+  }
+  blur(): void {
+    if (this._id !== 0) {
+      _creatorUI.updateNode(this._id, "focus", false)
+    }
+  }
 }
 
 export function UIInput(): UIInput;
 export function UIInput(style: UIInputStyle): UIInput;
 export function UIInput(style?: UIInputStyle): UIInput {
-  return new InputElement("input", style ?? {})
+  // One text line as the floor — an unstyled input must never collapse to 0 height.
+  return new InputElement("input", { minHeight: "1.2em", ...style })
 }
 
 export function UITextArea(): UITextArea;
 export function UITextArea(style: UIInputStyle): UITextArea;
 export function UITextArea(style?: UIInputStyle): UITextArea {
-  return new InputElement("textarea", style ?? {})
+  return new InputElement("textarea", { minHeight: "1.2em", ...style })
 }
-

package/runtime/sdk/ui/UIModal.ts

@@ -0,0 +1,149 @@
+import { type UIWidget, type UIWidgetStyle, WidgetElement } from "./UIWidget"
+import type { BaseStyle, ChildrenFn, Color, DrawableStyle, UINodeChild } from "./UINode"
+
+export type UIModalStyle = UIWidgetStyle
+
+/**
+ * The modal's hidden pose: `show()` animates from it, `hide()` animates to it. `duration` (ms)
+ * applies to both directions.
+ */
+export type UIModalTransition = DrawableStyle & BaseStyle & {
+  overlayColor?: Color | null,
+  duration?: number,
+}
+
+const MODAL_ANIM_MS = 200
+
+/**
+ * A dialog: a `UIWidget` with the modal boilerplate built in. Comes with a scrim
+ * (`overlayColor: "rgba(0, 0, 0, 0.5)"` unless overridden), animates on `show()`/`hide()`
+ * (a 200 ms fade by default — swap the pose via `transition()`; the exit plays with
+ * `commit: false`, so the style is intact for the next show), and closes itself on a scrim tap
+ * or the Android back button (disable via `dismissible(false)`). Everything else is a plain
+ * widget — same styling, children, touch and `attachTo()` surface; create it **once** at module
+ * scope and reuse it.
+ */
+export interface UIModal extends UIWidget {
+  /** Mount as an overlay and play the entrance transition. No-op while already open. */
+  show(): void,
+  /** Play the exit transition, then unmount. No-op while closed or already closing. */
+  hide(): void,
+  /** True from `show()` until `hide()` starts (already false during the exit animation). */
+  readonly isOpen: boolean,
+
+  /**
+   * Replace the show/hide animation. `hidden` is the off-screen pose — `show()` animates from
+   * it, `hide()` animates to it. Default `{ opacity: 0, duration: 200 }` (a fade); the pose
+   * replaces it wholesale, so a slide without a fade is just the slide. The scrim keeps its own
+   * fade unless the pose sets `overlayColor` itself.
+   *
+   * ```ts
+   * sheet.transition({ transform: "translateY(480px)", duration: 250 })   // bottom sheet
+   * ```
+   */
+  transition(hidden: UIModalTransition): this,
+
+  /** Called when `show()` mounts the modal. */
+  onOpen(callback: () => void): this,
+  /** Called when the modal starts closing — scrim tap, back button, or a `hide()` call. */
+  onClose(callback: () => void): this,
+  /** `dismissible(false)` keeps scrim taps and the back button from closing the modal
+   *  (forced-choice dialogs). Default `true`. */
+  dismissible(enabled: boolean): this,
+
+  append(...nodes: UINodeChild[]): this
+  insert(index: number, ...nodes: UINodeChild[]): this
+  remove(...nodes: UINodeChild[]): this
+}
+
+export class ModalElement extends WidgetElement {
+  _open = false
+  _dismissible = true
+  _transition: UIModalTransition = { opacity: 0 }
+  _closeTimer?: ReturnType<typeof setTimeout>
+  readonly _openListeners: (() => void)[] = []
+  readonly _closeListeners: (() => void)[] = []
+
+  constructor(style: UIModalStyle, children: UINodeChild[] | ChildrenFn) {
+    super("widget", { overlayColor: "rgba(0, 0, 0, 0.5)", ...style }, children)
+    this.onOverlayTap(() => { if (this._dismissible) this.hide() })
+    this.onBackPressed(() => { if (this._dismissible) this.hide() })
+  }
+
+  // The full animate argument: hidden pose + duration, plus the scrim fade — only when the
+  // modal actually has a scrim (overlayColor: null opts out; animating a null scrim would
+  // create the intercepting layer) and the pose doesn't drive the scrim itself.
+  private _pose(extra?: Record<string, unknown>): Record<string, unknown> {
+    const pose: Record<string, unknown> = { duration: MODAL_ANIM_MS, ...this._transition, ...extra }
+    const overlayColor = (this._style as UIModalStyle).overlayColor
+    if (pose.overlayColor === undefined && overlayColor !== undefined && overlayColor !== null) {
+      pose.overlayColor = "transparent"
+    }
+    return pose
+  }
+
+  private get _duration(): number {
+    return this._transition.duration ?? MODAL_ANIM_MS
+  }
+
+  transition(hidden: UIModalTransition): this {
+    this._transition = hidden
+    return this
+  }
+
+  show(): void {
+    if (this._open) return
+    if (this._closeTimer !== undefined) {   // reopened mid exit: finish that hide now
+      clearTimeout(this._closeTimer)
+      this._closeTimer = undefined
+      super.hide()
+    }
+    this._open = true
+    super.show()
+    this.animateFrom(this._pose())
+    for (const callback of this._openListeners) callback()
+  }
+
+  hide(): void {
+    if (!this._open) return
+    this._open = false
+    this.animateTo(this._pose({ commit: false }))
+    this._closeTimer = setTimeout(() => { this._closeTimer = undefined; super.hide() }, this._duration)
+    for (const callback of this._closeListeners) callback()
+  }
+
+  get isOpen(): boolean {
+    return this._open
+  }
+
+  onOpen(callback: () => void): this {
+    this._openListeners.push(callback)
+    return this
+  }
+  onClose(callback: () => void): this {
+    this._closeListeners.push(callback)
+    return this
+  }
+  dismissible(enabled: boolean): this {
+    this._dismissible = enabled
+    return this
+  }
+}
+
+export function UIModal(): UIModal;
+export function UIModal(children: UINodeChild[] | ChildrenFn): UIModal;
+export function UIModal(style: UIModalStyle): UIModal;
+export function UIModal(style: UIModalStyle, children: UINodeChild[] | ChildrenFn): UIModal;
+export function UIModal(...args: [] | [UINodeChild[] | ChildrenFn | UIModalStyle] | [UIModalStyle, children: UINodeChild[] | ChildrenFn]): UIModal {
+  if (args.length === 0) {
+    return new ModalElement({}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
+      return new ModalElement({}, args[0])
+    } else {
+      return new ModalElement(args[0], [])
+    }
+  } else {
+    return new ModalElement(args[0], args[1])
+  }
+}