@trendr/core 0.1.0

package/src/select.js

@@ -0,0 +1,151 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useTheme } from './hooks.js'
+import { registerOverlay, getInstanceLayout, getContext } from './renderer.js'
+
+export function Select({ items, selected, onSelect, focused = false, overlay = false, maxVisible = 10, placeholder = 'select...', renderItem, style: userStyle }) {
+  const { accent = 'cyan' } = useTheme()
+  const defaults = {
+    border: 'single',
+    borderColor: accent,
+    bg: null,
+    cursorBg: accent,
+    cursorTextColor: 'black',
+    color: null,
+    focusedBg: accent,
+    focusedColor: 'black',
+  }
+  const s = { ...defaults, ...userStyle }
+
+  const [open, setOpen] = createSignal(false)
+  const [cursor, setCursor] = createSignal(0)
+  const [scroll, setScroll] = createSignal(0)
+
+  useInput((event) => {
+    if (!focused) return
+    const { key } = event
+
+    if (!open()) {
+      if (key === 'return' || key === 'space') {
+        const idx = items.indexOf(selected)
+        setCursor(idx >= 0 ? idx : 0)
+        setOpen(true)
+        event.stopPropagation()
+      }
+      return
+    }
+
+    const len = items.length
+    if (key === 'up' || key === 'k') { setCursor(c => Math.max(0, c - 1)); event.stopPropagation() }
+    else if (key === 'down' || key === 'j') { setCursor(c => Math.min(len - 1, c + 1)); event.stopPropagation() }
+    else if (key === 'return' || key === 'space') { onSelect?.(items[cursor()]); setOpen(false); event.stopPropagation() }
+    else if (key === 'escape') { setOpen(false); event.stopPropagation() }
+  })
+
+  const display = selected ?? placeholder
+  const collapsed = jsx('text', {
+    style: {
+      bg: focused ? s.focusedBg : null,
+      color: focused ? s.focusedColor : (selected ? s.color : 'gray'),
+      bold: focused,
+    },
+    children: `\u25be ${display}`,
+  })
+
+  if (!open()) return collapsed
+
+  const maxLen = items.reduce((m, v) => Math.max(m, v.length), 0)
+
+  let maxRows = Math.min(items.length, maxVisible)
+
+  if (overlay) {
+    const layout = getInstanceLayout()
+    const ctx = getContext()
+    const termH = ctx?.stream?.rows ?? 24
+    const anchorY = layout.y + 1
+    const available = termH - anchorY - 2
+    if (available > 0) maxRows = Math.min(maxRows, available)
+  }
+
+  const scrollable = items.length > maxRows
+  const visibleCount = maxRows
+
+  const cur = cursor()
+  const sc = scroll()
+  let newScroll = sc
+  if (cur < sc) newScroll = cur
+  else if (cur >= sc + visibleCount) newScroll = cur - visibleCount + 1
+  newScroll = Math.max(0, Math.min(newScroll, items.length - visibleCount))
+  if (newScroll !== sc) setScroll(newScroll)
+
+  const visible = items.slice(newScroll, newScroll + visibleCount)
+
+  const thumbH = scrollable ? Math.max(1, Math.round((visibleCount / items.length) * visibleCount)) : 0
+  const maxSc = items.length - visibleCount
+  const thumbStart = scrollable && maxSc > 0 ? Math.round((newScroll / maxSc) * (visibleCount - thumbH)) : 0
+
+  const dropdownChildren = visible.map((item, vi) => {
+    const i = vi + newScroll
+    const isCursor = i === cur
+
+    const barChar = scrollable
+      ? (vi >= thumbStart && vi < thumbStart + thumbH ? '\u2588' : '\u2502')
+      : null
+
+    const row = (content) => {
+      if (!scrollable) return content
+      const barIsThumb = vi >= thumbStart && vi < thumbStart + thumbH
+      return jsx('box', {
+        key: i,
+        style: { flexDirection: 'row' },
+        children: [
+          content,
+          jsx('text', {
+            style: { color: barIsThumb ? accent : 'gray', dim: !barIsThumb },
+            children: ' ' + barChar,
+          }),
+        ],
+      })
+    }
+
+    if (renderItem) {
+      const content = jsx('box', {
+        key: scrollable ? undefined : i,
+        style: { bg: isCursor ? s.cursorBg : s.bg, flexGrow: 1 },
+        children: renderItem(item, { selected: isCursor, index: i }),
+      })
+      return row(content)
+    }
+
+    const content = jsx('box', {
+      key: scrollable ? undefined : i,
+      style: { bg: isCursor ? s.cursorBg : s.bg, paddingX: 1, flexGrow: 1 },
+      children: jsx('text', {
+        style: { color: isCursor ? s.cursorTextColor : s.color },
+        children: item,
+      }),
+    })
+    return row(content)
+  })
+
+  const dropdownH = visibleCount + 2
+
+  const dropdown = jsx('box', {
+    style: {
+      flexDirection: 'column',
+      border: s.border,
+      borderColor: s.borderColor,
+      height: dropdownH,
+      width: maxLen + 4 + (scrollable ? 2 : 0),
+      bg: s.bg,
+    },
+    children: dropdownChildren,
+  })
+
+  if (overlay) {
+    registerOverlay(dropdown)
+    return collapsed
+  }
+
+  return jsx('box', { style: { flexDirection: 'column' }, children: [collapsed, dropdown] })
+}

