lecodes-viewer 0.19.0

package/src/ui/createMeasureSystem.ts

@@ -0,0 +1,220 @@
+// The measure-time default text font. Themable (docs/ui-theme-plan.md system defaults): the
+// `fontFamily` theme key retargets it via setDefaultFontFamily — the DOM side follows through
+// the `.screen { font-family: var(--fontFamily) }` rule, this keeps MEASUREMENT in agreement.
+export let defaultFontFamily = "Roboto"
+export const setDefaultFontFamily = (family: string | null) => {
+  defaultFontFamily = family ? cssFontFamily(family) : "Roboto"
+}
+
+// The SDK spells the fixed-width system family "monospaced" (the iOS name); CSS spells it
+// "monospace", and an unknown keyword invalidates the whole font-family declaration. Every
+// other family — system keyword or registerFont name — passes through untouched.
+export const cssFontFamily = (family: string) => family === "monospaced" ? "monospace" : family
+
+export const createMeasureSystem = (getNode: (screenId: number, nodeId: number) => HTMLElement | null | undefined) => {
+  const tempArr = new ArrayBuffer(8);
+  const dataView = new DataView(tempArr)
+
+  const offscreenCanvas = new OffscreenCanvas(1000, 1000)
+  const ctx = offscreenCanvas.getContext("2d")!
+  
+  const measure = (screenId: number, nodeId: number, width: number, _widthType: number, height: number, _heightType: number) => {
+    const el = getNode(screenId, nodeId)
+    if (!el) {
+      return 0
+    }
+
+    // intrinsic size for image-like leaves.
+    // data-viewbox is the reliable "this is an SVG" marker — checked FIRST, for both
+    // <img> and masked <div>, because an svg <img> is also an HTMLImageElement and would
+    // otherwise fall into the raster branch and get the upscale clamp.
+    let intrinsicW = 0
+    let intrinsicH = 0
+    let allowUpscale = false
+    let isImageLike = false
+
+    // A sourceRect crop (atlas frame) is painted on a background-image <div>, so it is neither
+    // an <img> nor an svg — check it first. The intrinsic size is the frame (w/h, in texture
+    // px), not the whole atlas, otherwise Yoga would size the node to the entire spritesheet.
+    const sourceRect = (el as any)._sourceRect as [number, number, number, number] | undefined
+
+    if (sourceRect) {
+      intrinsicW = sourceRect[2]
+      intrinsicH = sourceRect[3]
+      isImageLike = true    // raster — keep the no-upscale clamp below
+      el.setAttribute("data-measured", "")
+    } else if (el.hasAttribute("data-viewbox")) {
+      // viewBox = "min-x min-y width height"
+      const vb = el.getAttribute("data-viewbox")!.split(/[\s,]+/).map(Number)
+      intrinsicW = vb[2]
+      intrinsicH = vb[3]
+      allowUpscale = true   // vector — scales without quality loss
+      isImageLike = true
+      el.setAttribute("data-measured", "")
+    } else if (el instanceof HTMLImageElement) {
+      intrinsicW = el.naturalWidth
+      intrinsicH = el.naturalHeight
+      isImageLike = true    // raster — keep the no-upscale clamp below
+      el.setAttribute("data-measured", "")
+    }
+
+    if (isImageLike) {
+      if (intrinsicW === 0 || intrinsicH === 0) {
+        dataView.setFloat32(4, 0, true)
+        dataView.setFloat32(0, 0, true)
+        return dataView.getBigUint64(0, true)
+      }
+
+      const fit = Math.min(width / intrinsicW, height / intrinsicH)
+      const k =
+        isNaN(width) && isNaN(height) ? 1 :
+        isNaN(width) ? height / intrinsicH :
+        isNaN(height) ? width / intrinsicW :
+        allowUpscale ? fit : Math.min(fit, 1)
+
+      dataView.setFloat32(4, intrinsicW * k, true)
+      dataView.setFloat32(0, intrinsicH * k, true)
+      return dataView.getBigUint64(0, true)
+    }
+
+    // text branch — also serves the editables (input/textarea), whose content lives in `.value`,
+    // not `.textContent`: an input measures as one intrinsic line, a textarea wraps its value so
+    // a field with no explicit height grows with its content (Yoga clamps via min/maxHeight).
+    ctx.font = `${el.style.fontWeight || 'normal'} ${(el.style.fontSize || "14px")} ${el.style.fontFamily || defaultFontFamily}`
+
+    // letter-spacing — ctx.letterSpacing is honored by measureText, so wrapText picks it up
+    // automatically. The ctx is reused across calls, so always reset it (even to 0).
+    const letterSpacing = el.style.letterSpacing
+    if (letterSpacing && letterSpacing !== "normal") {
+      ctx.letterSpacing = letterSpacing.endsWith("em")
+        ? `${parseFloat(letterSpacing) * (parseFloat(el.style.fontSize) || 14)}px`
+        : letterSpacing
+    } else {
+      ctx.letterSpacing = "0px"
+    }
+
+    let lineHeight
+    if (el.style.lineHeight.endsWith("em")) {
+      lineHeight = parseFloat(el.style.lineHeight) * (parseFloat(el.style.fontSize) || 14)
+    } else {
+      lineHeight = parseFloat(el.style.lineHeight) || (parseFloat(el.style.fontSize) || 14) * 1.2
+    }
+
+    if (el instanceof HTMLInputElement) {
+      dataView.setFloat32(4, Math.ceil(ctx.measureText(el.value).width), true)
+      dataView.setFloat32(0, Math.ceil(lineHeight), true)
+      return dataView.getBigUint64(0, true)
+    }
+
+    // When width is NaN/unconstrained (Undefined measure mode), Yoga is asking for the
+    // intrinsic width — measure against infinity so the text does not wrap (and does not
+    // shrink character-by-character, which is what happens when every NaN comparison is false).
+    const measureWidth = isNaN(width) ? Infinity : width
+    const text = el instanceof HTMLTextAreaElement ? el.value : el.textContent!!
+    const measured = wrapText(ctx, text, measureWidth)
+
+    // lineClamp: report the CLAMPED height, otherwise Yoga keeps the full wrapped size and the
+    // CSS clamp just leaves dead space under the ellipsis. Width has to be recomputed over the
+    // surviving lines only — the widest line is often one of the ones that got cut.
+    const clamp = (el as any)._lineClamp as number | undefined
+    let lineCount = measured.lines.length
+    let maxWidth = measured.maxWidth
+    if (clamp && clamp > 0 && lineCount > clamp) {
+      lineCount = clamp
+      maxWidth = 0
+      for (let i = 0; i < clamp; i++) {
+        maxWidth = Math.max(maxWidth, ctx.measureText(measured.lines[i]).width)
+      }
+    }
+
+    el.style.position = "absolute"
+
+    dataView.setFloat32(4, Math.ceil(maxWidth), true)
+    dataView.setFloat32(0, Math.ceil(lineCount * lineHeight), true)
+
+    return dataView.getBigUint64(0, true)
+  }
+
+  return { measure }
+}
+
+export const wrapText = (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, text: string, maxWidth: number,) => {
+  const resultLines: string[] = [];
+  let totalMaxWidth = 0;
+
+  // Обрабатываем каждую строку (учитывая явные переносы \n)
+  const lines = text.split('\n');
+
+  for (const line of lines) {
+    let current = line;
+
+    if (current.length === 0) {
+      resultLines.push(current);
+      continue
+    }
+    while (current) {
+      // Быстрая проверка: если вся строка помещается
+      if (ctx.measureText(current).width <= maxWidth) {
+        resultLines.push(current);
+        totalMaxWidth = Math.max(totalMaxWidth, ctx.measureText(current).width);
+        break;
+      }
+
+      let splitPosition = 0;
+      let lastSpaceIndex = -1;
+      let spaceIndex = 0;
+
+      // Ищем последний подходящий пробел для переноса
+      while ((spaceIndex = current.indexOf(' ', spaceIndex + 1)) !== -1) {
+        const segment = current.substring(0, spaceIndex);
+        if (ctx.measureText(segment).width > maxWidth) break;
+        lastSpaceIndex = spaceIndex;
+      }
+
+      // Если нашли подходящий пробел - используем его
+      if (lastSpaceIndex > 0) {
+        splitPosition = lastSpaceIndex;
+      } else {
+        // Стартуем с длины первого слова
+        let wordEnd = current.indexOf(' ');
+        if (wordEnd === -1) wordEnd = current.length;
+
+        const firstWord = current.substring(0, wordEnd);
+        // Если первое слово не помещается - разбиваем его
+        if (ctx.measureText(firstWord).width > maxWidth) {
+          for (let i = 1; i <= firstWord.length; i++) {
+            const segment = firstWord.substring(0, i);
+            if (ctx.measureText(segment).width > maxWidth) {
+              splitPosition = i - 1;
+              break;
+            }
+          }
+        } else {
+          // Ищем место разрыва после первого слова
+          for (let i = wordEnd + 1; i <= current.length; i++) {
+            const segment = current.substring(0, i);
+            if (ctx.measureText(segment).width > maxWidth) {
+              splitPosition = i - 1;
+              break;
+            }
+          }
+        }
+      }
+
+      // Защита от бесконечного цикла
+      if (splitPosition <= 0) splitPosition = 1;
+
+      const newLine = current.substring(0, splitPosition);
+      resultLines.push(newLine);
+      totalMaxWidth = Math.max(totalMaxWidth, ctx.measureText(newLine).width);
+
+      // Обновляем оставшуюся строку (пропускаем пробел при разбивке по пробелу)
+      current = current.substring(splitPosition + (lastSpaceIndex > 0 ? 1 : 0));
+    }
+  }
+
+  return {
+    lines: resultLines,
+    maxWidth: totalMaxWidth
+  };
+};

