@trendr/core 0.2.9 → 0.2.11

package/index.js

@@ -21,6 +21,7 @@ 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 { Menu } from './src/menu.js'
 export { Task } from './src/task.js'
 export { Shimmer } from './src/shimmer.js'
 export { useFocus, useFocusTrap } from './src/focus.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "type": "module",

package/src/ansi.js

@@ -11,6 +11,7 @@ export const showCursor = `${ESC}?25h`
 export const clearScreen = `${ESC}2J`
 export const clearLine = `${ESC}2K`
 export const clearDown = `${ESC}0J`
+export const clearScrollback = `${ESC}3J`
 export const altScreen = `${ESC}?1049h`
 export const exitAltScreen = `${ESC}?1049l`
 export const sgrReset = `${ESC}0m`

package/src/menu.js

@@ -0,0 +1,87 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useTheme } from './hooks.js'
+import { List } from './list.js'
+
+// a windowed single-select menu. shows at most maxVisible rows and scrolls
+// with scrolloff as the active item moves. it carries no text input of its
+// own, so it pairs with an external composer: render it after that input and,
+// while focused, it intercepts up/down/enter before the input sees them
+export function Menu({
+  items,
+  selected: selectedProp,
+  onSelect,
+  onSubmit,
+  onCancel,
+  focused = true,
+  maxVisible = 5,
+  scrolloff = 2,
+  itemHeight = 1,
+  gap = 0,
+  renderItem,
+  arrow = '›',
+}) {
+  const { accent = 'cyan' } = useTheme()
+  const [internal, setInternal] = createSignal(0)
+
+  const len = items.length
+  const raw = selectedProp ?? internal()
+  const selected = Math.min(Math.max(0, raw), Math.max(0, len - 1))
+  const setSelected = onSelect ?? setInternal
+
+  if (selected !== raw && len > 0) setSelected(selected)
+
+  useInput((event) => {
+    if (!focused || len === 0) return
+    const { key, ctrl, shift, meta } = event
+
+    if (key === 'up' || (ctrl && key === 'p')) {
+      setSelected(Math.max(0, selected - 1))
+      event.stopPropagation()
+    } else if (key === 'down' || (ctrl && key === 'n')) {
+      setSelected(Math.min(len - 1, selected + 1))
+      event.stopPropagation()
+    } else if (key === 'return' && !shift && !meta) {
+      if (onSubmit) onSubmit(items[selected], selected)
+      event.stopPropagation()
+    } else if (key === 'escape') {
+      if (onCancel) {
+        onCancel()
+        event.stopPropagation()
+      }
+    }
+  })
+
+  if (len === 0) return jsx('box', { style: { height: 0 } })
+
+  const visible = Math.min(maxVisible, len)
+  const height = visible * itemHeight + Math.max(0, visible - 1) * gap
+
+  const defaultRender = (item, { active }) => {
+    const label = typeof item === 'string' ? item : (item.label ?? item.name ?? String(item))
+    return jsx('box', {
+      style: { flexDirection: 'row' },
+      children: [
+        jsx('text', { style: { color: active ? accent : null }, children: active ? `${arrow} ` : '  ' }),
+        jsx('text', { style: { color: active ? accent : 'gray' }, children: label }),
+      ],
+    })
+  }
+
+  const render = renderItem ?? defaultRender
+
+  return jsx('box', {
+    style: { height, minHeight: height },
+    children: jsx(List, {
+      items,
+      selected,
+      onSelect: setSelected,
+      focused: false,
+      interactive: false,
+      itemHeight,
+      gap,
+      scrolloff,
+      renderItem: (item, ctx) => render(item, { active: ctx.selected, index: ctx.index }),
+    }),
+  })
+}

package/src/renderer.js

@@ -660,12 +660,37 @@ 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
+  // inline mode state: how many scrollback items have been committed, the
+  // visible width of each line the live region last emitted (so a later resize
+  // can compute how many physical rows they reflowed into), and that emit's
+  // text for skipping unchanged frames
   let flushedCount = 0
