bare-tui 0.0.0 → 0.0.2

package/components/select.js

@@ -0,0 +1,165 @@
+// select — a compact dropdown over a fixed list of options.
+//
+// Where autocomplete is for *open* typing with a filtered menu, select is for a
+// *closed* set you pick from. It shows one line (the current choice) until you
+// open it, then a menu of options to choose from. Like autocomplete it splits
+// rendering in two so a dropdown never reflows the layout:
+//
+//   view()      → the one-line control (always one line, stable width)
+//   menuView()  → the dropdown rows, or '' when closed — overlay this where it
+//                 fits (below a top-anchored control, above a bottom one)
+//
+//   const fruit = select.create({
+//     options: ['apple', 'banana', 'cherry'],
+//     placeholder: 'pick one'
+//   }).focus()
+//   fruit.value()   // 'apple', or null while nothing is chosen
+//
+// Key contract (mirrors the other field controls): while *closed* it consumes
+// only space (to open) and never enter, so a parent form keeps enter for
+// submit. While *open* it owns the menu — up/down move, enter or space commit,
+// esc cancels — which is fine because a form won't submit with a menu open.
+const key = require('../key')
+const ansi = require('../ansi')
+const { style } = require('../style')
+
+const dim = (s) => ansi.modifierDim + s + ansi.modifierReset
+
+const keys = {
+  open: key.binding({ keys: ['space'], help: { key: 'space', desc: 'open' } }),
+  up: key.binding({ keys: ['up', 'k'], help: { key: '↑/k', desc: 'up' } }),
+  down: key.binding({ keys: ['down', 'j'], help: { key: '↓/j', desc: 'down' } }),
+  commit: key.binding({ keys: ['enter', 'space'], help: { key: 'enter', desc: 'select' } }),
+  cancel: key.binding({ keys: ['esc'], help: { key: 'esc', desc: 'cancel' } })
+}
+
+// Normalise an option to { label, value }. Bare values become their own label.
+function normalize(opt) {
+  if (opt !== null && typeof opt === 'object') {
+    const value = 'value' in opt ? opt.value : opt.label
+    return { label: String(opt.label ?? opt.value ?? ''), value }
+  }
+  return { label: String(opt), value: opt }
+}
+
+class Select {
+  constructor(opts = {}) {
+    this.options = (opts.options || []).map(normalize)
+    this.selected = opts.selected ?? -1 // committed choice; -1 = none yet
+    this.placeholder = opts.placeholder || 'select…'
+    this.focused = !!opts.focused
+    this.maxVisible = opts.maxVisible || 6
+    this.openGlyph = opts.openGlyph || '▾'
+
+    this.open = false
+    this.highlight = 0 // cursor within the menu while open
+    this._clampSelected()
+  }
+
+  focus() {
+    this.focused = true
+    return this
+  }
+
+  blur() {
+    this.focused = false
+    this.open = false
+    return this
+  }
+
+  // The committed value, or null when nothing is chosen.
+  value() {
+    const o = this.options[this.selected]
+    return o ? o.value : null
+  }
+
+  selectedOption() {
+    return this.options[this.selected] || null
+  }
+
+  setOptions(options) {
+    this.options = (options || []).map(normalize)
+    this._clampSelected()
+    return this
+  }
+
+  // Select by value; no-op if absent.
+  setValue(v) {
+    const i = this.options.findIndex((o) => o.value === v)
+    if (i >= 0) this.selected = i
+    return this
+  }
+
+  update(msg) {
+    if (!this.focused || !msg || msg.type !== 'key') return [this, null]
+
+    if (!this.open) {
+      if (key.matches(msg, keys.open) && this.options.length) {
+        this.open = true
+        this.highlight = this.selected >= 0 ? this.selected : 0
+      }
+      return [this, null]
+    }
+
+    // Menu is open: it owns navigation, commit and cancel.
+    if (key.matches(msg, keys.cancel)) this.open = false
+    else if (key.matches(msg, keys.up)) this._move(-1)
+    else if (key.matches(msg, keys.down)) this._move(1)
+    else if (key.matches(msg, keys.commit)) {
+      this.selected = this.highlight
+      this.open = false
+    }
+    return [this, null]
+  }
+
+  _move(delta) {
+    if (!this.options.length) return
+    this.highlight = Math.max(0, Math.min(this.highlight + delta, this.options.length - 1))
+  }
+
+  _clampSelected() {
+    if (this.selected < -1) this.selected = -1
+    if (this.selected > this.options.length - 1) this.selected = this.options.length - 1
+  }
+
+  view() {
+    const pointer = this.focused ? '› ' : '  '
+    const chosen = this.options[this.selected]
+    const label = chosen ? chosen.label : dim(this.placeholder)
+    return pointer + label + ' ' + this.openGlyph
+  }
+
+  // The dropdown, or '' when closed. Highlight is drawn black-on-magenta to
+  // match autocomplete's menu; a footer notes options scrolled out of view.
+  menuView() {
+    if (!this.open || !this.options.length) return ''
+
+    // Keep the highlight inside a maxVisible-row window.
+    const n = this.options.length
+    const start =
+      n > this.maxVisible
+        ? Math.max(0, Math.min(this.highlight - this.maxVisible + 1, n - this.maxVisible))
+        : 0
+    const shown = this.options.slice(start, start + this.maxVisible)
+
+    const rows = shown.map((o, i) => {
+      const isSel = start + i === this.highlight
+      if (isSel) {
+        return style()
+          .foreground('black')
+          .background('magenta')
+          .render(' ' + o.label + ' ')
+      }
+      return ' ' + o.label
+    })
+
+    if (n > shown.length) rows.push(dim(`  …${n - shown.length} more`))
+    return rows.join('\n')
+  }
+}
+
+function create(opts) {
+  return new Select(opts)
+}
+
+module.exports = { create, Select, keys }

