@trendr/core 0.2.9 → 0.2.10

package/index.js

@@ -21,6 +21,7 @@ export { ScrollBox } from './src/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 { 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.2.9",
+  "version": "0.2.10",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "type": "module",

package/src/menu.js

@@ -0,0 +1,87 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useTheme } from './hooks.js'
+import { List } from './list.js'
+
+// a windowed single-select menu. shows at most maxVisible rows and scrolls
+// with scrolloff as the active item moves. it carries no text input of its
+// own, so it pairs with an external composer: render it after that input and,
+// while focused, it intercepts up/down/enter before the input sees them
+export function Menu({
+  items,
+  selected: selectedProp,
+  onSelect,
+  onSubmit,
+  onCancel,
+  focused = true,
+  maxVisible = 5,
+  scrolloff = 2,
+  itemHeight = 1,
+  gap = 0,
+  renderItem,
+  arrow = '›',
+}) {
+  const { accent = 'cyan' } = useTheme()
+  const [internal, setInternal] = createSignal(0)
+
+  const len = items.length
+  const raw = selectedProp ?? internal()
+  const selected = Math.min(Math.max(0, raw), Math.max(0, len - 1))
+  const setSelected = onSelect ?? setInternal
+
+  if (selected !== raw && len > 0) setSelected(selected)
+
+  useInput((event) => {
+    if (!focused || len === 0) return
+    const { key, ctrl, shift, meta } = event
+
+    if (key === 'up' || (ctrl && key === 'p')) {
+      setSelected(Math.max(0, selected - 1))
+      event.stopPropagation()
+    } else if (key === 'down' || (ctrl && key === 'n')) {
+      setSelected(Math.min(len - 1, selected + 1))
+      event.stopPropagation()
+    } else if (key === 'return' && !shift && !meta) {
+      if (onSubmit) onSubmit(items[selected], selected)
+      event.stopPropagation()
+    } else if (key === 'escape') {
+      if (onCancel) {
+        onCancel()
+        event.stopPropagation()
+      }
+    }
+  })
+
+  if (len === 0) return jsx('box', { style: { height: 0 } })
+
+  const visible = Math.min(maxVisible, len)
+  const height = visible * itemHeight + Math.max(0, visible - 1) * gap
+
+  const defaultRender = (item, { active }) => {
+    const label = typeof item === 'string' ? item : (item.label ?? item.name ?? String(item))
+    return jsx('box', {
+      style: { flexDirection: 'row' },
+      children: [
+        jsx('text', { style: { color: active ? accent : null }, children: active ? `${arrow} ` : '  ' }),
+        jsx('text', { style: { color: active ? accent : 'gray' }, children: label }),
+      ],
+    })
+  }
+
+  const render = renderItem ?? defaultRender
+
+  return jsx('box', {
+    style: { height, minHeight: height },
+    children: jsx(List, {
+      items,
+      selected,
+      onSelect: setSelected,
+      focused: false,
+      interactive: false,
+      itemHeight,
+      gap,
+      scrolloff,
+      renderItem: (item, ctx) => render(item, { active: ctx.selected, index: ctx.index }),
+    }),
+  })
+}

package/src/renderer.js

@@ -666,6 +666,29 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
   let prevLiveLines = 0
   let prevLiveText = null
 
+  // mirror per-instance layout (incl. scroll contentHeight/childHeights) back
+  // onto each instance so useLayout() consumers like List/Menu can window.
+  // returns whether anything changed, so the caller can re-resolve once and let
+  // those components observe the freshly measured values
+  function syncInstanceLayouts() {
+    let changed = false
+    for (const inst of instances.values()) {
+      const rect = inst.node?._availableRect ?? inst.node?._layout
+      if (!rect) continue
+      const ch = findScrollContentHeight(inst.node)
+      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
+      p.x = rect.x
+      p.y = rect.y
+      p.width = rect.width
+      p.height = rect.height
+      p.contentHeight = ch
+      p.childHeights = findScrollChildHeights(inst.node)
+    }
+    return changed
+  }
+
   function inlineFrame() {
     const prevCtx = activeContext
     activeContext = ctx
@@ -674,7 +697,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     const counters = new Map()
     const visited = new Set()
     const element = { type: rootComponent, props: {}, key: null }
-    const tree = resolveForFrame(element, null, instances, counters, visited, '')
+    let tree = resolveForFrame(element, null, instances, counters, visited, '')
 
     const sb = findScrollback(tree)
     const items = sb?.props?.items ?? []
@@ -691,9 +714,18 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     // which we can't un-print, so just resync the counter
     flushedCount = items.length
 
-    const liveHeight = Math.min(height, Math.max(1, intrinsicHeight(tree, width, height)))
+    let liveHeight = Math.min(height, Math.max(1, intrinsicHeight(tree, width, height)))
     computeLayout(tree, { x: 0, y: 0, width, height: liveHeight })
 
+    if (syncInstanceLayouts()) {
+      counters.clear()
+      visited.clear()
+      tree = resolveForFrame(element, null, instances, counters, visited, '')
+      liveHeight = Math.min(height, Math.max(1, intrinsicHeight(tree, width, height)))
+      computeLayout(tree, { x: 0, y: 0, width, height: liveHeight })
+      syncInstanceLayouts()
+    }
+
     for (const [key, inst] of instances) {
       if (!visited.has(key)) {
         disposeScope(inst.scope)