@trendr/core 0.1.0 → 0.2.1

package/src/pick-list.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useLayout, useTheme, useCursor } from './hooks.js'
+import { List } from './list.js'
+
+export function PickList({ items, onSelect, onCancel, onChange, 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()
+  const defaults = {
+    borderColor: accent,
+    cursorBg: accent,
+    cursorTextColor: 'black',
+    color: null,
+  }
+  const s = { ...defaults, ...userStyle }
+
+  const [query, setQuery] = createSignal('')
+  const [textCursor, setTextCursor] = createSignal(0)
+  const [listCursor, setListCursor] = createSignal(0)
+  const layout = useLayout()
+  const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)
+
+  const defaultFilter = (q, item) => {
+    const label = typeof item === 'string' ? item : (item.label ?? item.name ?? '')
+    return label.toLowerCase().includes(q.toLowerCase())
+  }
+
+  const match = filterFn ?? defaultFilter
+
+  const q = query()
+  const filtered = q ? items.filter(item => match(q, item)) : items
+
+  let cursor = listCursor()
+  if (cursor >= filtered.length) cursor = Math.max(0, filtered.length - 1)
+  if (cursor !== listCursor()) setListCursor(cursor)
+
+  function updateText(v, c) {
+    setQuery(v)
+    setTextCursor(c)
+    setListCursor(0)
+    if (onChange) onChange(v)
+  }
+
+  useInput((event) => {
+    if (!focused) return
+
+    const { key, raw, ctrl } = event
+    const len = filtered.length
+
+    if (key === 'up' || (ctrl && raw === '\x10')) {
+      if (len > 0) setListCursor(c => Math.max(0, c - 1))
+      event.stopPropagation()
+      return
+    }
+    if (key === 'down' || (ctrl && raw === '\x0e')) {
+      if (len > 0) setListCursor(c => Math.min(len - 1, c + 1))
+      event.stopPropagation()
+      return
+    }
+    if (ctrl && key === 'u') { if (len > 0) setListCursor(c => Math.max(0, c - 5)); event.stopPropagation(); return }
+    if (ctrl && key === 'd') { if (len > 0) setListCursor(c => Math.min(len - 1, c + 5)); event.stopPropagation(); return }
+    if (ctrl && key === 'b') { if (len > 0) setListCursor(c => Math.max(0, c - 10)); event.stopPropagation(); return }
+    if (ctrl && key === 'f') { if (len > 0) setListCursor(c => Math.min(len - 1, c + 10)); event.stopPropagation(); return }
+    if (key === 'pageup') { if (len > 0) setListCursor(c => Math.max(0, c - 10)); event.stopPropagation(); return }
+    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)
+        event.stopPropagation()
+      }
+      return
+    }
+
+    if (key === 'escape') {
+      if (onCancel) {
+        onCancel()
+        event.stopPropagation()
+      }
+      return
+    }
+
+    resetBlink()
+    const v = query()
+    const c = textCursor()
+
+    if (key === 'backspace') {
+      if (c > 0) updateText(v.slice(0, c - 1) + v.slice(c), c - 1)
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'delete') {
+      if (c < v.length) updateText(v.slice(0, c) + v.slice(c + 1), c)
+      event.stopPropagation()
+      return
+    }
+
+    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 (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 && raw === '\x17') {
+      const before = v.slice(0, c)
+      const after = v.slice(c)
+      const trimmed = before.replace(/\S+\s*$/, '')
+      updateText(trimmed + after, trimmed.length)
+      event.stopPropagation()
+      return
+    }
+
+    if (!ctrl && raw.length === 1 && raw >= ' ') {
+      updateText(v.slice(0, c) + raw + v.slice(c), c + raw.length)
+      event.stopPropagation()
+    }
+  })
+
+  // text input rendering
+  const v = query()
+  const tc = textCursor()
+  const w = layout.width || 0
+  const cs = cursorStyle()
+
+  let inputEl
+  if (!v && placeholder && !focused) {
+    inputEl = jsx('text', { style: { color: 'gray' }, 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) }),
+      ],
+    })
+  } else {
+    const contentWidth = v.length + 1
+    const needsScroll = w > 0 && contentWidth > w
+
+    if (!needsScroll) {
+      const cursorChar = v[tc] || ' '
+      inputEl = jsxs('box', {
+        style: { flexDirection: 'row', height: 1, minHeight: 1 },
+        children: [
+          v.slice(0, tc) && jsx('text', { children: v.slice(0, tc) }),
+          jsx('text', { style: cs ?? {}, children: cursorChar }),
+          v.slice(tc + 1) && jsx('text', { children: v.slice(tc + 1) }),
+        ],
+      })
+    } else {
+      let scrollStart = 0
+      if (tc >= w) scrollStart = tc - w + 1
+      const visible = v.slice(scrollStart, scrollStart + w)
+      const cursorInView = tc - scrollStart
+      const before = visible.slice(0, cursorInView)
+      const cursorChar = visible[cursorInView] || ' '
+      const after = visible.slice(cursorInView + 1)
+
+      inputEl = jsxs('box', {
+        style: { flexDirection: 'row', height: 1, minHeight: 1 },
+        children: [
+          before && jsx('text', { children: before }),
+          jsx('text', { style: cs ?? {}, children: cursorChar }),
+          after && jsx('text', { children: after }),
+        ],
+      })
+    }
+  }
+
+  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 },
+      children: jsx('text', {
+        style: { color: isCursor ? s.cursorTextColor : s.color },
+        children: ` ${label}`,
+      }),
+    })
+  }
+
+  const listRenderItem = renderItem ?? defaultRenderItem
+
+  const list = jsx(List, {
+    items: filtered,
+    selected: cursor,
+    onSelect: setListCursor,
+    focused,
+    interactive: false,
+    itemHeight,
+    gap: itemGap,
+    scrollbar,
+    scrolloff,
+    renderItem: listRenderItem,
+  })
+
+  return jsxs('box', {
+    style: { flexDirection: 'column', flexGrow: 1, gap },
+    children: [inputEl, list],
+  })
+}

