@trendr/core 0.1.0 → 0.2.0

package/src/scroll-box.js

@@ -0,0 +1,105 @@
+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, thumbChar = '\u2588', trackChar = '\u2502', style: userStyle }) {
+  const { accent = 'cyan' } = useTheme()
+  const [offsetInternal, setOffsetInternal] = createSignal(0)
+  const layout = useLayout()
+
+  const offset = offsetProp ?? offsetInternal()
+  const setOffset = onScroll ?? setOffsetInternal
+
+  const visibleH = layout.height
+  const contentH = layout.contentHeight ?? 0
+  const maxOffset = Math.max(0, contentH - visibleH)
+
+  const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
+
+  useInput(({ key, ctrl }) => {
+    if (!focused) return
+    if (contentH <= visibleH) return
+
+    const pageH = visibleH || 10
+    const half = Math.max(1, Math.floor(pageH / 2))
+
+    if (key === 'up' || key === 'k') setOffset(clamp(offset - 1))
+    else if (key === 'down' || key === 'j') setOffset(clamp(offset + 1))
+    else if (key === 'pageup' || (ctrl && key === 'b')) setOffset(clamp(offset - pageH))
+    else if (key === 'pagedown' || (ctrl && key === 'f')) setOffset(clamp(offset + pageH))
+    else if (ctrl && key === 'u') setOffset(clamp(offset - half))
+    else if (ctrl && key === 'd') setOffset(clamp(offset + half))
+    else if (key === 'home' || key === 'g') setOffset(0)
+    else if (key === 'end' || key === 'G') setOffset(maxOffset)
+  })
+
+  useMouse((event) => {
+    if (!focused) return
+    if (event.action !== 'scroll') return
+    if (contentH <= visibleH) 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.direction === 'up') setOffset(clamp(offset - 3))
+    else setOffset(clamp(offset + 3))
+    event.stopPropagation()
+  })
+
+  const hasBar = scrollbar && visibleH > 0 && contentH > visibleH
+  const barThumbH = hasBar ? Math.max(1, Math.round((visibleH / contentH) * visibleH)) : 0
+  const barThumbStart = hasBar && maxOffset > 0 ? Math.round((offset / maxOffset) * (visibleH - barThumbH)) : 0
+
+  useScrollDrag({
+    barX: hasBar ? layout.x + layout.width - 1 : null,
+    barY: layout.y + barThumbStart,
+    thumbHeight: barThumbH,
+    trackHeight: visibleH,
+    maxOffset,
+    scrollOffset: offset,
+    onScroll: (v) => setOffset(clamp(v)),
+  })
+
+  const scrollBox = jsx('box', {
+    style: {
+      flexDirection: 'column',
+      flexGrow: 1,
+      ...userStyle,
+      overflow: 'scroll',
+      scrollOffset: offset,
+    },
+    children,
+  })
+
+  if (!scrollbar) return scrollBox
+
+  const hasOverflow = visibleH > 0 && contentH > visibleH
+  const barChildren = []
+
+  if (hasOverflow) {
+    const thumbH = Math.max(1, Math.round((visibleH / contentH) * visibleH))
+    const thumbStart = maxOffset > 0
+      ? Math.round((offset / maxOffset) * (visibleH - thumbH))
+      : 0
+
+    for (let i = 0; i < visibleH; 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 ? thumbChar : trackChar,
+        })
+      )
+    }
+  }
+
+  return jsxs('box', {
+    style: { flexDirection: 'row', flexGrow: userStyle?.flexGrow, gap: 1 },
+    children: [
+      scrollBox,
+      jsx('box', {
+        style: { width: 1, flexDirection: 'column' },
+        children: barChildren,
+      }),
+    ],
+  })
+}

package/src/scrollable-text.js

@@ -1,12 +1,9 @@
 import { jsx } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useLayout, useTheme } from './hooks.js'
+import { useInput, useMouse, useLayout, useTheme, useScrollDrag } from './hooks.js'
 import { wordWrap } from './wrap.js'
 
