@tooee/search 0.1.14

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@tooee/search",
+  "version": "0.1.14",
+  "description": "Search hook, utilities, and SearchBar component for Tooee",
+  "keywords": [
+    "cli",
+    "opentui",
+    "search",
+    "terminal",
+    "tui"
+  ],
+  "homepage": "https://github.com/gingerhendrix/tooee",
+  "bugs": "https://github.com/gingerhendrix/tooee/issues",
+  "license": "MIT",
+  "author": "Gareth Andrew",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gingerhendrix/tooee.git",
+    "directory": "packages/search"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "@tooee/source": "./src/index.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tooee/commands": "0.1.14",
+    "@tooee/themes": "0.1.14"
+  },
+  "devDependencies": {
+    "@opentui/core": "^0.1.86",
+    "@opentui/react": "^0.1.86",
+    "@types/bun": "^1.3.10",
+    "@types/react": "^19.2.14",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@opentui/core": "^0.1.86",
+    "@opentui/react": "^0.1.86",
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/SearchBar.tsx

@@ -0,0 +1,55 @@
+import { useTheme } from "@tooee/themes"
+
+export interface SearchBarProps {
+  query: string
+  onQueryChange: (query: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+  matchCount?: number
+  currentMatch?: number
+}
+
+export function SearchBar({
+  query,
+  onQueryChange,
+  onSubmit,
+  onCancel: _onCancel,
+  matchCount,
+  currentMatch,
+}: SearchBarProps) {
+  const { theme } = useTheme()
+
+  const matchDisplay =
+    matchCount !== undefined && matchCount > 0
+      ? `${(currentMatch ?? 0) + 1}/${matchCount}`
+      : matchCount === 0 && query.length > 0
+        ? "No matches"
+        : ""
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        flexShrink: 0,
+        backgroundColor: theme.backgroundPanel,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+    >
+      <text content="/" style={{ fg: theme.accent }} />
+      <input
+        value={query}
+        focused
+        onInput={onQueryChange}
+        onSubmit={onSubmit}
+        backgroundColor="transparent"
+        focusedBackgroundColor="transparent"
+        textColor={theme.text}
+        cursorColor={theme.accent}
+        cursorStyle={{ style: "line", blinking: true }}
+        style={{ flexGrow: 1 }}
+      />
+      {matchDisplay ? <text content={` ${matchDisplay}`} style={{ fg: theme.textMuted }} /> : null}
+    </box>
+  )
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { useSearch } from "./search-hook.js"
+export type { UseSearchOptions, SearchState } from "./search-hook.js"
+export { findMatchingLines } from "./search.js"
+export { SearchBar } from "./SearchBar.js"
+export type { SearchBarProps } from "./SearchBar.js"

package/src/search-hook.ts

@@ -0,0 +1,147 @@
+import { useCallback, useMemo, useRef, useState } from "react"
+import { useCommand, useMode, useSetMode, type Mode } from "@tooee/commands"
+
+export interface UseSearchOptions {
+  match: (query: string) => number[]
+  onJump: (index: number) => void
+}
+
+export interface SearchState {
+  searchQuery: string
+  searchActive: boolean
+  setSearchQuery: (query: string) => void
+  matchingLines: number[]
+  currentMatchIndex: number
+  submitSearch: () => void
+}
+
+const EMPTY: number[] = []
+const CURSOR_MODES: Mode[] = ["cursor"]
+const ALL_MODES: Mode[] = ["cursor", "select", "insert"]
+
+export function useSearch({ match, onJump }: UseSearchOptions): SearchState {
+  const mode = useMode()
+  const setMode = useSetMode()
+
+  const [searchQuery, setSearchQuery] = useState("")
+  const [searchActive, setSearchActive] = useState(false)
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0)
+  const [committedQuery, setCommittedQuery] = useState("")
+  const preSearchModeRef = useRef<Mode>("cursor")
+
+  const matchRef = useRef(match)
+  matchRef.current = match
+
+  const onJumpRef = useRef(onJump)
+  onJumpRef.current = onJump
+
+  const activeQuery = searchActive ? searchQuery : committedQuery
+
+  const matchingLines = useMemo(() => {
+    if (!activeQuery) return EMPTY
+    return matchRef.current(activeQuery)
+  }, [activeQuery])
+
+  const matchingLinesRef = useRef(matchingLines)
+  matchingLinesRef.current = matchingLines
+
+  // Imperatively set search query, reset match index, and jump to first match.
+  const updateSearchQuery = useCallback((query: string) => {
+    setSearchQuery(query)
+    setCurrentMatchIndex(0)
+    const matches = query ? matchRef.current(query) : []
+    if (matches[0] != null) {
+      onJumpRef.current(matches[0])
+    }
+  }, [])
+
+  useCommand({
+    id: "cursor-search-start",
+    title: "Search",
+    hotkey: "/",
+    modes: CURSOR_MODES,
+    handler: () => {
+      preSearchModeRef.current = mode
+      setSearchActive(true)
+      setSearchQuery("")
+      setMode("insert")
+    },
+  })
+
+  useCommand({
+    id: "cursor-search-next",
+    title: "Next match",
+    hotkey: "n",
+    modes: CURSOR_MODES,
+    when: () => !searchActive,
+    handler: () => {
+      const matches = matchingLinesRef.current
+      if (matches.length === 0) return
+
+      setCurrentMatchIndex((index) => {
+        const nextIndex = (index + 1) % matches.length
+        const nextMatch = matches[nextIndex]
+        if (nextMatch != null) {
+          onJumpRef.current(nextMatch)
+        }
+        return nextIndex
+      })
+    },
+  })
+
+  useCommand({
+    id: "cursor-search-prev",
+    title: "Previous match",
+    hotkey: "shift+n",
+    modes: CURSOR_MODES,
+    when: () => !searchActive,
+    handler: () => {
+      const matches = matchingLinesRef.current
+      if (matches.length === 0) return
+
+      setCurrentMatchIndex((index) => {
+        const nextIndex = (index - 1 + matches.length) % matches.length
+        const nextMatch = matches[nextIndex]
+        if (nextMatch != null) {
+          onJumpRef.current(nextMatch)
+        }
+        return nextIndex
+      })
+    },
+  })
+
+  useCommand({
+    id: "search-cancel",
+    title: "Cancel search",
+    hotkey: "escape",
+    modes: ALL_MODES,
+    when: () => searchActive,
+    handler: () => {
+      setSearchActive(false)
+      setSearchQuery("")
+      setCommittedQuery("")
+      setCurrentMatchIndex(0)
+      setMode(preSearchModeRef.current)
+    },
+  })
+
+  const submitSearch = useCallback(() => {
+    setCommittedQuery(searchQuery)
+    setSearchActive(false)
+    setCurrentMatchIndex(0)
+    const matches = searchQuery ? matchRef.current(searchQuery) : []
+    if (matches[0] != null) {
+      onJumpRef.current(matches[0])
+    }
+    setMode(preSearchModeRef.current)
+  }, [searchQuery, setMode])
+
+  return {
+    searchQuery,
+    searchActive,
+    setSearchQuery: updateSearchQuery,
+    matchingLines,
+    currentMatchIndex,
+    submitSearch,
+  }
+}

package/src/search.ts

@@ -0,0 +1,18 @@
+export function findMatchingLines(text: string, query: string): number[] {
+  if (!query) return []
+  const lowerQuery = query.toLowerCase()
+  const results: number[] = []
+  let lineStart = 0
+  let lineNum = 0
+  for (let i = 0; i <= text.length; i++) {
+    if (i === text.length || text[i] === "\n") {
+      const line = text.slice(lineStart, i).toLowerCase()
+      if (line.includes(lowerQuery)) {
+        results.push(lineNum)
+      }
+      lineStart = i + 1
+      lineNum++
+    }
+  }
+  return results
+}