package/components/spinner.js

@@ -0,0 +1,70 @@
+// spinner — a Cmd-driven animated spinner.
+//
+// This is the reference for a *command-driven* component. It animates by
+// re-issuing a tick Cmd each frame; the parent model just routes 'spinner.tick'
+// Msgs into update() and threads the returned Cmd up to the Program:
+//
+//   class App {
+//     constructor () { this.spinner = spinner.create() }
+//     init () { return this.spinner.init() }
+//     update (msg) {
+//       const [s, cmd] = this.spinner.update(msg)
+//       this.spinner = s
+//       return [this, cmd]
+//     }
+//     view () { return this.spinner.view() + ' loading…' }
+//   }
+//
+// Each spinner has a unique id and a monotonic tag so that strays — a second
+// spinner's ticks, or a duplicated/late tick — can't double-drive the loop.
+const { tick } = require('../commands')
+
+// A few frame sets. `dots` is the default.
+const dots = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+const line = ['|', '/', '-', '\\']
+const points = ['∙∙∙', '●∙∙', '∙●∙', '∙∙●']
+
+let nextId = 1
+
+class Spinner {
+  constructor(opts = {}) {
+    this.frames = opts.frames || dots
+    this.fps = opts.fps || 10
+    this.frame = 0
+    this.id = nextId++ // distinguishes this spinner's ticks from any other's
+    this.tag = 0 // bumped each accepted tick; stale ticks are ignored
+  }
+
+  // Returns the Cmd that starts the animation. Call from the parent's init().
+  init() {
+    return this._tick()
+  }
+
+  _tick() {
+    const id = this.id
+    const tag = this.tag
+    const ms = Math.max(1, Math.round(1000 / this.fps))
+    return tick(ms, () => ({ type: 'spinner.tick', id, tag }))
+  }
+
+  update(msg) {
+    if (!msg || msg.type !== 'spinner.tick') return [this, null]
+    // Ignore another spinner's ticks and any tick that isn't the one we're
+    // currently waiting on (duplicates, late fires).
+    if (msg.id !== this.id || msg.tag !== this.tag) return [this, null]
+
+    this.frame = (this.frame + 1) % this.frames.length
+    this.tag++
+    return [this, this._tick()]
+  }
+
+  view() {
+    return this.frames[this.frame]
+  }
+}
+
+function create(opts) {
+  return new Spinner(opts)
+}
+
+module.exports = { create, Spinner, dots, line, points }