package/src/signal.js

@@ -0,0 +1,159 @@
+let currentEffect = null
+let currentScope = null
+let pendingEffects = null
+let batchDepth = 0
+let schedulerHook = null
+let hookRegistrar = null
+
+export function setSchedulerHook(fn) {
+  schedulerHook = fn
+}
+
+export function setHookRegistrar(fn) {
+  hookRegistrar = fn
+}
+
+export function createSignalRaw(value) {
+  const subs = new Set()
+
+  function get() {
+    if (currentEffect) subs.add(currentEffect)
+    return value
+  }
+
+  function set(next) {
+    const v = typeof next === 'function' ? next(value) : next
+    if (v === value) return
+    value = v
+    if (batchDepth > 0) {
+      for (const s of subs) pendingEffects.add(s)
+    } else {
+      const snapshot = [...subs]
+      for (const s of snapshot) s.run()
+    }
+    if (schedulerHook && batchDepth === 0) schedulerHook()
+  }
+
+  return [get, set]
+}
+
+export function createSignal(value) {
+  if (hookRegistrar) {
+    return hookRegistrar(() => createSignalRaw(value))
+  }
+  return createSignalRaw(value)
+}
+
+export function createEffect(fn) {
+  const effect = {
+    fn,
+    cleanup: null,
+    run() {
+      if (effect.cleanup) effect.cleanup()
+      const prev = currentEffect
+      currentEffect = effect
+      try {
+        const result = fn()
+        effect.cleanup = typeof result === 'function' ? result : null
+      } finally {
+        currentEffect = prev
+      }
+    },
+  }
+
+  effect.run()
+
+  if (currentScope) currentScope.effects.push(effect)
+
+  return effect
+}
+
+export function createMemo(fn) {
+  const [get, set] = createSignal(undefined)
+  createEffect(() => set(fn()))
+  return get
+}
+
+export function batch(fn) {
+  if (batchDepth === 0) pendingEffects = new Set()
+  batchDepth++
+  try {
+    fn()
+  } finally {
+    batchDepth--
+    if (batchDepth === 0) {
+      const effects = [...pendingEffects]
+      pendingEffects = null
+      for (const e of effects) e.run()
+      if (schedulerHook) schedulerHook()
+    }
+  }
+}
+
+export function untrack(fn) {
+  const prev = currentEffect
+  currentEffect = null
+  try {
+    return fn()
+  } finally {
+    currentEffect = prev
+  }
+}
+
+export function onCleanup(fn) {
+  if (currentScope) currentScope.cleanups.push(fn)
+  else if (currentEffect) {
+    const prev = currentEffect.cleanup
+    currentEffect.cleanup = prev
+      ? () => { prev(); fn() }
+      : fn
+  }
+}
+
+export function createScope(fn) {
+  const scope = {
+    effects: [],
+    children: [],
+    cleanups: [],
+    parent: currentScope,
+  }
+  if (currentScope) currentScope.children.push(scope)
+
+  const prev = currentScope
+  currentScope = scope
+  try {
+    fn()
+  } finally {
+    currentScope = prev
+  }
+  return scope
+}
+
+export function disposeScope(scope) {
+  for (const child of scope.children) disposeScope(child)
+  for (const effect of scope.effects) {
+    if (effect.cleanup) effect.cleanup()
+  }
+  for (const fn of scope.cleanups) fn()
+  scope.effects.length = 0
+  scope.children.length = 0
+  scope.cleanups.length = 0
+}
+
+export function getCurrentScope() {
+  return currentScope
+}
+
+export function runInScope(scope, fn) {
+  const prev = currentScope
+  currentScope = scope
+  try {
+    return fn()
+  } finally {
+    currentScope = prev
+  }
+}
+
+export function notifyScheduler() {
+  if (schedulerHook) schedulerHook()
+}

