@trendr/core 0.1.0

package/src/input.js

@@ -0,0 +1,143 @@
+const SPECIAL_KEYS = {
+  '\x1b[A': 'up',
+  '\x1b[B': 'down',
+  '\x1b[C': 'right',
+  '\x1b[D': 'left',
+  '\x1b[H': 'home',
+  '\x1b[F': 'end',
+  '\x1b[2~': 'insert',
+  '\x1b[3~': 'delete',
+  '\x1b[5~': 'pageup',
+  '\x1b[6~': 'pagedown',
+  '\x1bOP': 'f1',
+  '\x1bOQ': 'f2',
+  '\x1bOR': 'f3',
+  '\x1bOS': 'f4',
+  '\x1b[15~': 'f5',
+  '\x1b[17~': 'f6',
+  '\x1b[18~': 'f7',
+  '\x1b[19~': 'f8',
+  '\x1b[20~': 'f9',
+  '\x1b[21~': 'f10',
+  '\x1b[23~': 'f11',
+  '\x1b[24~': 'f12',
+  '\r': 'return',
+  '\n': 'return',
+  '\t': 'tab',
+  '\x1b[Z': 'shift-tab',
+  '\x7f': 'backspace',
+  '\x1b': 'escape',
+  ' ': 'space',
+}
+
+export function parseKey(data) {
+  const raw = typeof data === 'string' ? data : data.toString()
+
+  if (SPECIAL_KEYS[raw]) {
+    return { key: SPECIAL_KEYS[raw], ctrl: false, meta: false, shift: false, raw }
+  }
+
+  if (raw.length === 1) {
+    const code = raw.charCodeAt(0)
+
+    if (code >= 1 && code <= 26) {
+      return {
+        key: String.fromCharCode(code + 96),
+        ctrl: true,
+        meta: false,
+        shift: false,
+        raw,
+      }
+    }
+
+    return { key: raw, ctrl: false, meta: false, shift: false, raw }
+  }
+
+  if (raw.startsWith('\x1b') && raw.length === 2) {
+    return { key: raw[1], ctrl: false, meta: true, shift: false, raw }
+  }
+
+  return { key: raw, ctrl: false, meta: false, shift: false, raw }
+}
+
+export function splitKeys(data) {
+  const raw = typeof data === 'string' ? data : data.toString()
+  const keys = []
+  let i = 0
+
+  while (i < raw.length) {
+    if (raw[i] === '\x1b') {
+      if (i + 1 < raw.length && raw[i + 1] === '[') {
+        let j = i + 2
+        while (j < raw.length && raw[j] >= '0' && raw[j] <= '9') j++
+        if (j < raw.length && raw[j] === ';') {
+          j++
+          while (j < raw.length && raw[j] >= '0' && raw[j] <= '9') j++
+        }
+        if (j < raw.length) j++
+        keys.push(raw.slice(i, j))
+        i = j
+      } else if (i + 1 < raw.length && raw[i + 1] === 'O') {
+        const end = Math.min(i + 3, raw.length)
+        keys.push(raw.slice(i, end))
+        i = end
+      } else if (i + 1 < raw.length) {
+        keys.push(raw.slice(i, i + 2))
+        i += 2
+      } else {
+        keys.push(raw[i])
+        i++
+      }
+    } else {
+      keys.push(raw[i])
+      i++
+    }
+  }
+
+  return keys
+}
+
+export function createInputHandler(stream) {
+  const listeners = new Set()
+
+  function dispatch(keyStr) {
+    const event = parseKey(keyStr)
+    event.stopPropagation = () => { event._stopped = true }
+    const snapshot = [...listeners].reverse()
+    for (const fn of snapshot) {
+      fn(event)
+      if (event._stopped) break
+    }
+  }
+
+  function onData(data) {
+    for (const key of splitKeys(data)) {
+      dispatch(key)
+    }
+  }
+
+  let attached = false
+
+  function attach() {
+    if (attached) return
+    attached = true
+    stream.on('data', onData)
+  }
+
+  function detach() {
+    if (!attached) return
+    attached = false
+    stream.off('data', onData)
+  }
+
+  function onKey(fn) {
+    listeners.add(fn)
+    if (listeners.size === 1) attach()
+    return () => {
+      listeners.delete(fn)
+      if (listeners.size === 0) detach()
+    }
+  }
+
+  return { onKey, attach, detach }
+}

