@trendr/core 0.2.11 → 0.4.1

package/src/scroll-box.js

@@ -3,17 +3,22 @@ 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, gap = 0, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
-  const { accent = 'cyan' } = useTheme()
+  const { accent = 'cyan', muted = 'gray' } = useTheme()
   const [offsetInternal, setOffsetInternal] = createSignal(0)
   const layout = useLayout()
 
   const offset = offsetProp ?? offsetInternal()
-  const setOffset = onScroll ?? setOffsetInternal
 
   const visibleH = layout.height
   const contentH = layout.contentHeight ?? 0
   const maxOffset = Math.max(0, contentH - visibleH)
 
+  const setOffset = (v) => {
+    const next = Math.max(0, Math.min(maxOffset, v))
+    if (onScroll) onScroll(next, { atBottom: next >= maxOffset, maxOffset })
+    else setOffsetInternal(next)
+  }
+
   const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
   const clamped = clamp(offset)
 
@@ -24,24 +29,25 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
     const pageH = visibleH || 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
+    // wheel scrolls by position, not keyboard focus - whatever is under the cursor
     if (event.action !== 'scroll') return
     if (contentH <= visibleH) 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' && event.direction !== 'down') return
+    if (event.direction === 'up') setOffset(clamp(clamped - 3))
+    else setOffset(clamp(clamped + 3))
     event.stopPropagation()
   })
 
@@ -87,7 +93,7 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
       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 ? thumbChar : trackChar,
         })
       )

package/src/scrollable-text.js

