lecodes-cli 0.7.2 → 0.8.0

package/runtime/sdk/kit/UITabs.ts

@@ -1,105 +0,0 @@
-// UITabs — a self-contained tab component: a swipe-disabled UIScreenHost of tab screens + a bar of
-// tap-to-switch buttons. Pure TS over UIScreenHost, no native work. It's just an element — you place
-// it inside your own UIScreen and own the routing; UITabs only switches the visible tab.
-//
-//   Router.push(UIScreen([
-//     UITabs([
-//       { icon: homeSvg, label: "Home",    content: HomeScreen() },
-//       { icon: userSvg, label: "Profile", content: ProfileScreen() },
-//     ]),
-//   ]))
-//
-// A tab's content is a full UIScreen (screens are the only page kind UIScreenHost accepts): it gets
-// onOpen/onClose from the host's settle lifecycle, plus makeScrollable/onRefresh. All tabs stay
-// mounted, so switching is instant and per-tab state survives.
-
-import { UIScreenHost, type HostedScreen } from "../ui/UIScreenHost"
-import { UIRow, UIColumn, type UIColumn as UIColumnType } from "../ui/UIContainer"
-import { UIButton } from "../ui/UIButton"
-import { UIText } from "../ui/UIText"
-import { UIImage, type ImageSource } from "../ui/UIImage"
-import type { UINodeChild } from "../ui/UINode"
-
-export interface UITabItem {
-  /** Icon image source (SvgSource / url / File / Canvas). Optional. */
-  icon?: ImageSource
-  /** Label under the icon. Optional. */
-  label?: string
-  /** Tab content — a full UIScreen (wrap a plain element: `UIScreen([el])`). */
-  content: HostedScreen
-}
-
-/** The tabs element (a UIColumn) plus a small control surface. Embed it like any element. */
-export interface UITabs extends UIColumnType {
-  /** Switch the visible tab. */
-  select(index: number): this
-  onChange(callback: (index: number) => void): this
-  /** Active tab index. */
-  readonly index: number
-  /** The bar row — style it or its item buttons directly. */
-  readonly bar: UIRow
-}
-
-const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v))
-
-function tabButton(item: UITabItem, i: number, onSelect: (i: number) => void): ReturnType<typeof UIButton> {
-  const parts: UINodeChild[] = []
-  if (item.icon) parts.push(UIImage({ width: 24, height: 24 }, item.icon))
-  if (item.label) parts.push(UIText({ fontSize: 11, lineHeight: 14, textAlign: "center" }, item.label))
-
-  // Chained .style() (not the legacy first-arg object) — required for the `$active` class block.
-  const btn = UIButton(parts).style({
-    flexGrow: 1,
-    flexBase: 0,
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 3,
-    paddingVertical: 4,
-    opacity: 0.55,
-    $active: { opacity: 1, duration: 150 },
-  })
-  btn.onClick(() => onSelect(i))
-  return btn
-}
-
-export function UITabs(items: UITabItem[]): UITabs {
-  let index = 0
-  const listeners: ((index: number) => void)[] = []
-
-  const host = UIScreenHost(items.map(it => it.content))
-    .style({ swipeEnabled: false, flexGrow: 1, flexShrink: 1 })
-
-  const barItems = items.map((it, i) => tabButton(it, i, select))
-  const bar = UIRow({
-    flexShrink: 0,
-    paddingTop: 8,
-    paddingBottom: "safe-bottom",
-    borderTopWidth: 1,
-    borderTopColor: "#00000022",
-  }, barItems)
-
-  const applyActive = (i: number) => {
-    for (let k = 0; k < barItems.length; k++) barItems[k].setClass("active", k === i)
-  }
-
-  function select(i: number): UITabs {
-    i = clamp(i, 0, Math.max(0, items.length - 1))
-    if (i !== index) {
-      index = i
-      host.setPage(i, false)
-      applyActive(i)
-      for (const cb of listeners) cb(i)
-    }
-    return view
-  }
-
-  applyActive(0)
-
-  const view = UIColumn([ host, bar ]) as unknown as UITabs
-  ;(view as any).select = select
-  ;(view as any).onChange = (cb: (index: number) => void) => { listeners.push(cb); return view }
-  ;(view as any).bar = bar
-  Object.defineProperty(view, "index", { get: () => index })
-  return view
-}

package/runtime/sdk/ui/UIScreenHost.ts