package/src/layout.js

@@ -0,0 +1,312 @@
+import { wordWrap, measureText } from './wrap.js'
+import { Fragment } from './element.js'
+
+export function computeLayout(node, rect) {
+  if (!node) return
+
+  if (node._resolved) {
+    computeLayout(node._resolved, rect)
+    node._layout = node._resolved._layout
+    node._availableRect = rect
+    return
+  }
+
+  if (node.type === Fragment) {
+    node._layout = rect
+    if (node._resolvedChildren) {
+      for (const child of node._resolvedChildren) {
+        computeLayout(child, rect)
+      }
+    }
+    return
+  }
+
+  const style = node.props?.style ?? {}
+
+  const absW = typeof style.width === 'number' ? style.width : null
+  const absH = typeof style.height === 'number' ? style.height : null
+
+  const box = {
+    x: rect.x,
+    y: rect.y,
+    width: clampSize(absW != null ? Math.min(absW, rect.width) : rect.width, style.minWidth, style.maxWidth),
+    height: clampSize(absH != null ? Math.min(absH, rect.height) : rect.height, style.minHeight, style.maxHeight),
+  }
+
+  if (node.type === 'text') {
+    const text = extractText(node)
+    if (text) {
+      const lines = wordWrap(text, box.width)
+      if (style.height == null) box.height = Math.min(lines.length, rect.height)
+    } else {
+      if (style.height == null) box.height = 1
+    }
+    node._layout = box
+    return
+  }
+
+  node._layout = box
+
+  const children = node._resolvedChildren
+  if (!children || children.length === 0) return
+
+  const pad = resolvePadding(style)
+  const border = style.border ? 1 : 0
+  const innerX = box.x + pad.left + border
+  const innerY = box.y + pad.top + border
+  const innerW = Math.max(0, box.width - pad.left - pad.right - border * 2)
+  const innerH = Math.max(0, box.height - pad.top - pad.bottom - border * 2)
+
+  const isRow = style.flexDirection === 'row'
+  const gap = style.gap ?? 0
+
+  layoutFlex(children, {
+    x: innerX,
+    y: innerY,
+    width: innerW,
+    height: innerH,
+    isRow,
+    gap,
+    justifyContent: style.justifyContent ?? 'flex-start',
+    alignItems: style.alignItems ?? 'stretch',
+  })
+}
+
+function layoutFlex(children, ctx) {
+  const { x, y, width, height, isRow, gap, justifyContent, alignItems } = ctx
+  const mainSize = isRow ? width : height
+  const crossSize = isRow ? height : width
+  const totalGaps = Math.max(0, children.length - 1) * gap
+
+  let usedMain = totalGaps
+  let totalFlex = 0
+  const childInfo = []
+
+  for (const child of children) {
+    const cs = childStyle(child)
+    const grow = cs.flexGrow ?? cs.flex ?? 0
+    const margin = resolveMargin(cs)
+    const marginMain = isRow ? margin.left + margin.right : margin.top + margin.bottom
+    const marginCross = isRow ? margin.top + margin.bottom : margin.left + margin.right
+
+    if (grow > 0) {
+      const minMain = isRow ? (cs.minWidth ?? 0) : (cs.minHeight ?? 0)
+      usedMain += minMain + marginMain
+      totalFlex += grow
+      childInfo.push({ child, cs, grow, minMain, marginMain, marginCross, margin, measured: null })
+    } else {
+      const measured = measureChild(child, cs, isRow, width, height)
+      const childMain = isRow ? measured.width : measured.height
+      usedMain += childMain + marginMain
+      childInfo.push({ child, cs, grow: 0, minMain: childMain, marginMain, marginCross, margin, measured })
+    }
+  }
+
+  const remaining = Math.max(0, mainSize - usedMain)
+
+  let mainOffset = 0
+  let spaceBetween = 0
+
+  if (totalFlex === 0) {
+    switch (justifyContent) {
+      case 'center':
+        mainOffset = Math.floor(remaining / 2)
+        break
+      case 'flex-end':
+        mainOffset = remaining
+        break
+      case 'space-between':
+        spaceBetween = children.length > 1 ? remaining / (children.length - 1) : 0
+        break
+      case 'space-around':
+        spaceBetween = remaining / children.length
+        mainOffset = Math.floor(spaceBetween / 2)
+        break
+    }
+  }
+
+  let pos = mainOffset
+
+  for (const info of childInfo) {
+    const { child, cs, grow, minMain, marginMain, marginCross, margin, measured } = info
+
+    let childMain
+    if (grow > 0) {
+      const extra = totalFlex > 0 ? Math.floor(remaining * (grow / totalFlex)) : 0
+      childMain = minMain + extra
+    } else {
+      childMain = minMain
+    }
+
+    const mainRemaining = mainSize - pos - marginMain
+    if (childMain > mainRemaining) childMain = Math.max(0, mainRemaining)
+
+    const explicitCross = isRow
+      ? resolveSize(cs.height, crossSize)
+      : resolveSize(cs.width, crossSize)
+    let childCross = crossSize - marginCross
+    if (alignItems !== 'stretch' || explicitCross != null) {
+      const measuredCross = measured
+        ? (isRow ? measured.height : measured.width)
+        : childCross
+      childCross = Math.min(measuredCross, childCross)
+    }
+
+    const marginBefore = isRow ? margin.left : margin.top
+    const marginCrossBefore = isRow ? margin.top : margin.left
+
+    let crossOffset = marginCrossBefore
+    switch (alignItems) {
+      case 'center':
+        crossOffset = Math.floor((crossSize - marginCross - childCross) / 2) + marginCrossBefore
+        break
+      case 'flex-end':
+        crossOffset = crossSize - marginCross - childCross + marginCrossBefore
+        break
+    }
+
+    const childRect = isRow
+      ? { x: x + pos + marginBefore, y: y + crossOffset, width: childMain, height: childCross }
+      : { x: x + crossOffset, y: y + pos + marginBefore, width: childCross, height: childMain }
+
+    computeLayout(child, childRect)
+
+    pos += childMain + marginMain + gap + spaceBetween
+  }
+}
+
+function measureChild(child, cs, isRow, availW, availH) {
+  const leaf = getLeaf(child)
+  if (!leaf) return { width: 0, height: 0 }
+
+  const explicitW = resolveSize(cs.width, availW)
+  const explicitH = resolveSize(cs.height, availH)
+
+  let w, h
+
+  if (leaf.type === 'text') {
+    const text = extractText(leaf)
+    if (!text) { w = explicitW ?? 0; h = explicitH ?? 1 }
+    else {
+      const maxW = explicitW ?? availW
+      const lines = wordWrap(text, maxW)
+      const textWidth = Math.min(maxW, Math.max(...lines.map(l => measureText(l))))
+      w = explicitW ?? textWidth
+      h = explicitH ?? lines.length
+    }
+  } else if (explicitW != null && explicitH != null) {
+    w = explicitW
+    h = explicitH
+  } else {
+    const intrinsic = measureIntrinsic(leaf, availW, availH)
+    w = explicitW ?? intrinsic.width
+    h = explicitH ?? intrinsic.height
+  }
+
+  return {
+    width: clampSize(w, cs.minWidth, cs.maxWidth),
+    height: clampSize(h, cs.minHeight, cs.maxHeight),
+  }
+}
+
+function measureIntrinsic(node, availW, availH) {
+  if (!node) return { width: 0, height: 0 }
+
+  const style = node.props?.style ?? {}
+  const pad = resolvePadding(style)
+  const border = style.border ? 1 : 0
+  const chrome = { x: pad.left + pad.right + border * 2, y: pad.top + pad.bottom + border * 2 }
+  const innerW = availW - chrome.x
+  const innerH = availH - chrome.y
+
+  const children = node._resolvedChildren
+  if (!children || children.length === 0) {
+    return { width: chrome.x, height: chrome.y }
+  }
+
+  const childIsRow = style.flexDirection === 'row'
+  const gap = style.gap ?? 0
+
+  let mainTotal = 0
+  let crossMax = 0
+
+  for (const child of children) {
+    const cs = childStyle(child)
+    const grow = cs.flexGrow ?? cs.flex ?? 0
+
+    const measured = measureChild(child, cs, childIsRow, innerW, innerH)
+    const margin = resolveMargin(cs)
+    const marginMain = childIsRow ? margin.left + margin.right : margin.top + margin.bottom
+    const marginCross = childIsRow ? margin.top + margin.bottom : margin.left + margin.right
+
+    const childMain = (childIsRow ? measured.width : measured.height) + marginMain
+    mainTotal += childMain
+
+    const childCross = (childIsRow ? measured.height : measured.width) + marginCross
+    if (childCross > crossMax) crossMax = childCross
+  }
+
+  mainTotal += Math.max(0, children.length - 1) * gap
+
+  return childIsRow
+    ? { width: mainTotal + chrome.x, height: crossMax + chrome.y }
+    : { width: crossMax + chrome.x, height: mainTotal + chrome.y }
+}
+
+function getLeaf(node) {
+  if (!node) return null
+  if (node._resolved) return getLeaf(node._resolved)
+  return node
+}
+
+function childStyle(child) {
+  const leaf = getLeaf(child)
+  return leaf?.props?.style ?? {}
+}
+
+function resolveSize(value, available) {
+  if (value == null) return null
+  if (typeof value === 'number') return value
+  if (typeof value === 'string' && value.endsWith('%')) {
+    return Math.floor(available * parseFloat(value) / 100)
+  }
+  return null
+}
+
+function clampSize(value, min, max) {
+  if (min != null && value < min) value = min
+  if (max != null && value > max) value = max
+  return Math.max(0, Math.floor(value))
+}
+
+function resolvePadding(style) {
+  const p = style.padding ?? 0
+  return {
+    top: style.paddingTop ?? style.paddingY ?? p,
+    bottom: style.paddingBottom ?? style.paddingY ?? p,
+    left: style.paddingLeft ?? style.paddingX ?? p,
+    right: style.paddingRight ?? style.paddingX ?? p,
+  }
+}
+
+function resolveMargin(style) {
+  const m = style.margin ?? 0
+  return {
+    top: style.marginTop ?? style.marginY ?? m,
+    bottom: style.marginBottom ?? style.marginY ?? m,
+    left: style.marginLeft ?? style.marginX ?? m,
+    right: style.marginRight ?? style.marginX ?? m,
+  }
+}
+
+function extractText(node) {
+  if (node == null || node === true || node === false) return ''
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  const children = node.props?.children
+  if (children == null || children === true || children === false) return ''
+  if (typeof children === 'string') return children
+  if (typeof children === 'number') return String(children)
+  if (Array.isArray(children)) return children.map(c => extractText(c)).join('')
+  return ''
+}

