@trendr/core 0.1.0

package/src/text-input.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useLayout } from './hooks.js'
+
+const BOX = { flexDirection: 'row', height: 1, minHeight: 1, flexGrow: 1 }
+
+export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused = true, initialValue }) {
+  const init = initialValue ?? ''
+  const [value, setValue] = createSignal(init)
+  const [cursor, setCursor] = createSignal(init.length)
+  const layout = useLayout()
+
+  function update(v, c) {
+    setValue(v)
+    setCursor(c)
+    if (onChange) onChange(v)
+  }
+
+  useInput((event) => {
+    if (!focused) return
+
+    const { key, raw, ctrl } = event
+    const v = value()
+    const c = cursor()
+
+    if (key === 'return') {
+      if (onSubmit) {
+        onSubmit(v)
+        update('', 0)
+        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)); event.stopPropagation(); return }
+    if (key === 'right') { setCursor(Math.min(v.length, c + 1)); event.stopPropagation(); return }
+
+    if (key === 'home' || (ctrl && raw === '\x01')) { setCursor(0); event.stopPropagation(); return }
+    if (key === 'end' || (ctrl && raw === '\x05')) { setCursor(v.length); event.stopPropagation(); return }
+
+    if (ctrl && raw === '\x15') { update(v.slice(c), 0); event.stopPropagation(); return }
+    if (ctrl && raw === '\x0b') { update(v.slice(0, c), 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 && 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 })
+  }
+
+  if (!v && placeholder && focused) {
+    return jsxs('box', {
+      style: BOX,
+      children: [
+        jsx('text', { style: { inverse: true, color: 'gray' }, children: placeholder[0] }),
+        placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
+      ],
+    })
+  }
+
+  const contentWidth = v.length + 1
+  const needsScroll = w > 0 && contentWidth > w
+
+  if (!needsScroll) {
+    const cursorChar = v[c] || ' '
+    return jsxs('box', {
+      style: BOX,
+      children: [
+        v.slice(0, c) && jsx('text', { children: v.slice(0, c) }),
+        jsx('text', { style: { inverse: focused }, children: cursorChar }),
+        v.slice(c + 1) && jsx('text', { children: v.slice(c + 1) }),
+      ],
+    })
+  }
+
+  let scrollStart = 0
+  if (c >= w) {
+    scrollStart = c - w + 1
+  }
+
+  const visible = v.slice(scrollStart, scrollStart + w)
+  const cursorInView = c - scrollStart
+  const before = visible.slice(0, cursorInView)
+  const cursorChar = visible[cursorInView] || ' '
+  const after = visible.slice(cursorInView + 1)
+
+  return jsxs('box', {
+    style: BOX,
+    children: [
+      before && jsx('text', { children: before }),
+      jsx('text', { style: { inverse: focused }, children: cursorChar }),
+      after && jsx('text', { children: after }),
+    ],
+  })
+}

package/src/toast.js

