@trendr/core 0.1.0 → 0.2.1

package/index.js

@@ -1,7 +1,7 @@
 export { mount } from './src/renderer.js'
 export { createSignal } from './src/signal.js'
 export { createEffect, createMemo, batch, untrack, onCleanup } from './src/signal.js'
-export { useInput, useResize, useInterval, useLayout, useStdout, useTitle, useTheme } from './src/hooks.js'
+export { useState, useInput, useMouse, useResize, useInterval, useTimeout, useLayout, 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 { TextArea } from './src/text-area.js'
@@ -16,7 +16,15 @@ export { Modal } from './src/modal.js'
 export { Radio } from './src/radio.js'
 export { Button } from './src/button.js'
 export { ScrollableText } from './src/scrollable-text.js'
+export { PickList } from './src/pick-list.js'
+export { ScrollBox } from './src/scroll-box.js'
+export { SplitPane } from './src/split-pane.js'
+export { Task } from './src/task.js'
+export { Shimmer } from './src/shimmer.js'
 export { useFocus } from './src/focus.js'
 export { useHotkey } from './src/hotkey.js'
 export { useToast } from './src/toast.js'
 export { Fragment } from './src/element.js'
+export { altScreen, exitAltScreen, showCursor, hideCursor, clearScreen, clearLine } from './src/ansi.js'
+export { animated, useAnimated, spring, ease, decay } from './src/animation.js'
+export { linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeOutElastic, easeOutBounce } from './src/animation.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "type": "module",
@@ -27,9 +27,29 @@
     "reader": "node esbuild.config.js && node dist/reader.js",
     "focus-demo": "node esbuild.config.js && node dist/focus-demo.js",
     "modal-form": "node esbuild.config.js && node dist/modal-form.js",
-    "highlight": "node esbuild.config.js && node dist/highlight.js src"
+    "highlight": "node esbuild.config.js && node dist/highlight.js src",
+    "multi-row-list": "node esbuild.config.js && node dist/multi-row-list.js",
+    "plasma": "node esbuild.config.js && node dist/plasma.js",
+    "rain": "node esbuild.config.js && node dist/rain.js",
+    "animation": "node esbuild.config.js && node dist/animation.js",
+    "texture": "node esbuild.config.js && node dist/texture.js",
+    "absolute": "node esbuild.config.js && node dist/absolute.js",
+    "scroll-box": "node esbuild.config.js && node dist/scroll-box.js",
+    "split-pane": "node esbuild.config.js && node dist/split-pane.js",
+    "custom-table": "node esbuild.config.js && node dist/custom-table.js",
+    "async": "node esbuild.config.js && node dist/async.js",
+    "timeout": "node esbuild.config.js && node dist/timeout.js",
+    "task": "node esbuild.config.js && node dist/task.js",
+    "progress": "node esbuild.config.js && node dist/progress.js",
+    "shimmer": "node esbuild.config.js && node dist/shimmer.js",
+    "spinner": "node esbuild.config.js && node dist/spinner.js",
+    "pick-list": "node esbuild.config.js && node dist/pick-list.js",
+    "table-demo": "node esbuild.config.js && node dist/table-demo.js",
+    "demo": "node esbuild.config.js && node demo/server.js",
+    "demo:build": "node esbuild.config.js"
   },
   "devDependencies": {
-    "esbuild": "^0.25.0"
+    "esbuild": "^0.25.0",
+    "ssh2": "^1.16.0"
   }
 }

package/src/animation.js