package/src/progress.js

@@ -1,20 +1,68 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { useTheme } from './hooks.js'
+import { useLayout } from './hooks.js'
 
-export function ProgressBar({ value = 0, width = 20, color, label }) {
+const BARS = {
+  thin: { filled: '\u2501', empty: '\u2501' },
+  block: { filled: '\u2588', empty: '\u2591' },
+  ascii: { filled: '#', empty: '-', bracket: true },
+  braille: {
+    filled: '\u28ff', empty: '\u28ff',
+    tips: ['\u2801', '\u2803', '\u2807', '\u280f', '\u281f', '\u283f', '\u287f'],
+  },
+}
+
+function renderBar(variant, value, width) {
+  const style = BARS[variant] ?? BARS.thin
+
+  if (style.bracket) {
+    const inner = Math.max(0, width - 2)
+    const filled = Math.round(value * inner)
+    return { open: '[', filled: style.filled.repeat(filled), empty: style.empty.repeat(inner - filled), close: ']' }
+  }
+
+  if (style.tips) {
+    const exact = value * width
+    const full = Math.floor(exact)
+    const frac = exact - full
+    const tipIdx = Math.min(style.tips.length - 1, Math.round(frac * (style.tips.length - 1)))
+    const tip = full < width && frac > 0 ? style.tips[tipIdx] : ''
+    const emptyCount = Math.max(0, width - full - (tip ? 1 : 0))
+    return { filled: style.filled.repeat(full) + tip, empty: style.empty.repeat(emptyCount) }
+  }
+
+  const filled = Math.round(value * width)
+  return { filled: style.filled.repeat(filled), empty: style.empty.repeat(width - filled) }
+}
+
+export function ProgressBar({ value = 0, variant = 'thin', width, color, label, count, percentage = true }) {
   const { accent = 'cyan' } = useTheme()
   const c = color ?? accent
   const clamped = Math.max(0, Math.min(1, value))
-  const filled = Math.round(clamped * width)
-  const empty = width - filled
-  const bar = '\u2588'.repeat(filled) + '\u2591'.repeat(empty)
+  const layout = useLayout()
+
+  const labelPart = label ? `${label}  ` : ''
+  const pctPart = percentage ? ` ${Math.round(clamped * 100)}%` : ''
+  const countPart = count ? ` (${count})` : ''
+  const rightText = pctPart + countPart
+  const reservedWidth = labelPart.length + rightText.length
+  const barWidth = width ?? Math.max(5, (layout.width || 20) - reservedWidth)
+
+  const bar = renderBar(variant, clamped, barWidth)
+
+  const children = []
+
+  if (label) {
+    children.push(jsx('text', { style: { bold: true }, children: labelPart }))
+  }
 
-  const children = [
-    jsx('text', { style: { color: c }, children: bar }),
-  ]
+  if (bar.open) children.push(jsx('text', { children: bar.open }))
+  children.push(jsx('text', { style: { color: c }, children: bar.filled }))
+  children.push(jsx('text', { style: { color: c, dim: true }, children: bar.empty }))
+  if (bar.close) children.push(jsx('text', { children: bar.close }))
 
-  if (label != null) {
-    children.push(jsx('text', { style: { color: 'gray', dim: true }, children: ` ${label}` }))
+  if (rightText) {
+    children.push(jsx('text', { style: { color: 'gray' }, children: rightText }))
   }
 
   return jsxs('box', { style: { flexDirection: 'row' }, children })

package/src/radio.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useTheme } from './hooks.js'
+import { useInput, useMouse, useLayout, useTheme } from './hooks.js'
 
 export function Radio({ options, selected, onSelect, focused = false }) {
   const { accent = 'cyan' } = useTheme()
@@ -29,12 +29,26 @@ export function Radio({ options, selected, onSelect, focused = false }) {
     }
   })
 
+  const layout = useLayout()
+
+  useMouse((event) => {
+    if (event.action !== 'press' || event.button !== 'left') return
+    const { x, y } = event
+    if (x < layout.x || x >= layout.x + layout.width || y < layout.y || y >= layout.y + layout.height) return
+    const idx = y - layout.y
+    if (idx >= 0 && idx < options.length) {
+      setCursor(idx)
+      onSelect?.(options[idx])
+      event.stopPropagation()
+    }
+  })
+
   const c = cursor()
 
   const children = options.map((option, i) => {
     const isSelected = option === selected
     const isCursor = focused && i === c
-    const icon = isSelected ? '\u25c9' : '\u25cb'
+    const icon = isSelected ? '\u25cf' : '\u25cb'
     const bg = isCursor ? accent : null
     const color = isCursor ? 'black' : null