Focus & Navigation

import { FocusProvider, useFocus, useKeyboard, useShortcuts, useFocusedShortcuts, FocusScope } from "@gridland/utils"
import { GridlandProvider, StatusBar } from "@gridland/ui"

// 1. Wrap your app with FocusProvider
function App() {
  return (
    <GridlandProvider theme={darkTheme} useKeyboard={useKeyboard}>
      <FocusProvider selectable>
        <box flexDirection="row" gap={1}>
          <Cell id="inbox" label="Inbox" autoFocus />
          <Cell id="drafts" label="Drafts" />
          <Cell id="sent" label="Sent" />
        </box>
        <AppStatusBar />
      </FocusProvider>
    </GridlandProvider>
  )
}

// 2. Make components focusable with useFocus
function Cell({ id, label, autoFocus }) {
  const { isFocused, isSelected, focusId, focusRef } = useFocus({ id, autoFocus })

  // 3. Handle keyboard input when focused
  useKeyboard((e) => {
    if (e.name === "return") console.log("submitted", label)
  }, { focusId, selectedOnly: true })

  // 4. Register shortcuts for the status bar
  useShortcuts(
    isSelected
      ? [{ key: "enter", label: "submit" }, { key: "esc", label: "back" }]
      : [{ key: "↑↓←→", label: "navigate" }, { key: "enter", label: "select" }],
    focusId,
  )

  return (
    <box ref={focusRef} border borderColor={isSelected ? "blue" : isFocused ? "green" : "gray"}>
      <text>{label}</text>
      <text>{isSelected ? "selected" : "not selected"}</text>
    </box>
  )
}

// 5. Display context-sensitive shortcuts
function AppStatusBar() {
  const shortcuts = useFocusedShortcuts()
  return <StatusBar items={shortcuts} />
}

<FocusScope trap autoFocus restoreOnUnmount>
  <TextInput label="Name" />
  <TextInput label="Email" />
  <button onClick={onClose}>Close</button>
</FocusScope>

import { useState } from "react"

const colors = ["#ef4444", "#3b82f6", "#22c55e", "#8b5cf6"]
const names = ["Red", "Blue", "Green", "Purple"]

function PointerDemo() {
  const [selected, setSelected] = useState<number | null>(null)
  const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null)

  return (
    <box flexDirection="column" padding={1}>
      {/* Click to select a color */}
      <box flexDirection="row" gap={1}>
        {colors.map((color, i) => (
          <box
            key={color}
            flexGrow={1}
            height={3}
            border
            borderColor={i === selected ? color : "#555"}
            onMouseDown={(e) => {
              setSelected(i)
              setMousePos({ x: e.x, y: e.y })
            }}
          >
            <text style={{ fg: color, bold: i === selected }}>{names[i]}</text>
          </box>
        ))}
      </box>

      {/* Hover detection */}
      <HoverBox />

      {/* Display click result */}
      <text>{selected !== null ? `Clicked ${names[selected]}` : "Click a color"}</text>
      <text style={{ dim: true }}>{mousePos ? `mouse: ${mousePos.x}, ${mousePos.y}` : ""}</text>
    </box>
  )
}

function HoverBox() {
  const [hovering, setHovering] = useState(false)

  return (
    <box
      border
      borderColor={hovering ? "#22c55e" : "#555"}
      onMouseOver={() => setHovering(true)}
      onMouseOut={() => setHovering(false)}
    >
      <text>{hovering ? "Mouse inside!" : "Hover me"}</text>
    </box>
  )
}

<TUI cursorHighlight cursorHighlightColor="#8888ff" cursorHighlightOpacity={0.2}>
  <box border>
    <text>Move the mouse over cells to see the highlight</text>
  </box>
</TUI>