@@ -0,0 +1,204 @@
+import { createSignalRaw, batch } from './signal.js'
+import { registerHook } from './renderer.js'
+import { onCleanup } from './signal.js'
+
+const active = new Set()
+let loopTimer = null
+
+function startLoop() {
+  if (loopTimer) return
+  loopTimer = setInterval(tickAll, 1000 / 60)
+}
+
+function stopLoop() {
+  if (loopTimer) {
+    clearInterval(loopTimer)
+    loopTimer = null
+  }
+}
+
+function tickAll() {
+  if (active.size === 0) {
+    stopLoop()
+    return
+  }
+
+  const dt = 1 / 60
+
+  batch(() => {
+    for (const anim of active) {
+      const result = anim.interpolator(anim.current, anim.target, anim.velocity, dt)
+      anim.current = result.value
+      anim.velocity = result.velocity
+      anim.setter(result.value)
+      if (anim.onTick) anim.onTick(result.value)
+
+      if (result.done) {
+        anim.current = anim.target
+        anim.setter(anim.target)
+        if (anim.onTick) anim.onTick(anim.target)
+        active.delete(anim)
+      }
+    }
+  })
+
+  if (active.size === 0) stopLoop()
+}
+
+export function animated(initial, interpolator) {
+  const [get, set] = createSignalRaw(initial)
+
+  const anim = {
+    current: initial,
+    target: initial,
+    velocity: 0,
+    interpolator,
+    setter: set,
+    onTick: null,
+  }
+
+  function setTarget(target) {
+    if (target === anim.target && !active.has(anim)) return
+    anim.target = target
+    active.add(anim)
+    startLoop()
+  }
+
+  function getValue() {
+    return get()
+  }
+
+  getValue.set = setTarget
+  getValue.get = get
+  getValue.snap = (v) => {
+    anim.target = v
+    anim.current = v
+    anim.velocity = 0
+    active.delete(anim)
+    set(v)
+  }
+  getValue.setInterpolator = (interp) => {
+    anim.interpolator = interp
+    anim.velocity = 0
+  }
+  getValue.onTick = (fn) => { anim.onTick = fn }
+  getValue._anim = anim
+
+  return getValue
+}
+
+export function useAnimated(initial, interpolator) {
+  return registerHook(() => {
+    const a = animated(initial, interpolator)
+    onCleanup(() => {
+      active.delete(a._anim)
+    })
+    return a
+  })
+}
+
+// -- interpolators --
+
+export function spring({ frequency = 2, damping = 0.3 } = {}) {
+  const omega = frequency * 2 * Math.PI
+  const zeta = damping
+
+  return function stepSpring(current, target, velocity, dt) {
+    const x0 = current - target
+    const v0 = velocity
+
+    let newX, newV
+
+    if (zeta > 1) {
+      // overdamped
+      const za = -omega * (zeta + Math.sqrt(zeta * zeta - 1))
+      const zb = -omega * (zeta - Math.sqrt(zeta * zeta - 1))
+      const expA = Math.exp(za * dt)
+      const expB = Math.exp(zb * dt)
+      const c2 = (v0 - x0 * za) / (zb - za)
+      const c1 = x0 - c2
+      newX = c1 * expA + c2 * expB
+      newV = c1 * za * expA + c2 * zb * expB
+    } else if (zeta === 1) {
+      // critically damped
+      const expW = Math.exp(-omega * dt)
+      newX = (x0 + (v0 + omega * x0) * dt) * expW
+      newV = (v0 - (v0 + omega * x0) * omega * dt) * expW
+    } else {
+      // underdamped
+      const alpha = omega * Math.sqrt(1 - zeta * zeta)
+      const expW = Math.exp(-zeta * omega * dt)
+      const cosA = Math.cos(alpha * dt)
+      const sinA = Math.sin(alpha * dt)
+      newX = expW * (x0 * cosA + ((v0 + zeta * omega * x0) / alpha) * sinA)
+      newV = expW * (v0 * cosA - ((v0 * zeta * omega + omega * omega * x0) / alpha) * sinA)
+    }
+
+    const done = Math.abs(newX) < 0.01 && Math.abs(newV) < 0.01
+
+    return { value: target + newX, velocity: newV, done }
+  }
+}
+
+export function ease(durationMs, easingFn = easeOutCubic) {
+  let elapsed = 0
+  let startValue = null
+
+  return function stepEase(current, target, velocity, dt) {
+    if (startValue === null) startValue = current
+
+    elapsed += dt * 1000
+    const t = Math.min(1, elapsed / durationMs)
+    const eased = easingFn(t)
+    const value = startValue + (target - startValue) * eased
+
+    if (t >= 1) {
+      startValue = null
+      elapsed = 0
+      return { value: target, velocity: 0, done: true }
+    }
+
+    return { value, velocity: 0, done: false }
+  }
+}
+
+export function decay({ deceleration = 0.998 } = {}) {
+  return function stepDecay(current, target, velocity, dt) {
+    const newVelocity = velocity * Math.pow(deceleration, dt * 1000)
+    const newValue = current + newVelocity * dt
+
+    if (Math.abs(newVelocity) < 0.1) {
+      return { value: newValue, velocity: 0, done: true }
+    }
+
+    return { value: newValue, velocity: newVelocity, done: false }
+  }
+}
+
+// -- easing functions --
+
+export function linear(t) { return t }
+export function easeInQuad(t) { return t * t }
+export function easeOutQuad(t) { return t * (2 - t) }
+export function easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t }
+export function easeInCubic(t) { return t * t * t }
+export function easeOutCubic(t) { return (--t) * t * t + 1 }
+export function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 }
+export function easeOutElastic({ amplitude = 1, period = 0.3 } = {}) {
+  const a = Math.max(1, amplitude)
+  const s = period / (2 * Math.PI) * Math.asin(1 / a)
+  return function (t) {
+    if (t === 0 || t === 1) return t
+    return a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / period) + 1
+  }
+}
+
+export function easeOutBounce({ bounciness = 7.5625, threshold = 2.75 } = {}) {
+  return function (t) {
+    const inv = 1 / threshold
+    if (t < inv) return bounciness * t * t
+    if (t < 2 * inv) return bounciness * (t -= 1.5 / threshold) * t + 0.75
+    if (t < 2.5 / threshold) return bounciness * (t -= 2.25 / threshold) * t + 0.9375
+    return bounciness * (t -= 2.625 / threshold) * t + 0.984375
+  }
+}

