@trendr/core 0.2.11 → 0.4.0

package/src/modal.js

@@ -42,6 +42,8 @@ export function Modal({ open, onClose, title, children, width: w = 40, border =
     children: content,
   })
 
-  registerOverlay(overlay, { backdrop: true })
+  // capture routes input dispatch to this modal's subtree only, so components
+  // behind the backdrop never see keys or mouse regardless of mount order
+  registerOverlay(overlay, { backdrop: true, capture: true })
   return null
 }

package/src/pick-list.js

@@ -4,12 +4,12 @@ import { useInput, useLayout, useTheme, useCursor } from './hooks.js'
 import { registerHook } from './renderer.js'
 import { List } from './list.js'
 
-export function PickList({ items, onSelect, onCancel, onChange, onCursorChange, focused = true, placeholder = 'search...', filter: filterFn, renderItem, maxVisible = 10, scrollbar = false, scrolloff = 0, itemHeight = 1, itemGap = 0, gap = 0, clearOnSelect = false, style: userStyle, cursor: cursorProp }) {
-  const { accent = 'cyan' } = useTheme()
+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 }) {
+  const { accent = 'cyan', accentText = 'black', muted = 'gray' } = useTheme()
   const defaults = {
     borderColor: accent,
     cursorBg: accent,
-    cursorTextColor: 'black',
+    cursorTextColor: accentText,
     color: null,
   }
   const s = { ...defaults, ...userStyle }
@@ -55,12 +55,12 @@ export function PickList({ items, onSelect, onCancel, onChange, onCursorChange,
     const { key, raw, ctrl } = event
     const len = filtered.length
 
-    if (key === 'up' || (ctrl && raw === '\x10')) {
+    if (key === 'up' || (ctrl && key === 'p')) {
       if (len > 0) setListCursor(c => Math.max(0, c - 1))
       event.stopPropagation()
       return
     }
-    if (key === 'down' || (ctrl && raw === '\x0e')) {
+    if (key === 'down' || (ctrl && key === 'n')) {
       if (len > 0) setListCursor(c => Math.min(len - 1, c + 1))
       event.stopPropagation()
       return
@@ -73,9 +73,9 @@ export function PickList({ items, onSelect, onCancel, onChange, onCursorChange,
     if (key === 'pagedown') { if (len > 0) setListCursor(c => Math.min(len - 1, c + 10)); event.stopPropagation(); return }
 
     if (key === 'return') {
-      if (filtered.length > 0 && onSelect) {
-        onSelect(filtered[cursor])
-        if (clearOnSelect) updateText('', 0)
+      if (filtered.length > 0 && onSubmit) {
+        onSubmit(filtered[cursor])
+        if (clearOnSubmit) updateText('', 0)
         event.stopPropagation()
       }
       return
@@ -108,13 +108,12 @@ export function PickList({ items, onSelect, onCancel, onChange, onCursorChange,
     if (key === 'left') { setTextCursor(Math.max(0, c - 1)); event.stopPropagation(); return }
     if (key === 'right') { setTextCursor(Math.min(v.length, c + 1)); event.stopPropagation(); return }
 
-    if (key === 'home' || (ctrl && raw === '\x01')) { setTextCursor(0); event.stopPropagation(); return }
-    if (key === 'end' || (ctrl && raw === '\x05')) { setTextCursor(v.length); event.stopPropagation(); return }
+    if (key === 'home' || (ctrl && key === 'a')) { setTextCursor(0); event.stopPropagation(); return }
+    if (key === 'end' || (ctrl && key === 'e')) { setTextCursor(v.length); event.stopPropagation(); return }
 
-    if (ctrl && raw === '\x15') { updateText(v.slice(c), 0); event.stopPropagation(); return }
-    if (ctrl && raw === '\x0b') { updateText(v.slice(0, c), c); event.stopPropagation(); return }
+    if (ctrl && key === 'k') { updateText(v.slice(0, c), c); event.stopPropagation(); return }
 
-    if (ctrl && raw === '\x17') {
+    if (ctrl && key === 'w') {
       const before = v.slice(0, c)
       const after = v.slice(c)
       const trimmed = before.replace(/\S+\s*$/, '')
@@ -137,13 +136,13 @@ export function PickList({ items, onSelect, onCancel, onChange, onCursorChange,
 
   let inputEl
   if (!v && placeholder && !focused) {
-    inputEl = jsx('text', { style: { color: 'gray' }, children: placeholder })
+    inputEl = jsx('text', { style: { color: muted }, children: placeholder })
   } else if (!v && placeholder && focused) {
     inputEl = jsxs('box', {
       style: { flexDirection: 'row', height: 1, minHeight: 1 },
       children: [
-        jsx('text', { style: cs ? { ...cs, color: cs.color ?? 'gray' } : { inverse: true, color: 'gray' }, children: placeholder[0] }),
-        placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
+        jsx('text', { style: cs ? { ...cs, color: cs.color ?? muted } : { inverse: true, color: muted }, children: placeholder[0] }),
+        placeholder.length > 1 && jsx('text', { style: { color: muted }, children: placeholder.slice(1) }),
       ],
     })
   } else {
@@ -183,7 +182,7 @@ export function PickList({ items, onSelect, onCancel, onChange, onCursorChange,
   const defaultRenderItem = (item, { selected: isCursor, focused: isFocused }) => {
     const label = typeof item === 'string' ? item : (item.label ?? item.name ?? String(item))
     return jsx('box', {
-      style: { bg: isCursor ? (isFocused ? s.cursorBg : 'gray') : null },
+      style: { bg: isCursor ? (isFocused ? s.cursorBg : muted) : null },
       children: jsx('text', {
         style: { color: isCursor ? s.cursorTextColor : s.color },
         children: ` ${label}`,

package/src/progress.js

@@ -36,14 +36,14 @@ function renderBar(variant, value, width) {
 }
 
 export function ProgressBar({ value = 0, variant = 'thin', width, color, label, count, percentage = true }) {
-  const { accent = 'cyan' } = useTheme()
+  const { accent = 'cyan', muted = 'gray' } = useTheme()
   const c = color ?? accent
   const clamped = Math.max(0, Math.min(1, value))
   const layout = useLayout()
 
   const labelPart = label ? `${label}  ` : ''
   const pctPart = percentage ? ` ${Math.round(clamped * 100)}%` : ''
-  const countPart = count ? ` (${count})` : ''
+  const countPart = count != null ? ` (${count})` : ''
   const rightText = pctPart + countPart
   const reservedWidth = labelPart.length + rightText.length
   const barWidth = width ?? Math.max(5, (layout.width || 20) - reservedWidth)
@@ -62,7 +62,7 @@ export function ProgressBar({ value = 0, variant = 'thin', width, color, label,
   if (bar.close) children.push(jsx('text', { children: bar.close }))
 
   if (rightText) {
-    children.push(jsx('text', { style: { color: 'gray' }, children: rightText }))
+    children.push(jsx('text', { style: { color: muted }, children: rightText }))
   }
 
   return jsxs('box', { style: { flexDirection: 'row' }, children })

package/src/radio.js

@@ -1,10 +1,21 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useMouse, useLayout, useTheme } from './hooks.js'
+import { registerHook } from './renderer.js'
 
-export function Radio({ options, selected, onSelect, focused = false }) {
-  const { accent = 'cyan' } = useTheme()
+export function Radio({ options = [], selected, onChange, focused = false }) {
+  const { accent = 'cyan', accentText = 'black' } = useTheme()
   const [cursor, setCursor] = createSignal(Math.max(0, options.indexOf(selected)))
+  const prevSelected = registerHook(() => ({ value: selected }))
+
+  if (selected !== prevSelected.value) {
+    prevSelected.value = selected
+    const idx = options.indexOf(selected)
+    if (idx >= 0) setCursor(idx)
+  }
+
+  const maxIdx = Math.max(0, options.length - 1)
+  if (cursor() > maxIdx) setCursor(maxIdx)
 
   useInput((event) => {
     if (!focused) return
@@ -24,7 +35,7 @@ export function Radio({ options, selected, onSelect, focused = false }) {
         event.stopPropagation()
       }
     } else if (key === 'return' || key === 'space') {
-      onSelect?.(options[cursor()])
+      onChange?.(options[Math.min(cursor(), len - 1)])
       event.stopPropagation()
     }
   })
@@ -38,7 +49,7 @@ export function Radio({ options, selected, onSelect, focused = false }) {
     const idx = y - layout.y
     if (idx >= 0 && idx < options.length) {
       setCursor(idx)
-      onSelect?.(options[idx])
+      onChange?.(options[idx])
       event.stopPropagation()
     }
   })
@@ -50,7 +61,7 @@ export function Radio({ options, selected, onSelect, focused = false }) {
     const isCursor = focused && i === c
     const icon = isSelected ? '\u25cf' : '\u25cb'
     const bg = isCursor ? accent : null
-    const color = isCursor ? 'black' : null
+    const color = isCursor ? accentText : null
 
     return jsxs('box', {
       key: option,