# Custom search panels

Replace search UI while retaining canonical queries, selection and replacement.

## Integration point

The creation option `searchPanel` accepts `ComponentViewRenderer<SearchPanelProps>`. Vue uses `VueComponentViewRenderer(SearchPanel)` and retains `VueNodeViewHost` inside the existing Provider tree.

~~~ts
import { VueComponentViewRenderer } from '@quirekit/msfe-vue'
import SearchPanel from './search-panel.vue'
const options = {
  searchPanel: VueComponentViewRenderer(SearchPanel),
  // Provide markdown and extensions as in the Vue integration guide.
}
~~~

Native search shortcuts continue to open this panel. Do not build a competing whole-document index and mutate content DOM to highlight results.

## Minimal panel

Place this public QuireKit component example in `search-panel.vue` and connect it above.

~~~vue
<script setup lang="ts">
import type { SearchPanelProps } from '@quirekit/msfe-core'
import { QuireInput, QuireButton } from '@quirekit/ui/vue'
defineProps<{ view: SearchPanelProps }>()
</script>
<template>
  <div class="flex flex-wrap items-center gap-2 p-qk-surface">
    <QuireInput :model-value="view.query.search" aria-label="Find"
      @update:model-value="value => view.setQuery({ search: value ?? '' })" />
    <QuireButton :disabled="!view.valid || view.composing"
      @click="view.run('next')">Next</QuireButton>
    <QuireButton variant="ghost" @click="view.run('close')">Close</QuireButton>
  </div>
</template>
~~~

Localize labels for the application. `view.phrase(key)` can supply host CodeMirror phrases; do not hardcode one language across locales.

## Fields and actions

`query` contains `search`, `replace`, `caseSensitive`, `regexp` and `wholeWord`. Update fields with `setQuery(partial)` rather than mutating props. `valid` includes nonempty-query and regex validity. `matches` reports the count: `total` matches (at most 1,000 are counted; `limited` is true beyond that) and `current`, the one-based match the main selection covers exactly, or 0.

`run()` accepts `next`, `previous`, `all`, `replace`, `replaceAll` and `close`. Disable replacement during readonly or composition. Finding and copying remain available. Actions return booleans; obsolete handlers from an unmounted panel must not continue writing.

## Complete the panel

Add replacement input, case/word/regex toggles and navigation through the same contract. Avoid submitting while input composition is active. Let the search lifecycle restore focus after closing; global Enter handlers should not steal input events.

Verify invalid regex, no results, composition, replacement undo, readonly search, initial selection, close focus, narrow layouts and both themes. See [Rendering API](/en/api/rendering).