@trendr/core 0.2.7 → 0.2.9

package/index.js

@@ -27,6 +27,7 @@ export { useFocus, useFocusTrap } from './src/focus.js'
 export { useHotkey } from './src/hotkey.js'
 export { useToast } from './src/toast.js'
 export { Fragment } from './src/element.js'
+export { Scrollback } from './src/scrollback.js'
 export { altScreen, exitAltScreen, showCursor, hideCursor, clearScreen, clearLine } from './src/ansi.js'
 export { animated, useAnimated, spring, ease, decay } from './src/animation.js'
 export { linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeOutElastic, easeOutBounce } from './src/animation.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "type": "module",
@@ -47,7 +47,7 @@
     "pick-list": "node esbuild.config.js && node dist/pick-list.js",
     "table-demo": "node esbuild.config.js && node dist/table-demo.js",
     "menubar": "node esbuild.config.js && node dist/menubar.js",
-    "scrollback-demo": "node esbuild.config.js && node dist/scrollback-demo.js",
+    "inline-chat": "node esbuild.config.js && node dist/inline-chat.js",
     "demo": "node esbuild.config.js && node demo/server.js",
     "demo:build": "node esbuild.config.js"
   },

package/src/ansi.js

@@ -10,6 +10,7 @@ export const hideCursor = `${ESC}?25l`
 export const showCursor = `${ESC}?25h`
 export const clearScreen = `${ESC}2J`
 export const clearLine = `${ESC}2K`
+export const clearDown = `${ESC}0J`
 export const altScreen = `${ESC}?1049h`
 export const exitAltScreen = `${ESC}?1049l`
 export const sgrReset = `${ESC}0m`
@@ -43,14 +44,25 @@ const NAMED_COLORS = {
   brightBlue: 12, brightMagenta: 13, brightCyan: 14, brightWhite: 15,
 }
 
