@trendr/core 0.1.0

package/src/ansi.js

@@ -0,0 +1,149 @@
+const ESC = '\x1b['
+
+export const moveTo = (row, col) => `${ESC}${row};${col}H`
+export const moveUp = (n = 1) => `${ESC}${n}A`
+export const moveDown = (n = 1) => `${ESC}${n}B`
+export const moveRight = (n = 1) => `${ESC}${n}C`
+export const moveLeft = (n = 1) => `${ESC}${n}D`
+
+export const hideCursor = `${ESC}?25l`
+export const showCursor = `${ESC}?25h`
+export const clearScreen = `${ESC}2J`
+export const clearLine = `${ESC}2K`
+export const altScreen = `${ESC}?1049h`
+export const exitAltScreen = `${ESC}?1049l`
+export const sgrReset = `${ESC}0m`
+
+export const setTitle = (title) => `\x1b]2;${title}\x07`
+
+export const BOLD = 1
+export const DIM = 2
+export const ITALIC = 4
+export const UNDERLINE = 8
+export const INVERSE = 16
+export const STRIKETHROUGH = 32
+
+const ATTR_CODES = [
+  [BOLD, '1'],
+  [DIM, '2'],
+  [ITALIC, '3'],
+  [UNDERLINE, '4'],
+  [INVERSE, '7'],
+  [STRIKETHROUGH, '9'],
+]
+
+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,
+}
+
+function parseColor(color, offset) {
+  if (color == null) return null
+  if (typeof color === 'number') return `${offset};5;${color}`
+  if (color in NAMED_COLORS) return `${offset};5;${NAMED_COLORS[color]}`
+  if (color.startsWith('#') && 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)
+    return `${offset};2;${r};${g};${b}`
+  }
+  return null
+}
+
+// reverse lookup: 256-color index -> named color string
+// only the 16 standard colors get names, everything else stays numeric
+const INDEX_TO_NAME = Object.entries(NAMED_COLORS)
+  .filter(([k]) => k !== 'grey')
+  .reduce((map, [name, idx]) => { map[idx] = name; return map }, {})
+
+// maps basic ansi fg codes (30-37, 90-97) to 256-color index
+function basicFgToIndex(code) {
+  if (code >= 30 && code <= 37) return code - 30
+  if (code >= 90 && code <= 97) return code - 90 + 8
+  return null
+}
+
+function basicBgToIndex(code) {
+  if (code >= 40 && code <= 47) return code - 40
+  if (code >= 100 && code <= 107) return code - 100 + 8
+  return null
+}
+
+function indexToColor(idx) {
+  return INDEX_TO_NAME[idx] ?? idx
+}
+
+function rgbToHex(r, g, b) {
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+}
+
+export function parseSgr(params, state) {
+  if (!state) state = { fg: null, bg: null, attrs: 0 }
+  const codes = params.split(';').map(Number)
+  let i = 0
+
+  while (i < codes.length) {
+    const c = codes[i]
+
+    if (c === 0) {
+      state.fg = null
+      state.bg = null
+      state.attrs = 0
+    } else if (c === 1) state.attrs |= BOLD
+    else if (c === 2) state.attrs |= DIM
+    else if (c === 3) state.attrs |= ITALIC
+    else if (c === 4) state.attrs |= UNDERLINE
+    else if (c === 7) state.attrs |= INVERSE
+    else if (c === 9) state.attrs |= STRIKETHROUGH
+    else if (c === 22) state.attrs &= ~(BOLD | DIM)
+    else if (c === 23) state.attrs &= ~ITALIC
+    else if (c === 24) state.attrs &= ~UNDERLINE
+    else if (c === 27) state.attrs &= ~INVERSE
+    else if (c === 29) state.attrs &= ~STRIKETHROUGH
+    else if (c === 39) state.fg = null
+    else if (c === 49) state.bg = null
+    else if (c === 38 && codes[i + 1] === 5) {
+      state.fg = indexToColor(codes[i + 2])
+      i += 2
+    } else if (c === 48 && codes[i + 1] === 5) {
+      state.bg = indexToColor(codes[i + 2])
+      i += 2
+    } else if (c === 38 && codes[i + 1] === 2) {
+      state.fg = rgbToHex(codes[i + 2], codes[i + 3], codes[i + 4])
+      i += 4
+    } else if (c === 48 && codes[i + 1] === 2) {
+      state.bg = rgbToHex(codes[i + 2], codes[i + 3], codes[i + 4])
+      i += 4
+    } else {
+      const fgIdx = basicFgToIndex(c)
+      if (fgIdx != null) state.fg = indexToColor(fgIdx)
+      else {
+        const bgIdx = basicBgToIndex(c)
+        if (bgIdx != null) state.bg = indexToColor(bgIdx)
+      }
+    }
+
+    i++
+  }
+
+  return state
+}
+
+export function sgr(fg, bg, attrs) {
+  const parts = ['0']
+
+  for (const [mask, code] of ATTR_CODES) {
+    if (attrs & mask) parts.push(code)
+  }
+
+  const fgCode = parseColor(fg, 38)
+  if (fgCode) parts.push(fgCode)
+
+  const bgCode = parseColor(bg, 48)
+  if (bgCode) parts.push(bgCode)
+
+  return `${ESC}${parts.join(';')}m`
+}