package/components/stopwatch.js

@@ -0,0 +1,88 @@
+// stopwatch — counts elapsed time upward.
+//
+// Cmd-driven like the spinner: start() returns a tick Cmd, and each accepted
+// 'stopwatch.tick' advances `elapsed` and re-issues the next tick. id + tag
+// guard against strays so pausing/resuming can't double-drive it.
+//
+//   this.sw = stopwatch.create()
+//   init()   { return this.sw.start() }
+//   update(msg) { const [sw, cmd] = this.sw.update(msg); this.sw = sw; return [this, cmd] }
+//   view()   { return this.sw.view() }   // "01:23"
+const { tick } = require('../commands')
+
+let nextId = 1
+
+function pad(n) {
+  return String(n).padStart(2, '0')
+}
+
+// ms → "M:SS" / "MM:SS" / "H:MM:SS"
+function format(ms) {
+  const total = Math.floor(ms / 1000)
+  const h = Math.floor(total / 3600)
+  const m = Math.floor((total % 3600) / 60)
+  const s = total % 60
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`
+}
+
+class Stopwatch {
+  constructor(opts = {}) {
+    this.interval = opts.interval || 1000
+    this.elapsed = opts.elapsed || 0
+    this.running = false
+    this.id = nextId++
+    this.tag = 0
+  }
+
+  _tick() {
+    const id = this.id
+    const tag = this.tag
+    return tick(this.interval, () => ({ type: 'stopwatch.tick', id, tag }))
+  }
+
+  start() {
+    if (this.running) return null
+    this.running = true
+    return this._tick()
+  }
+
+  stop() {
+    this.running = false
+    this.tag++ // invalidate any in-flight tick
+    return null
+  }
+
+  toggle() {
+    return this.running ? this.stop() : this.start()
+  }
+
+  reset() {
+    this.elapsed = 0
+    return null // a running stopwatch keeps ticking
+  }
+
+  update(msg) {
+    if (
+      !msg ||
+      msg.type !== 'stopwatch.tick' ||
+      msg.id !== this.id ||
+      msg.tag !== this.tag ||
+      !this.running
+    ) {
+      return [this, null]
+    }
+    this.elapsed += this.interval
+    this.tag++
+    return [this, this._tick()]
+  }
+
+  view() {
+    return format(this.elapsed)
+  }
+}
+
+function create(opts) {
+  return new Stopwatch(opts)
+}
+
+module.exports = { create, Stopwatch, format }

package/components/table.js

@@ -0,0 +1,130 @@
+// table — fixed-width columns with selectable, scrolling rows.
+//
+//   const t = table.create({
+//     columns: [{ title: 'Name', width: 12 }, { title: 'Lang', width: 8 }],
+//     rows: [['corestore', 'js'], ['hypercore', 'js']],
+//     height: 8
+//   })
+//
+// Cells are truncated/padded to their column width (ANSI-aware), the selection
+// is a reverse-video bar, and the body scrolls in a `height`-row window. Like
+// list/viewport it always responds to its keys — the parent decides routing.
+const key = require('../key')
+const { style, width, truncate } = require('../style')
+
+const header = (s) => style().bold(true).render(s)
+const selected = (s) => style().reverse(true).render(s)
+const dim = (s) => style().faint(true).render(s)
+
+const keys = {
+  up: key.binding({ keys: ['up', 'k'], help: { key: '↑/k', desc: 'up' } }),
+  down: key.binding({ keys: ['down', 'j'], help: { key: '↓/j', desc: 'down' } }),
+  pageUp: key.binding({ keys: ['pageup'] }),
+  pageDown: key.binding({ keys: ['pagedown'] }),
+  top: key.binding({ keys: ['home'], help: { key: 'home', desc: 'top' } }),
+  bottom: key.binding({ keys: ['end'], help: { key: 'end', desc: 'bottom' } })
+}
+
+// Truncate/pad a value to exactly `w` visible cells.
+function cell(value, w) {
+  const text = String(value ?? '')
+  if (width(text) > w) return truncate(text, w)
+  return text + ' '.repeat(w - width(text))
+}
+
+class Table {
+  constructor(opts = {}) {
+    this.columns = opts.columns || []
+    this.rows = opts.rows || []
+    this.height = opts.height || 10 // visible body rows
+    this.rule = opts.rule || '─'
+    this.cursor = 0
+    this.offset = 0
+    this._clamp()
+  }
+
+  get totalWidth() {
+    if (!this.columns.length) return 0
+    const cols = this.columns.reduce((sum, c) => sum + c.width, 0)
+    return cols + (this.columns.length - 1) // single-space gutters
+  }
+
+  selectedRow() {
+    return this.rows[this.cursor] || null
+  }
+
+  setRows(rows) {
+    this.rows = rows
+    this._clamp()
+    return this
+  }
+
+  setColumns(columns) {
+    this.columns = columns
+    return this
+  }
+
+  gotoTop() {
+    this.cursor = 0
+    this.offset = 0
+    return this
+  }
+
+  gotoBottom() {
+    this.cursor = Math.max(0, this.rows.length - 1)
+    this.offset = Math.max(0, this.rows.length - this.height)
+    return this
+  }
+
+  _move(delta) {
+    if (!this.rows.length) return
+    this.cursor = Math.max(0, Math.min(this.cursor + delta, this.rows.length - 1))
+    if (this.cursor < this.offset) this.offset = this.cursor
+    else if (this.cursor >= this.offset + this.height) {
+      this.offset = this.cursor - this.height + 1
+    }
+  }
+
+  _clamp() {
+    this.cursor = Math.max(0, Math.min(this.cursor, Math.max(0, this.rows.length - 1)))
+    const maxOffset = Math.max(0, this.rows.length - this.height)
+    this.offset = Math.max(0, Math.min(this.offset, maxOffset))
+  }
+
+  update(msg) {
+    if (!msg || msg.type !== 'key') return [this, null]
+    if (key.matches(msg, keys.up)) this._move(-1)
+    else if (key.matches(msg, keys.down)) this._move(1)
+    else if (key.matches(msg, keys.pageUp)) this._move(-this.height)
+    else if (key.matches(msg, keys.pageDown)) this._move(this.height)
+    else if (key.matches(msg, keys.top)) this.gotoTop()
+    else if (key.matches(msg, keys.bottom)) this.gotoBottom()
+    return [this, null]
+  }
+
+  _row(cells) {
+    return this.columns.map((c, i) => cell(cells[i], c.width)).join(' ')
+  }
+
+  view() {
+    const lines = []
+    lines.push(header(this._row(this.columns.map((c) => c.title))))
+    lines.push(dim(this.rule.repeat(this.totalWidth)))
+
+    const end = Math.min(this.offset + this.height, this.rows.length)
+    const body = []
+    for (let i = this.offset; i < end; i++) {
+      const line = this._row(this.rows[i])
+      body.push(i === this.cursor ? selected(line) : line)
+    }
+    while (body.length < this.height) body.push(' '.repeat(this.totalWidth))
+
+    return lines.concat(body).join('\n')
+  }
+}
+
+function create(opts) {
+  return new Table(opts)
+}
+
+module.exports = { create, Table, keys }