@trendr/core 0.1.0 → 0.2.1

package/src/renderer.js

@@ -1,29 +1,45 @@
-import { createBuffer, clearBuffer, fillRect, writeText, dimBuffer } from './buffer.js'
+import { createBuffer, clearBuffer, fillRect, writeText, dimBuffer, blitRect } from './buffer.js'
 import { diff } from './diff.js'
-import { computeLayout } from './layout.js'
+import { computeLayout, resolveBorderEdges } from './layout.js'
 import { Fragment } from './element.js'
 import { createScheduler } from './scheduler.js'
 import { createInputHandler } from './input.js'
-import { setSchedulerHook, setHookRegistrar, createScope, disposeScope, onCleanup } from './signal.js'
+import { setSchedulerHook, setHookRegistrar, createScope, disposeScope, onCleanup, startRenderTracking, stopRenderTracking } from './signal.js'
 import { wordWrap, measureText, sliceVisible } from './wrap.js'
 import * as ansi from './ansi.js'
 
 let activeContext = null
 let overlays = []
+let lastFrameStats = { changed: 0, total: 0, bytes: 0, fps: 0 }
+let frameTimeWindow = []
+let lastFrameTimestamp = 0
 
 export function getContext() {
   return activeContext
 }
 
+const DEFAULT_CURSOR = { blink: false, rate: 530, style: 'block' }
 const DEFAULT_THEME = { accent: 'cyan' }
 
 export function getTheme() {
   return activeContext?.theme ?? DEFAULT_THEME
 }
 