package/src/buffer.js

@@ -0,0 +1,101 @@
+import { parseSgr } from './ansi.js'
+
+const EMPTY = { ch: ' ', fg: null, bg: null, attrs: 0 }
+
+export function createBuffer(width, height) {
+  const size = width * height
+  const cells = new Array(size)
+  for (let i = 0; i < size; i++) cells[i] = EMPTY
+  return { width, height, cells }
+}
+
+export function clearBuffer(buf) {
+  const len = buf.cells.length
+  for (let i = 0; i < len; i++) buf.cells[i] = EMPTY
+}
+
+export function resizeBuffer(buf, width, height) {
+  buf.width = width
+  buf.height = height
+  buf.cells = new Array(width * height)
+  for (let i = 0; i < buf.cells.length; i++) buf.cells[i] = EMPTY
+}
+
+export function setCell(buf, x, y, ch, fg, bg, attrs) {
+  if (x < 0 || y < 0 || x >= buf.width || y >= buf.height) return
+  buf.cells[y * buf.width + x] = { ch, fg: fg ?? null, bg: bg ?? null, attrs: attrs ?? 0 }
+}
+
+export function writeText(buf, x, y, text, fg, bg, attrs, maxWidth) {
+  if (y < 0 || y >= buf.height) return
+  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,
+      }
+    }
+    return
+  }
+
+  let col = 0
+  const ansi = { fg: null, bg: null, attrs: 0 }
+  let i = 0
+
+  while (i < text.length && col < max) {
+    if (text[i] === '\x1b' && text[i + 1] === '[') {
+      const end = text.indexOf('m', i + 2)
+      if (end !== -1) {
+        parseSgr(text.slice(i + 2, end), ansi)
+        i = end + 1
+        continue
+      }
+    }
+
+    const cx = x + col
+    if (cx >= 0 && cx < buf.width) {
+      const prev = buf.cells[y * buf.width + cx]
+      buf.cells[y * buf.width + cx] = {
+        ch: text[i],
+        fg: ansi.fg ?? fg ?? prev.fg,
+        bg: ansi.bg ?? bg ?? prev.bg,
+        attrs: ansi.attrs || attrs || prev.attrs,
+      }
+    }
+    col++
+    i++
+  }
+}
+
+export function fillRect(buf, x, y, w, h, ch, fg, bg, attrs) {
+  const x2 = Math.min(x + w, buf.width)
+  const y2 = Math.min(y + h, buf.height)
+  const x1 = Math.max(x, 0)
+  const y1 = Math.max(y, 0)
+  for (let row = y1; row < y2; row++) {
+    for (let col = x1; col < x2; col++) {
+      buf.cells[row * buf.width + col] = { ch: ch ?? ' ', fg: fg ?? null, bg: bg ?? null, attrs: attrs ?? 0 }
+    }
+  }
+}
+
+export function dimBuffer(buf) {
+  for (let i = 0; i < buf.cells.length; i++) {
+    const cell = buf.cells[i]
+    if (cell.attrs & 2) continue
+    buf.cells[i] = { ch: cell.ch, fg: cell.fg, bg: cell.bg, attrs: cell.attrs | 2 }
+  }
+}
+
+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]
+}

package/src/button.js