package/src/ansi.js

@@ -16,6 +16,9 @@ export const sgrReset = `${ESC}0m`
 
 export const setTitle = (title) => `\x1b]2;${title}\x07`
 
+export const enableMouse = `${ESC}?1002h${ESC}?1006h`
+export const disableMouse = `${ESC}?1002l${ESC}?1006l`
+
 export const BOLD = 1
 export const DIM = 2
 export const ITALIC = 4

package/src/buffer.js

@@ -1,4 +1,5 @@
 import { parseSgr } from './ansi.js'
+import { charWidth } from './wrap.js'
 
 const EMPTY = { ch: ' ', fg: null, bg: null, attrs: 0 }
 
@@ -31,17 +32,29 @@ export function writeText(buf, x, y, text, fg, bg, attrs, maxWidth) {
   const max = maxWidth ?? (buf.width - x)
 
   if (text.indexOf('\x1b') === -1) {
-    const n = Math.min(max, text.length, buf.width - x)
-    for (let i = 0; i < n; i++) {
-      const cx = x + i
-      if (cx < 0 || cx >= buf.width) continue
-      const prev = buf.cells[y * buf.width + cx]
-      buf.cells[y * buf.width + cx] = {
-        ch: text[i],
-        fg: fg ?? prev.fg,
-        bg: bg ?? prev.bg,
-        attrs: attrs || prev.attrs,
+    let col = 0
+    let i = 0
+    while (i < text.length && col < max) {
+      const code = text.codePointAt(i)
+      const len = code > 0xffff ? 2 : 1
+      const w = charWidth(code)
+      const cx = x + col
+      if (cx >= 0 && cx < buf.width) {
+        const ch = len === 1 ? text[i] : text.slice(i, i + len)
+        const prev = buf.cells[y * buf.width + cx]
+        const transparent = ch === ' ' && !bg && prev.ch !== ' '
+        buf.cells[y * buf.width + cx] = {
+          ch: transparent ? prev.ch : ch,
+          fg: transparent ? prev.fg : (fg ?? prev.fg),
+          bg: bg ?? prev.bg,
+          attrs: transparent ? prev.attrs : (attrs || prev.attrs),
+        }
+        if (w === 2 && cx + 1 < buf.width) {
+          buf.cells[y * buf.width + cx + 1] = { ch: '', fg: fg ?? null, bg: bg ?? null, attrs: attrs ?? 0 }
+        }
       }
+      col += w
+      i += len
     }
     return
   }
@@ -60,18 +73,26 @@ export function writeText(buf, x, y, text, fg, bg, attrs, maxWidth) {
       }
     }
 
+    const code = text.codePointAt(i)
+    const len = code > 0xffff ? 2 : 1
+    const w = charWidth(code)
     const cx = x + col
     if (cx >= 0 && cx < buf.width) {
+      const ch = len === 1 ? text[i] : text.slice(i, i + len)
       const prev = buf.cells[y * buf.width + cx]
+      const transparent = ch === ' ' && !bg && prev.ch !== ' '
       buf.cells[y * buf.width + cx] = {
-        ch: text[i],
-        fg: ansi.fg ?? fg ?? prev.fg,
+        ch: transparent ? prev.ch : ch,
+        fg: transparent ? prev.fg : (ansi.fg ?? fg ?? prev.fg),
         bg: ansi.bg ?? bg ?? prev.bg,
-        attrs: ansi.attrs || attrs || prev.attrs,
+        attrs: transparent ? prev.attrs : (ansi.attrs || attrs || prev.attrs),
+      }
+      if (w === 2 && cx + 1 < buf.width) {
+        buf.cells[y * buf.width + cx + 1] = { ch: '', fg: ansi.fg ?? fg ?? null, bg: ansi.bg ?? bg ?? null, attrs: ansi.attrs || attrs || 0 }
       }
     }
-    col++
-    i++
+    col += w
+    i += len
   }
 }
 
