lecodes-cli 0.1.5 → 0.1.7

package/runtime/sdk/ui/UIScreen.ts

@@ -0,0 +1,122 @@
+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"
+
+export type UIScreenStyle = ContainerStyle & DrawableStyle & PaddingStyle & ScrollStyle & BaseStyle & ScrollStyle & { refreshControlColor?: Color }
+
+export interface UIScreen <Scrollable extends boolean = boolean> {
+  readonly type: "screen",
+  scrollable: Scrollable,
+  style: Style<this, UIScreenStyle>,
+  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle>
+  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle>
+
+  open(): void,
+  close(): void
+
+  append(...nodes: UINodeChild[]): this
+  insert(index: number, ...nodes: UINodeChild[]): this
+  remove(...nodes: UINodeChild[]): this
+  setContent(nodes: UINodeChild[]): this
+  
+  readonly children: UINodeChild[],
+
+  makeScrollable(): UIScreen<true>,
+  onScroll: Scrollable extends true? (callback: (scrollPosition: number) => void) => void: never,
+  onOverscroll: Scrollable extends true? (callback: (scrollPosition: number) => void) => void: never,
+  onBackPressed(callback: () => void): this
+  onRefresh: Scrollable extends true? ((callback: () => void | Promise<void>) => this): never,
+
+  onOpen(callback: () => void): this
+  onClose(callback: () => void): this
+
+  onLayout(onLayout: OnLayoutCallback): this
+
+  onTouchStart(callback: (ev: TouchStartEvent<UIScreen>) => void): this,
+}
+
+export class ScreenElement extends ContainerElement<"screen"> {
+  scrollable = false as const
+  open(): void {
+    _creatorUI.openScreen(this) 
+  }
+  close(): void {
+    _creatorUI.closeScreen()
+  }
+  protected ol: (() => void)[] = []
+  onOpen(callback: () => void): this {
+    this.ol.push(callback)
+    return this
+  }
+  protected cl: (() => void)[] = []
+  onClose(callback: () => void): this {
+    this.cl.push(callback)
+    return this
+  }
+  readonly touchStartListeners: any[] = []
+  _interactive = false
+  onTouchStart (callback: any): this {
+    this._interactive = true
+    this.touchStartListeners.push(callback)
+    return this
+  }
+  _emitTouchStart(pointerId: number, clientX: number, clientY: number): any {
+    const touchEvent = new TouchStartEvent(clientX, clientY, pointerId)
+    touchEvent.target = this
+    for (let callback of this.touchStartListeners) {
+      callback(touchEvent)
+      if ((touchEvent as any)._trackHandler) {
+        return (touchEvent as any)._trackHandler
+      }
+    }
+    return null
+  }
+  makeScrollable(): UIScreen<true> {
+    this.scrollable = true as any
+
+    Object.assign(this, {
+      sl: [] as any[],
+      osl: [] as any[],
+      onScroll(callback: any) {
+        this.sl.push(callback)
+        return this
+      },
+      onOverscroll(callback: any) {
+        this.osl.push(callback)
+        return this
+      },
+      onRefresh(callback: any) {
+        (this as any)._refreshCallback = callback
+        return this 
+      }
+    })
+
+    return this as any as UIScreen<true>
+  }
+  _backButtonCallback?: () => void
+  onBackPressed(callback: any): this {
+    this._backButtonCallback = callback
+    return this
+  }
+  declare _refreshCallback: any
+  declare onRefresh: never
+  declare onScroll: never
+  declare onOverscroll: never
+}
+
+export function UIScreen(): UIScreen<false>;
+export function UIScreen(children: UINodeChild[]): 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> {
+  if (args.length === 0) {
+    return new ScreenElement("screen", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new ScreenElement("screen", {}, args[0])
+    } else {
+      return new ScreenElement("screen", args[0], [])
+    }
+  } else {
+    return new ScreenElement("screen", args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIScrollable.ts

@@ -0,0 +1,70 @@
+import type { UIContainerStyle } from "./UIContainer"
+import { type Style, type AnimateStyle, type UINodeChild, type OnLayoutCallback, ContainerElement } from "./UINode"
+
+export type ScrollStyle = { showScrollbar?: boolean, overscrollMode?: "none" | "absorb" | "default" }
+
+export type UIScrollableStyle = UIContainerStyle & ScrollStyle & { scrollDirection?: "horizontal" | "vertical" }
+
+export interface UIScrollable {
+  readonly type: "scrollable",
+  style: Style<this, UIScrollableStyle>,
+  animateTo: AnimateStyle<this, UIScrollableStyle>,
+  animateFrom: AnimateStyle<this, UIScrollableStyle>,
+  
+  append(...nodes: UINodeChild[]): UIScrollable
+  insert(index: number, ...nodes: UINodeChild[]): UIScrollable
+  remove(...nodes: UINodeChild[]): UIScrollable
+  setContent(nodes: UINodeChild[]): this
+
+  onLayout(onLayout: OnLayoutCallback): this
+
+  onScroll(callback: (scrollPosition: number) => void): UIScrollable,
+  onScrollRelease(callback: () => void): UIScrollable,
+  onOverscroll(callback: (delta: number) => void): UIScrollable
+
+  readonly children: UINodeChild[]
+}
+
+class ScrollableElement extends ContainerElement<"scrollable"> {
+
+  readonly osl: any[] = []
+  readonly sl: any[] = []
+  readonly srl: any[] = []
+
+  get scrollListeners() {
+    return this.sl
+  }
+
+  onScroll (callback: any): this {
+    this.sl.push(callback)
+    return this
+  }
+
+  onScrollRelease (callback: any): this {
+    this.srl.push(callback)
+    return this
+  }
+
+  onOverscroll (callback: any): this {
+    this.osl.push(callback)
+    return this
+  }
+}
+
+export function UIScrollable(): UIScrollable
+export function UIScrollable(children: UINodeChild[]): 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 {
+  if (args.length === 0) {
+    return new ScrollableElement("scrollable", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new ScrollableElement("scrollable", {}, args[0])
+    } else {
+      return new ScrollableElement("scrollable", args[0], [])
+    }
+  } else {
+    return new ScrollableElement("scrollable", args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UISpacer.ts

@@ -0,0 +1,14 @@
+import { Element, type ElementStyle, type Style, type StyleFn } from "./UINode"
+
+export type UISpacerStyle = ElementStyle
+
+export interface UISpacer {
+  readonly type: "spacer",
+  style: Style<this, UISpacerStyle>,
+
+}
+export function UISpacer(): UISpacer
+export function UISpacer(style: UISpacerStyle): UISpacer
+export function UISpacer(style?: UISpacerStyle): UISpacer {
+  return new Element("spacer", style ?? {})
+}

package/runtime/sdk/ui/UIText.ts

@@ -0,0 +1,40 @@
+import { Element, type AnimateStyle, type BaseStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type Style, type TextStyle } from "./UINode"
+
+export type UITextStyle = ElementStyle & TextStyle
+
+export interface UIText {
+  readonly type: "text",
+  text: string,
+  style: Style<this, UITextStyle>,
+  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle & TextStyle>
+  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle & TextStyle>
+
+  onLayout(onLayout: OnLayoutCallback): this
+}
+
+export class TextElement extends Element<"text"> {
+  private _text: string
+  constructor(style: any, text: string) {
+    super("text", style)
+    this._text = text
+  }
+  get text(): string {
+    return this._text
+  }
+  set text(value) {
+    this._text = value
+    if (this._id !== 0) {
+      _creatorUI.updateNode(this._id, "text", value)
+    }
+  }
+}
+
+export function UIText(text: string): UIText;
+export function UIText(style: UITextStyle, text: string): UIText;
+export function UIText(...args: [string] | [UITextStyle, string]): UIText {
+  if (args.length === 1) {
+    return new TextElement({}, args[0])
+  } else {
+    return new TextElement(args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIVideo.ts

@@ -0,0 +1,38 @@
+import type { VideoPlayer } from "../runtime/media"
+import { Element, type AnimateStyle, type AppearStyle, type BaseStyle, type DisappearStyle, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type Style, type StyleFn } from "./UINode"
+
+export type UIVideoStyle = ElementStyle & DrawableStyle & { objectFit?: "cover" | "contain" | "fill" }
+
+export interface UIVideo {
+  readonly type: "video",
+  player: VideoPlayer
+  style: Style<this, UIVideoStyle>
+  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle>
+  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle>
+
+  onLayout(onLayout: OnLayoutCallback): this
+}
+
+class VideoElement extends Element<"video"> {
+  private _playerId: number
+  private _player: VideoPlayer
+  constructor(style: any, player: VideoPlayer) {
+    super("video", style)
+    this._player = player
+    this._playerId = (player as any)._id
+  }
+
+  get player() {
+    return this._player
+  }
+}
+
+export function UIVideo(player: VideoPlayer): UIVideo
+export function UIVideo(style: UIVideoStyle, player: VideoPlayer): UIVideo
+export function UIVideo(...args: [VideoPlayer] | [UIVideoStyle, VideoPlayer]): UIVideo {
+    if (args.length === 1) {
+    return new VideoElement({}, args[0])
+  } else {
+    return new VideoElement(args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIVirtualizedList.ts

@@ -0,0 +1,222 @@
+import { Element, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type PaddingStyle, type Style, type UINodeChild } from "./UINode"
+
+export type UIVirtualizedListStyle = DrawableStyle & ElementStyle
+
+export interface VListConfig<T> {
+    /** Стабильный уникальный ключ айтема */
+    keyOf: (item: T) => string
+    /** Фабрика поддерева. Вызывается при входе айтема в окно; поддерево живёт до выхода из окна */
+    render: (item: T) => UINodeChild
+    /**
+     * Оценка высоты (px) до первого измерения. Число — или функция от айтема,
+     * например для чата: msg => 40 + Math.ceil(msg.text.length / 35) * 20
+     * Вычисляется один раз при добавлении айтема, в нативку уходит готовое число.
+     */
+    estimatedHeight: number | ((item: T) => number)
+    /** px вокруг вьюпорта, которые держим смонтированными. Default: высота вьюпорта */
+    overscan?: number
+    /** Чат-режим: первый layout проскроллен в конец, append при положении внизу автоскроллит */
+    inverted?: boolean
+}
+
+export interface UIVirtualizedList<T = unknown> {
+    readonly type: "vlist"
+    style: Style<this, UIVirtualizedListStyle>
+
+    /** Полная замена данных. Нативка сама размонтирует исчезнувшие ключи через _syncWindow */
+    setData(items: T[]): this
+    append(...items: T[]): this
+    /** Вставка в начало БЕЗ прыжка скролла (компенсация на стороне нативки) */
+    prepend(...items: T[]): this
+    /** Обновить айтемы с теми же ключами: re-render, если смонтированы. Высота в кэше сохраняется до повторного измерения */
+    update(...items: T[]): this
+    removeByKey(...keys: string[]): this
+
+    readonly itemCount: number
+    getItem(key: string): T | undefined
+
+    scrollTo(offset: number, animated?: boolean): void
+    scrollToKey(key: string, animated?: boolean): void
+    scrollToEnd(animated?: boolean): void
+
+    onScroll(callback: (scrollPosition: number) => void): this
+    /** Порог в px от нижнего края контента. Срабатывает один раз до ухода от края (защёлка в нативке) */
+    onEndReached(thresholdPx: number, callback: () => void): this
+    /** Порог от верхнего края — подгрузка истории в чате */
+    onStartReached(thresholdPx: number, callback: () => void): this
+    onLayout(onLayout: OnLayoutCallback): this
+}
+
+export class VListElement<T> extends Element<"vlist"> implements UIVirtualizedList<T> {
+
+    // --- читается нативкой в createUINode (copyProperty / copyNodePtr) ---
+    _overscan: number               // -1 = "высота вьюпорта", резолвится в нативке
+    _inverted: boolean
+    _keys: string[] = []            // начальное состояние до маунта ноды
+    _estimates: number[] = []       // параллельно _keys
+    _endThreshold = 0
+    _startThreshold = 0
+
+    // --- списки слушателей, нативка забирает через copyPropertyListPtr ---
+    protected sl: ((scrollPosition: number) => void)[] = []     // scroll
+    protected erl: (() => void)[] = []                          // endReached
+    protected strl: (() => void)[] = []                         // startReached
+
+    // --- приватное состояние JS-стороны ---
+    private items = new Map<string, T>()
+    private mounted = new Map<string, UINodeChild>()
+    private keyOf: (item: T) => string
+    private renderItem: (item: T) => UINodeChild
+    private estimate: (item: T) => number
+
+    constructor(config: VListConfig<T>) {
+        super("vlist", {})
+        this.keyOf = config.keyOf
+        this.renderItem = config.render
+        this.estimate = typeof config.estimatedHeight === "function"
+            ? config.estimatedHeight
+            : () => config.estimatedHeight as number
+        this._overscan = config.overscan ?? -1
+        this._inverted = config.inverted ?? false
+    }
+
+    private get isAttached(): boolean {
+        return !!this._id && this._id !== 0
+    }
+
+    private register(items: T[]): [string[], number[]] {
+        const keys: string[] = []
+        const estimates: number[] = []
+        for (const item of items) {
+            const k = this.keyOf(item)
+            this.items.set(k, item)
+            keys.push(k)
+            estimates.push(this.estimate(item))
+        }
+        return [keys, estimates]
+    }
+
+    setData(items: T[]): this {
+        const prevItems = new Map(this.items)
+        const prevMounted = [...this.mounted.keys()]
+        this.items.clear()
+        const [keys, estimates] = this.register(items)
+        this._keys = keys
+        this._estimates = estimates
+        if (this.isAttached) {
+            // нативка диффает по ключам: исчезнувшие смонтированные ключи придут в _syncWindow как unmount
+            _creatorUI.vlistSetKeys(this, keys, estimates)
+            // setKeys диффает ТОЛЬКО по ключам — пережившие replace смонтированные айтемы сохраняют
+            // старое поддерево. Если объект данных изменился, перерисовываем их (как update), иначе
+            // строки остаются со старым содержимым. На вебе экран в истории держит айтемы
+            // смонтированными, поэтому без этого повторный setData их не обновлял.
+            for (const k of prevMounted) {
+                if (this.mounted.has(k) && this.items.get(k) !== prevItems.get(k)) {
+                    _creatorUI.vlistInvalidate(this, k)
+                }
+            }
+        }
+        return this
+    }
+
+    append(...items: T[]): this {
+        const [keys, estimates] = this.register(items)
+        this._keys.push(...keys)
+        this._estimates.push(...estimates)
+        if (this.isAttached) {
+            // inverted + позиция внизу → нативка автоскроллит к концу
+            _creatorUI.vlistInsertKeys(this, -1, keys, estimates)
+        }
+        return this
+    }
+
+    prepend(...items: T[]): this {
+        const [keys, estimates] = this.register(items)
+        this._keys.unshift(...keys)
+        this._estimates.unshift(...estimates)
+        if (this.isAttached) {
+            // нативка компенсирует scrollY на сумму estimates — позиция не прыгает
+            _creatorUI.vlistInsertKeys(this, 0, keys, estimates)
+        }
+        return this
+    }
+
+    update(...items: T[]): this {
+        for (const item of items) {
+            const k = this.keyOf(item)
+            if (!this.items.has(k)) continue
+            this.items.set(k, item)
+            if (this.isAttached && this.mounted.has(k)) {
+                // unmount+mount, кэш высоты сохраняется до повторного измерения.
+                // Несмонтированный айтем перерендерится сам при входе в окно
+                _creatorUI.vlistInvalidate(this, k)
+            }
+        }
+        return this
+    }
+
+    removeByKey(...keys: string[]): this {
+        for (const k of keys) {
+            if (!this.items.delete(k)) continue
+            const i = this._keys.indexOf(k)
+            if (i >= 0) { this._keys.splice(i, 1); this._estimates.splice(i, 1) }
+        }
+        if (this.isAttached) {
+            _creatorUI.vlistRemoveKeys(this, keys)
+        }
+        return this
+    }
+
+    get itemCount(): number { return this.items.size }
+    getItem(key: string): T | undefined { return this.items.get(key) }
+
+    // --- команды: офсеты и позиции знает только нативка (префикс-суммы) ---
+    scrollTo(offset: number, animated = true): void {
+        _creatorUI.command(this, "scrollTo", offset, animated)
+    }
+    scrollToKey(key: string, animated = true): void {
+        _creatorUI.command(this, "scrollToKey", key, animated)
+    }
+    scrollToEnd(animated = true): void {
+        _creatorUI.command(this, "scrollToEnd", animated)
+    }
+
+    onScroll(callback: (scrollPosition: number) => void): this {
+        this.sl.push(callback)
+        return this
+    }
+    onEndReached(thresholdPx: number, callback: () => void): this {
+        this._endThreshold = thresholdPx
+        this.erl.push(callback)
+        return this
+    }
+    onStartReached(thresholdPx: number, callback: () => void): this {
+        this._startThreshold = thresholdPx
+        this.strl.push(callback)
+        return this
+    }
+
+    /**
+     * Единственный колбэк из нативки (через jsPtr, как у button).
+     * Вызывается ТОЛЬКО когда окно пересекло границу — не на каждый кадр скролла.
+     * Порядок: сначала unmount (нативка уже снесла поддеревья и обнулила _id,
+     * здесь только чистим JS-ссылки), потом mount.
+     */
+    _syncWindow(unmountKeys: string[], mountKeys: string[]): void {
+        for (const k of unmountKeys) {
+            this.mounted.delete(k)
+        }
+        for (const k of mountKeys) {
+            const item = this.items.get(k)
+            if (item === undefined) continue
+            const node = this.renderItem(item)
+            this.mounted.set(k, node)
+            // createUINode в detached yoga root + измерение (width, NaN) + кэш высоты
+            _creatorUI.vlistMount(this, k, node)
+        }
+    }
+}
+
+export function UIVirtualizedList<T>(config: VListConfig<T>): UIVirtualizedList<T> {
+    return new VListElement<T>(config)
+}

package/runtime/sdk/ui/UIWidget.ts

@@ -0,0 +1,97 @@
+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"
+
+
+export type UIWidgetStyle = ContainerStyle & DrawableStyle & PaddingStyle & BaseStyle & PositionStyle & {
+  // A layer behind the widget that intercepts clicks. "transparent" still intercepts;
+  // null removes the layer. A tap on it fires onOverlayTap.
+  overlayColor?: Color | null
+}
+
+
+export interface UIWidget {
+  readonly type: "widget",
+  style: Style<this, UIWidgetStyle>,
+  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle & { overlayColor?: Color | null }>
+  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle & { overlayColor?: Color | null }>
+
+  show(): void,
+  hide(): void,
+
+  readonly isShow: boolean,
+
+  append(...nodes: UINodeChild[]): UIWidget
+  insert(index: number, ...nodes: UINodeChild[]): UIWidget
+  remove(...nodes: UINodeChild[]): UIWidget
+  setContent(nodes: UINodeChild[]): this
+  
+  readonly children: UINodeChild[],
+
+  onLayout(onLayout: OnLayoutCallback): this
+  onTouchStart(callback: (ev: TouchStartEvent<UIWidget>) => void): this,
+  onOverlayTap(callback: () => void): this,
+  onBackPressed(callback: () => void): this
+}
+
+
+export class WidgetElement extends ContainerElement<"widget"> {
+  scrollable = false as const
+  show(): void {
+    _creatorUI.showWidget(this) 
+  }
+  hide(): void {
+    _creatorUI.hideWidget(this)
+  }
+  get isShow(): boolean {
+    return this._id !== 0
+  }
+
+  _interactive = false
+  readonly touchStartListeners: any[] = []
+  onTouchStart (callback: any): this {
+    this._interactive = true
+    this.touchStartListeners.push(callback)
+    return this
+  }
+  _emitTouchStart(pointerId: number, clientX: number, clientY: number): any {
+    const touchEvent = new TouchStartEvent(clientX, clientY, pointerId)
+    touchEvent.target = this
+    for (let callback of this.touchStartListeners) {
+      callback(touchEvent)
+      if ((touchEvent as any)._trackHandler) {
+        return (touchEvent as any)._trackHandler
+      }
+    }
+    return null
+  }
+  readonly otl: (() => void)[] = []
+  onOverlayTap(callback: () => void): this {
+    this.otl.push(callback)
+    return this
+  }
+
+  _backButtonCallback?: () => void
+  onBackPressed(callback: any): this {
+    this._backButtonCallback = callback
+    return this
+  }
+}
+
+
+export function UIWidget(): UIWidget;
+export function UIWidget(children: UINodeChild[]): 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 {
+  if (args.length === 0) {
+    return new WidgetElement("widget", {}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0])) {
+      return new WidgetElement("widget", {}, args[0])
+    } else {
+      return new WidgetElement("widget", args[0], [])
+    }
+  } else {
+    return new WidgetElement("widget", args[0], args[1])
+  }
+}

package/runtime/sdk/ui/fonts.ts

@@ -0,0 +1,10 @@
+type FontOptions = {
+  weight?: number,
+  style?: "normal" | "italic"
+}
+
+export async function registerFont (fontFamily: string, url: string, options: FontOptions = {}): Promise<void> {
+  return new Promise<void>((res, rej) => {
+    _creatorUI.registerFont(fontFamily, url, options, res, rej)
+  })
+}

package/runtime/sdk/ui/router.ts

@@ -0,0 +1,73 @@
+import { UIScreen } from "./UIScreen";
+
+type RouterOptions = {
+  showDefaultBackButton?: boolean
+}
+
+type Router = {
+  get current(): UIScreen<boolean>
+  init<T extends boolean>(homePage: UIScreen<T>, opts?: RouterOptions): void
+  push<T extends boolean>(screen: UIScreen<T>): void
+  replace<T extends boolean>(screen: UIScreen<T>, options?: ReplaceOptions): void
+  pop(to?: number): void
+  hide(): void
+  restore(): void
+
+  addEventListener(channel: "change", callback: (screen: UIScreen<boolean>) => void): void
+  removeEventListener(channel: "change", callback: (screen: UIScreen<boolean>) => void): void
+}
+
+let currentScreen: UIScreen<any> | null = null
+let onChange = <T extends boolean>(screen: UIScreen<T>) => {
+  currentScreen = screen;
+  for (let callback of (Router as any)._changeListeners) {
+    callback(screen)
+  }
+}
+
+type ReplaceOptions = {
+  transition: "slide-from-left" | "slide-from-right" | "slide-from-top" | "slide-from-bottom" | 
+    "zoom" | "zoom-out" | "zoom-in" | "fade" | "none"
+}
+
+export const Router: Router = /*#__PURE__*/ Object.freeze({
+
+  init(homePage: UIScreen<any>, opts: RouterOptions = {}): void {
+    _creatorUI.routerOpen(homePage, onChange, opts.showDefaultBackButton ?? false)
+    currentScreen = homePage
+  },
+  push(screen: UIScreen<any>): void {
+    _creatorUI.routerPush(screen)
+  },
+  replace(screen: UIScreen<any>, opts?: ReplaceOptions): void {
+    _creatorUI.routerReplace(screen, opts?.transition ?? "fade")
+  },
+  pop(to?: number): void {
+    _creatorUI.routerPop(to ?? -1)
+  },
+  hide() {
+    _creatorUI.routerHide()
+  },
+  restore() {
+    _creatorUI.routerRestore()
+  },
+
+  get current(): UIScreen<any> {
+    return currentScreen!
+  },
+  
+  _changeListeners: [] as any[],
+  addEventListener(channel: "change", callback: (screen: UIScreen<boolean>) => void): void { 
+    if (channel === "change") {
+      this._changeListeners.push(callback)
+    }
+  },
+  removeEventListener(channel: "change", callback: (screen: UIScreen<boolean>) => void): void {
+    if (channel === "change") {
+      let index = this._changeListeners.indexOf(callback)
+      if (index >= 0) {
+        this._changeListeners.splice(index, 1)
+      }
+    }
+  }
+})