@@ -0,0 +1,26 @@
+import { jsx } from '../jsx-runtime.js'
+import { useInput, useTheme } from './hooks.js'
+
+export function Button({ label, onPress, focused = false, variant }) {
+  const { accent = 'cyan' } = useTheme()
+
+  useInput((event) => {
+    if (!focused) return
+    if (event.key === 'return' || event.key === 'space') {
+      onPress?.()
+      event.stopPropagation()
+    }
+  })
+
+  const dim = variant === 'dim'
+
+  return jsx('text', {
+    style: {
+      bg: focused ? accent : null,
+      color: focused ? 'black' : (dim ? 'gray' : null),
+      bold: focused,
+      dim: !focused && dim,
+    },
+    children: focused ? ` ${label} ` : `[${label}]`,
+  })
+}

package/src/checkbox.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { useInput, useTheme } from './hooks.js'
+
+export function Checkbox({ checked = false, label, onChange, focused = false }) {
+  const { accent = 'cyan' } = useTheme()
+
+  useInput((event) => {
+    if (!focused) return
+    if (event.key === 'space' || event.key === 'return') {
+      onChange?.(!checked)
+      event.stopPropagation()
+    }
+  })
+
+  const icon = checked ? '[x]' : '[ ]'
+  const bg = focused ? accent : null
+  const color = focused ? 'black' : null
+
+  const children = [
+    jsx('text', { style: { color, bold: focused }, children: icon }),
+  ]
+
+  if (label != null) {
+    children.push(jsx('text', { style: { color }, children: ` ${label}` }))
+  }
+
+  return jsxs('box', { style: { flexDirection: 'row', bg }, children })
+}

package/src/components.js

@@ -0,0 +1,13 @@
+import { jsx } from '../jsx-runtime.js'
+
+export function Box(props) {
+  return jsx('box', props)
+}
+
+export function Text(props) {
+  return jsx('text', props)
+}
+
+export function Spacer() {
+  return jsx('box', { style: { flexGrow: 1 } })
+}

package/src/diff.js

@@ -0,0 +1,51 @@
+import { moveTo, sgr, sgrReset } from './ansi.js'
+
+function cellEq(a, b) {
+  return a === b || (a.ch === b.ch && a.fg === b.fg && a.bg === b.bg && a.attrs === b.attrs)
+}
+
+export function diff(prev, curr) {
+  const w = curr.width
+  const h = curr.height
+  const parts = []
+
+  let lastFg = undefined
+  let lastBg = undefined
+  let lastAttrs = undefined
+
+  for (let y = 0; y < h; y++) {
+    let x = 0
+    while (x < w) {
+      const idx = y * w + x
+      if (cellEq(prev.cells[idx], curr.cells[idx])) {
+        x++
+        continue
+      }
+
+      parts.push(moveTo(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.fg !== lastFg || c.bg !== lastBg || c.attrs !== lastAttrs) {
+          parts.push(sgr(c.fg, c.bg, c.attrs))
+          lastFg = c.fg
+          lastBg = c.bg
+          lastAttrs = c.attrs
+        }
+
+        parts.push(c.ch)
+        x++
+      }
+    }
+  }
+
+  if (parts.length > 0) {
+    parts.push(sgrReset)
+  }
+
+  return parts.join('')
+}

package/src/element.js