-  let prevLiveLines = 0
+  let prevLineLens = []
   let prevLiveText = null
 
+  // mirror per-instance layout (incl. scroll contentHeight/childHeights) back
+  // onto each instance so useLayout() consumers like List/Menu can window.
+  // returns whether anything changed, so the caller can re-resolve once and let
+  // those components observe the freshly measured values
+  function syncInstanceLayouts() {
+    let changed = false
+    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 }
+      const p = inst.layout
+      if (p.width !== rect.width || p.height !== rect.height || p.contentHeight !== ch) changed = true
+      p.x = rect.x
+      p.y = rect.y
+      p.width = rect.width
+      p.height = rect.height
+      p.contentHeight = ch
+      p.childHeights = findScrollChildHeights(inst.node)
+    }
+    return changed
+  }
+
   function inlineFrame() {
     const prevCtx = activeContext
     activeContext = ctx
@@ -674,7 +699,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     const counters = new Map()
     const visited = new Set()
     const element = { type: rootComponent, props: {}, key: null }
-    const tree = resolveForFrame(element, null, instances, counters, visited, '')
+    let tree = resolveForFrame(element, null, instances, counters, visited, '')
 
     const sb = findScrollback(tree)
     const items = sb?.props?.items ?? []
@@ -691,9 +716,18 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     // 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)))
+    let liveHeight = Math.min(height, Math.max(1, intrinsicHeight(tree, width, height)))
     computeLayout(tree, { x: 0, y: 0, width, height: liveHeight })
 
+    if (syncInstanceLayouts()) {
+      counters.clear()
+      visited.clear()
+      tree = resolveForFrame(element, null, instances, counters, visited, '')
+      liveHeight = Math.min(height, Math.max(1, intrinsicHeight(tree, width, height)))
+      computeLayout(tree, { x: 0, y: 0, width, height: liveHeight })
+      syncInstanceLayouts()
+    }
+
     for (const [key, inst] of instances) {
       if (!visited.has(key)) {
         disposeScope(inst.scope)
@@ -711,16 +745,25 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     const liveText = liveLines.join('\r\n')
     if (!committed && liveText === prevLiveText) return
 
+    // the cursor rests at the end of the last live line between frames. erase
+    // the previous live region before repainting: since it was drawn, a resize
+    // may have reflowed each of its lines into ceil(visibleWidth / width) rows,
+    // so step back over that real physical height rather than the logical line
+    // count - otherwise a shrink leaves the extra wrapped rows stranded as
+    // ghost bars. history above is left to the terminal's own reflow
+    let phys = 0
+    for (const len of prevLineLens) phys += Math.max(1, Math.ceil(len / width))
+
     let out_ = ''
-    if (prevLiveLines > 0) {
+    if (phys > 0) {
       out_ += '\r'
-      if (prevLiveLines > 1) out_ += ansi.moveUp(prevLiveLines - 1)
+      if (phys > 1) out_ += ansi.moveUp(phys - 1)
       out_ += ansi.clearDown
     }
     out_ += committed + liveText
 
     out.write(ansi.hideCursor + out_)
-    prevLiveLines = liveLines.length
+    prevLineLens = liveLines.map(l => measureText(l))
     prevLiveText = liveText
   }
 
@@ -864,11 +907,16 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     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
+      // a resize reflows committed scrollback unpredictably, and a relative
+      // erase of the live region cannot reliably track it across terminals.
+      // rebuild instead: wipe the screen and scrollback, reset the commit
+      // cursor, and re-commit the whole transcript cleanly at the new width
+      width = out.columns ?? 80
+      height = out.rows ?? 24
+      out.write(ansi.clearScrollback + ansi.clearScreen + ansi.moveTo(1, 1))
+      flushedCount = 0
+      prevLineLens = []
       prevLiveText = null
-      out.write('\r\n')
       scheduler.forceFrame()
       return
     }