package/src/list.js

@@ -0,0 +1,46 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useLayout } from './hooks.js'
+
+export function List({ items, selected: selectedProp, onSelect, height, renderItem, header, focused = true }) {
+  const [selectedInternal, setSelectedInternal] = createSignal(0)
+  const layout = useLayout()
+
+  const selected = selectedProp ?? selectedInternal()
+  const setSelected = onSelect ?? setSelectedInternal
+
+  const rawH = height ?? layout.height
+  const visibleH = header && rawH > 0 ? rawH - 1 : rawH
+
+  useInput(({ key, ctrl }) => {
+    if (!focused) return
+
+    const len = items.length
+    if (len === 0) return
+
+    const h = visibleH || 10
+    const half = Math.max(1, Math.floor(h / 2))
+
+    if (key === 'up' || key === 'k') setSelected(Math.max(0, selected - 1))
+    else if (key === 'down' || key === 'j') setSelected(Math.min(len - 1, selected + 1))
+    else if (key === 'pageup' || (ctrl && key === 'b')) setSelected(Math.max(0, selected - h))
+    else if (key === 'pagedown' || (ctrl && key === 'f')) setSelected(Math.min(len - 1, selected + h))
+    else if (ctrl && key === 'u') setSelected(Math.max(0, selected - half))
+    else if (ctrl && key === 'd') setSelected(Math.min(len - 1, selected + half))
+    else if (key === 'home' || key === 'g') setSelected(0)
+    else if (key === 'end' || key === 'G') setSelected(len - 1)
+  })
+
+  const scrollOffset = visibleH > 0 && items.length > visibleH
+    ? Math.max(0, Math.min(selected - Math.floor(visibleH / 2), items.length - visibleH))
+    : 0
+
+  const children = []
+  if (header) children.push(header)
+
+  for (let i = scrollOffset; i < items.length; i++) {
+    children.push(renderItem(items[i], { selected: i === selected, index: i, focused }))
+  }
+
+  return jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children })
+}

