@trendr/core 0.2.2 → 0.2.4

package/index.js

@@ -19,6 +19,8 @@ export { ScrollableText } from './src/scrollable-text.js'
 export { PickList } from './src/pick-list.js'
 export { ScrollBox } from './src/scroll-box.js'
 export { SplitPane } from './src/split-pane.js'
+export { MillerNav } from './src/miller-nav.js'
+export { MenuBar } from './src/menubar.js'
 export { Task } from './src/task.js'
 export { Shimmer } from './src/shimmer.js'
 export { useFocus } from './src/focus.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "type": "module",
@@ -43,8 +43,11 @@
     "progress": "node esbuild.config.js && node dist/progress.js",
     "shimmer": "node esbuild.config.js && node dist/shimmer.js",
     "spinner": "node esbuild.config.js && node dist/spinner.js",
+    "miller-nav": "node esbuild.config.js && node dist/miller-nav.js",
     "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",
     "demo": "node esbuild.config.js && node demo/server.js",
     "demo:build": "node esbuild.config.js"
   },

package/src/layout.js

@@ -98,14 +98,17 @@ export function computeLayout(node, rect) {
 
   if (isScroll && flowChildren.length > 0) {
     let maxEdge = 0
+    const heights = []
     for (const child of flowChildren) {
       const cl = getLeaf(child)?._layout
       if (cl) {
         const edge = isRow ? (cl.x + cl.width - innerX) : (cl.y + cl.height - innerY)
         if (edge > maxEdge) maxEdge = edge
+        heights.push(isRow ? cl.width : cl.height)
       }
     }
     node._contentHeight = maxEdge
+    node._childHeights = heights
   }
 
   for (const child of absChildren) {
@@ -302,23 +305,62 @@ function measureIntrinsic(node, availW, availH) {
   let mainTotal = 0
   let crossMax = 0
 
-  for (const child of children) {
-    const cs = childStyle(child)
-    const grow = cs.flexGrow ?? cs.flex ?? 0
+  if (childIsRow) {
+    // two-pass measurement for rows: first measure non-flex children to determine
+    // how much width flex children actually get, then re-measure flex children
+    // at their real width so wrapping text computes the correct height
+    const totalGaps = Math.max(0, children.length - 1) * gap
+    let usedByFixed = totalGaps
+    let totalFlex = 0
+    const infos = []
+
+    for (const child of children) {
+      const cs = childStyle(child)
+      const grow = cs.flexGrow ?? cs.flex ?? 0
+      const margin = resolveMargin(cs)
+      const marginMain = margin.left + margin.right
+      const marginCross = margin.top + margin.bottom
+
+      if (grow > 0) {
+        usedByFixed += marginMain
+        totalFlex += grow
+        infos.push({ child, cs, grow, marginMain, marginCross, measured: null })
+      } else {
+        const measured = measureChild(child, cs, true, innerW, innerH)
+        usedByFixed += measured.width + marginMain
+        infos.push({ child, cs, grow: 0, marginMain, marginCross, measured })
+      }
+    }
 
-    const measured = measureChild(child, cs, childIsRow, innerW, innerH)
-    const margin = resolveMargin(cs)
-    const marginMain = childIsRow ? margin.left + margin.right : margin.top + margin.bottom
-    const marginCross = childIsRow ? margin.top + margin.bottom : margin.left + margin.right
+    const flexSpace = Math.max(0, innerW - usedByFixed)
 
-    const childMain = (childIsRow ? measured.width : measured.height) + marginMain
-    mainTotal += childMain
+    for (const info of infos) {
+      let measured = info.measured
+      if (info.grow > 0) {
+        const childW = Math.floor(flexSpace * (info.grow / totalFlex))
+        measured = measureChild(info.child, info.cs, true, childW, innerH)
+      }
+      mainTotal += (measured.width + info.marginMain)
+      const childCross = measured.height + info.marginCross
+      if (childCross > crossMax) crossMax = childCross
+    }
 
-    const childCross = (childIsRow ? measured.height : measured.width) + marginCross
-    if (childCross > crossMax) crossMax = childCross
-  }
+    mainTotal += totalGaps
+  } else {
+    for (const child of children) {
+      const cs = childStyle(child)
+      const measured = measureChild(child, cs, false, innerW, innerH)
+      const margin = resolveMargin(cs)
+      const marginMain = margin.top + margin.bottom
+      const marginCross = margin.left + margin.right
+
+      mainTotal += measured.height + marginMain
+      const childCross = measured.width + marginCross
+      if (childCross > crossMax) crossMax = childCross
+    }
 
-  mainTotal += Math.max(0, children.length - 1) * gap
+    mainTotal += Math.max(0, children.length - 1) * gap
+  }
 
   return childIsRow
     ? { width: mainTotal + chrome.x, height: crossMax + chrome.y }

package/src/list.js

@@ -18,17 +18,46 @@ export function List({ items, selected: selectedProp, onSelect, renderItem, head
 
   const innerHeaderH = sticky ? 0 : headerH
 
-  // when sticky, layout measures the outer wrapper so we can't derive item height from it
-  // use itemHeight directly and compute content from item count
   const avgH = !sticky && contentH > 0 && items.length > 0
     ? (contentH - headerH) / items.length
     : itemHeight
 
   const scrollViewH = sticky ? viewH - headerH : viewH
-  const scrollContentH = sticky ? items.length * avgH : contentH
+  const scrollContentH = sticky
+    ? (contentH > 0 ? contentH : items.length * itemHeight)
+    : contentH
 
   const maxOffset = Math.max(0, scrollContentH - scrollViewH)
 
+  const childHeights = layout.childHeights
+  const chOffset = (!sticky && header) ? 1 : 0
+
+  let itemTop = 0, itemH = avgH
+  if (childHeights && childHeights.length > chOffset) {
+    for (let i = 0; i < selected + chOffset; i++) {
+      itemTop += (childHeights[i] ?? avgH) + gap
+    }
+    itemH = childHeights[selected + chOffset] ?? avgH
+  } else {
+    itemTop = selected * avgH + innerHeaderH
+    itemH = avgH
+  }
+  const itemBottom = itemTop + itemH
+
+  const offsetToIndex = (offset) => {
+    if (!childHeights || childHeights.length <= chOffset) {
+      return Math.round((offset - innerHeaderH) / Math.max(1, avgH))
+    }
+    let cum = 0
+    for (let j = 0; j < chOffset; j++) cum += (childHeights[j] ?? 0) + gap
+    for (let j = 0; j < items.length; j++) {
+      const h = childHeights[j + chOffset] ?? avgH
+      if (offset < cum + h) return j
+      cum += h + gap
+    }
+    return items.length - 1
+  }
+
   useInput(({ key, ctrl }) => {
     if (!interactive) return
 
@@ -65,7 +94,7 @@ export function List({ items, selected: selectedProp, onSelect, renderItem, head
     if (event.action === 'press' && event.button === 'left') {
       const headerOffset = sticky ? headerH : (header ? headerH : 0)
       const relY = y - layout.y - headerOffset
-      const idx = Math.floor((relY + scrollOffset) / Math.max(1, avgH))
+      const idx = offsetToIndex(relY + scrollOffset)
       if (idx >= 0 && idx < len) {
         setSelected(idx)
         event.stopPropagation()
@@ -82,16 +111,13 @@ export function List({ items, selected: selectedProp, onSelect, renderItem, head
     thumbHeight: barThumbH,
     trackHeight: scrollViewH,
     maxOffset,
-    scrollOffset: selected * avgH,
+    scrollOffset: itemTop,
     onScroll: (offset) => {
-      const idx = Math.round(offset / Math.max(1, avgH))
+      const idx = offsetToIndex(offset)
       setSelected(Math.max(0, Math.min(items.length - 1, idx)))
     },
   })
 
-  const itemTop = selected * avgH + innerHeaderH
-  const itemBottom = itemTop + avgH
-
   let scrollOffset = 0
   if (scrollViewH > 0 && scrollContentH > scrollViewH) {
     const margin = scrolloff * avgH

package/src/menubar.js

@@ -0,0 +1,315 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useLayout, useTheme } from './hooks.js'
+import { registerOverlay, getInstanceLayout, getContext, registerHook } from './renderer.js'
+
+function MenuDropdown({ items, cursor, scroll, visibleCount, onSelect, onCursorChange, accent, hotkeyColor, direction }) {
+  const scrollable = items.length > visibleCount
+  const visible = items.slice(scroll, scroll + visibleCount)
+  const thumbH = scrollable ? Math.max(1, Math.round((visibleCount / items.length) * visibleCount)) : 0
+  const maxSc = items.length - visibleCount
+  const thumbStart = scrollable && maxSc > 0 ? Math.round((scroll / maxSc) * (visibleCount - thumbH)) : 0
+  const maxLen = items.reduce((m, v) => Math.max(m, (v.label ?? v).length), 0)
+
+  const dropdownChildren = visible.map((item, vi) => {
+    const i = vi + scroll
+    const isCursor = i === cursor
+    const label = item.label ?? item
+    const hotkey = item.hotkey
+
+    const row = (content) => {
+      if (!scrollable) return content
+      const barIsThumb = vi >= thumbStart && vi < thumbStart + thumbH
+      return jsx('box', {
+        key: i,
+        style: { flexDirection: 'row' },
+        children: [
+          content,
+          jsx('text', {
+            style: { color: barIsThumb ? accent : 'gray', dim: !barIsThumb },
+            children: ' ' + (barIsThumb ? '\u2588' : '\u2502'),
+          }),
+        ],
+      })
+    }
+
+    const labelParts = renderHotkeyLabel(label, hotkey, {
+      hotkeyColor: isCursor ? 'black' : hotkeyColor,
+      textColor: isCursor ? 'black' : null,
+      bold: isCursor,
+      hotkeyBold: true,
+      hotkeyUnderline: true,
+    })
+
+    const content = jsx('box', {
+      key: scrollable ? undefined : i,
+      style: { bg: isCursor ? accent : null, paddingX: 1, flexGrow: 1 },
+      children: labelParts,
+    })
+    return row(content)
+  })
+
+  const dropdownH = visibleCount + 2
+
+  return jsx('box', {
+    style: {
+      flexDirection: 'column',
+      border: 'single',
+      borderColor: accent,
+      height: dropdownH,
+      width: maxLen + 4 + (scrollable ? 2 : 0),
+      bg: null,
+    },
+    children: dropdownChildren,
+  })
+}
+
+function renderHotkeyLabel(label, hotkey, { hotkeyColor, textColor, bold, hotkeyBold, hotkeyUnderline }) {
+  if (!hotkey) {
+    return jsx('text', { style: { color: textColor, bold }, children: label })
+  }
+
+  const idx = label.toLowerCase().indexOf(hotkey.toLowerCase())
+  if (idx === -1) {
+    return jsxs('box', {
+      style: { flexDirection: 'row' },
+      children: [
+        jsx('text', { style: { color: textColor, bold }, children: label }),
+        jsx('text', { style: { color: hotkeyColor, bold: hotkeyBold }, children: ' [' }),
+        jsx('text', { style: { color: hotkeyColor, bold: hotkeyBold, underline: hotkeyUnderline }, children: hotkey }),
+        jsx('text', { style: { color: hotkeyColor, bold: hotkeyBold }, children: ']' }),
+      ],
+    })
+  }
+
+  const parts = []
+  if (idx > 0) {
+    parts.push(jsx('text', { key: 'pre', style: { color: textColor, bold }, children: label.slice(0, idx) }))
+  }
+  parts.push(jsx('text', { key: 'hk', style: { color: hotkeyColor, bold: hotkeyBold, underline: hotkeyUnderline }, children: label[idx] }))
+  if (idx < label.length - 1) {
+    parts.push(jsx('text', { key: 'post', style: { color: textColor, bold }, children: label.slice(idx + 1) }))
+  }
+  return jsxs('box', { style: { flexDirection: 'row' }, children: parts })
+}
+
+export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hotkeyColor: hotkeyColorProp, style: userStyle }) {
+  const { accent = 'cyan' } = useTheme()
+  const hotkeyColor = hotkeyColorProp ?? accent
+
+  const [openIndex, setOpenIndex] = createSignal(-1)
+  const [activeIndex, setActiveIndex] = createSignal(0)
+  const [cursor, setCursor] = createSignal(0)
+  const [scroll, setScroll] = createSignal(0)
+
+  const layout = useLayout()
+
+  useInput((event) => {
+    if (!focused) return
+    const { key } = event
+    const isOpen = openIndex() >= 0
+
+    const navKeys = ['h', 'l', 'left', 'right', 'return', 'space', 'escape']
+    if (!isOpen && !navKeys.includes(key)) {
+      const match = items.findIndex(m => m.hotkey && m.hotkey.toLowerCase() === key.toLowerCase())
+      if (match >= 0) {
+        setActiveIndex(match)
+        setOpenIndex(match)
+        setCursor(0)
+        setScroll(0)
+        event.stopPropagation()
+        return
+      }
+    }
+
+    if (isOpen) {
+      const menu = items[openIndex()]
+      const children = menu.children ?? []
+      const len = children.length
+
+      if (key === 'j' || key === 'down') {
+        setCursor(c => Math.min(len - 1, c + 1))
+        event.stopPropagation()
+        return
+      }
+
+      if (key === 'k' || key === 'up') {
+        setCursor(c => Math.max(0, c - 1))
+        event.stopPropagation()
+        return
+      }
+
+      if (key === 'return' || key === 'space') {
+        if (len > 0) {
+          const child = children[cursor()]
+          if (child) {
+            onSelect?.({ menu: menu.label, item: child.label ?? child, value: child.value ?? child.label ?? child })
+          }
+        }
+        setOpenIndex(-1)
+        event.stopPropagation()
+        return
+      }
+
+      if (key === 'escape') {
+        setOpenIndex(-1)
+        event.stopPropagation()
+        return
+      }
+
+      const childMatch = children.findIndex(c => c.hotkey && c.hotkey.toLowerCase() === key.toLowerCase())
+      if (childMatch >= 0) {
+        const child = children[childMatch]
+        onSelect?.({ menu: menu.label, item: child.label ?? child, value: child.value ?? child.label ?? child })
+        setOpenIndex(-1)
+        event.stopPropagation()
+        return
+      }
+    }
+
+    if (key === 'h' || key === 'left') {
+      const next = (activeIndex() - 1 + items.length) % items.length
+      setActiveIndex(next)
+      if (isOpen) {
+        setOpenIndex(next)
+        setCursor(0)
+        setScroll(0)
+      }
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'l' || key === 'right') {
+      const next = (activeIndex() + 1) % items.length
+      setActiveIndex(next)
+      if (isOpen) {
+        setOpenIndex(next)
+        setCursor(0)
+        setScroll(0)
+      }
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'return' || key === 'space') {
+      setOpenIndex(activeIndex())
+      setCursor(0)
+      setScroll(0)
+      event.stopPropagation()
+      return
+    }
+  })
+
+  const isOpen = openIndex() >= 0
+  const openMenu = isOpen ? items[openIndex()] : null
+  const openChildren = openMenu?.children ?? []
+
+  if (isOpen && openChildren.length > 0) {
+    const instLayout = getInstanceLayout()
+    const ctx = getContext()
+    const termH = ctx?.stream?.rows ?? 24
+
+    let itemX = 0
+    for (let i = 0; i < openIndex(); i++) {
+      const label = items[i].label ?? items[i]
+      itemX += label.length + 2
+    }
+
+    const anchorY = instLayout.y + 1
+    const spaceBelow = termH - anchorY - 2
+    const spaceAbove = instLayout.y - 2
+
+    let direction = 'down'
+    let maxRows = Math.min(openChildren.length, maxVisible)
+    if (spaceBelow >= maxRows) {
+      maxRows = Math.min(maxRows, spaceBelow)
+    } else if (spaceAbove > spaceBelow) {
+      direction = 'up'
+      maxRows = Math.min(maxRows, spaceAbove)
+    } else {
+      maxRows = Math.min(maxRows, spaceBelow)
+    }
+
+    const visibleCount = Math.max(1, maxRows)
+
+    const cur = cursor()
+    const sc = scroll()
+    let newScroll = sc
+    if (cur < sc) newScroll = cur
+    else if (cur >= sc + visibleCount) newScroll = cur - visibleCount + 1
+    newScroll = Math.max(0, Math.min(newScroll, openChildren.length - visibleCount))
+    if (newScroll !== sc) setScroll(newScroll)
+
+    const dropdown = jsx(MenuDropdown, {
+      items: openChildren,
+      cursor: cur,
+      scroll: newScroll,
+      visibleCount,
+      onSelect: (item) => {
+        onSelect?.({ menu: openMenu.label, item: item.label ?? item, value: item.value ?? item.label ?? item })
+        setOpenIndex(-1)
+      },
+      onCursorChange: (idx) => setCursor(idx),
+      accent,
+      hotkeyColor,
+      direction,
+    })
+
+    const termW = ctx?.stream?.columns ?? 80
+    const dropdownH = visibleCount + 2
+    const absX = instLayout.x + itemX
+    const absY = direction === 'up' ? instLayout.y - dropdownH : instLayout.y + 1
+
+    const overlay = jsx('box', {
+      style: { width: termW, height: termH },
+      children: jsx('box', {
+        style: {
+          position: 'absolute',
+          top: Math.max(0, absY),
+          left: absX,
+        },
+        children: dropdown,
+      }),
+    })
+
+    registerOverlay(overlay, { fullscreen: true })
+  }
+
+  const barChildren = items.map((menu, i) => {
+    const isActive = i === activeIndex()
+    const isItemOpen = i === openIndex()
+    const label = menu.label ?? menu
+    const hotkey = menu.hotkey
+
+    let bg = null
+    let color = null
+    let bold = false
+
+    if (isItemOpen && focused) {
+      bg = accent
+      color = 'black'
+      bold = true
+    } else if (isActive && focused) {
+      bg = accent
+      color = 'black'
+      bold = true
+    }
+
+    return jsx('box', {
+      key: i,
+      style: { bg, paddingX: 1 },
+      children: renderHotkeyLabel(label, hotkey, {
+        hotkeyColor: (bg === accent) ? color : hotkeyColor,
+        textColor: color,
+        bold,
+        hotkeyBold: true,
+        hotkeyUnderline: true,
+      }),
+    })
+  })
+
+  return jsxs('box', {
+    style: { flexDirection: 'row', ...userStyle },
+    children: barChildren,
+  })
+}

package/src/miller-nav.js

@@ -0,0 +1,299 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal, batch } from './signal.js'
+import { useInput, useMouse, useTheme, useLayout } from './hooks.js'
+import { List } from './list.js'
+
+function columnWidth(items, maxChars) {
+  if (!items.length) return 0
+  let longest = items.reduce((max, item) => {
+    const name = typeof item === 'string' ? item : (item.name ?? item.label ?? '')
+    return Math.max(max, name.length)
+  }, 0)
+  if (maxChars) longest = Math.min(longest, maxChars)
+  return Math.min(longest + 5, 25)
+}
+
+function defaultRenderItem(accent, item, { selected, focused, column }) {
+  const name = typeof item === 'string' ? item : (item.name ?? item.label ?? String(item))
+  const bg = selected ? (focused ? accent : '#333333') : null
+  const fg = selected && focused ? 'black' : null
+  return jsx('box', {
+    style: { bg, flexDirection: 'row' },
+    children: jsxs('text', {
+      style: { color: fg, overflow: 'truncate', flexGrow: 1 },
+      children: [' ', name],
+    }),
+  })
+}
+
+export function MillerNav({
+  rootItems,
+  getChildren,
+  hasChildren: hasChildrenFn,
+  renderItem,
+  onSelectionChange,
+  focused = true,
+  interactive = focused,
+  scrollbar = false,
+  peekColumn = true,
+  maxChars = { focused: 20, unfocused: 10 },
+  divider = true,
+  dividerChar = '\u258f',
+  dividerColor = '#333333',
+}) {
+  const { accent = 'cyan' } = useTheme()
+  const layout = useLayout()
+
+  const focusedMax = typeof maxChars === 'number' ? maxChars : maxChars.focused ?? 20
+  const unfocusedMax = typeof maxChars === 'number' ? maxChars : maxChars.unfocused ?? 10
+
+  const [stack, setStack] = createSignal([{ parentId: null, items: rootItems, selected: 0 }])
+  const [depth, setDepth] = createSignal(0)
+  const [focusCol, setFocusCol] = createSignal(0)
+
+  function activeColumnIndex() {
+    return depth() + focusCol()
+  }
+
+  function activeItem() {
+    const s = stack()
+    const col = s[activeColumnIndex()]
+    if (!col || !col.items.length) return null
+    return col.items[col.selected] || null
+  }
+
+  function breadcrumb() {
+    const s = stack()
+    const d = depth()
+    const fc = focusCol()
+    const parts = []
+    for (let i = 0; i <= d + fc; i++) {
+      const col = s[i]
+      if (col && col.items.length) parts.push(col.items[col.selected])
+    }
+    return parts
+  }
+
+  function emitSelection() {
+    if (!onSelectionChange) return
+    onSelectionChange({ item: activeItem(), breadcrumb: breadcrumb(), column: focusCol() })
+  }
+
+  function syncView() {
+    const s = stack().slice()
+    const d = depth()
+    const left = s[d]
+
+    if (left && left.items.length) {
+      const sel = left.items[left.selected]
+      const children = getChildren(sel)
+      const prevRight = s[d + 1]
+      const keepSelected = (prevRight && prevRight.parentId === sel)
+        ? Math.min(prevRight.selected, Math.max(0, children.length - 1))
+        : 0
+      s[d + 1] = { parentId: sel, items: children, selected: keepSelected }
+      s.length = d + 2
+    } else {
+      s.length = d + 1
+    }
+
+    setStack(s)
+
+    const right = s[d + 1]
+    if (!right || !right.items.length) {
+      if (d > 0) {
+        setDepth(d - 1)
+        setFocusCol(1)
+        return syncView()
+      }
+      setFocusCol(0)
+    }
+
+    emitSelection()
+  }
+
+  syncView()
+
+  useInput(({ key, raw, ctrl, stopPropagation }) => {
+    if (!interactive) return
+
+    const s = stack()
+    const d = depth()
+    const fc = focusCol()
+    const colIdx = d + fc
+    const col = s[colIdx]
+    if (!col || !col.items.length) return
+
+    function moveSelection(delta) {
+      const ns = s.slice()
+      const newSel = Math.max(0, Math.min(col.items.length - 1, col.selected + delta))
+      ns[colIdx] = { ...col, selected: newSel }
+      setStack(ns)
+      syncView()
+    }
+
+    if (key === 'j' || key === 'down') { moveSelection(1); stopPropagation() }
+    else if (key === 'k' || key === 'up') { moveSelection(-1); stopPropagation() }
+    else if (raw === 'g') { moveSelection(-col.items.length); stopPropagation() }
+    else if (raw === 'G') { moveSelection(col.items.length); stopPropagation() }
+    else if (ctrl && key === 'd') { moveSelection(Math.floor((layout.height || 20) / 2)); stopPropagation() }
+    else if (ctrl && key === 'u') { moveSelection(-Math.floor((layout.height || 20) / 2)); stopPropagation() }
+    else if (key === 'l' || key === 'right') {
+      if (fc === 0) {
+        const right = s[d + 1]
+        if (right && right.items.length) {
+          setFocusCol(1)
+          emitSelection()
+        }
+      } else {
+        const sel = col.items[col.selected]
+        const children = getChildren(sel)
+        if (!children.length) { stopPropagation(); return }
+
+        const ns = s.slice(0, colIdx + 1)
+        ns.push({ parentId: sel, items: children, selected: 0 })
+
+        batch(() => {
+          setStack(ns)
+          setDepth(colIdx)
+          setFocusCol(1)
+        })
+        syncView()
+      }
+      stopPropagation()
+    }
+    else if (key === 'h' || key === 'left') {
+      if (fc === 1 && d > 0) {
+        batch(() => {
+          setDepth(d - 1)
+          setFocusCol(1)
+        })
+        syncView()
+      } else if (fc === 1 && d === 0) {
+        setFocusCol(0)
+        emitSelection()
+      }
+      stopPropagation()
+    }
+  })
+
+  function navigateTo(chain) {
+    if (!chain.length) return
+    const newStack = []
+    let parent = null
+    for (let i = 0; i < chain.length; i++) {
+      const items = parent === null ? rootItems : getChildren(parent)
+      const idx = items.indexOf(chain[i])
+      newStack.push({ parentId: parent, items, selected: idx >= 0 ? idx : 0 })
+      parent = chain[i]
+    }
+    const newDepth = Math.max(0, newStack.length - 2)
+    const newFocusCol = newStack.length >= 2 ? Math.min(1, newStack.length - 1 - newDepth) : 0
+    batch(() => {
+      setStack(newStack)
+      setDepth(newDepth)
+      setFocusCol(newFocusCol)
+    })
+    syncView()
+  }
+
+  const render = renderItem || defaultRenderItem.bind(null, accent)
+
+  function NoteColumn({ items, selected, onSelect, isFocused, maxC, style: extraStyle }) {
+    if (!items.length) return null
+    return jsx('box', {
+      style: { width: columnWidth(items, maxC), ...extraStyle },
+      children: jsx(List, {
+        items,
+        selected,
+        onSelect,
+        focused: isFocused,
+        interactive: false,
+        scrollbar,
+        renderItem: (item, { selected: isSel }) =>
+          render(item, { selected: isSel, focused: isFocused, column: isFocused ? 'active' : 'context' }),
+      }),
+    })
+  }
+
+  const s = stack()
+  const d = depth()
+  const fc = focusCol()
+  const leftCol = s[d]
+  const rightCol = s[d + 1]
+
+  const peekItem = peekColumn && fc === 1 && rightCol?.items?.length
+    ? rightCol.items[rightCol.selected]
+    : null
+  const peekItems = peekItem && hasChildrenFn && hasChildrenFn(peekItem)
+    ? getChildren(peekItem)
+    : peekItem && !hasChildrenFn
+      ? getChildren(peekItem)
+      : []
+
+  const children = []
+
+  children.push(jsx(NoteColumn, {
+    key: 'left',
+    items: leftCol?.items || [],
+    selected: leftCol?.selected || 0,
+    maxC: fc === 0 ? focusedMax : unfocusedMax,
+    onSelect: (i) => {
+      const ns = s.slice()
+      ns[d] = { ...leftCol, selected: i }
+      batch(() => {
+        setStack(ns)
+        setFocusCol(0)
+      })
+      syncView()
+    },
+    isFocused: focused && fc === 0,
+  }))
+
+  if (rightCol?.items) {
+    children.push(jsx(NoteColumn, {
+      key: 'right',
+      items: rightCol?.items || [],
+      selected: rightCol?.selected || 0,
+      maxC: fc === 1 ? focusedMax : unfocusedMax,
+      style: { marginLeft: 1 },
+      onSelect: (i) => {
+        const ns = s.slice()
+        ns[d + 1] = { ...rightCol, selected: i }
+        batch(() => {
+          setStack(ns)
+          setFocusCol(1)
+        })
+        syncView()
+      },
+      isFocused: focused && fc === 1,
+    }))
+  }
+
+  if (peekItems.length > 0) {
+    children.push(jsx(NoteColumn, {
+      key: 'peek',
+      items: peekItems,
+      selected: -1,
+      maxC: unfocusedMax,
+      style: { marginLeft: 1 },
+      onSelect: () => {},
+      isFocused: false,
+    }))
+  }
+
+  if (divider) {
+    const rows = layout.height || process.stdout.rows
+    const bar = Array.from({ length: rows }, () => dividerChar).join('\n')
+    children.push(jsx('box', {
+      key: 'divider',
+      style: { width: 1, marginLeft: 1 },
+      children: jsx('text', { style: { color: dividerColor }, children: bar }),
+    }))
+  }
+
+  return jsx('box', {
+    style: { flexDirection: 'row' },
+    children,
+  })
+}

package/src/renderer.js

@@ -86,38 +86,57 @@ function paintBorder(buf, rect, borderStyle, fg, edges) {
     : BORDER_CHARS.single
 
   const { x, y, width, height } = rect
-  if (width < 2 || height < 2) return
+  if (width < 1 || height < 1) 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)
+  const x2 = x + width - 1
+  const y2 = y + height - 1
+  const singleRow = height === 1
+  const singleCol = width === 1
+
+  // top-left corner
+  if (top && left) buf.cells[y * buf.width + x] = cell(singleRow || singleCol ? (singleRow && singleCol ? chars.v : singleRow ? chars.h : chars.v) : chars.tl)
+  else if (top && !singleCol) buf.cells[y * buf.width + x] = cell(chars.h)
   else if (left) buf.cells[y * buf.width + x] = cell(chars.v)
 
-  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)
+  // top-right corner
+  if (!singleCol) {
+    if (top && right) buf.cells[y * buf.width + x2] = cell(singleRow ? chars.h : chars.tr)
+    else if (top) buf.cells[y * buf.width + x2] = cell(chars.h)
+    else if (right) buf.cells[y * buf.width + x2] = cell(chars.v)
+  }
 
-  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)
+  // bottom-left corner
+  if (!singleRow) {
+    if (bottom && left) buf.cells[y2 * buf.width + x] = cell(singleCol ? chars.v : chars.bl)
+    else if (bottom && !singleCol) buf.cells[y2 * buf.width + x] = cell(chars.h)
+    else if (left) buf.cells[y2 * 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)
+  // bottom-right corner
+  if (!singleRow && !singleCol) {
+    if (bottom && right) buf.cells[y2 * buf.width + x2] = cell(chars.br)
+    else if (bottom) buf.cells[y2 * buf.width + x2] = cell(chars.h)
+    else if (right) buf.cells[y2 * buf.width + x2] = cell(chars.v)
+  }
 
-  if (top) for (let col = x + 1; col < x + width - 1; col++)
+  // top edge
+  if (top) for (let col = x + 1; col < x2; 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)
+  // bottom edge
+  if (bottom && !singleRow) for (let col = x + 1; col < x2; col++)
+    buf.cells[y2 * buf.width + col] = cell(chars.h)
 
-  if (left) for (let row = y + 1; row < y + height - 1; row++)
+  // left edge
+  if (left) for (let row = y + 1; row < y2; 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)
+  // right edge
+  if (right) for (let row = y + 1; row < y2; row++)
+    buf.cells[row * buf.width + x2] = cell(chars.v)
 }
 
 function paintJunctions(buf, rect, borderStyle, fg, children, edges) {
@@ -192,6 +211,19 @@ function findScrollContentHeight(node) {
   return null
 }
 
+function findScrollChildHeights(node) {
+  if (!node) return null
+  if (node._childHeights) return node._childHeights
+  if (node._resolved) return findScrollChildHeights(node._resolved)
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) {
+      const h = findScrollChildHeights(child)
+      if (h != null) return h
+    }
+  }
+  return null
+}
+
 function updateOverlayLayouts(node) {
   if (!node) return
   if (node._instance) {
@@ -205,6 +237,7 @@ function updateOverlayLayouts(node) {
       target.width = rect.width
       target.height = rect.height
       target.contentHeight = ch
+      target.childHeights = findScrollChildHeights(node)
     }
   }
   if (node._resolved) updateOverlayLayouts(node._resolved)
@@ -324,14 +357,16 @@ function paintTree(node, buf, clip, offset, prevBuf) {
   const childClip = clip ? clipRect(layout, clip) : layout
 
   let childOffset = offset
+  let childPrevBuf = prevBuf
   if (style.overflow === 'scroll') {
     const scrollY = style.scrollOffset ?? 0
     childOffset = { x: offset?.x ?? 0, y: (offset?.y ?? 0) - scrollY }
+    childPrevBuf = null
   }
 
   if (node._resolvedChildren) {
     for (const child of node._resolvedChildren) {
-      paintTree(child, buf, childClip, childOffset, prevBuf)
+      paintTree(child, buf, childClip, childOffset, childPrevBuf)
     }
   }
 }
@@ -570,7 +605,7 @@ function resolveForFrame(element, parent, instances, counters, visited, scope) {
   return node
 }
 
-export function mount(rootComponent, { stream, stdin, title, theme, onExit: onExitCb } = {}) {
+export function mount(rootComponent, { stream, stdin, title, theme, onExit: onExitCb, altScreen = true } = {}) {
   const out = stream ?? process.stdout
   const inp = stdin ?? process.stdin
 
@@ -620,6 +655,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
       prev.width = rect.width
       prev.height = rect.height
       prev.contentHeight = ch
+      prev.childHeights = findScrollChildHeights(inst.node)
     }
 
     // layout values changed - re-resolve so components see updated useLayout()
@@ -639,6 +675,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
         inst.layout.width = rect.width
         inst.layout.height = rect.height
         inst.layout.contentHeight = ch
+        inst.layout.childHeights = findScrollChildHeights(inst.node)
         inst._dirty = true
       }
       propagateDirty(tree2)
@@ -708,7 +745,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
 
   setSchedulerHook(scheduler.requestFrame)
 
-  out.write(ansi.altScreen + ansi.hideCursor + ansi.clearScreen + ansi.enableMouse + (title ? ansi.setTitle(title) : ''))
+  out.write((altScreen ? ansi.altScreen : '') + ansi.hideCursor + ansi.clearScreen + ansi.enableMouse + (title ? ansi.setTitle(title) : ''))
   if (inp.isTTY && inp.setRawMode) inp.setRawMode(true)
 
   frame()
@@ -748,7 +785,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     }
     instances.clear()
 
-    out.write(ansi.sgrReset + ansi.disableMouse + ansi.showCursor + ansi.exitAltScreen)
+    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)

package/src/scroll-box.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useMouse, useLayout, useTheme, useScrollDrag } from './hooks.js'
 
-export function ScrollBox({ children, focused = true, scrollOffset: offsetProp, onScroll, scrollbar = false, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
+export function ScrollBox({ children, focused = true, scrollOffset: offsetProp, onScroll, scrollbar = false, gap = 0, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
   const { accent = 'cyan' } = useTheme()
   const [offsetInternal, setOffsetInternal] = createSignal(0)
   const layout = useLayout()
@@ -15,6 +15,7 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
   const maxOffset = Math.max(0, contentH - visibleH)
 
   const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
+  const clamped = clamp(offset)
 
   useInput(({ key, ctrl }) => {
     if (!focused) return
@@ -46,7 +47,7 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
 
   const hasBar = scrollbar && visibleH > 0 && contentH > visibleH
   const barThumbH = hasBar ? Math.max(1, Math.round((visibleH / contentH) * visibleH)) : 0
-  const barThumbStart = hasBar && maxOffset > 0 ? Math.round((offset / maxOffset) * (visibleH - barThumbH)) : 0
+  const barThumbStart = hasBar && maxOffset > 0 ? Math.round((clamped / maxOffset) * (visibleH - barThumbH)) : 0
 
   useScrollDrag({
     barX: hasBar ? layout.x + layout.width - 1 : null,
@@ -54,7 +55,7 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
     thumbHeight: barThumbH,
     trackHeight: visibleH,
     maxOffset,
-    scrollOffset: offset,
+    scrollOffset: clamped,
     onScroll: (v) => setOffset(clamp(v)),
   })
 
@@ -64,7 +65,8 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
       flexGrow: 1,
       ...userStyle,
       overflow: 'scroll',
-      scrollOffset: offset,
+      scrollOffset: clamped,
+      gap,
     },
     children,
   })
@@ -77,7 +79,7 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
   if (hasOverflow) {
     const thumbH = Math.max(1, Math.round((visibleH / contentH) * visibleH))
     const thumbStart = maxOffset > 0
-      ? Math.round((offset / maxOffset) * (visibleH - thumbH))
+      ? Math.round((clamped / maxOffset) * (visibleH - thumbH))
       : 0
 
     for (let i = 0; i < visibleH; i++) {

package/src/scrollable-text.js

@@ -19,6 +19,7 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
   const maxOffset = Math.max(0, lines.length - (h || 1))
 
   const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
+  const clamped = clamp(offset)
 
   useInput(({ key, ctrl }) => {
     if (!focused) return
@@ -27,30 +28,29 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
     const pageH = h || 10
     const half = Math.max(1, Math.floor(pageH / 2))
 
-    if (key === 'up' || key === 'k') setOffset(clamp(offset - 1))
-    else if (key === 'down' || key === 'j') setOffset(clamp(offset + 1))
-    else if (key === 'pageup' || (ctrl && key === 'b')) setOffset(clamp(offset - pageH))
-    else if (key === 'pagedown' || (ctrl && key === 'f')) setOffset(clamp(offset + pageH))
-    else if (ctrl && key === 'u') setOffset(clamp(offset - half))
-    else if (ctrl && key === 'd') setOffset(clamp(offset + half))
+    if (key === 'up' || key === 'k') setOffset(clamp(clamped - 1))
+    else if (key === 'down' || key === 'j') setOffset(clamp(clamped + 1))
+    else if (key === 'pageup' || (ctrl && key === 'b')) setOffset(clamp(clamped - pageH))
+    else if (key === 'pagedown' || (ctrl && key === 'f')) setOffset(clamp(clamped + pageH))
+    else if (ctrl && key === 'u') setOffset(clamp(clamped - half))
+    else if (ctrl && key === 'd') setOffset(clamp(clamped + half))
     else if (key === 'home' || key === 'g') setOffset(0)
     else if (key === 'end' || key === 'G') setOffset(maxOffset)
   })
 
   useMouse((event) => {
-    if (!focused) return
     if (event.action !== 'scroll') return
     if (lines.length <= (h || 1)) return
     const { x, y } = event
     if (x < layout.x || x >= layout.x + layout.width || y < layout.y || y >= layout.y + layout.height) return
-    if (event.direction === 'up') setOffset(clamp(offset - 3))
-    else setOffset(clamp(offset + 3))
+    if (event.direction === 'up') setOffset(clamp(clamped - 3))
+    else setOffset(clamp(clamped + 3))
     event.stopPropagation()
   })
 
   const hasBar = scrollbar && h > 0 && lines.length > h
   const barThumbH = hasBar ? Math.max(1, Math.round((h / lines.length) * h)) : 0
-  const barThumbStart = hasBar && maxOffset > 0 ? Math.round((offset / maxOffset) * (h - barThumbH)) : 0
+  const barThumbStart = hasBar && maxOffset > 0 ? Math.round((clamped / maxOffset) * (h - barThumbH)) : 0
 
   useScrollDrag({
     barX: hasBar ? layout.x + layout.width - 1 : null,
@@ -58,11 +58,11 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
     thumbHeight: barThumbH,
     trackHeight: h,
     maxOffset,
-    scrollOffset: offset,
+    scrollOffset: clamped,
     onScroll: (v) => setOffset(clamp(v)),
   })
 
-  const visible = lines.slice(offset, h > 0 ? offset + h : undefined)
+  const visible = lines.slice(clamped, h > 0 ? clamped + h : undefined)
 
   const textStyle = wrap ? undefined : { overflow: 'truncate' }
 
@@ -75,7 +75,7 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
 
   const thumbH = Math.max(1, Math.round((h / lines.length) * h))
   const thumbStart = maxOffset > 0
-    ? Math.round((offset / maxOffset) * (h - thumbH))
+    ? Math.round((clamped / maxOffset) * (h - thumbH))
     : 0
 
   const children = visible.map((line, i) => {

package/src/table.js

@@ -4,11 +4,11 @@ import { List } from './list.js'
 
 const DEFAULT_SEP = { left: '', fill: '\u2500', right: '' }
 
-export function Table({ columns, data, selected, onSelect, focused = true, separator = false, separatorChars, renderItem, scrollbar, stickyHeader = false, gap = 0, itemHeight = 1, scrolloff = 2 }) {
+export function Table({ columns, data, selected, onSelect, focused = true, separator = false, separatorChars, renderItem, scrollbar, stickyHeader = false, gap = 0, itemHeight = 1, scrolloff = 2, columnGap = 1 }) {
   const { accent = 'cyan' } = useTheme()
 
   const headerRow = jsxs('box', {
-    style: { flexDirection: 'row' },
+    style: { flexDirection: 'row', gap: columnGap },
     children: columns.map((col, i) =>
       jsx('text', {
         key: i,
@@ -44,7 +44,7 @@ export function Table({ columns, data, selected, onSelect, focused = true, separ
 
   const defaultRenderItem = (row, { selected: isSel }) =>
     jsxs('box', {
-      style: { flexDirection: 'row', bg: isSel ? (focused ? accent : 'gray') : null },
+      style: { flexDirection: 'row', gap: columnGap, bg: isSel ? (focused ? accent : 'gray') : null },
       children: columns.map((col, i) =>
         jsx('text', {
           key: i,

package/src/text-area.js

@@ -87,9 +87,15 @@ function ensureVisible(cursorRow, scroll, height, totalLines) {
   return scroll
 }
 
-export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp }) {
+export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp, value: valueProp }) {
   const [value, setValue] = createSignal('')
   const [cursor, setCursor] = createSignal(0)
+  const _prev = registerHook(() => ({ value: undefined }))
+  if (valueProp !== undefined && valueProp !== _prev.value) {
+    _prev.value = valueProp
+    setValue(valueProp)
+    setCursor(valueProp.length)
+  }
   const ref = registerHook(() => ({ scroll: 0, goalCol: null }))
   const layout = useLayout()
   const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)

package/src/wrap.js

@@ -53,24 +53,39 @@ export function sliceVisible(text, maxWidth) {
   return result
 }
 
+function extractTrailingAnsi(str) {
+  let active = ''
+  const re = /\x1b\[[0-9;]*m/g
+  let m
+  while ((m = re.exec(str)) !== null) {
+    if (m[0] === '\x1b[0m') active = ''
+    else active += m[0]
+  }
+  return active
+}
+
 export function wordWrap(text, maxWidth) {
   if (maxWidth <= 0) return []
   if (!text) return ['']
 
   const lines = []
+  let carry = ''
 
   for (const rawLine of text.split('\n')) {
     if (rawLine.length === 0) {
-      lines.push('')
+      lines.push(carry || '')
       continue
     }
 
-    if (measureText(rawLine) <= maxWidth) {
-      lines.push(rawLine)
+    const prefixed = carry ? carry + rawLine : rawLine
+
+    if (measureText(prefixed) <= maxWidth) {
+      lines.push(prefixed)
+      carry = extractTrailingAnsi(prefixed)
       continue
     }
 
-    const words = rawLine.split(/\s+/)
+    const words = prefixed.split(/\s+/)
     let line = ''
     let lineWidth = 0
 
@@ -84,8 +99,9 @@ export function wordWrap(text, maxWidth) {
       } else if (lineWidth === 0 && ww > maxWidth) {
         for (const { chunk, width } of visibleChars(word)) {
           if (lineWidth + width > maxWidth) {
+            carry = extractTrailingAnsi(line)
             lines.push(line)
-            line = ''
+            line = carry
             lineWidth = 0
           }
           line += chunk
@@ -95,26 +111,32 @@ export function wordWrap(text, maxWidth) {
         line += ' ' + word
         lineWidth += 1 + ww
       } else if (ww > maxWidth) {
-        if (line) lines.push(line)
-        line = ''
-        lineWidth = 0
+        if (line) {
+          carry = extractTrailingAnsi(line)
+          lines.push(line)
+          line = carry
+          lineWidth = 0
+        }
         for (const { chunk, width } of visibleChars(word)) {
           if (lineWidth + width > maxWidth) {
+            carry = extractTrailingAnsi(line)
             lines.push(line)
-            line = ''
+            line = carry
             lineWidth = 0
           }
           line += chunk
           lineWidth += width
         }
       } else {
+        carry = extractTrailingAnsi(line)
         lines.push(line)
-        line = word
+        line = carry + word
         lineWidth = ww
       }
     }
 
     lines.push(line)
+    carry = extractTrailingAnsi(line)
   }
 
   return lines