@@ -1,213 +0,0 @@
-import { ContainerElement, type AnimateStyle, type BaseStyle, type ChildrenFn, type DrawableStyle, type ElementStyle, type OnLayoutCallback, type Style, type UINodeChild } from "./UINode"
-import type { UIScreen } from "./UIScreen"
-
-// UIScreenHost — the system's ONE screen host: an element whose pages are full UIScreens, each laid
-// out to the host's box (the same mechanism screens use, with the "device" swapped for the slot).
-// With several screens it pages between them (wrapping each platform's native pager); with a single
-// screen it simply embeds it — a refreshable region under a fixed header, or a screen-swap slot via
-// setContent(next). UITabs is pure TS over a swipe-disabled UIScreenHost.
-//
-// Pages are screens ONLY — no plain elements. Every page then carries the full screen contract
-// (onOpen/onClose from the settle lifecycle, makeScrollable()/onRefresh), and every platform
-// implements exactly one page kind: mount the screen root in the slot, lay it out to the slot size.
-// To host a plain element, wrap it: UIScreenHost(UIScreen([el])).
-
-/** A hosted page: any UIScreen (a `UIScrollableScreen` is a subtype, so it's accepted too). Sizing
- *  styles on it are ignored — screens are roots sized by their host. */
-export type HostedScreen = UIScreen
-/** Reactive pages — ChildrenFn narrowed to screens. */
-export type ScreensFn = () => (HostedScreen | null | undefined | false)[]
-
-/**
- * Transition for `replace()`. The `Router.replace` catalogue, plus `"push"`/`"pop"` — the native
- * UINavigationController feel (the incoming/outgoing screen slides full-width while the other
- * parallaxes ~30% under a dim overlay with a soft edge shadow). Use `"push"` to go forward, `"pop"`
- * to go back. (Animated transitions are native-only; web swaps instantly.)
- */
-export type ScreenHostTransition =
-  | "push" | "pop"
-  | "slide-from-left" | "slide-from-right" | "slide-from-top" | "slide-from-bottom"
-  | "zoom" | "zoom-in" | "zoom-out" | "fade" | "none"
-
-export type UIScreenHostStyle = ElementStyle & DrawableStyle & {
-  // Paging axis. Default "horizontal". Read by the host at mount; live-updatable via .style().
-  scrollDirection?: "horizontal" | "vertical",
-  // false = programmatic-only paging (no user swipe) — the mode UITabs uses. Default true.
-  swipeEnabled?: boolean,
-}
-
-export interface UIScreenHost {
-  readonly type: "screenhost",
-  style: Style<this, UIScreenHostStyle>,
-  animateTo: AnimateStyle<this, DrawableStyle & BaseStyle>,
-  animateFrom: AnimateStyle<this, DrawableStyle & BaseStyle>,
-
-  /** Current settled page index. */
-  readonly page: number,
-  /** Programmatic page switch. `animated` defaults to true (ignored when swipe physics can't run). */
-  setPage(index: number, animated?: boolean): this,
-  /** Fires when the settled page changes (after the swipe/scroll comes to rest). */
-  onPageChange(callback: (index: number) => void): this,
-  /** Continuous fractional scroll position (e.g. 1.35) — for tab-strip indicators / page dots. */
-  onPageScroll(callback: (position: number) => void): this,
-
-  append(...screens: HostedScreen[]): this,
-  insert(index: number, ...screens: HostedScreen[]): this,
-  remove(...screens: HostedScreen[]): this,
-  /** Replace the pages. A single screen swaps the hosted screen in place (old page onClose → new page onOpen). */
-  setContent(screens: HostedScreen | HostedScreen[] | ScreensFn): this,
-  /**
-   * Replace the page at `index` with a new screen, animating the swap when that page is the visible
-   * one (off-screen pages swap instantly). The settled page index is preserved — a replace is not a
-   * page change. This is the push/pop primitive: keep your own stack of screens and replace the
-   * visible slot with a forward transition to push, a backward one to pop.
-   */
-  replace(index: number, screen: HostedScreen, transition?: ScreenHostTransition): this,
-
-  readonly children: UINodeChild[],
-
-  onLayout(onLayout: OnLayoutCallback): this,
-
-  setClass(name: string, enabled: boolean): this,
-  toggleClass(name: string): this,
-  hasClass(name: string): boolean,
-  bindClass(name: string, fn: () => boolean): this,
-}
-
-export class ScreenHostElement extends ContainerElement<"screenhost"> {
-  // --- read by the host at mount (createScreenHostSystem) ---
-  _page = 0                                      // settled index; host writes it back on settle
-  _dir: "horizontal" | "vertical" = "horizontal"
-  _swipe = true
-
-  // --- listeners the host invokes directly (same pattern as UIScrollable.sl / vlist) ---
-  readonly pcl: ((index: number) => void)[] = []   // onPageChange
-  readonly psl: ((position: number) => void)[] = [] // onPageScroll
-
-  get page(): number {
-    return this._page
-  }
-
-  setPage(index: number, animated = true): this {
-    if (this._id !== 0) {
-      _creatorUI.command(this, "setPage", index, animated)
-    } else {
-      this._page = index   // remembered as the initial page until the host mounts
-    }
-    return this
-  }
-
-  onPageChange(callback: (index: number) => void): this {
-    this.pcl.push(callback)
-    return this
-  }
-  onPageScroll(callback: (position: number) => void): this {
-    this.psl.push(callback)
-    return this
-  }
-
-  // Pages are separate layout roots, not yoga children, so the generic insertNode/removeNode path
-  // doesn't apply. Keep `children` in sync and ask the host to reconcile pages by node identity.
-  append(...nodes: UINodeChild[]): this {
-    this.children.push(...nodes)
-    if (this._id !== 0) _creatorUI.command(this, "syncPages")
-    return this
-  }
-  insert(index: number, ...nodes: UINodeChild[]): this {
-    this.children.splice(index, 0, ...nodes)
-    if (this._id !== 0) _creatorUI.command(this, "syncPages")
-    return this
-  }
-  remove(...nodes: UINodeChild[]): this {
-    const set = new Set(nodes)
-    this.children = this.children.filter(c => !set.has(c as UINodeChild))
-    if (this._id !== 0) _creatorUI.command(this, "syncPages")
-    return this
-  }
-  setContent(nodes: UINodeChild | UINodeChild[] | ChildrenFn): this {
-    if (typeof nodes === "function") {
-      // Reactive pages: the base binding drives _reconcile, which calls our insert/remove above.
-      return super.setContent(nodes)
-    }
-    this.children = Array.isArray(nodes) ? [...nodes] : [nodes]
-    if (this._id !== 0) _creatorUI.command(this, "syncPages")
-    return this
-  }
-
-  // Replace one page in place, animated. The node travels via children[index] (the command channel
-  // carries only index + transition); the host reads it back and swaps the page, animating the swap
-  // when `index` is the visible page. Before mount it just seeds the initial content at that index.
-  replace(index: number, screen: UINodeChild, transition: ScreenHostTransition = "fade"): this {
-    if (index < 0 || index >= this.children.length) return this
-    this.children[index] = screen
-    if (this._id !== 0) _creatorUI.command(this, "replace", index, transition)
-    return this
-  }
-
-  // scrollDirection/swipeEnabled are host behavior, not layout — intercept them here so they never
-  // reach the layout engine, and forward live changes to the host. Everything else flows to the base
-  // style proxy unchanged (including property get/set via the forwarding Proxy below).
-  private _hostStyleProxy?: any
-  get style(): any {
-    if (this._hostStyleProxy) return this._hostStyleProxy
-    const base = super.style
-    const self = this
-    const apply = (s: any) => {
-      if (s && typeof s === "object") {
-        if ("scrollDirection" in s && typeof s.scrollDirection !== "function") {
-          self._dir = s.scrollDirection
-          delete s.scrollDirection
-          if (self._id !== 0) _creatorUI.command(self, "setDirection", self._dir)
-        }
-        if ("swipeEnabled" in s && typeof s.swipeEnabled !== "function") {
-          self._swipe = s.swipeEnabled
-          delete s.swipeEnabled
-          if (self._id !== 0) _creatorUI.command(self, "setSwipe", self._swipe)
-        }
-      }
-      return base(s)
-    }
-    this._hostStyleProxy = new Proxy(apply, {
-      apply: (_t, _thisArg, args) => apply(args[0]),
-      get: (_t, k) => (base as any)[k],
-      set: (_t, k, v) => { (base as any)[k] = v; return true },
-    })
-    return this._hostStyleProxy
-  }
-}
-
-function makeScreenHost(style: UIScreenHostStyle | null, children: UINodeChild[] | ChildrenFn): ScreenHostElement {
-  const dir = style?.scrollDirection
-  const swipe = style?.swipeEnabled
-  if (style) {
-    delete style.scrollDirection
-    delete style.swipeEnabled
-  }
-  const el = new ScreenHostElement("screenhost", style ?? {}, children)
-  if (dir !== undefined) el._dir = dir
-  if (swipe !== undefined) el._swipe = swipe
-  return el
-}
-
-// A screen is the only non-array, non-function, non-style argument the factory accepts.
-const isScreenArg = (v: any): boolean => v != null && typeof v === "object" && v.type === "screen"
-const asPages = (v: any): UINodeChild[] | ChildrenFn => (Array.isArray(v) || typeof v === "function") ? v : [v]
-
-export function UIScreenHost(): UIScreenHost
-export function UIScreenHost(screen: HostedScreen): UIScreenHost
-export function UIScreenHost(screens: HostedScreen[] | ScreensFn): UIScreenHost
-export function UIScreenHost(style: UIScreenHostStyle): UIScreenHost
-export function UIScreenHost(style: UIScreenHostStyle, screens: HostedScreen | HostedScreen[] | ScreensFn): UIScreenHost
-export function UIScreenHost(...args: [] | [HostedScreen | HostedScreen[] | ScreensFn | UIScreenHostStyle] | [UIScreenHostStyle, HostedScreen | HostedScreen[] | ScreensFn]): UIScreenHost {
-  if (args.length === 0) {
-    return makeScreenHost({}, [])
-  } else if (args.length === 1) {
-    if (Array.isArray(args[0]) || typeof args[0] === "function" || isScreenArg(args[0])) {
-      return makeScreenHost({}, asPages(args[0]))
-    } else {
-      return makeScreenHost(args[0] as UIScreenHostStyle, [])
-    }
-  } else {
-    return makeScreenHost(args[0] as UIScreenHostStyle, asPages(args[1]))
-  }
-}