-const TRACK = '\u2502'
-const THUMB = '\u2588'
-
-export function ScrollableText({ content = '', focused = true, scrollOffset: offsetProp, onScroll, width: widthProp, scrollbar = false, wrap = true }) {
+export function ScrollableText({ content = '', focused = true, scrollOffset: offsetProp, onScroll, width: widthProp, scrollbar = false, wrap = true, thumbChar = '\u2588', trackChar = '\u2502' }) {
   const { accent = 'cyan' } = useTheme()
   const [offsetInternal, setOffsetInternal] = createSignal(0)
   const layout = useLayout()
@@ -40,6 +37,31 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
     else if (key === 'end' || key === 'G') setOffset(maxOffset)
   })
 
+  useMouse((event) => {
+    if (!focused) return
+    if (event.action !== 'scroll') return
+    if (lines.length <= (h || 1)) 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.direction === 'up') setOffset(clamp(offset - 3))
+    else setOffset(clamp(offset + 3))
+    event.stopPropagation()
+  })
+
+  const hasBar = scrollbar && h > 0 && lines.length > h
+  const barThumbH = hasBar ? Math.max(1, Math.round((h / lines.length) * h)) : 0
+  const barThumbStart = hasBar && maxOffset > 0 ? Math.round((offset / maxOffset) * (h - barThumbH)) : 0
+
+  useScrollDrag({
+    barX: hasBar ? layout.x + layout.width - 1 : null,
+    barY: layout.y + barThumbStart,
+    thumbHeight: barThumbH,
+    trackHeight: h,
+    maxOffset,
+    scrollOffset: offset,
+    onScroll: (v) => setOffset(clamp(v)),
+  })
+
   const visible = lines.slice(offset, h > 0 ? offset + h : undefined)
 
   const textStyle = wrap ? undefined : { overflow: 'truncate' }
