@trendr/core 0.4.14 → 0.4.16

package/index.js

@@ -20,11 +20,12 @@ export { Diff } from './src/diff-view.js'
 export { computeDiff } from './src/diff-engine.js'
 export { PickList } from './src/pick-list.js'
 export { ScrollBox } from './src/scroll-box.js'
+export { HorizontalScrollBox } from './src/horizontal-scroll-box.js'
 export { SplitPane } from './src/split-pane.js'
 export { MillerNav } from './src/miller-nav.js'
 export { MenuBar } from './src/menubar.js'
 export { Menu } from './src/menu.js'
-export { Markdown } from './src/markdown.js'
+export { CodeBlock, Markdown } from './src/markdown.js'
 export { Task } from './src/task.js'
 export { Shimmer } from './src/shimmer.js'
 export { useFocus, useFocusTrap } from './src/focus.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "author": "Jonathan Pyers",

package/src/diff-view.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useMouse, useLayout, useHitTest, useScrollDrag } from './hooks.js'
-import { sliceVisibleRange } from './wrap.js'
+import { measureText, sliceVisibleRange } from './wrap.js'
 import { computeDiff } from './diff-engine.js'
+import { HorizontalScrollBox } from './horizontal-scroll-box.js'
 
 const PALETTE = {
   addBg: '#10301a', addGutterBg: '#0a2412', addIntraBg: '#1f6e34', addMarker: '#7ee787',
@@ -120,6 +121,8 @@ export function Diff({
 
   const oldW = digits(rows, 'oldNo')
   const newW = digits(rows, 'newNo')
+  const gutterWidth = lineNumbers ? oldW + newW + 6 : 2
+  const contentWidth = gutterWidth + Math.max(0, ...rows.map((row) => measureText(row.text ?? '')))
 
   const headerH = filename ? 1 : 0
   const h = Math.max(0, layout.height - headerH)
@@ -227,6 +230,11 @@ export function Diff({
 
   const visible = h > 0 ? rows.slice(clamped, clamped + h) : []
   const bodyRows = visible.map((row, i) => renderRow(row, clamped + i))
+  const scrollableRows = jsx(HorizontalScrollBox, {
+    contentWidth,
+    style: { flexDirection: 'column', flexGrow: 1 },
+    children: jsx('box', { style: { flexDirection: 'column' }, children: bodyRows }),
+  })
 
   let body
   if (rows.length === 0) {
@@ -247,12 +255,12 @@ export function Diff({
     body = jsxs('box', {
       style: { flexDirection: 'row', flexGrow: 1 },
       children: [
-        jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children: bodyRows }),
+        scrollableRows,
         jsx('box', { style: { flexDirection: 'column', width: barW }, children: bar }),
       ],
     })
   } else {
-    body = jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children: bodyRows })
+    body = scrollableRows
   }
 
   if (!filename) return body

package/src/focus.js

@@ -79,13 +79,14 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     return state.items.filter(i => i.gen === state.gen).sort((a, b) => a.seq - b.seq)
   }
 
-  function item(name) {
+  function item(name, layout) {
     const existing = state.items.find(i => i.name === name)
     if (existing) {
       existing.gen = state.gen
       existing.seq = state.seq++
+      existing.layout = layout
     } else {
-      state.items.push({ name, type: 'item', gen: state.gen, seq: state.seq++ })
+      state.items.push({ name, type: 'item', gen: state.gen, seq: state.seq++, layout })
     }
     if (state.current() == null) state.setCurrent(name)
   }
@@ -157,6 +158,11 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     return state.current()
   }
 
+  function currentLayout() {
+    const name = state.current()
+    return state.items.find(i => i.name === name)?.layout ?? null
+  }
+
   function findTopLevel(cur, items) {
     const parent = state.nameToParent.get(cur)
     if (parent) return items.findIndex(i => i.name === parent)
@@ -220,5 +226,5 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     }
   })
 
-  return { item, group, is, focus, push, pop, current }
+  return { item, group, is, focus, push, pop, current, currentLayout }
 }

package/src/horizontal-scroll-box.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useHitTest, useLayout, useMouse, useTheme } from './hooks.js'
+
+export function HorizontalScrollBox({ children, contentWidth, step = 3, indicators = true, style: userStyle }) {
+  const { muted = 'gray' } = useTheme()
+  const [offset, setOffset] = createSignal(0)
+  const layout = useLayout()
+  const hitTest = useHitTest()
+  const measuredWidth = contentWidth ?? layout.contentWidth ?? 0
+  const maxOffset = Math.max(0, measuredWidth - layout.width)
+  const clamped = Math.max(0, Math.min(maxOffset, offset()))
+
+  useMouse((event) => {
+    if (event.action !== 'scroll' || !hitTest(event.x, event.y)) return
+    if (event.direction !== 'left' && event.direction !== 'right') return
+    const next = Math.max(0, Math.min(maxOffset, clamped + (event.direction === 'left' ? -step : step)))
+    if (next === clamped) return
+    setOffset(next)
+    event.stopPropagation()
+  })
+
+  const overlays = []
+  if (indicators && clamped > 0) {
+    overlays.push(jsx('text', {
+      key: 'left',
+      style: { position: 'absolute', left: 0, top: 0, color: muted, dim: true, copyIgnore: true },
+      children: '‹',
+    }))
+  }
+  if (indicators && clamped < maxOffset) {
+    overlays.push(jsx('text', {
+      key: 'right',
+      style: { position: 'absolute', right: 0, top: 0, color: muted, dim: true, copyIgnore: true },
+      children: '›',
+    }))
+  }
+
+  return jsxs('box', {
+    style: userStyle,
+    children: [
+      jsx('box', {
+        style: { flexDirection: 'row', overflow: 'scroll', scrollOffsetX: clamped },
+        children,
+      }),
+      ...overlays,
+    ],
+  })
+}