package/src/ui/createNodeElement.ts

@@ -0,0 +1,77 @@
+import { ImageSrc, isSvgSrc, svgSrcTint } from "../utils/svg"
+import { getVideoElement } from "../utils/videoNode"
+
+// Pure factory — no side effects beyond element creation.
+// For images: svg + tint → masked <div>, everything else → <img>.
+// Image source/mask configuration happens later in configureImage().
+export function createNodeElement(node: any): HTMLElement {
+  switch (node.type) {
+    case "image": {
+      // svg + tint, or a sourceRect crop, both render as a <div> (masked / background-image)
+      // rather than an <img>. The crop must be a <div> from the start: it can't be swapped from
+      // an <img> at mount because the element isn't attached to its parent yet. The tint can come
+      // from the style OR from the SvgSource itself (source-level tintColor).
+      if (isSvgSrc(node._src as ImageSrc) && (node._style?.tintColor || svgSrcTint(node._src as ImageSrc))) {
+        return document.createElement("div")
+      }
+      if (node._sourceRect) {
+        return document.createElement("div")
+      }
+      return document.createElement("img")
+    }
+
+    case "video":
+      // Reuse the VideoPlayer's own <video> element so playback control drives the UI directly.
+      // It is reconfigured (hidden styling cleared) in UIScreen via configureVideo.
+      return getVideoElement(node)
+
+    case "button": {
+      const button = document.createElement("button")
+      // A button with an onTouchStart drives its own gesture (ev.track): the touch stays with the
+      // app instead of turning into a native pan (touchDefaultsGuard). Plain buttons pan natively.
+      if (node.touchStartListeners?.length > 0) button.classList.add("interactive")
+      return button
+    }
+
+    case "screen": {
+      const screen = document.createElement("div")
+      screen.classList.add("screen")
+      if (node.scrollable) screen.classList.add("scrollable")
+      if (node.touchStartListeners?.length > 0) screen.classList.add("interactive")
+      return screen
+    }
+
+    case "scrollable": {
+      const el = document.createElement("div")
+      el.classList.add("scrollable")
+      return el
+    }
+
+    case "pager": {
+      const el = document.createElement("div")
+      el.classList.add("pager")
+      return el
+    }
+
+    case "vlist": {
+      const el = document.createElement("div")
+      el.classList.add("vlist")
+      return el
+    }
+
+    case "spacer": {
+      const el = document.createElement("div")
+      el.classList.add("spacer")
+      return el
+    }
+
+    case "input":
+      return document.createElement("input")
+
+    case "textarea":
+      return document.createElement("textarea")
+
+    default:
+      return document.createElement("div")
+  }
+}