+function expandHex(color) {
+  if (color.length === 7) return color
+  if (color.length === 4) {
+    const r = color[1], g = color[2], b = color[3]
+    return `#${r}${r}${g}${g}${b}${b}`
+  }
+  return null
+}
+
 function parseColor(color, offset) {
   if (color == null) return null
   if (typeof color === 'number') return `${offset};5;${color}`
   if (color in NAMED_COLORS) return `${offset};5;${NAMED_COLORS[color]}`
-  if (color.startsWith('#') && color.length === 7) {
-    const r = parseInt(color.slice(1, 3), 16)
-    const g = parseInt(color.slice(3, 5), 16)
-    const b = parseInt(color.slice(5, 7), 16)
+  if (color.charCodeAt(0) === 35) {
+    const hex = expandHex(color)
+    if (!hex) return null
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
     return `${offset};2;${r};${g};${b}`
   }
   return null

package/src/diff.js

@@ -56,6 +56,15 @@ function writeSgr(fg, bg, attrs) {
   buf[pos++] = 0x6d
 }
 
+function expandHex(color) {
+  if (color.length === 7) return color
+  if (color.length === 4) {
+    const r = color[1], g = color[2], b = color[3]
+    return `#${r}${r}${g}${g}${b}${b}`
+  }
+  return null
+}
+
 function writeColor(color, offset) {
   if (typeof color === 'number' || color in NAMED_COLORS) {
     const idx = typeof color === 'number' ? color : NAMED_COLORS[color]
@@ -65,10 +74,12 @@ function writeColor(color, offset) {
     buf[pos++] = 53 // '5'
     buf[pos++] = 0x3b
     writeNum(idx)
-  } else if (color.charCodeAt(0) === 35 && color.length === 7) {
-    const r = parseInt(color.slice(1, 3), 16)
-    const g = parseInt(color.slice(3, 5), 16)
-    const b = parseInt(color.slice(5, 7), 16)
+  } else if (color.charCodeAt(0) === 35) {
+    const hex = expandHex(color)
+    if (!hex) return
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
     buf[pos++] = 0x3b
     writeNum(offset)
     buf[pos++] = 0x3b

package/src/focus.js

@@ -1,28 +1,14 @@
-import { createSignalRaw, onCleanup } from './signal.js'
+import { createSignalRaw } from './signal.js'
 import { registerHook } from './renderer.js'
 import { useInput } from './hooks.js'
 
-let focusTrapStack = []
-
+// while active, keeps tab/shift-tab from propagating past the trapping
+// component to focus managers registered before it. handlers fire
+// innermost-first, so any useFocus registered deeper in the tree handles the
+// tab first; this handler then stops propagation so shallower managers don't
+// also react. when traps nest, the innermost active one fires first and halts
+// the rest, so it becomes the effective boundary
 export function useFocusTrap(active) {
-  const state = registerHook(() => {
-    const id = Symbol()
-    onCleanup(() => {
-      const idx = focusTrapStack.indexOf(id)
-      if (idx >= 0) focusTrapStack.splice(idx, 1)
-    })
-    return { id, wasActive: false }
-  })
-
-  if (active && !state.wasActive) {
-    focusTrapStack.push(state.id)
-    state.wasActive = true
-  } else if (!active && state.wasActive) {
-    const idx = focusTrapStack.indexOf(state.id)
-    if (idx >= 0) focusTrapStack.splice(idx, 1)
-    state.wasActive = false
-  }
-
   useInput((event) => {
     if (!active) return
     if (event.key === 'tab' || event.key === 'shift-tab') {
@@ -122,7 +108,6 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     const cur = state.current()
 
     if (state.stack.length > 0) return
-    if (focusTrapStack.length > 0) return
 
     if (cycle === 'tab' && (key === 'tab' || key === 'shift-tab')) {
       const idx = findTopLevel(cur)

package/src/input.js

@@ -52,6 +52,31 @@ export function parseMouse(raw) {
   return { type: 'mouse', action, button: buttonName, x, y }
 }
 
+const MODIFY_OTHER_RE = /^\x1b\[27;(\d+);(\d+)~$/
+const CSI_U_RE = /^\x1b\[(\d+)(?:;(\d+))?u$/
+
+function codeToKey(code) {
+  if (code === 13 || code === 10) return 'return'
+  if (code === 9) return 'tab'
+  if (code === 27) return 'escape'
+  if (code === 32) return 'space'
+  if (code === 127 || code === 8) return 'backspace'
+  return String.fromCodePoint(code)
+}
+
+// modifier param is 1-based with a bitmask in the low bits: shift=1, alt=2,
+// ctrl=4 (so plain=1, shift=2, ctrl=5, etc)
+function modifiedKey(code, mod, raw) {
+  const bits = Math.max(0, mod - 1)
+  return {
+    key: codeToKey(code),
+    ctrl: (bits & 4) !== 0,
+    meta: (bits & 2) !== 0,
+    shift: (bits & 1) !== 0,
+    raw,
+  }
+}
+
 export function parseKey(data) {
   const raw = typeof data === 'string' ? data : data.toString()
 
@@ -59,6 +84,12 @@ export function parseKey(data) {
     return { key: SPECIAL_KEYS[raw], ctrl: false, meta: false, shift: false, raw }
   }
 
+  let m = MODIFY_OTHER_RE.exec(raw)
+  if (m) return modifiedKey(parseInt(m[2], 10), parseInt(m[1], 10), raw)
+
+  m = CSI_U_RE.exec(raw)
+  if (m) return modifiedKey(parseInt(m[1], 10), m[2] ? parseInt(m[2], 10) : 1, raw)
+
   if (raw.length === 1) {
     const code = raw.charCodeAt(0)
 
@@ -90,21 +121,12 @@ export function splitKeys(data) {
   while (i < raw.length) {
     if (raw[i] === '\x1b') {
       if (i + 1 < raw.length && raw[i + 1] === '[') {
+        // generic csi: optional private marker, any number of ;-separated
+        // numeric params, then a final byte. covers arrows, mouse (\x1b[<..M),
+        // csi-u (\x1b[13;2u) and modifyOtherKeys (\x1b[27;2;13~)
         let j = i + 2
-        // sgr mouse: \x1b[<Cb;Cx;CyM or m
-        if (j < raw.length && raw[j] === '<') {
-          j++
-          while (j < raw.length && ((raw[j] >= '0' && raw[j] <= '9') || raw[j] === ';')) j++
-          if (j < raw.length) j++
-          keys.push(raw.slice(i, j))
-          i = j
-          continue
-        }
-        while (j < raw.length && raw[j] >= '0' && raw[j] <= '9') j++
-        if (j < raw.length && raw[j] === ';') {
-          j++
-          while (j < raw.length && raw[j] >= '0' && raw[j] <= '9') j++
-        }
+        if (j < raw.length && (raw[j] === '<' || raw[j] === '?')) j++
+        while (j < raw.length && ((raw[j] >= '0' && raw[j] <= '9') || raw[j] === ';' || raw[j] === ':')) j++
         if (j < raw.length) j++
         keys.push(raw.slice(i, j))
         i = j

package/src/layout.js

@@ -246,6 +246,10 @@ function layoutFlex(children, ctx) {
   }
 }
 
+export function intrinsicHeight(node, availW, availH) {
+  return measureChild(node, childStyle(node), false, availW, availH).height
+}
+
 function measureChild(child, cs, isRow, availW, availH) {
   const leaf = getLeaf(child)
   if (!leaf) return { width: 0, height: 0 }

package/src/list.js

@@ -132,6 +132,10 @@ export function List({ items, selected: selectedProp, onSelect, onCursorChange,
     if (itemTop - margin < scrollOffset) scrollOffset = itemTop - margin
     if (itemBottom + margin > scrollOffset + scrollViewH) scrollOffset = itemBottom + margin - scrollViewH
     scrollOffset = Math.max(0, Math.min(maxOffset, Math.round(scrollOffset)))
+    // hard guarantee: selected item must be visible regardless of margin overshoot
+    if (itemTop < scrollOffset) scrollOffset = itemTop
+    if (itemBottom > scrollOffset + scrollViewH) scrollOffset = itemBottom - scrollViewH
+    scrollOffset = Math.max(0, Math.min(maxOffset, Math.round(scrollOffset)))
     if (scrollOffset !== scrollState()) setScrollState(scrollOffset)
   }
 

package/src/renderer.js

@@ -1,6 +1,7 @@
 import { createBuffer, clearBuffer, fillRect, writeText, dimBuffer, blitRect } from './buffer.js'
 import { diff } from './diff.js'
-import { computeLayout, resolveBorderEdges } from './layout.js'
+import { bufferToLines } from './serialize.js'
+import { computeLayout, resolveBorderEdges, intrinsicHeight } from './layout.js'
 import { Fragment } from './element.js'
 import { createScheduler } from './scheduler.js'
 import { createInputHandler } from './input.js'
@@ -606,7 +607,40 @@ function resolveForFrame(element, parent, instances, counters, visited, scope) {
   return node
 }
 
-export function mount(rootComponent, { stream, stdin, title, theme, onExit: onExitCb, altScreen = true } = {}) {
+function findScrollback(node) {
+  if (!node) return null
+  if (typeof node.type === 'function' && node.type.__scrollback) return node
+  if (node._resolved) {
+    const found = findScrollback(node._resolved)
+    if (found) return found
+  }
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) {
+      const found = findScrollback(child)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// render a one-shot element (a committed scrollback item) to ANSI lines. it
+// gets its own throwaway instance map so it never pollutes the live tree's
+// cache, and scopes are disposed immediately since committed content is frozen
+function renderElementToLines(element, width) {
+  if (element == null) return []
+  const instances = new Map()
+  const counters = new Map()
+  const tree = resolveForFrame(element, null, instances, counters, null, '')
+  const h = Math.max(1, intrinsicHeight(tree, width, 100000))
+  computeLayout(tree, { x: 0, y: 0, width, height: h })
+  const buf = createBuffer(width, h)
+  paintTree(tree, buf, null, null, null)
+  const lines = bufferToLines(buf)
+  for (const inst of instances.values()) disposeScope(inst.scope)
+  return lines
+}
+
+export function mount(rootComponent, { stream, stdin, title, theme, onExit: onExitCb, altScreen = true, inline = false } = {}) {
   const out = stream ?? process.stdout
   const inp = stdin ?? process.stdin
 
@@ -626,6 +660,72 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
   let forceFullPaint = false
   let prevHadOverlays = false
 
+  // inline mode state: how many scrollback items have been committed, how many
+  // lines the live region occupied last emit, and that emit's text for skipping
+  let flushedCount = 0
+  let prevLiveLines = 0
+  let prevLiveText = null
+
+  function inlineFrame() {
+    const prevCtx = activeContext
+    activeContext = ctx
+    overlays = []
+
+    const counters = new Map()
+    const visited = new Set()
+    const element = { type: rootComponent, props: {}, key: null }
+    const tree = resolveForFrame(element, null, instances, counters, visited, '')
+
+    const sb = findScrollback(tree)
+    const items = sb?.props?.items ?? []
+    const renderItem = sb?.props?.render
+
+    let committed = ''
+    if (renderItem && items.length > flushedCount) {
+      for (let i = flushedCount; i < items.length; i++) {
+        const lines = renderElementToLines(renderItem(items[i], i), width)
+        for (const ln of lines) committed += ln + '\r\n'
+      }
+    }
+    // items can only grow while mounted; a shrink means the app reset its log,
+    // which we can't un-print, so just resync the counter
+    flushedCount = items.length
+
+    const liveHeight = Math.min(height, Math.max(1, intrinsicHeight(tree, width, height)))
+    computeLayout(tree, { x: 0, y: 0, width, height: liveHeight })
+
+    for (const [key, inst] of instances) {
+      if (!visited.has(key)) {
+        disposeScope(inst.scope)
+        instances.delete(key)
+      }
+    }
+
+    const liveBuf = createBuffer(width, liveHeight)
+    paintTree(tree, liveBuf, null, null, null)
+    const liveLines = bufferToLines(liveBuf)
+    lastInlineBuf = liveBuf
+
+    activeContext = prevCtx
+
+    const liveText = liveLines.join('\r\n')
+    if (!committed && liveText === prevLiveText) return
+
+    let out_ = ''
+    if (prevLiveLines > 0) {
+      out_ += '\r'
+      if (prevLiveLines > 1) out_ += ansi.moveUp(prevLiveLines - 1)
+      out_ += ansi.clearDown
+    }
+    out_ += committed + liveText
+
+    out.write(ansi.hideCursor + out_)
+    prevLiveLines = liveLines.length
+    prevLiveText = liveText
+  }
+
+  let lastInlineBuf = null
+
   function frame() {
     const prevCtx = activeContext
     activeContext = ctx
@@ -741,20 +841,37 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
 
   const scheduler = createScheduler({
     fps: 60,
-    onFrame: frame,
+    onFrame: inline ? inlineFrame : frame,
   })
 
   setSchedulerHook(scheduler.requestFrame)
 
-  out.write((altScreen ? ansi.altScreen : '') + ansi.hideCursor + ansi.clearScreen + ansi.enableMouse + (title ? ansi.setTitle(title) : ''))
+  // inline mode stays on the main screen buffer so native scrollback survives:
+  // no alt screen, no clear, no mouse capture (so the terminal handles scroll
+  // and text selection itself)
+  if (inline) {
+    out.write(ansi.hideCursor + (title ? ansi.setTitle(title) : ''))
+  } else {
+    out.write((altScreen ? ansi.altScreen : '') + ansi.hideCursor + ansi.clearScreen + ansi.enableMouse + (title ? ansi.setTitle(title) : ''))
+  }
   if (inp.isTTY && inp.setRawMode) inp.setRawMode(true)
 
-  frame()
+  if (inline) inlineFrame()
+  else frame()
   scheduler.requestFrame()
 
   const onResize = () => {
     width = out.columns ?? 80
     height = out.rows ?? 24
+    if (inline) {
+      // the terminal reflows committed history on its own; drop our live-region
+      // geometry and repaint it fresh below wherever the cursor landed
+      prevLiveLines = 0
+      prevLiveText = null
+      out.write('\r\n')
+      scheduler.forceFrame()
+      return
+    }
     prev = createBuffer(width, height)
     curr = createBuffer(width, height)
     out.write(ansi.clearScreen)
@@ -786,7 +903,11 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     }
     instances.clear()
 
-    out.write(ansi.sgrReset + ansi.disableMouse + ansi.showCursor + (altScreen ? ansi.exitAltScreen : ansi.moveTo(height, 1) + '\n'))
+    if (inline) {
+      out.write(ansi.sgrReset + ansi.showCursor + '\r\n')
+    } else {
+      out.write(ansi.sgrReset + ansi.disableMouse + ansi.showCursor + (altScreen ? ansi.exitAltScreen : ansi.moveTo(height, 1) + '\n'))
+    }
     if (inp.isTTY && inp.setRawMode) inp.setRawMode(false)
     activeContext = null
     setSchedulerHook(null)
@@ -799,6 +920,11 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
   process.on('exit', onExit)
 
   function repaint() {
+    if (inline) {
+      prevLiveText = null
+      scheduler.forceFrame()
+      return
+    }
     prev = createBuffer(width, height)
     curr = createBuffer(width, height)
     forceFullPaint = true
@@ -808,5 +934,5 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
 
   ctx.repaint = repaint
 
-  return { unmount, repaint, getBuffer: () => prev }
+  return { unmount, repaint, getBuffer: () => (inline ? lastInlineBuf : prev) }
 }

package/src/scrollback.js

@@ -0,0 +1,9 @@
+// marker component for inline mode. everything inside Scrollback is the
+// committed transcript: append-only items that get printed once into native
+// terminal scrollback and never touched again. the renderer reads its props
+// directly during the inline frame, so the component itself renders nothing
+export function Scrollback() {
+  return null
+}
+
+Scrollback.__scrollback = true

package/src/serialize.js

@@ -0,0 +1,46 @@
+import { sgr } from './ansi.js'
+
+const RESET = '\x1b[0m'
+
+function isBlank(cell) {
+  return cell.ch === ' ' && cell.fg == null && cell.bg == null && cell.attrs === 0
+}
+
+// turn a cell buffer into one ANSI string per row, trimming trailing blank
+// cells so short lines don't carry filler. used by inline mode to emit both
+// committed scrollback items and the live region
+export function bufferToLines(buf) {
+  const { width, height, cells } = buf
+  const lines = new Array(height)
+
+  for (let y = 0; y < height; y++) {
+    const row = y * width
+
+    let last = -1
+    for (let x = 0; x < width; x++) {
+      const c = cells[row + x]
+      if (c.ch !== '' && !isBlank(c)) last = x
+    }
+
+    let line = ''
+    let curFg, curBg, curAttrs
+    let open = false
+
+    for (let x = 0; x <= last; x++) {
+      const c = cells[row + x]
+      if (c.ch === '') continue
+      if (!open || c.fg !== curFg || c.bg !== curBg || c.attrs !== curAttrs) {
+        line += sgr(c.fg, c.bg, c.attrs)
+        curFg = c.fg
+        curBg = c.bg
+        curAttrs = c.attrs
+        open = true
+      }
+      line += c.ch
+    }
+
+    lines[y] = open ? line + RESET : line
+  }
+
+  return lines
+}

package/src/text-area.js

@@ -109,14 +109,17 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
   useInput((event) => {
     if (!focused) return
 
-    if (onKeyDown && onKeyDown(event)) {
-      event.stopPropagation()
-      return
+    if (onKeyDown) {
+      event.value = value()
+      if (onKeyDown(event)) {
+        event.stopPropagation()
+        return
+      }
     }
 
     resetBlink()
 
-    const { key, raw, ctrl, meta } = event
+    const { key, raw, ctrl, meta, shift } = event
     const v = value()
     const c = cursor()
 
@@ -128,10 +131,10 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
     }
 
     const isSubmitKey = submitOnEnter
-      ? (key === 'return' && !meta)
+      ? (key === 'return' && !meta && !shift)
       : (meta && key === '\r')
     const isNewlineKey = submitOnEnter
-      ? (meta && key === '\r')
+      ? ((shift && key === 'return') || (meta && key === '\r'))
       : (key === 'return')
 
     if (isSubmitKey) {