@trendr/core 0.4.16 → 0.4.18

package/index.js

@@ -4,6 +4,7 @@ export { createEffect, createMemo, batch, untrack, onCleanup } from './src/signa
 export { useInput, useMouse, useResize, useInterval, useTimeout, useLayout, useHitTest, useStdout, useRepaint, useTitle, useTheme, useCursor, useFrameStats, useAsync } from './src/hooks.js'
 export { Box, Text, Spacer } from './src/components.js'
 export { TextInput } from './src/text-input.js'
+export { NumberInput } from './src/number-input.js'
 export { TextArea } from './src/text-area.js'
 export { List } from './src/list.js'
 export { Table } from './src/table.js'
@@ -20,6 +21,7 @@ export { Diff } from './src/diff-view.js'
 export { computeDiff } from './src/diff-engine.js'
 export { PickList } from './src/pick-list.js'
 export { ScrollBox } from './src/scroll-box.js'
+export { FieldList, Field } from './src/field-list.js'
 export { HorizontalScrollBox } from './src/horizontal-scroll-box.js'
 export { SplitPane } from './src/split-pane.js'
 export { MillerNav } from './src/miller-nav.js'

package/package.json

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

package/src/field-list.js

@@ -0,0 +1,56 @@
+import { jsx } from '../jsx-runtime.js'
+import { useFocus } from './focus.js'
+import { useLayout } from './hooks.js'
+import { ScrollBox } from './scroll-box.js'
+
+function toArray(children) {
+  if (children == null) return []
+  if (!Array.isArray(children)) return [children]
+  return children.flatMap(toArray)
+}
+
+export function FieldList({
+  children,
+  focused = true,
+  initialFocus,
+  focusPadding = 1,
+  scrollbar = false,
+  gap = 0,
+  style,
+}) {
+  const focus = useFocus({ initial: initialFocus, active: focused })
+  const fieldContext = { focus, active: focused }
+  const fields = toArray(children).map((child) => {
+    if (child == null || typeof child !== 'object') return child
+    return {
+      ...child,
+      props: { ...child.props, fieldContext },
+    }
+  })
+
+  return jsx(ScrollBox, {
+    focused,
+    followFocus: focus,
+    focusPadding,
+    scrollbar,
+    gap,
+    style,
+    children: fields,
+  })
+}
+
+export function Field({ name, disabled = false, children, style, fieldContext }) {
+  if (!fieldContext) throw new Error('Field must be a direct child of FieldList')
+  if (name == null) throw new Error('Field requires a name')
+
+  const { focus, active } = fieldContext
+  const layout = useLayout()
+
+  if (!disabled) focus.item(name, layout)
+  const focused = active && !disabled && focus.is(name)
+
+  return jsx('box', {
+    style: { flexDirection: 'column', flexShrink: 0, ...style },
+    children: typeof children === 'function' ? children({ focused, disabled }) : children,
+  })
+}

package/src/focus.js

@@ -17,7 +17,7 @@ export function useFocusTrap(active) {
   })
 }
 
-export function useFocus({ initial, cycle = 'tab' } = {}) {
+export function useFocus({ initial, cycle = 'tab', active = true } = {}) {
   const state = registerHook(() => {
     const [current, setCurrent] = createSignalRaw(initial ?? null)
     return {
@@ -170,6 +170,7 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
   }
 
   useInput((event) => {
+    if (!active) return
     const items = liveItems()
     if (items.length === 0) return
 

package/src/number-input.js

@@ -0,0 +1,71 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput } from './hooks.js'
+import { TextInput } from './text-input.js'
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function stepPrecision(step) {
+  const decimal = String(step).split('.')[1]
+  return decimal?.length ?? 0
+}
+
+export function NumberInput({
+  value = 0,
+  onChange,
+  focused = true,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  width = 8,
+  placeholder,
+}) {
+  const [draft, setDraft] = createSignal(String(value))
+  const [syncedValue, setSyncedValue] = createSignal(value)
+
+  if (value !== syncedValue()) {
+    setSyncedValue(value)
+    setDraft(String(value))
+  }
+
+  function update(next) {
+    const bounded = clamp(next, min, max)
+    const precision = stepPrecision(step)
+    const normalized = precision > 0 ? Number(bounded.toFixed(precision)) : bounded
+    setDraft(String(normalized))
+    setSyncedValue(normalized)
+    onChange?.(normalized)
+  }
+
+  useInput((event) => {
+    if (!focused || (event.key !== 'up' && event.key !== 'down')) return
+    const parsed = Number(draft())
+    const current = Number.isFinite(parsed) ? parsed : Number(value) || 0
+    update(current + (event.key === 'up' ? step : -step))
+    event.stopPropagation()
+  })
+
+  function updateDraft(next) {
+    if (!/^-?(?:\d+\.?\d*|\.\d*)?$/.test(next)) return
+    setDraft(next)
+    const parsed = Number(next)
+    if (next !== '' && next !== '-' && next !== '.' && next !== '-.' && Number.isFinite(parsed)) {
+      const bounded = clamp(parsed, min, max)
+      if (bounded !== parsed) setDraft(String(bounded))
+      setSyncedValue(bounded)
+      onChange?.(bounded)
+    }
+  }
+
+  return jsx('box', {
+    style: { width, minWidth: width, height: 1 },
+    children: jsx(TextInput, {
+      value: draft(),
+      focused,
+      placeholder,
+      onChange: updateDraft,
+    }),
+  })
+}

package/src/scroll-box.js

@@ -25,7 +25,7 @@ export function ScrollBox({ children, focused = true, followFocus, focusPadding
   if (followFocus) {
     const target = typeof followFocus === 'function' ? followFocus() : followFocus.currentLayout?.()
     if (target && visibleH > 0) {
-      const top = target.y - layout.y + clamped
+      const top = target.y - layout.y
       const bottom = top + Math.max(1, target.height ?? 1)
       const padding = Math.max(0, focusPadding)
       const next = top < clamped + padding

package/src/text-input.js

@@ -37,10 +37,16 @@ function firstCodePoint(s) {
   return s.slice(0, nextBoundary(s, 0))
 }
 
-export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused = true, initialValue, clearOnSubmit = false, cursor: cursorProp }) {
-  const init = initialValue ?? ''
+export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused = true, initialValue, value: valueProp, clearOnSubmit = false, cursor: cursorProp }) {
+  const init = valueProp ?? initialValue ?? ''
   const [value, setValue] = createSignal(init)
   const [cursor, setCursor] = createSignal(init.length)
+  const [controlledValue, setControlledValue] = createSignal(valueProp)
+  if (valueProp !== undefined && valueProp !== controlledValue()) {
+    setControlledValue(valueProp)
+    setValue(valueProp)
+    setCursor(valueProp.length)
+  }
   const { muted = 'gray' } = useTheme()
   const layout = useLayout()
   const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)