package/src/spinner.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInterval, useTheme } from './hooks.js'
+import { registerHook } from './renderer.js'
+
+const FRAMES = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F']
+
+export function Spinner({ label, color, interval = 80 }) {
+  const { accent = 'cyan' } = useTheme()
+  const c = color ?? accent
+  const [frame, setFrame] = createSignal(0)
+  useInterval(() => setFrame(f => (f + 1) % FRAMES.length), interval)
+
+  const children = [jsx('text', { style: { color: c }, children: FRAMES[frame()] })]
+
+  if (label != null) {
+    children.push(jsx('text', { children: ` ${label}` }))
+  }
+
+  return jsxs('box', { style: { flexDirection: 'row' }, children })
+}

package/src/table.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { useTheme } from './hooks.js'
+import { List } from './list.js'
+
+export function Table({ columns, data, selected, onSelect, focused = true }) {
+  const { accent = 'cyan' } = useTheme()
+
+  const header = jsxs('box', {
+    style: { flexDirection: 'row' },
+    children: columns.map((col, i) =>
+      jsx('text', {
+        key: i,
+        style: {
+          width: col.width,
+          flexGrow: col.flexGrow,
+          color: 'gray',
+          dim: true,
+          bold: true,
+          overflow: 'truncate',
+          paddingX: col.paddingX ?? 1,
+        },
+        children: col.header,
+      })
+    ),
+  })
+
+  return jsx(List, {
+    items: data,
+    selected,
+    onSelect,
+    focused,
+    header,
+    renderItem: (row, { selected: isSel }) =>
+      jsxs('box', {
+        style: { flexDirection: 'row', bg: isSel ? (focused ? accent : 'gray') : null },
+        children: columns.map((col, i) =>
+          jsx('text', {
+            key: i,
+            style: {
+              width: col.width,
+              flexGrow: col.flexGrow,
+              overflow: 'truncate',
+              paddingX: col.paddingX ?? 1,
+              color: isSel && focused ? 'black' : (col.color ?? null),
+            },
+            children: col.render ? col.render(row, isSel) : String(row[col.key] ?? ''),
+          })
+        ),
+      }),
+  })
+}

package/src/tabs.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { useInput } from './hooks.js'
+
+export function Tabs({ items, selected, onSelect, focused = true }) {
+  useInput(({ key }) => {
+    if (!focused) return
+
+    const idx = items.indexOf(selected)
+    if (idx === -1) return
+
+    if (key === 'left' || key === 'shift-tab') {
+      onSelect(items[(idx - 1 + items.length) % items.length])
+    } else if (key === 'right' || key === 'tab') {
+      onSelect(items[(idx + 1) % items.length])
+    }
+  })
+
+  const children = items.map(item => {
+    const isSelected = item === selected
+    return jsx('text', {
+      style: isSelected ? { inverse: true, bold: true } : { color: 'gray' },
+      children: ` ${item} `,
+    })
+  })
+
+  return jsxs('box', {
+    style: { flexDirection: 'row', gap: 1 },
+    children,
+  })
+}

package/src/text-area.js

