@tooee/shell 0.1.0

package/src/modal.ts

@@ -0,0 +1,504 @@
+import { useState, useCallback, useRef, useEffect } from "react"
+import { useCommand, useMode, useSetMode, type Mode } from "@tooee/commands"
+import { copyToClipboard } from "@tooee/clipboard"
+import { useTerminalDimensions } from "@opentui/react"
+import { findMatchingLines } from "./search.js"
+
+export interface Position {
+  line: number
+  col: number
+}
+
+export interface ModalNavigationState {
+  mode: Mode
+  setMode: (mode: Mode) => void
+  scrollOffset: number
+  cursor: Position | null
+  selection: { start: Position; end: Position } | null
+  toggledIndices: Set<number>
+  searchQuery: string
+  searchActive: boolean
+  setSearchQuery: (query: string) => void
+  matchingLines: number[]
+  currentMatchIndex: number
+  submitSearch: () => void
+}
+
+export interface ModalNavigationOptions {
+  totalLines: number
+  viewportHeight?: number
+  getText?: () => string | undefined
+  blockCount?: number
+  blockLineMap?: number[]
+  /** Offset to subtract from search line numbers to get block indices (for when getText has different line structure than visual) */
+  searchLineOffset?: number
+  multiSelect?: boolean
+}
+
+export function useModalNavigationCommands(opts: ModalNavigationOptions): ModalNavigationState {
+  const { height: terminalHeight } = useTerminalDimensions()
+  const {
+    totalLines,
+    viewportHeight = terminalHeight - 2,
+    getText,
+    blockCount,
+    blockLineMap,
+    searchLineOffset = 0,
+    multiSelect = false,
+  } = opts
+  const mode = useMode()
+  const setMode = useSetMode()
+
+  const [scrollOffset, setScrollOffset] = useState(0)
+  const [cursor, setCursor] = useState<Position | null>(null)
+  const [selectionAnchor, setSelectionAnchor] = useState<Position | null>(null)
+  const [toggledIndices, setToggledIndices] = useState<Set<number>>(new Set())
+  const [searchQuery, setSearchQuery] = useState("")
+  const [searchActive, setSearchActive] = useState(false)
+  const [matchingLines, setMatchingLines] = useState<number[]>([])
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0)
+  const preSearchModeRef = useRef<Mode>("cursor")
+
+  // Incremental search: recompute matches when query changes while search is active
+  const searchQueryRef = useRef(searchQuery)
+  searchQueryRef.current = searchQuery
+  const matchingLinesRef = useRef(matchingLines)
+  matchingLinesRef.current = matchingLines
+
+  useEffect(() => {
+    if (!searchActive) return
+    const text = getText?.()
+    if (!text || !searchQuery) {
+      setMatchingLines([])
+      setCurrentMatchIndex(0)
+      return
+    }
+    const matches = findMatchingLines(text, searchQuery)
+    setMatchingLines(matches)
+    setCurrentMatchIndex(0)
+    if (matches.length > 0) {
+      // Auto-jump to first match
+      const line = matches[0]
+      setScrollOffset((offset) => {
+        if (line < offset || line >= offset + viewportHeight) {
+          return Math.max(0, Math.min(line, Math.max(0, totalLines - viewportHeight)))
+        }
+        return offset
+      })
+      if (mode === "cursor" || mode === "select") {
+        setCursor((c) => (c ? { line, col: 0 } : c))
+      }
+    }
+  }, [searchQuery, searchActive]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isBlockMode = blockCount != null
+  const cursorMax = isBlockMode ? Math.max(0, blockCount - 1) : Math.max(0, totalLines - 1)
+  const maxScroll = Math.max(0, totalLines - viewportHeight)
+  const maxLine = Math.max(0, totalLines - 1)
+
+  const clampScroll = useCallback(
+    (value: number) => Math.max(0, Math.min(value, maxScroll)),
+    [maxScroll],
+  )
+
+  const _clampLine = useCallback(
+    (value: number) => Math.max(0, Math.min(value, maxLine)),
+    [maxLine],
+  )
+
+  const clampCursor = useCallback(
+    (value: number) => Math.max(0, Math.min(value, cursorMax)),
+    [cursorMax],
+  )
+
+  useEffect(() => {
+    setToggledIndices((prev) => {
+      const filtered = Array.from(prev).filter((index) => index <= cursorMax)
+      if (filtered.length === prev.size) return prev
+      return new Set(filtered)
+    })
+  }, [cursorMax])
+
+  // When entering cursor mode, initialize cursor
+  const prevMode = useRef<Mode | null>(null)
+  useEffect(() => {
+    if (mode === "cursor" && prevMode.current !== "cursor" && prevMode.current !== "select") {
+      // If there's an active search match, start cursor there; otherwise start at scroll position
+      const matches = matchingLinesRef.current
+      if (matches.length > 0) {
+        const matchLine = matches[currentMatchIndex] ?? matches[0]
+        // In block mode, convert search line to block index using offset
+        if (isBlockMode) {
+          const blockIndex = Math.max(0, matchLine - searchLineOffset)
+          setCursor({ line: Math.min(blockIndex, cursorMax), col: 0 })
+        } else {
+          setCursor({ line: matchLine, col: 0 })
+        }
+      } else {
+        // No search match - start at top (block 0) or scroll position
+        setCursor({ line: isBlockMode ? 0 : scrollOffset, col: 0 })
+      }
+    }
+    if (mode === "select" && prevMode.current === "cursor" && cursor) {
+      setSelectionAnchor({ ...cursor })
+    }
+    prevMode.current = mode
+  }, [mode]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Scroll to keep cursor visible
+  const scrollToCursor = useCallback(
+    (cursorIndex: number) => {
+      const line = isBlockMode && blockLineMap ? (blockLineMap[cursorIndex] ?? 0) : cursorIndex
+      setScrollOffset((offset) => {
+        if (line < offset) return line
+        if (line >= offset + viewportHeight) return clampScroll(line - viewportHeight + 1)
+        return offset
+      })
+    },
+    [viewportHeight, clampScroll, isBlockMode, blockLineMap],
+  )
+
+  // === CURSOR MODE ===
+
+  useCommand({
+    id: "cursor-down",
+    title: "Cursor down",
+    hotkey: "j",
+    modes: ["cursor"],
+    handler: () => {
+      setCursor((c) => {
+        if (!c) return c
+        const next = clampCursor(c.line + 1)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-toggle",
+    title: "Toggle selection",
+    hotkey: "tab",
+    modes: ["cursor"],
+    when: () => multiSelect,
+    handler: () => {
+      setToggledIndices((prev) => {
+        if (!cursor) return prev
+        const next = new Set(prev)
+        const idx = cursor.line
+        if (next.has(idx)) {
+          next.delete(idx)
+        } else {
+          next.add(idx)
+        }
+        return next
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-toggle-up",
+    title: "Toggle and move up",
+    hotkey: "shift+tab",
+    modes: ["cursor"],
+    when: () => multiSelect,
+    handler: () => {
+      setToggledIndices((prev) => {
+        if (!cursor) return prev
+        const next = new Set(prev)
+        const idx = cursor.line
+        if (next.has(idx)) {
+          next.delete(idx)
+        } else {
+          next.add(idx)
+        }
+        return next
+      })
+      setCursor((c) => {
+        if (!c) return c
+        const next = clampCursor(c.line - 1)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-up",
+    title: "Cursor up",
+    hotkey: "k",
+    modes: ["cursor"],
+    handler: () => {
+      setCursor((c) => {
+        if (!c) return c
+        const next = clampCursor(c.line - 1)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-half-down",
+    title: "Cursor half page down",
+    hotkey: "ctrl+d",
+    modes: ["cursor"],
+    handler: () => {
+      setCursor((c) => {
+        if (!c) return c
+        const step = isBlockMode ? Math.floor(cursorMax / 4) || 1 : Math.floor(viewportHeight / 2)
+        const next = clampCursor(c.line + step)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-half-up",
+    title: "Cursor half page up",
+    hotkey: "ctrl+u",
+    modes: ["cursor"],
+    handler: () => {
+      setCursor((c) => {
+        if (!c) return c
+        const step = isBlockMode ? Math.floor(cursorMax / 4) || 1 : Math.floor(viewportHeight / 2)
+        const next = clampCursor(c.line - step)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-top",
+    title: "Cursor to top",
+    hotkey: "g g",
+    modes: ["cursor"],
+    handler: () => {
+      setCursor({ line: 0, col: 0 })
+      setScrollOffset(0)
+    },
+  })
+
+  useCommand({
+    id: "cursor-bottom",
+    title: "Cursor to bottom",
+    hotkey: "shift+g",
+    modes: ["cursor"],
+    handler: () => {
+      setCursor({ line: cursorMax, col: 0 })
+      if (isBlockMode && blockLineMap) {
+        const line = blockLineMap[cursorMax] ?? 0
+        setScrollOffset(clampScroll(line))
+      } else {
+        setScrollOffset(maxScroll)
+      }
+    },
+  })
+
+  useCommand({
+    id: "cursor-search-start",
+    title: "Search",
+    hotkey: "/",
+    modes: ["cursor"],
+    handler: () => {
+      preSearchModeRef.current = mode
+      setSearchActive(true)
+      setSearchQuery("")
+      setMode("insert")
+    },
+  })
+
+  useCommand({
+    id: "cursor-search-next",
+    title: "Next match",
+    hotkey: "n",
+    modes: ["cursor"],
+    when: () => !searchActive,
+    handler: () => {
+      const matches = matchingLinesRef.current
+      if (matches.length === 0) return
+      setCurrentMatchIndex((idx) => {
+        const next = (idx + 1) % matches.length
+        const line = matches[next]
+        setCursor({ line, col: 0 })
+        scrollToCursor(line)
+        return next
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-search-prev",
+    title: "Previous match",
+    hotkey: "shift+n",
+    modes: ["cursor"],
+    when: () => !searchActive,
+    handler: () => {
+      const matches = matchingLinesRef.current
+      if (matches.length === 0) return
+      setCurrentMatchIndex((idx) => {
+        const next = (idx - 1 + matches.length) % matches.length
+        const line = matches[next]
+        setCursor({ line, col: 0 })
+        scrollToCursor(line)
+        return next
+      })
+    },
+  })
+
+  // === SELECT MODE ===
+
+  useCommand({
+    id: "select-down",
+    title: "Extend selection down",
+    hotkey: "j",
+    modes: ["select"],
+    handler: () => {
+      setCursor((c) => {
+        if (!c) return c
+        const next = clampCursor(c.line + 1)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "select-up",
+    title: "Extend selection up",
+    hotkey: "k",
+    modes: ["select"],
+    handler: () => {
+      setCursor((c) => {
+        if (!c) return c
+        const next = clampCursor(c.line - 1)
+        scrollToCursor(next)
+        return { line: next, col: 0 }
+      })
+    },
+  })
+
+  useCommand({
+    id: "select-toggle",
+    title: "Toggle selection",
+    hotkey: "tab",
+    modes: ["select"],
+    when: () => multiSelect,
+    handler: () => {
+      setToggledIndices((prev) => {
+        if (!cursor) return prev
+        const next = new Set(prev)
+        const idx = cursor.line
+        if (next.has(idx)) {
+          next.delete(idx)
+        } else {
+          next.add(idx)
+        }
+        return next
+      })
+    },
+  })
+
+  useCommand({
+    id: "select-copy",
+    title: "Copy selection",
+    hotkey: "y",
+    modes: ["select"],
+    handler: () => {
+      if (!getText || !selectionAnchor || !cursor) return
+      const text = getText()
+      if (!text) return
+
+      if (isBlockMode && blockLineMap) {
+        // Block-based copy: use blockLineMap to find line ranges
+        const startBlock = Math.min(selectionAnchor.line, cursor.line)
+        const endBlock = Math.max(selectionAnchor.line, cursor.line)
+        const startLine = blockLineMap[startBlock] ?? 0
+        const endLine =
+          endBlock + 1 < blockLineMap.length
+            ? (blockLineMap[endBlock + 1] ?? text.split("\n").length)
+            : text.split("\n").length
+        const lines = text.split("\n")
+        const selected = lines.slice(startLine, endLine).join("\n")
+        if (selected) {
+          void copyToClipboard(selected)
+        }
+      } else {
+        const lines = text.split("\n")
+        const startLine = Math.min(selectionAnchor.line, cursor.line)
+        const endLine = Math.max(selectionAnchor.line, cursor.line)
+        const selected = lines.slice(startLine, endLine + 1).join("\n")
+        if (selected) {
+          void copyToClipboard(selected)
+        }
+      }
+      setMode("cursor")
+    },
+  })
+
+  useCommand({
+    id: "select-cancel",
+    title: "Cancel selection",
+    hotkey: "escape",
+    modes: ["select"],
+    handler: () => setMode("cursor"),
+  })
+
+  // === MODE TRANSITIONS ===
+
+  useCommand({
+    id: "enter-select",
+    title: "Enter select mode",
+    hotkey: "v",
+    modes: ["cursor"],
+    handler: () => setMode("select"),
+  })
+
+  // === SEARCH CANCEL (any mode) ===
+
+  useCommand({
+    id: "search-cancel",
+    title: "Cancel search",
+    hotkey: "escape",
+    modes: ["cursor", "select", "insert"],
+    when: () => searchActive,
+    handler: () => {
+      setSearchActive(false)
+      setSearchQuery("")
+      setMatchingLines([])
+      setCurrentMatchIndex(0)
+      setMode(preSearchModeRef.current)
+    },
+  })
+
+  // Compute selection from anchor + cursor
+  const selection =
+    selectionAnchor && cursor && mode === "select"
+      ? {
+          start: selectionAnchor.line <= cursor.line ? selectionAnchor : cursor,
+          end: selectionAnchor.line <= cursor.line ? cursor : selectionAnchor,
+        }
+      : null
+
+  const submitSearch = useCallback(() => {
+    setSearchActive(false)
+    setMode(preSearchModeRef.current)
+  }, [setMode])
+
+  return {
+    mode,
+    setMode,
+    scrollOffset,
+    cursor,
+    selection,
+    toggledIndices,
+    searchQuery,
+    searchActive,
+    setSearchQuery,
+    matchingLines,
+    currentMatchIndex,
+    submitSearch,
+  }
+}

package/src/overlay.tsx

@@ -0,0 +1,220 @@
+import { useState, useCallback, useMemo, useRef } from "react"
+import type { ReactNode } from "react"
+import {
+  OverlayControllerContext,
+  OverlayStateContext,
+  type OverlayId,
+  type OverlayCloseReason,
+  type OverlayOpenOptions,
+  type OverlayRenderer,
+  type OverlayHandle,
+  type OverlayController,
+} from "@tooee/overlays"
+import { useMode, useSetMode, useProvideCommandContext, useCommand } from "@tooee/commands"
+
+declare module "@tooee/commands" {
+  interface CommandContext {
+    overlay: OverlayController
+  }
+}
+
+interface OverlayEntry {
+  id: OverlayId
+  render: OverlayRenderer<any>
+  payload: any
+  options: OverlayOpenOptions
+  prevMode: string
+}
+
+export function OverlayProvider({ children }: { children: ReactNode }) {
+  const [stack, setStack] = useState<OverlayEntry[]>([])
+  const stackRef = useRef(stack)
+  stackRef.current = stack
+
+  const mode = useMode()
+  const setMode = useSetMode()
+  const modeRef = useRef(mode)
+  modeRef.current = mode
+
+  const removeEntry = useCallback(
+    (id: OverlayId, reason: OverlayCloseReason) => {
+      const current = stackRef.current
+      const idx = current.findIndex((e) => e.id === id)
+      if (idx === -1) return
+
+      const entry = current[idx]
+      entry.options.onClose?.(reason)
+
+      setStack((prev) => {
+        const i = prev.findIndex((e) => e.id === id)
+        if (i === -1) return prev
+        const next = [...prev]
+        next.splice(i, 1)
+        return next
+      })
+
+      if (entry.options.restoreMode !== false) {
+        setMode(entry.prevMode as any)
+      }
+    },
+    [setMode],
+  )
+
+  const open = useCallback(
+    <TPayload,>(
+      id: OverlayId,
+      render: OverlayRenderer<TPayload>,
+      payload: TPayload,
+      options: OverlayOpenOptions = {},
+    ): OverlayHandle<TPayload> => {
+      const prevMode = modeRef.current
+      const overlayMode = options.mode === undefined ? "insert" : options.mode
+
+      setStack((prev) => {
+        // Remove existing entry with same id if present
+        const filtered = prev.filter((e) => e.id !== id)
+        const entry: OverlayEntry = {
+          id,
+          render: render as OverlayRenderer<any>,
+          payload,
+          options,
+          prevMode,
+        }
+        return [...filtered, entry]
+      })
+
+      if (overlayMode !== null) {
+        setMode(overlayMode as any)
+      }
+
+      const handle: OverlayHandle<TPayload> = {
+        id,
+        close: (reason: OverlayCloseReason = "close") => removeEntry(id, reason),
+        update: (next: TPayload | ((prev: TPayload) => TPayload)) => {
+          setStack((prev) => {
+            const idx = prev.findIndex((e) => e.id === id)
+            if (idx === -1) return prev
+            const entry = prev[idx]
+            const newPayload =
+              typeof next === "function" ? (next as (p: TPayload) => TPayload)(entry.payload) : next
+            const updated = [...prev]
+            updated[idx] = { ...entry, payload: newPayload }
+            return updated
+          })
+        },
+      }
+
+      return handle
+    },
+    [setMode, removeEntry],
+  )
+
+  const update = useCallback(
+    <TPayload,>(id: OverlayId, next: TPayload | ((prev: TPayload) => TPayload)) => {
+      setStack((prev) => {
+        const idx = prev.findIndex((e) => e.id === id)
+        if (idx === -1) return prev
+        const entry = prev[idx]
+        const newPayload =
+          typeof next === "function" ? (next as (p: TPayload) => TPayload)(entry.payload) : next
+        const updated = [...prev]
+        updated[idx] = { ...entry, payload: newPayload }
+        return updated
+      })
+    },
+    [],
+  )
+
+  const show = useCallback(
+    (id: OverlayId, content: ReactNode, options?: OverlayOpenOptions) => {
+      // Back-compat: show() defaults to no mode change (unlike open() which defaults to "insert")
+      open(id, () => content, undefined, { mode: null, ...options })
+    },
+    [open],
+  )
+
+  const hide = useCallback(
+    (id: OverlayId) => {
+      removeEntry(id, "close")
+    },
+    [removeEntry],
+  )
+
+  const closeTop = useCallback(
+    (reason: OverlayCloseReason = "close") => {
+      const current = stackRef.current
+      if (current.length === 0) return
+      const top = current[current.length - 1]
+      removeEntry(top.id, reason)
+    },
+    [removeEntry],
+  )
+
+  const isOpen = useCallback((id: OverlayId) => {
+    return stackRef.current.some((e) => e.id === id)
+  }, [])
+
+  const topId = stack.length > 0 ? stack[stack.length - 1].id : null
+
+  const controller = useMemo<OverlayController>(
+    () => ({
+      open,
+      update,
+      show,
+      hide,
+      closeTop,
+      isOpen,
+      topId,
+    }),
+    [open, update, show, hide, closeTop, isOpen, topId],
+  )
+
+  useProvideCommandContext(() => ({
+    overlay: {
+      open: controller.open,
+      show: controller.show,
+      hide: controller.hide,
+      update: controller.update,
+      closeTop: controller.closeTop,
+      isOpen: controller.isOpen,
+      topId: controller.topId,
+    },
+  }))
+
+  useCommand({
+    id: "overlay.close-top",
+    title: "Close overlay",
+    hotkey: "Escape",
+    modes: ["insert"],
+    hidden: true,
+    when: () => topId !== null,
+    handler: () => closeTop("escape"),
+  })
+
+  // Render the topmost overlay
+  const topEntry = stack.length > 0 ? stack[stack.length - 1] : null
+  const current = topEntry
+    ? topEntry.render({
+        id: topEntry.id,
+        payload: topEntry.payload,
+        isTop: true,
+        close: (reason: OverlayCloseReason = "close") => removeEntry(topEntry.id, reason),
+        update: (next: any) => update(topEntry.id, next),
+      })
+    : null
+
+  const state = useMemo(
+    () => ({
+      current,
+      hasOverlay: stack.length > 0,
+      stack: stack.map((e) => e.id),
+    }),
+    [current, stack],
+  )
+
+  return (
+    <OverlayControllerContext value={controller}>
+      <OverlayStateContext value={state}>{children}</OverlayStateContext>
+    </OverlayControllerContext>
+  )
+}