# `PhiaUi.Components.Editor.SearchNav`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/search_nav.ex#L1)

Editor Search & Navigation Suite — 6 components for document search, outline
navigation, keyboard shortcuts, and minimap visualization.

## Components

- `regex_search_bar/1`         — search + replace bar with regex/case/word toggles
- `document_outline/1`         — nested heading list for document navigation
- `navigation_pane/1`          — tabbed sidebar with outline, bookmarks, and comments
- `keyboard_shortcuts_panel/1` — grouped shortcut reference with `<kbd>` tags
- `go_to_line/1`               — small dialog to jump to a specific line number
- `minimap/1`                  — thin vertical document minimap with viewport indicator

# `document_outline`

Renders a nested navigation list of document headings indented by level.

Each heading is a map with `:id`, `:text`, and `:level` (1-6) keys.
The `active_id` highlights the currently visible heading.

## Example

    <.document_outline
      id="outline"
      active_id="heading-2"
      headings={[
        %{id: "heading-1", text: "Introduction", level: 1},
        %{id: "heading-2", text: "Methods", level: 2}
      ]}
    />

## Attributes

* `id` (`:string`) (required)
* `headings` (`:list`) - Defaults to `[]`.
* `active_id` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `go_to_line`

Renders a small dialog with a line number input and "Go" button.

Hidden when `visible` is false.

## Example

    <.go_to_line id="goto" editor_id="my-editor" visible={@show_goto} />

## Attributes

* `id` (`:string`) (required)
* `editor_id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `keyboard_shortcuts_panel`

Renders a grouped keyboard shortcut reference panel.

Each shortcut is a map with `:key`, `:description`, and `:category` keys.
Shortcuts are grouped by category and displayed with `<kbd>` styled tags.

## Example

    <.keyboard_shortcuts_panel
      id="shortcuts"
      visible={true}
      shortcuts={[
        %{key: "Ctrl+B", description: "Bold", category: "Formatting"},
        %{key: "Ctrl+I", description: "Italic", category: "Formatting"},
        %{key: "Ctrl+F", description: "Find", category: "Navigation"}
      ]}
    />

## Attributes

* `id` (`:string`) (required)
* `shortcuts` (`:list`) - Defaults to `[]`.
* `visible` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `minimap`

Renders a thin vertical minimap bar with a viewport position indicator.

The minimap shows the relative position and size of the viewport within
the full document height.

## Example

    <.minimap
      id="minimap"
      content_height={2000}
      viewport_height={600}
      scroll_position={350}
    />

## Attributes

* `id` (`:string`) (required)
* `content_height` (`:integer`) - Defaults to `1000`.
* `viewport_height` (`:integer`) - Defaults to `500`.
* `scroll_position` (`:integer`) - Defaults to `0`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `navigation_pane`

Renders a tabbed navigation sidebar with outline, bookmarks, and comments panels.

Each bookmark is a map with `:id` and `:name` keys.
Each comment is a map with `:id`, `:text`, and `:author` keys.

## Example

    <.navigation_pane
      id="nav-pane"
      active_tab={:outline}
      headings={@doc_headings}
      bookmarks={@doc_bookmarks}
      comments={@doc_comments}
    />

## Attributes

* `id` (`:string`) (required)
* `active_tab` (`:atom`) - Defaults to `:outline`. Must be one of `:outline`, `:bookmarks`, or `:comments`.
* `headings` (`:list`) - Defaults to `[]`.
* `bookmarks` (`:list`) - Defaults to `[]`.
* `comments` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `regex_search_bar`

Renders a search + replace bar with regex, case-sensitivity, and whole-word
toggle buttons, plus prev/next navigation and replace/replace-all actions.

The match counter displays "N of M" when matches are found.

## Example

    <.regex_search_bar
      id="search"
      editor_id="my-editor"
      query={@search_query}
      match_count={@match_count}
      current_match={@current_match}
    />

## Attributes

* `id` (`:string`) (required)
* `editor_id` (`:string`) (required)
* `query` (`:string`) - Defaults to `""`.
* `replace_text` (`:string`) - Defaults to `""`.
* `match_count` (`:integer`) - Defaults to `0`.
* `current_match` (`:integer`) - Defaults to `0`.
* `use_regex` (`:boolean`) - Defaults to `false`.
* `case_sensitive` (`:boolean`) - Defaults to `false`.
* `whole_word` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*