@@ -0,0 +1,286 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useLayout } from './hooks.js'
+import { registerHook } from './renderer.js'
+
+export function wrapForEditor(text, width) {
+  if (width <= 0) return [{ start: 0, end: 0, hard: true }]
+  if (text.length === 0) return [{ start: 0, end: 0, hard: true }]
+
+  const lines = []
+  let pos = 0
+
+  while (pos < text.length) {
+    const nlIdx = text.indexOf('\n', pos)
+    const logicalEnd = nlIdx === -1 ? text.length : nlIdx
+    const segment = text.slice(pos, logicalEnd)
+
+    if (segment.length === 0) {
+      lines.push({ start: pos, end: pos, hard: true })
+      pos = logicalEnd + 1
+      continue
+    }
+
+    let segStart = 0
+    while (segStart < segment.length) {
+      const remaining = segment.slice(segStart)
+
+      if (remaining.length <= width) {
+        lines.push({ start: pos + segStart, end: pos + segStart + remaining.length, hard: true })
+        segStart += remaining.length
+        break
+      }
+
+      const chunk = remaining.slice(0, width)
+      const lastSpace = chunk.lastIndexOf(' ')
+
+      if (lastSpace > 0) {
+        lines.push({ start: pos + segStart, end: pos + segStart + lastSpace, hard: false })
+        segStart += lastSpace + 1
+      } else {
+        lines.push({ start: pos + segStart, end: pos + segStart + width, hard: false })
+        segStart += width
+      }
+    }
+
+    pos = logicalEnd + (nlIdx !== -1 ? 1 : 0)
+  }
+
+  if (text.length > 0 && text[text.length - 1] === '\n') {
+    lines.push({ start: text.length, end: text.length, hard: true })
+  }
+
+  if (lines.length === 0) {
+    lines.push({ start: 0, end: 0, hard: true })
+  }
+
+  return lines
+}
+
+export function cursorToDisplay(cursor, lineMap) {
+  for (let row = 0; row < lineMap.length; row++) {
+    const line = lineMap[row]
+    if (cursor >= line.start && cursor <= line.end) {
+      if (cursor === line.end && !line.hard && row + 1 < lineMap.length) {
+        return { row: row + 1, col: 0 }
+      }
+      return { row, col: cursor - line.start }
+    }
+  }
+  const last = lineMap[lineMap.length - 1]
+  return { row: lineMap.length - 1, col: last.end - last.start }
+}
+
+export function displayToCursor(row, col, lineMap) {
+  const r = Math.max(0, Math.min(row, lineMap.length - 1))
+  const line = lineMap[r]
+  const maxCol = line.end - line.start
+  const c = Math.max(0, Math.min(col, maxCol))
+  return line.start + c
+}
+
+function ensureVisible(cursorRow, scroll, height, totalLines) {
+  const maxScroll = Math.max(0, totalLines - height)
+  if (scroll > maxScroll) scroll = maxScroll
+  if (cursorRow < scroll) return cursorRow
+  if (cursorRow >= scroll + height) return cursorRow - height + 1
+  return scroll
+}
+
+export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused = true, maxHeight = 10 }) {
+  const [value, setValue] = createSignal('')
+  const [cursor, setCursor] = createSignal(0)
+  const ref = registerHook(() => ({ scroll: 0, goalCol: null }))
+  const layout = useLayout()
+
+  function update(v, c) {
+    setValue(v)
+    setCursor(c)
+    ref.goalCol = null
+    if (onChange) onChange(v)
+  }
+
+  useInput((event) => {
+    if (!focused) return
+
+    const { key, raw, ctrl, meta } = event
+    const v = value()
+    const c = cursor()
+
+    if (meta && key === '\r') {
+      if (onSubmit) onSubmit(v)
+      update('', 0)
+      ref.scroll = 0
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'return') {
+      update(v.slice(0, c) + '\n' + v.slice(c), c + 1)
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'escape') {
+      if (onCancel) {
+        onCancel()
+        event.stopPropagation()
+      }
+      return
+    }
+
+    if (key === 'backspace') {
+      if (c > 0) update(v.slice(0, c - 1) + v.slice(c), c - 1)
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'delete') {
+      if (c < v.length) update(v.slice(0, c) + v.slice(c + 1), c)
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'left') {
+      setCursor(Math.max(0, c - 1))
+      ref.goalCol = null
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'right') {
+      setCursor(Math.min(v.length, c + 1))
+      ref.goalCol = null
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'up' || key === 'down') {
+      const w = layout.width || 80
+      const lineMap = wrapForEditor(v, w)
+      const pos = cursorToDisplay(c, lineMap)
+      const goal = ref.goalCol !== null ? ref.goalCol : pos.col
+      ref.goalCol = goal
+
+      const newRow = key === 'up' ? pos.row - 1 : pos.row + 1
+      if (newRow >= 0 && newRow < lineMap.length) {
+        setCursor(displayToCursor(newRow, goal, lineMap))
+      }
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'home' || (ctrl && raw === '\x01')) {
+      const w = layout.width || 80
+      const lineMap = wrapForEditor(v, w)
+      const pos = cursorToDisplay(c, lineMap)
+      setCursor(lineMap[pos.row].start)
+      ref.goalCol = null
+      event.stopPropagation()
+      return
+    }
+
+    if (key === 'end' || (ctrl && raw === '\x05')) {
+      const w = layout.width || 80
+      const lineMap = wrapForEditor(v, w)
+      const pos = cursorToDisplay(c, lineMap)
+      setCursor(lineMap[pos.row].end)
+      ref.goalCol = null
+      event.stopPropagation()
+      return
+    }
+
+    if (ctrl && raw === '\x15') {
+      const before = v.slice(0, c)
+      const nlIdx = before.lastIndexOf('\n')
+      const lineStart = nlIdx + 1
+      update(v.slice(0, lineStart) + v.slice(c), lineStart)
+      event.stopPropagation()
+      return
+    }
+
+    if (ctrl && raw === '\x0b') {
+      const after = v.slice(c)
+      const nlIdx = after.indexOf('\n')
+      const deleteEnd = nlIdx === -1 ? v.length : c + nlIdx
+      update(v.slice(0, c) + v.slice(deleteEnd), 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*$/, '')
+      update(trimmed + after, trimmed.length)
+      event.stopPropagation()
+      return
+    }
+
+    if (!ctrl && !meta && raw.length === 1 && raw >= ' ') {
+      update(v.slice(0, c) + raw + v.slice(c), c + raw.length)
+      event.stopPropagation()
+    }
+  })
+
+  const v = value()
+  const c = cursor()
+  const w = layout.width || 0
+
+  if (!v && placeholder && !focused) {
+    return jsx('text', { style: { color: 'gray', flexGrow: 1 }, children: placeholder })
+  }
+
+  const effectiveWidth = w || 80
+  const lineMap = wrapForEditor(v, effectiveWidth)
+  const displayPos = cursorToDisplay(c, lineMap)
+
+  const displayHeight = Math.max(1, Math.min(lineMap.length, maxHeight))
+  ref.scroll = ensureVisible(displayPos.row, ref.scroll, displayHeight, lineMap.length)
+  const scroll = ref.scroll
+
+  const visibleLines = lineMap.slice(scroll, scroll + displayHeight)
+
+  if (!v && placeholder && focused) {
+    return jsx('box', {
+      style: { flexDirection: 'column', height: 1, minHeight: 1, flexGrow: 1 },
+      children: jsxs('box', {
+        style: { flexDirection: 'row', height: 1 },
+        children: [
+          jsx('text', { style: { inverse: true, color: 'gray' }, children: placeholder[0] }),
+          placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
+        ],
+      }),
+    })
+  }
+
+  const rows = visibleLines.map((line, i) => {
+    const row = scroll + i
+    const content = v.slice(line.start, line.end)
+    const hasCursor = focused && row === displayPos.row
+
+    if (!hasCursor) {
+      return jsx('text', { key: row, children: content || ' ' })
+    }
+
+    const cursorCol = displayPos.col
+    const before = content.slice(0, cursorCol)
+    const cursorChar = content[cursorCol] || ' '
+    const after = content.slice(cursorCol + 1)
+
+    return jsxs('box', {
+      key: row,
+      style: { flexDirection: 'row', height: 1 },
+      children: [
+        before && jsx('text', { children: before }),
+        jsx('text', { style: { inverse: true }, children: cursorChar }),
+        after && jsx('text', { children: after }),
+      ],
+    })
+  })
+
+  return jsx('box', {
+    style: { flexDirection: 'column', height: displayHeight, minHeight: 1, flexGrow: 1 },
+    children: rows,
+  })
+}