@@ -99,3 +120,16 @@ export function copyBuffer(src, dst) {
   const len = Math.min(src.cells.length, dst.cells.length)
   for (let i = 0; i < len; i++) dst.cells[i] = src.cells[i]
 }
+
+export function blitRect(src, dst, x, y, w, h) {
+  const x1 = Math.max(x, 0)
+  const y1 = Math.max(y, 0)
+  const x2 = Math.min(x + w, src.width, dst.width)
+  const y2 = Math.min(y + h, src.height, dst.height)
+  for (let row = y1; row < y2; row++) {
+    const base = row * dst.width
+    for (let col = x1; col < x2; col++) {
+      dst.cells[base + col] = src.cells[base + col]
+    }
+  }
+}

package/src/button.js

@@ -1,8 +1,9 @@
 import { jsx } from '../jsx-runtime.js'
-import { useInput, useTheme } from './hooks.js'
+import { useInput, useMouse, useLayout, useTheme } from './hooks.js'
 
 export function Button({ label, onPress, focused = false, variant }) {
   const { accent = 'cyan' } = useTheme()
+  const layout = useLayout()
 
   useInput((event) => {
     if (!focused) return
@@ -12,6 +13,14 @@ export function Button({ label, onPress, focused = false, variant }) {
     }
   })
 
+  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
+    onPress?.()
+    event.stopPropagation()
+  })
+
   const dim = variant === 'dim'
 
   return jsx('text', {

package/src/checkbox.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
-import { useInput, useTheme } from './hooks.js'
+import { useInput, useMouse, useLayout, useTheme } from './hooks.js'
 
-export function Checkbox({ checked = false, label, onChange, focused = false }) {
+export function Checkbox({ checked = false, label, onChange, focused = false, checkedIcon = '[x]', uncheckedIcon = '[ ]' }) {
   const { accent = 'cyan' } = useTheme()
+  const layout = useLayout()
 
   useInput((event) => {
     if (!focused) return
@@ -12,7 +13,15 @@ export function Checkbox({ checked = false, label, onChange, focused = false })
     }
   })
 
-  const icon = checked ? '[x]' : '[ ]'
+  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
+    onChange?.(!checked)
+    event.stopPropagation()
+  })
+
+  const icon = checked ? checkedIcon : uncheckedIcon
   const bg = focused ? accent : null
   const color = focused ? 'black' : null
 

package/src/diff.js

@@ -1,4 +1,104 @@
-import { moveTo, sgr, sgrReset } from './ansi.js'
+import { BOLD, DIM, ITALIC, UNDERLINE, INVERSE, STRIKETHROUGH } from './ansi.js'
+
+const NAMED_COLORS = {
+  black: 0, red: 1, green: 2, yellow: 3,
+  blue: 4, magenta: 5, cyan: 6, white: 7,
+  gray: 8, grey: 8,
+  brightRed: 9, brightGreen: 10, brightYellow: 11,
+  brightBlue: 12, brightMagenta: 13, brightCyan: 14, brightWhite: 15,
+}
+
+const ATTR_MASKS = [BOLD, DIM, ITALIC, UNDERLINE, INVERSE, STRIKETHROUGH]
+const ATTR_SGRCODES = [49, 50, 51, 52, 55, 57] // '1','2','3','4','7','9' as ascii
+
+const bufA = Buffer.allocUnsafe(2 * 1024 * 1024)
+const bufB = Buffer.allocUnsafe(2 * 1024 * 1024)
+let buf = bufA
+let pos = 0
+
+function ensure(n) {
+  if (pos + n > buf.length) throw new Error('diff output buffer overflow')
+}
+
+function writeNum(n) {
+  if (n >= 1000) { buf[pos++] = 48 + (n / 1000 | 0); n %= 1000; buf[pos++] = 48 + (n / 100 | 0); n %= 100; buf[pos++] = 48 + (n / 10 | 0); buf[pos++] = 48 + (n % 10) }
+  else if (n >= 100) { buf[pos++] = 48 + (n / 100 | 0); n %= 100; buf[pos++] = 48 + (n / 10 | 0); buf[pos++] = 48 + (n % 10) }
+  else if (n >= 10) { buf[pos++] = 48 + (n / 10 | 0); buf[pos++] = 48 + (n % 10) }
+  else buf[pos++] = 48 + n
+}
+
+function writeMoveTo(row, col) {
+  ensure(12)
+  buf[pos++] = 0x1b
+  buf[pos++] = 0x5b
+  writeNum(row)
+  buf[pos++] = 0x3b
+  writeNum(col)
+  buf[pos++] = 0x48
+}
+
+function writeSgr(fg, bg, attrs) {
+  ensure(52)
+  buf[pos++] = 0x1b
+  buf[pos++] = 0x5b
+  buf[pos++] = 48 // '0' - reset
+
+  for (let i = 0; i < 6; i++) {
+    if (attrs & ATTR_MASKS[i]) {
+      buf[pos++] = 0x3b
+      buf[pos++] = ATTR_SGRCODES[i]
+    }
+  }
+
+  if (fg != null) writeColor(fg, 38)
+  if (bg != null) writeColor(bg, 48)
+
+  buf[pos++] = 0x6d
+}
+
+function writeColor(color, offset) {
+  if (typeof color === 'number' || color in NAMED_COLORS) {
+    const idx = typeof color === 'number' ? color : NAMED_COLORS[color]
+    buf[pos++] = 0x3b
+    writeNum(offset)
+    buf[pos++] = 0x3b
+    buf[pos++] = 53 // '5'
+    buf[pos++] = 0x3b
+    writeNum(idx)
+  } else if (color.charCodeAt(0) === 35 && color.length === 7) {
+    const r = parseInt(color.slice(1, 3), 16)
+    const g = parseInt(color.slice(3, 5), 16)
+    const b = parseInt(color.slice(5, 7), 16)
+    buf[pos++] = 0x3b
+    writeNum(offset)
+    buf[pos++] = 0x3b
+    buf[pos++] = 50 // '2'
+    buf[pos++] = 0x3b
+    writeNum(r)
+    buf[pos++] = 0x3b
+    writeNum(g)
+    buf[pos++] = 0x3b
+    writeNum(b)
+  }
+}
+
+function writeReset() {
+  ensure(4)
+  buf[pos++] = 0x1b
+  buf[pos++] = 0x5b
+  buf[pos++] = 48
+  buf[pos++] = 0x6d
+}
+
+function writeChar(ch) {
+  ensure(4)
+  const code = ch.charCodeAt(0)
+  if (code < 0x80) {
+    buf[pos++] = code
+  } else {
+    pos += buf.write(ch, pos)
+  }
+}
 
 function cellEq(a, b) {
   return a === b || (a.ch === b.ch && a.fg === b.fg && a.bg === b.bg && a.attrs === b.attrs)
@@ -7,7 +107,8 @@ function cellEq(a, b) {
 export function diff(prev, curr) {
   const w = curr.width
   const h = curr.height
-  const parts = []
+  pos = 0
+  let changed = 0
 
   let lastFg = undefined
   let lastBg = undefined
@@ -17,35 +118,37 @@ export function diff(prev, curr) {
     let x = 0
     while (x < w) {
       const idx = y * w + x
-      if (cellEq(prev.cells[idx], curr.cells[idx])) {
+      if (curr.cells[idx].ch === '' || cellEq(prev.cells[idx], curr.cells[idx])) {
         x++
         continue
       }
 
-      parts.push(moveTo(y + 1, x + 1))
+      writeMoveTo(y + 1, x + 1)
 
       while (x < w) {
         const i = y * w + x
-        if (cellEq(prev.cells[i], curr.cells[i])) break
-
         const c = curr.cells[i]
+        if (c.ch === '') { x++; continue }
+        if (cellEq(prev.cells[i], c)) break
+
+        changed++
 
         if (c.fg !== lastFg || c.bg !== lastBg || c.attrs !== lastAttrs) {
-          parts.push(sgr(c.fg, c.bg, c.attrs))
+          writeSgr(c.fg, c.bg, c.attrs)
           lastFg = c.fg
           lastBg = c.bg
           lastAttrs = c.attrs
         }
 
-        parts.push(c.ch)
+        writeChar(c.ch)
         x++
       }
     }
   }
 
-  if (parts.length > 0) {
-    parts.push(sgrReset)
-  }
+  if (pos > 0) writeReset()
 
-  return parts.join('')
+  const output = pos > 0 ? buf.subarray(0, pos) : ''
+  buf = buf === bufA ? bufB : bufA
+  return { output, changed }
 }