package/src/layout.js

@@ -98,17 +98,22 @@ export function computeLayout(node, rect) {
 
   if (isScroll && flowChildren.length > 0) {
     let maxEdge = 0
-    const heights = []
+    const sizes = []
     for (const child of flowChildren) {
       const cl = getLeaf(child)?._layout
       if (cl) {
         const edge = isRow ? (cl.x + cl.width - innerX) : (cl.y + cl.height - innerY)
         if (edge > maxEdge) maxEdge = edge
-        heights.push(isRow ? cl.width : cl.height)
+        sizes.push(isRow ? cl.width : cl.height)
       }
     }
-    node._contentHeight = maxEdge
-    node._childHeights = heights
+    if (isRow) {
+      node._contentWidth = maxEdge
+      node._childWidths = sizes
+    } else {
+      node._contentHeight = maxEdge
+      node._childHeights = sizes
+    }
   }
 
   // absolute children anchor to the padding box (inside borders, ignoring

package/src/markdown.js

@@ -106,7 +106,21 @@ export function renderInline(s, { accent = 'cyan' } = {}) {
   return out
 }
 
-export function Markdown({ text, children, highlight, codeBg = '#1e1e22', style: userStyle }) {
+export function CodeBlock({ value, language, highlight, codeBg = '#1e1e22' }) {
+  const shown = highlight ? highlight(value, language) : value
+  const rows = shown.split('\n').map((line, key) => jsx('text', {
+    key,
+    style: { overflow: 'truncate' },
+    children: line || ' ',
+  }))
+
+  return jsx('box', {
+    style: { flexDirection: 'column', bg: codeBg, paddingX: 1 },
+    children: rows,
+  })
+}
+
+export function Markdown({ text, children, highlight, codeBg = '#1e1e22', codeBlock: CodeBlockComponent = CodeBlock, style: userStyle }) {
   const { accent = 'cyan', muted = 'gray' } = useTheme()
   const layout = useLayout()
   const src = text ?? (Array.isArray(children) ? children.join('') : (children ?? ''))
@@ -126,13 +140,12 @@ export function Markdown({ text, children, highlight, codeBg = '#1e1e22', style:
     }
 
     if (block.type === 'code') {
-      const raw = block.lines.join('\n')
-      const shown = highlight ? highlight(raw, block.lang) : raw
-      const rows = shown.split('\n').map((line, k) => jsx('text', { key: k, style: { overflow: 'truncate' }, children: line || ' ' }))
-      return jsx('box', {
+      return jsx(CodeBlockComponent, {
         key,
-        style: { flexDirection: 'column', bg: codeBg, paddingX: 1 },
-        children: rows,
+        value: block.lines.join('\n'),
+        language: block.lang,
+        highlight,
+        codeBg,
       })
     }
 

package/src/renderer.js

@@ -220,14 +220,14 @@ function clearOverlayRect(overlayTree, buf) {
   fillRect(buf, rect.x, rect.y, rect.width, rect.height, ' ', null, null, 0)
 }
 
-function findScrollContentHeight(node) {
+function findScrollContentSize(node, field) {
   if (!node) return null
-  if (node._contentHeight != null) return node._contentHeight
-  if (node._resolved) return findScrollContentHeight(node._resolved)
+  if (node[field] != null) return node[field]
+  if (node._resolved) return findScrollContentSize(node._resolved, field)
   if (node._resolvedChildren) {
     for (const child of node._resolvedChildren) {
-      const h = findScrollContentHeight(child)
-      if (h != null) return h
+      const size = findScrollContentSize(child, field)
+      if (size != null) return size
     }
   }
   return null
@@ -251,7 +251,8 @@ function updateOverlayLayouts(node) {
   if (node._instance) {
     const rect = node._availableRect ?? node._layout
     if (rect) {
-      const ch = findScrollContentHeight(node)
+      const ch = findScrollContentSize(node, '_contentHeight')
+      const cw = findScrollContentSize(node, '_contentWidth')
       if (!node._instance.layout) node._instance.layout = { x: 0, y: 0, width: 0, height: 0 }
       const target = node._instance.layout
       target.x = rect.x
@@ -259,6 +260,7 @@ function updateOverlayLayouts(node) {
       target.width = rect.width
       target.height = rect.height
       target.contentHeight = ch
+      target.contentWidth = cw
       target.childHeights = findScrollChildHeights(node)
     }
   }
@@ -417,8 +419,9 @@ function paintTree(node, buf, clip, offset, prevBuf) {
   let childOffset = offset
   let childPrevBuf = prevBuf
   if (style.overflow === 'scroll') {
+    const scrollX = style.scrollOffsetX ?? 0
     const scrollY = style.scrollOffset ?? 0
-    childOffset = { x: offset?.x ?? 0, y: (offset?.y ?? 0) - scrollY }
+    childOffset = { x: (offset?.x ?? 0) - scrollX, y: (offset?.y ?? 0) - scrollY }
     childPrevBuf = null
   }
 
@@ -807,15 +810,17 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     for (const inst of instances.values()) {
       const rect = inst.node?._availableRect ?? inst.node?._layout
       if (!rect) continue
-      const ch = findScrollContentHeight(inst.node)
+      const ch = findScrollContentSize(inst.node, '_contentHeight')
+      const cw = findScrollContentSize(inst.node, '_contentWidth')
       if (!inst.layout) inst.layout = { x: 0, y: 0, width: 0, height: 0 }
       const p = inst.layout
-      if (p.width !== rect.width || p.height !== rect.height || p.contentHeight !== ch) changed = true
+      if (p.width !== rect.width || p.height !== rect.height || p.contentHeight !== ch || p.contentWidth !== cw) changed = true
       p.x = rect.x
       p.y = rect.y
       p.width = rect.width
       p.height = rect.height
       p.contentHeight = ch
+      p.contentWidth = cw
       p.childHeights = findScrollChildHeights(inst.node)
     }
     return changed
@@ -990,10 +995,11 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     for (const inst of instances.values()) {
       const rect = inst.node?._availableRect ?? inst.node?._layout
       if (!rect) continue
-      const ch = findScrollContentHeight(inst.node)
+      const ch = findScrollContentSize(inst.node, '_contentHeight')
+      const cw = findScrollContentSize(inst.node, '_contentWidth')
       if (!inst.layout) inst.layout = { x: 0, y: 0, width: 0, height: 0 }
       const prev = inst.layout
-      if (prev.width !== rect.width || prev.height !== rect.height || prev.contentHeight !== ch) {
+      if (prev.width !== rect.width || prev.height !== rect.height || prev.contentHeight !== ch || prev.contentWidth !== cw) {
         layoutChanged = true
       }
       prev.x = rect.x
@@ -1001,6 +1007,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
       prev.width = rect.width
       prev.height = rect.height
       prev.contentHeight = ch
+      prev.contentWidth = cw
       prev.childHeights = findScrollChildHeights(inst.node)
     }
 
@@ -1014,13 +1021,15 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
       for (const inst of instances.values()) {
         const rect = inst.node?._availableRect ?? inst.node?._layout
         if (!rect) continue
-        const ch = findScrollContentHeight(inst.node)
+        const ch = findScrollContentSize(inst.node, '_contentHeight')
+        const cw = findScrollContentSize(inst.node, '_contentWidth')
         if (!inst.layout) inst.layout = { x: 0, y: 0, width: 0, height: 0 }
         inst.layout.x = rect.x
         inst.layout.y = rect.y
         inst.layout.width = rect.width
         inst.layout.height = rect.height
         inst.layout.contentHeight = ch
+        inst.layout.contentWidth = cw
         inst.layout.childHeights = findScrollChildHeights(inst.node)
         inst._dirty = true
       }

package/src/scroll-box.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
 import { useInput, useMouse, useLayout, useTheme, useScrollDrag } from './hooks.js'
 
-export function ScrollBox({ children, focused = true, scrollOffset: offsetProp, onScroll, scrollbar = false, gap = 0, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
+export function ScrollBox({ children, focused = true, followFocus, focusPadding = 0, scrollOffset: offsetProp, onScroll, scrollbar = false, gap = 0, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
   const { accent = 'cyan', muted = 'gray' } = useTheme()
   const [offsetInternal, setOffsetInternal] = createSignal(0)
   const layout = useLayout()
@@ -22,6 +22,21 @@ export function ScrollBox({ children, focused = true, scrollOffset: offsetProp,
   const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
   const clamped = clamp(offset)
 
+  if (followFocus) {
+    const target = typeof followFocus === 'function' ? followFocus() : followFocus.currentLayout?.()
+    if (target && visibleH > 0) {
+      const top = target.y - layout.y + clamped
+      const bottom = top + Math.max(1, target.height ?? 1)
+      const padding = Math.max(0, focusPadding)
+      const next = top < clamped + padding
+        ? top - padding
+        : bottom > clamped + visibleH - padding
+          ? bottom - visibleH + padding
+          : clamped
+      if (clamp(next) !== clamped) setOffset(next)
+    }
+  }
+
   useInput(({ key, ctrl }) => {
     if (!focused) return
     if (contentH <= visibleH) return