@@ -4,7 +4,7 @@ import { useInput, useMouse, useLayout, useTheme, useScrollDrag } from './hooks.
 import { wordWrap } from './wrap.js'
 
 export function ScrollableText({ content = '', focused = true, scrollOffset: offsetProp, onScroll, width: widthProp, scrollbar = false, wrap = true, thumbChar = '\u2588', trackChar = '\u2502' }) {
-  const { accent = 'cyan' } = useTheme()
+  const { accent = 'cyan', muted = 'gray' } = useTheme()
   const [offsetInternal, setOffsetInternal] = createSignal(0)
   const layout = useLayout()
 
@@ -43,6 +43,7 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
     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' && event.direction !== 'down') return
     if (event.direction === 'up') setOffset(clamp(clamped - 3))
     else setOffset(clamp(clamped + 3))
     event.stopPropagation()
@@ -81,7 +82,7 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
   const children = visible.map((line, i) => {
     const isThumb = i >= thumbStart && i < thumbStart + thumbH
     const barChar = isThumb ? thumbChar : trackChar
-    const barColor = isThumb ? (focused ? accent : 'gray') : 'gray'
+    const barColor = isThumb ? (focused ? accent : muted) : muted
 
     return jsx('box', {
       key: i,

package/src/select.js

@@ -1,153 +1,22 @@
 import { jsx } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useMouse, useLayout, useTheme } from './hooks.js'
-import { registerOverlay, getInstanceLayout, getContext, registerHook } from './renderer.js'
+import { getInstanceLayout, getContext } from './renderer.js'
+import { Dropdown, followCursor, placeDropdown, overlayDropdown } from './dropdown.js'
 
-function SelectDropdown({ items, cursor, scroll, visibleCount, onSelect, onClose, onCursorChange, renderItem, style: s, accent, dropWidth }) {
-  const layout = useLayout()
-  const drag = registerHook(() => ({ active: false, startY: 0, startCursor: 0 }))
-
-  useMouse((event) => {
-    if (event.action === 'release') {
-      if (drag.active) drag.active = false
-      return
-    }
+const itemLabel = (item) => String(item?.label ?? item)
 
-    if (event.action === 'drag' && drag.active) {
-      const thumbH = Math.max(1, Math.round((visibleCount / items.length) * visibleCount))
-      const dy = event.y - drag.startY
-      const travel = Math.max(1, visibleCount - thumbH)
-      const ratio = (items.length - 1) / travel
-      const idx = Math.max(0, Math.min(items.length - 1, Math.round(drag.startCursor + dy * ratio)))
-      onCursorChange(idx)
-      event.stopPropagation()
-      return
-    }
-
-    // layout not yet computed - consume event but don't act
-    if (layout.width === 0 || layout.height === 0) {
-      event.stopPropagation()
-      return
-    }
-
-    const { x, y } = event
-    const boxRight = layout.x + dropWidth
-    const inside = x >= layout.x && x < boxRight && y >= layout.y && y < layout.y + layout.height
-
-    if (event.action === 'scroll') {
-      if (!inside) return
-      if (event.direction === 'up') onCursorChange(Math.max(0, cursor - 1))
-      else onCursorChange(Math.min(items.length - 1, cursor + 1))
-      event.stopPropagation()
-      return
-    }
-
-    if (event.action !== 'press' || event.button !== 'left') return
-
-    if (!inside) {
-      onClose()
-      event.stopPropagation()
-      return
-    }
-
-    const scrollable = items.length > visibleCount
-    if (scrollable && x >= boxRight - 4) {
-      const maxSc = items.length - visibleCount
-      const thumbH = Math.max(1, Math.round((visibleCount / items.length) * visibleCount))
-      const thumbStart = maxSc > 0 ? Math.round((scroll / maxSc) * (visibleCount - thumbH)) : 0
-      const barY = layout.y + 1 + thumbStart
-      if (y >= barY && y < barY + thumbH) {
-        drag.active = true
-        drag.startY = y
-        drag.startCursor = cursor
-      }
-      event.stopPropagation()
-      return
-    }
-
-    const relY = y - layout.y - 1
-    if (relY >= 0 && relY < visibleCount) {
-      const clickedIdx = relY + scroll
-      if (clickedIdx >= 0 && clickedIdx < items.length) {
-        onSelect(items[clickedIdx])
-        event.stopPropagation()
-      }
-    }
-  })
-
-  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.length), 0)
-
-  const dropdownChildren = visible.map((item, vi) => {
-    const i = vi + scroll
-    const isCursor = i === cursor
-
-    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'),
-          }),
-        ],
-      })
-    }
-
-    if (renderItem) {
-      const content = jsx('box', {
-        key: scrollable ? undefined : i,
-        style: { bg: isCursor ? s.cursorBg : s.bg, flexGrow: 1 },
-        children: renderItem(item, { selected: isCursor, index: i }),
-      })
-      return row(content)
-    }
-
-    const content = jsx('box', {
-      key: scrollable ? undefined : i,
-      style: { bg: isCursor ? s.cursorBg : s.bg, paddingX: 1, flexGrow: 1 },
-      children: jsx('text', {
-        style: { color: isCursor ? s.cursorTextColor : s.color },
-        children: item,
-      }),
-    })
-    return row(content)
-  })
-
-  const dropdownH = visibleCount + 2
-
-  return jsx('box', {
-    style: {
-      flexDirection: 'column',
-      border: s.border,
-      borderColor: s.borderColor,
-      height: dropdownH,
-      width: maxLen + 4 + (scrollable ? 2 : 0),
-      bg: s.bg,
-    },
-    children: dropdownChildren,
-  })
-}
-
-export function Select({ items, selected, onSelect, focused = false, overlay = false, maxVisible = 10, placeholder = 'select...', renderItem, style: userStyle, openIcon = '\u25b2', closedIcon = '\u25bc' }) {
-  const { accent = 'cyan' } = useTheme()
+export function Select({ items = [], selected, onChange, onFocus, focused = false, overlay = false, maxVisible = 10, placeholder = 'select...', renderItem, style: userStyle, openIcon = '▲', closedIcon = '▼' }) {
+  const { accent = 'cyan', accentText = 'black', muted = 'gray' } = useTheme()
   const defaults = {
     border: 'single',
     borderColor: accent,
     bg: null,
     cursorBg: accent,
-    cursorTextColor: 'black',
+    cursorTextColor: accentText,
     color: null,
     focusedBg: accent,
-    focusedColor: 'black',
+    focusedColor: accentText,
   }
   const s = { ...defaults, ...userStyle }
 
@@ -172,7 +41,11 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
     const len = items.length
     if (key === 'up' || key === 'k') { setCursor(c => Math.max(0, c - 1)); event.stopPropagation() }
     else if (key === 'down' || key === 'j') { setCursor(c => Math.min(len - 1, c + 1)); event.stopPropagation() }
-    else if (key === 'return' || key === 'space') { onSelect?.(items[cursor()]); setOpen(false); event.stopPropagation() }
+    else if (key === 'return' || key === 'space') {
+      if (len > 0) onChange?.(items[Math.min(cursor(), len - 1)])
+      setOpen(false)
+      event.stopPropagation()
+    }
     else if (key === 'escape') { setOpen(false); event.stopPropagation() }
   })
 
