@trendr/core 0.4.8 → 0.4.10

package/README.md

@@ -305,15 +305,15 @@ const { status, data } = useAsync(fetchUsers, { immediate: true })
 
 ```jsx
 useMouse((event) => {
-  // event.action: 'press' | 'release' | 'drag' | 'scroll'
-  // event.button: 'left' | 'middle' | 'right' (press/release only)
-  // event.direction: 'up' | 'down' (scroll only)
+  // event.action: 'press' | 'release' | 'drag' | 'move' | 'scroll'
+  // event.button: 'left' | 'middle' | 'right' (press/release/drag only)
+  // event.direction: 'up' | 'down' | 'left' | 'right' (scroll only)
   // event.x, event.y: 0-based terminal coordinates
   // event.stopPropagation(): prevent other handlers from receiving this event
 })
 ```
 
-Mouse is enabled automatically. Built-in components support click, scroll wheel, and scrollbar dragging.
+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.
 
 ### useStdout
 

package/package.json

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

package/src/ansi.js

@@ -19,8 +19,8 @@ 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 enableMouse = `${ESC}?1002h${ESC}?1006h`
-export const disableMouse = `${ESC}?1002l${ESC}?1006l`
+export const enableMouse = `${ESC}?1003h${ESC}?1006h`
+export const disableMouse = `${ESC}?1003l${ESC}?1006l`
 
 export const BOLD = 1
 export const DIM = 2

package/src/input.js

@@ -53,6 +53,8 @@ export function parseMouse(raw) {
     return { type: 'mouse', action: 'scroll', direction, x, y }
   }
 
+  if (motion && button === 3) return { type: 'mouse', action: 'move', x, y }
+
   const buttonName = extended
     ? (button === 0 ? 'back' : button === 1 ? 'forward' : button === 2 ? 'button10' : 'button11')
     : (button === 0 ? 'left' : button === 1 ? 'middle' : 'right')

package/src/text-area.js

@@ -124,7 +124,7 @@ function ensureVisible(cursorRow, scroll, height, totalLines) {
   return scroll
 }
 
-export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp, value: valueProp, submitOnEnter = false, color }) {
+export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp, value: valueProp, submitOnEnter = false, color, lineCounter = false }) {
   const [value, setValue] = createSignal('')
   const [cursor, setCursor] = createSignal(0)
   if (valueProp !== undefined && valueProp !== value()) {
@@ -319,7 +319,11 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
   const lineMap = wrapForEditor(v, effectiveWidth)
   const displayPos = cursorToDisplay(c, lineMap, v)
 
-  const displayHeight = Math.max(1, Math.min(lineMap.length, maxHeight))
+  // an active counter reserves the bottom row for itself so it can never
+  // overlap text or the cursor; overflow state costs one visible text row
+  const counterActive = lineCounter && lineMap.length > maxHeight
+  const boxMax = counterActive ? Math.max(1, maxHeight - 1) : maxHeight
+  const displayHeight = Math.max(1, Math.min(lineMap.length, boxMax))
   ref.scroll = ensureVisible(displayPos.row, ref.scroll, displayHeight, lineMap.length)
   const scroll = ref.scroll
 
@@ -365,8 +369,15 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
     })
   })
 
+  const counter = counterActive
+    ? jsx('box', {
+        style: { flexDirection: 'row', height: 1 },
+        children: jsx('text', { style: { color: muted, dim: true }, children: `${displayPos.row + 1}/${lineMap.length}` }),
+      })
+    : null
+
   return jsx('box', {
-    style: { flexDirection: 'column', height: displayHeight, minHeight: 1, flexGrow: 1 },
-    children: rows,
+    style: { flexDirection: 'column', height: displayHeight + (counterActive ? 1 : 0), minHeight: 1, flexGrow: 1 },
+    children: counter ? [...rows, counter] : rows,
   })
 }