@@ -0,0 +1,61 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignalRaw } from './signal.js'
+import { useInterval } from './hooks.js'
+import { registerHook } from './renderer.js'
+import { registerOverlay } from './renderer.js'
+
+const POSITIONS = {
+  'top-left':      { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  'top-center':    { justifyContent: 'flex-start', alignItems: 'center' },
+  'top-right':     { justifyContent: 'flex-start', alignItems: 'flex-end' },
+  'center-left':   { justifyContent: 'center',     alignItems: 'flex-start' },
+  'center':        { justifyContent: 'center',     alignItems: 'center' },
+  'center-right':  { justifyContent: 'center',     alignItems: 'flex-end' },
+  'bottom-left':   { justifyContent: 'flex-end',   alignItems: 'flex-start' },
+  'bottom-center': { justifyContent: 'flex-end',   alignItems: 'center' },
+  'bottom-right':  { justifyContent: 'flex-end',   alignItems: 'flex-end' },
+}
+
+let nextId = 0
+
+export function useToast({ duration = 2000, position = 'bottom-right', margin = 1 } = {}) {
+  const [items, setItems] = registerHook(() => createSignalRaw([]))
+
+  useInterval(() => {
+    const now = Date.now()
+    setItems(prev => {
+      const next = prev.filter(t => t.expires > now)
+      return next.length === prev.length ? prev : next
+    })
+  }, 200)
+
+  function toast(message) {
+    const id = nextId++
+    setItems(prev => [...prev, { id, message, expires: Date.now() + duration }])
+  }
+
+  const list = items()
+
+  if (list.length > 0) {
+    const pos = POSITIONS[position] || POSITIONS['bottom-right']
+    const overlay = jsx('box', {
+      style: {
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+        padding: margin,
+        ...pos,
+      },
+      children: list.map(t =>
+        jsx('text', {
+          key: t.id,
+          style: { inverse: true },
+          children: ` ${t.message} `,
+        })
+      ),
+    })
+    registerOverlay(overlay, { fullscreen: true })
+  }
+
+  return toast
+}

package/src/wrap.js

@@ -0,0 +1,133 @@
+// matches any ANSI escape sequence (CSI + OSC)
+const ANSI_RE = /\x1b\[[0-9;]*m/g
+
+export function stripAnsi(text) {
+  return text.indexOf('\x1b') === -1 ? text : text.replace(ANSI_RE, '')
+}
+
+export function measureText(text) {
+  const clean = stripAnsi(text)
+  let width = 0
+  for (let i = 0; i < clean.length; i++) {
+    const code = clean.charCodeAt(i)
+    if (code >= 0x1100 && isWide(code)) width += 2
+    else width += 1
+  }
+  return width
+}
+
+// iterates visible characters of a string, bundling any preceding
+// ANSI sequences with the character they precede
+function* visibleChars(str) {
+  let i = 0
+  let pending = ''
+  while (i < str.length) {
+    if (str[i] === '\x1b' && str[i + 1] === '[') {
+      const end = str.indexOf('m', i + 2)
+      if (end !== -1) {
+        pending += str.slice(i, end + 1)
+        i = end + 1
+        continue
+      }
+    }
+    yield { chunk: pending + str[i], width: charWidth(str.charCodeAt(i)) }
+    pending = ''
+    i++
+  }
+}
+
+function charWidth(code) {
+  return (code >= 0x1100 && isWide(code)) ? 2 : 1
+}
+
+export function sliceVisible(text, maxWidth) {
+  let result = ''
+  let width = 0
+  for (const { chunk, width: w } of visibleChars(text)) {
+    if (width + w > maxWidth) break
+    result += chunk
+    width += w
+  }
+  return result
+}
+
+export function wordWrap(text, maxWidth) {
+  if (maxWidth <= 0) return []
+  if (!text) return ['']
+
+  const lines = []
+
+  for (const rawLine of text.split('\n')) {
+    if (rawLine.length === 0) {
+      lines.push('')
+      continue
+    }
+
+    if (measureText(rawLine) <= maxWidth) {
+      lines.push(rawLine)
+      continue
+    }
+
+    const words = rawLine.split(/\s+/)
+    let line = ''
+    let lineWidth = 0
+
+    for (const word of words) {
+      if (!word) continue
+      const ww = measureText(word)
+
+      if (lineWidth === 0 && ww <= maxWidth) {
+        line = word
+        lineWidth = ww
+      } else if (lineWidth === 0 && ww > maxWidth) {
+        for (const { chunk, width } of visibleChars(word)) {
+          if (lineWidth + width > maxWidth) {
+            lines.push(line)
+            line = ''
+            lineWidth = 0
+          }
+          line += chunk
+          lineWidth += width
+        }
+      } else if (lineWidth + 1 + ww <= maxWidth) {
+        line += ' ' + word
+        lineWidth += 1 + ww
+      } else if (ww > maxWidth) {
+        if (line) lines.push(line)
+        line = ''
+        lineWidth = 0
+        for (const { chunk, width } of visibleChars(word)) {
+          if (lineWidth + width > maxWidth) {
+            lines.push(line)
+            line = ''
+            lineWidth = 0
+          }
+          line += chunk
+          lineWidth += width
+        }
+      } else {
+        lines.push(line)
+        line = word
+        lineWidth = ww
+      }
+    }
+
+    lines.push(line)
+  }
+
+  return lines
+}
+
+function isWide(code) {
+  return (
+    (code >= 0x1100 && code <= 0x115f) ||
+    (code >= 0x2e80 && code <= 0x303e) ||
+    (code >= 0x3040 && code <= 0x33bf) ||
+    (code >= 0xf900 && code <= 0xfaff) ||
+    (code >= 0xfe30 && code <= 0xfe6f) ||
+    (code >= 0xff01 && code <= 0xff60) ||
+    (code >= 0xffe0 && code <= 0xffe6) ||
+    (code >= 0x20000 && code <= 0x2fffd) ||
+    (code >= 0x30000 && code <= 0x3fffd)
+  )
+}