@trendr/core 0.2.11 → 0.4.0

package/src/list.js

@@ -3,15 +3,20 @@ import { createSignal } from './signal.js'
 import { useInput, useMouse, useLayout, useTheme, useScrollDrag } from './hooks.js'
 import { registerHook } from './renderer.js'
 
-export function List({ items, selected: selectedProp, onSelect, onCursorChange, renderItem, header, headerHeight = 1, focused = true, interactive = focused, itemHeight = 1, scrollbar = false, stickyHeader = false, gap = 0, scrolloff = 2 }) {
-  const { accent = 'cyan' } = useTheme()
+export function List({ items = [], selected: selectedProp, onSelect, onCursorChange, renderItem, header, headerHeight = 1, focused = true, interactive = focused, itemHeight = 1, scrollbar = false, stickyHeader = false, gap = 0, scrolloff = 2 }) {
+  const { accent = 'cyan', muted = 'gray' } = useTheme()
   const [selectedInternal, setSelectedInternal] = createSignal(0)
   const [scrollState, setScrollState] = createSignal(0)
   const layout = useLayout()
   const prevCursor = registerHook(() => ({ index: -1 }))
 
-  const selected = selectedProp ?? selectedInternal()
-  const setSelected = onSelect ?? setSelectedInternal
+  const rawSelected = selectedProp ?? selectedInternal()
+  const selected = Math.min(Math.max(0, rawSelected), Math.max(0, items.length - 1))
+  const setSelected = (idx) => {
+    if (selectedProp === undefined) setSelectedInternal(idx)
+    if (onSelect) onSelect(idx)
+  }
+  if (selected !== rawSelected && items.length > 0) setSelected(selected)
 
   if (onCursorChange && selected !== prevCursor.index && items.length > 0) {
     prevCursor.index = selected
@@ -65,23 +70,30 @@ export function List({ items, selected: selectedProp, onSelect, onCursorChange,
     return items.length - 1
   }
 
-  useInput(({ key, ctrl }) => {
+  useInput((event) => {
     if (!interactive) return
 
+    const { key, ctrl } = event
     const len = items.length
     if (len === 0) return
 
     const pageItems = viewH > 0 ? Math.max(1, Math.floor(viewH / avgH)) : 10
     const half = Math.max(1, Math.floor(pageItems / 2))
 
-    if (key === 'up' || key === 'k') setSelected(Math.max(0, selected - 1))
-    else if (key === 'down' || key === 'j') setSelected(Math.min(len - 1, selected + 1))
-    else if (key === 'pageup' || (ctrl && key === 'b')) setSelected(Math.max(0, selected - pageItems))
-    else if (key === 'pagedown' || (ctrl && key === 'f')) setSelected(Math.min(len - 1, selected + pageItems))
-    else if (ctrl && key === 'u') setSelected(Math.max(0, selected - half))
-    else if (ctrl && key === 'd') setSelected(Math.min(len - 1, selected + half))
-    else if (key === 'home' || key === 'g') setSelected(0)
-    else if (key === 'end' || key === 'G') setSelected(len - 1)
+    let next = null
+    if (key === 'up' || key === 'k') next = Math.max(0, selected - 1)
+    else if (key === 'down' || key === 'j') next = Math.min(len - 1, selected + 1)
+    else if (key === 'pageup' || (ctrl && key === 'b')) next = Math.max(0, selected - pageItems)
+    else if (key === 'pagedown' || (ctrl && key === 'f')) next = Math.min(len - 1, selected + pageItems)
+    else if (ctrl && key === 'u') next = Math.max(0, selected - half)
+    else if (ctrl && key === 'd') next = Math.min(len - 1, selected + half)
+    else if (key === 'home' || key === 'g') next = 0
+    else if (key === 'end' || key === 'G') next = len - 1
+
+    if (next !== null) {
+      setSelected(next)
+      event.stopPropagation()
+    }
   })
 
   useMouse((event) => {
@@ -92,6 +104,7 @@ export function List({ items, selected: selectedProp, onSelect, onCursorChange,
     if (x < layout.x || x >= layout.x + layout.width || y < layout.y || y >= layout.y + layout.height) return
 
     if (event.action === 'scroll') {
+      if (event.direction !== 'up' && event.direction !== 'down') return
       if (event.direction === 'up') setSelected(Math.max(0, selected - 1))
       else setSelected(Math.min(len - 1, selected + 1))
       event.stopPropagation()
@@ -99,8 +112,8 @@ export function List({ items, selected: selectedProp, onSelect, onCursorChange,
     }
 
     if (event.action === 'press' && event.button === 'left') {
-      const headerOffset = sticky ? headerH : (header ? headerH : 0)
-      const relY = y - layout.y - headerOffset
+      // non-sticky headers are already accounted for by offsetToIndex via chOffset
+      const relY = y - layout.y - (sticky ? headerH : 0)
       const idx = offsetToIndex(relY + scrollOffset)
       if (idx >= 0 && idx < len) {
         setSelected(idx)
@@ -177,7 +190,7 @@ export function List({ items, selected: selectedProp, onSelect, onCursorChange,
     barChildren.push(
       jsx('text', {
         key: i,
-        style: { color: isThumb ? (focused ? accent : 'gray') : 'gray', dim: !isThumb },
+        style: { color: isThumb ? (focused ? accent : muted) : muted, dim: !isThumb },
         children: isThumb ? '\u2588' : '\u2502',
       })
     )

package/src/markdown.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { useTheme, useLayout } from './hooks.js'
+import { fgSgr } from './ansi.js'
+
+const BOLD_ON = '\x1b[1m'
+const BOLD_OFF = '\x1b[22m'
+const ITALIC_ON = '\x1b[3m'
+const ITALIC_OFF = '\x1b[23m'
+const UNDERLINE_ON = '\x1b[4m'
+const UNDERLINE_OFF = '\x1b[24m'
+const FG_RESET = '\x1b[39m'
+
+const FENCE = /^```(\S*)\s*$/
+const HEADING = /^(#{1,6})\s+(.*)$/
+const HR = /^ {0,3}(-{3,}|\*{3,}|_{3,})\s*$/
+const LIST_ITEM = /^(\s*)([-*+]|\d+\.)\s+(.*)$/
+const QUOTE = /^>\s?(.*)$/
+const BLANK = /^\s*$/
+
+export function parseBlocks(text) {
+  const lines = String(text).split('\n')
+  const blocks = []
+  let i = 0
+
+  while (i < lines.length) {
+    const line = lines[i]
+
+    if (BLANK.test(line)) { i++; continue }
+
+    const fence = line.match(FENCE)
+    if (fence) {
+      const code = []
+      i++
+      while (i < lines.length && !/^```\s*$/.test(lines[i])) code.push(lines[i++])
+      if (i < lines.length) i++
+      blocks.push({ type: 'code', lang: fence[1], lines: code })
+      continue
+    }
+
+    if (HR.test(line)) { blocks.push({ type: 'hr' }); i++; continue }
+
+    const heading = line.match(HEADING)
+    if (heading) {
+      blocks.push({ type: 'heading', level: heading[1].length, text: heading[2] })
+      i++
+      continue
+    }
+
+    if (LIST_ITEM.test(line)) {
+      const items = []
+      while (i < lines.length) {
+        const m = lines[i].match(LIST_ITEM)
+        if (!m) break
+        items.push({ indent: m[1].length, marker: m[2], text: m[3] })
+        i++
+      }
+      blocks.push({ type: 'list', items })
+      continue
+    }
+
+    if (QUOTE.test(line)) {
+      const quoted = []
+      while (i < lines.length) {
+        const m = lines[i].match(QUOTE)
+        if (!m) break
+        quoted.push(m[1])
+        i++
+      }
+      blocks.push({ type: 'quote', lines: quoted })
+      continue
+    }
+
+    const para = []
+    while (
+      i < lines.length &&
+      !BLANK.test(lines[i]) &&
+      !FENCE.test(lines[i]) &&
+      !HEADING.test(lines[i]) &&
+      !HR.test(lines[i]) &&
+      !LIST_ITEM.test(lines[i]) &&
+      !QUOTE.test(lines[i])
+    ) {
+      para.push(lines[i])
+      i++
+    }
+    blocks.push({ type: 'para', text: para.join(' ') })
+  }
+
+  return blocks
+}
+
+export function renderInline(s, { accent = 'cyan' } = {}) {
+  const codeOn = fgSgr(accent)
+  let out = ''
+  for (const part of s.split(/(`[^`]+`)/)) {
+    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+      out += codeOn + part.slice(1, -1) + FG_RESET
+    } else {
+      out += part
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, `${UNDERLINE_ON}$1${UNDERLINE_OFF}`)
+        .replace(/\*\*([^*]+)\*\*/g, `${BOLD_ON}$1${BOLD_OFF}`)
+        .replace(/\*([^*\s][^*]*?)\*/g, `${ITALIC_ON}$1${ITALIC_OFF}`)
+        .replace(/(^|\s)_([^_]+)_(?=\s|$|[.,;:!?])/g, `$1${ITALIC_ON}$2${ITALIC_OFF}`)
+    }
+  }
+  return out
+}
+
+export function Markdown({ text, children, highlight, codeBg = '#1e1e22', style: userStyle }) {
+  const { accent = 'cyan', muted = 'gray' } = useTheme()
+  const layout = useLayout()
+  const src = text ?? (Array.isArray(children) ? children.join('') : (children ?? ''))
+  const colors = { accent, muted }
+
+  const els = parseBlocks(src).map((block, key) => {
+    if (block.type === 'heading') {
+      return jsx('text', { key, style: { bold: true, color: accent }, children: renderInline(block.text, colors) })
+    }
+
+    if (block.type === 'para') {
+      return jsx('text', { key, children: renderInline(block.text, colors) })
+    }
+
+    if (block.type === 'hr') {
+      return jsx('text', { key, style: { color: muted, dim: true }, children: '─'.repeat(Math.max(1, layout.width || 40)) })
+    }
+
+    if (block.type === 'code') {
+      const raw = block.lines.join('\n')
+      const shown = highlight ? highlight(raw, block.lang) : raw
+      const rows = shown.split('\n').map((line, k) => jsx('text', { key: k, style: { overflow: 'truncate' }, children: line || ' ' }))
+      return jsx('box', {
+        key,
+        style: { flexDirection: 'column', bg: codeBg, paddingX: 1 },
+        children: rows,
+      })
+    }
+
+    if (block.type === 'list') {
+      const rows = block.items.map((item, k) => {
+        const marker = /\d/.test(item.marker[0]) ? `${item.marker} ` : '• '
+        return jsxs('box', {
+          key: k,
+          style: { flexDirection: 'row', paddingLeft: item.indent },
+          children: [
+            jsx('text', { style: { color: muted }, children: marker }),
+            jsx('box', {
+              style: { flexDirection: 'column', flexGrow: 1 },
+              children: jsx('text', { children: renderInline(item.text, colors) }),
+            }),
+          ],
+        })
+      })
+      return jsx('box', { key, style: { flexDirection: 'column' }, children: rows })
+    }
+
+    if (block.type === 'quote') {
+      const rows = block.lines.map((line, k) =>
+        jsx('text', { key: k, style: { color: muted, italic: true }, children: renderInline(line, colors) }))
+      return jsxs('box', {
+        key,
+        style: { flexDirection: 'row' },
+        children: [
+          jsx('text', { style: { color: muted }, children: '▎ ' }),
+          jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children: rows }),
+        ],
+      })
+    }
+
+    return null
+  })
+
+  return jsx('box', {
+    style: { flexDirection: 'column', gap: 1, ...userStyle },
+    children: els,
+  })
+}

package/src/menu.js

@@ -8,7 +8,7 @@ import { List } from './list.js'
 // 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,
+  items = [],
   selected: selectedProp,
   onSelect,
   onSubmit,
@@ -20,14 +20,18 @@ export function Menu({
   gap = 0,
   renderItem,
   arrow = '›',
+  vimKeys = false,
 }) {
-  const { accent = 'cyan' } = useTheme()
+  const { accent = 'cyan', muted = 'gray' } = 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
+  const setSelected = (i) => {
+    if (selectedProp === undefined) setInternal(i)
+    if (onSelect) onSelect(i)
+  }
 
   if (selected !== raw && len > 0) setSelected(selected)
 
@@ -35,12 +39,15 @@ export function Menu({
     if (!focused || len === 0) return
     const { key, ctrl, shift, meta } = event
 
-    if (key === 'up' || (ctrl && key === 'p')) {
+    if (key === 'up' || (ctrl && key === 'p') || (vimKeys && !ctrl && key === 'k')) {
       setSelected(Math.max(0, selected - 1))
       event.stopPropagation()
-    } else if (key === 'down' || (ctrl && key === 'n')) {
+    } else if (key === 'down' || (ctrl && key === 'n') || (vimKeys && !ctrl && key === 'j')) {
       setSelected(Math.min(len - 1, selected + 1))
       event.stopPropagation()
+    } else if (vimKeys && !ctrl && (key === 'g' || key === 'G')) {
+      setSelected(key === 'G' ? len - 1 : 0)
+      event.stopPropagation()
     } else if (key === 'return' && !shift && !meta) {
       if (onSubmit) onSubmit(items[selected], selected)
       event.stopPropagation()
@@ -63,7 +70,7 @@ export function Menu({
       style: { flexDirection: 'row' },
       children: [
         jsx('text', { style: { color: active ? accent : null }, children: active ? `${arrow} ` : '  ' }),
-        jsx('text', { style: { color: active ? accent : 'gray' }, children: label }),
+        jsx('text', { style: { color: active ? accent : muted }, children: label }),
       ],
     })
   }

package/src/menubar.js

@@ -1,68 +1,8 @@
 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,
-  })
-}
+import { getInstanceLayout, getContext } from './renderer.js'
+import { Dropdown, followCursor, placeDropdown, overlayDropdown } from './dropdown.js'
 
 function renderHotkeyLabel(label, hotkey, { hotkeyColor, textColor, bold, hotkeyBold, hotkeyUnderline }) {
   if (!hotkey) {
@@ -93,8 +33,8 @@ function renderHotkeyLabel(label, hotkey, { hotkeyColor, textColor, bold, hotkey
   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()
+export function MenuBar({ items, focused = false, maxVisible = 10, onSubmit, hotkeyColor: hotkeyColorProp, style: userStyle }) {
+  const { accent = 'cyan', accentText = 'black' } = useTheme()
   const hotkeyColor = hotkeyColorProp ?? accent
 
   const [openIndex, setOpenIndex] = createSignal(-1)
@@ -109,8 +49,8 @@ export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hot
     const { key } = event
     const isOpen = openIndex() >= 0
 
-    const navKeys = ['h', 'l', 'left', 'right', 'return', 'space', 'escape']
-    if (!isOpen && !navKeys.includes(key)) {
+    // explicit hotkeys win over nav keys, so a menu bound to h/l/space/etc is still reachable
+    if (!isOpen) {
       const match = items.findIndex(m => m.hotkey && m.hotkey.toLowerCase() === key.toLowerCase())
       if (match >= 0) {
         setActiveIndex(match)
@@ -143,7 +83,7 @@ export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hot
         if (len > 0) {
           const child = children[cursor()]
           if (child) {
-            onSelect?.({ menu: menu.label, item: child.label ?? child, value: child.value ?? child.label ?? child })
+            onSubmit?.({ menu: menu.label, item: child.label ?? child, value: child.value ?? child.label ?? child })
           }
         }
         setOpenIndex(-1)
@@ -160,7 +100,7 @@ export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hot
       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 })
+        onSubmit?.({ menu: menu.label, item: child.label ?? child, value: child.value ?? child.label ?? child })
         setOpenIndex(-1)
         event.stopPropagation()
         return
@@ -208,6 +148,7 @@ export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hot
     const instLayout = getInstanceLayout()
     const ctx = getContext()
     const termH = ctx?.stream?.rows ?? 24
+    const termW = ctx?.stream?.columns ?? 80
 
     let itemX = 0
     for (let i = 0; i < openIndex(); i++) {
@@ -215,64 +156,54 @@ export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hot
       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 { direction, visibleCount } = placeDropdown({
+      anchorTop: instLayout.y,
+      itemCount: openChildren.length,
+      maxVisible,
+      termH,
+    })
+
+    const cur = cursor()
+    const newScroll = followCursor(cur, scroll(), visibleCount, openChildren.length)
+    if (newScroll !== scroll()) setScroll(newScroll)
+
+    const maxLen = openChildren.reduce((m, v) => Math.max(m, (v.label ?? v).length), 0)
+    const scrollable = openChildren.length > visibleCount
+    const dropWidth = maxLen + 4 + (scrollable ? 2 : 0)
+
+    const commit = (item) => {
+      onSubmit?.({ menu: openMenu.label, item: item.label ?? item, value: item.value ?? item.label ?? item })
+      setOpenIndex(-1)
     }
 
-    const visibleCount = Math.max(1, maxRows)
+    const renderRow = (item, { isCursor }) => jsx('box', {
+      style: { bg: isCursor ? accent : null, paddingX: 1, flexGrow: 1 },
+      children: renderHotkeyLabel(item.label ?? item, item.hotkey, {
+        hotkeyColor: isCursor ? accentText : hotkeyColor,
+        textColor: isCursor ? accentText : null,
+        bold: isCursor,
+        hotkeyBold: true,
+        hotkeyUnderline: true,
+      }),
+    })
 
-    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, {
+    const dropdown = jsx(Dropdown, {
       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)
-      },
+      width: dropWidth,
+      onSubmit: commit,
+      onClose: () => setOpenIndex(-1),
       onCursorChange: (idx) => setCursor(idx),
-      accent,
-      hotkeyColor,
-      direction,
+      renderRow,
+      style: { border: 'single', borderColor: accent, bg: null, accent },
     })
 
-    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 })
+    overlayDropdown({ x: absX, y: absY, termW, termH, dropdown })
   }
 
   const barChildren = items.map((menu, i) => {
@@ -287,11 +218,11 @@ export function MenuBar({ items, focused = false, maxVisible = 10, onSelect, hot
 
     if (isItemOpen && focused) {
       bg = accent
-      color = 'black'
+      color = accentText
       bold = true
     } else if (isActive && focused) {
       bg = accent
-      color = 'black'
+      color = accentText
       bold = true
     }
 

package/src/miller-nav.js

@@ -1,8 +1,21 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal, batch } from './signal.js'
-import { useInput, useMouse, useTheme, useLayout } from './hooks.js'
+import { useInput, useMouse, useTheme, useLayout, useStdout } from './hooks.js'
+import { registerHook } from './renderer.js'
 import { List } from './list.js'
 
+function sameColumn(a, b) {
+  if (a === b) return true
+  if (!a || !b) return false
+  if (a.parentId !== b.parentId || a.selected !== b.selected) return false
+  if (a.items === b.items) return true
+  if (a.items.length !== b.items.length) return false
+  for (let i = 0; i < a.items.length; i++) {
+    if (a.items[i] !== b.items[i]) return false
+  }
+  return true
+}
+
 function columnWidth(items, maxChars) {
   if (!items.length) return 0
   let longest = items.reduce((max, item) => {
@@ -13,10 +26,10 @@ function columnWidth(items, maxChars) {
   return Math.min(longest + 5, 25)
 }
 
-function defaultRenderItem(accent, item, { selected, focused, column }) {
+function defaultRenderItem({ accent, accentText }, 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
+  const fg = selected && focused ? accentText : null
   return jsx('box', {
     style: { bg, flexDirection: 'row' },
     children: jsxs('text', {
@@ -41,8 +54,9 @@ export function MillerNav({
   dividerChar = '\u258f',
   dividerColor = '#333333',
 }) {
-  const { accent = 'cyan' } = useTheme()
+  const { accent = 'cyan', accentText = 'black' } = useTheme()
   const layout = useLayout()
+  const stdout = useStdout()
 
   const focusedMax = typeof maxChars === 'number' ? maxChars : maxChars.focused ?? 20
   const unfocusedMax = typeof maxChars === 'number' ? maxChars : maxChars.unfocused ?? 10
@@ -50,6 +64,7 @@ export function MillerNav({
   const [stack, setStack] = createSignal([{ parentId: null, items: rootItems, selected: 0 }])
   const [depth, setDepth] = createSignal(0)
   const [focusCol, setFocusCol] = createSignal(0)
+  const prevSel = registerHook(() => ({ item: undefined, column: -1, emitted: false }))
 
   function activeColumnIndex() {
     return depth() + focusCol()
@@ -76,18 +91,25 @@ export function MillerNav({
 
   function emitSelection() {
     if (!onSelectionChange) return
-    onSelectionChange({ item: activeItem(), breadcrumb: breadcrumb(), column: focusCol() })
+    const item = activeItem()
+    const column = focusCol()
+    if (prevSel.emitted && item === prevSel.item && column === prevSel.column) return
+    prevSel.item = item
+    prevSel.column = column
+    prevSel.emitted = true
+    onSelectionChange({ item, breadcrumb: breadcrumb(), column })
   }
 
   function syncView() {
-    const s = stack().slice()
+    const cur = stack()
     const d = depth()
-    const left = s[d]
+    const left = cur[d]
 
+    const s = cur.slice()
     if (left && left.items.length) {
       const sel = left.items[left.selected]
       const children = getChildren(sel)
-      const prevRight = s[d + 1]
+      const prevRight = cur[d + 1]
       const keepSelected = (prevRight && prevRight.parentId === sel)
         ? Math.min(prevRight.selected, Math.max(0, children.length - 1))
         : 0
@@ -97,7 +119,10 @@ export function MillerNav({
       s.length = d + 1
     }
 
-    setStack(s)
+    // signals compare by reference, so an unconditional write of a fresh array
+    // would schedule a frame every frame - only write when the view really changed
+    const changed = s.length !== cur.length || s.some((col, i) => !sameColumn(col, cur[i]))
+    if (changed) setStack(s)
 
     const right = s[d + 1]
     if (!right || !right.items.length) {
@@ -197,7 +222,7 @@ export function MillerNav({
     syncView()
   }
 
-  const render = renderItem || defaultRenderItem.bind(null, accent)
+  const render = renderItem || defaultRenderItem.bind(null, { accent, accentText })
 
   function NoteColumn({ items, selected, onSelect, isFocused, maxC, style: extraStyle }) {
     if (!items.length) return null
@@ -283,7 +308,7 @@ export function MillerNav({
   }
 
   if (divider) {
-    const rows = layout.height || process.stdout.rows
+    const rows = layout.height || stdout.rows || 24
     const bar = Array.from({ length: rows }, () => dividerChar).join('\n')
     children.push(jsx('box', {
       key: 'divider',