@trendr/core 0.4.0 → 0.4.3

package/package.json

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

package/src/focus.js

@@ -40,6 +40,7 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
   function sweep() {
     const prevGen = state.gen
     state.gen = prevGen + 1
+    state.seq = 0
     if (prevGen === 0) return
 
     const stale = state.items.filter(i => i.gen < prevGen)
@@ -71,21 +72,32 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     return name
   }
 
+  // cycle order follows this frame's registration order, not first-ever
+  // registration: a conditionally rendered field slots in where it is
+  // declared instead of appending to the end of the tab order
   function liveItems() {
-    return state.items.filter(i => i.gen === state.gen)
+    return state.items.filter(i => i.gen === state.gen).sort((a, b) => a.seq - b.seq)
   }
 
   function item(name) {
     const existing = state.items.find(i => i.name === name)
-    if (existing) existing.gen = state.gen
-    else state.items.push({ name, type: 'item', gen: state.gen })
+    if (existing) {
+      existing.gen = state.gen
+      existing.seq = state.seq++
+    } else {
+      state.items.push({ name, type: 'item', gen: state.gen, seq: state.seq++ })
+    }
     if (state.current() == null) state.setCurrent(name)
   }
 
   function group(name, { items: subItems = [], navigate = 'both', wrap = false } = {}) {
     const existing = state.items.find(i => i.name === name)
-    if (existing) existing.gen = state.gen
-    else state.items.push({ name, type: 'group', gen: state.gen })
+    if (existing) {
+      existing.gen = state.gen
+      existing.seq = state.seq++
+    } else {
+      state.items.push({ name, type: 'group', gen: state.gen, seq: state.seq++ })
+    }
 
     let g = state.groups.get(name)
     if (!g) {

package/src/menu.js

@@ -1,4 +1,4 @@
-import { jsx } from '../jsx-runtime.js'
+import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useTheme } from './hooks.js'
 import { List } from './list.js'
@@ -21,6 +21,7 @@ export function Menu({
   renderItem,
   arrow = '›',
   vimKeys = false,
+  counter = false,
 }) {
   const { accent = 'cyan', muted = 'gray' } = useTheme()
   const [internal, setInternal] = createSignal(0)
@@ -77,7 +78,7 @@ export function Menu({
 
   const render = renderItem ?? defaultRender
 
-  return jsx('box', {
+  const list = jsx('box', {
     style: { height, minHeight: height },
     children: jsx(List, {
       items,
@@ -91,4 +92,19 @@ export function Menu({
       renderItem: (item, ctx) => render(item, { active: ctx.selected, index: ctx.index }),
     }),
   })
+
+  // counter renders only when the list overflows its viewport, so callers
+  // can enable it unconditionally without adding noise to short lists
+  if (!counter || len <= maxVisible) return list
+
+  return jsxs('box', {
+    style: { flexDirection: 'column' },
+    children: [
+      list,
+      jsx('text', {
+        style: { color: muted, dim: true },
+        children: `${(selected + 1).toLocaleString()}/${len.toLocaleString()}`,
+      }),
+    ],
+  })
 }

package/src/pick-list.js

@@ -4,7 +4,7 @@ import { useInput, useLayout, useTheme, useCursor } from './hooks.js'
 import { registerHook } from './renderer.js'
 import { List } from './list.js'
 
-export function PickList({ items, onSubmit, onCancel, onChange, onCursorChange, focused = true, placeholder = 'search...', filter: filterFn, renderItem, maxVisible = 10, scrollbar = false, scrolloff = 0, itemHeight = 1, itemGap = 0, gap = 0, clearOnSubmit = false, style: userStyle, cursor: cursorProp }) {
+export function PickList({ items, onSubmit, onCancel, onChange, onCursorChange, focused = true, placeholder = 'search...', filter: filterFn, renderItem, maxVisible = 10, scrollbar = false, scrolloff = 0, itemHeight = 1, itemGap = 0, gap = 0, clearOnSubmit = false, counter = false, style: userStyle, cursor: cursorProp }) {
   const { accent = 'cyan', accentText = 'black', muted = 'gray' } = useTheme()
   const defaults = {
     borderColor: accent,
@@ -205,8 +205,17 @@ export function PickList({ items, onSubmit, onCancel, onChange, onCursorChange,
     renderItem: listRenderItem,
   })
 
+  // counter renders only when the filtered list overflows its viewport, so
+  // callers can enable it unconditionally without adding noise to short lists
+  const counterEl = counter && filtered.length > maxVisible
+    ? jsx('text', {
+        style: { color: muted, dim: true },
+        children: `${(filtered.length === 0 ? 0 : cursor + 1).toLocaleString()}/${filtered.length.toLocaleString()}`,
+      })
+    : null
+
   return jsxs('box', {
     style: { flexDirection: 'column', flexGrow: 1, gap },
-    children: [inputEl, list],
+    children: counterEl ? [inputEl, list, counterEl] : [inputEl, list],
   })
 }

package/src/scroll-box.js

@@ -8,12 +8,17 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
   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)