@@ -58,7 +80,7 @@ export function ScrollableText({ content = '', focused = true, scrollOffset: off
 
   const children = visible.map((line, i) => {
     const isThumb = i >= thumbStart && i < thumbStart + thumbH
-    const barChar = isThumb ? THUMB : TRACK
+    const barChar = isThumb ? thumbChar : trackChar
     const barColor = isThumb ? (focused ? accent : 'gray') : 'gray'
 
     return jsx('box', {

package/src/select.js

@@ -1,9 +1,143 @@
 import { jsx } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useTheme } from './hooks.js'
-import { registerOverlay, getInstanceLayout, getContext } from './renderer.js'
+import { useInput, useMouse, useLayout, useTheme } from './hooks.js'
+import { registerOverlay, getInstanceLayout, getContext, registerHook } from './renderer.js'
 
-export function Select({ items, selected, onSelect, focused = false, overlay = false, maxVisible = 10, placeholder = 'select...', renderItem, style: userStyle }) {
+function SelectDropdown({ items, cursor, scroll, visibleCount, onSelect, onClose, onCursorChange, renderItem, style: s, accent, dropWidth }) {
+  const layout = useLayout()
+  const drag = registerHook(() => ({ active: false, startY: 0, startCursor: 0 }))
+
+  useMouse((event) => {
+    if (event.action === 'release') {
+      if (drag.active) drag.active = false
+      return
+    }
+
+    if (event.action === 'drag' && drag.active) {
+      const thumbH = Math.max(1, Math.round((visibleCount / items.length) * visibleCount))
+      const dy = event.y - drag.startY
+      const travel = Math.max(1, visibleCount - thumbH)
+      const ratio = (items.length - 1) / travel
+      const idx = Math.max(0, Math.min(items.length - 1, Math.round(drag.startCursor + dy * ratio)))
+      onCursorChange(idx)
+      event.stopPropagation()
+      return
+    }
+
+    // layout not yet computed - consume event but don't act
+    if (layout.width === 0 || layout.height === 0) {
+      event.stopPropagation()
+      return
+    }
+
+    const { x, y } = event
+    const boxRight = layout.x + dropWidth
+    const inside = x >= layout.x && x < boxRight && y >= layout.y && y < layout.y + layout.height
+
+    if (event.action === 'scroll') {
+      if (!inside) return
+      if (event.direction === 'up') onCursorChange(Math.max(0, cursor - 1))
+      else onCursorChange(Math.min(items.length - 1, cursor + 1))
+      event.stopPropagation()
+      return
+    }
+
+    if (event.action !== 'press' || event.button !== 'left') return
+
+    if (!inside) {
+      onClose()
+      event.stopPropagation()
+      return
+    }
+
+    const scrollable = items.length > visibleCount
+    if (scrollable && x >= boxRight - 4) {
+      const maxSc = items.length - visibleCount
+      const thumbH = Math.max(1, Math.round((visibleCount / items.length) * visibleCount))
+      const thumbStart = maxSc > 0 ? Math.round((scroll / maxSc) * (visibleCount - thumbH)) : 0
+      const barY = layout.y + 1 + thumbStart
+      if (y >= barY && y < barY + thumbH) {
+        drag.active = true
+        drag.startY = y
+        drag.startCursor = cursor
+      }
+      event.stopPropagation()
+      return
+    }
+
+    const relY = y - layout.y - 1
+    if (relY >= 0 && relY < visibleCount) {
+      const clickedIdx = relY + scroll
+      if (clickedIdx >= 0 && clickedIdx < items.length) {
+        onSelect(items[clickedIdx])
+        event.stopPropagation()
+      }
+    }
+  })
+
+  const scrollable = items.length > visibleCount
+  const visible = items.slice(scroll, scroll + visibleCount)
+  const thumbH = scrollable ? Math.max(1, Math.round((visibleCount / items.length) * visibleCount)) : 0
+  const maxSc = items.length - visibleCount
+  const thumbStart = scrollable && maxSc > 0 ? Math.round((scroll / maxSc) * (visibleCount - thumbH)) : 0
+  const maxLen = items.reduce((m, v) => Math.max(m, v.length), 0)
+
+  const dropdownChildren = visible.map((item, vi) => {
+    const i = vi + scroll
+    const isCursor = i === cursor
+
+    const row = (content) => {
+      if (!scrollable) return content
+      const barIsThumb = vi >= thumbStart && vi < thumbStart + thumbH
+      return jsx('box', {
+        key: i,
+        style: { flexDirection: 'row' },
+        children: [
+          content,
+          jsx('text', {
+            style: { color: barIsThumb ? accent : 'gray', dim: !barIsThumb },
+            children: ' ' + (barIsThumb ? '\u2588' : '\u2502'),
+          }),
+        ],
+      })
+    }
+
+    if (renderItem) {
+      const content = jsx('box', {
+        key: scrollable ? undefined : i,
+        style: { bg: isCursor ? s.cursorBg : s.bg, flexGrow: 1 },
+        children: renderItem(item, { selected: isCursor, index: i }),
+      })
+      return row(content)
+    }
+
+    const content = jsx('box', {
+      key: scrollable ? undefined : i,
+      style: { bg: isCursor ? s.cursorBg : s.bg, paddingX: 1, flexGrow: 1 },
+      children: jsx('text', {
+        style: { color: isCursor ? s.cursorTextColor : s.color },
+        children: item,
+      }),
+    })
+    return row(content)
+  })
+
+  const dropdownH = visibleCount + 2
+
+  return jsx('box', {
+    style: {
+      flexDirection: 'column',
+      border: s.border,
+      borderColor: s.borderColor,
+      height: dropdownH,
+      width: maxLen + 4 + (scrollable ? 2 : 0),
+      bg: s.bg,
+    },
+    children: dropdownChildren,
+  })
+}
+
+export function Select({ items, selected, onSelect, focused = false, overlay = false, maxVisible = 10, placeholder = 'select...', renderItem, style: userStyle, openIcon = '\u25b2', closedIcon = '\u25bc' }) {
   const { accent = 'cyan' } = useTheme()
   const defaults = {
     border: 'single',
@@ -42,6 +176,34 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
     else if (key === 'escape') { setOpen(false); event.stopPropagation() }
   })
 
+  const layout = useLayout()
+
+  useMouse((event) => {
+    if (event.action === 'scroll') {
+      if (!focused || !open()) return
+      const len = items.length
+      if (event.direction === 'up') setCursor(c => Math.max(0, c - 1))
+      else setCursor(c => Math.min(len - 1, c + 1))
+      event.stopPropagation()
+      return
+    }
+
+    if (event.action !== 'press' || event.button !== 'left') return
+    const { x, y } = event
+    const onCollapsed = x >= layout.x && x < layout.x + layout.width && y === layout.y
+
+    if (onCollapsed) {
+      if (open()) {
+        setOpen(false)
+      } else {
+        const idx = items.indexOf(selected)
+        setCursor(idx >= 0 ? idx : 0)
+        setOpen(true)
+      }
+      event.stopPropagation()
+    }
+  })
+
   const display = selected ?? placeholder
   const collapsed = jsx('text', {
     style: {
@@ -49,25 +211,22 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
       color: focused ? s.focusedColor : (selected ? s.color : 'gray'),
       bold: focused,
     },
-    children: `\u25be ${display}`,
+    children: `${open() ? openIcon : closedIcon} ${display}`,
   })
 
   if (!open()) return collapsed
 
-  const maxLen = items.reduce((m, v) => Math.max(m, v.length), 0)
-
   let maxRows = Math.min(items.length, maxVisible)
 
   if (overlay) {
-    const layout = getInstanceLayout()
+    const instLayout = getInstanceLayout()
     const ctx = getContext()
     const termH = ctx?.stream?.rows ?? 24
-    const anchorY = layout.y + 1
+    const anchorY = instLayout.y + 1
     const available = termH - anchorY - 2
     if (available > 0) maxRows = Math.min(maxRows, available)
   }
 
-  const scrollable = items.length > maxRows
   const visibleCount = maxRows
 
   const cur = cursor()
@@ -78,68 +237,29 @@ export function Select({ items, selected, onSelect, focused = false, overlay = f
   newScroll = Math.max(0, Math.min(newScroll, items.length - visibleCount))
   if (newScroll !== sc) setScroll(newScroll)
 
-  const visible = items.slice(newScroll, newScroll + visibleCount)
-
-  const thumbH = scrollable ? Math.max(1, Math.round((visibleCount / items.length) * visibleCount)) : 0
-  const maxSc = items.length - visibleCount
-  const thumbStart = scrollable && maxSc > 0 ? Math.round((newScroll / maxSc) * (visibleCount - thumbH)) : 0
-
-  const dropdownChildren = visible.map((item, vi) => {
-    const i = vi + newScroll
-    const isCursor = i === cur
-
-    const barChar = scrollable
-      ? (vi >= thumbStart && vi < thumbStart + thumbH ? '\u2588' : '\u2502')
-      : null
-
-    const row = (content) => {
-      if (!scrollable) return content
-      const barIsThumb = vi >= thumbStart && vi < thumbStart + thumbH
-      return jsx('box', {
-        key: i,
-        style: { flexDirection: 'row' },
-        children: [
-          content,
-          jsx('text', {
-            style: { color: barIsThumb ? accent : 'gray', dim: !barIsThumb },
-            children: ' ' + barChar,
-          }),
-        ],
-      })
-    }
-
-    if (renderItem) {
-      const content = jsx('box', {
-        key: scrollable ? undefined : i,
-        style: { bg: isCursor ? s.cursorBg : s.bg, flexGrow: 1 },
-        children: renderItem(item, { selected: isCursor, index: i }),
-      })
-      return row(content)
-    }
+  const handleSelect = (item) => {
+    onSelect?.(item)
+    setOpen(false)
+  }
 
-    const content = jsx('box', {
-      key: scrollable ? undefined : i,
-      style: { bg: isCursor ? s.cursorBg : s.bg, paddingX: 1, flexGrow: 1 },
-      children: jsx('text', {
-        style: { color: isCursor ? s.cursorTextColor : s.color },
-        children: item,
-      }),
-    })
-    return row(content)
-  })
+  const handleClose = () => setOpen(false)
 
-  const dropdownH = visibleCount + 2
+  const maxLen = items.reduce((m, v) => Math.max(m, v.length), 0)
+  const scrollable = items.length > visibleCount
+  const dropWidth = maxLen + 4 + (scrollable ? 2 : 0)
 
-  const dropdown = jsx('box', {
-    style: {
-      flexDirection: 'column',
-      border: s.border,
-      borderColor: s.borderColor,
-      height: dropdownH,
-      width: maxLen + 4 + (scrollable ? 2 : 0),
-      bg: s.bg,
-    },
-    children: dropdownChildren,
+  const dropdown = jsx(SelectDropdown, {
+    items,
+    cursor: cur,
+    scroll: newScroll,
+    visibleCount,
+    onSelect: handleSelect,
+    onClose: handleClose,
+    onCursorChange: (idx) => setCursor(idx),
+    renderItem,
+    style: s,
+    accent,
+    dropWidth,
   })
 
   if (overlay) {

package/src/shimmer.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignalRaw } from './signal.js'
+import { useInterval, useTheme } from './hooks.js'
+import { registerHook } from './renderer.js'
+
+const NAMED_RGB = {
+  black: [0, 0, 0], red: [205, 0, 0], green: [0, 205, 0], yellow: [205, 205, 0],
+  blue: [0, 0, 238], magenta: [205, 0, 205], cyan: [0, 205, 205], white: [229, 229, 229],
+  gray: [127, 127, 127], grey: [127, 127, 127],
+  brightRed: [255, 0, 0], brightGreen: [0, 255, 0], brightYellow: [255, 255, 0],
+  brightBlue: [92, 92, 255], brightMagenta: [255, 0, 255], brightCyan: [0, 255, 255],
+  brightWhite: [255, 255, 255],
+}
+
+function toRgb(color) {
+  if (NAMED_RGB[color]) return NAMED_RGB[color]
+  if (color?.startsWith('#') && color.length === 7) {
+    return [parseInt(color.slice(1, 3), 16), parseInt(color.slice(3, 5), 16), parseInt(color.slice(5, 7), 16)]
+  }
+  return [127, 127, 127]
+}
+
+function lerpColor(a, b, t) {
+  const r = Math.round(a[0] + (b[0] - a[0]) * t)
+  const g = Math.round(a[1] + (b[1] - a[1]) * t)
+  const bl = Math.round(a[2] + (b[2] - a[2]) * t)
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + bl).toString(16).slice(1)
+}
+
+export function Shimmer({ children, color, highlight, size = 3, gradient = 3, duration = 1000, delay = 500, reverse = false }) {
+  const { accent = 'cyan' } = useTheme()
+  const baseColor = color ?? 'gray'
+  const hlColor = highlight ?? accent
+
+  const text = typeof children === 'string' ? children : String(children ?? '')
+  const len = text.length
+  const windowSize = size + gradient * 2
+  const totalFrames = len + windowSize
+  const msPerFrame = duration / totalFrames
+  const delayFrames = Math.ceil(delay / msPerFrame)
+  const cycleLength = totalFrames + delayFrames
+
+  const [pos, setPos] = registerHook(() => {
+    const [get, set] = createSignalRaw(0)
+    return [get, set]
+  })
+
+  useInterval(() => setPos(p => (p + 1) % cycleLength), msPerFrame)
+
+  const p = pos()
+
+  if (p >= totalFrames) {
+    return jsx('text', { style: { color: baseColor }, children: text })
+  }
+
+  const baseRgb = toRgb(baseColor)
+  const hlRgb = toRgb(hlColor)
+  const center = reverse ? (len + windowSize / 2) - p : p - windowSize / 2
+  const halfSize = (size - 1) / 2
+  const parts = []
+  let run = { color: null, bold: false, chars: '' }
+
+  function flushRun() {
+    if (run.chars) {
+      parts.push(jsx('text', { style: { color: run.color, bold: run.bold }, children: run.chars }))
+      run = { color: null, bold: false, chars: '' }
+    }
+  }
+
+  for (let i = 0; i < len; i++) {
+    const dist = Math.abs(i - center)
+    let charColor
+    let bold = false
+
+    if (dist <= halfSize) {
+      charColor = lerpColor(baseRgb, hlRgb, 1)
+      bold = true
+    } else if (gradient > 0 && dist <= halfSize + gradient) {
+      const t = 1 - (dist - halfSize) / gradient
+      charColor = lerpColor(baseRgb, hlRgb, t)
+    } else {
+      charColor = baseColor
+    }
+
+    if (charColor !== run.color || bold !== run.bold) {
+      flushRun()
+      run.color = charColor
+      run.bold = bold
+    }
+    run.chars += text[i]
+  }
+  flushRun()
+
+  return jsxs('box', { style: { flexDirection: 'row' }, children: parts })
+}

package/src/signal.js

@@ -4,6 +4,17 @@ let pendingEffects = null
 let batchDepth = 0
 let schedulerHook = null
 let hookRegistrar = null
+let renderTracker = null
+
+export function startRenderTracking() {
+  renderTracker = []
+}
+
+export function stopRenderTracking() {
+  const tracked = renderTracker
+  renderTracker = null
+  return tracked
+}
 
 export function setSchedulerHook(fn) {
   schedulerHook = fn
@@ -18,6 +29,7 @@ export function createSignalRaw(value) {
 
   function get() {
     if (currentEffect) subs.add(currentEffect)
+    if (renderTracker) renderTracker.push(get)
     return value
   }
 

package/src/spinner.js

@@ -3,15 +3,24 @@ import { createSignal } from './signal.js'
 import { useInterval, useTheme } from './hooks.js'
 import { registerHook } from './renderer.js'
 
-const FRAMES = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F']
+const VARIANTS = {
+  dots: ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F'],
+  line: ['|', '/', '-', '\\'],
+  circle: ['\u25D0', '\u25D3', '\u25D1', '\u25D2'],
+  bounce: ['\u2801', '\u2802', '\u2804', '\u2802'],
+  arrow: ['\u2190', '\u2196', '\u2191', '\u2197', '\u2192', '\u2198', '\u2193', '\u2199'],
+  square: ['\u25F0', '\u25F3', '\u25F2', '\u25F1'],
+  star: ['\u2736', '\u2738', '\u2739', '\u273A', '\u2739', '\u2738'],
+}
 
-export function Spinner({ label, color, interval = 80 }) {
+export function Spinner({ label, color, interval = 80, variant = 'dots', frames }) {
   const { accent = 'cyan' } = useTheme()
   const c = color ?? accent
+  const f = frames ?? VARIANTS[variant] ?? VARIANTS.dots
   const [frame, setFrame] = createSignal(0)
-  useInterval(() => setFrame(f => (f + 1) % FRAMES.length), interval)
+  useInterval(() => setFrame(i => (i + 1) % f.length), interval)
 
-  const children = [jsx('text', { style: { color: c }, children: FRAMES[frame()] })]
+  const children = [jsx('text', { style: { color: c }, children: f[frame()] })]
 
   if (label != null) {
     children.push(jsx('text', { children: ` ${label}` }))

package/src/split-pane.js

@@ -0,0 +1,66 @@
+import { jsx } from '../jsx-runtime.js'
+
+const DIVIDER_CHARS = {
+  single: { h: '\u2500', v: '\u2502' },
+  double: { h: '\u2550', v: '\u2551' },
+  round:  { h: '\u2500', v: '\u2502' },
+  bold:   { h: '\u2501', v: '\u2503' },
+}
+
+function parseSize(s) {
+  if (typeof s === 'number') return { type: 'fixed', value: s }
+  const m = String(s).match(/^(\d*\.?\d+)fr$/)
+  return m ? { type: 'fr', value: parseFloat(m[1]) } : { type: 'fixed', value: parseInt(s) || 0 }
+}
+
+function sizeToStyle(size, isRow) {
+  const parsed = parseSize(size)
+  if (parsed.type === 'fixed') return { [isRow ? 'width' : 'height']: parsed.value }
+  return { flexGrow: parsed.value }
+}
+
+export function SplitPane({ children, direction = 'row', sizes: sizesProp, border = 'single', borderColor, borderEdges, style }) {
+  const items = Array.isArray(children) ? children.filter(c => c != null && c !== true && c !== false) : children ? [children] : []
+  const n = items.length
+  if (n === 0) return null
+
+  const isRow = direction === 'row'
+  const chars = DIVIDER_CHARS[border] ?? DIVIDER_CHARS.single
+  const sizes = sizesProp ?? items.map(() => '1fr')
+
+  const elements = []
+  for (let i = 0; i < n; i++) {
+    elements.push(
+      jsx('box', {
+        key: `p${i}`,
+        style: { ...sizeToStyle(sizes[i] ?? '1fr', isRow), flexDirection: 'column' },
+        children: items[i],
+      })
+    )
+
+    if (i < n - 1) {
+      elements.push(
+        jsx('box', {
+          key: `d${i}`,
+          style: {
+            [isRow ? 'width' : 'height']: 1,
+            texture: isRow ? chars.v : chars.h,
+            textureColor: borderColor,
+            _divider: isRow ? 'vertical' : 'horizontal',
+          },
+        })
+      )
+    }
+  }
+
+  return jsx('box', {
+    style: {
+      ...style,
+      border: border || undefined,
+      borderColor,
+      borderEdges,
+      flexDirection: isRow ? 'row' : 'column',
+    },
+    children: elements,
+  })
+}