@trendr/core 0.4.11 → 0.4.13

package/README.md

@@ -313,7 +313,39 @@ useMouse((event) => {
 })
 ```
 
-Mouse is enabled automatically. Passive pointer movement is reported as `move`, so it can be combined with `useLayout()` to derive hover state. Built-in components support click, scroll wheel, and scrollbar dragging.
+Mouse is enabled automatically. Passive pointer movement is reported as `move`; combine it with `useHitTest()` to derive hover state. Built-in components support click, scroll wheel, and scrollbar dragging.
+
+### useHitTest
+
+Mouse events carry terminal coordinates, but `useLayout()` returns logical content-space coordinates - the two disagree inside any scrolled or clipped container. `useHitTest()` returns a function that tests terminal coordinates against the component's final painted, clipped rectangle, with ancestor scroll offsets applied.
+
+```jsx
+function Hoverable({ children, action, onAction }) {
+  const hitTest = useHitTest()
+  const [hovered, setHovered] = createSignal(false)
+
+  useMouse((event) => {
+    if (event.action === 'move') setHovered(hitTest(event.x, event.y))
+    if (event.action === 'press' && event.button === 'left' && hovered() && hitTest(event.x, event.y)) {
+      onAction()
+      event.stopPropagation()
+    }
+  })
+
+  return (
+    <box>
+      {children}
+      {hovered() && (
+        <box style={{ position: 'absolute', top: 0, right: 1 }}>
+          <text style={{ inverse: true }}>{` ${action} `}</text>
+        </box>
+      )}
+    </box>
+  )
+}
+```
+
+The returned function stays accurate across scrolling, resizing, and relayout, and returns `false` once the component unmounts. It answers geometric containment only - focus and z-order stay with the input system. Never bounds-check mouse events against `useLayout()`; inside a scrolled viewport that either misses real hits or, worse, captures events belonging to other components.
 
 ### useStdout
 

package/index.js

@@ -1,7 +1,7 @@
 export { mount, registerOverlay } from './src/renderer.js'
 export { createSignal } from './src/signal.js'
 export { createEffect, createMemo, batch, untrack, onCleanup } from './src/signal.js'
-export { useInput, useMouse, useResize, useInterval, useTimeout, useLayout, useStdout, useRepaint, useTitle, useTheme, useCursor, useFrameStats, useAsync } from './src/hooks.js'
+export { useInput, useMouse, useResize, useInterval, useTimeout, useLayout, useHitTest, useStdout, useRepaint, useTitle, useTheme, useCursor, useFrameStats, useAsync } from './src/hooks.js'
 export { Box, Text, Spacer } from './src/components.js'
 export { TextInput } from './src/text-input.js'
 export { TextArea } from './src/text-area.js'

package/package.json

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

package/src/ansi.js

@@ -19,6 +19,9 @@ export const sgrReset = `${ESC}0m`
 export const setTitle = (title) => `\x1b]2;${title}\x07`
 export const osc52Copy = (text) => `\x1b]52;c;${Buffer.from(text, 'utf8').toString('base64')}\x07`
 
+export const beginSync = `${ESC}?2026h`
+export const endSync = `${ESC}?2026l`
+
 export const enableMouse = `${ESC}?1003h${ESC}?1006h`
 export const disableMouse = `${ESC}?1003l${ESC}?1006l`
 

package/src/buffer.js

@@ -159,5 +159,8 @@ export function blitRect(src, dst, x, y, w, h) {
     for (let col = x1; col < x2; col++) {
       dst.cells[base + col] = src.cells[base + col]
     }
+    // softWrap is per-row metadata set at text paint time; a blitted clean
+    // subtree must carry its wrap flags or selection re-joins lines wrongly
+    if (src.softWrap[row]) dst.softWrap[row] = 1
   }
 }

package/src/diff-view.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useMouse, useLayout, useScrollDrag } from './hooks.js'
+import { useInput, useMouse, useLayout, useHitTest, useScrollDrag } from './hooks.js'
 import { sliceVisibleRange } from './wrap.js'
 import { computeDiff } from './diff-engine.js'
 
@@ -141,10 +141,12 @@ export function Diff({
     else if (key === 'end' || key === 'G') setOffset(maxOffset)
   })
 
+  const hitTest = useHitTest()
   useMouse((event) => {
     if (event.action !== 'scroll' || rows.length <= h) return
-    const { x, y } = event
-    if (x < layout.x || x >= layout.x + layout.width || y < layout.y || y >= layout.y + layout.height) return
+    // painted-geometry bounds: logical layout coords are wrong for a diff
+    // inside a scrolled container and would swallow wheel events meant for it
+    if (!hitTest(event.x, event.y)) return
     if (event.direction !== 'up' && event.direction !== 'down') return
     setOffset(clamp(clamped + (event.direction === 'up' ? -3 : 3)))
     event.stopPropagation()

package/src/hooks.js

@@ -60,6 +60,18 @@ export function useLayout() {
   return getInstanceLayout()
 }
 
+// terminal-space hit testing: tests mouse coordinates against the component's
+// final painted, clipped rectangle - unlike useLayout, which is logical
+// content space and knows nothing of ancestor scroll offsets or clipping
+export function useHitTest() {
+  const state = registerHook(() => ({ owner: getCurrentHookOwner() }))
+  return (x, y) => {
+    const rect = state.owner?._paintedRect
+    if (!rect) return false
+    return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height
+  }
+}
+
 export function useTheme() {
   return getTheme()
 }

package/src/layout.js

@@ -314,8 +314,10 @@ function measureIntrinsic(node, availW, availH) {
   const innerW = availW - chrome.x
   const innerH = availH - chrome.y
 
-  const children = node._resolvedChildren
-  if (!children || children.length === 0) {
+  // absolute children are excluded from flow layout, so they must not
+  // contribute to intrinsic size either, or a hover overlay grows its parent
+  const children = (node._resolvedChildren || []).filter((c) => childStyle(c).position !== 'absolute')
+  if (children.length === 0) {
     return { width: chrome.x, height: chrome.y }
   }
 

package/src/renderer.js

@@ -319,6 +319,23 @@ function paintTree(node, buf, clip, offset, prevBuf) {
 
   if (node._resolved) {
     const inst = node._instance
+    // painted terminal-space geometry for useHitTest: logical layout plus
+    // accumulated ancestor paint offset, intersected with the active clip.
+    // recorded before the blit fast-path so clean subtrees stay hit-testable
+    if (inst) {
+      const lay = node._resolved?._layout ?? node._layout
+      if (lay && lay.width > 0 && lay.height > 0) {
+        const painted = offset
+          ? { x: lay.x + offset.x, y: lay.y + offset.y, width: lay.width, height: lay.height }
+          : lay
+        const vis = clip ? clipRect(painted, clip) : painted
+        inst._paintedRect = vis.width > 0 && vis.height > 0
+          ? { x: vis.x, y: vis.y, width: vis.width, height: vis.height }
+          : null
+      } else {
+        inst._paintedRect = null
+      }
+    }
     if (prevBuf && inst && !inst._subtreeDirty) {
       const layout = node._resolved?._layout ?? node._layout
       if (layout && layoutEqual(layout, inst._lastLayout)) {
@@ -913,6 +930,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
 
     for (const [key, inst] of instances) {
       if (!visited.has(key)) {
+        inst._paintedRect = null
         disposeScope(inst.scope)
         instances.delete(key)
       }
@@ -1060,6 +1078,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
 
     for (const [key, inst] of instances) {
       if (!visited.has(key)) {
+        inst._paintedRect = null
         disposeScope(inst.scope)
         instances.delete(key)
       }
@@ -1069,10 +1088,13 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
 
     const { output, changed } = diff(prev, curr)
     if (changed > 0) {
-      out.write(ansi.hideCursor)
+      // synchronized output (dec 2026): supporting terminals apply the whole
+      // frame atomically instead of tearing mid-write; others ignore it
+      out.write(ansi.beginSync + ansi.hideCursor)
       // diff() returns a view into a shared double buffer that gets reused two
       // frames later; write a copy so backpressured streams never see it mutate
       out.write(Buffer.from(output))
+      out.write(ansi.endSync)
     }
 
     const now = performance.now()
@@ -1170,6 +1192,7 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
     process.off('SIGHUP', onSighup)
 
     for (const inst of instances.values()) {
+      inst._paintedRect = null
       disposeScope(inst.scope)
     }
     instances.clear()
@@ -1227,6 +1250,10 @@ export function mount(rootComponent, { stream, stdin, title, theme, onExit: onEx
   }
 
   ctx.repaint = repaint
+  // gentle sibling of repaint: schedules a normal diffed frame with no
+  // clear-screen; right for overlay state like selection that frame()
+  // already applies each pass
+  ctx.requestFrame = () => scheduler.forceFrame()
   ctx.getPaintBuffer = () => (inline ? lastInlineBuf : prev)
 
   return { unmount, repaint, setTheme, getBuffer: ctx.getPaintBuffer }

package/src/selection.js

@@ -65,7 +65,7 @@ export function useSelection({ onCopy, copy = true } = {}) {
       state.dragging = false
       if (ctx.selection) {
         ctx.selection = null
-        ctx.repaint()
+        ctx.requestFrame()
       }
       return
     }
@@ -73,7 +73,7 @@ export function useSelection({ onCopy, copy = true } = {}) {
     if (event.action === 'drag' && state.anchor) {
       state.dragging = true
       ctx.selection = normalize(state.anchor, { x: event.x, y: event.y })
-      ctx.repaint()
+      ctx.requestFrame()
       return
     }
 
@@ -81,7 +81,7 @@ export function useSelection({ onCopy, copy = true } = {}) {
       if (state.dragging && ctx.selection) {
         const text = extractSelectionText(ctx.getPaintBuffer(), ctx.selection)
         ctx.selection = null
-        ctx.repaint()
+        ctx.requestFrame()
         if (text) {
           if (copy) ctx.stream.write(osc52Copy(text))
           if (onCopy) onCopy(text)