package/src/modal.js

@@ -0,0 +1,44 @@
+import { jsx } from '../jsx-runtime.js'
+import { useInput, useTheme } from './hooks.js'
+import { registerOverlay } from './renderer.js'
+
+export function Modal({ open, onClose, title, children, width: w = 40 }) {
+  const { accent = 'cyan' } = useTheme()
+
+  useInput((event) => {
+    if (!open) return
+    if (event.key === 'escape') {
+      onClose?.()
+      event.stopPropagation()
+    }
+  })
+
+  if (!open) return null
+
+  const content = jsx('box', {
+    style: {
+      width: w,
+      border: 'round',
+      borderColor: accent,
+      flexDirection: 'column',
+      paddingX: 1,
+    },
+    children: [
+      title && jsx('text', { style: { bold: true, color: accent }, children: title }),
+      ...(Array.isArray(children) ? children : [children]),
+    ].filter(Boolean),
+  })
+
+  const overlay = jsx('box', {
+    style: {
+      height: '100%',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    children: content,
+  })
+
+  registerOverlay(overlay, { backdrop: true })
+  return null
+}

package/src/progress.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { useTheme } from './hooks.js'
+
+export function ProgressBar({ value = 0, width = 20, color, label }) {
+  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 children = [
+    jsx('text', { style: { color: c }, children: bar }),
+  ]
+
+  if (label != null) {
+    children.push(jsx('text', { style: { color: 'gray', dim: true }, children: ` ${label}` }))
+  }
+
+  return jsxs('box', { style: { flexDirection: 'row' }, children })
+}

package/src/radio.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useTheme } from './hooks.js'
+
+export function Radio({ options, selected, onSelect, focused = false }) {
+  const { accent = 'cyan' } = useTheme()
+  const [cursor, setCursor] = createSignal(Math.max(0, options.indexOf(selected)))
+
+  useInput((event) => {
+    if (!focused) return
+
+    const len = options.length
+    if (len === 0) return
+    const { key } = event
+
+    if (key === 'up' || key === 'k') {
+      if (cursor() > 0) {
+        setCursor(c => c - 1)
+        event.stopPropagation()
+      }
+    } else if (key === 'down' || key === 'j') {
+      if (cursor() < len - 1) {
+        setCursor(c => c + 1)
+        event.stopPropagation()
+      }
+    } else if (key === 'return' || key === 'space') {
+      onSelect?.(options[cursor()])
+      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 bg = isCursor ? accent : null
+    const color = isCursor ? 'black' : null
+
+    return jsxs('box', {
+      key: option,
+      style: { flexDirection: 'row', bg },
+      children: [
+        jsx('text', { style: { color, bold: isCursor }, children: icon }),
+        jsx('text', { style: { color }, children: ` ${option}` }),
+      ],
+    })
+  })
+
+  return jsx('box', { style: { flexDirection: 'column' }, children })
+}