lecodes-sdk 2.0.8 → 2.0.10

package/src/ui/transitions.ts

@@ -9,7 +9,7 @@
 
 import type { Easing } from "../animate/easings"
 import { DEFAULT_EASING, parseEasing, type EasingSpec } from "../animate/tween/easing"
-import { CLOCK_UI, DOM_UI, KIND_FLOAT, KIND_TRANSFORM, buildBlob, parseTransformList, transformLanes, warnOnce, type Keyframe, type Track, type TweenTarget } from "../animate/tween/spec"
+import { CLOCK_UI, DOM_UI, KIND_FLOAT, KIND_STRING, KIND_TRANSFORM, buildBlob, parseTransformList, transformLanes, warnOnce, type Keyframe, type Track, type TweenTarget } from "../animate/tween/spec"
 import type { Transition, TransitionName, TransitionPose, TransitionSpec } from "./presentable"
 
 /** Wire ids: a registered transition is > 0. */
@@ -120,7 +120,9 @@ export const mirrored = (s: TransitionSpec): TransitionSpec => ({
 
 /** One prop of a side: its keys in the order the side plays them (an incoming side ends at rest
  *  after them, an outgoing one starts at rest before them), and what rest is. */
-type Lane = { prop: string, kind: number, sig?: string, keys: number[][], rest: number[] }
+// A string lane (a widget's `overlayColor`): its keys are strings, its rest is CAPTURED at play —
+// the widget's own scrim color, which the transition cannot know.
+type Lane = { prop: string, kind: number, sig?: string, keys: number[][], rest: number[], strKeys?: string[] }
 type Side = { lanes: Lane[], atMs: number, durMs: number, easing: EasingSpec }
 
 const list = <T>(v: T | T[]): T[] => (Array.isArray(v) ? v : [v])
@@ -141,12 +143,16 @@ const transformLane = (value: string | string[]): Lane | null => {
 const floatLane = (prop: string, value: number | number[], rest: number): Lane =>
   ({ prop, kind: KIND_FLOAT, keys: list(value).map((v) => [v]), rest: [rest] })
 
+const stringLane = (prop: string, value: string | string[]): Lane =>
+  ({ prop, kind: KIND_STRING, keys: list(value).map(() => [0]), rest: [0], strKeys: list(value) })
+
 const sideOf = (pose: TransitionPose | undefined): Side | null => {
   if (!pose) return null
   const lanes: Lane[] = []
   if (pose.transform !== undefined) { const l = transformLane(pose.transform); if (l) lanes.push(l) }
   if (pose.opacity !== undefined) lanes.push(floatLane("opacity", pose.opacity, 1))
   if (pose.dim !== undefined) lanes.push(floatLane("dim", pose.dim, 0))
+  if (pose.overlayColor !== undefined) lanes.push(stringLane("overlayColor", pose.overlayColor))
   if (lanes.length === 0) return null
   return {
     lanes,
@@ -162,7 +168,7 @@ const sideOf = (pose: TransitionPose | undefined): Side | null => {
  *  the direction being the opposite one. No dim: nothing is over it. */
 const borrowed = (side: Side | null): Side | null => {
   if (!side) return null
-  const lanes = side.lanes.filter((l) => l.prop !== "dim").map((l) => {
+  const lanes = side.lanes.filter((l) => l.prop !== "dim" && l.strKeys === undefined).map((l) => {
     if (l.kind !== KIND_TRANSFORM) return { ...l, keys: l.keys.slice().reverse() }
     const sign: number[] = []
     for (const fn of l.sig!.split(",")) for (let i = transformLanes(fn); i > 0; i--) sign.push(fn.startsWith("translate") ? -1 : 1)
@@ -178,6 +184,12 @@ const tracksOf = (side: Side | null, role: number, incoming: boolean): Track[] =
   if (!side) return []
   const channel = { domain: DOM_UI, id: () => role + 1, value: () => null }
   return side.lanes.map((l) => {
+    if (l.strKeys !== undefined) {
+      // a string lane: the keys as strings, the rest captured at play (the node's own value)
+      const values: (string | null)[] = incoming ? [...l.strKeys, null] : [null, ...l.strKeys]
+      const keys: Keyframe[] = values.map((str, i) => ({ t: i / (values.length - 1), easing: side.easing, value: str === null ? undefined : { str } }))
+      return { target: roleTarget, prop: l.prop, channel, kind: l.kind, lanes: 1, atMs: side.atMs, durMs: side.durMs, commit: false, keys }
+    }
     // explicit keys at both ends: a captured one that fails to read would leave a screen in its pose
     const values = incoming ? [...l.keys, l.rest] : [l.rest, ...l.keys]
     const keys: Keyframe[] = values.map((lanes, i) => ({ t: i / (values.length - 1), easing: side.easing, value: { lanes } }))
@@ -186,15 +198,16 @@ const tracksOf = (side: Side | null, role: number, incoming: boolean): Track[] =
 }
 
 /** @internal The blob of a spec: `roles[i]` is the role of the blob's target `i`. Null = the spec
- *  moves nothing. */
-export const _transitionBlob = (spec: TransitionSpec): { data: Float32Array, strings: string[], roles: number[], flags: number } | null => {
+ *  moves nothing. `ownAlone`: the ALONE roles are the spec's own sides as written (a widget's pose:
+ *  it enters from `enter`, leaves to `exit`, nothing is borrowed from the other side). */
+export const _transitionBlob = (spec: TransitionSpec, ownAlone = false): { data: Float32Array, strings: string[], roles: number[], flags: number } | null => {
   const enter = sideOf(spec.enter), exit = sideOf(spec.exit)
   const enterOnTop = (spec.onTop ?? "enter") === "enter"
   const tracks = [
     ...tracksOf(enter, ROLE_ENTER, true),
     ...tracksOf(exit, ROLE_EXIT, false),
-    ...tracksOf(enterOnTop ? enter : borrowed(exit), ROLE_ENTER_ALONE, true),
-    ...tracksOf(enterOnTop ? borrowed(enter) : exit, ROLE_EXIT_ALONE, false),
+    ...tracksOf(ownAlone ? enter : enterOnTop ? enter : borrowed(exit), ROLE_ENTER_ALONE, true),
+    ...tracksOf(ownAlone ? exit : enterOnTop ? borrowed(enter) : exit, ROLE_EXIT_ALONE, false),
   ]
   if (tracks.length === 0) return null
   let durationMs = 0
@@ -242,8 +255,24 @@ export const _transitionBack = (t: Transition): number => {
   return e.back
 }
 
+/** @internal The wire id of a WIDGET's pose (docs/plans/widgets-plan.md decision 11): the pose it
+ *  enters from and leaves to, as one transition whose ALONE roles the runtime plays on the widget's
+ *  display flips. Registered once per distinct pose object; `null` = no pose (TRANSITION_NONE). */
+let poseIds = new WeakMap<TransitionPose, number>()
+export const _widgetPoseId = (pose: TransitionPose | null): number => {
+  if (!pose) return TRANSITION_NONE
+  let id = poseIds.get(pose)
+  if (id === undefined) {
+    const blob = _transitionBlob({ enter: pose, exit: pose }, true)
+    id = blob ? _creatorTree.defineTransition(blob.data, blob.strings, blob.roles, blob.flags) : TRANSITION_NONE
+    poseIds.set(pose, id)
+  }
+  return id
+}
+
 /** @internal Tests: a new fake runtime has no transition of the previous one. */
 export const _resetTransitions = (): void => {
   byName = new Map()
   bySpec = new WeakMap()
+  poseIds = new WeakMap()
 }

package/src/ui/tree.ts

@@ -45,6 +45,7 @@ export const TREE_EVENT_HOVER_ENTER = 32
 export const TREE_EVENT_HOVER_MOVE = 33
 export const TREE_EVENT_HOVER_END = 34
 export const TREE_EVENT_HOVER_CANCEL = 35
+export const TREE_EVENT_WIDGET_VISIBLE = 36
 
 // ---- setFlags(id, mask) ---------------------------------------------------------------------------
 export const TREE_FLAG_INTERACTIVE = 1 << 0
@@ -132,6 +133,8 @@ export interface TreeElement {
   _pinned?(): void
   _unpinned?(): void
   _emitBack?(): boolean
+  /** A widget: its resolved display flipped (a style write or the cascade) — `isShown` follows. */
+  _emitVisible?(shown: boolean): void
 }
 
 /** @internal A track handler (runtime/touch.ts TrackHandler), as the emitter reads it. */
@@ -285,6 +288,7 @@ const emit = (id: number, kind: number, a?: any, b?: any, c?: any, d?: any, e?:
       t?.onEnd?.({ clientX: a, clientY: b, deltaX: c, deltaY: d })
       return
     }
+    case TREE_EVENT_WIDGET_VISIBLE: pins.get(id)?._emitVisible?.(!!a); return
     case TREE_EVENT_HOVER_CANCEL: {
       const t = hoverTracker
       hoverTracker = null

package/src/version.ts

@@ -4,7 +4,7 @@
 // same manifest). Its MAJOR is the bundle ↔ runtime contract: a bundle's `// sdk:` header line
 // and a host's embedded version must agree on the major for the host to run the bundle; minor
 // and patch never gate anything (features are detected, never versioned).
-export const SDK_VERSION = "2.0.8"
+export const SDK_VERSION = "2.0.10"
 
 /** The major of a semver string, or null when it is not one. */
 export const sdkMajor = (version: string | null | undefined): number | null => {

package/tests/helpers/fakeTree.ts

@@ -9,6 +9,7 @@ import {
   TREE_EVENT_CLOSE, TREE_EVENT_DETACHED, TREE_EVENT_FREED, TREE_EVENT_OPEN, TREE_EVENT_ROUTER_CHANGE, TREE_EVENT_VLIST_SYNC,
 } from "../../src/ui/tree"
 import { _resetTransitions } from "../../src/ui/transitions"
+import { _resetOverlay } from "../../src/ui/UILayer"
 
 export type FakeNode = {
   id: number, type: string, parent: number, children: number[],
@@ -28,7 +29,9 @@ export class FakeTree {
   displaySize: [number, number] = [0, 0]
   current: Dest | null = null
   stack: Dest[] = []
-  widgets: number[] = []
+  /** The layers by destination key (`kind:id`; `255:0` = the app layer) and the widgets' poses. */
+  layers = new Map<string, number>()
+  poses = new Map<number, number>()
   freed: number[] = []
   tweens: { id: number, data: Float32Array, strings: string[], targets: number[] }[] = []
   tweenEvent: ((id: number, kind: number, index: number, ...lanes: number[]) => void) | null = null
@@ -207,8 +210,8 @@ export class FakeTree {
     else onReject(`no view ${viewId}`)
   }
   viewCallHandler: ((viewId: number, method: string, args: any[], res: (r?: unknown) => void, rej: (m: string) => void) => void) | null = null
-  showWidget = (id: number, ownerKind: number, ownerId: number): void => { this.rec("showWidget", id, ownerKind, ownerId); if (!this.widgets.includes(id)) this.widgets.push(id) }
-  hideWidget = (id: number): void => { this.rec("hideWidget", id); this.widgets = this.widgets.filter((w) => w !== id) }
+  setLayer = (kind: number, id: number, layer: number): void => { this.rec("setLayer", kind, id, layer); if (layer) this.layers.set(`${kind}:${id}`, layer); else this.layers.delete(`${kind}:${id}`) }
+  setWidgetPose = (id: number, transition: number): void => { this.rec("setWidgetPose", id, transition); this.poses.set(id, transition) }
 
   // ---- pager -----------------------------------------------------------------------------------------
   private pagerTop(p: FakeNode): number | null {
@@ -341,6 +344,7 @@ export const installFakeTree = (): FakeTree => {
   fake.emitter = FakeTree.primary ?? prev?.emitter ?? null
   if (prev?.tweenEvent) fake.tweenEvent = prev.tweenEvent   // registered once per world too
   _resetTransitions()   // …while a transition is registered per RUNTIME: the new fake has none
+  _resetOverlay()       // …and the app layer is a node of the previous fake
   ;(globalThis as any)._creatorTree = fake
   return fake
 }