@trendr/core 0.2.6 → 0.2.8

package/index.js

@@ -23,7 +23,7 @@ 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'
+export { useFocus, useFocusTrap } from './src/focus.js'
 export { useHotkey } from './src/hotkey.js'
 export { useToast } from './src/toast.js'
 export { Fragment } from './src/element.js'

package/package.json

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

package/src/focus.js

@@ -1,7 +1,36 @@
-import { createSignalRaw } from './signal.js'
+import { createSignalRaw, onCleanup } from './signal.js'
 import { registerHook } from './renderer.js'
 import { useInput } from './hooks.js'
 
+let focusTrapStack = []
+
+export function useFocusTrap(active) {
+  const state = registerHook(() => {
+    const id = Symbol()
+    onCleanup(() => {
+      const idx = focusTrapStack.indexOf(id)
+      if (idx >= 0) focusTrapStack.splice(idx, 1)
+    })
+    return { id, wasActive: false }
+  })
+
+  if (active && !state.wasActive) {
+    focusTrapStack.push(state.id)
+    state.wasActive = true
+  } else if (!active && state.wasActive) {
+    const idx = focusTrapStack.indexOf(state.id)
+    if (idx >= 0) focusTrapStack.splice(idx, 1)
+    state.wasActive = false
+  }
+
+  useInput((event) => {
+    if (!active) return
+    if (event.key === 'tab' || event.key === 'shift-tab') {
+      event.stopPropagation()
+    }
+  })
+}
+
 export function useFocus({ initial, cycle = 'tab' } = {}) {
   const state = registerHook(() => {
     const [current, setCurrent] = createSignalRaw(initial ?? null)
@@ -93,6 +122,7 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     const cur = state.current()
 
     if (state.stack.length > 0) return
+    if (focusTrapStack.length > 0) return
 
     if (cycle === 'tab' && (key === 'tab' || key === 'shift-tab')) {
       const idx = findTopLevel(cur)

package/src/layout.js

@@ -259,7 +259,7 @@ function measureChild(child, cs, isRow, availW, availH) {
     const text = extractText(leaf)
     const overflow = cs.overflow
     if (!text) { w = explicitW ?? 0; h = explicitH ?? 1 }
-    else if (overflow === 'nowrap' || overflow === 'truncate') {
+    else if (overflow === 'nowrap' || overflow === 'truncate' || overflow === 'clip') {
       w = explicitW ?? Math.min(availW, measureText(text))
       h = explicitH ?? 1
     } else {

package/src/list.js

@@ -1,16 +1,23 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 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, renderItem, header, headerHeight = 1, focused = true, interactive = focused, itemHeight = 1, scrollbar = false, stickyHeader = false, gap = 0, scrolloff = 2 }) {
+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()
   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
 
+  if (onCursorChange && selected !== prevCursor.index && items.length > 0) {
+    prevCursor.index = selected
+    onCursorChange(items[selected], selected)
+  }
+
   const viewH = layout.height
   const contentH = layout.contentHeight ?? 0
   const headerH = header ? headerHeight : 0
@@ -125,6 +132,10 @@ export function List({ items, selected: selectedProp, onSelect, renderItem, head
     if (itemTop - margin < scrollOffset) scrollOffset = itemTop - margin
     if (itemBottom + margin > scrollOffset + scrollViewH) scrollOffset = itemBottom + margin - scrollViewH
     scrollOffset = Math.max(0, Math.min(maxOffset, Math.round(scrollOffset)))
+    // hard guarantee: selected item must be visible regardless of margin overshoot
+    if (itemTop < scrollOffset) scrollOffset = itemTop
+    if (itemBottom > scrollOffset + scrollViewH) scrollOffset = itemBottom - scrollViewH
+    scrollOffset = Math.max(0, Math.min(maxOffset, Math.round(scrollOffset)))
     if (scrollOffset !== scrollState()) setScrollState(scrollOffset)
   }
 

package/src/modal.js

@@ -1,10 +1,13 @@
 import { jsx } from '../jsx-runtime.js'
 import { useInput, useTheme } from './hooks.js'
 import { registerOverlay } from './renderer.js'
+import { useFocusTrap } from './focus.js'
 
 export function Modal({ open, onClose, title, children, width: w = 40, border = 'round' }) {
   const { accent = 'cyan' } = useTheme()
 
+  useFocusTrap(open)
+
   useInput((event) => {
     if (!open) return
     if (event.key === 'escape') {

package/src/pick-list.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useLayout, useTheme, useCursor } from './hooks.js'
+import { registerHook } from './renderer.js'
 import { List } from './list.js'
 
-export function PickList({ items, onSelect, onCancel, onChange, focused = true, placeholder = 'search...', filter: filterFn, renderItem, maxVisible = 10, scrollbar = false, scrolloff = 0, itemHeight = 1, itemGap = 0, gap = 0, clearOnSelect = false, style: userStyle, cursor: cursorProp }) {
+export function PickList({ items, onSelect, onCancel, onChange, onCursorChange, focused = true, placeholder = 'search...', filter: filterFn, renderItem, maxVisible = 10, scrollbar = false, scrolloff = 0, itemHeight = 1, itemGap = 0, gap = 0, clearOnSelect = false, style: userStyle, cursor: cursorProp }) {
   const { accent = 'cyan' } = useTheme()
   const defaults = {
     borderColor: accent,
@@ -33,6 +34,14 @@ export function PickList({ items, onSelect, onCancel, onChange, focused = true,
   if (cursor >= filtered.length) cursor = Math.max(0, filtered.length - 1)
   if (cursor !== listCursor()) setListCursor(cursor)
 
+  const prevCursor = registerHook(() => ({ index: -1, item: undefined }))
+  const cursorItem = filtered.length > 0 ? filtered[cursor] : undefined
+  if (onCursorChange && (cursor !== prevCursor.index || cursorItem !== prevCursor.item)) {
+    prevCursor.index = cursor
+    prevCursor.item = cursorItem
+    if (cursorItem !== undefined) onCursorChange(cursorItem, cursor)
+  }
+
   function updateText(v, c) {
     setQuery(v)
     setTextCursor(c)

package/src/renderer.js

@@ -321,7 +321,8 @@ function paintTree(node, buf, clip, offset, prevBuf) {
     if (!text) return
 
     const truncate = style.overflow === 'truncate'
-    const wrap = style.overflow !== 'nowrap' && !truncate
+    const clip = style.overflow === 'clip'
+    const wrap = style.overflow !== 'nowrap' && !truncate && !clip
 
     if (wrap) {
       const lines = wordWrap(text, layout.width)

package/src/text-area.js

@@ -87,28 +87,36 @@ function ensureVisible(cursorRow, scroll, height, totalLines) {
   return scroll
 }
 
-export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp, value: valueProp, submitOnEnter = false }) {
+export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp, value: valueProp, submitOnEnter = false }) {
   const [value, setValue] = createSignal('')
   const [cursor, setCursor] = createSignal(0)
-  const _prev = registerHook(() => ({ value: undefined }))
-  if (valueProp !== undefined && valueProp !== _prev.value) {
-    _prev.value = valueProp
+  if (valueProp !== undefined && valueProp !== value()) {
     setValue(valueProp)
-    setCursor(valueProp.length)
+    setCursor(c => Math.min(c, valueProp.length))
   }
   const ref = registerHook(() => ({ scroll: 0, goalCol: null }))
   const layout = useLayout()
   const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)
 
-  function update(v, c) {
-    setValue(v)
+  function update(next, c) {
+    const prev = value()
+    setValue(next)
     setCursor(c)
     ref.goalCol = null
-    if (onChange) onChange(v)
+    if (onChange) onChange(next, prev)
   }
 
   useInput((event) => {
     if (!focused) return
+
+    if (onKeyDown) {
+      event.value = value()
+      if (onKeyDown(event)) {
+        event.stopPropagation()
+        return
+      }
+    }
+
     resetBlink()
 
     const { key, raw, ctrl, meta } = event