@trendr/core 0.4.17 → 0.4.19

package/README.md

@@ -547,6 +547,7 @@ Multi-line text input. Auto-grows up to `maxHeight`, then scrolls.
   value={draft()}          // controlled value (optional)
   submitOnEnter={false}    // default false: Alt+Enter submits, Enter inserts newline.
                            // true flips it: Enter submits, Shift/Alt+Enter inserts newline
+  newlineOnBackslashEnter={false} // replace a backslash immediately before Enter with a newline
   clearOnSubmit={true}     // reset to empty on submit (default true)
   cursor={{ blink: true }} // per-component cursor config (overrides theme)
   onChange={(v, prev) => {}} // every edit, receives new and previous value

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.17",
+  "version": "0.4.19",
   "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/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, color, lineCounter = false }) {
+export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp, value: valueProp, submitOnEnter = false, newlineOnBackslashEnter = false, color, lineCounter = false }) {
   const [value, setValue] = createSignal('')
   const [cursor, setCursor] = createSignal(0)
   if (valueProp !== undefined && valueProp !== value()) {
@@ -169,6 +169,7 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
       return
     }
 
+    const isBackslashNewlineKey = newlineOnBackslashEnter && key === 'return' && !meta && c > 0 && v[c - 1] === '\\'
     const isSubmitKey = submitOnEnter
       ? (key === 'return' && !meta && !shift)
       : (meta && key === 'return')
@@ -176,6 +177,12 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
       ? ((shift && key === 'return') || (meta && key === 'return'))
       : (key === 'return')
 
+    if (isBackslashNewlineKey) {
+      update(v.slice(0, c - 1) + '\n' + v.slice(c), c)
+      event.stopPropagation()
+      return
+    }
+
     if (isSubmitKey) {
       if (onSubmit) onSubmit(v)
       if (clearOnSubmit) update('', 0)

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)