@@ -181,6 +54,7 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
   useMouse((event) => {
     if (event.action === 'scroll') {
       if (!focused || !open()) return
+      if (event.direction !== 'up' && event.direction !== 'down') return
       const len = items.length
       if (event.direction === 'up') setCursor(c => Math.max(0, c - 1))
       else setCursor(c => Math.min(len - 1, c + 1))
@@ -193,6 +67,12 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
     const onCollapsed = x >= layout.x && x < layout.x + layout.width && y === layout.y
 
     if (onCollapsed) {
+      // an unfocused select would open a keyboard-dead dropdown - only allow
+      // click-to-open when focused, or when the app can move focus here
+      if (!focused) {
+        if (!onFocus) return
+        onFocus()
+      }
       if (open()) {
         setOpen(false)
       } else {
@@ -204,66 +84,78 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
     }
   })
 
-  const display = selected ?? placeholder
+  const display = selected != null ? itemLabel(selected) : placeholder
   const collapsed = jsx('text', {
     style: {
       bg: focused ? s.focusedBg : null,
-      color: focused ? s.focusedColor : (selected ? s.color : 'gray'),
+      color: focused ? s.focusedColor : (selected != null ? s.color : muted),
       bold: focused,
     },
     children: `${open() ? openIcon : closedIcon} ${display}`,
   })
 
-  if (!open()) return collapsed
+  if (!open() || items.length === 0) return collapsed
 
-  let maxRows = Math.min(items.length, maxVisible)
+  let visibleCount = Math.min(items.length, maxVisible)
+  let direction = 'down'
+  let instLayout = null
+  let termW = 80
+  let termH = 24
 
   if (overlay) {
-    const instLayout = getInstanceLayout()
+    instLayout = getInstanceLayout()
     const ctx = getContext()
-    const termH = ctx?.stream?.rows ?? 24
-    const anchorY = instLayout.y + 1
-    const available = termH - anchorY - 2
-    if (available > 0) maxRows = Math.min(maxRows, available)
-  }
-
-  const visibleCount = 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, items.length - visibleCount))
-  if (newScroll !== sc) setScroll(newScroll)
-
-  const handleSelect = (item) => {
-    onSelect?.(item)
-    setOpen(false)
+    termH = ctx?.stream?.rows ?? 24
+    termW = ctx?.stream?.columns ?? 80
+    const placed = placeDropdown({ anchorTop: instLayout.y, itemCount: items.length, maxVisible, termH })
+    direction = placed.direction
+    visibleCount = placed.visibleCount
   }
 
-  const handleClose = () => setOpen(false)
+  const cur = Math.min(cursor(), items.length - 1)
+  const newScroll = followCursor(cur, scroll(), visibleCount, items.length)
+  if (newScroll !== scroll()) setScroll(newScroll)
 
