@trendr/core 0.4.14 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "author": "Jonathan Pyers",

package/src/focus.js

@@ -79,13 +79,14 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     return state.items.filter(i => i.gen === state.gen).sort((a, b) => a.seq - b.seq)
   }
 
-  function item(name) {
+  function item(name, layout) {
     const existing = state.items.find(i => i.name === name)
     if (existing) {
       existing.gen = state.gen
       existing.seq = state.seq++
+      existing.layout = layout
     } else {
-      state.items.push({ name, type: 'item', gen: state.gen, seq: state.seq++ })
+      state.items.push({ name, type: 'item', gen: state.gen, seq: state.seq++, layout })
     }
     if (state.current() == null) state.setCurrent(name)
   }
@@ -157,6 +158,11 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     return state.current()
   }
 
+  function currentLayout() {
+    const name = state.current()
+    return state.items.find(i => i.name === name)?.layout ?? null
+  }
+
   function findTopLevel(cur, items) {
     const parent = state.nameToParent.get(cur)
     if (parent) return items.findIndex(i => i.name === parent)
@@ -220,5 +226,5 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     }
   })
 
-  return { item, group, is, focus, push, pop, current }
+  return { item, group, is, focus, push, pop, current, currentLayout }
 }

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, gap = 0, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
+export function ScrollBox({ children, focused = true, followFocus, focusPadding = 0, scrollOffset: offsetProp, onScroll, scrollbar = false, gap = 0, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
   const { accent = 'cyan', muted = 'gray' } = useTheme()
   const [offsetInternal, setOffsetInternal] = createSignal(0)
   const layout = useLayout()
@@ -22,6 +22,21 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
   const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
   const clamped = clamp(offset)
 
+  if (followFocus) {
+    const target = typeof followFocus === 'function' ? followFocus() : followFocus.currentLayout?.()
+    if (target && visibleH > 0) {
+      const top = target.y - layout.y + clamped
+      const bottom = top + Math.max(1, target.height ?? 1)
+      const padding = Math.max(0, focusPadding)
+      const next = top < clamped + padding
+        ? top - padding
+        : bottom > clamped + visibleH - padding
+          ? bottom - visibleH + padding
+          : clamped
+      if (clamp(next) !== clamped) setOffset(next)
+    }
+  }
+
   useInput(({ key, ctrl }) => {
     if (!focused) return
     if (contentH <= visibleH) return