@trendr/core 0.4.1 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.4.1",
+  "version": "0.4.4",
   "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/text-area.js

@@ -124,7 +124,7 @@ function ensureVisible(cursorRow, scroll, height, totalLines) {
   return scroll
 }
 
-export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, 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, color }) {
   const [value, setValue] = createSignal('')
   const [cursor, setCursor] = createSignal(0)
   if (valueProp !== undefined && valueProp !== value()) {
@@ -345,7 +345,7 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
     const hasCursor = focused && row === displayPos.row
 
     if (!hasCursor) {
-      return jsx('text', { key: row, children: content || ' ' })
+      return jsx('text', { key: row, style: color ? { color } : {}, children: content || ' ' })
     }
 
     const cursorIdx = Math.max(line.start, Math.min(c, line.end))
@@ -358,9 +358,9 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
       key: row,
       style: { flexDirection: 'row', height: 1 },
       children: [
-        before && jsx('text', { children: before }),
+        before && jsx('text', { style: color ? { color } : {}, children: before }),
         jsx('text', { style: cs ?? {}, children: cursorChar }),
-        after && jsx('text', { children: after }),
+        after && jsx('text', { style: color ? { color } : {}, children: after }),
       ],
     })
   })