@mobius-os/mobius 0.3.14 → 0.3.20

package/src/components/primitives.tsx

@@ -3,13 +3,137 @@
  * Select (single-choice list + multi-choice with checkboxes), and a Spinner.
  */
 import React, { useEffect, useRef, useState } from 'react'
-import { Box, Text, useInput, useStdout } from 'ink'
+import { Box, Text, useInput, useStdout, useStdin } from 'ink'
+import { useDeleteKeyCapture, applyDeleteIntent } from '../lib/delete-keys.js'
 
 /** Windows Terminal/ConPTY may expose Esc as a named key, a raw byte, or Ctrl+[. */
 export function isEscapeKeypress(input: string, key: { escape?: boolean; ctrl?: boolean }): boolean {
   return key.escape === true || input === '\x1b' || (key.ctrl === true && input === '[')
 }
 
+// ─── Mouse events ────────────────────────────────────────────────────────────
+// Terminals report mouse events only after DECSET 1000 (button-event) + 1002
+// (cell motion while a button is held) + 1006 (SGR coordinates) are enabled.
+// An event arrives as a sequence:
+//   press   → ESC [ < b ; x ; y M     b = 0/1/2 (left/middle/right)
+//   release → ESC [ < b ; x ; y m     b = 0/1/2
+//   motion  → ESC [ < b ; x ; y M     b = 32/33/34 (drag with button 0/1/2)
+//   wheel   → ESC [ < 64 ; x ; y M    (up) / < 65 (down), no release event
+// Legacy X10 (no SGR support) reports ESC [ M Cb Cx Cy with Cb = button + 32
+// (0x20 left, 0x23 release, 0x40 left-drag, 0x60 wheel-up, 0x61 wheel-down).
+// Coordinates are 1-based in SGR and offset by 32 in X10; both are normalized
+// to 0-based row/col here.
+const SGR_MOUSE_RE = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g
+const LEGACY_MOUSE_RE = /\x1b\[M([\s\S]{3})/g
+
+export type MouseEventInfo =
+  | { kind: 'wheel'; delta: number }
+  | { kind: 'press' | 'release' | 'motion'; button: number; row: number; col: number }
+
+/**
+ * True when `input` (a chunk Ink forwarded to useInput handlers) begins with a
+ * mouse event. Ink strips a leading ESC before passing `input`, so both the raw
+ * and stripped forms are accepted. Guards must be added to any handler that
+ * would otherwise treat a mouse event as typed text.
+ */
+export function isMouseInput(input: string): boolean {
+  return /^\x1b?\[<\d+;\d+;\d+[Mm]/.test(input) || /^\x1b?\[M/.test(input)
+}
+
+/** Extract the wheel delta from a chunk: +1 wheel-up, -1 wheel-down, else 0. */
+export function mouseWheelDelta(input: string): number {
+  let delta = 0
+  for (const e of parseMouseEvents(input)) if (e.kind === 'wheel') delta += e.delta
+  return delta
+}
+
+/** Parse every mouse event in a chunk (may contain several; fast scroll batches). */
+export function parseMouseEvents(input: string): MouseEventInfo[] {
+  const out: MouseEventInfo[] = []
+  SGR_MOUSE_RE.lastIndex = 0
+  let m: RegExpExecArray | null
+  while ((m = SGR_MOUSE_RE.exec(input)) !== null) {
+    const btn = Number(m[1])
+    const row = Number(m[3]) - 1
+    const col = Number(m[2]) - 1
+    const down = m[4] === 'M'
+    if (btn === 64) out.push({ kind: 'wheel', delta: 1 })
+    else if (btn === 65) out.push({ kind: 'wheel', delta: -1 })
+    else if (btn >= 32 && btn <= 34) out.push({ kind: 'motion', button: btn - 32, row, col })
+    else if (btn <= 2) out.push({ kind: down ? 'press' : 'release', button: btn, row, col })
+  }
+  LEGACY_MOUSE_RE.lastIndex = 0
+  let lm: RegExpExecArray | null
+  while ((lm = LEGACY_MOUSE_RE.exec(input)) !== null) {
+    const bytes = lm[1]
+    const btn = bytes.charCodeAt(0) - 32
+    const row = bytes.charCodeAt(2) - 32 - 1
+    const col = bytes.charCodeAt(1) - 32 - 1
+    if (btn === 64) out.push({ kind: 'wheel', delta: 1 })
+    else if (btn === 65) out.push({ kind: 'wheel', delta: -1 })
+    else if (btn >= 32 && btn <= 34) out.push({ kind: 'motion', button: btn - 32, row, col })
+    else if (btn === 3) out.push({ kind: 'release', button: 0, row, col })
+    else if (btn <= 2) out.push({ kind: 'press', button: btn, row, col })
+  }
+  return out
+}
+
+/**
+ * Enables terminal mouse tracking for the lifetime of the calling component and
+ * forwards mouse events (wheel + left-button press/motion/release) to the given
+ * handlers. Mouse events reach the rest of Ink as raw input chunks, so any
+ * text-inserting useInput handler must guard with `isMouseInput(input)`.
+ *
+ * The DECSET enable/disable sequences are only written when stdout is a TTY
+ * (writing them into a pipe would litter the output). The emitter listener is
+ * attached unconditionally so the harness can simulate mouse events.
+ *
+ * Trade-off: terminal mouse reporting (DECSET 1000) hands the mouse to the app,
+ * so native drag-to-select is disabled while it is on. The app therefore draws
+ * its own selection (tmux-style) and copies via OSC 52. Users who prefer native
+ * selection can opt out with `MOBIUS_TUI_DISABLE_MOUSE=1`.
+ */
+export function useMouseEvents(handlers: {
+  onWheel?: (delta: number) => void
+  onPress?: (row: number, col: number) => void
+  onMotion?: (row: number, col: number) => void
+  onRelease?: (row: number, col: number) => void
+}): void {
+  const { internal_eventEmitter } = useStdin()
+  const { stdout } = useStdout()
+  const refs = useRef(handlers)
+  refs.current = handlers
+
+  useEffect(() => {
+    if (!internal_eventEmitter) return
+    if (process.env.MOBIUS_TUI_DISABLE_MOUSE === '1') return
+    const isTTY = Boolean(stdout.isTTY)
+    if (isTTY) stdout.write('\x1b[?1000h\x1b[?1002h\x1b[?1006h')
+    let buf = ''
+    const handler = (chunk: unknown) => {
+      // A single read() chunk may carry several events and a sequence may be
+      // split across chunks, so accumulate and re-scan.
+      buf += String(chunk)
+      for (const e of parseMouseEvents(buf)) {
+        if (e.kind === 'wheel') refs.current.onWheel?.(e.delta)
+        else if (e.kind === 'press') refs.current.onPress?.(e.row, e.col)
+        else if (e.kind === 'motion') refs.current.onMotion?.(e.row, e.col)
+        else refs.current.onRelease?.(e.row, e.col)
+      }
+      // Drop the fully-matched sequences, keeping any trailing partial escape
+      // prefix so a split sequence still matches on the next chunk.
+      buf = buf.replace(SGR_MOUSE_RE, '').replace(LEGACY_MOUSE_RE, '')
+      const esc = buf.lastIndexOf('\x1b')
+      buf = esc >= 0 ? buf.slice(esc) : ''
+    }
+    internal_eventEmitter.on('input', handler)
+    return () => {
+      internal_eventEmitter.off('input', handler)
+      if (isTTY) stdout.write('\x1b[?1000l\x1b[?1002l\x1b[?1006l')
+    }
+  }, [internal_eventEmitter, stdout])
+}
+
 // ─── TextInput ───────────────────────────────────────────────────────────────
 export interface TextInputProps {
   value: string
@@ -47,27 +171,42 @@ export function TextInput(props: TextInputProps) {
     setCursor(nextCursor)
   }
 
+  // Physical Backspace/Delete keys are owned by useDeleteKeyCapture from the
+  // raw stdin bytes — Ink reports the Backspace key (\x7f) and the Delete key
+  // (ESC[3~) both as `key.delete`, so handling `key.delete` in useInput would
+  // delete in the wrong direction. Refs keep the hook's callback on the latest
+  // value/cursor without re-subscribing.
+  const valueRef = useRef(value)
+  const cursorRef = useRef(cursor)
+  valueRef.current = value
+  cursorRef.current = cursor
+  useDeleteKeyCapture(focused, (intent) => {
+    const { text, cursor: nextCursor } = applyDeleteIntent(valueRef.current, cursorRef.current, intent)
+    edit(text, nextCursor)
+  })
+
   useInput((input, key) => {
+    if (isMouseInput(input)) return
     if (key.return) { props.onSubmit?.(); return }
     if (key.upArrow) { props.onArrowUp?.(); return }
     if (key.downArrow) { props.onArrowDown?.(); return }
     if (isEscapeKeypress(input, key)) { props.onEscape?.(); return }
     if (key.tab) { props.onTab?.(); return }
-    // Ink labels the \x7f that virtually every terminal's Backspace key emits
-    // as `key.delete` (see its parse-keypress.js TODO). Treat either signal as
-    // a backward delete — otherwise Backspace at the end of the input is a no-op.
-    if (key.backspace || key.delete || (key.ctrl && input === 'h')) {
-      if (cursor > 0) {
-        // delete word on Ctrl+W
-        if (key.ctrl && input === 'w') {
-          const before = value.slice(0, cursor)
-          const m = before.match(/\S+\s*$/)
-          const cut = m ? m[0].length : 0
-          edit(value.slice(0, cursor - cut) + value.slice(cursor), cursor - cut)
-        } else {
-          edit(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1)
-        }
-      }
+    // Only the unambiguous logical editing bindings stay here; the physical
+    // delete keys are handled above via useDeleteKeyCapture.
+    if (key.ctrl && input === 'w') {
+      const { text, cursor: nextCursor } = applyDeleteIntent(value, cursor, 'backward-word')
+      edit(text, nextCursor)
+      return
+    }
+    if (key.ctrl && input === 'h') {
+      const { text, cursor: nextCursor } = applyDeleteIntent(value, cursor, 'backward')
+      edit(text, nextCursor)
+      return
+    }
+    if (key.ctrl && input === 'd') {
+      const { text, cursor: nextCursor } = applyDeleteIntent(value, cursor, 'forward')
+      edit(text, nextCursor)
       return
     }
     if (key.leftArrow) { setCursor(c => Math.max(0, c - 1)); return }
@@ -172,6 +311,7 @@ export function Select(props: SelectProps) {
 
   useInput((input, key) => {
     if (!items.length) return
+    if (isMouseInput(input)) return
     if (key.upArrow) { setActive(a => (a - 1 + items.length) % items.length); return }
     if (key.downArrow) { setActive(a => (a + 1) % items.length); return }
     if (mode === 'single') {

package/src/lib/delete-keys.ts

@@ -0,0 +1,152 @@
+/**
+ * Delete / Backspace key handling.
+ *
+ * Ink's parse-keypress collapses the terminal Backspace key (0x7f) and the
+ * forward Delete key (ESC[3~) into one `key.delete` keypress with an empty
+ * `input` (its own source TODO admits the collision), so a useInput handler
+ * alone cannot tell them apart. The raw stdin chunk still can, so the input
+ * components subscribe to Ink's internal event emitter — the same channel
+ * `useMouseEvents` uses — and own the physical delete keys there, keeping only
+ * the unambiguous logical bindings (Ctrl+W / Ctrl+H / Ctrl+D) in useInput.
+ */
+
+import { useEffect, useRef } from 'react'
+import { useStdin } from 'ink'
+
+export type DeleteIntent = 'backward' | 'forward' | 'backward-word' | 'forward-word'
+
+// Raw sequences Ink receives for physical delete keys, longest first so a
+// longer match wins over its prefix. 0x7f is what virtually every terminal's
+// Backspace key emits; the ESC-prefixed forms are the standard CSI sequences.
+const DELETE_SEQUENCES: ReadonlyArray<readonly [string, DeleteIntent]> = [
+  ['\x1b[3;3~', 'forward-word'],   // Alt+Delete (xterm-family CSI modifier 3 = Alt)
+  ['\x1b[3;5~', 'backward-word'],  // Ctrl+Backspace on Windows Terminal/ConPTY; Ctrl+Delete on xterm
+  ['\x1b\x7f', 'backward-word'],   // Alt+Backspace (ESC + DEL)
+  ['\x1b\x08', 'backward-word'],   // Alt+Backspace (ESC + legacy 0x08)
+  ['\x1b[3~', 'forward'],          // Delete key
+  ['\x7f', 'backward'],            // Backspace key
+  ['\x08', 'backward'],            // Backspace key (legacy encoding)
+]
+
+/** Map the leading bytes of `raw` to a delete intent, or null when not a delete key. */
+export function classifyDeleteSequence(raw: string): { intent: DeleteIntent; length: number } | null {
+  for (const [seq, intent] of DELETE_SEQUENCES) {
+    if (raw.startsWith(seq)) return { intent, length: seq.length }
+  }
+  return null
+}
+
+// ─── Surrogate-aware cursor helpers (also used by the composer) ─────────────
+
+export function clampCursor(text: string, cursor: number): number {
+  let at = Math.max(0, Math.min(text.length, cursor))
+  while (at > 0 && at < text.length && /[\uDC00-\uDFFF]/.test(text[at])) at--
+  return at
+}
+
+export function previousCursorBoundary(text: string, cursor: number): number {
+  const at = clampCursor(text, cursor)
+  if (at <= 0) return 0
+  const code = text.charCodeAt(at - 1)
+  return at - (code >= 0xDC00 && code <= 0xDFFF ? 2 : 1)
+}
+
+export function nextCursorBoundary(text: string, cursor: number): number {
+  const at = clampCursor(text, cursor)
+  if (at >= text.length) return text.length
+  const code = text.charCodeAt(at)
+  return at + (code >= 0xD800 && code <= 0xDBFF ? 2 : 1)
+}
+
+/** Backward-word boundary: skip trailing whitespace, then the word before it. */
+function backwardWordBoundary(text: string, at: number): number {
+  let i = at
+  while (i > 0 && /\s/.test(text[i - 1])) i--
+  while (i > 0 && !/\s/.test(text[i - 1])) i--
+  return i
+}
+
+/** Forward-word boundary: skip leading whitespace, then the word after it. */
+function forwardWordBoundary(text: string, at: number): number {
+  let i = at
+  while (i < text.length && /\s/.test(text[i])) i++
+  while (i < text.length && !/\s/.test(text[i])) i++
+  return i
+}
+
+/** Apply a delete intent to `text` at `cursor`, returning the new text/cursor. */
+export function applyDeleteIntent(
+  text: string,
+  cursor: number,
+  intent: DeleteIntent,
+): { text: string; cursor: number } {
+  const at = clampCursor(text, cursor)
+  switch (intent) {
+    case 'backward': {
+      if (at <= 0) return { text, cursor: at }
+      const prev = previousCursorBoundary(text, at)
+      return { text: text.slice(0, prev) + text.slice(at), cursor: prev }
+    }
+    case 'forward': {
+      if (at >= text.length) return { text, cursor: at }
+      const next = nextCursorBoundary(text, at)
+      return { text: text.slice(0, at) + text.slice(next), cursor: at }
+    }
+    case 'backward-word': {
+      const start = backwardWordBoundary(text, at)
+      if (start === at) return { text, cursor: at }
+      return { text: text.slice(0, start) + text.slice(at), cursor: start }
+    }
+    case 'forward-word': {
+      const end = forwardWordBoundary(text, at)
+      if (end === at) return { text, cursor: at }
+      return { text: text.slice(0, at) + text.slice(end), cursor: at }
+    }
+  }
+}
+
+/**
+ * Owns the physical Backspace/Delete keys for one input component. Because Ink
+ * reports the Backspace key (0x7f) and the Delete key (ESC[3~) as the same
+ * `key.delete`, a useInput handler must not treat a plain `key.delete` as a
+ * backward delete — this hook resolves the intent from the raw stdin bytes and
+ * calls `onDelete` instead.
+ *
+ * `enabled` mirrors the field's focus: when false the hook stays silent so
+ * Backspace/Del pass through to other handlers (e.g. a parent list that uses
+ * Backspace to go back).
+ */
+export function useDeleteKeyCapture(
+  enabled: boolean,
+  onDelete: (intent: DeleteIntent) => void,
+): void {
+  const { internal_eventEmitter } = useStdin()
+  const enabledRef = useRef(enabled)
+  const onDeleteRef = useRef(onDelete)
+  enabledRef.current = enabled
+  onDeleteRef.current = onDelete
+
+  useEffect(() => {
+    if (!internal_eventEmitter) return
+    let buf = ''
+    const handler = (chunk: unknown) => {
+      buf += String(chunk)
+      const m = classifyDeleteSequence(buf)
+      if (m) {
+        buf = buf.slice(m.length)
+        if (enabledRef.current) onDeleteRef.current(m.intent)
+      }
+      // Keep buf only when it is a strict prefix of a delete sequence (a CSI
+      // sequence split across reads, e.g. ESC then [3~), so a delete key still
+      // matches on the next chunk while ordinary text / paste content is
+      // released instead of accumulating ahead of the next keypress.
+      let keep = ''
+      for (const [seq] of DELETE_SEQUENCES) {
+        if (seq.startsWith(buf)) { keep = buf; break }
+      }
+      buf = keep
+    }
+    internal_eventEmitter.on('input', handler)
+    return () => { internal_eventEmitter.off('input', handler) }
+  }, [internal_eventEmitter])
+}