@trendr/core 0.1.0 → 0.2.0

package/src/hooks.js

@@ -1,5 +1,5 @@
-import { onCleanup, createSignal as rawCreateSignal } from './signal.js'
-import { getContext, getTheme, registerHook, getInstanceLayout } from './renderer.js'
+import { onCleanup, createSignal as rawCreateSignal, createSignalRaw } from './signal.js'
+import { getContext, getTheme, getCursor, registerHook, getInstanceLayout, getFrameStats } from './renderer.js'
 import { setTitle } from './ansi.js'
 
 export function useState(initial) {
@@ -18,6 +18,18 @@ export function useInput(handler) {
   ref.current = handler
 }
 
+export function useMouse(handler) {
+  const ref = registerHook(() => {
+    const ctx = getContext()
+    if (!ctx) throw new Error('useMouse must be called within a mounted component')
+    const state = { current: handler }
+    const unsub = ctx.input.onMouse((event) => state.current(event))
+    onCleanup(unsub)
+    return state
+  })
+  ref.current = handler
+}
+
 export function useResize(handler) {
   const ref = registerHook(() => {
     const ctx = getContext()
@@ -56,8 +68,136 @@ export function useStdout() {
   return ctx.stream
 }
 
+export function useRepaint() {
+  const ctx = getContext()
+  if (!ctx) throw new Error('useRepaint must be called within a mounted component')
+  return ctx.repaint
+}
+
+export function useFrameStats() {
+  return getFrameStats()
+}
+
 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))
 }
+
+export function useTimeout(fn, ms) {
+  const ref = registerHook(() => {
+    const state = { current: fn }
+    const id = setTimeout(() => state.current(), ms)
+    onCleanup(() => clearTimeout(id))
+    return state
+  })
+  ref.current = fn
+}
+
+export function useScrollDrag({ barX, barY, thumbHeight, trackHeight, maxOffset, scrollOffset, onScroll }) {
+  const drag = registerHook(() => ({ active: false, startY: 0, startOffset: 0 }))
+
+  useMouse((event) => {
+    if (barX == null || thumbHeight <= 0) return
+
+    if (event.action === 'press' && event.button === 'left' && event.x === barX) {
+      if (event.y >= barY && event.y < barY + thumbHeight) {
+        drag.active = true
+        drag.startY = event.y
+        drag.startOffset = scrollOffset
+        event.stopPropagation()
+      }
+    }
+
+    if (event.action === 'drag' && drag.active) {
+      const dy = event.y - drag.startY
+      const travel = Math.max(1, trackHeight - thumbHeight)
+      const ratio = maxOffset / travel
+      const newOffset = Math.max(0, Math.min(maxOffset, Math.round(drag.startOffset + dy * ratio)))
+      onScroll(newOffset)
+      event.stopPropagation()
+    }
+
+    if (event.action === 'release' && drag.active) {
+      drag.active = false
+    }
+  })
+}
+
+export function useCursor(propCursor, focused) {
+  const config = getCursor(propCursor)
+
+  const state = registerHook(() => {
+    const [visible, setVisible] = createSignalRaw(true)
+    let id = null
+
+    function start(rate) {
+      stop()
+      id = setInterval(() => setVisible(v => !v), rate)
+    }
+
+    function stop() {
+      if (id !== null) { clearInterval(id); id = null }
+      setVisible(true)
+    }
+
+    onCleanup(stop)
+    return { visible, setVisible, start, stop, blinking: false, rate: 0 }
+  })
+
+  const shouldBlink = config.blink && focused
+  if (shouldBlink && (!state.blinking || state.rate !== config.rate)) {
+    state.start(config.rate)
+    state.blinking = true
+    state.rate = config.rate
+  } else if (!shouldBlink && state.blinking) {
+    state.stop()
+    state.blinking = false
+  }
+
+  if (!shouldBlink) state.setVisible(true)
+
+  function reset() {
+    if (!state.blinking) return
+    state.setVisible(true)
+    state.start(config.rate)
+  }
+
+  function cursorStyle() {
+    if (!focused || !state.visible()) return null
+    const s = {}
+    if (config.color) s.color = config.color
+    if (config.bg) s.bg = config.bg
+    if (!config.color && !config.bg) s.inverse = true
+    if (config.style === 'underline') { s.underline = true; delete s.inverse }
+    return s
+  }
+
+  return { config, visible: state.visible, cursorStyle, reset }
+}
+
+export function useAsync(fn, { immediate = false } = {}) {
+  const state = registerHook(() => {
+    const [status, setStatus] = createSignalRaw('idle')
+    const [data, setData] = createSignalRaw(null)
+    const [error, setError] = createSignalRaw(null)
+    let generation = 0
+
+    function run(...args) {
+      const gen = ++generation
+      setStatus('loading')
+      setData(null)
+      setError(null)
+      fn(...args).then(
+        result => { if (gen === generation) { setData(result); setStatus('success') } },
+        err => { if (gen === generation) { setError(err); setStatus('error') } },
+      )
+    }
+
+    if (immediate) run()
+
+    return { status, data, error, run }
+  })
+
+  return state
+}

package/src/input.js

@@ -30,6 +30,28 @@ const SPECIAL_KEYS = {
   ' ': 'space',
 }
 
+const MOUSE_RE = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/
+
+export function parseMouse(raw) {
+  const m = MOUSE_RE.exec(raw)
+  if (!m) return null
+  const cb = parseInt(m[1], 10)
+  const x = parseInt(m[2], 10) - 1
+  const y = parseInt(m[3], 10) - 1
+  const release = m[4] === 'm'
+  const button = cb & 3
+  const scroll = (cb & 64) !== 0
+  const motion = (cb & 32) !== 0
+
+  if (scroll) {
+    return { type: 'mouse', action: 'scroll', direction: button === 0 ? 'up' : 'down', x, y }
+  }
+
+  const buttonName = button === 0 ? 'left' : button === 1 ? 'middle' : 'right'
+  const action = release ? 'release' : motion ? 'drag' : 'press'
+  return { type: 'mouse', action, button: buttonName, x, y }
+}
+
 export function parseKey(data) {
   const raw = typeof data === 'string' ? data : data.toString()
 
@@ -69,6 +91,15 @@ export function splitKeys(data) {
     if (raw[i] === '\x1b') {
       if (i + 1 < raw.length && raw[i + 1] === '[') {
         let j = i + 2
+        // sgr mouse: \x1b[<Cb;Cx;CyM or m
+        if (j < raw.length && raw[j] === '<') {
+          j++
+          while (j < raw.length && ((raw[j] >= '0' && raw[j] <= '9') || raw[j] === ';')) j++
+          if (j < raw.length) j++
+          keys.push(raw.slice(i, j))
+          i = j
+          continue
+        }
         while (j < raw.length && raw[j] >= '0' && raw[j] <= '9') j++
         if (j < raw.length && raw[j] === ';') {
           j++
@@ -98,12 +129,24 @@ export function splitKeys(data) {
 }
 
 export function createInputHandler(stream) {
-  const listeners = new Set()
+  const keyListeners = new Set()
+  const mouseListeners = new Set()
 
   function dispatch(keyStr) {
+    const mouse = parseMouse(keyStr)
+    if (mouse) {
+      mouse.stopPropagation = () => { mouse._stopped = true }
+      const snapshot = [...mouseListeners].reverse()
+      for (const fn of snapshot) {
+        fn(mouse)
+        if (mouse._stopped) break
+      }
+      return
+    }
+
     const event = parseKey(keyStr)
     event.stopPropagation = () => { event._stopped = true }
-    const snapshot = [...listeners].reverse()
+    const snapshot = [...keyListeners].reverse()
     for (const fn of snapshot) {
       fn(event)
       if (event._stopped) break
@@ -131,13 +174,22 @@ export function createInputHandler(stream) {
   }
 
   function onKey(fn) {
-    listeners.add(fn)
-    if (listeners.size === 1) attach()
+    keyListeners.add(fn)
+    if (keyListeners.size + mouseListeners.size === 1) attach()
+    return () => {
+      keyListeners.delete(fn)
+      if (keyListeners.size + mouseListeners.size === 0) detach()
+    }
+  }
+
+  function onMouse(fn) {
+    mouseListeners.add(fn)
+    if (keyListeners.size + mouseListeners.size === 1) attach()
     return () => {
-      listeners.delete(fn)
-      if (listeners.size === 0) detach()
+      mouseListeners.delete(fn)
+      if (keyListeners.size + mouseListeners.size === 0) detach()
     }
   }
 
-  return { onKey, attach, detach }
+  return { onKey, onMouse, attach, detach }
 }

package/src/layout.js

@@ -1,6 +1,20 @@
 import { wordWrap, measureText } from './wrap.js'
 import { Fragment } from './element.js'
 
+const ALL_EDGES = { top: true, right: true, bottom: true, left: true }
+
+export function resolveBorderEdges(style) {
+  if (!style.border) return { top: 0, right: 0, bottom: 0, left: 0 }
+  if (!style.borderEdges) return { top: 1, right: 1, bottom: 1, left: 1 }
+  const e = style.borderEdges
+  return {
+    top: e.top ? 1 : 0,
+    right: e.right ? 1 : 0,
+    bottom: e.bottom ? 1 : 0,
+    left: e.left ? 1 : 0,
+  }
+}
+
 export function computeLayout(node, rect) {
   if (!node) return
 
@@ -51,25 +65,79 @@ export function computeLayout(node, rect) {
   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 be = resolveBorderEdges(style)
+  const innerX = box.x + pad.left + be.left
+  const innerY = box.y + pad.top + be.top
+  const innerW = Math.max(0, box.width - pad.left - pad.right - be.left - be.right)
+  const innerH = Math.max(0, box.height - pad.top - pad.bottom - be.top - be.bottom)
+
+  const flowChildren = []
+  const absChildren = []
+  for (const child of children) {
+    if (childStyle(child).position === 'absolute') absChildren.push(child)
+    else flowChildren.push(child)
+  }
 
   const isRow = style.flexDirection === 'row'
   const gap = style.gap ?? 0
+  const isScroll = style.overflow === 'scroll'
+  const flexMain = isScroll ? 100000 : (isRow ? innerW : innerH)
+
+  if (flowChildren.length > 0) {
+    layoutFlex(flowChildren, {
+      x: innerX,
+      y: innerY,
+      width: isRow && isScroll ? flexMain : innerW,
+      height: !isRow && isScroll ? flexMain : innerH,
+      isRow,
+      gap,
+      justifyContent: style.justifyContent ?? 'flex-start',
+      alignItems: style.alignItems ?? 'stretch',
+    })
+  }
+
+  if (isScroll && flowChildren.length > 0) {
+    let maxEdge = 0
+    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
+      }
+    }
+    node._contentHeight = maxEdge
+  }
+
+  for (const child of absChildren) {
+    layoutAbsolute(child, innerX, innerY, innerW, innerH)
+  }
+}
+
+function layoutAbsolute(child, areaX, areaY, areaW, areaH) {
+  const cs = childStyle(child)
+
+  let w, h
+  if (cs.left != null && cs.right != null) {
+    w = Math.max(0, areaW - (cs.left ?? 0) - (cs.right ?? 0))
+  } else {
+    w = resolveSize(cs.width, areaW) ?? measureChild(child, cs, false, areaW, areaH).width
+  }
 
-  layoutFlex(children, {
-    x: innerX,
-    y: innerY,
-    width: innerW,
-    height: innerH,
-    isRow,
-    gap,
-    justifyContent: style.justifyContent ?? 'flex-start',
-    alignItems: style.alignItems ?? 'stretch',
-  })
+  if (cs.top != null && cs.bottom != null) {
+    h = Math.max(0, areaH - (cs.top ?? 0) - (cs.bottom ?? 0))
+  } else {
+    h = resolveSize(cs.height, areaH) ?? measureChild(child, cs, false, areaW, areaH).height
+  }
+
+  let x = areaX
+  if (cs.left != null) x = areaX + cs.left
+  else if (cs.right != null) x = areaX + areaW - w - cs.right
+
+  let y = areaY
+  if (cs.top != null) y = areaY + cs.top
+  else if (cs.bottom != null) y = areaY + areaH - h - cs.bottom
+
+  computeLayout(child, { x, y, width: Math.max(0, w), height: Math.max(0, h) })
 }
 
 function layoutFlex(children, ctx) {
@@ -186,8 +254,12 @@ function measureChild(child, cs, isRow, availW, availH) {
 
   if (leaf.type === 'text') {
     const text = extractText(leaf)
+    const overflow = cs.overflow
     if (!text) { w = explicitW ?? 0; h = explicitH ?? 1 }
-    else {
+    else if (overflow === 'nowrap' || overflow === 'truncate') {
+      w = explicitW ?? Math.min(availW, measureText(text))
+      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))))
@@ -214,8 +286,8 @@ function measureIntrinsic(node, availW, availH) {
 
   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 be = resolveBorderEdges(style)
+  const chrome = { x: pad.left + pad.right + be.left + be.right, y: pad.top + pad.bottom + be.top + be.bottom }
   const innerW = availW - chrome.x
   const innerH = availH - chrome.y
 

package/src/list.js

@@ -1,16 +1,32 @@
-import { jsx } from '../jsx-runtime.js'
+import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useLayout } from './hooks.js'
+import { useInput, useMouse, useLayout, useTheme, useScrollDrag } from './hooks.js'
 
-export function List({ items, selected: selectedProp, onSelect, height, renderItem, header, focused = true }) {
+export function List({ items, selected: selectedProp, onSelect, renderItem, header, headerHeight = 1, focused = true, itemHeight = 1, scrollbar = false, stickyHeader = false, gap = 0 }) {
+  const { accent = 'cyan' } = useTheme()
   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
+  const viewH = layout.height
+  const contentH = layout.contentHeight ?? 0
+  const headerH = header ? headerHeight : 0
+  const sticky = header && stickyHeader
+
+  const innerHeaderH = sticky ? 0 : headerH
+
+  // when sticky, layout measures the outer wrapper so we can't derive item height from it
+  // use itemHeight directly and compute content from item count
+  const avgH = !sticky && contentH > 0 && items.length > 0
+    ? (contentH - headerH) / items.length
+    : itemHeight
+
+  const scrollViewH = sticky ? viewH - headerH : viewH
+  const scrollContentH = sticky ? items.length * avgH : contentH
+
+  const maxOffset = Math.max(0, scrollContentH - scrollViewH)
 
   useInput(({ key, ctrl }) => {
     if (!focused) return
@@ -18,29 +34,136 @@ export function List({ items, selected: selectedProp, onSelect, height, renderIt
     const len = items.length
     if (len === 0) return
 
-    const h = visibleH || 10
-    const half = Math.max(1, Math.floor(h / 2))
+    const pageItems = viewH > 0 ? Math.max(1, Math.floor(viewH / avgH)) : 10
+    const half = Math.max(1, Math.floor(pageItems / 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 (key === 'pageup' || (ctrl && key === 'b')) setSelected(Math.max(0, selected - pageItems))
+    else if (key === 'pagedown' || (ctrl && key === 'f')) setSelected(Math.min(len - 1, selected + pageItems))
     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))
+  useMouse((event) => {
+    if (!focused) return
+    const len = items.length
+    if (len === 0) return
+    const { x, y } = event
+    if (x < layout.x || x >= layout.x + layout.width || y < layout.y || y >= layout.y + layout.height) return
+
+    if (event.action === 'scroll') {
+      if (event.direction === 'up') setSelected(Math.max(0, selected - 1))
+      else setSelected(Math.min(len - 1, selected + 1))
+      event.stopPropagation()
+      return
+    }
+
+    if (event.action === 'press' && event.button === 'left') {
+      const headerOffset = sticky ? headerH : (header ? headerH : 0)
+      const relY = y - layout.y - headerOffset
+      const idx = Math.floor((relY + scrollOffset) / Math.max(1, avgH))
+      if (idx >= 0 && idx < len) {
+        setSelected(idx)
+        event.stopPropagation()
+      }
+    }
+  })
+
+  const hasBar = scrollbar && scrollViewH > 0 && scrollContentH > scrollViewH
+  const barThumbH = hasBar ? Math.max(1, Math.round((scrollViewH / scrollContentH) * scrollViewH)) : 0
+
+  useScrollDrag({
+    barX: hasBar ? layout.x + layout.width - 1 : null,
+    barY: layout.y + (sticky ? headerH : 0),
+    thumbHeight: barThumbH,
+    trackHeight: scrollViewH,
+    maxOffset,
+    scrollOffset: selected * avgH,
+    onScroll: (offset) => {
+      const idx = Math.round(offset / Math.max(1, avgH))
+      setSelected(Math.max(0, Math.min(items.length - 1, idx)))
+    },
+  })
+
+  const itemTop = selected * avgH + innerHeaderH
+  const itemBottom = itemTop + avgH
+
+  let scrollOffset = 0
+  if (scrollViewH > 0 && scrollContentH > scrollViewH) {
+    const centered = itemTop - Math.floor((scrollViewH - avgH) / 2)
+    scrollOffset = Math.max(0, Math.min(maxOffset, centered))
+    if (itemTop < scrollOffset) scrollOffset = itemTop
+    if (itemBottom > scrollOffset + scrollViewH) scrollOffset = itemBottom - scrollViewH
+    scrollOffset = Math.max(0, Math.min(maxOffset, Math.round(scrollOffset)))
+  }
+
+  const scrollChildren = []
+  if (header && !sticky) scrollChildren.push(header)
+  for (let i = 0; i < items.length; i++) {
+    scrollChildren.push(renderItem(items[i], { selected: i === selected, index: i, focused }))
+  }
+
+  const scrollBox = jsx('box', {
+    style: {
+      flexDirection: 'column',
+      flexGrow: 1,
+      overflow: 'scroll',
+      scrollOffset,
+      gap,
+    },
+    children: scrollChildren,
+  })
+
+  const list = sticky
+    ? jsxs('box', {
+        style: { flexDirection: 'column', flexGrow: 1 },
+        children: [header, scrollBox],
+      })
+    : scrollBox
+
+  if (!scrollbar || scrollViewH <= 0 || scrollContentH <= scrollViewH) return list
+
+  const thumbH = Math.max(1, Math.round((scrollViewH / scrollContentH) * scrollViewH))
+  const thumbStart = maxOffset > 0
+    ? Math.round((scrollOffset / maxOffset) * (scrollViewH - thumbH))
     : 0
 
-  const children = []
-  if (header) children.push(header)
+  const barH = sticky ? scrollViewH : viewH
+  const barChildren = []
+  for (let i = 0; i < barH; i++) {
+    const isThumb = i >= thumbStart && i < thumbStart + thumbH
+    barChildren.push(
+      jsx('text', {
+        key: i,
+        style: { color: isThumb ? (focused ? accent : 'gray') : 'gray', dim: !isThumb },
+        children: isThumb ? '\u2588' : '\u2502',
+      })
+    )
+  }
+
+  const scrollBarCol = jsx('box', {
+    style: { width: 1, flexDirection: 'column' },
+    children: barChildren,
+  })
 
-  for (let i = scrollOffset; i < items.length; i++) {
-    children.push(renderItem(items[i], { selected: i === selected, index: i, focused }))
+  if (sticky) {
+    return jsxs('box', {
+      style: { flexDirection: 'column', flexGrow: 1 },
+      children: [
+        header,
+        jsxs('box', {
+          style: { flexDirection: 'row', flexGrow: 1, gap: 1 },
+          children: [scrollBox, scrollBarCol],
+        }),
+      ],
+    })
   }
 
-  return jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children })
+  return jsxs('box', {
+    style: { flexDirection: 'row', flexGrow: 1, gap: 1 },
+    children: [list, scrollBarCol],
+  })
 }

package/src/progress.js

@@ -1,20 +1,68 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { useTheme } from './hooks.js'
+import { useLayout } from './hooks.js'
 
-export function ProgressBar({ value = 0, width = 20, color, label }) {
+const BARS = {
+  thin: { filled: '\u2501', empty: '\u2501' },
+  block: { filled: '\u2588', empty: '\u2591' },
+  ascii: { filled: '#', empty: '-', bracket: true },
+  braille: {
+    filled: '\u28ff', empty: '\u28ff',
+    tips: ['\u2801', '\u2803', '\u2807', '\u280f', '\u281f', '\u283f', '\u287f'],
+  },
+}
+
+function renderBar(variant, value, width) {
+  const style = BARS[variant] ?? BARS.thin
+
+  if (style.bracket) {
+    const inner = Math.max(0, width - 2)
+    const filled = Math.round(value * inner)
+    return { open: '[', filled: style.filled.repeat(filled), empty: style.empty.repeat(inner - filled), close: ']' }
+  }
+
+  if (style.tips) {
+    const exact = value * width
+    const full = Math.floor(exact)
+    const frac = exact - full
+    const tipIdx = Math.min(style.tips.length - 1, Math.round(frac * (style.tips.length - 1)))
+    const tip = full < width && frac > 0 ? style.tips[tipIdx] : ''
+    const emptyCount = Math.max(0, width - full - (tip ? 1 : 0))
+    return { filled: style.filled.repeat(full) + tip, empty: style.empty.repeat(emptyCount) }
+  }
+
+  const filled = Math.round(value * width)
+  return { filled: style.filled.repeat(filled), empty: style.empty.repeat(width - filled) }
+}
+
+export function ProgressBar({ value = 0, variant = 'thin', width, color, label, count, percentage = true }) {
   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 layout = useLayout()
+
+  const labelPart = label ? `${label}  ` : ''
+  const pctPart = percentage ? ` ${Math.round(clamped * 100)}%` : ''
+  const countPart = count ? ` (${count})` : ''
+  const rightText = pctPart + countPart
+  const reservedWidth = labelPart.length + rightText.length
+  const barWidth = width ?? Math.max(5, (layout.width || 20) - reservedWidth)
+
+  const bar = renderBar(variant, clamped, barWidth)
+
+  const children = []
+
+  if (label) {
+    children.push(jsx('text', { style: { bold: true }, children: labelPart }))
+  }
 
-  const children = [
-    jsx('text', { style: { color: c }, children: bar }),
-  ]
+  if (bar.open) children.push(jsx('text', { children: bar.open }))
+  children.push(jsx('text', { style: { color: c }, children: bar.filled }))
+  children.push(jsx('text', { style: { color: c, dim: true }, children: bar.empty }))
+  if (bar.close) children.push(jsx('text', { children: bar.close }))
 
-  if (label != null) {
-    children.push(jsx('text', { style: { color: 'gray', dim: true }, children: ` ${label}` }))
+  if (rightText) {
+    children.push(jsx('text', { style: { color: 'gray' }, children: rightText }))
   }
 
   return jsxs('box', { style: { flexDirection: 'row' }, children })