@@ -0,0 +1,81 @@
+import { createScope, disposeScope, runInScope } from './signal.js'
+
+export const Fragment = Symbol('Fragment')
+
+export function flattenChildren(children) {
+  if (children == null || children === true || children === false) return []
+  if (!Array.isArray(children)) return [children]
+  const result = []
+  for (const child of children) {
+    if (child == null || child === true || child === false) continue
+    if (Array.isArray(child)) result.push(...flattenChildren(child))
+    else result.push(child)
+  }
+  return result
+}
+
+export function resolveTree(element, parent) {
+  if (element == null || typeof element === 'boolean') return null
+
+  if (typeof element === 'string' || typeof element === 'number') {
+    return {
+      type: 'text',
+      props: { children: String(element) },
+      key: null,
+      _parent: parent,
+      _layout: null,
+      _resolved: null,
+      _resolvedChildren: null,
+      _scope: null,
+    }
+  }
+
+  const node = {
+    type: element.type,
+    props: element.props ?? {},
+    key: element.key,
+    _parent: parent,
+    _layout: null,
+    _resolved: null,
+    _resolvedChildren: null,
+    _scope: null,
+  }
+
+  if (typeof element.type === 'function') {
+    let result
+    const scope = createScope(() => {
+      result = element.type(element.props ?? {})
+    })
+    node._scope = scope
+    node._resolved = resolveTree(result, node)
+    return node
+  }
+
+  if (element.type === Fragment) {
+    const children = flattenChildren(element.props?.children)
+    node._resolvedChildren = children.map(c => resolveTree(c, node)).filter(Boolean)
+    return node
+  }
+
+  const children = flattenChildren(element.props?.children)
+  if (children.length > 0) {
+    node._resolvedChildren = children.map(c => resolveTree(c, node)).filter(Boolean)
+  }
+
+  return node
+}
+
+export function getLeafNode(node) {
+  if (!node) return null
+  if (node._resolved) return getLeafNode(node._resolved)
+  return node
+}
+
+export function walkTree(node, fn) {
+  if (!node) return
+  fn(node)
+  if (node._resolved) walkTree(node._resolved, fn)
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) walkTree(child, fn)
+  }
+}

package/src/focus.js

@@ -0,0 +1,135 @@
+import { createSignalRaw } from './signal.js'
+import { registerHook } from './renderer.js'
+import { useInput } from './hooks.js'
+
+export function useFocus({ initial, cycle = 'tab' } = {}) {
+  const state = registerHook(() => {
+    const [current, setCurrent] = createSignalRaw(initial ?? null)
+    return {
+      items: [],
+      groups: new Map(),
+      nameToParent: new Map(),
+      current,
+      setCurrent,
+      stack: [],
+      initialized: false,
+    }
+  })
+
+  function resolveLeaf(name) {
+    const g = state.groups.get(name)
+    if (g) return g.items[g.subIdx]
+    return name
+  }
+
+  function item(name) {
+    if (!state.items.find(i => i.name === name)) {
+      state.items.push({ name, type: 'item' })
+    }
+    if (!state.initialized && !state.current()) {
+      state.setCurrent(name)
+      state.initialized = true
+    }
+  }
+
+  function group(name, { items: subItems, navigate = 'both', wrap = false } = {}) {
+    if (!state.items.find(i => i.name === name)) {
+      state.items.push({ name, type: 'group' })
+    }
+    if (!state.groups.has(name)) {
+      state.groups.set(name, { items: subItems, navigate, wrap, subIdx: 0 })
+      for (const sub of subItems) {
+        state.nameToParent.set(sub, name)
+      }
+    }
+    if (!state.initialized && !state.current()) {
+      state.setCurrent(subItems[0])
+      state.initialized = true
+    }
+  }
+
+  function is(name) {
+    const cur = state.current()
+    if (cur === name) return true
+    const g = state.groups.get(name)
+    if (g && g.items.includes(cur)) return true
+    return false
+  }
+
+  function focus(name) {
+    const parentGroup = state.nameToParent.get(name)
+    if (parentGroup) {
+      const g = state.groups.get(parentGroup)
+      const idx = g.items.indexOf(name)
+      if (idx >= 0) g.subIdx = idx
+    }
+    state.setCurrent(name)
+  }
+
+  function push(name) {
+    state.stack.push(state.current())
+    focus(name)
+  }
+
+  function pop() {
+    if (state.stack.length === 0) return
+    focus(state.stack.pop())
+  }
+
+  function current() {
+    return state.current()
+  }
+
+  function findTopLevel(cur) {
+    const parent = state.nameToParent.get(cur)
+    if (parent) return state.items.findIndex(i => i.name === parent)
+    return state.items.findIndex(i => i.name === cur)
+  }
+
+  useInput((event) => {
+    if (state.items.length === 0) return
+
+    const { key } = event
+    const cur = state.current()
+
+    if (state.stack.length > 0) return
+
+    if (cycle === 'tab' && (key === 'tab' || key === 'shift-tab')) {
+      const idx = findTopLevel(cur)
+      if (idx === -1) return
+      const dir = key === 'tab' ? 1 : -1
+      const next = (idx + dir + state.items.length) % state.items.length
+      const nextItem = state.items[next]
+      state.setCurrent(resolveLeaf(nextItem.name))
+      return
+    }
+
+    const parentName = state.nameToParent.get(cur)
+    if (!parentName) return
+
+    const g = state.groups.get(parentName)
+    const isNav =
+      (g.navigate === 'jk' && (key === 'j' || key === 'k')) ||
+      (g.navigate === 'updown' && (key === 'up' || key === 'down')) ||
+      (g.navigate === 'both' && (key === 'j' || key === 'k' || key === 'up' || key === 'down'))
+
+    if (!isNav) return
+
+    const dir = (key === 'j' || key === 'down') ? 1 : -1
+    const idx = g.subIdx
+    const len = g.items.length
+
+    if (g.wrap) {
+      const next = (idx + dir + len) % len
+      g.subIdx = next
+      state.setCurrent(g.items[next])
+    } else {
+      const next = idx + dir
+      if (next < 0 || next >= len) return
+      g.subIdx = next
+      state.setCurrent(g.items[next])
+    }
+  })
+
+  return { item, group, is, focus, push, pop, current }
+}