package/src/ui/createPagerSystem.ts

@@ -0,0 +1,345 @@
+import type { UIScreen } from "./UIScreen"
+
+// UIPager — wire node type "pager" (docs/pager-component-plan.md): the system's ONE
+// screen-navigation element. Sibling tabs that swipe side to side, with a navigation STACK per
+// tab. On web the tab strip is CSS scroll-snap (one snap cell per tab, same mechanism as the
+// screen host); each tab's stack is a pile of absolutely-positioned page roots of which only the
+// top is shown. Stack transitions are instant — web wraps CSS scroll-snap with no custom
+// transitions (the iOS host is the animated reference).
+//
+// The pager element is a yoga leaf in its own screen; its pages are NOT yoga children — every
+// page is a full UIScreen, an independent layout root laid out to the pager's box.
+//
+// SDK ↔ host contract (no dedicated bridge methods):
+// - SDK → host: select/push/pop/popToRoot/replace arrive over the generic `_creatorUI.command`
+//   channel. The SDK mutates `children`/`_lens`/`_index` BEFORE sending, so the handler
+//   reconciles against the node's live state; the command name only picks the transition.
+// - host → SDK: a committed user swipe between tabs reports `jsNode._hostDidSelect(index)` — an
+//   idempotent no-op SDK-side when the logical index already matches (programmatic selects
+//   settle on the index the SDK already holds).
+// - Swipe arbitration: tab-paging is enabled only with >1 tab AND the current tab at its root
+//   (depth 1) — drilled in, the strip locks (overflow hidden), mirroring the iOS dataSource
+//   detach. There is no edge back-swipe on web, so `_hostDidPop` is never host-initiated here.
+// - Lifecycle: exactly one page in the whole pager is "open" — the current tab's top, while the
+//   pager's owning screen chain is active. Page `ol`/`cl` drive `UIPager.current` SDK-side and
+//   cascade into pagers/screen hosts nested inside pages.
+
+type Page = {
+  node: any            // the SDK screen node of this page
+  el: HTMLElement      // absolutely-positioned stack layer inside the tab cell
+  host: UIScreen       // the page's layout root
+}
+
+type Tab = {
+  el: HTMLElement      // scroll-snap cell; sized to the pager box by CSS
+  pages: Page[]        // stack, root → top; only the top is visible
+}
+
+type PagerInstance = {
+  nodeId: number
+  el: HTMLElement
+  jsNode: any
+  screen: UIScreen     // the screen the pager element lives in (for reference)
+  tabs: Tab[]
+  width: number
+  height: number
+  mounted: boolean     // did the first layout run (initial scroll applied)?
+  laidOut: boolean
+  active: boolean      // is the pager's own screen chain active? (gates page onOpen/onClose)
+  currentTab: number   // settled tab index
+  targetTab: number    // tab we intend to be on (select target / settled) — realign on resize
+  openPage: Page | null // page whose onOpen fired without a matching onClose
+  settleTimer: ReturnType<typeof setTimeout> | null
+  setActive(active: boolean): void
+}
+
+export type PagerDeps = {
+  // Create a registered, un-mounted layout root for a page's screen node (createUI's `newScreen`).
+  newScreen: (node: any) => UIScreen
+}
+
+const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v))
+
+export const createPagerSystem = (_module: any, deps: PagerDeps) => {
+
+  const instances = new Map<number, PagerInstance>()   // pager yogaId → instance
+
+  // The flat tab-major `children` partitioned by `_lens` into per-tab stacks (root → top).
+  // Falls back to one-screen-per-tab if the partition doesn't cover the children.
+  const segments = (jsNode: any): any[][] => {
+    const nodes: any[] = (jsNode.children ?? []).filter(Boolean)
+    const lens: number[] = Array.isArray(jsNode._lens) ? jsNode._lens : []
+    const total = lens.reduce((a, b) => a + b, 0)
+    if (total !== nodes.length || lens.some(l => l < 1)) return nodes.map(n => [n])
+    const result: any[][] = []
+    let offset = 0
+    for (const len of lens) {
+      result.push(nodes.slice(offset, offset + len))
+      offset += len
+    }
+    return result
+  }
+
+  const clampedIndex = (inst: PagerInstance) =>
+    clamp(inst.jsNode._index ?? 0, 0, Math.max(0, inst.tabs.length - 1))
+
+  const buildPage = (inst: PagerInstance, node: any): Page => {
+    const el = document.createElement("div")
+    el.className = "pager-page"
+    // The page root fills its layer (= the pager box) via the `.screen` class (100%/absolute).
+    const host = deps.newScreen(node)
+    el.appendChild(host.root)
+    if (inst.width > 0 && inst.height > 0) host.applyLayout(inst.width, inst.height)
+    return { node, el, host }
+  }
+
+  const fireOpen = (p: Page) => {
+    for (const cb of p.node.ol ?? []) cb()
+  }
+  const fireClose = (p: Page) => {
+    for (const cb of p.node.cl ?? []) cb()
+  }
+  // A page screen may itself contain pagers — chain activation down through it.
+  const cascade = (p: Page, active: boolean) => {
+    ;(p.host as any).setPagersActive?.(active)
+  }
+
+  // The current tab's top page is open iff the whole owner chain is active. Exchange `ol`/`cl`
+  // when that changes (compared by page identity, so tab switches AND stack changes both land here).
+  const refreshLifecycle = (inst: PagerInstance) => {
+    const target = inst.active && inst.laidOut
+      ? inst.tabs[inst.currentTab]?.pages[inst.tabs[inst.currentTab].pages.length - 1] ?? null
+      : null
+    if (inst.openPage === target) return
+    if (inst.openPage) { fireClose(inst.openPage); cascade(inst.openPage, false) }
+    inst.openPage = target
+    if (target) { fireOpen(target); cascade(target, true) }
+  }
+
+  // Tab-paging is available only while there are neighbors to reach AND the current tab sits at
+  // its root — drilled in (depth > 1), the strip locks (the iOS dataSource-detach analog).
+  const updatePagingLocked = (inst: PagerInstance) => {
+    const depth = inst.tabs[inst.currentTab]?.pages.length ?? 0
+    inst.el.classList.toggle("pager_locked", inst.tabs.length <= 1 || depth > 1)
+  }
+
+  // Only the stack top is displayed; the layers below keep their DOM (and state) hidden.
+  const updateStackVisibility = (tab: Tab) => {
+    for (let i = 0; i < tab.pages.length; i++) {
+      tab.pages[i].el.classList.toggle("pager-page_hidden", i !== tab.pages.length - 1)
+    }
+  }
+
+  const scrollToTab = (inst: PagerInstance, index: number, animated: boolean) => {
+    const i = clamp(index, 0, Math.max(0, inst.tabs.length - 1))
+    inst.el.scrollTo({ left: i * inst.width, behavior: animated ? "smooth" : "auto" })
+  }
+
+  const scrollOf = (inst: PagerInstance) => {
+    const size = inst.el.clientWidth
+    return size > 0 ? inst.el.scrollLeft / size : 0
+  }
+
+  const onSettle = (inst: PagerInstance, index: number) => {
+    const i = clamp(index, 0, Math.max(0, inst.tabs.length - 1))
+    inst.targetTab = i   // a user swipe is also an intent change
+    if (i === inst.currentTab) return
+    inst.currentTab = i
+    // Host-driven tab change: sync the SDK's logical index + onSelect (idempotent there).
+    inst.jsNode._hostDidSelect?.(i)
+    refreshLifecycle(inst)
+    updatePagingLocked(inst)
+  }
+
+  const onScroll = (inst: PagerInstance) => {
+    if (inst.settleTimer !== null) clearTimeout(inst.settleTimer)
+    const pos = scrollOf(inst)
+    const rounded = Math.round(pos)
+    // Already snapped to a tab → settle now; otherwise wait for the scroll to come to rest.
+    if (Math.abs(pos - rounded) < 0.005) {
+      inst.settleTimer = null
+      onSettle(inst, rounded)
+    } else {
+      inst.settleTimer = setTimeout(() => {
+        inst.settleTimer = null
+        onSettle(inst, Math.round(scrollOf(inst)))
+      }, 80)
+    }
+  }
+
+  // ---- reconcile every tab's stack against the node's live wire state (children + _lens) ----
+  // Pages are reused by node identity; the SDK mutated the state before sending the command, so
+  // this one pass serves push / pop / popToRoot / replace alike (transitions are instant on web).
+  const reconcile = (inst: PagerInstance) => {
+    const segs = segments(inst.jsNode)
+    const byNode = new Map<any, Page>()
+    for (const tab of inst.tabs) for (const p of tab.pages) byNode.set(p.node, p)
+
+    // Grow/shrink the tab cells to the new segmentation: `content` (setContent & co.) can change
+    // the tab count, stack commands never do. Pages of a dropped cell stay in `byNode`, so one
+    // that moved into a surviving tab is reused and the rest are torn down by the sweep below.
+    while (inst.tabs.length < segs.length) {
+      const tabEl = document.createElement("div")
+      tabEl.className = "pager-tab"
+      inst.el.appendChild(tabEl)
+      inst.tabs.push({ el: tabEl, pages: [] })
+    }
+    while (inst.tabs.length > segs.length) inst.tabs.pop()!.el.remove()
+    const maxTab = Math.max(0, inst.tabs.length - 1)
+    inst.currentTab = Math.min(inst.currentTab, maxTab)
+    inst.targetTab = Math.min(inst.targetTab, maxTab)
+
+    const seen = new Set<Page>()
+    for (let t = 0; t < inst.tabs.length; t++) {
+      const tab = inst.tabs[t]
+      const target = segs[t] ?? []
+      const next: Page[] = []
+      for (const node of target) {
+        let p = byNode.get(node)
+        if (!p) p = buildPage(inst, node)
+        seen.add(p)
+        next.push(p)
+        tab.el.appendChild(p.el)   // appendChild moves an existing layer into stack order
+      }
+      tab.pages = next
+      updateStackVisibility(tab)
+    }
+
+    // tear down pages that left every stack (popped / replaced away)
+    for (const p of byNode.values()) {
+      if (seen.has(p)) continue
+      // A removed open page's onClose must fire while its tree is alive — refreshLifecycle below
+      // only sees the survivors. Nested pagers/hosts close via host.remove().
+      if (p === inst.openPage) { fireClose(p); cascade(p, false); inst.openPage = null }
+      p.host.remove()
+      p.el.remove()
+    }
+
+    refreshLifecycle(inst)
+    updatePagingLocked(inst)
+  }
+
+  // ---- called from UIScreen.addNodeRecursive when node.type === "pager" ----
+  const register = (screen: UIScreen, jsNode: any, el: HTMLElement, yogaId: number) => {
+    const inst: PagerInstance = {
+      nodeId: yogaId, el, jsNode, screen,
+      tabs: [],
+      width: 0, height: 0,
+      mounted: false, laidOut: false, active: false,
+      currentTab: 0, targetTab: 0,
+      openPage: null,
+      settleTimer: null,
+      setActive(active: boolean) {
+        if (this.active === active) return
+        this.active = active
+        refreshLifecycle(this)
+      },
+    }
+    instances.set(yogaId, inst)
+
+    for (const seg of segments(jsNode)) {
+      const tabEl = document.createElement("div")
+      tabEl.className = "pager-tab"
+      const tab: Tab = { el: tabEl, pages: [] }
+      for (const node of seg) {
+        const page = buildPage(inst, node)
+        tab.pages.push(page)
+        tabEl.appendChild(page.el)
+      }
+      updateStackVisibility(tab)
+      inst.tabs.push(tab)
+      el.appendChild(tabEl)
+    }
+
+    inst.currentTab = clampedIndex(inst)
+    inst.targetTab = inst.currentTab
+    updatePagingLocked(inst)
+
+    el.addEventListener("scroll", () => onScroll(inst))
+  }
+
+  // ---- called from UIScreen.updateSizes for the pager element (after its box size is set) ----
+  const updateLayout = (yogaId: number) => {
+    const inst = instances.get(yogaId)
+    if (!inst) return
+    const w = parseFloat(inst.el.style.width) || inst.el.clientWidth
+    const h = parseFloat(inst.el.style.height) || inst.el.clientHeight
+    if (w <= 0 || h <= 0) return
+
+    const sizeChanged = w !== inst.width || h !== inst.height
+    inst.width = w
+    inst.height = h
+    for (const tab of inst.tabs) {
+      for (const p of tab.pages) p.host.applyLayout(w, h)   // idempotent when the size is unchanged
+    }
+
+    if (!inst.mounted) {
+      inst.mounted = true
+      inst.currentTab = clampedIndex(inst)
+      inst.targetTab = inst.currentTab
+      scrollToTab(inst, inst.currentTab, false)
+    } else if (sizeChanged) {
+      // Realign ONLY on an actual resize, and to the intended target tab — NOT on every recalc
+      // (updateLayout runs on every recalc of the owning screen, and re-scrolling then would
+      // clobber an in-flight select whose smooth scroll hasn't settled).
+      scrollToTab(inst, inst.targetTab, false)
+    }
+    inst.laidOut = true
+    refreshLifecycle(inst)
+    updatePagingLocked(inst)
+  }
+
+  // ---- _creatorUI.command dispatch for pager nodes ----
+  const command = (jsNode: any, name: string, ...args: any[]) => {
+    const inst = instances.get(jsNode._id)
+    if (!inst) return
+    switch (name) {
+      case "select": {
+        // Programmatic tab switch — instant unless the SDK asked for the slide (select(i, true)).
+        // Never user-cancellable, so state syncs immediately; an animated scroll settles on the
+        // index the SDK already holds (no _hostDidSelect echo).
+        const i = clampedIndex(inst)
+        inst.targetTab = i
+        if (i !== inst.currentTab) {
+          inst.currentTab = i
+          refreshLifecycle(inst)
+          updatePagingLocked(inst)
+        }
+        if (inst.width > 0) scrollToTab(inst, i, args[0] === true && inst.laidOut)
+        break
+      }
+      case "push":
+      case "pop":
+      case "popToRoot":
+      case "replace":
+        reconcile(inst)
+        break
+      // The pages themselves changed (setContent / append / insert / remove): same reconcile,
+      // but the tab count may have moved, so re-land the strip on the (clamped) selected tab.
+      case "content":
+        reconcile(inst)
+        if (inst.width > 0) scrollToTab(inst, inst.targetTab, false)
+        break
+    }
+  }
+
+  const unregister = (yogaId: number) => {
+    const inst = instances.get(yogaId)
+    if (!inst) return
+    if (inst.settleTimer !== null) clearTimeout(inst.settleTimer)
+    for (const tab of inst.tabs) {
+      for (const p of tab.pages) {
+        p.host.remove()
+        p.el.remove()
+      }
+      tab.el.remove()
+    }
+    inst.tabs = []
+    inst.openPage = null
+    instances.delete(yogaId)
+  }
+
+  return { register, updateLayout, unregister, command, instances }
+}
+
+export type PagerSystem = ReturnType<typeof createPagerSystem>

package/src/ui/createTouchSystem.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/ui/createTouchSystem"