lecodes-cli 0.9.0 → 0.9.2

package/package.json

@@ -1,42 +1,38 @@
 {
   "name": "lecodes-cli",
-  "version": "0.9.0",
-  "description": "Clone, edit and push LeCodes projects from your machine.",
-  "type": "module",
-  "license": "MIT",
-  "keywords": [
-    "lecodes",
-    "cli"
-  ],
+  "version": "0.9.2",
+  "dependencies": {
+    "@letary/chisel": "^0.5.1"
+  },
+  "devDependencies": {
+    "lecodes-design": "workspace:*",
+    "lecodes-renderer": "workspace:*",
+    "qrcode-terminal": "^0.12.0",
+    "lecodes-3d-editor": "workspace:*",
+    "sdk": "workspace:*"
+  },
+  "peerDependencies": {
+    "lecodes-design": "^0.3.2",
+    "lecodes-renderer": "^0.7.1",
+    "lecodes-3d-editor": "^0.1.0"
+  },
   "bin": {
     "lecodes": "dist/index.js"
   },
+  "description": "Clone, edit and push LeCodes projects from your machine.",
+  "engines": {
+    "node": ">=18"
+  },
   "files": [
     "dist",
     "runtime",
     "README.md"
   ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "icon": "bun scripts/make-icon.ts",
-    "vendor-runtime": "bun scripts/vendor-runtime.ts",
-    "sync-peers": "bun scripts/sync-peer-versions.ts",
-    "build": "bun scripts/vendor-runtime.ts && bun build src/index.ts --target=node --outfile dist/index.js --external @letary/chisel --external lecodes-renderer --external lecodes-design --external lecodes-3d-editor --banner=\"#!/usr/bin/env node\"",
-    "build:bin": "bun scripts/build-bin.ts",
-    "typecheck": "tsc --noEmit",
-    "dev": "bun run src/index.ts",
-    "prepublishOnly": "bun run sync-peers && bun run build"
-  },
-  "dependencies": {
-    "@letary/chisel": "^0.4.2"
-  },
-  "peerDependencies": {
-    "lecodes-design": "^0.3.2",
-    "lecodes-renderer": "^0.7.0",
-    "lecodes-3d-editor": "^0.1.0"
-  },
+  "keywords": [
+    "lecodes",
+    "cli"
+  ],
+  "license": "MIT",
   "peerDependenciesMeta": {
     "lecodes-design": {
       "optional": true
@@ -48,11 +44,15 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "lecodes-design": "workspace:*",
-    "lecodes-renderer": "workspace:*",
-    "qrcode-terminal": "^0.12.0",
-    "lecodes-3d-editor": "workspace:*",
-    "sdk": "workspace:*"
-  }
+  "scripts": {
+    "icon": "bun scripts/make-icon.ts",
+    "vendor-runtime": "bun scripts/vendor-runtime.ts",
+    "sync-peers": "bun scripts/sync-peer-versions.ts",
+    "build": "bun scripts/vendor-runtime.ts && bun build src/index.ts --target=node --outfile dist/index.js --external @letary/chisel --external lecodes-renderer --external lecodes-design --external lecodes-3d-editor --banner=\"#!/usr/bin/env node\"",
+    "build:bin": "bun scripts/build-bin.ts",
+    "typecheck": "tsc --noEmit",
+    "dev": "bun run src/index.ts",
+    "prepublishOnly": "bun run sync-peers && bun run build"
+  },
+  "type": "module"
 }

package/runtime/sdk/inject.ts

@@ -65,6 +65,7 @@ export {
   UIPager, type UIPagerStyle,
   UIWidget, type UIWidgetStyle,
   UIModal, type UIModalStyle,
+  UIBottomSheet, type UIBottomSheetStyle,
   UIPopover, type UIPopoverStyle,
   UISpacer, type UISpacerStyle,
   UIVirtualizedList,

package/runtime/sdk/ui/UI.ts

@@ -11,6 +11,7 @@ export { UIInput, UITextArea, type UIInputStyle } from './UIInput'
 
 export { UIWidget, type UIWidgetStyle } from './UIWidget'
 export { UIModal, type UIModalStyle } from './UIModal'
+export { UIBottomSheet, type UIBottomSheetStyle } from './UIBottomSheet'
 export { UIPopover, type UIPopoverStyle, type UIPopoverAnchor } from './UIPopover'
 
 export { UIRow, UIColumn, UIBox, type UIContainerStyle } from './UIContainer'

package/runtime/sdk/ui/UIBottomSheet.ts

@@ -0,0 +1,149 @@
+import { ModalElement, type UIModalStyle } from "./UIModal"
+import type { UIWidget } from "./UIWidget"
+import type { ChildrenFn, UINodeChild } from "./UINode"
+
+export type UIBottomSheetStyle = UIModalStyle
+
+const SHEET_ANIM_MS = 250
+
+/**
+ * A bottom sheet: a `UIWidget` pinned to the bottom edge. By default it is **content-sized** —
+ * as tall as what's inside (capped at the screen), one position, drag down to dismiss (the
+ * action-sheet shape). Call `detents()` for the multi-position map-app model instead: snap
+ * positions the user drags between on native hosts. Ships as a widget node on the wire (no new
+ * node type — docs/bottom-sheet-plan.md): hosts without sheet support show a static bottom panel.
+ *
+ * With detents, content lays out at the HIGHEST detent's size; lower detents show the top
+ * slice. The scrim, `onOpen`/`onClose`, back-button and scrim-tap dismissal all come from the
+ * modal machinery.
+ *
+ * ```ts
+ * const actions = UIBottomSheet({ bgColor: "#1c1c1e", borderRadius: 16 }, [rows])   // content-sized
+ *
+ * const mapSheet = UIBottomSheet({ bgColor: "#1c1c1e", borderRadius: 16 }, [results])
+ *   .detents([0.3, 0.6, 1])
+ *   .onDetentChange(i => map.setPadding(...))
+ * ```
+ */
+export interface UIBottomSheet extends UIWidget {
+  /** Snap positions as fractions of screen height, ascending. Also sizes the sheet: its box is
+   *  the last (highest) detent; set this before `show()`. Without a `detents()` call the sheet
+   *  is CONTENT-SIZED instead — one position, as tall as its children (up to the screen). */
+  detents(list: number[]): this,
+  /** Snap to a detent (animated). Clamped to the detents range; fires `onDetentChange`. */
+  setDetent(index: number): void,
+  /** Current detent index. */
+  readonly detent: number,
+  /** Fires on every settle: a finger snap on native hosts, or a `setDetent()` call. */
+  onDetentChange(callback: (index: number) => void): this,
+
+  /** Mount and slide in to the current detent. No-op while already open. */
+  show(): void,
+  /** Slide out, fade the scrim, then unmount. No-op while closed. */
+  hide(): void,
+  /** True from `show()` until `hide()` starts. */
+  readonly isOpen: boolean,
+
+  /** Called when `show()` mounts the sheet. */
+  onOpen(callback: () => void): this,
+  /** Called when the sheet starts closing — scrim tap, back button, drag-dismiss, or `hide()`. */
+  onClose(callback: () => void): this,
+  /** `dismissible(false)`: scrim taps, the back button and dragging below the lowest detent no
+   *  longer close the sheet (a drag collapses to the lowest detent instead). Default `true`. */
+  dismissible(enabled: boolean): this,
+
+  append(...nodes: UINodeChild[]): this
+  insert(index: number, ...nodes: UINodeChild[]): this
+  remove(...nodes: UINodeChild[]): this
+}
+
+export class BottomSheetElement extends ModalElement {
+  _detents: number[] = [1]
+  _detent = 0
+  /** Host-facing (the `sl`/`otl` contract): hosts read `dtl` at mount and call it with the
+   *  settled detent index for GESTURE settles only — programmatic `setDetent` fires JS-side.
+   *  `-1` = dragged below the lowest detent while dismissible. */
+  readonly dtl: any[] = []
+  readonly _detentListeners: ((index: number) => void)[] = []
+
+  constructor(style: UIBottomSheetStyle, children: UINodeChild[] | ChildrenFn) {
+    // No default height: an absolute node with only bottom set is CONTENT-sized by yoga. A
+    // single detent makes the geometry height-independent on every host (shown = offset 0,
+    // hidden = own height), so content mode needs no host support beyond the detents path.
+    super({ left: 0, right: 0, bottom: 0, maxHeight: "100%", sheetDetents: "1", ...style } as UIModalStyle, children)
+    // The inherited show/hide pose animates ONLY the scrim: sheet geometry rides the
+    // sheetDetent style key, never the pose system.
+    this._transition = { duration: SHEET_ANIM_MS }
+    this.dtl.push((index: number) => {
+      if (index < 0) { this.hide(); return }
+      this._detent = index
+      for (const callback of this._detentListeners) callback(index)
+    })
+  }
+
+  detents(list: number[]): this {
+    const sorted = [...list].filter(d => d > 0).sort((a, b) => a - b)
+    if (sorted.length === 0) return this
+    this._detents = sorted
+    if (this._detent >= sorted.length) this._detent = sorted.length - 1
+    this.style({
+      height: `${sorted[sorted.length - 1] * 100}%`,
+      sheetDetents: sorted.join(","),
+    } as UIBottomSheetStyle)
+    return this
+  }
+
+  get detent(): number {
+    return this._detent
+  }
+
+  setDetent(index: number): void {
+    const clamped = Math.max(0, Math.min(Math.floor(index), this._detents.length - 1))
+    this._detent = clamped
+    if (!this._open) return                     // applied by the next show()
+    this.style({ sheetDetent: clamped } as UIBottomSheetStyle)
+    for (const callback of this._detentListeners) callback(clamped)
+  }
+
+  onDetentChange(callback: (index: number) => void): this {
+    this._detentListeners.push(callback)
+    return this
+  }
+
+  show(): void {
+    if (this._open) return
+    // Before the mount, so the built node carries the target and hosts play the entrance to it.
+    this.style({ sheetDetent: this._detent } as UIBottomSheetStyle)
+    super.show()
+  }
+
+  hide(): void {
+    if (!this._open) return
+    this.style({ sheetDetent: -1 } as UIBottomSheetStyle)   // hosts slide out; unmount follows
+    super.hide()
+  }
+
+  dismissible(enabled: boolean): this {
+    super.dismissible(enabled)
+    this.style({ sheetDismissible: enabled ? 1 : 0 } as UIBottomSheetStyle)
+    return this
+  }
+}
+
+export function UIBottomSheet(): UIBottomSheet;
+export function UIBottomSheet(children: UINodeChild[] | ChildrenFn): UIBottomSheet;
+export function UIBottomSheet(style: UIBottomSheetStyle): UIBottomSheet;
+export function UIBottomSheet(style: UIBottomSheetStyle, children: UINodeChild[] | ChildrenFn): UIBottomSheet;
+export function UIBottomSheet(...args: [] | [UINodeChild[] | ChildrenFn | UIBottomSheetStyle] | [UIBottomSheetStyle, children: UINodeChild[] | ChildrenFn]): UIBottomSheet {
+  if (args.length === 0) {
+    return new BottomSheetElement({}, [])
+  } else if (args.length === 1) {
+    if (Array.isArray(args[0]) || typeof args[0] === "function") {
+      return new BottomSheetElement({}, args[0])
+    } else {
+      return new BottomSheetElement(args[0], [])
+    }
+  } else {
+    return new BottomSheetElement(args[0], args[1])
+  }
+}

package/runtime/sdk/ui/UIInput.ts

@@ -6,8 +6,14 @@ type InputStyle = {
   /**
    * 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`).
+   *
+   * `date` / `time` are PICKER kinds, not keyboards: the host opens its native picker in the
+   * keyboard slot (iOS wheels / browser calendar) and free typing is disabled. `value` is always
+   * canonical — `YYYY-MM-DD` for `date`, `HH:MM` (24h) for `time` — while the field displays a
+   * localized string; set/compare values in the canonical form only.
    */
-  type?: "text" | "password" | "search" | "phone" | "email" | "number" | "decimal" | "url",
+  type?: "text" | "password" | "search" | "phone" | "email" | "number" | "decimal" | "url"
+    | "date" | "time",
   /**
    * 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
@@ -16,6 +22,15 @@ type InputStyle = {
    * reflow is worse than overlap.
    */
   keyboardShrink?: boolean,
+  /**
+   * Whether a tap on a non-interactive area dismisses the keyboard while THIS input is focused
+   * (like `keyboardShrink`, the policy of the focused input). `true` (default): tapping dead
+   * space blurs — but a tap on a button or another input NEVER dismisses; the control acts and
+   * focus stays. `false`: taps never dismiss — the chat-composer policy. `blur()`, the return
+   * key (per `enterKey`), and the platform's own gestures (iOS drag-down over the keyboard)
+   * still work in both modes. Scrolling never dismisses the keyboard on any setting.
+   */
+  keyboardDismiss?: boolean,
   /** Hard cap on the text length — enforced by the host while typing/pasting. */
   maxLength?: number,
   /** Auto-capitalization hint; omitted = platform default. */
@@ -148,6 +163,14 @@ export function UIInput(style?: UIInputStyle): UIInput {
   return new InputElement("input", { minHeight: "1.2em", ...style })
 }
 
+/**
+ * Multi-line text field. Enter is a newline (submit lives on UIInput / your own button).
+ *
+ * Auto-grow: with no explicit `height` the field measures its own content and grows line by
+ * line — clamp the range with `minHeight` / `maxHeight` (past `maxHeight` the text scrolls
+ * inside). A fixed `height` opts out and scrolls internally from the start. Chat composers are
+ * the canonical use: a bare textarea in a padded pill, `maxHeight` at ~5 lines.
+ */
 export function UITextArea(): UITextArea;
 export function UITextArea(style: UIInputStyle): UITextArea;
 export function UITextArea(style?: UIInputStyle): UITextArea {

package/runtime/sdk/ui/UIScrollable.ts

@@ -2,7 +2,15 @@ import type { UIContainerStyle } from "./UIContainer"
 import { 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).
-export type ScrollStyle = { showScrollbar?: boolean, overscrollMode?: "none" | "absorb" | "default", refreshControlColor?: Color }
+// keyboardDismissMode: how a scroll gesture in THIS scrollable dismisses the keyboard.
+// "interactive" (default) — dragging over the keyboard slides it away (chat composer feel);
+// "scroll" — any drag dismisses the moment it starts (search-results feel);
+// "none" — scrolling never dismisses (tap-outside policy still applies).
+// snap: paging — when the drag ends, rest on a direct child's boundary along the scroll axis
+// (a carousel/pager is a horizontal scrollable of full-width children + snap:"start"). The value
+// picks where the child sits in the viewport; "none" (default) is free scrolling. Snap targets
+// are the children themselves, so item widths can differ (card-carousel-with-peek).
+export type ScrollStyle = { showScrollbar?: boolean, overscrollMode?: "none" | "absorb" | "default", refreshControlColor?: Color, keyboardDismissMode?: "interactive" | "scroll" | "none", snap?: "none" | "start" | "center" | "end" }
 
 export type UIScrollableStyle = UIContainerStyle & ScrollStyle & { scrollDirection?: "horizontal" | "vertical" }
 

package/runtime/sdk/ui/UIVirtualizedList.ts

@@ -80,7 +80,10 @@ export class VListElement<T> extends Element<"vlist"> implements UIVirtualizedLi
     private estimate: (item: T) => number
 
     constructor(config: VListConfig<T>) {
-        super("vlist", {})
+        // flexShrink: 1 default (SDK-owned, same as UIScrollable): an explicit height/flexBasis
+        // larger than the available space shrinks to fit instead of overflowing. The vlist's own
+        // yoga basis is 0 (items live in detached roots), so this is inert until a size is set.
+        super("vlist", { flexShrink: 1 })
         this.keyOf = config.keyOf
         this.renderItem = config.render
         this.estimate = typeof config.estimatedHeight === "function"

package/runtime/sdk/ui/UIWidget.ts

@@ -20,7 +20,10 @@ export interface UIWidget {
    * Attach this widget to a destination (a `Scene`, a `UIScreen`, …): the widget lives on that
    * page's layer — it shows/hides with the page and rides its transition, and a screen pushed
    * on top covers it (a scene HUD behaves like part of the scene). Sticky until `attachTo(null)`
-   * (= back to a global overlay). Set it while the widget is hidden.
+   * (= back to a global overlay). Set it while the widget is hidden. The widget is always its own
+   * overlay root mounted into the owner's page view — it never becomes a child of the owner, so it
+   * stays topmost and its updates never trigger the owner's relayout. Works with a `UIScreen` that
+   * is a page inside a `UIPager`: the widget mounts into that tab and rides its swipe.
    */
   attachTo(owner: Presentable | null): this,
 
@@ -66,7 +69,10 @@ export class WidgetElement extends ContainerElement<"widget"> {
     return this
   }
   show(): void {
-    // Global overlay unless explicitly attached via attachTo(owner).
+    // A widget is always its OWN overlay root (a separate Yoga tree mounted above the owner's
+    // content) — never a child of the owner, so it stays topmost, its updates never relayout the
+    // owner, and it doesn't pollute the owner's children. `attachTo(owner)` just tells the host
+    // which page view to mount that root into; ownerless widgets are global overlays.
     if (this._owner && _navSupported()) {
       _creatorUI.showWidget(this, _descOf(this._owner))
     } else {