-  const maxLen = items.reduce((m, v) => Math.max(m, v.length), 0)
+  const maxLen = items.reduce((m, v) => Math.max(m, itemLabel(v).length), 0)
   const scrollable = items.length > visibleCount
   const dropWidth = maxLen + 4 + (scrollable ? 2 : 0)
 
-  const dropdown = jsx(SelectDropdown, {
+  const renderRow = (item, { index, isCursor }) => {
+    if (renderItem) {
+      return jsx('box', {
+        style: { bg: isCursor ? s.cursorBg : s.bg, flexGrow: 1 },
+        children: renderItem(item, { selected: isCursor, index }),
+      })
+    }
+    return jsx('box', {
+      style: { bg: isCursor ? s.cursorBg : s.bg, paddingX: 1, flexGrow: 1 },
+      children: jsx('text', {
+        style: { color: isCursor ? s.cursorTextColor : s.color },
+        children: itemLabel(item),
+      }),
+    })
+  }
+
+  const dropdown = jsx(Dropdown, {
     items,
     cursor: cur,
     scroll: newScroll,
     visibleCount,
-    onSelect: handleSelect,
-    onClose: handleClose,
+    width: dropWidth,
+    onSubmit: (item) => {
+      onChange?.(item)
+      setOpen(false)
+    },
+    onClose: () => setOpen(false),
     onCursorChange: (idx) => setCursor(idx),
-    renderItem,
-    style: s,
-    accent,
-    dropWidth,
+    renderRow,
+    style: { border: s.border, borderColor: s.borderColor, bg: s.bg, accent },
   })
 
   if (overlay) {
-    registerOverlay(dropdown)
+    const dropdownH = visibleCount + 2
+    const absY = direction === 'up' ? instLayout.y - dropdownH : instLayout.y + 1
+    overlayDropdown({ x: instLayout.x, y: absY, termW, termH, dropdown })
     return collapsed
   }
 

package/src/selection.js

@@ -0,0 +1,92 @@
+import { useMouse } from './hooks.js'
+import { getContext, registerHook } from './renderer.js'
+import { osc52Copy } from './ansi.js'
+
+function normalize(a, b) {
+  const forward = a.y < b.y || (a.y === b.y && a.x <= b.x)
+  return forward
+    ? { sx: a.x, sy: a.y, ex: b.x, ey: b.y }
+    : { sx: b.x, sy: b.y, ex: a.x, ey: a.y }
+}
+
+// reads the selected region back out of the painted cell buffer. rows flagged
+// as soft wraps rejoin the previous row with a space, so copied prose comes
+// out as one paragraph regardless of the terminal width; unflagged rows keep
+// their newline, so code copies with its line structure intact. all hard rows
+// are extracted column-aligned and share one dedent, which strips the screen
+// padding common to the block while preserving relative code indentation
+export function extractSelectionText(buf, sel) {
+  const rows = []
+  const lastY = Math.min(sel.ey, buf.height - 1)
+  for (let y = Math.max(0, sel.sy); y <= lastY; y++) {
+    const to = y === sel.ey ? Math.min(sel.ex, buf.width - 1) : buf.width - 1
+    let text = ''
+    for (let x = 0; x <= to; x++) {
+      const ch = buf.cells[y * buf.width + x].ch
+      if (ch === '') continue
+      text += y === sel.sy && x < sel.sx ? ' ' : ch
+    }
+    rows.push({ text: text.replace(/\s+$/, ''), soft: !!buf.softWrap[y] })
+  }
+
+  let indent = Infinity
+  for (const row of rows) {
+    if (row.soft || row.text === '') continue
+    indent = Math.min(indent, row.text.match(/^ */)[0].length)
+  }
+  if (indent === Infinity) indent = 0
+
+  let out = ''
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i]
+    if (i === 0) out = row.text.slice(indent)
+    else if (row.soft) out += (out === '' || out.endsWith('\n') ? '' : ' ') + row.text.trim()
+    else out += '\n' + (row.text === '' ? '' : row.text.slice(indent))
+  }
+
+  return out.replace(/^\n+/, '').replace(/\s+$/, '')
+}
+
+// terminal-style click-drag text selection over the painted buffer. while
+// dragging, the covered cells render inverse; on release the text is
+// extracted, written to the system clipboard via OSC 52 (unless copy is
+// false), and passed to onCopy. registered handlers never stop propagation
+// on press, so clicks still reach interactive components underneath
+export function useSelection({ onCopy, copy = true } = {}) {
+  const state = registerHook(() => ({ anchor: null, dragging: false }))
+  const ctx = getContext()
+  if (!ctx) throw new Error('useSelection must be called within a mounted component')
+
+  useMouse((event) => {
+    if (event.action === 'press' && event.button === 'left') {
+      state.anchor = { x: event.x, y: event.y }
+      state.dragging = false
+      if (ctx.selection) {
+        ctx.selection = null
+        ctx.repaint()
+      }
+      return
+    }
+
+    if (event.action === 'drag' && state.anchor) {
+      state.dragging = true
+      ctx.selection = normalize(state.anchor, { x: event.x, y: event.y })
+      ctx.repaint()
+      return
+    }
+
+    if (event.action === 'release') {
+      if (state.dragging && ctx.selection) {
+        const text = extractSelectionText(ctx.getPaintBuffer(), ctx.selection)
+        ctx.selection = null
+        ctx.repaint()
+        if (text) {
+          if (copy) ctx.stream.write(osc52Copy(text))
+          if (onCopy) onCopy(text)
+        }
+      }
+      state.anchor = null
+      state.dragging = false
+    }
+  })
+}