+export function getCursor(propCursor) {
+  const themeCursor = activeContext?.theme?.cursor
+  if (!propCursor && !themeCursor) return DEFAULT_CURSOR
+  if (propCursor === true) return { ...DEFAULT_CURSOR, blink: true, ...themeCursor }
+  return { ...DEFAULT_CURSOR, ...themeCursor, ...propCursor }
+}
+
+export function getFrameStats() {
+  return lastFrameStats
+}
+
 export function getInstanceLayout() {
   if (!currentHookOwner) return { x: 0, y: 0, width: 0, height: 0 }
-  return currentHookOwner.layout ?? { x: 0, y: 0, width: 0, height: 0 }
+  if (!currentHookOwner.layout) currentHookOwner.layout = { x: 0, y: 0, width: 0, height: 0 }
+  return currentHookOwner.layout
 }
 
 export function registerOverlay(element, { backdrop, fullscreen } = {}) {
@@ -32,10 +48,25 @@ export function registerOverlay(element, { backdrop, fullscreen } = {}) {
 }
 
 const BORDER_CHARS = {
-  single: { tl: '\u250c', tr: '\u2510', bl: '\u2514', br: '\u2518', h: '\u2500', v: '\u2502' },
-  double: { tl: '\u2554', tr: '\u2557', bl: '\u255a', br: '\u255d', h: '\u2550', v: '\u2551' },
-  round: { tl: '\u256d', tr: '\u256e', bl: '\u2570', br: '\u256f', h: '\u2500', v: '\u2502' },
-  bold: { tl: '\u250f', tr: '\u2513', bl: '\u2517', br: '\u251b', h: '\u2501', v: '\u2503' },
+  single: { tl: '\u250c', tr: '\u2510', bl: '\u2514', br: '\u2518', h: '\u2500', v: '\u2502', tDown: '\u252c', tUp: '\u2534', tRight: '\u251c', tLeft: '\u2524' },
+  double: { tl: '\u2554', tr: '\u2557', bl: '\u255a', br: '\u255d', h: '\u2550', v: '\u2551', tDown: '\u2566', tUp: '\u2569', tRight: '\u2560', tLeft: '\u2563' },
+  round: { tl: '\u256d', tr: '\u256e', bl: '\u2570', br: '\u256f', h: '\u2500', v: '\u2502', tDown: '\u252c', tUp: '\u2534', tRight: '\u251c', tLeft: '\u2524' },
+  bold: { tl: '\u250f', tr: '\u2513', bl: '\u2517', br: '\u251b', h: '\u2501', v: '\u2503', tDown: '\u2533', tUp: '\u253b', tRight: '\u2523', tLeft: '\u252b' },
+}
+
+const TEXTURE_PRESETS = {
+  'shade-light': '░',
+  'shade-medium': '▒',
+  'shade-heavy': '▓',
+  'dots': '·',
+  'cross': '╳',
+  'grid': '┼',
+  'dash': '╌',
+}
+
+function resolveTexture(texture) {
+  if (!texture) return null
+  return TEXTURE_PRESETS[texture] ?? texture
 }
 
 function resolveAttrs(style) {
@@ -49,7 +80,7 @@ function resolveAttrs(style) {
   return attrs
 }
 
-function paintBorder(buf, rect, borderStyle, fg) {
+function paintBorder(buf, rect, borderStyle, fg, edges) {
   const chars = typeof borderStyle === 'string'
     ? (BORDER_CHARS[borderStyle] ?? BORDER_CHARS.single)
     : BORDER_CHARS.single
@@ -58,20 +89,62 @@ function paintBorder(buf, rect, borderStyle, fg) {
   if (width < 2 || height < 2) return
 
   const cell = (ch) => ({ ch, fg: fg ?? null, bg: null, attrs: 0 })
+  const { top, right, bottom, left } = edges
+
+  if (top && left) buf.cells[y * buf.width + x] = cell(chars.tl)
+  else if (top) buf.cells[y * buf.width + x] = cell(chars.h)
+  else if (left) buf.cells[y * buf.width + x] = cell(chars.v)
 
-  buf.cells[y * buf.width + x] = cell(chars.tl)
-  buf.cells[y * buf.width + x + width - 1] = cell(chars.tr)
-  buf.cells[(y + height - 1) * buf.width + x] = cell(chars.bl)
-  buf.cells[(y + height - 1) * buf.width + x + width - 1] = cell(chars.br)
+  if (top && right) buf.cells[y * buf.width + x + width - 1] = cell(chars.tr)
+  else if (top) buf.cells[y * buf.width + x + width - 1] = cell(chars.h)
+  else if (right) buf.cells[y * buf.width + x + width - 1] = cell(chars.v)
 
-  for (let col = x + 1; col < x + width - 1; col++) {
+  if (bottom && left) buf.cells[(y + height - 1) * buf.width + x] = cell(chars.bl)
+  else if (bottom) buf.cells[(y + height - 1) * buf.width + x] = cell(chars.h)
+  else if (left) buf.cells[(y + height - 1) * buf.width + x] = cell(chars.v)
+
+  if (bottom && right) buf.cells[(y + height - 1) * buf.width + x + width - 1] = cell(chars.br)
+  else if (bottom) buf.cells[(y + height - 1) * buf.width + x + width - 1] = cell(chars.h)
+  else if (right) buf.cells[(y + height - 1) * buf.width + x + width - 1] = cell(chars.v)
+
+  if (top) for (let col = x + 1; col < x + width - 1; col++)
     buf.cells[y * buf.width + col] = cell(chars.h)
+
+  if (bottom) for (let col = x + 1; col < x + width - 1; col++)
     buf.cells[(y + height - 1) * buf.width + col] = cell(chars.h)
-  }
 
-  for (let row = y + 1; row < y + height - 1; row++) {
+  if (left) for (let row = y + 1; row < y + height - 1; row++)
     buf.cells[row * buf.width + x] = cell(chars.v)
+
+  if (right) for (let row = y + 1; row < y + height - 1; row++)
     buf.cells[row * buf.width + x + width - 1] = cell(chars.v)
+}
+
+function paintJunctions(buf, rect, borderStyle, fg, children, edges) {
+  if (!children) return
+  const chars = typeof borderStyle === 'string'
+    ? (BORDER_CHARS[borderStyle] ?? BORDER_CHARS.single)
+    : BORDER_CHARS.single
+  const cell = (ch) => ({ ch, fg: fg ?? null, bg: null, attrs: 0 })
+
+  for (const child of children) {
+    const leaf = child._resolved ? child._resolved : child
+    const divider = leaf?.props?.style?._divider
+    if (!divider) continue
+    const cl = leaf._layout
+    if (!cl) continue
+
+    if (divider === 'vertical') {
+      if (cl.x >= rect.x && cl.x < rect.x + rect.width) {
+        if (edges.top) buf.cells[rect.y * buf.width + cl.x] = cell(chars.tDown)
+        if (edges.bottom) buf.cells[(rect.y + rect.height - 1) * buf.width + cl.x] = cell(chars.tUp)
+      }
+    } else if (divider === 'horizontal') {
+      if (cl.y >= rect.y && cl.y < rect.y + rect.height) {
+        if (edges.left) buf.cells[cl.y * buf.width + rect.x] = cell(chars.tRight)
+        if (edges.right) buf.cells[cl.y * buf.width + rect.x + rect.width - 1] = cell(chars.tLeft)
+      }
+    }
   }
 }
 
@@ -79,14 +152,25 @@ function findContentRect(node) {
   if (!node?._layout) return null
   const style = node.props?.style ?? {}
   if (style.border) return node._layout
+  if (node.type === 'text' || style.bg || style.inverse) return node._layout
+
+  let bounds = null
+  const merge = (rect) => {
+    if (!rect) return
+    if (!bounds) { bounds = { ...rect }; return }
+    const r = Math.max(bounds.x + bounds.width, rect.x + rect.width)
+    const b = Math.max(bounds.y + bounds.height, rect.y + rect.height)
+    bounds.x = Math.min(bounds.x, rect.x)
+    bounds.y = Math.min(bounds.y, rect.y)
+    bounds.width = r - bounds.x
+    bounds.height = b - bounds.y
+  }
+
   if (node._resolvedChildren) {
-    for (const child of node._resolvedChildren) {
-      const found = findContentRect(child)
-      if (found) return found
-    }
+    for (const child of node._resolvedChildren) merge(findContentRect(child))
   }
-  if (node._resolved) return findContentRect(node._resolved)
-  return null
+  if (node._resolved) merge(findContentRect(node._resolved))
+  return bounds
 }
 
 function clearOverlayRect(overlayTree, buf) {
@@ -95,6 +179,40 @@ function clearOverlayRect(overlayTree, buf) {
   fillRect(buf, rect.x, rect.y, rect.width, rect.height, ' ', null, null, 0)
 }
 
+function findScrollContentHeight(node) {
+  if (!node) return null
+  if (node._contentHeight != null) return node._contentHeight
+  if (node._resolved) return findScrollContentHeight(node._resolved)
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) {
+      const h = findScrollContentHeight(child)
+      if (h != null) return h
+    }
+  }
+  return null
+}
+
+function updateOverlayLayouts(node) {
+  if (!node) return
+  if (node._instance) {
+    const rect = node._availableRect ?? node._layout
+    if (rect) {
+      const ch = findScrollContentHeight(node)
+      if (!node._instance.layout) node._instance.layout = { x: 0, y: 0, width: 0, height: 0 }
+      const target = node._instance.layout
+      target.x = rect.x
+      target.y = rect.y
+      target.width = rect.width
+      target.height = rect.height
+      target.contentHeight = ch
+    }
+  }
+  if (node._resolved) updateOverlayLayouts(node._resolved)
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) updateOverlayLayouts(child)
+  }
+}
+
 function clipRect(a, b) {
   const x = Math.max(a.x, b.x)
   const y = Math.max(a.y, b.y)
@@ -103,23 +221,61 @@ function clipRect(a, b) {
   return { x, y, width: Math.max(0, r - x), height: Math.max(0, bot - y) }
 }
 
-function paintTree(node, buf, clip) {
+function propagateDirty(node) {
+  if (!node) return false
+  if (node._resolved) {
+    const childDirty = propagateDirty(node._resolved)
+    const inst = node._instance
+    if (inst) {
+      inst._subtreeDirty = inst._dirty || childDirty
+      return inst._subtreeDirty
+    }
+    return childDirty
+  }
+  if (node._resolvedChildren) {
+    let anyDirty = false
+    for (const child of node._resolvedChildren) {
+      if (propagateDirty(child)) anyDirty = true
+    }
+    return anyDirty
+  }
+  return false
+}
+
+function layoutEqual(a, b) {
+  return a && b && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+}
+
+function paintTree(node, buf, clip, offset, prevBuf) {
   if (!node) return
 
   if (node._resolved) {
-    paintTree(node._resolved, buf, clip)
+    const inst = node._instance
+    if (prevBuf && inst && !inst._subtreeDirty) {
+      const layout = node._resolved?._layout ?? node._layout
+      if (layout && layoutEqual(layout, inst._lastLayout)) {
+        blitRect(prevBuf, buf, layout.x, layout.y, layout.width, layout.height)
+        return
+      }
+    }
+    if (inst) inst._lastLayout = node._resolved?._layout ?? node._layout
+    paintTree(node._resolved, buf, clip, offset, prevBuf)
     return
   }
 
   if (node.type === Fragment) {
     if (node._resolvedChildren) {
-      for (const child of node._resolvedChildren) paintTree(child, buf, clip)
+      for (const child of node._resolvedChildren) paintTree(child, buf, clip, offset, prevBuf)
     }
     return
   }
 
-  const layout = node._layout
-  if (!layout || layout.width <= 0 || layout.height <= 0) return
+  const rawLayout = node._layout
+  if (!rawLayout || rawLayout.width <= 0 || rawLayout.height <= 0) return
+
+  const layout = offset
+    ? { x: rawLayout.x + offset.x, y: rawLayout.y + offset.y, width: rawLayout.width, height: rawLayout.height }
+    : rawLayout
 
   const clipped = clip ? clipRect(layout, clip) : layout
   if (clipped.width <= 0 || clipped.height <= 0) return
@@ -153,33 +309,66 @@ function paintTree(node, buf, clip) {
     return
   }
 
-  if (style.bg) {
-    fillRect(buf, clipped.x, clipped.y, clipped.width, clipped.height, ' ', null, style.bg, 0)
+  if (style.bg || style.texture) {
+    const ch = resolveTexture(style.texture) ?? ' '
+    const fg = style.textureColor ?? null
+    fillRect(buf, clipped.x, clipped.y, clipped.width, clipped.height, ch, fg, style.bg, 0)
   }
 
   if (style.border) {
-    paintBorder(buf, layout, style.border, style.borderColor)
+    const edges = resolveBorderEdges(style)
+    paintBorder(buf, layout, style.border, style.borderColor, edges)
+    paintJunctions(buf, layout, style.border, style.borderColor, node._resolvedChildren, edges)
   }
 
   const childClip = clip ? clipRect(layout, clip) : layout
 
+  let childOffset = offset
+  if (style.overflow === 'scroll') {
+    const scrollY = style.scrollOffset ?? 0
+    childOffset = { x: offset?.x ?? 0, y: (offset?.y ?? 0) - scrollY }
+  }
+
   if (node._resolvedChildren) {
     for (const child of node._resolvedChildren) {
-      paintTree(child, buf, childClip)
+      paintTree(child, buf, childClip, childOffset, prevBuf)
     }
   }
 }
 
-function extractText(node) {
+function extractText(node, parentCtx) {
   if (node == null || node === true || node === false) return ''
   if (typeof node === 'string') return node
   if (typeof node === 'number') return String(node)
+
   const children = node.props?.children
   if (children == null || children === true || children === false) return ''
-  if (typeof children === 'string') return children
-  if (typeof children === 'number') return String(children)
-  if (Array.isArray(children)) return children.map(c => extractText(c)).join('')
-  return ''
+  if (typeof children === 'string' && !node.props?.style) return children
+  if (typeof children === 'number' && !node.props?.style) return String(children)
+
+  const style = node.props?.style
+  const ownAttrs = style ? resolveAttrs(style) : 0
+  const hasOwnStyle = style && (style.color != null || style.bg != null || ownAttrs)
+
+  const myCtx = hasOwnStyle ? {
+    fg: style.color ?? parentCtx?.fg ?? null,
+    bg: style.bg ?? parentCtx?.bg ?? null,
+    attrs: ownAttrs || parentCtx?.attrs || 0,
+  } : (parentCtx || null)
+
+  let inner
+  if (typeof children === 'string') inner = children
+  else if (typeof children === 'number') inner = String(children)
+  else if (Array.isArray(children)) inner = children.map(c => extractText(c, myCtx)).join('')
+  else inner = ''
+
+  if (parentCtx !== undefined && hasOwnStyle) {
+    const prefix = ansi.sgr(myCtx.fg, myCtx.bg, myCtx.attrs)
+    const suffix = parentCtx ? ansi.sgr(parentCtx.fg, parentCtx.bg, parentCtx.attrs) : ansi.sgrReset
+    return prefix + inner + suffix
+  }
+
+  return inner
 }
 
 function flattenChildren(children) {
@@ -269,7 +458,36 @@ export function registerHook(setupFn) {
 // instances are keyed by component function + occurrence index,
 // so multiple instances of the same component each get their own state.
 
-function resolveForFrame(element, parent, instances, counters, visited) {
+function shallowPropsEqual(a, b) {
+  if (a === b) return true
+  if (!a || !b) return false
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+  if (keysA.length !== keysB.length) return false
+  for (const k of keysA) {
+    if (k === 'children') continue
+    if (a[k] !== b[k]) return false
+  }
+  return true
+}
+
+function isInstanceClean(instance, newProps) {
+  if (!instance._trackedSignals) return false
+  if (!shallowPropsEqual(instance._lastProps, newProps)) return false
+  const sigs = instance._trackedSignals
+  const vals = instance._signalValues
+  for (let i = 0; i < sigs.length; i++) {
+    if (sigs[i]() !== vals[i]) return false
+  }
+  return true
+}
+
+function snapshotSignals(instance, signals) {
+  instance._trackedSignals = signals
+  instance._signalValues = signals.map(g => g())
+}
+
+function resolveForFrame(element, parent, instances, counters, visited, scope) {
   if (element == null || typeof element === 'boolean') return null
 
   if (typeof element === 'string' || typeof element === 'number') {
@@ -296,49 +514,63 @@ function resolveForFrame(element, parent, instances, counters, visited) {
 
   if (typeof element.type === 'function') {
     const fn = element.type
-    const count = counters.get(fn) ?? 0
-    counters.set(fn, count + 1)
+    const counterKey = `${scope}/${fn.name}`
+    const count = counters.get(counterKey) ?? 0
+    counters.set(counterKey, count + 1)
 
-    const instanceKey = element.key != null ? `${fn.name}:key:${element.key}` : `${fn.name}:${count}`
+    const instanceKey = element.key != null ? `${scope}/${fn.name}:key:${element.key}` : `${scope}/${fn.name}:${count}`
     if (visited) visited.add(instanceKey)
     let instance = instances.get(instanceKey)
 
     if (!instance) {
       let result
-      instance = { scope: null, fn, hooks: [], node: null, layout: null }
+      instance = { scope: null, fn, hooks: [], node: null, layout: null, _dirty: true }
       instances.set(instanceKey, instance)
       instance.scope = createScope(() => {
         startHookTracking(instance)
+        startRenderTracking()
         result = fn(element.props ?? {})
+        const signals = stopRenderTracking()
         endHookTracking()
+        snapshotSignals(instance, signals)
+        instance._lastProps = element.props
       })
-      node._resolved = resolveForFrame(result, node, instances, counters, visited)
+      node._resolved = resolveForFrame(result, node, instances, counters, visited, instanceKey)
     } else {
+      const clean = isInstanceClean(instance, element.props)
+      instance._dirty = !clean
+
       startHookTracking(instance)
+      startRenderTracking()
       const result = fn(element.props ?? {})
+      const signals = stopRenderTracking()
       endHookTracking()
-      node._resolved = resolveForFrame(result, node, instances, counters, visited)
+      snapshotSignals(instance, signals)
+      instance._lastProps = element.props
+
+      node._resolved = resolveForFrame(result, node, instances, counters, visited, instanceKey)
     }
 
+    node._instance = instance
     instance.node = node
     return node
   }
 
   if (element.type === Fragment) {
     const children = flattenChildren(element.props?.children)
-    node._resolvedChildren = children.map(c => resolveForFrame(c, node, instances, counters, visited)).filter(Boolean)
+    node._resolvedChildren = children.map(c => resolveForFrame(c, node, instances, counters, visited, scope)).filter(Boolean)
     return node
   }
 
   const children = flattenChildren(element.props?.children)
   if (children.length > 0) {
-    node._resolvedChildren = children.map(c => resolveForFrame(c, node, instances, counters, visited)).filter(Boolean)
+    node._resolvedChildren = children.map(c => resolveForFrame(c, node, instances, counters, visited, scope)).filter(Boolean)
   }
 
   return node
 }
 
-export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
+export function mount(rootComponent, { stream, stdin, title, theme, onExit: onExitCb } = {}) {
   const out = stream ?? process.stdout
   const inp = stdin ?? process.stdin
 
@@ -355,6 +587,8 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
   // component instance cache persists across frames
   // maps instanceKey -> { scope, fn, hooks }
   const instances = new Map()
+  let forceFullPaint = false
+  let prevHadOverlays = false
 
   function frame() {
     const prevCtx = activeContext
@@ -367,38 +601,77 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
     const counters = new Map()
     const visited = new Set()
     const element = { type: rootComponent, props: {}, key: null }
-    const tree = resolveForFrame(element, null, instances, counters, visited)
+    const tree = resolveForFrame(element, null, instances, counters, visited, '')
 
     computeLayout(tree, { x: 0, y: 0, width, height })
 
+    let layoutChanged = false
     for (const inst of instances.values()) {
-      if (inst.node?._availableRect) inst.layout = inst.node._availableRect
-      else if (inst.node?._layout) inst.layout = inst.node._layout
+      const rect = inst.node?._availableRect ?? inst.node?._layout
+      if (!rect) continue
+      const ch = findScrollContentHeight(inst.node)
+      if (!inst.layout) inst.layout = { x: 0, y: 0, width: 0, height: 0 }
+      const prev = inst.layout
+      if (prev.width !== rect.width || prev.height !== rect.height || prev.contentHeight !== ch) {
+        layoutChanged = true
+      }
+      prev.x = rect.x
+      prev.y = rect.y
+      prev.width = rect.width
+      prev.height = rect.height
+      prev.contentHeight = ch
     }
 
-    paintTree(tree, curr)
+    // layout values changed - re-resolve so components see updated useLayout()
+    if (layoutChanged) {
+      overlays = []
+      counters.clear()
+      visited.clear()
+      const tree2 = resolveForFrame(element, null, instances, counters, visited, '')
+      computeLayout(tree2, { x: 0, y: 0, width, height })
+      for (const inst of instances.values()) {
+        const rect = inst.node?._availableRect ?? inst.node?._layout
+        if (!rect) continue
+        const ch = findScrollContentHeight(inst.node)
+        if (!inst.layout) inst.layout = { x: 0, y: 0, width: 0, height: 0 }
+        inst.layout.x = rect.x
+        inst.layout.y = rect.y
+        inst.layout.width = rect.width
+        inst.layout.height = rect.height
+        inst.layout.contentHeight = ch
+        inst._dirty = true
+      }
+      propagateDirty(tree2)
+      paintTree(tree2, curr, null, null, null)
+    } else {
+      propagateDirty(tree)
+      paintTree(tree, curr, null, null, (forceFullPaint || prevHadOverlays) ? null : prev)
+      forceFullPaint = false
+    }
+
+    const hasOverlays = overlays.length > 0
 
     for (const { element: overlayEl, owner, backdrop, fullscreen } of overlays) {
       if (backdrop) dimBuffer(curr)
 
-      const overlayTree = resolveForFrame(overlayEl, null, instances, counters, visited)
+      const overlayRect = (backdrop || fullscreen)
+        ? { x: 0, y: 0, width, height }
+        : (() => {
+            const anchor = owner.node?._layout ?? owner.layout ?? { x: 0, y: 0, width: 0, height: 0 }
+            return { x: anchor.x, y: anchor.y + 1, width: width - anchor.x, height: height - anchor.y - 1 }
+          })()
+
+      const overlayTree = resolveForFrame(overlayEl, null, instances, counters, visited, '')
       if (overlayTree) {
-        if (backdrop || fullscreen) {
-          computeLayout(overlayTree, { x: 0, y: 0, width, height })
-        } else {
-          const anchor = owner.node?._layout ?? owner.layout ?? { x: 0, y: 0, width: 0, height: 0 }
-          computeLayout(overlayTree, {
-            x: anchor.x,
-            y: anchor.y + 1,
-            width: width - anchor.x,
-            height: height - anchor.y - 1,
-          })
-        }
+        computeLayout(overlayTree, overlayRect)
+        updateOverlayLayouts(overlayTree)
         clearOverlayRect(overlayTree, curr)
         paintTree(overlayTree, curr)
       }
     }
 
+    prevHadOverlays = hasOverlays
+
     for (const [key, inst] of instances) {
       if (!visited.has(key)) {
         disposeScope(inst.scope)
@@ -408,8 +681,20 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
 
     activeContext = prevCtx
 
-    const output = diff(prev, curr)
-    if (output) out.write(ansi.hideCursor + output)
+    const { output, changed } = diff(prev, curr)
+    if (changed > 0) {
+      out.write(ansi.hideCursor)
+      out.write(output)
+    }
+
+    const now = performance.now()
+    if (lastFrameTimestamp > 0) {
+      frameTimeWindow.push(now - lastFrameTimestamp)
+      if (frameTimeWindow.length > 30) frameTimeWindow.shift()
+    }
+    lastFrameTimestamp = now
+    const avgMs = frameTimeWindow.length > 0 ? frameTimeWindow.reduce((a, b) => a + b, 0) / frameTimeWindow.length : 16.67
+    lastFrameStats = { changed, total: width * height, bytes: output ? Buffer.byteLength(output) : 0, fps: Math.round(1000 / avgMs) }
 
     const tmp = prev
     prev = curr
@@ -423,7 +708,7 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
 
   setSchedulerHook(scheduler.requestFrame)
 
-  out.write(ansi.altScreen + ansi.hideCursor + ansi.clearScreen + (title ? ansi.setTitle(title) : ''))
+  out.write(ansi.altScreen + ansi.hideCursor + ansi.clearScreen + ansi.enableMouse + (title ? ansi.setTitle(title) : ''))
   if (inp.isTTY && inp.setRawMode) inp.setRawMode(true)
 
   frame()
@@ -442,7 +727,8 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
   input.onKey((event) => {
     if (event.key === 'c' && event.ctrl) {
       unmount()
-      process.exit(0)
+      if (onExitCb) onExitCb()
+      else process.exit(0)
     }
   })
 
@@ -462,7 +748,7 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
     }
     instances.clear()
 
-    out.write(ansi.sgrReset + ansi.showCursor + ansi.exitAltScreen)
+    out.write(ansi.sgrReset + ansi.disableMouse + ansi.showCursor + ansi.exitAltScreen)
     if (inp.isTTY && inp.setRawMode) inp.setRawMode(false)
     activeContext = null
     setSchedulerHook(null)
@@ -474,5 +760,15 @@ export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
 
   process.on('exit', onExit)
 
-  return { unmount }
+  function repaint() {
+    prev = createBuffer(width, height)
+    curr = createBuffer(width, height)
+    forceFullPaint = true
+    out.write(ansi.clearScreen)
+    scheduler.forceFrame()
+  }
+
+  ctx.repaint = repaint
+
+  return { unmount, repaint, getBuffer: () => prev }
 }