package/src/hooks.js

@@ -0,0 +1,63 @@
+import { onCleanup, createSignal as rawCreateSignal } from './signal.js'
+import { getContext, getTheme, registerHook, getInstanceLayout } from './renderer.js'
+import { setTitle } from './ansi.js'
+
+export function useState(initial) {
+  return registerHook(() => rawCreateSignal(initial))
+}
+
+export function useInput(handler) {
+  const ref = registerHook(() => {
+    const ctx = getContext()
+    if (!ctx) throw new Error('useInput must be called within a mounted component')
+    const state = { current: handler }
+    const unsub = ctx.input.onKey((event) => state.current(event))
+    onCleanup(unsub)
+    return state
+  })
+  ref.current = handler
+}
+
+export function useResize(handler) {
+  const ref = registerHook(() => {
+    const ctx = getContext()
+    if (!ctx) throw new Error('useResize must be called within a mounted component')
+    const stream = ctx.stream
+    const state = { current: handler }
+    const onResize = () => state.current({ width: stream.columns, height: stream.rows })
+    stream.on('resize', onResize)
+    onCleanup(() => stream.off('resize', onResize))
+    return state
+  })
+  ref.current = handler
+}
+
+export function useInterval(fn, ms) {
+  const ref = registerHook(() => {
+    const state = { current: fn }
+    const id = setInterval(() => state.current(), ms)
+    onCleanup(() => clearInterval(id))
+    return state
+  })
+  ref.current = fn
+}
+
+export function useLayout() {
+  return getInstanceLayout()
+}
+
+export function useTheme() {
+  return getTheme()
+}
+
+export function useStdout() {
+  const ctx = getContext()
+  if (!ctx) throw new Error('useStdout must be called within a mounted component')
+  return ctx.stream
+}
+
+export function useTitle(title) {
+  const ctx = getContext()
+  if (!ctx) throw new Error('useTitle must be called within a mounted component')
+  ctx.stream.write(setTitle(title))
+}

package/src/hotkey.js

@@ -0,0 +1,35 @@
+import { useInput } from './hooks.js'
+import { registerHook } from './renderer.js'
+
+function parseDescriptor(desc) {
+  const parts = desc.toLowerCase().split('+')
+  const key = parts.pop()
+  const mods = { ctrl: false, meta: false }
+  for (const p of parts) {
+    if (p === 'ctrl') mods.ctrl = true
+    if (p === 'alt' || p === 'meta') mods.meta = true
+  }
+  return { key, ...mods }
+}
+
+const RAW_KEYS = { return: '\r', enter: '\r' }
+
+export function useHotkey(descriptor, handler, { when } = {}) {
+  const parsed = registerHook(() => parseDescriptor(descriptor))
+  const ref = registerHook(() => ({ handler, when }))
+  ref.handler = handler
+  ref.when = when
+
+  useInput((event) => {
+    if (ref.when && !ref.when()) return
+
+    const rawKey = RAW_KEYS[parsed.key] || parsed.key
+    const keyMatch = event.key === rawKey || event.key === parsed.key
+    if (!keyMatch) return
+    if (parsed.ctrl !== event.ctrl) return
+    if (parsed.meta !== event.meta) return
+
+    ref.handler()
+    event.stopPropagation()
+  })
+}