package/src/shimmer.js

@@ -28,8 +28,8 @@ function lerpColor(a, b, t) {
 }
 
 export function Shimmer({ children, color, highlight, size = 3, gradient = 3, duration = 1000, delay = 500, reverse = false }) {
-  const { accent = 'cyan' } = useTheme()
-  const baseColor = color ?? 'gray'
+  const { accent = 'cyan', muted = 'gray' } = useTheme()
+  const baseColor = color ?? muted
   const hlColor = highlight ?? accent
 
   const text = typeof children === 'string' ? children : String(children ?? '')

package/src/signal.js

@@ -38,10 +38,16 @@ export function createSignalRaw(value) {
     if (v === value) return
     value = v
     if (batchDepth > 0) {
-      for (const s of subs) pendingEffects.add(s)
+      for (const s of subs) {
+        if (s.disposed) subs.delete(s)
+        else pendingEffects.add(s)
+      }
     } else {
       const snapshot = [...subs]
-      for (const s of snapshot) s.run()
+      for (const s of snapshot) {
+        if (s.disposed) subs.delete(s)
+        else s.run()
+      }
     }
     if (schedulerHook && batchDepth === 0) schedulerHook()
   }
@@ -56,11 +62,13 @@ export function createSignal(value) {
   return createSignalRaw(value)
 }
 
-export function createEffect(fn) {
+export function createEffectRaw(fn) {
   const effect = {
     fn,
     cleanup: null,
+    disposed: false,
     run() {
+      if (effect.disposed) return
       if (effect.cleanup) effect.cleanup()
       const prev = currentEffect
       currentEffect = effect
@@ -80,6 +88,13 @@ export function createEffect(fn) {
   return effect
 }
 
+export function createEffect(fn) {
+  if (hookRegistrar) {
+    return hookRegistrar(() => createEffectRaw(fn))
+  }
+  return createEffectRaw(fn)
+}
+
 export function createMemo(fn) {
   const [get, set] = createSignal(undefined)
   createEffect(() => set(fn()))
@@ -144,7 +159,9 @@ export function createScope(fn) {
 export function disposeScope(scope) {
   for (const child of scope.children) disposeScope(child)
   for (const effect of scope.effects) {
+    effect.disposed = true
     if (effect.cleanup) effect.cleanup()
+    effect.cleanup = null
   }
   for (const fn of scope.cleanups) fn()
   scope.effects.length = 0

package/src/table.js

@@ -4,8 +4,8 @@ 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, columnGap = 1 }) {
-  const { accent = 'cyan' } = useTheme()
+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', accentText = 'black', muted = 'gray' } = useTheme()
 
   const headerRow = jsxs('box', {
     style: { flexDirection: 'row', gap: columnGap },
@@ -44,7 +44,7 @@ export function Table({ columns, data, selected, onSelect, focused = true, separ
 
   const defaultRenderItem = (row, { selected: isSel }) =>
     jsxs('box', {
-      style: { flexDirection: 'row', gap: columnGap, bg: isSel ? (focused ? accent : 'gray') : null },
+      style: { flexDirection: 'row', gap: columnGap, bg: isSel ? (focused ? accent : muted) : null },
       children: columns.map((col, i) =>
         jsx('text', {
           key: i,
@@ -53,44 +53,25 @@ export function Table({ columns, data, selected, onSelect, focused = true, separ
             flexGrow: col.flexGrow,
             overflow: 'truncate',
             paddingX: col.paddingX ?? 1,
-            color: isSel && focused ? 'black' : (col.color ?? null),
+            color: isSel && focused ? accentText : (col.color ?? null),
           },
           children: col.render ? col.render(row, isSel) : String(row[col.key] ?? ''),
         })
       ),
     })
 
-  const list = jsx(List, {
+  return jsx(List, {
     items: data,
     selected,
     onSelect,
     focused,
+    header,
+    headerHeight: separator ? 2 : 1,
+    stickyHeader,
     scrollbar,
     gap,
     itemHeight,
     scrolloff,
     renderItem: renderItem || defaultRenderItem,
   })
-
-  if (!stickyHeader) {
-    return jsx(List, {
-      items: data,
-      selected,
-      onSelect,
-      focused,
-      header,
-      headerHeight: separator ? 2 : 1,
-      scrollbar,
-      stickyHeader: true,
-      gap,
-      itemHeight,
-      scrolloff,
-      renderItem: renderItem || defaultRenderItem,
-    })
-  }
-
-  return jsxs('box', {
-    style: { flexDirection: 'column', flexGrow: 1 },
-    children: [header, list],
-  })
 }

package/src/tabs.js

@@ -1,19 +1,22 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { useInput, useTheme } from './hooks.js'
 
-export function Tabs({ items, selected, onSelect, focused = true }) {
-  const { accent = 'cyan' } = useTheme()
+export function Tabs({ items = [], selected, onChange, focused = true }) {
+  const { accent = 'cyan', accentText = 'black', muted = 'gray' } = useTheme()
 
-  useInput(({ key }) => {
+  useInput((event) => {
     if (!focused) return
 
+    const { key } = event
     const idx = items.indexOf(selected)
     if (idx === -1) return
 
     if (key === 'left' || key === 'shift-tab') {
-      onSelect(items[(idx - 1 + items.length) % items.length])
+      onChange?.(items[(idx - 1 + items.length) % items.length])
+      event.stopPropagation()
     } else if (key === 'right' || key === 'tab') {
-      onSelect(items[(idx + 1) % items.length])
+      onChange?.(items[(idx + 1) % items.length])
+      event.stopPropagation()
     }
   })
 
@@ -21,11 +24,11 @@ export function Tabs({ items, selected, onSelect, focused = true }) {
     const isSelected = item === selected
     let style
     if (isSelected && focused) {
-      style = { bg: accent, color: 'black', bold: true }
+      style = { bg: accent, color: accentText, bold: true }
     } else if (isSelected) {
       style = { inverse: true, bold: true }
     } else {
-      style = { color: 'gray' }
+      style = { color: muted }
     }
     return jsx('text', { style, children: ` ${item} ` })
   })