From 999da4b0b66edac9331003d6c3a2efbb85a0efbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=93=9D=E8=8E=93=F0=9F=AB=90?= <qwq@qwwq.org>
Date: Mon, 26 Oct 2026 04:47:15 +0700
Subject: [PATCH] feat(stage-pages,stage-ui): search settings, their rows, and
 runtime items (#3112)

---
 apps/stage-pocket/vite.config.ts              |    5 +
 apps/stage-tamagotchi/electron.vite.config.ts |    5 +
 .../connection/server-channel-qr-card.vue     |    2 +
 .../pages/settings/data/index.search.ts       |    2 +
 .../src/renderer/pages/settings/index.vue     |   25 +-
 .../pages/settings/models/index.search.ts     |    2 +
 .../modules/home-assistant.browser.test.ts    |    9 +
 .../settings/modules/home-assistant.search.ts |   35 +
 .../pages/settings/modules/home-assistant.vue |   13 +
 .../pages/settings/modules/mcp.search.ts      |   21 +
 .../renderer/pages/settings/modules/mcp.vue   |    2 +
 apps/stage-web/vite.config.ts                 |    5 +
 docs/ai/context/ui-components.md              |   27 +
 packages/i18n/src/locales/en/settings.yaml    |    4 +
 .../i18n/src/locales/zh-Hans/settings.yaml    |    4 +
 packages/provider-inference/src/types.ts      |    6 +
 .../stage-layouts/src/layouts/settings.vue    |    3 +
 packages/stage-pages/README.md                |   28 +
 .../settings-experimental-features.vue        |    3 +
 .../pages/settings/airi-card/index.search.ts  |   16 +
 .../components/downloaded-models-section.vue  |   21 +-
 .../pages/settings/data/downloaded-models.ts  |   33 +
 .../src/pages/settings/data/index.search.ts   |   15 +
 .../stage-pages/src/pages/settings/index.vue  |   23 +-
 .../src/pages/settings/models/index.search.ts |   17 +
 .../settings/modules/consciousness.search.ts  |   11 +
 .../pages/settings/modules/consciousness.vue  |    4 +
 .../modules/hearing/transcriber.search.ts     |   17 +
 .../settings/modules/hearing/transcriber.vue  |    4 +
 .../modules/hearing/wake-words.search.ts      |   16 +
 .../settings/modules/hearing/wake-words.vue   |    4 +-
 .../memory-long-term-memories.search.ts       |   25 +
 .../modules/memory-long-term-memories.vue     |    3 +
 .../memory-long-term-recipes.search.ts        |   15 +
 .../modules/memory-long-term-recipes.vue      |    3 +
 .../settings/modules/module-model-search.ts   |  147 ++
 .../pages/settings/modules/speech.search.ts   |   21 +
 .../src/pages/settings/modules/speech.vue     |   16 +
 .../pages/settings/modules/stickers.search.ts |   12 +
 .../settings/modules/tool-cards.search.ts     |   15 +
 .../src/pages/settings/modules/tool-cards.vue |    3 +
 .../pages/settings/modules/vision.search.ts   |   11 +
 .../src/pages/settings/modules/vision.vue     |    4 +
 .../providers/artistry/comfyui.search.ts      |   15 +
 .../settings/providers/artistry/comfyui.vue   |    4 +-
 .../src/pages/settings/scene/index.search.ts  |   26 +
 .../src/pages/settings/scene/index.vue        |    8 +-
 .../settings/system/experimental.search.ts    |   15 +
 .../src/settings-search-providers.ts          |   16 +
 .../src/vite/settings-search-providers.d.ts   |    7 +
 .../stage-pages/src/vite/settings-search.ts   | 1652 +++++++++++++++++
 packages/stage-shared/package.json            |    1 +
 .../stage-shared/src/settings-search/index.ts |  120 ++
 .../components/layouts/link-group.story.vue   |   47 +
 .../src/components/layouts/section.vue        |    1 +
 .../menu/radio-card-many-select.vue           |    6 +
 .../menu/voice-card-many-select.vue           |    6 +
 .../src/components/modules/stickers.vue       |    7 +-
 .../providers/provider-advanced-settings.vue  |    1 +
 .../components/scenarios/settings/index.ts    |    2 +
 .../settings/model-settings/panel.vue         |    4 +-
 .../settings/model-settings/runtime.ts        |    6 +
 .../settings/settings-search-field.story.vue  |   18 +
 .../settings/settings-search-field.vue        |   50 +
 .../settings/settings-search-results.vue      |  158 ++
 .../src/composables/use-settings-search.ts    |  443 +++++
 .../providers/providers/official/index.ts     |    5 +-
 .../stage-ui/src/stores/modules/stickers.ts   |   12 +
 packages/ui/src/components/layouts/index.ts   |    2 +
 .../components/layouts/link-group-context.ts  |   16 +
 .../components/layouts/link-group-item.vue    |  167 ++
 .../ui/src/components/layouts/link-group.vue  |  125 ++
 72 files changed, 3561 insertions(+), 36 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/data/index.search.ts
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/models/index.search.ts
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.search.ts
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/airi-card/index.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/data/downloaded-models.ts
 create mode 100644 packages/stage-pages/src/pages/settings/data/index.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/models/index.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/consciousness.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/hearing/transcriber.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/hearing/wake-words.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/module-model-search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/speech.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/stickers.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/tool-cards.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/modules/vision.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/providers/artistry/comfyui.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/scene/index.search.ts
 create mode 100644 packages/stage-pages/src/pages/settings/system/experimental.search.ts
 create mode 100644 packages/stage-pages/src/settings-search-providers.ts
 create mode 100644 packages/stage-pages/src/vite/settings-search-providers.d.ts
 create mode 100644 packages/stage-pages/src/vite/settings-search.ts
 create mode 100644 packages/stage-shared/src/settings-search/index.ts
 create mode 100644 packages/stage-ui/src/components/layouts/link-group.story.vue
 create mode 100644 packages/stage-ui/src/components/scenarios/settings/settings-search-field.story.vue
 create mode 100644 packages/stage-ui/src/components/scenarios/settings/settings-search-field.vue
 create mode 100644 packages/stage-ui/src/components/scenarios/settings/settings-search-results.vue
 create mode 100644 packages/stage-ui/src/composables/use-settings-search.ts
 create mode 100644 packages/ui/src/components/layouts/link-group-context.ts
 create mode 100644 packages/ui/src/components/layouts/link-group-item.vue
 create mode 100644 packages/ui/src/components/layouts/link-group.vue

diff --git a/apps/stage-pocket/vite.config.ts b/apps/stage-pocket/vite.config.ts
index 8aecc882a8..1f2d5c0889 100644
--- a/apps/stage-pocket/vite.config.ts
+++ b/apps/stage-pocket/vite.config.ts
@@ -23,6 +23,7 @@ import VueRouter from 'vue-router/vite'
 import { tryCatch } from '@moeru/std'
 import { localeRemap, serializeStartupFallbackLocales } from '@proj-airi/i18n'
 import { paraformerBilingualZhEn, xAsrBilingualZhEnInt8, zipformerMultilingual } from '@proj-airi/provider-inference/sherpaw-transcription/models'
+import { createSettingsSearch } from '@proj-airi/stage-pages/vite/settings-search'
 import { speakerModel } from '@proj-airi/stage-shared/speaker-model'
 import { kwsModel } from '@proj-airi/stage-ui/libs/voice/kws-model-info'
 import { Download } from '@proj-airi/unplugin-fetch/vite'
@@ -40,6 +41,7 @@ function isEnvTruthy(value: string | undefined | null): boolean {
 
 const stageUIAssetsRoot = resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src', 'assets'))
 const sharedCacheDir = resolve(join(import.meta.dirname, '..', '..', '.cache'))
+const settingsSearch = createSettingsSearch()
 
 export default defineConfig({
   optimizeDeps: {
@@ -135,6 +137,8 @@ export default defineConfig({
 
     Yaml(),
 
+    settingsSearch.plugin,
+
     VueMacros({
       plugins: {
         vue: Vue({
@@ -162,6 +166,7 @@ export default defineConfig({
         },
       ],
       exclude: ['**/components/**'],
+      extendRoute: settingsSearch.extendRoute,
     }),
 
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
diff --git a/apps/stage-tamagotchi/electron.vite.config.ts b/apps/stage-tamagotchi/electron.vite.config.ts
index 0be70b5e05..1189256fe1 100644
--- a/apps/stage-tamagotchi/electron.vite.config.ts
+++ b/apps/stage-tamagotchi/electron.vite.config.ts
@@ -15,6 +15,7 @@ import VueMacros from 'vue-macros/vite'
 import VueRouter from 'vue-router/vite'
 
 import { paraformerBilingualZhEn, xAsrBilingualZhEnInt8, zipformerMultilingual } from '@proj-airi/provider-inference/sherpaw-transcription/models'
+import { createSettingsSearch } from '@proj-airi/stage-pages/vite/settings-search'
 import { speakerModel } from '@proj-airi/stage-shared/speaker-model'
 import { kwsModel } from '@proj-airi/stage-ui/libs/voice/kws-model-info'
 import { Download } from '@proj-airi/unplugin-fetch'
@@ -24,6 +25,7 @@ import { defineConfig } from 'electron-vite'
 
 const stageUIAssetsRoot = resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src', 'assets'))
 const sharedCacheDir = resolve(join(import.meta.dirname, '..', '..', '.cache'))
+const settingsSearch = createSettingsSearch()
 const sherpawModels = [paraformerBilingualZhEn, zipformerMultilingual, xAsrBilingualZhEnInt8]
 /** Main downloads remote Sherpaw models. It must use the endpoint that the renderer plugin uses. */
 const sherpawModelEndpoint = resolveModelEndpoint()
@@ -240,6 +242,8 @@ export default defineConfig({
 
       Yaml(),
 
+      settingsSearch.plugin,
+
       VueMacros({
         plugins: {
           vue: Vue({
@@ -272,6 +276,7 @@ export default defineConfig({
           resolve(import.meta.dirname, 'src', 'renderer', 'pages'),
         ],
         exclude: ['**/components/**'],
+        extendRoute: settingsSearch.extendRoute,
       }),
 
       VitePluginVueDevTools(),
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/connection/server-channel-qr-card.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/connection/server-channel-qr-card.vue
index 75f374e2e3..e460291ba2 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/connection/server-channel-qr-card.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/connection/server-channel-qr-card.vue
@@ -98,6 +98,7 @@ watch(appliedConfig, () => {
   <Collapsible :default="false">
     <template #trigger="slotProps">
       <button
+        :aria-expanded="slotProps.visible"
         :class="[
           'w-full flex items-center justify-between gap-3 rounded-xl text-left outline-none transition-all duration-250 ease-in-out',
         ]"
@@ -168,6 +169,7 @@ watch(appliedConfig, () => {
           <Collapsible :default="false">
             <template #trigger="slotProps">
               <button
+                :aria-expanded="slotProps.visible"
                 :class="[
                   'w-full flex items-center justify-between gap-3 rounded-xl text-left outline-none transition-all duration-250 ease-in-out',
                 ]"
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.search.ts b/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.search.ts
new file mode 100644
index 0000000000..80a1e492a1
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.search.ts
@@ -0,0 +1,2 @@
+// The desktop data page shows the same downloaded models section as the shared data page.
+export { default } from '@proj-airi/stage-pages/pages/settings/data/index.search'
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue
index 5b591a3e4a..663bbf08c5 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { IconItem } from '@proj-airi/stage-ui/components'
-import { computed } from 'vue'
+import { settingsSearchProviders } from '@proj-airi/stage-pages/settings-search-providers'
+import { IconItem, SettingsSearchField, SettingsSearchResults } from '@proj-airi/stage-ui/components'
+import { useSettingsSearch } from '@proj-airi/stage-ui/composables/use-settings-search'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -19,12 +21,27 @@ const settings = computed(() => {
       to: route.path,
     }))
 })
+
+const searchQuery = ref('')
+const searchResults = useSettingsSearch(searchQuery, settingsSearchProviders)
+const searching = computed(() => searchQuery.value.trim() !== '')
 </script>
 
 <template>
   <div :class="['flex flex-col gap-4', 'font-normal']">
-    <div />
-    <div :class="['flex flex-col gap-4', 'pb-12']">
+    <!-- The search stays at the top while the list scrolls under it, as the page header does above it. -->
+    <!-- It is the first element, so it rests where it sticks and does not move when the list starts to scroll. -->
+    <div :class="['sticky top-0 z-10', 'bg-$bg-color', 'pb-2']">
+      <SettingsSearchField v-model="searchQuery" />
+    </div>
+    <!-- Results appear at once while the user types, so they skip the enter animation of the categories. -->
+    <div v-if="searching" :class="['pb-12']">
+      <p v-if="!searchResults.length" :class="['text-sm text-neutral-500 dark:text-neutral-400']">
+        {{ t('settings.search.empty', { query: searchQuery.trim() }) }}
+      </p>
+      <SettingsSearchResults v-else :results="searchResults" :query="searchQuery" />
+    </div>
+    <div v-else :class="['flex flex-col gap-4', 'pb-12']">
       <IconItem
         v-for="(setting, index) in settings"
         :key="setting.to"
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/models/index.search.ts b/apps/stage-tamagotchi/src/renderer/pages/settings/models/index.search.ts
new file mode 100644
index 0000000000..dc722e1512
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/models/index.search.ts
@@ -0,0 +1,2 @@
+// The desktop models page shows the same model picker as the shared models page.
+export { default } from '@proj-airi/stage-pages/pages/settings/models/index.search'
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.browser.test.ts b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.browser.test.ts
index a509d92608..f51fdbddd8 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.browser.test.ts
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.browser.test.ts
@@ -7,6 +7,7 @@ import { render } from 'vitest-browser-vue'
 import { page } from 'vitest/browser'
 import { isProxy } from 'vue'
 import { createI18n } from 'vue-i18n'
+import { createMemoryHistory, createRouter } from 'vue-router'
 
 import HomeAssistantSettings from './home-assistant.vue'
 
@@ -63,10 +64,18 @@ function modeControl(mode: 'allow' | 'deny') {
 async function renderPage() {
   const pinia = createPinia()
   setActivePinia(pinia)
+  // The page reads the settings search target from the route, as it does in the app.
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/settings/modules/home-assistant', component: { template: '<div />' } }],
+  })
+  await router.push('/settings/modules/home-assistant')
+  await router.isReady()
   const screen = await render(HomeAssistantSettings, {
     global: {
       plugins: [
         pinia,
+        router,
         createI18n({ legacy: false, locale: 'en', messages: { en: {} }, missingWarn: false, fallbackWarn: false }),
       ],
     },
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.search.ts b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.search.ts
new file mode 100644
index 0000000000..fb860c0710
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.search.ts
@@ -0,0 +1,35 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { useElectronEventaInvoke } from '@proj-airi/electron-vueuse'
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useHomeAssistantStore } from '@proj-airi/stage-ui/stores/modules/home-assistant'
+
+import { homeAssistantGetConfig } from '../../../../shared/eventa/home-assistant'
+import { useTamagotchiHomeAssistantStore } from '../../../stores/tools/home-assistant'
+
+const ENTITY_KIND = 'home-assistant-entity'
+
+/** The marker of a device's tile. The page and the provider share it. */
+export function homeAssistantEntitySearchKey(entityId: string) {
+  return settingsSearchItemKey(ENTITY_KIND, entityId)
+}
+
+/** The device that a search result names, or `undefined` for any other setting. */
+export function homeAssistantEntityOfSearchKey(key: unknown) {
+  const prefix = `${ENTITY_KIND}:`
+  return typeof key === 'string' && key.startsWith(prefix) ? decodeURIComponent(key.slice(prefix.length)) : undefined
+}
+
+/**
+ * Lists the devices of the instance by name.
+ * The page reads the device list only while it shows the device grid, so the provider reads it under the same condition.
+ */
+const provideEntities: SettingsSearchProvider = async () => {
+  const config = await useElectronEventaInvoke(homeAssistantGetConfig)()
+  if (useHomeAssistantStore().exposureMode === 'all' || !config.baseUrl || !config.hasToken)
+    return []
+  const entities = await useTamagotchiHomeAssistantStore().listEntities()
+  return entities.map(entity => ({ title: entity.name, key: homeAssistantEntitySearchKey(entity.entityId) }))
+}
+
+export default provideEntities
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.vue
index 91a53b1b1d..263c0261d5 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/home-assistant.vue
@@ -6,6 +6,7 @@ import { errorMessageFrom } from '@moeru/std'
 import { useElectronEventaInvoke } from '@proj-airi/electron-vueuse'
 import { HomeAssistantEntityTile } from '@proj-airi/stage-ui/components/scenarios/home-assistant'
 import { useHomeAssistantStateLabel } from '@proj-airi/stage-ui/composables/use-home-assistant-state-label'
+import { useSettingsSearchTarget } from '@proj-airi/stage-ui/composables/use-settings-search'
 import { domainLabel, summarizeDomains, summarizeEntities } from '@proj-airi/stage-ui/libs/home-assistant/presentation'
 import { useHomeAssistantStore } from '@proj-airi/stage-ui/stores/modules/home-assistant'
 import { Button, FieldCheckbox, FieldInput, GhostButton, Input, Radio, ScrollableArea, SettingsCard } from '@proj-airi/ui'
@@ -15,6 +16,7 @@ import { useI18n } from 'vue-i18n'
 
 import { homeAssistantConfigRejections, homeAssistantGetConfig, homeAssistantSetConfig } from '../../../../shared/eventa/home-assistant'
 import { useTamagotchiHomeAssistantStore } from '../../../stores/tools/home-assistant'
+import { homeAssistantEntityOfSearchKey, homeAssistantEntitySearchKey } from './home-assistant.search'
 
 const { t } = useI18n()
 /**
@@ -118,6 +120,16 @@ const visibleEntities = computed(() => {
       || entity.entityId.toLowerCase().includes(query))
 })
 
+// A search result names one device. The grid mounts only a batch of the rows, so it filters to that device first.
+const searchTarget = useSettingsSearchTarget()
+watch(() => searchTarget.value.keys, (keys) => {
+  const entityId = keys.map(homeAssistantEntityOfSearchKey).find(id => id !== undefined)
+  if (!entityId)
+    return
+  activeDomain.value = null
+  entityQuery.value = entityId
+}, { immediate: true })
+
 const allVisibleSelected = computed(() =>
   visibleEntities.value.length > 0 && visibleEntities.value.every(entity => selectedIds.value.has(entity.entityId)))
 
@@ -666,6 +678,7 @@ watch(exposureMode, async (mode) => {
               <HomeAssistantEntityTile
                 v-for="entity in mountedEntities"
                 :key="entity.entityId"
+                :data-settings-search="homeAssistantEntitySearchKey(entity.entityId)"
                 :entity="entity"
                 :selected="selectedIds.has(entity.entityId)"
                 :state-label="stateLabel(entity.domain, entity.state)"
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.search.ts b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.search.ts
new file mode 100644
index 0000000000..e518c48b67
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.search.ts
@@ -0,0 +1,21 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { useElectronEventaInvoke } from '@proj-airi/electron-vueuse'
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+
+import { electronMcpReadConfigText } from '../../../../shared/eventa'
+import { parseElectronMcpConfigText } from '../../../../shared/mcp-config'
+
+/** The marker of a saved server's row. The page and the provider share it. */
+export function mcpServerSearchKey(identifier: string) {
+  return settingsSearchItemKey('mcp-server', identifier)
+}
+
+/** Lists the saved MCP servers by name, from the config file that the page edits. */
+const provideMcpServers: SettingsSearchProvider = async () => {
+  const { text } = await useElectronEventaInvoke(electronMcpReadConfigText)()
+  return Object.keys(parseElectronMcpConfigText(text).mcpServers)
+    .map(identifier => ({ title: identifier, key: mcpServerSearchKey(identifier) }))
+}
+
+export default provideMcpServers
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.vue
index 94718d87b0..28dc212d3b 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/modules/mcp.vue
@@ -36,6 +36,7 @@ import {
   syncJsonDraftFromServers,
   validateServerForm,
 } from './mcp-config'
+import { mcpServerSearchKey } from './mcp.search'
 
 const { t } = useI18n()
 const { trackMcpServerRemoved, trackMcpConnectionTestRun } = useAnalytics()
@@ -399,6 +400,7 @@ onMounted(async () => {
       <article
         v-for="server in savedServers"
         :key="server.rowId"
+        :data-settings-search="mcpServerSearchKey(server.identifier)"
         :class="server.enabled ? CARD_PRIMARY : CARD_MUTED"
       >
         <div class="flex items-center gap-3">
diff --git a/apps/stage-web/vite.config.ts b/apps/stage-web/vite.config.ts
index 7ef8f1d0da..f4018d7f40 100644
--- a/apps/stage-web/vite.config.ts
+++ b/apps/stage-web/vite.config.ts
@@ -20,6 +20,7 @@ import VueRouter from 'vue-router/vite'
 import { tryCatch } from '@moeru/std'
 import { localeRemap, serializeStartupFallbackLocales } from '@proj-airi/i18n'
 import { paraformerBilingualZhEn, xAsrBilingualZhEnInt8, zipformerMultilingual } from '@proj-airi/provider-inference/sherpaw-transcription/models'
+import { createSettingsSearch } from '@proj-airi/stage-pages/vite/settings-search'
 import { speakerModel } from '@proj-airi/stage-shared/speaker-model'
 import { kwsModel } from '@proj-airi/stage-ui/libs/voice/kws-model-info'
 import { Download } from '@proj-airi/unplugin-fetch/vite'
@@ -31,6 +32,7 @@ import { VitePWA } from 'vite-plugin-pwa'
 
 const stageUIAssetsRoot = resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src', 'assets'))
 const sharedCacheDir = resolve(join(import.meta.dirname, '..', '..', '.cache'))
+const settingsSearch = createSettingsSearch()
 
 function hasFlagEnableMkcert(): boolean {
   if (process.argv.includes('--mkcert')) {
@@ -146,6 +148,8 @@ export default defineConfig({
 
     Yaml(),
 
+    settingsSearch.plugin,
+
     VueMacros({
       plugins: {
         vue: Vue({
@@ -166,6 +170,7 @@ export default defineConfig({
         resolve(import.meta.dirname, '..', '..', 'packages', 'stage-pages', 'src', 'pages'),
       ],
       exclude: ['**/components/**'],
+      extendRoute: settingsSearch.extendRoute,
     }),
 
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
diff --git a/docs/ai/context/ui-components.md b/docs/ai/context/ui-components.md
index 07dbd4bda7..21885ed0a7 100644
--- a/docs/ai/context/ui-components.md
+++ b/docs/ai/context/ui-components.md
@@ -73,6 +73,33 @@ Expandable/collapsible container with trigger button and vertical animation.
 **v-model**: `visible: boolean`
 **Slots**: `trigger({ visible, setVisible })`, `default({ visible, setVisible })`
 
+### LinkGroup
+
+Card that groups `LinkGroupItem` links under a small title, such as the settings search results of one category.
+It has the surface and the dot texture of the settings category cards, and its icon shows large and faded in the bottom-right corner.
+When an item has hover or focus, the icon scales up.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string?` | — | Name of the group, shown small in the top-left corner |
+| `icon` | `string?` | — | Iconify class. It shows next to the title, and large in the corner |
+
+**Slots**: `default` (the `LinkGroupItem` links)
+**Exposes**: `naturalWidth()`, the narrowest width at which no item cuts its text. A layout can use it to decide how many groups fit side by side.
+
+### LinkGroupItem
+
+One link in a `LinkGroup`: a name on the left, a short detail on the right, and an arrow.
+On hover, the theme color sweeps in from the left and the dots under the item light up.
+The name keeps its width. The detail shrinks and cuts first.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `as` | `PrimitiveProps['as']?` | `'a'` | Element or component to render, such as `RouterLink`. Other attributes, such as `to`, pass to it |
+| `detail` | `string?` | — | Short note on the right, such as where the link goes |
+
+**Slots**: `default` (the name), `detail` (replaces the `detail` prop)
+
 ### Screen
 
 Responsive screen component that calculates canvas dimensions based on breakpoints.
diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml
index 9013f1d5e5..de8bc1264a 100644
--- a/packages/i18n/src/locales/en/settings.yaml
+++ b/packages/i18n/src/locales/en/settings.yaml
@@ -2569,6 +2569,10 @@ pages:
       label: Tip!
       description: Using a square image will leverage <b>cover</b> cropping in
         portrait mode, focusing on the center of the scene.
+search:
+  placeholder: Search settings
+  empty: 'No settings match "{query}".'
+  not-shown: '"{name}" shows only in another state of this page, for example after you turn on a switch or choose another model type.'
 sections:
   section:
     general:
diff --git a/packages/i18n/src/locales/zh-Hans/settings.yaml b/packages/i18n/src/locales/zh-Hans/settings.yaml
index 7d991744c6..f91bdbf7b9 100644
--- a/packages/i18n/src/locales/zh-Hans/settings.yaml
+++ b/packages/i18n/src/locales/zh-Hans/settings.yaml
@@ -2362,6 +2362,10 @@ pages:
     tip:
       label: 提示！
       description: 使用正方形图片将在竖屏模式下应用<b>封面</b>裁剪，聚焦场景中心。
+search:
+  placeholder: 搜索设置
+  empty: 没有找到与“{query}”相关的设置。
+  not-shown: “{name}”只在这个页面的其他状态下显示，比如打开某个开关或换一种模型之后。
 sections:
   section:
     general:
diff --git a/packages/provider-inference/src/types.ts b/packages/provider-inference/src/types.ts
index e45121f7bd..19eca546e1 100644
--- a/packages/provider-inference/src/types.ts
+++ b/packages/provider-inference/src/types.ts
@@ -374,6 +374,12 @@ export interface ProviderDefinition<TConfig = Record<string, unknown>, TId exten
      */
     speech?: {
       transport: 'rest' | 'bidirectional-ws'
+      /**
+       * Whether the voice catalogue differs for each model, as on the AIRI server.
+       * Then the catalogue of one model is not the catalogue of the provider.
+       * A caller that needs every voice, such as the settings search, asks `listVoices` once for each model.
+       */
+      voicesByModel?: boolean
     }
   }
   /**
diff --git a/packages/stage-layouts/src/layouts/settings.vue b/packages/stage-layouts/src/layouts/settings.vue
index ea15a85e17..f56bcc4489 100644
--- a/packages/stage-layouts/src/layouts/settings.vue
+++ b/packages/stage-layouts/src/layouts/settings.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { isStageTamagotchi } from '@proj-airi/stage-shared'
 import { PageHeader } from '@proj-airi/stage-ui/components'
+import { useSettingsSearchReveal } from '@proj-airi/stage-ui/composables/use-settings-search'
 import { useProviderStore } from '@proj-airi/stage-ui/stores/providers/provider'
 import { useTheme } from '@proj-airi/ui'
 import { computed, onMounted, useTemplateRef, watch } from 'vue'
@@ -20,6 +21,8 @@ watch(() => route.path, () => {
   if (scrollContainer.value)
     scrollContainer.value.scrollTop = 0
 }, { flush: 'post' })
+// A search result opens its page with the setting in the query. Scroll to that row and highlight it.
+useSettingsSearchReveal(scrollContainer)
 
 const { isDark: dark } = useTheme()
 const { t } = useI18n()
diff --git a/packages/stage-pages/README.md b/packages/stage-pages/README.md
index e5570aed21..c3531c5f54 100644
--- a/packages/stage-pages/README.md
+++ b/packages/stage-pages/README.md
@@ -34,3 +34,31 @@ The active chat and vision provider routes live under `/settings/providers`. The
 - `/settings/modules/hearing/wake-words` lists the wake words of each card and the detector status. When two cards share a pronunciation, the user chooses the character that answers it. The choice stays on the device, and both cards keep their words.
 
 The character card page shows an alert while a shared pronunciation has no character. The alert links to the wake words page.
+
+## Settings search
+
+The settings home searches every settings page, the settings on it, and the runtime items that a page lists.
+
+- **Settings**: `createSettingsSearch` from `@proj-airi/stage-pages/vite/settings-search` scans each settings route at build time.
+  - It follows the components that the page imports.
+  - It writes the i18n keys of the names into `meta.searchKeys`, and marks the same elements with `data-settings-search`.
+  - A name is `t('key')` in the `label` or `title` prop of a component, a heading, a label, or a legend.
+  - A key can use a string constant of the file, a static prop, or a translation helper, such as `tn('enable')`, as its prefix.
+- **Excluded content**:
+  - Buttons, notices (`Callout`, `Alert`, `ErrorContainer`), and overlay content are not settings, so they are not in the index. A button is a component whose template root is a `<button>` or another button component.
+  - A branch that the app build never renders, such as a desktop-only row on the web, is not in the index either.
+- **Conditional settings**:
+  - When a setting shows only in some state, the scan writes its gate into `meta.searchGates`.
+  - The gate of a `v-if` or `v-show` is the control whose `v-model` or `:model-value` binds a value that the condition reads.
+    A value is a store field or state of the component. A computed value stands for the values that its getter reads.
+  - The gate of a slot that shows only in some state, such as the content of a collapsible section, is the name of the component usage.
+  - Each control carries a `value:` marker of the value that it binds. The controls of a `v-for` give the marker to their parent.
+  - If the setting is not on the page, search opens a collapsed section, or highlights the gate. Without a gate, a toast says that the setting shows in another state.
+- **Runtime items**, such as character cards or models:
+  - A page lists them with a sibling `<page>.search.ts`. Its default export is a `SettingsSearchProvider` from `@proj-airi/stage-shared/settings-search`.
+  - Each row binds the same key to `data-settings-search`. Build the key with `settingsSearchItemKey`, so a name with spaces stays one key.
+  - An item that shows only after another step names those rows as its `gates`, nearest first. For example, a model names the card of its provider.
+  - A shared list component, such as `RadioCardManySelect`, takes `searchKeyOf` for its items.
+  - A page that renders only part of a long list, such as a grid that mounts rows in batches, reads `useSettingsSearchTarget()` from stage-ui. It renders the named row first.
+- **Address**: a result opens its page with one `setting` query parameter for each key, and one `setting-gate` parameter for each gate.
+- **Checks**: a production build fails when a name cannot be read, or when a page marks runtime rows without a provider. Development only warns.
diff --git a/packages/stage-pages/src/components/settings-experimental-features.vue b/packages/stage-pages/src/components/settings-experimental-features.vue
index 57d3c71359..bb5011fb24 100644
--- a/packages/stage-pages/src/components/settings-experimental-features.vue
+++ b/packages/stage-pages/src/components/settings-experimental-features.vue
@@ -3,6 +3,8 @@ import { useFeatureFlagsStore } from '@proj-airi/stage-ui/stores/feature-flags'
 import { Button, FieldCheckbox, FieldSelect } from '@proj-airi/ui'
 import { useI18n } from 'vue-i18n'
 
+import { experimentSearchKey } from '../pages/settings/system/experimental.search'
+
 const { t } = useI18n()
 const experiments = useFeatureFlagsStore()
 const prefix = 'settings.pages.system.experimental'
@@ -30,6 +32,7 @@ const prefix = 'settings.pages.system.experimental'
     <section
       v-for="feature in experiments.features"
       :key="feature.key"
+      :data-settings-search="experimentSearchKey(feature.key)"
       :class="['flex flex-col gap-3', 'rounded-xl bg-neutral-50 p-4 dark:bg-neutral-900']"
     >
       <FieldCheckbox
diff --git a/packages/stage-pages/src/pages/settings/airi-card/index.search.ts b/packages/stage-pages/src/pages/settings/airi-card/index.search.ts
new file mode 100644
index 0000000000..1ee7c557a5
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/airi-card/index.search.ts
@@ -0,0 +1,16 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
+
+/** Lists the character cards. A result opens the page of the card. */
+const provideCards: SettingsSearchProvider = () => {
+  const cardStore = useAiriCardStore()
+  return [...cardStore.cards.entries()].map(([id, card]) => ({
+    title: card.name,
+    key: settingsSearchItemKey('card', id),
+    to: `/settings/airi-card/${id}`,
+  }))
+}
+
+export default provideCards
diff --git a/packages/stage-pages/src/pages/settings/data/components/downloaded-models-section.vue b/packages/stage-pages/src/pages/settings/data/components/downloaded-models-section.vue
index f501e579d0..2f63cd6a7a 100644
--- a/packages/stage-pages/src/pages/settings/data/components/downloaded-models-section.vue
+++ b/packages/stage-pages/src/pages/settings/data/components/downloaded-models-section.vue
@@ -1,34 +1,20 @@
 <script setup lang="ts">
 import type { DataSettingsStatusEmits } from '../status'
 
-import { sherpawModels } from '@proj-airi/provider-inference/sherpaw-transcription/models'
-import { speakerModel } from '@proj-airi/stage-shared/speaker-model'
 import { useModelAssetStatus } from '@proj-airi/stage-ui/composables/use-model-asset-status'
-import { cancelSherpawModelAssets, isSherpawModelBundled, listSherpawModelAssets, removeSherpawModelAssets } from '@proj-airi/stage-ui/libs/providers/providers/sherpaw/model-assets'
-import { kwsModel } from '@proj-airi/stage-ui/libs/voice/kws-model-info'
+import { cancelSherpawModelAssets, listSherpawModelAssets, removeSherpawModelAssets } from '@proj-airi/stage-ui/libs/providers/providers/sherpaw/model-assets'
 import { DoubleCheckButton, GhostButton } from '@proj-airi/ui'
 import { computed, onMounted, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { downloadedModelSearchKey, downloadedModelsOf } from '../downloaded-models'
 import { createDataSettingsStatusHelpers } from '../status'
 
 const emit = defineEmits<DataSettingsStatusEmits>()
 const { t } = useI18n()
 const { emitStatus, handleActionError } = createDataSettingsStatusHelpers(emit)
 const { models } = useModelAssetStatus()
-const names = new Map<string, string>(Object.values(sherpawModels).map(model => [model.id, model.name]))
-// Transcription presets show their recognizer family. The wake word and voiceprint packs have no family name users know.
-const packNameKeys = new Map<string, string>([
-  [kwsModel.id, 'settings.pages.data.sections.model-downloads.wake-word-model'],
-  [speakerModel.id, 'settings.pages.data.sections.model-downloads.voiceprint-model'],
-])
-const downloads = computed(() => models.value.flatMap((status) => {
-  const nameKey = packNameKeys.get(status.id)
-  const name = nameKey ? t(nameKey) : names.get(status.id)
-  if (!name || isSherpawModelBundled(status.id) || (status.state !== 'installed' && status.state !== 'downloading'))
-    return []
-  return [{ ...status, name }]
-}))
+const downloads = computed(() => downloadedModelsOf(models.value, t))
 const refreshing = shallowRef(false)
 const pendingId = shallowRef<string>()
 
@@ -106,6 +92,7 @@ onMounted(refresh)
       <div
         v-for="model in downloads"
         :key="model.id"
+        :data-settings-search="downloadedModelSearchKey(model.id)"
         :class="['flex flex-wrap items-center justify-between gap-3 rounded-lg bg-neutral-100/70 px-3 py-2', 'dark:bg-neutral-800/60']"
       >
         <div :class="['flex flex-col gap-1']">
diff --git a/packages/stage-pages/src/pages/settings/data/downloaded-models.ts b/packages/stage-pages/src/pages/settings/data/downloaded-models.ts
new file mode 100644
index 0000000000..4bcf25f41e
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/downloaded-models.ts
@@ -0,0 +1,33 @@
+import type { ModelAssetStatus } from '@proj-airi/stage-shared/model-assets'
+
+import { sherpawModels } from '@proj-airi/provider-inference/sherpaw-transcription/models'
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { speakerModel } from '@proj-airi/stage-shared/speaker-model'
+import { isSherpawModelBundled } from '@proj-airi/stage-ui/libs/providers/providers/sherpaw/model-assets'
+import { kwsModel } from '@proj-airi/stage-ui/libs/voice/kws-model-info'
+
+const names = new Map<string, string>(Object.values(sherpawModels).map(model => [model.id, model.name]))
+// Transcription presets show their recognizer family. The wake word and voiceprint packs have no family name users know.
+const packNameKeys = new Map<string, string>([
+  [kwsModel.id, 'settings.pages.data.sections.model-downloads.wake-word-model'],
+  [speakerModel.id, 'settings.pages.data.sections.model-downloads.voiceprint-model'],
+])
+
+/** The marker of a downloaded model's row. The section and the settings search share it. */
+export function downloadedModelSearchKey(id: string) {
+  return settingsSearchItemKey('downloaded-model', id)
+}
+
+/**
+ * The speech models that this device downloaded, or is downloading, with the names that the data page shows.
+ * A model bundled with the app is not a download, so it is not here.
+ */
+export function downloadedModelsOf(models: readonly ModelAssetStatus[], t: (key: string) => string) {
+  return models.flatMap((status) => {
+    const nameKey = packNameKeys.get(status.id)
+    const name = nameKey ? t(nameKey) : names.get(status.id)
+    if (!name || isSherpawModelBundled(status.id) || (status.state !== 'installed' && status.state !== 'downloading'))
+      return []
+    return [{ ...status, name }]
+  })
+}
diff --git a/packages/stage-pages/src/pages/settings/data/index.search.ts b/packages/stage-pages/src/pages/settings/data/index.search.ts
new file mode 100644
index 0000000000..15914e842c
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/index.search.ts
@@ -0,0 +1,15 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { useModelAssetStatus } from '@proj-airi/stage-ui/composables/use-model-asset-status'
+import { listSherpawModelAssets } from '@proj-airi/stage-ui/libs/providers/providers/sherpaw/model-assets'
+
+import { downloadedModelSearchKey, downloadedModelsOf } from './downloaded-models'
+
+/** Lists the downloaded speech models. It reads their state first, as the data page does when it opens. */
+const provideDownloadedModels: SettingsSearchProvider = async ({ t }) => {
+  await listSherpawModelAssets()
+  return downloadedModelsOf(useModelAssetStatus().models.value, t)
+    .map(model => ({ title: model.name, key: downloadedModelSearchKey(model.id) }))
+}
+
+export default provideDownloadedModels
diff --git a/packages/stage-pages/src/pages/settings/index.vue b/packages/stage-pages/src/pages/settings/index.vue
index d7fe9e1ab7..615c379afa 100644
--- a/packages/stage-pages/src/pages/settings/index.vue
+++ b/packages/stage-pages/src/pages/settings/index.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { IconItem, RippleGrid } from '@proj-airi/stage-ui/components'
+import { IconItem, RippleGrid, SettingsSearchField, SettingsSearchResults } from '@proj-airi/stage-ui/components'
 import { useRippleGridState } from '@proj-airi/stage-ui/composables/use-ripple-grid-state'
+import { useSettingsSearch } from '@proj-airi/stage-ui/composables/use-settings-search'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import { settingsSearchProviders } from '../../settings-search-providers'
+
 const router = useRouter()
 const resolveAnimation = ref<() => void>()
 const { t } = useI18n()
@@ -38,11 +41,27 @@ const settings = computed(() => {
       to: route.path,
     }))
 })
+
+const searchQuery = ref('')
+const searchResults = useSettingsSearch(searchQuery, settingsSearchProviders)
+const searching = computed(() => searchQuery.value.trim() !== '')
 </script>
 
 <template>
   <div flex="~ col gap-4" font-normal>
-    <div pb-12>
+    <!-- The search stays at the top while the list scrolls under it, as the page header does above it. -->
+    <!-- It is the first element, so it rests where it sticks and does not move when the list starts to scroll. -->
+    <div :class="['sticky top-0 z-10', 'bg-$bg-color', 'pb-2']">
+      <SettingsSearchField v-model="searchQuery" />
+    </div>
+    <!-- Results appear at once while the user types, so they skip the enter animation of the categories. -->
+    <div v-if="searching" :class="['pb-12']">
+      <p v-if="!searchResults.length" :class="['text-sm text-neutral-500 dark:text-neutral-400']">
+        {{ t('settings.search.empty', { query: searchQuery.trim() }) }}
+      </p>
+      <SettingsSearchResults v-else :results="searchResults" :query="searchQuery" />
+    </div>
+    <div v-else pb-12>
       <RippleGrid
         :items="settings"
         :get-key="item => item.to"
diff --git a/packages/stage-pages/src/pages/settings/models/index.search.ts b/packages/stage-pages/src/pages/settings/models/index.search.ts
new file mode 100644
index 0000000000..c4736e8cf5
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/models/index.search.ts
@@ -0,0 +1,17 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { MODEL_PICKER_SEARCH_KEY } from '@proj-airi/stage-ui/components/scenarios/settings/model-settings/runtime'
+import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
+
+/**
+ * Lists the display models by name. They live in the model picker dialog, so each result points to the button that opens it,
+ * as Firefox settings search points to the button of a subdialog.
+ */
+const provideDisplayModels: SettingsSearchProvider = async ({ t }) => {
+  const displayModels = useDisplayModelsStore()
+  await displayModels.loadDisplayModelsFromIndexedDB()
+  const picker = t('settings.model-select.select-model.button')
+  return displayModels.displayModels.map(model => ({ title: model.name, key: MODEL_PICKER_SEARCH_KEY, section: picker }))
+}
+
+export default provideDisplayModels
diff --git a/packages/stage-pages/src/pages/settings/modules/consciousness.search.ts b/packages/stage-pages/src/pages/settings/modules/consciousness.search.ts
new file mode 100644
index 0000000000..b4cedebec5
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/consciousness.search.ts
@@ -0,0 +1,11 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { useProviderStore } from '@proj-airi/stage-ui/stores/providers/provider'
+
+import { moduleModelItems } from './module-model-search'
+
+/** Lists the chat providers of the page and their models. */
+const provideChatModels: SettingsSearchProvider = () =>
+  moduleModelItems('consciousness', useProviderStore().moduleChatProvidersMetadata)
+
+export default provideChatModels
diff --git a/packages/stage-pages/src/pages/settings/modules/consciousness.vue b/packages/stage-pages/src/pages/settings/modules/consciousness.vue
index ca2058ec39..347d7602f7 100644
--- a/packages/stage-pages/src/pages/settings/modules/consciousness.vue
+++ b/packages/stage-pages/src/pages/settings/modules/consciousness.vue
@@ -12,6 +12,8 @@ import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
+import { moduleModelSearchKey, moduleProviderSearchKey } from './module-model-search'
+
 const providersStore = useProviderStore()
 const providerStore = useProviderConfigStore()
 const airiCardStore = useAiriCardStore()
@@ -108,6 +110,7 @@ async function updateTopPEnabled(value: boolean) {
               :id="metadata.id"
               :key="metadata.id"
               v-model="activeProvider"
+              :data-settings-search="moduleProviderSearchKey('consciousness', metadata.id)"
               name="provider"
               :value="metadata.id"
               :title="metadata.localizedName || 'Unknown'"
@@ -245,6 +248,7 @@ async function updateTopPEnabled(value: boolean) {
             v-model:search-query="modelSearchQuery"
             :model-value="activeModel"
             :items="providerModels"
+            :search-key-of="model => moduleModelSearchKey('consciousness', activeProvider, model.id)"
             :searchable="true"
             :allow-custom="true"
             :search-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.search_placeholder')"
diff --git a/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.search.ts b/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.search.ts
new file mode 100644
index 0000000000..9f79b8fbe2
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.search.ts
@@ -0,0 +1,17 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { useProviderStore } from '@proj-airi/stage-ui/stores/providers/provider'
+
+import { moduleModelItems, providerViewItems } from '../module-model-search'
+
+/** Lists the transcription providers of the page, their models, and the settings of the Hearing view that a provider adds. */
+const provideTranscription: SettingsSearchProvider = async ({ t }) => {
+  const providers = useProviderStore().moduleTranscriptionProvidersMetadata
+  const [models, views] = await Promise.all([
+    moduleModelItems('transcription', providers),
+    providerViewItems('transcription', 'hearing', providers, t),
+  ])
+  return [...models, ...views]
+}
+
+export default provideTranscription
diff --git a/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.vue b/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.vue
index 6165a14a31..2c07a6c5c8 100644
--- a/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.vue
+++ b/packages/stage-pages/src/pages/settings/modules/hearing/transcriber.vue
@@ -20,6 +20,8 @@ import { useI18n } from 'vue-i18n'
 
 import HearingPlaygroundTranscripts from '../components/hearing-playground-transcripts.vue'
 
+import { moduleModelSearchKey, moduleProviderSearchKey } from '../module-model-search'
+
 const { t } = useI18n()
 
 const hearingStore = useHearingStore()
@@ -382,6 +384,7 @@ onUnmounted(() => {
                 :id="metadata.id"
                 :key="metadata.id"
                 v-model="activeTranscriptionProvider"
+                :data-settings-search="moduleProviderSearchKey('transcription', metadata.id)"
                 name="provider"
                 :value="metadata.id"
                 :title="metadata.localizedName || 'Unknown'"
@@ -494,6 +497,7 @@ onUnmounted(() => {
                 v-model="activeTranscriptionModel"
                 v-model:search-query="transcriptionModelSearchQuery"
                 :items="sortedProviderModels"
+                :search-key-of="model => moduleModelSearchKey('transcription', activeTranscriptionProvider, model.id)"
                 :searchable="true"
                 :search-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.search_placeholder')"
                 :search-no-results-title="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_search_results')"
diff --git a/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.search.ts b/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.search.ts
new file mode 100644
index 0000000000..6cdc0abeb6
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.search.ts
@@ -0,0 +1,16 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
+
+/** The marker of a wake word's block. A word is unique for each card. */
+export function wakeWordSearchKey(cardId: string, text: string) {
+  return settingsSearchItemKey('wake-word', cardId, text)
+}
+
+/** Lists the wake words of every card, with the card that answers each one, as the page groups them. */
+const provideWakeWords: SettingsSearchProvider = () =>
+  [...useAiriCardStore().cards].flatMap(([id, card]) =>
+    (card.extensions.airi.wakeWords ?? []).map(word => ({ title: word.text, key: wakeWordSearchKey(id, word.text), section: card.name })))
+
+export default provideWakeWords
diff --git a/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.vue b/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.vue
index b13def2ad1..551134d302 100644
--- a/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.vue
+++ b/packages/stage-pages/src/pages/settings/modules/hearing/wake-words.vue
@@ -12,6 +12,8 @@ import { useI18n } from 'vue-i18n'
 
 import WakeWordConflicts from '../components/wake-word-conflicts.vue'
 
+import { wakeWordSearchKey } from './wake-words.search'
+
 /**
  * How one card pronunciation behaves on this device.
  *
@@ -93,7 +95,7 @@ const stateClasses: Record<PronunciationState, string[]> = {
         <p v-if="character.words.length === 0" :class="['text-sm text-neutral-500 dark:text-neutral-400']">
           {{ t('settings.pages.modules.hearing.wake-words.empty') }}
         </p>
-        <div v-for="word in character.words" :key="word.text" :class="['flex flex-col gap-2']">
+        <div v-for="word in character.words" :key="word.text" :data-settings-search="wakeWordSearchKey(character.id, word.text)" :class="['flex flex-col gap-2']">
           <h3 :class="['font-medium text-neutral-800 dark:text-neutral-100']">
             {{ word.text }}
           </h3>
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.search.ts b/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.search.ts
new file mode 100644
index 0000000000..a78e163d0a
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.search.ts
@@ -0,0 +1,25 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+import type { MemoryEntry } from '@proj-airi/stage-ui/stores/memory'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useMemoryStore } from '@proj-airi/stage-ui/stores/memory'
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
+
+/** The marker of a memory's row. A name is unique for each card, and general memories have no card. */
+export function memorySearchKey(entry: MemoryEntry) {
+  return settingsSearchItemKey('memory', entry.persona ?? '', entry.name)
+}
+
+/** Lists the memories by name, with the card that keeps each one, as the page groups them. */
+const provideMemories: SettingsSearchProvider = ({ t }) => {
+  const cards = useAiriCardStore().cards
+  return useMemoryStore().entries.map(entry => ({
+    title: entry.name,
+    key: memorySearchKey(entry),
+    section: entry.persona
+      ? cards.get(entry.persona)?.name || entry.persona
+      : t('settings.pages.modules.memory-long-term.memories.general'),
+  }))
+}
+
+export default provideMemories
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.vue b/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.vue
index 2a150078e3..c6a813383a 100644
--- a/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.vue
+++ b/packages/stage-pages/src/pages/settings/modules/memory-long-term-memories.vue
@@ -8,6 +8,8 @@ import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { memorySearchKey } from './memory-long-term-memories.search'
+
 const { t } = useI18n()
 const memory = useMemoryStore()
 const { cards } = storeToRefs(useAiriCardStore())
@@ -54,6 +56,7 @@ function remove(entry: MemoryEntry) {
         <li
           v-for="entry in group.entries"
           :key="entry.name"
+          :data-settings-search="memorySearchKey(entry)"
           :class="['flex items-start', 'gap-3', 'rounded-lg', 'bg-white dark:bg-neutral-900/60', 'px-3 py-2.5']"
         >
           <div :class="['min-w-0 flex-1', 'flex flex-col', 'gap-0.5']">
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.search.ts b/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.search.ts
new file mode 100644
index 0000000000..0541e614e1
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.search.ts
@@ -0,0 +1,15 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useRecipesStore } from '@proj-airi/stage-ui/stores/recipes'
+
+/** The marker of a recipe's row. The page and the provider share it. */
+export function recipeSearchKey(id: string) {
+  return settingsSearchItemKey('recipe', id)
+}
+
+/** Lists the recipes by name. */
+const provideRecipes: SettingsSearchProvider = () =>
+  useRecipesStore().recipes.map(recipe => ({ title: recipe.name, key: recipeSearchKey(recipe.id) }))
+
+export default provideRecipes
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.vue b/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.vue
index 91c6df3819..f0826e724b 100644
--- a/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.vue
+++ b/packages/stage-pages/src/pages/settings/modules/memory-long-term-recipes.vue
@@ -12,6 +12,8 @@ import { useI18n } from 'vue-i18n'
 
 import RecipeEditor from './components/recipe-editor.vue'
 
+import { recipeSearchKey } from './memory-long-term-recipes.search'
+
 /** Recipe types that the owner can write. */
 type RecipeType = 'instructions' | 'decision'
 /** Conversation recipes work inside a reply. Auto-run recipes are still in development, so their tab shows a banner. */
@@ -173,6 +175,7 @@ function removeRecipe(id: string) {
         <li
           v-for="recipe in recipes"
           :key="recipe.id"
+          :data-settings-search="recipeSearchKey(recipe.id)"
           :class="[
             'flex flex-col', 'gap-3',
             'rounded-xl', 'px-4 py-3',
diff --git a/packages/stage-pages/src/pages/settings/modules/module-model-search.ts b/packages/stage-pages/src/pages/settings/modules/module-model-search.ts
new file mode 100644
index 0000000000..1bc73d21ef
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/module-model-search.ts
@@ -0,0 +1,147 @@
+import type { SettingsSearchContext, SettingsSearchItem, SettingsSearchViewEntry } from '@proj-airi/stage-shared/settings-search'
+import type { ProviderMetadata } from '@proj-airi/stage-ui/libs/providers/metadata'
+import type { ProviderViews } from '@proj-airi/stage-ui/libs/providers/views'
+import type { VoiceInfo } from '@proj-airi/stage-ui/stores/providers/provider'
+
+import { SETTINGS_SEARCH_VIEW_EXPORT, settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
+import { useProviderStore } from '@proj-airi/stage-ui/stores/providers/provider'
+
+/** A module page that picks a provider, then a model of it. */
+export type ModelSearchModule = 'consciousness' | 'vision' | 'transcription' | 'speech'
+
+/** The marker of a provider card on a module page. */
+export function moduleProviderSearchKey(module: ModelSearchModule, providerId: string) {
+  return settingsSearchItemKey('module-provider', module, providerId)
+}
+
+/** The marker of a model in the model list of a module page. */
+export function moduleModelSearchKey(module: ModelSearchModule, providerId: string, modelId: string) {
+  return settingsSearchItemKey('module-model', module, providerId, modelId)
+}
+
+/** The marker of a voice in the voice list of the speech page. */
+export function speechVoiceSearchKey(providerId: string, voiceId: string) {
+  return settingsSearchItemKey('speech-voice', providerId, voiceId)
+}
+
+/** Names the provider whose card shows a provider. Most providers have a card of their own. */
+export type ProviderCardOf = (providerId: string) => string
+
+const ownCard: ProviderCardOf = providerId => providerId
+
+/** Loads the model catalog of each provider that lists its models, as its page does when it opens. A loaded catalog is reused. */
+async function loadModelCatalogs(providers: readonly ProviderMetadata[]) {
+  const providerStore = useProviderStore()
+  await Promise.all(providers.map(async (provider) => {
+    if (providerStore.supportsModelListing(provider.id) && providerStore.providerRuntimeState[provider.id]?.modelStatus !== 'ready')
+      await providerStore.fetchModelsForProvider(provider.id).catch(() => undefined)
+  }))
+}
+
+/**
+ * Lists the providers that a module page offers, and the models of each one.
+ *
+ * The model list shows only the models of the picked provider. So the provider card is the gate of each model:
+ * when the provider is not picked, search highlights its card, which is the step to take first.
+ * A provider without a card of its own, such as the streaming variant of the official speech provider,
+ * shows its models under the card that `cardOf` names.
+ */
+export async function moduleModelItems(module: ModelSearchModule, providers: readonly ProviderMetadata[], cardOf: ProviderCardOf = ownCard): Promise<SettingsSearchItem[]> {
+  const providerStore = useProviderStore()
+  await loadModelCatalogs(providers)
+
+  return providers.flatMap((provider) => {
+    const card = providers.find(candidate => candidate.id === cardOf(provider.id)) ?? provider
+    const cardKey = moduleProviderSearchKey(module, card.id)
+    return [
+      ...(card.id === provider.id ? [{ title: provider.localizedName, key: cardKey }] : []),
+      ...providerStore.getModelsForProvider(provider.id).map(model => ({
+        title: model.name || model.id,
+        key: moduleModelSearchKey(module, provider.id, model.id),
+        gates: [cardKey],
+        section: card.localizedName,
+      })),
+    ]
+  })
+}
+
+/**
+ * Lists the voices of the speech providers.
+ * A voice shows only under the models that offer it, and a model shows only under its picked provider.
+ * So the gates of a voice are the cards of those models, then the card of its provider.
+ *
+ * A provider that declares `voicesByModel` has a voice catalog for each model. Its voices come from the catalog of each model,
+ * and each voice names the models that list it. Another provider has one catalog, and a voice can name its models itself.
+ * The speech page keeps the catalog of one model, so a provider with a catalog for each model reuses it only for that model.
+ */
+export async function speechVoiceItems(providers: readonly ProviderMetadata[], cardOf: ProviderCardOf = ownCard): Promise<SettingsSearchItem[]> {
+  const providerStore = useProviderStore()
+  const speechStore = useSpeechStore()
+  await loadModelCatalogs(providers)
+
+  const catalogOf = async (providerId: string, model: string | undefined, byModel: boolean): Promise<VoiceInfo[]> => {
+    const cached = speechStore.availableVoices[providerId]
+    if (cached && (!byModel || speechStore.voiceCatalogIdentities[providerId]?.model === model))
+      return cached
+    return await providerStore.listProviderVoices(providerId, model).catch(() => undefined) ?? []
+  }
+
+  const items = await Promise.all(providers.map(async (provider) => {
+    const card = providers.find(candidate => candidate.id === cardOf(provider.id)) ?? provider
+    const byModel = providerStore.findProviderDefinition(provider.id)?.capabilities?.speech?.voicesByModel === true
+    const models = byModel ? providerStore.getModelsForProvider(provider.id).map(model => model.id) : []
+    const catalogs = models.length
+      ? await Promise.all(models.map(async model => ({ model, voices: await catalogOf(provider.id, model, true) })))
+      : [{ model: undefined, voices: await catalogOf(provider.id, undefined, byModel) }]
+
+    // Each voice once, with the models whose catalog lists it.
+    const voices = new Map<string, { voice: VoiceInfo, models: string[] }>()
+    for (const catalog of catalogs) {
+      for (const voice of catalog.voices) {
+        const entry = voices.get(voice.id) ?? { voice, models: [] }
+        if (catalog.model)
+          entry.models.push(catalog.model)
+        voices.set(voice.id, entry)
+      }
+    }
+    return [...voices.values()].map(({ voice, models: listedBy }) => ({
+      title: voice.name || voice.id,
+      key: speechVoiceSearchKey(provider.id, voice.id),
+      gates: [
+        ...(listedBy.length ? listedBy : voice.compatibleModels ?? []).map(model => moduleModelSearchKey('speech', provider.id, model)),
+        moduleProviderSearchKey('speech', card.id),
+      ],
+      section: card.localizedName,
+    }))
+  }))
+  return items.flat()
+}
+
+/**
+ * Lists the settings of the views that the providers add to a module page, such as the Hearing controls of a transcription provider.
+ *
+ * The build-time scan gives each view the list of its settings. The page shows only the view of the picked provider,
+ * so the provider card is the last gate of each setting.
+ */
+export async function providerViewItems(
+  module: ModelSearchModule,
+  view: keyof ProviderViews,
+  providers: readonly ProviderMetadata[],
+  t: SettingsSearchContext['t'],
+): Promise<SettingsSearchItem[]> {
+  const providerStore = useProviderStore()
+  const items = await Promise.all(providers.map(async (provider) => {
+    const load = providerStore.findProviderDefinition(provider.id)?.views?.[view]
+    if (!load)
+      return []
+    const entries: unknown = Reflect.get(await load(), SETTINGS_SEARCH_VIEW_EXPORT)
+    return (Array.isArray(entries) ? entries as SettingsSearchViewEntry[] : []).map(entry => ({
+      title: t(entry.key),
+      key: entry.key,
+      gates: [...entry.gates, moduleProviderSearchKey(module, provider.id)],
+      section: provider.localizedName,
+    }))
+  }))
+  return items.flat()
+}
diff --git a/packages/stage-pages/src/pages/settings/modules/speech.search.ts b/packages/stage-pages/src/pages/settings/modules/speech.search.ts
new file mode 100644
index 0000000000..5a36dfe11f
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/speech.search.ts
@@ -0,0 +1,21 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { OFFICIAL_SPEECH_PROVIDER_ID, OFFICIAL_SPEECH_STREAMING_PROVIDER_ID } from '@proj-airi/stage-ui/libs/providers/providers/official'
+import { useProviderStore } from '@proj-airi/stage-ui/stores/providers/provider'
+
+import { moduleModelItems, speechVoiceItems } from './module-model-search'
+
+/** The official card also lists the models and voices of the streaming provider, which has no card of its own. */
+function cardOf(providerId: string) {
+  return providerId === OFFICIAL_SPEECH_STREAMING_PROVIDER_ID ? OFFICIAL_SPEECH_PROVIDER_ID : providerId
+}
+
+/** Lists the speech providers of the page, with their models and voices. The page offers the same providers as cards. */
+const provideSpeechModels: SettingsSearchProvider = async () => {
+  const providers = useProviderStore().moduleSpeechProvidersMetadata.filter(provider => provider.id !== 'speech-noop')
+  // The voices of a provider with a catalog for each model need its model list, so the models load first.
+  const models = await moduleModelItems('speech', providers, cardOf)
+  return [...models, ...await speechVoiceItems(providers, cardOf)]
+}
+
+export default provideSpeechModels
diff --git a/packages/stage-pages/src/pages/settings/modules/speech.vue b/packages/stage-pages/src/pages/settings/modules/speech.vue
index d3d0c9e614..846ebb8a6b 100644
--- a/packages/stage-pages/src/pages/settings/modules/speech.vue
+++ b/packages/stage-pages/src/pages/settings/modules/speech.vue
@@ -31,6 +31,8 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
+import { moduleModelSearchKey, moduleProviderSearchKey, speechVoiceSearchKey } from './module-model-search'
+
 const { t } = useI18n()
 const providersStore = useProviderStore()
 const providerStore = useProviderConfigStore()
@@ -144,6 +146,17 @@ const displayedProviderModels = computed(() => {
   ]
 })
 
+/**
+ * The search marker of a model option. The official card lists the models of the regular and the streaming provider,
+ * so each option names the provider that owns it, not the active one.
+ */
+function speechModelSearchKey(optionId: string) {
+  const streamingModelId = modelIdFromStreamingOptionId(optionId)
+  if (streamingModelId != null)
+    return moduleModelSearchKey('speech', OFFICIAL_SPEECH_STREAMING_PROVIDER_ID, streamingModelId)
+  return moduleModelSearchKey('speech', isOfficialSpeechSourceSelected.value ? OFFICIAL_SPEECH_PROVIDER_ID : activeSpeechProvider.value, optionId)
+}
+
 const displayedSpeechModel = computed({
   get: () => activeSpeechProvider.value === OFFICIAL_SPEECH_STREAMING_PROVIDER_ID && activeSpeechModel.value
     ? streamingModelOptionId(activeSpeechModel.value)
@@ -621,6 +634,7 @@ async function handleDeleteProvider(providerId: string) {
               :id="source.id"
               :key="source.id"
               v-model="displayedSpeechSource"
+              :data-settings-search="moduleProviderSearchKey('speech', source.providerId)"
               name="speech-provider"
               :value="source.id"
               :title="source.title"
@@ -747,6 +761,7 @@ async function handleDeleteProvider(providerId: string) {
                 v-model="displayedSpeechModel"
                 v-model:search-query="modelSearchQuery"
                 :items="displayedProviderModels"
+                :search-key-of="model => speechModelSearchKey(model.id)"
                 :searchable="true"
                 :search-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.search_placeholder')"
                 :search-no-results-title="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_search_results')"
@@ -811,6 +826,7 @@ async function handleDeleteProvider(providerId: string) {
               v-model:search-query="voiceSearchQuery"
               v-model:voice-id="displayedSpeechVoiceId"
               :voices="displayedVoiceOptions"
+              :search-key-of="voice => speechVoiceSearchKey(activeSpeechProvider, voice.id)"
               :searchable="true"
               :search-placeholder="t('settings.pages.modules.speech.sections.section.provider-voice-selection.search_voices_placeholder')"
               :search-no-results-title="t('settings.pages.modules.speech.sections.section.provider-voice-selection.no_voices')"
diff --git a/packages/stage-pages/src/pages/settings/modules/stickers.search.ts b/packages/stage-pages/src/pages/settings/modules/stickers.search.ts
new file mode 100644
index 0000000000..f2cfc638b6
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/stickers.search.ts
@@ -0,0 +1,12 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { stickerDisplayName, stickerSearchKey, useStickersStore } from '@proj-airi/stage-ui/stores/modules/stickers'
+
+/** Lists the stickers by the names that the page shows. The custom ones load from IndexedDB first. */
+const provideStickers: SettingsSearchProvider = async ({ t }) => {
+  const stickers = useStickersStore()
+  await stickers.load()
+  return stickers.entries.map(entry => ({ title: stickerDisplayName(entry, t), key: stickerSearchKey(entry.id) }))
+}
+
+export default provideStickers
diff --git a/packages/stage-pages/src/pages/settings/modules/tool-cards.search.ts b/packages/stage-pages/src/pages/settings/modules/tool-cards.search.ts
new file mode 100644
index 0000000000..751203f34b
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/tool-cards.search.ts
@@ -0,0 +1,15 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useToolCardsStore } from '@proj-airi/stage-ui/stores/tool-cards'
+
+/** The marker of a card's row. The page and the provider share it. */
+export function toolCardSearchKey(key: string) {
+  return settingsSearchItemKey('tool-card', key)
+}
+
+/** Lists the saved tool cards by the tool that each one shows. */
+const provideToolCards: SettingsSearchProvider = () =>
+  useToolCardsStore().cards.map(card => ({ title: card.key, key: toolCardSearchKey(card.key) }))
+
+export default provideToolCards
diff --git a/packages/stage-pages/src/pages/settings/modules/tool-cards.vue b/packages/stage-pages/src/pages/settings/modules/tool-cards.vue
index ef3da38030..11ff22ff4d 100644
--- a/packages/stage-pages/src/pages/settings/modules/tool-cards.vue
+++ b/packages/stage-pages/src/pages/settings/modules/tool-cards.vue
@@ -10,6 +10,8 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { toolCardSearchKey } from './tool-cards.search'
+
 const { t, locale } = useI18n()
 const toolCards = useToolCardsStore()
 const { enabled, replyCardsEnabled, cards } = storeToRefs(toolCards)
@@ -88,6 +90,7 @@ function toggleTemplate(key: string) {
         </p>
         <div
           v-else
+          :data-settings-search="toolCardSearchKey(row.card.key)"
           :class="[
             'grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_minmax(0,360px)]',
             'gap-4',
diff --git a/packages/stage-pages/src/pages/settings/modules/vision.search.ts b/packages/stage-pages/src/pages/settings/modules/vision.search.ts
new file mode 100644
index 0000000000..02e8cd5624
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/modules/vision.search.ts
@@ -0,0 +1,11 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { useProviderStore } from '@proj-airi/stage-ui/stores/providers/provider'
+
+import { moduleModelItems } from './module-model-search'
+
+/** Lists the vision providers of the page and their models. */
+const provideVisionModels: SettingsSearchProvider = () =>
+  moduleModelItems('vision', useProviderStore().moduleVisionProvidersMetadata)
+
+export default provideVisionModels
diff --git a/packages/stage-pages/src/pages/settings/modules/vision.vue b/packages/stage-pages/src/pages/settings/modules/vision.vue
index 97e631d02f..ad280a56db 100644
--- a/packages/stage-pages/src/pages/settings/modules/vision.vue
+++ b/packages/stage-pages/src/pages/settings/modules/vision.vue
@@ -11,6 +11,8 @@ import { computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
+import { moduleModelSearchKey, moduleProviderSearchKey } from './module-model-search'
+
 const providersStore = useProviderStore()
 const providerStore = useProviderConfigStore()
 const airiCardStore = useAiriCardStore()
@@ -136,6 +138,7 @@ function formatRelativeTime(timestamp: number | null) {
               v-for="metadata in moduleVisionProvidersMetadata"
               :id="metadata.id"
               :key="metadata.id"
+              :data-settings-search="moduleProviderSearchKey('vision', metadata.id)"
               :model-value="activeProvider"
               name="provider"
               :value="metadata.id"
@@ -289,6 +292,7 @@ function formatRelativeTime(timestamp: number | null) {
             v-model="activeModel"
             v-model:search-query="modelSearchQuery"
             :items="providerModels.sort((a, b) => a.id === activeModel ? -1 : b.id === activeModel ? 1 : 0)"
+            :search-key-of="model => moduleModelSearchKey('vision', activeProvider, model.id)"
             :searchable="true"
             :search-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.search_placeholder')"
             :search-no-results-title="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_search_results')"
diff --git a/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.search.ts b/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.search.ts
new file mode 100644
index 0000000000..18d85ce872
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.search.ts
@@ -0,0 +1,15 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useArtistryStore } from '@proj-airi/stage-ui/stores/modules/artistry'
+
+/** The marker of a saved workflow's row. The page and the provider share it. */
+export function comfyuiWorkflowSearchKey(id: string) {
+  return settingsSearchItemKey('comfyui-workflow', id)
+}
+
+/** Lists the saved ComfyUI workflows by name. */
+const provideWorkflows: SettingsSearchProvider = () =>
+  useArtistryStore().comfyuiSavedWorkflows.map(workflow => ({ title: workflow.name, key: comfyuiWorkflowSearchKey(workflow.id) }))
+
+export default provideWorkflows
diff --git a/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.vue b/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.vue
index efb748f7fc..773d24bef1 100644
--- a/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.vue
+++ b/packages/stage-pages/src/pages/settings/providers/artistry/comfyui.vue
@@ -11,6 +11,8 @@ import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { comfyuiWorkflowSearchKey } from './comfyui.search'
+
 const artistryStore = useArtistryStore()
 const { t } = useI18n()
 
@@ -362,7 +364,7 @@ function copyToClipboard(text: string) {
         {{ t('settings.pages.providers.provider.comfyui.settings.workflows.empty') }}
       </div>
 
-      <div v-for="wf in comfyuiSavedWorkflows" :key="wf.id" class="flex flex-col gap-2 border border-neutral-200 rounded-lg p-3 dark:border-neutral-700">
+      <div v-for="wf in comfyuiSavedWorkflows" :key="wf.id" :data-settings-search="comfyuiWorkflowSearchKey(wf.id)" class="flex flex-col gap-2 border border-neutral-200 rounded-lg p-3 dark:border-neutral-700">
         <div class="flex items-center gap-3">
           <input
             type="radio"
diff --git a/packages/stage-pages/src/pages/settings/scene/index.search.ts b/packages/stage-pages/src/pages/settings/scene/index.search.ts
new file mode 100644
index 0000000000..aed5c12fff
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/scene/index.search.ts
@@ -0,0 +1,26 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useBackgroundStore } from '@proj-airi/stage-ui/stores'
+import { until } from '@vueuse/core'
+
+/** The marker of a background's tile. The page and the provider share it. */
+export function sceneBackgroundSearchKey(id: string) {
+  return settingsSearchItemKey('scene-background', id)
+}
+
+/** The gallery shows the scene backgrounds and the built-in ones, not journal images or selfies. */
+export function isSceneBackground(entry: { type: string }) {
+  return entry.type === 'scene' || entry.type === 'builtin'
+}
+
+/** Lists the backgrounds of the scene gallery by title, after the store reads them from IndexedDB. */
+const provideBackgrounds: SettingsSearchProvider = async () => {
+  const backgrounds = useBackgroundStore()
+  await until(() => backgrounds.loading).toBe(false)
+  return backgrounds.availableBackgrounds
+    .filter(isSceneBackground)
+    .map(background => ({ title: background.title, key: sceneBackgroundSearchKey(background.id) }))
+}
+
+export default provideBackgrounds
diff --git a/packages/stage-pages/src/pages/settings/scene/index.vue b/packages/stage-pages/src/pages/settings/scene/index.vue
index 38f994e40f..ea2e2490c9 100644
--- a/packages/stage-pages/src/pages/settings/scene/index.vue
+++ b/packages/stage-pages/src/pages/settings/scene/index.vue
@@ -6,6 +6,8 @@ import { Button, Callout } from '@proj-airi/ui'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { isSceneBackground, sceneBackgroundSearchKey } from './index.search'
+
 const { t } = useI18n()
 const { trackSceneBackgroundSet } = useAnalytics()
 const backgroundStore = useBackgroundStore()
@@ -13,10 +15,7 @@ const cardStore = useAiriCardStore()
 
 const fileInputRef = ref<HTMLInputElement>()
 
-const sceneEntries = computed(() => {
-  return backgroundStore.availableBackgrounds
-    .filter(e => e.type === 'scene' || e.type === 'builtin')
-})
+const sceneEntries = computed(() => backgroundStore.availableBackgrounds.filter(isSceneBackground))
 
 const activeBackgroundId = computed({
   get: () => cardStore.activeCard?.extensions?.airi?.modules?.activeBackgroundId || 'none',
@@ -125,6 +124,7 @@ function clearDefault() {
           <div
             v-for="bg in sceneEntries"
             :key="bg.id"
+            :data-settings-search="sceneBackgroundSearchKey(bg.id)"
             :class="[
               'relative aspect-square overflow-hidden rounded-xl border-2 group transition-all',
               bg.id === activeBackgroundId ? 'border-primary shadow-lg' : 'border-transparent bg-neutral-100 dark:bg-neutral-900',
diff --git a/packages/stage-pages/src/pages/settings/system/experimental.search.ts b/packages/stage-pages/src/pages/settings/system/experimental.search.ts
new file mode 100644
index 0000000000..93fb8e4e73
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/system/experimental.search.ts
@@ -0,0 +1,15 @@
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
+import { useFeatureFlagsStore } from '@proj-airi/stage-ui/stores/feature-flags'
+
+/** The marker of an experiment's row. The page and the provider share it. */
+export function experimentSearchKey(key: string) {
+  return settingsSearchItemKey('experiment', key)
+}
+
+/** Lists the experiments that the page offers, by their titles. */
+const provideExperiments: SettingsSearchProvider = ({ t }) =>
+  useFeatureFlagsStore().features.map(feature => ({ title: t(feature.titleKey), key: experimentSearchKey(feature.key) }))
+
+export default provideExperiments
diff --git a/packages/stage-pages/src/settings-search-providers.ts b/packages/stage-pages/src/settings-search-providers.ts
new file mode 100644
index 0000000000..27df052c36
--- /dev/null
+++ b/packages/stage-pages/src/settings-search-providers.ts
@@ -0,0 +1,16 @@
+/// <reference path="./vite/settings-search-providers.d.ts" />
+
+import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+import providers from 'virtual:settings-search-providers'
+
+/**
+ * The loaders of the runtime item providers, by settings route path.
+ *
+ * Use when:
+ * - A settings home passes the providers to `useSettingsSearch`.
+ *
+ * Expects:
+ * - The app build uses `createSettingsSearch` from `@proj-airi/stage-pages/vite/settings-search`, which generates this table.
+ */
+export const settingsSearchProviders: Readonly<Record<string, () => Promise<SettingsSearchProvider>>> = providers
diff --git a/packages/stage-pages/src/vite/settings-search-providers.d.ts b/packages/stage-pages/src/vite/settings-search-providers.d.ts
new file mode 100644
index 0000000000..ae64ed1fa7
--- /dev/null
+++ b/packages/stage-pages/src/vite/settings-search-providers.d.ts
@@ -0,0 +1,7 @@
+declare module 'virtual:settings-search-providers' {
+  import type { SettingsSearchProvider } from '@proj-airi/stage-shared/settings-search'
+
+  /** The runtime item provider of each settings route, by route path. `@proj-airi/stage-pages/vite/settings-search` generates it. */
+  const providers: Readonly<Record<string, () => Promise<SettingsSearchProvider>>>
+  export default providers
+}
diff --git a/packages/stage-pages/src/vite/settings-search.ts b/packages/stage-pages/src/vite/settings-search.ts
new file mode 100644
index 0000000000..e26235ffd7
--- /dev/null
+++ b/packages/stage-pages/src/vite/settings-search.ts
@@ -0,0 +1,1652 @@
+import type { Plugin, ViteDevServer } from 'vite'
+import type { SFCDescriptor, SFCTemplateBlock } from 'vue/compiler-sfc'
+
+import { createHash } from 'node:crypto'
+import { access, readFile } from 'node:fs/promises'
+
+import { SETTINGS_SEARCH_ATTRIBUTE, SETTINGS_SEARCH_VIEW_EXPORT } from '@proj-airi/stage-shared/settings-search'
+import { babelParse, MagicString, parse } from 'vue/compiler-sfc'
+
+type TemplateRoot = NonNullable<SFCTemplateBlock['ast']>
+type TemplateChild = TemplateRoot['children'][number]
+type TemplateElement = Extract<TemplateChild, { tag: string }>
+type ScriptProgram = ReturnType<typeof babelParse>['program']
+type Statement = ScriptProgram['body'][number]
+type Expression = Extract<Statement, { type: 'ExpressionStatement' }>['expression']
+type ObjectMethod = Extract<Extract<Expression, { type: 'ObjectExpression' }>['properties'][number], { type: 'ObjectMethod' }>
+type Getter = Extract<Expression, { type: 'ArrowFunctionExpression' | 'FunctionExpression' }> | ObjectMethod
+
+/** The fields of a route node that the scan reads and writes. `vue-router/vite` passes an `EditableTreeNode`. */
+export interface SettingsSearchRouteNode {
+  readonly fullPath: string
+  readonly component: string | undefined
+  readonly meta: Readonly<Record<string, unknown>>
+  addToMeta: (meta: Record<string, unknown>) => void
+}
+
+/** A setting name that the scan cannot read, so search cannot find it. */
+interface UnreadableName {
+  file: string
+  line: number
+  expression: string
+}
+
+interface ImportBinding {
+  source: string
+  imported: string
+}
+
+/**
+ * A runtime condition around a setting: a `v-if`, `v-else`, or `v-show` that the build cannot decide, or a slot of a component
+ * that shows its content only in some state, such as a collapsed section.
+ *
+ * `gates` lists the markers of the rows that control the condition, best first:
+ * - the controls whose `v-model` binds a value that the condition reads;
+ * - for a slot, the name of the component usage, such as the title of a section.
+ */
+interface ScanCondition {
+  gates: string[]
+}
+
+/**
+ * A setting or a control that a component renders.
+ *
+ * `conditions` lists the runtime conditions around it, outermost first. It shows only when all of them hold.
+ */
+interface ScanEntry {
+  key: string
+  conditions: ScanCondition[]
+}
+
+/** What a component adds to the page that renders it. */
+interface ComponentScan {
+  /** The settings that the component renders on the page, in document order. */
+  entries: ScanEntry[]
+  /** The controls that the component renders on the page. The key is the marker of the value that the control binds. */
+  controls: ScanEntry[]
+  /** Whether the component marks rows of runtime items itself, with a bound `:data-settings-search`. */
+  marksItems: boolean
+  /**
+   * The runtime conditions around each slot, by slot name, such as the `v-if="visible"` of a collapsible section around its default slot.
+   * Content passed to a slot shows only when they hold.
+   */
+  slotConditions: ReadonlyMap<string, ScanCondition[]>
+  /** Whether every slot of the component renders inside an overlay or a notice, so content passed to it is not on the page. */
+  slotsHidden: boolean
+}
+
+/**
+ * How a top-level name of a component gets its value. Two names hold the same value when their sources are the same.
+ *
+ * - `local`: state that the component creates, such as a ref or a computed value. A computed value keeps its getter:
+ *   a condition on it depends on every value that the getter reads, and a control bound to it sets the values that the getter returns.
+ * - `constant`: a value that never changes, so no control sets it.
+ * - `outside`: props and models, which the parent passes in. The scan does not follow them.
+ * - `import`: a value that a module exports, the same in every component.
+ * - `call`: the result of a call, such as a store, or one field of it. A store is the same in every component.
+ */
+type SourceBinding
+  = | { kind: 'local', getter?: Getter }
+    | { kind: 'constant' }
+    | { kind: 'outside' }
+    | { kind: 'import', binding: ImportBinding }
+    | { kind: 'call', callee: ImportBinding | undefined, field?: string }
+
+/**
+ * The value that a name holds. `id` is the same in every component that reads the same value.
+ * `wholeStore` marks a store itself, which no control binds. Only its fields are values.
+ */
+interface ValueSource {
+  id: string
+  wholeStore: boolean
+}
+
+/** The script facts of one component that its template expressions read. */
+interface ComponentScope {
+  file: string
+  bindings: ReadonlyMap<string, SourceBinding>
+}
+
+/** What a condition can use: the constants of its file, the static props of the usage, and the imports. */
+interface EvaluationContext {
+  file: string
+  statics: ReadonlyMap<string, unknown>
+  imports: ReadonlyMap<string, ImportBinding>
+}
+
+/** The result of a condition that depends on runtime state, such as a store. */
+const UNKNOWN = Symbol('unknown')
+
+type TemplateLiteralNode = Extract<Expression, { type: 'TemplateLiteral' }>
+
+/** A translation helper, such as `const tn = (key: string) => t(`prefix.${key}`)`. A call such as `tn('enable')` names the key that it builds. */
+interface TranslationHelper {
+  param: string
+  template: TemplateLiteralNode
+}
+
+/** What a template expression can use to build a key. */
+interface NameScope {
+  /** String constants of the file, and the static string props of the usage. */
+  values: ReadonlyMap<string, string>
+  helpers: ReadonlyMap<string, TranslationHelper>
+}
+
+/** A name read from one template expression. */
+interface ReadName {
+  /** The expression in the template. */
+  source: string
+  /** Every i18n key that the expression can show. `undefined` when the key uses a value that only the runtime knows, such as a prop. */
+  keys: string[] | undefined
+  /** The row marker as an expression: the keys as one string, or the key expression itself when only the runtime knows the key. */
+  marker: string | undefined
+}
+
+/** Component props that name the control or the section they belong to. */
+const NAME_PROPS = new Set(['label', 'title'])
+/** Elements whose text names a setting or a section. A button names an action, not a setting, so it is not here. */
+const NAME_TAGS = /^(?:h[1-6]|label|legend)$/
+/**
+ * Overlay parts. Their content shows only after a click, so it is not on the page. Chrome settings search skips dialogs and menus for the same reason.
+ * A component whose slots all render inside an overlay part counts as an overlay too. The scan finds that by itself.
+ */
+const OVERLAY_PART = /^(?:Teleport|(?:Dialog|AlertDialog|Drawer|Popover|DropdownMenu|ContextMenu|HoverCard|Tooltip|Select|Combobox|Menubar|NavigationMenu|Toast)(?:Portal|Content))$/
+/** Notices describe a state, such as an error or a tip. Their titles do not name a setting. */
+const NOTICE = /^(?:Callout|Alert|ErrorContainer)$/
+/** The translation functions of a template. */
+const TRANSLATE = new Set(['t', '$t'])
+const I18N_KEY = /^[\w.-]+$/
+/** The module that maps each settings route to the loader of its runtime item provider. */
+const PROVIDERS_MODULE = 'virtual:settings-search-providers'
+const RESOLVED_PROVIDERS_MODULE = `\0${PROVIDERS_MODULE}`
+const SCRIPT_FILE = /\.[cm]?[jt]sx?$/
+/** The props that bind the value of a control. */
+const MODEL_PROPS = new Set(['model-value', 'modelValue'])
+/** Calls whose result comes from the parent, not from the component. */
+const OUTSIDE_VALUES = new Set(['defineProps', 'withDefaults', 'defineModel'])
+
+function stripQuery(id: string) {
+  return id.split('?')[0]
+}
+
+function pascalCase(tag: string) {
+  return tag.replace(/(?:^|-)(\w)/g, (_, letter: string) => letter.toUpperCase())
+}
+
+function camelCase(name: string) {
+  return name.replace(/-(\w)/g, (_, letter: string) => letter.toUpperCase())
+}
+
+function isElement(node: TemplateChild): node is TemplateElement {
+  return 'tag' in node && 'props' in node
+}
+
+/** Every element, with its nearest parent element that renders. A `<template>` renders no element of its own. */
+function* elementsOf(children: TemplateChild[], parent?: TemplateElement): Generator<{ element: TemplateElement, parent: TemplateElement | undefined }> {
+  for (const child of children) {
+    if (!isElement(child))
+      continue
+    yield { element: child, parent }
+    yield* elementsOf(child.children, child.tag === 'template' ? parent : child)
+  }
+}
+
+/** Whether the content of an element is not part of the page: an overlay part or a notice. */
+function hidesContent(element: TemplateElement) {
+  const name = pascalCase(element.tag)
+  return OVERLAY_PART.test(name) || NOTICE.test(name)
+}
+
+/** The bound prop of an element by name, such as `:search-key-of`. */
+function boundProp(element: TemplateElement, names: readonly string[]) {
+  return element.props.find(prop => prop.name === 'bind' && 'arg' in prop && prop.arg && 'content' in prop.arg && names.includes(prop.arg.content))
+}
+
+/** Whether an element carries the row marker itself. A row of a runtime item binds it, such as `:data-settings-search="itemKey(card.id)"`. */
+function hasOwnMarker(element: TemplateElement) {
+  return element.props.some(prop => prop.name === SETTINGS_SEARCH_ATTRIBUTE) || !!boundProp(element, [SETTINGS_SEARCH_ATTRIBUTE])
+}
+
+/**
+ * Whether an element marks rows of runtime items, so its page needs a provider.
+ *
+ * A shared list component marks its items only when its user asks, with `searchKeyOf?.(item)`. That marker does not count by itself.
+ * A usage that passes `:search-key-of` counts instead.
+ */
+function marksItemRows(element: TemplateElement) {
+  const marker = boundProp(element, [SETTINGS_SEARCH_ATTRIBUTE])
+  const markerSource = marker && 'exp' in marker && marker.exp && 'content' in marker.exp ? marker.exp.content : ''
+  const ownMarker = element.props.some(prop => prop.name === SETTINGS_SEARCH_ATTRIBUTE) || (!!marker && !markerSource.includes('?.('))
+  return ownMarker || !!boundProp(element, ['search-key-of', 'searchKeyOf'])
+}
+
+/** The `v-if`, `v-else-if`, `v-else`, or `v-show` directive of an element. */
+function conditionOf(element: TemplateElement) {
+  for (const prop of element.props) {
+    if (prop.name === 'if' || prop.name === 'else-if' || prop.name === 'else' || prop.name === 'show') {
+      const expression = 'exp' in prop && prop.exp && 'content' in prop.exp ? prop.exp.content : undefined
+      return { kind: prop.name, expression }
+    }
+  }
+  return undefined
+}
+
+function parseExpression(source: string): { expression: Expression, code: string } | undefined {
+  const code = `(${source})`
+  try {
+    const statement = babelParse(code, { sourceType: 'module', plugins: ['typescript'] }).program.body[0]
+    return statement?.type === 'ExpressionStatement' ? { expression: statement.expression, code } : undefined
+  }
+  catch {
+    return undefined
+  }
+}
+
+/** The path of a plain value read, such as `['settings', 'autoSend']` for `settings.autoSend`. `undefined` for any other expression. */
+function chainOf(node: Expression): string[] | undefined {
+  if (node.type === 'Identifier')
+    return [node.name]
+  if ((node.type === 'MemberExpression' || node.type === 'OptionalMemberExpression') && !node.computed && node.property.type === 'Identifier') {
+    const object = chainOf(node.object)
+    return object ? [...object, node.property.name] : undefined
+  }
+  if (node.type === 'TSNonNullExpression' || node.type === 'TSAsExpression' || node.type === 'ParenthesizedExpression')
+    return chainOf(node.expression)
+  return undefined
+}
+
+/** The value paths that an expression reads, such as `activeProvider` and `supportsModelListing` in `activeProvider && supportsModelListing`. */
+function chainsOf(node: Expression, chains: string[][] = []): string[][] {
+  const chain = chainOf(node)
+  if (chain) {
+    chains.push(chain)
+    return chains
+  }
+  switch (node.type) {
+    case 'MemberExpression':
+    case 'OptionalMemberExpression':
+      chainsOf(node.object, chains)
+      if (node.computed && node.property.type !== 'PrivateName')
+        chainsOf(node.property, chains)
+      break
+    case 'UnaryExpression':
+      chainsOf(node.argument, chains)
+      break
+    case 'BinaryExpression':
+    case 'LogicalExpression':
+      if (node.left.type !== 'PrivateName')
+        chainsOf(node.left, chains)
+      chainsOf(node.right, chains)
+      break
+    case 'ConditionalExpression':
+      chainsOf(node.test, chains)
+      chainsOf(node.consequent, chains)
+      chainsOf(node.alternate, chains)
+      break
+    case 'CallExpression':
+    case 'OptionalCallExpression':
+      // A method call reads its object, such as `providers` in `providers.includes(id)`.
+      if (node.callee.type === 'MemberExpression' || node.callee.type === 'OptionalMemberExpression')
+        chainsOf(node.callee.object, chains)
+      for (const argument of node.arguments) {
+        if (argument.type !== 'SpreadElement' && argument.type !== 'ArgumentPlaceholder')
+          chainsOf(argument as Expression, chains)
+      }
+      break
+    case 'TemplateLiteral':
+      node.expressions.forEach(expression => chainsOf(expression as Expression, chains))
+      break
+    case 'TSNonNullExpression':
+    case 'TSAsExpression':
+    case 'ParenthesizedExpression':
+      chainsOf(node.expression, chains)
+      break
+  }
+  return chains
+}
+
+/** The marker of a value. Every control that binds the value carries it, so a condition that reads the value finds its control. */
+function valueMarker(source: string) {
+  return `value:${createHash('sha256').update(source).digest('hex').slice(0, 12)}`
+}
+
+/** The expressions that bind the value of a control: `v-model` with or without an argument, and `:model-value`. */
+function modelExpressionsOf(element: TemplateElement) {
+  return element.props.flatMap((prop) => {
+    const isModel = prop.name === 'model' || (prop.name === 'bind' && 'arg' in prop && prop.arg && 'content' in prop.arg && MODEL_PROPS.has(prop.arg.content))
+    return isModel && 'exp' in prop && prop.exp && 'content' in prop.exp ? [prop.exp.content] : []
+  })
+}
+
+/** The name of the slot that a `<template #name>` child fills, or `default` for other content. */
+function slotNameOf(child: TemplateElement) {
+  if (child.tag !== 'template')
+    return 'default'
+  const directive = child.props.find(prop => prop.name === 'slot')
+  return directive && 'arg' in directive && directive.arg && 'content' in directive.arg && directive.arg.isStatic ? directive.arg.content : 'default'
+}
+
+/** Whether an expression is a literal, such as `'speech-noop'` or `42`. */
+function isLiteral(node: Expression | null | undefined) {
+  return node?.type === 'StringLiteral' || node?.type === 'NumericLiteral' || node?.type === 'BooleanLiteral'
+    || (node?.type === 'TemplateLiteral' && node.expressions.length === 0)
+}
+
+/** The expressions that a getter reads: the returned values, and the tests and values on the way. */
+function readsOf(getter: Getter): Expression[] {
+  if (getter.body.type !== 'BlockStatement')
+    return [getter.body]
+  const reads: Expression[] = []
+  const visit = (statement: Statement) => {
+    if (statement.type === 'ReturnStatement' && statement.argument) {
+      reads.push(statement.argument)
+    }
+    else if (statement.type === 'IfStatement') {
+      reads.push(statement.test)
+      visit(statement.consequent)
+      if (statement.alternate)
+        visit(statement.alternate)
+    }
+    else if (statement.type === 'BlockStatement') {
+      statement.body.forEach(visit)
+    }
+    else if (statement.type === 'VariableDeclaration') {
+      statement.declarations.forEach(declarator => declarator.init && reads.push(declarator.init))
+    }
+  }
+  getter.body.body.forEach(visit)
+  return reads
+}
+
+/** The value paths that an expression can return, such as `model` in `ready && model`. A test, such as `a === b`, returns no value path. */
+function resultChainsOf(node: Expression): string[][] {
+  const chain = chainOf(node)
+  if (chain)
+    return [chain]
+  if (node.type === 'LogicalExpression')
+    return node.operator === '&&' ? resultChainsOf(node.right) : [...resultChainsOf(node.left), ...resultChainsOf(node.right)]
+  if (node.type === 'ConditionalExpression')
+    return [...resultChainsOf(node.consequent), ...resultChainsOf(node.alternate)]
+  if (node.type === 'TSNonNullExpression' || node.type === 'TSAsExpression' || node.type === 'ParenthesizedExpression')
+    return resultChainsOf(node.expression)
+  return []
+}
+
+/** The value paths that a getter returns. */
+function returnChainsOf(getter: Getter): string[][] {
+  if (getter.body.type !== 'BlockStatement')
+    return resultChainsOf(getter.body)
+  const chains: string[][] = []
+  const visit = (statement: Statement) => {
+    if (statement.type === 'ReturnStatement' && statement.argument) {
+      chains.push(...resultChainsOf(statement.argument))
+    }
+    else if (statement.type === 'IfStatement') {
+      visit(statement.consequent)
+      if (statement.alternate)
+        visit(statement.alternate)
+    }
+    else if (statement.type === 'BlockStatement') {
+      statement.body.forEach(visit)
+    }
+  }
+  getter.body.body.forEach(visit)
+  return chains
+}
+
+/** The getter of `computed(getter)` or `computed({ get, set })`, or `undefined` for another value. */
+function computedGetterOf(init: Expression | null | undefined): Getter | undefined {
+  if (init?.type !== 'CallExpression' || init.callee.type !== 'Identifier' || init.callee.name !== 'computed')
+    return undefined
+  const [argument] = init.arguments
+  if (argument?.type === 'ArrowFunctionExpression' || argument?.type === 'FunctionExpression')
+    return argument
+  if (argument?.type !== 'ObjectExpression')
+    return undefined
+  const get = argument.properties.find(property =>
+    (property.type === 'ObjectMethod' || property.type === 'ObjectProperty') && property.key.type === 'Identifier' && property.key.name === 'get')
+  if (get?.type === 'ObjectMethod')
+    return get
+  const value = get?.type === 'ObjectProperty' ? get.value : undefined
+  return value?.type === 'ArrowFunctionExpression' || value?.type === 'FunctionExpression' ? value : undefined
+}
+
+/** How each top-level name of a script gets its value. */
+function bindingsOf(program: ScriptProgram, imports: ReadonlyMap<string, ImportBinding>) {
+  const bindings = new Map<string, SourceBinding>()
+  for (const [local, binding] of imports)
+    bindings.set(local, { kind: 'import', binding })
+
+  const calleeOf = (node: Expression | null | undefined) =>
+    node?.type === 'CallExpression' && node.callee.type === 'Identifier' ? node.callee.name : undefined
+  for (const statement of program.body) {
+    const declaration = statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement
+    if (declaration?.type !== 'VariableDeclaration')
+      continue
+    for (const declarator of declaration.declarations) {
+      const init = declarator.init
+      const callee = calleeOf(init)
+      if (declarator.id.type === 'Identifier') {
+        const getter = computedGetterOf(init)
+        bindings.set(declarator.id.name, getter
+          ? { kind: 'local', getter }
+          : isLiteral(init)
+            ? { kind: 'constant' }
+            : callee && OUTSIDE_VALUES.has(callee)
+              ? { kind: 'outside' }
+              : callee ? { kind: 'call', callee: imports.get(callee) } : { kind: 'local' })
+        continue
+      }
+      if (declarator.id.type !== 'ObjectPattern')
+        continue
+      // `const { a } = storeToRefs(store)`, `const { a } = useStore()`, or `const { a } = defineProps()`.
+      const source = callee === 'storeToRefs' && init?.type === 'CallExpression' ? init.arguments[0] as Expression | undefined : init
+      const sourceCallee = calleeOf(source)
+      const base: SourceBinding | undefined = source?.type === 'Identifier'
+        ? bindings.get(source.name)
+        : sourceCallee && OUTSIDE_VALUES.has(sourceCallee)
+          ? { kind: 'outside' }
+          : sourceCallee ? { kind: 'call', callee: imports.get(sourceCallee) } : undefined
+      for (const property of declarator.id.properties) {
+        if (property.type !== 'ObjectProperty' || property.key.type !== 'Identifier')
+          continue
+        const value = property.value.type === 'AssignmentPattern' ? property.value.left : property.value
+        if (value.type !== 'Identifier')
+          continue
+        bindings.set(value.name, base?.kind === 'outside'
+          ? base
+          : base?.kind === 'call' && !base.field ? { kind: 'call', callee: base.callee, field: property.key.name } : { kind: 'local' })
+      }
+    }
+  }
+  return bindings
+}
+
+/**
+ * The modules that the provider definitions of a program load as views, such as `views: { hearing: () => import('./hearing-settings.vue') }`.
+ * A provider definition is the first argument of `defineProvider()`.
+ */
+function providerViewImportsOf(program: ScriptProgram) {
+  const specifiers: string[] = []
+  const visit = (node: unknown) => {
+    if (!node || typeof node !== 'object')
+      return
+    if (Array.isArray(node)) {
+      node.forEach(visit)
+      return
+    }
+    const call = node as Expression
+    const [definition] = call.type === 'CallExpression' && call.callee.type === 'Identifier' && call.callee.name === 'defineProvider' ? call.arguments : []
+    const views = definition?.type === 'ObjectExpression'
+      ? definition.properties.find(property => property.type === 'ObjectProperty' && property.key.type === 'Identifier' && property.key.name === 'views')
+      : undefined
+    if (views?.type === 'ObjectProperty' && views.value.type === 'ObjectExpression') {
+      for (const view of views.value.properties) {
+        const loader = view.type === 'ObjectProperty' ? view.value : undefined
+        const body = loader?.type === 'ArrowFunctionExpression' ? loader.body : undefined
+        const [specifier] = body?.type === 'CallExpression' && body.callee.type === 'Import' ? body.arguments : []
+        if (specifier?.type === 'StringLiteral')
+          specifiers.push(specifier.value)
+      }
+    }
+    for (const [name, child] of Object.entries(node)) {
+      if (name !== 'loc' && name !== 'leadingComments' && name !== 'trailingComments')
+        visit(child)
+    }
+  }
+  visit(program.body)
+  return specifiers
+}
+
+/** The marker for keys that the build knows: one string, with the keys separated by spaces, as {@link SETTINGS_SEARCH_ATTRIBUTE} reads it. */
+function markerOf(keys: string[]) {
+  return `'${[...new Set(keys)].join(' ')}'`
+}
+
+/** The keys that a template literal can build, or `undefined` when a part is not known. */
+function templateKeys(template: TemplateLiteralNode, values: ReadonlyMap<string, string>): string[] | undefined {
+  let keys = ['']
+  for (const [index, quasi] of template.quasis.entries()) {
+    keys = keys.map(key => key + (quasi.value.cooked ?? quasi.value.raw))
+    const part = template.expressions[index]
+    if (!part)
+      continue
+    const partValues = valuesOf(part, values)
+    if (!partValues)
+      return undefined
+    keys = keys.flatMap(key => partValues.map(value => key + value))
+  }
+  return keys
+}
+
+/** The strings that a part of a template key can be, or `undefined` when the scan cannot know them. */
+function valuesOf(node: TemplateLiteralNode['expressions'][number], values: ReadonlyMap<string, string>): string[] | undefined {
+  if (node.type === 'StringLiteral')
+    return [node.value]
+  if (node.type === 'Identifier') {
+    const value = values.get(node.name)
+    return value === undefined ? undefined : [value]
+  }
+  if (node.type === 'ConditionalExpression') {
+    const consequent = valuesOf(node.consequent, values)
+    const alternate = valuesOf(node.alternate, values)
+    return consequent && alternate ? [...consequent, ...alternate] : undefined
+  }
+  return undefined
+}
+
+/**
+ * Reads the i18n keys that a template expression shows.
+ *
+ * Returns:
+ * - A {@link ReadName} for `t('key')`, `t(`${PREFIX}.key`)`, a call of a translation helper, or a condition between such calls.
+ * - `'unreadable'` for a call that looks like a translation, but whose key the scan cannot know.
+ * - `undefined` for anything else, such as data or `t('key', params)`. Those show runtime values, not a fixed setting name.
+ */
+function readName(expression: Expression, code: string, scope: NameScope): ReadName | 'unreadable' | undefined {
+  const source = (node: { start?: number | null, end?: number | null }) => code.slice(node.start ?? 0, node.end ?? 0)
+  const isKey = (key: string) => I18N_KEY.test(key)
+
+  if (expression.type === 'ConditionalExpression') {
+    const consequent = readName(expression.consequent, code, scope)
+    const alternate = readName(expression.alternate, code, scope)
+    if (consequent === 'unreadable' || alternate === 'unreadable')
+      return 'unreadable'
+    if (!consequent || !alternate)
+      return undefined
+    const keys = consequent.keys && alternate.keys ? [...consequent.keys, ...alternate.keys] : undefined
+    const marker = keys
+      ? markerOf(keys)
+      : consequent.marker && alternate.marker ? `(${source(expression.test)}) ? (${consequent.marker}) : (${alternate.marker})` : undefined
+    return { source: source(expression), keys, marker }
+  }
+
+  if (expression.type !== 'CallExpression')
+    return undefined
+  const [argument, ...rest] = expression.arguments
+  const callee = expression.callee.type === 'Identifier' ? expression.callee.name : undefined
+  if (argument?.type !== 'StringLiteral' && argument?.type !== 'TemplateLiteral')
+    return undefined
+  if (rest.length)
+    return undefined
+
+  if (callee && TRANSLATE.has(callee)) {
+    const keys = argument.type === 'StringLiteral' ? [argument.value] : templateKeys(argument, scope.values)
+    if (keys && !keys.every(isKey))
+      return 'unreadable'
+    // A key with a prefix from a prop is known only at runtime, so the marker binds the key expression itself.
+    return { source: source(expression), keys, marker: keys ? markerOf(keys) : source(argument) }
+  }
+
+  const helper = callee ? scope.helpers.get(callee) : undefined
+  if (!helper)
+    return 'unreadable'
+  const params = argument.type === 'StringLiteral' ? [argument.value] : templateKeys(argument, scope.values)
+  const built = params?.map(param => templateKeys(helper.template, new Map([...scope.values, [helper.param, param]])))
+  const keys = built?.every(key => key !== undefined) ? built.flat() : undefined
+  if (keys && !keys.every(isKey))
+    return 'unreadable'
+  return { source: source(expression), keys, marker: keys ? markerOf(keys) : undefined }
+}
+
+/**
+ * Reads the setting names on one element.
+ *
+ * Use when:
+ * - The scan builds the index, and the transform marks the rows. Both use this function, so they always agree.
+ *
+ * Returns:
+ * - The names that the element shows, and the expressions that look like names but cannot be read.
+ *   A link to another page (`to`) names that page, not a setting here, so it has no names.
+ *   A button names an action, not a setting, so the `label` and `title` props of a button component are not names either.
+ */
+function namesOf(element: TemplateElement, scope: NameScope, isButton: boolean) {
+  const names: ReadName[] = []
+  const unreadable: string[] = []
+  const read = (expressionSource: string) => {
+    const parsed = parseExpression(expressionSource.trim())
+    const name = parsed ? readName(parsed.expression, parsed.code, scope) : undefined
+    if (name === 'unreadable')
+      unreadable.push(expressionSource.trim())
+    else if (name)
+      names.push(name)
+  }
+
+  for (const prop of element.props) {
+    const name = prop.name === 'bind' && 'arg' in prop && prop.arg && 'content' in prop.arg ? prop.arg.content : prop.name
+    if (name === 'to')
+      return { names, unreadable }
+  }
+
+  // On a native element, `title` is a hover hint. Only component props name a control.
+  if (element.tagType === 1 && !isButton) {
+    for (const prop of element.props) {
+      if (prop.name === 'bind' && 'arg' in prop && prop.arg && 'content' in prop.arg && NAME_PROPS.has(prop.arg.content) && prop.exp && 'content' in prop.exp)
+        read(prop.exp.content)
+    }
+  }
+
+  if (NAME_TAGS.test(element.tag)) {
+    // Whitespace and comments do not count. One interpolation must be the whole text.
+    const content = element.children.filter(child => !(child.type === 3 || (child.type === 2 && !child.content.trim())))
+    const only = content.length === 1 ? content[0] : undefined
+    if (only?.type === 5 && 'content' in only.content)
+      read(only.content.content)
+  }
+
+  return { names, unreadable }
+}
+
+/** The translation helper that a function declares, such as `(key: string) => t(`prefix.${key}`)`. */
+function helperOf(fn: Expression | Statement | null | undefined): TranslationHelper | undefined {
+  if (!fn || (fn.type !== 'ArrowFunctionExpression' && fn.type !== 'FunctionExpression' && fn.type !== 'FunctionDeclaration'))
+    return undefined
+  const [param] = fn.params
+  if (param?.type !== 'Identifier')
+    return undefined
+  const body = fn.body.type === 'BlockStatement'
+    ? (fn.body.body.length === 1 && fn.body.body[0].type === 'ReturnStatement' ? fn.body.body[0].argument : undefined)
+    : fn.body
+  if (body?.type !== 'CallExpression' || body.callee.type !== 'Identifier' || !TRANSLATE.has(body.callee.name))
+    return undefined
+  const [template] = body.arguments
+  return template?.type === 'TemplateLiteral' ? { param: param.name, template } : undefined
+}
+
+/** Top-level string constants and translation helpers, which template keys can use. */
+function scopeOf(program: ScriptProgram) {
+  const values = new Map<string, string>()
+  const helpers = new Map<string, TranslationHelper>()
+  for (const statement of program.body) {
+    const declaration = statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement
+    if (declaration?.type === 'FunctionDeclaration' && declaration.id) {
+      const helper = helperOf(declaration)
+      if (helper)
+        helpers.set(declaration.id.name, helper)
+      continue
+    }
+    if (declaration?.type !== 'VariableDeclaration' || declaration.kind !== 'const')
+      continue
+    for (const declarator of declaration.declarations) {
+      if (declarator.id.type !== 'Identifier')
+        continue
+      const init = declarator.init
+      if (init?.type === 'StringLiteral')
+        values.set(declarator.id.name, init.value)
+      else if (init?.type === 'TemplateLiteral' && init.expressions.length === 0)
+        values.set(declarator.id.name, init.quasis[0]?.value.cooked ?? '')
+      const helper = helperOf(init)
+      if (helper)
+        helpers.set(declarator.id.name, helper)
+    }
+  }
+  return { values, helpers }
+}
+
+/**
+ * The props of a component's usage.
+ *
+ * - `values`: static string attributes, by prop name. A template key or a condition in the component can use them.
+ * - `bound`: props with a bound value, such as `:enabled="x"`. Only the runtime knows them, so they hide the defaults.
+ */
+interface ComponentUsage {
+  values: ReadonlyMap<string, string>
+  bound: ReadonlySet<string>
+}
+
+const NO_USAGE: ComponentUsage = { values: new Map(), bound: new Set() }
+
+function usageOf(element: TemplateElement): ComponentUsage {
+  const values = new Map<string, string>()
+  const bound = new Set<string>()
+  for (const prop of element.props) {
+    if ('value' in prop) {
+      if (prop.value && prop.name !== 'class' && prop.name !== 'style')
+        values.set(camelCase(prop.name), prop.value.content)
+    }
+    else if (prop.name === 'bind' && prop.arg && 'content' in prop.arg) {
+      bound.add(camelCase(prop.arg.content))
+    }
+    else if (prop.name === 'model') {
+      bound.add(prop.arg && 'content' in prop.arg ? camelCase(prop.arg.content) : 'modelValue')
+    }
+  }
+  return { values, bound }
+}
+
+/**
+ * The gate of each conditional setting on a page or in a view.
+ *
+ * The gate is the row that controls the innermost condition of the setting, such as the switch that binds the value
+ * that its `v-if` reads, or the section that holds it. Search highlights the gate when the setting itself is not on the page.
+ * A control can have a gate of its own, such as a switch inside a collapsed section, so the gates of gates are in the result too.
+ */
+function gatesOf(entries: readonly ScanEntry[], controls: readonly ScanEntry[]) {
+  const present = new Set([...entries, ...controls].map(item => item.key))
+  const controlsByKey = Map.groupBy(controls, control => control.key)
+  const gateOf = (item: ScanEntry) => {
+    for (const condition of item.conditions.toReversed()) {
+      const gate = condition.gates.find(key => key !== item.key && present.has(key))
+      if (gate)
+        return gate
+    }
+    return undefined
+  }
+  const gates: Record<string, string> = {}
+  const pending = [...entries]
+  for (let item = pending.shift(); item; item = pending.shift()) {
+    const gate = gates[item.key] ? undefined : gateOf(item)
+    if (!gate)
+      continue
+    gates[item.key] = gate
+    pending.push(...controlsByKey.get(gate) ?? [])
+  }
+  return gates
+}
+
+/** The gates of a key, nearest first, following the gate of each gate. */
+function gateChainOf(key: string, gates: Readonly<Record<string, string>>) {
+  const chain: string[] = []
+  for (let gate = gates[key]; gate && !chain.includes(gate); gate = gates[gate])
+    chain.push(gate)
+  return chain
+}
+
+/**
+ * Builds the settings search index at build time and marks the searchable rows.
+ *
+ * Use when:
+ * - An app routes the shared settings pages with `vue-router/vite`.
+ *
+ * Expects:
+ * - Pass `extendRoute` to `VueRouter({ extendRoute })` and add `plugin` to the Vite plugins.
+ * - A page names a setting with `t('key')` in a `label` or `title` prop of a component, a heading, a label, or a legend.
+ *   A key can use a constant of the same file or a static prop as its prefix, such as `t(`${KEY}.enable`)`.
+ *
+ * Returns:
+ * - `extendRoute`, which writes the i18n keys of every setting on a settings page into `meta.searchKeys`.
+ *   It follows the components that the page imports, and skips overlays and notices.
+ * - `plugin`, which binds the row marker to the same elements, and reports names that the scan cannot read.
+ *   A production build fails on such a name. Development only warns.
+ *
+ * In development, the index of a page updates when the page file changes.
+ * A change in a component that a page imports updates the index after a restart.
+ */
+export function createSettingsSearch() {
+  let resolveId: ((id: string, importer: string) => Promise<string | undefined>) | undefined
+  let markResolverReady: () => void = () => {}
+  const resolverReady = new Promise<void>(resolve => markResolverReady = resolve)
+  let failOnUnreadable = false
+  /** `import.meta.env` of the app build. Platform checks, such as `RUNTIME_ENVIRONMENT`, are known at build time. */
+  const env = new Map<string, unknown>()
+  let reportTimer: ReturnType<typeof setTimeout> | undefined
+  const reported = new Set<string>()
+
+  const descriptors = new Map<string, Promise<SFCDescriptor | undefined>>()
+  const programs = new Map<string, Promise<ScriptProgram | undefined>>()
+  const componentScans = new Map<string, ComponentScan>()
+  /** Files that the scan reached. Only these files get row markers. */
+  const scannedFiles = new Set<string>()
+  const unreadableNames = new Map<string, UnreadableName>()
+  /**
+   * Components that a provider definition loads as a view. A page renders such a view by provider at runtime,
+   * so the page scan cannot reach it. The view gets the marks of its settings, and an export that lists them.
+   */
+  const providerViews = new Set<string>()
+  /** Whether each component is a button, by file. */
+  const buttons = new Map<string, Promise<boolean>>()
+  /** The value of each top-level name, by file and name. */
+  const sources = new Map<string, Promise<ValueSource | undefined>>()
+  /** The runtime item provider of each settings route, by route path. */
+  const providers = new Map<string, string>()
+  /** Pages that mark rows of runtime items but have no provider, so search cannot list those items. */
+  const pagesWithoutProvider = new Set<string>()
+  /** The settings routes by page file, with whether the page marks runtime rows. A provider file next to the page can come and go. */
+  const routesByPage = new Map<string, { path: string, marksItems: boolean }>()
+  let server: ViteDevServer | undefined
+
+  /** Records the provider of a route, or the lack of one. In development, the page reloads with the new table. */
+  async function updateProvider(path: string, pageFile: string, marksItems: boolean) {
+    const providerFile = pageFile.replace(/\.vue$/, '.search.ts')
+    const hasProvider = await access(providerFile).then(() => true, () => false)
+    const changed = hasProvider ? providers.get(path) !== providerFile : providers.has(path)
+    if (hasProvider)
+      providers.set(path, providerFile)
+    else
+      providers.delete(path)
+    if (!hasProvider && marksItems)
+      pagesWithoutProvider.add(pageFile)
+    else
+      pagesWithoutProvider.delete(pageFile)
+
+    const module = changed ? server?.moduleGraph.getModuleById(RESOLVED_PROVIDERS_MODULE) : undefined
+    if (module) {
+      server?.moduleGraph.invalidateModule(module)
+      server?.ws.send({ type: 'full-reload' })
+    }
+  }
+
+  function readDescriptor(file: string) {
+    let descriptor = descriptors.get(file)
+    if (!descriptor) {
+      descriptor = readFile(file, 'utf8')
+        .then(source => parse(source, { filename: file }).descriptor)
+        .catch(() => undefined)
+      descriptors.set(file, descriptor)
+    }
+    return descriptor
+  }
+
+  function readProgram(id: string, source?: string) {
+    let program = programs.get(id)
+    if (!program) {
+      program = (source !== undefined ? Promise.resolve(source) : readFile(id, 'utf8'))
+        .then(code => babelParse(code, { sourceType: 'module', plugins: ['typescript'] }).program)
+        .catch(() => undefined)
+      programs.set(id, program)
+    }
+    return program
+  }
+
+  function importsOf(program: ScriptProgram) {
+    const imports = new Map<string, ImportBinding>()
+    for (const statement of program.body) {
+      if (statement.type !== 'ImportDeclaration' || statement.importKind === 'type')
+        continue
+      for (const specifier of statement.specifiers) {
+        if (specifier.type === 'ImportDefaultSpecifier')
+          imports.set(specifier.local.name, { source: statement.source.value, imported: 'default' })
+        else if (specifier.type === 'ImportSpecifier' && specifier.importKind !== 'type')
+          imports.set(specifier.local.name, { source: statement.source.value, imported: specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value })
+      }
+    }
+    return imports
+  }
+
+  async function resolveFile(source: string, importer: string) {
+    await resolverReady
+    const resolved = await resolveId?.(source, importer)
+    const file = resolved ? stripQuery(resolved) : undefined
+    // Dependencies render no setting of their own. They only show the names that a page passes in.
+    return file && !file.includes('/node_modules/') ? file : undefined
+  }
+
+  /** Follows re-exports, such as `export { default as X } from './x.vue'`, to the component file. */
+  async function resolveExport(module: string, name: string, depth = 0): Promise<string | undefined> {
+    if (depth > 8)
+      return undefined
+    const program = await readProgram(module)
+    if (!program)
+      return undefined
+
+    const imports = importsOf(program)
+    for (const statement of program.body) {
+      if (statement.type === 'ExportNamedDeclaration') {
+        for (const specifier of statement.specifiers) {
+          if (specifier.type !== 'ExportSpecifier')
+            continue
+          const exported = specifier.exported.type === 'Identifier' ? specifier.exported.name : specifier.exported.value
+          if (exported !== name)
+            continue
+          const binding = statement.source
+            ? { source: statement.source.value, imported: specifier.local.name }
+            : imports.get(specifier.local.name)
+          if (binding)
+            return resolveBinding(binding, module, depth + 1)
+        }
+      }
+      else if (statement.type === 'ExportAllDeclaration') {
+        const target = await resolveFile(statement.source.value, module)
+        const found = target && SCRIPT_FILE.test(target) ? await resolveExport(target, name, depth + 1) : undefined
+        if (found)
+          return found
+      }
+    }
+    return undefined
+  }
+
+  async function resolveBinding(binding: ImportBinding, importer: string, depth = 0) {
+    const target = await resolveFile(binding.source, importer)
+    if (!target)
+      return undefined
+    if (target.endsWith('.vue'))
+      return binding.imported === 'default' ? target : undefined
+    return SCRIPT_FILE.test(target) ? resolveExport(target, binding.imported, depth) : undefined
+  }
+
+  /**
+   * Evaluates top-level `const` declarations whose values the build knows, such as `const isDesktop = isStageTamagotchi()`.
+   * Props count too: a prop that the usage does not bind takes its `withDefaults` default.
+   */
+  async function staticsOf(program: ScriptProgram, context: EvaluationContext, usage: ComponentUsage) {
+    const statics = new Map(context.statics)
+    for (const statement of program.body) {
+      const declaration = statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement
+      if (declaration?.type === 'ExpressionStatement')
+        await propsOf(declaration.expression, { ...context, statics }, usage, statics)
+      if (declaration?.type !== 'VariableDeclaration' || declaration.kind !== 'const')
+        continue
+      for (const declarator of declaration.declarations) {
+        if (declarator.id.type !== 'Identifier' || !declarator.init)
+          continue
+        const props = await propsOf(declarator.init, { ...context, statics }, usage, statics)
+        if (props) {
+          statics.set(declarator.id.name, props)
+          continue
+        }
+        const value = await evaluate(declarator.init, { ...context, statics })
+        if (value !== UNKNOWN)
+          statics.set(declarator.id.name, value)
+      }
+    }
+    return statics
+  }
+
+  /**
+   * Reads `defineProps()` or `withDefaults(defineProps(), defaults)` as the props of this usage.
+   * The template reads props by name, so each known prop also goes into `statics`.
+   *
+   * Returns:
+   * - The props by name, or `undefined` when the expression does not define props.
+   */
+  async function propsOf(node: Expression, context: EvaluationContext, usage: ComponentUsage, statics: Map<string, unknown>) {
+    const isCall = (expression: Expression | undefined, name: string) =>
+      expression?.type === 'CallExpression' && expression.callee.type === 'Identifier' && expression.callee.name === name
+    const [definition, defaults] = isCall(node, 'withDefaults') && node.type === 'CallExpression' ? node.arguments : [node]
+    if (definition?.type !== 'CallExpression' || !isCall(definition, 'defineProps'))
+      return undefined
+
+    const props = new Map<string, unknown>(usage.values)
+    if (defaults?.type === 'ObjectExpression') {
+      for (const property of defaults.properties) {
+        if (property.type !== 'ObjectProperty')
+          continue
+        const name = property.key.type === 'Identifier' ? property.key.name : property.key.type === 'StringLiteral' ? property.key.value : undefined
+        // A static value from the usage wins over the default. A factory default, such as `() => []`, is runtime data.
+        if (!name || props.has(name) || usage.bound.has(name) || property.value.type === 'ArrowFunctionExpression')
+          continue
+        const value = await evaluate(property.value as Expression, context)
+        if (value !== UNKNOWN)
+          props.set(name, value)
+      }
+    }
+    for (const name of usage.bound)
+      props.delete(name)
+    props.forEach((value, name) => statics.set(name, value))
+    return props
+  }
+
+  /** The imports, the constants, the translation helpers, and the value sources of a component's scripts. */
+  async function scriptsOf(descriptor: SFCDescriptor, file: string, usage: ComponentUsage = NO_USAGE) {
+    const imports = new Map<string, ImportBinding>()
+    const helpers = new Map<string, TranslationHelper>()
+    const bindings = new Map<string, SourceBinding>()
+    let statics: ReadonlyMap<string, unknown> = new Map()
+    for (const block of [descriptor.script, descriptor.scriptSetup]) {
+      if (!block)
+        continue
+      const program = await readProgram(`${file}?${block.setup ? 'setup' : 'script'}`, block.content)
+      if (!program)
+        continue
+      const blockImports = importsOf(program)
+      blockImports.forEach((binding, local) => imports.set(local, binding))
+      bindingsOf(program, blockImports).forEach((binding, name) => bindings.set(name, binding))
+      scopeOf(program).helpers.forEach((helper, name) => helpers.set(name, helper))
+      statics = await staticsOf(program, { file, statics, imports }, usage)
+    }
+    const values = new Map([...statics].filter((entry): entry is [string, string] => typeof entry[1] === 'string'))
+    const scope: ComponentScope = { file, bindings }
+    return { imports, values, helpers, statics, scope }
+  }
+
+  /**
+   * Finds the declaration of an export, through re-exports.
+   *
+   * Returns:
+   * - The declaring file, its name there, and the declared function or the initial value, or `undefined` when the export is not found.
+   */
+  async function declarationOf(module: string, name: string, depth = 0): Promise<{ file: string, name: string, node: Expression | Statement | undefined } | undefined> {
+    if (depth > 8)
+      return undefined
+    const program = await readProgram(module)
+    if (!program)
+      return undefined
+    const imports = importsOf(program)
+    const local = (localName: string) => {
+      for (const statement of program.body) {
+        const declaration = statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement
+        if (declaration?.type === 'FunctionDeclaration' && declaration.id?.name === localName)
+          return { file: module, name: localName, node: declaration }
+        if (declaration?.type !== 'VariableDeclaration')
+          continue
+        for (const declarator of declaration.declarations) {
+          if (declarator.id.type === 'Identifier' && declarator.id.name === localName)
+            return { file: module, name: localName, node: declarator.init ?? undefined }
+        }
+      }
+      return undefined
+    }
+
+    for (const statement of program.body) {
+      if (statement.type === 'ExportNamedDeclaration') {
+        const declaration = statement.declaration
+        const declared = declaration?.type === 'FunctionDeclaration'
+          ? [declaration.id?.name]
+          : declaration?.type === 'VariableDeclaration' ? declaration.declarations.map(declarator => declarator.id.type === 'Identifier' ? declarator.id.name : undefined) : []
+        if (declared.includes(name))
+          return local(name)
+        for (const specifier of statement.specifiers) {
+          if (specifier.type !== 'ExportSpecifier')
+            continue
+          const exported = specifier.exported.type === 'Identifier' ? specifier.exported.name : specifier.exported.value
+          if (exported !== name)
+            continue
+          const binding = statement.source ? { source: statement.source.value, imported: specifier.local.name } : imports.get(specifier.local.name)
+          if (!binding)
+            return local(specifier.local.name)
+          const target = await resolveFile(binding.source, module)
+          return target && SCRIPT_FILE.test(target) ? declarationOf(target, binding.imported, depth + 1) : undefined
+        }
+      }
+      else if (statement.type === 'ExportAllDeclaration') {
+        const target = await resolveFile(statement.source.value, module)
+        const found = target && SCRIPT_FILE.test(target) ? await declarationOf(target, name, depth + 1) : undefined
+        if (found)
+          return found
+      }
+    }
+    return undefined
+  }
+
+  /** Finds an exported function with one returned expression, such as `export function isStageWeb() { return ... }`. */
+  async function findExportedFunction(module: string, name: string) {
+    const declaration = await declarationOf(module, name)
+    const program = declaration ? await readProgram(declaration.file) : undefined
+    return declaration && program ? returnedExpression(declaration.node, { file: declaration.file, statics: new Map(), imports: importsOf(program) }) : undefined
+  }
+
+  /** The declaration that an import names, or `undefined` for a dependency. */
+  async function importedDeclaration(binding: ImportBinding, importer: string) {
+    const target = await resolveFile(binding.source, importer)
+    return target && SCRIPT_FILE.test(target) ? declarationOf(target, binding.imported) : undefined
+  }
+
+  /**
+   * The value that a top-level name holds, as an id that is the same in every component that reads the same value.
+   * A store field is shared. State that a component creates is its own. Props come from outside, so they have no id.
+   */
+  function sourceOf(name: string, scope: ComponentScope) {
+    const cacheKey = `${scope.file}\n${name}`
+    let source = sources.get(cacheKey)
+    if (!source) {
+      source = (async () => {
+        const binding = scope.bindings.get(name)
+        const local = { id: `local:${scope.file}#${name}`, wholeStore: false }
+        if (!binding || binding.kind === 'outside' || binding.kind === 'constant')
+          return undefined
+        if (binding.kind === 'local')
+          return local
+        if (binding.kind === 'import') {
+          // Only state that a module creates, such as `export const open = ref(false)`, is shared. A constant or a function is not state.
+          const declaration = await importedDeclaration(binding.binding, scope.file)
+          return declaration?.node?.type === 'CallExpression' ? { id: `import:${declaration.file}#${declaration.name}`, wholeStore: false } : undefined
+        }
+        // A call creates state of the component, such as `ref()`, unless it returns a store.
+        const declaration = binding.callee ? await importedDeclaration(binding.callee, scope.file) : undefined
+        const node = declaration?.node
+        const isStore = node?.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'defineStore'
+        if (!declaration || !isStore)
+          return local
+        return { id: `store:${declaration.file}#${declaration.name}${binding.field ? `.${binding.field}` : ''}`, wholeStore: !binding.field }
+      })()
+      sources.set(cacheKey, source)
+    }
+    return source
+  }
+
+  /**
+   * The markers of a value path, longest first. A control of `settings` also controls a condition on `settings.length`.
+   * A whole store is not a value that a control binds, so a path into a store keeps at least its field.
+   */
+  async function valueMarkersOf(chain: string[], scope: ComponentScope, prefixes: boolean) {
+    const [root, ...path] = chain
+    const source = root ? await sourceOf(root, scope) : undefined
+    const shortest = source?.wholeStore ? 1 : 0
+    if (!source || path.length < shortest)
+      return []
+    const lengths = prefixes ? Array.from({ length: path.length - shortest + 1 }, (_, index) => path.length - index) : [path.length]
+    return lengths.map(length => valueMarker([source.id, ...path.slice(0, length)].join('.')))
+  }
+
+  /**
+   * The value paths that a getter of a computed value reads. A script reads a ref as `name.value`, which is `name` in a template.
+   * A store is not a ref, so `store.value` stays a field.
+   */
+  async function scriptChainsOf(scriptChains: string[][], scope: ComponentScope) {
+    const chains: string[][] = []
+    for (const [root, ...path] of scriptChains) {
+      const source = root ? await sourceOf(root, scope) : undefined
+      if (root)
+        chains.push([root, ...(path[0] === 'value' && !source?.wholeStore ? path.slice(1) : path)])
+    }
+    return chains
+  }
+
+  /**
+   * The markers of the values that the expressions of a condition read. A control that binds one of them is the gate.
+   * A computed value adds the values that its getter reads, such as the tab behind `isAutoRunTab`.
+   */
+  async function conditionGates(expressions: string[], scope: ComponentScope) {
+    const gates: string[] = []
+    const visit = async (chains: string[][], followed: ReadonlySet<string>) => {
+      for (const chain of chains) {
+        gates.push(...await valueMarkersOf(chain, scope, true))
+        const [root] = chain
+        const binding = root ? scope.bindings.get(root) : undefined
+        if (root && binding?.kind === 'local' && binding.getter && !followed.has(root)) {
+          for (const read of readsOf(binding.getter))
+            await visit(await scriptChainsOf(chainsOf(read), scope), new Set(followed).add(root))
+        }
+      }
+    }
+    for (const expression of expressions) {
+      const parsed = parseExpression(expression)
+      if (parsed)
+        await visit(chainsOf(parsed.expression), new Set())
+    }
+    return [...new Set(gates)]
+  }
+
+  /**
+   * The markers of the values that a control binds with `v-model` or `:model-value`.
+   * A control bound to a computed value, such as a writable `computed({ get, set })` over a store field, also sets what its getter returns.
+   */
+  async function controlMarkersOf(element: TemplateElement, scope: ComponentScope) {
+    const markers: string[] = []
+    for (const expression of modelExpressionsOf(element)) {
+      const parsed = parseExpression(expression)
+      const chain = parsed ? chainOf(parsed.expression) : undefined
+      if (!chain)
+        continue
+      markers.push(...await valueMarkersOf(chain, scope, false))
+      const binding = chain.length === 1 && chain[0] ? scope.bindings.get(chain[0]) : undefined
+      const getter = binding?.kind === 'local' ? binding.getter : undefined
+      for (const returned of getter ? await scriptChainsOf(returnChainsOf(getter), scope) : [])
+        markers.push(...await valueMarkersOf(returned, scope, false))
+    }
+    return [...new Set(markers)]
+  }
+
+  function returnedExpression(fn: Expression | Statement | null | undefined, context: EvaluationContext) {
+    if (!fn || (fn.type !== 'ArrowFunctionExpression' && fn.type !== 'FunctionExpression' && fn.type !== 'FunctionDeclaration') || fn.params.length)
+      return undefined
+    const body = fn.body.type === 'BlockStatement'
+      ? (fn.body.body.length === 1 && fn.body.body[0].type === 'ReturnStatement' ? fn.body.body[0].argument : undefined)
+      : fn.body
+    return body ? { expression: body, context } : undefined
+  }
+
+  /**
+   * Evaluates an expression that the build can decide, such as a platform check.
+   *
+   * Returns:
+   * - The value, or {@link UNKNOWN} when the value depends on runtime state, such as a store or a ref.
+   */
+  async function evaluate(node: Expression, context: EvaluationContext, depth = 0): Promise<unknown> {
+    switch (node.type) {
+      case 'StringLiteral':
+      case 'NumericLiteral':
+      case 'BooleanLiteral':
+        return node.value
+      case 'NullLiteral':
+        return null
+      case 'TemplateLiteral':
+        return node.expressions.length ? UNKNOWN : node.quasis[0]?.value.cooked
+      case 'Identifier':
+        if (node.name === 'undefined')
+          return undefined
+        return context.statics.has(node.name) ? context.statics.get(node.name) : UNKNOWN
+      case 'MemberExpression': {
+        // `import.meta.env.NAME`: a key that the app build does not define is `undefined` at runtime too.
+        const isEnv = node.object.type === 'MemberExpression' && node.object.object.type === 'MetaProperty'
+          && node.object.property.type === 'Identifier' && node.object.property.name === 'env'
+        if (isEnv && node.property.type === 'Identifier')
+          return env.get(node.property.name)
+        // `props.name`: the props of the usage, with their defaults.
+        const owner = node.object.type === 'Identifier' ? context.statics.get(node.object.name) : undefined
+        if (owner instanceof Map && node.property.type === 'Identifier' && !node.computed)
+          return owner.has(node.property.name) ? owner.get(node.property.name) : UNKNOWN
+        return UNKNOWN
+      }
+      case 'UnaryExpression': {
+        if (node.operator !== '!')
+          return UNKNOWN
+        const value = await evaluate(node.argument, context, depth)
+        return value === UNKNOWN ? UNKNOWN : !value
+      }
+      case 'LogicalExpression': {
+        const left = await evaluate(node.left, context, depth)
+        if (node.operator === '&&') {
+          if (left !== UNKNOWN && !left)
+            return left
+          const right = await evaluate(node.right, context, depth)
+          if (left === UNKNOWN)
+            return right !== UNKNOWN && !right ? right : UNKNOWN
+          return right
+        }
+        if (node.operator === '||') {
+          if (left !== UNKNOWN && left)
+            return left
+          const right = await evaluate(node.right, context, depth)
+          if (left === UNKNOWN)
+            return right !== UNKNOWN && right ? right : UNKNOWN
+          return right
+        }
+        return UNKNOWN
+      }
+      case 'BinaryExpression': {
+        if (!['===', '!==', '==', '!='].includes(node.operator) || node.left.type === 'PrivateName')
+          return UNKNOWN
+        const left = await evaluate(node.left, context, depth)
+        const right = await evaluate(node.right, context, depth)
+        if (left === UNKNOWN || right === UNKNOWN)
+          return UNKNOWN
+        // eslint-disable-next-line eqeqeq
+        const equal = node.operator.length === 3 ? left === right : left == right
+        return node.operator.startsWith('!') ? !equal : equal
+      }
+      case 'ConditionalExpression': {
+        const test = await evaluate(node.test, context, depth)
+        if (test === UNKNOWN)
+          return UNKNOWN
+        return evaluate(test ? node.consequent : node.alternate, context, depth)
+      }
+      case 'CallExpression': {
+        // `computed(() => value)` has the value of its getter.
+        const [getter] = node.arguments
+        if (node.callee.type === 'Identifier' && node.callee.name === 'computed' && getter?.type === 'ArrowFunctionExpression' && getter.body.type !== 'BlockStatement')
+          return evaluate(getter.body, context, depth)
+        // A call of an imported function without arguments, such as `isStageTamagotchi()`, evaluates its returned expression.
+        if (node.arguments.length || node.callee.type !== 'Identifier' || depth > 4)
+          return UNKNOWN
+        const binding = context.imports.get(node.callee.name)
+        const module = binding ? await resolveFile(binding.source, context.file) : undefined
+        const fn = binding && module && SCRIPT_FILE.test(module) ? await findExportedFunction(module, binding.imported) : undefined
+        return fn ? evaluate(fn.expression, fn.context, depth + 1) : UNKNOWN
+      }
+      case 'TSAsExpression':
+      case 'TSNonNullExpression':
+      case 'ParenthesizedExpression':
+        return evaluate(node.expression, context, depth)
+      default:
+        return UNKNOWN
+    }
+  }
+
+  /**
+   * Whether a component is a button: its template has one root element, and that root is a `<button>` or a button component,
+   * as `Button` renders `BasicButton`. A component from a dependency is not known, so it is not a button.
+   */
+  function isButtonComponent(file: string, depth = 0): Promise<boolean> {
+    let known = buttons.get(file)
+    if (!known) {
+      known = (async () => {
+        const descriptor = await readDescriptor(file)
+        const roots = descriptor?.template?.ast?.children.filter(isElement) ?? []
+        const [root] = roots
+        if (!descriptor || roots.length !== 1 || !root)
+          return false
+        if (root.tag === 'button')
+          return true
+        if (root.tagType !== 1 || depth > 8)
+          return false
+        const { imports } = await scriptsOf(descriptor, file)
+        const binding = imports.get(root.tag) ?? imports.get(pascalCase(root.tag))
+        const child = binding ? await resolveBinding(binding, file) : undefined
+        return child ? isButtonComponent(child, depth + 1) : false
+      })()
+      buttons.set(file, known)
+    }
+    return known
+  }
+
+  /**
+   * Scans one component as it is used.
+   * `props` holds the static string props of the usage, because a template key can use one as its prefix.
+   */
+  async function scanComponent(file: string, usage: ComponentUsage, stack: Set<string>): Promise<ComponentScan> {
+    const cacheKey = `${file}\n${JSON.stringify([[...usage.values], [...usage.bound]])}`
+    const known = componentScans.get(cacheKey)
+    if (known)
+      return known
+    // A component that contains itself adds nothing new.
+    const empty: ComponentScan = { entries: [], controls: [], slotsHidden: false, marksItems: false, slotConditions: new Map() }
+    if (stack.has(file))
+      return empty
+
+    const descriptor = await readDescriptor(file)
+    const root = descriptor?.template?.ast
+    if (!descriptor || !root)
+      return empty
+
+    scannedFiles.add(file)
+    const { imports, values, helpers, statics, scope: valueScope } = await scriptsOf(descriptor, file, usage)
+    const scope: NameScope = { values: new Map([...usage.values, ...values]), helpers }
+    const context: EvaluationContext = { file, statics, imports }
+    const path = new Set(stack).add(file)
+    const entries: ScanEntry[] = []
+    const controls: ScanEntry[] = []
+    let slots = 0
+    let hiddenSlots = 0
+    let marksItems = false
+    const slotConditions = new Map<string, ScanCondition[]>()
+    const prefixed = (items: ScanEntry[], conditions: ScanCondition[]) => items.map(item => ({ key: item.key, conditions: [...conditions, ...item.conditions] }))
+
+    const decide = async (expression: string | undefined) => {
+      const parsed = expression ? parseExpression(expression) : undefined
+      return parsed ? evaluate(parsed.expression, context) : UNKNOWN
+    }
+
+    const walk = async (children: TemplateChild[], hidden: boolean, conditions: ScanCondition[]) => {
+      // The state of a `v-if` chain: a branch already shows, every branch so far is hidden, or the build cannot tell.
+      let chain: 'none' | 'taken' | 'open' | 'unknown' = 'none'
+      // The tests of the chain so far. A `v-else` branch depends on the values that they read.
+      let chainTests: string[] = []
+      for (const element of children) {
+        if (!isElement(element))
+          continue
+
+        const condition = conditionOf(element)
+        const test = condition?.expression ? [condition.expression] : []
+        let shows: unknown = true
+        let tests: string[] = []
+        if (!condition || condition.kind === 'show') {
+          chain = 'none'
+          chainTests = []
+          if (condition) {
+            shows = await decide(condition.expression)
+            tests = test
+          }
+        }
+        else if (condition.kind === 'if' || (condition.kind === 'else-if' && chain === 'open')) {
+          chainTests = condition.kind === 'if' ? test : [...chainTests, ...test]
+          tests = chainTests
+          shows = await decide(condition.expression)
+          chain = shows === UNKNOWN ? 'unknown' : shows ? 'taken' : 'open'
+        }
+        else if (condition.kind === 'else-if') {
+          chainTests = [...chainTests, ...test]
+          tests = chainTests
+          shows = chain === 'taken' ? false : UNKNOWN
+        }
+        else {
+          tests = chainTests
+          shows = chain === 'taken' ? false : chain === 'open' ? true : UNKNOWN
+          chain = 'none'
+          chainTests = []
+        }
+        // A branch that this build never renders, such as a desktop-only row on the web, is not in the index.
+        if (shows !== UNKNOWN && !shows)
+          continue
+        const here = shows === UNKNOWN ? [...conditions, { gates: await conditionGates(tests, valueScope) }] : conditions
+
+        if (element.tag === 'slot') {
+          slots++
+          if (hidden)
+            hiddenSlots++
+          const nameProp = element.props.find(prop => prop.name === 'name' && 'value' in prop)
+          const slotName = nameProp && 'value' in nameProp && nameProp.value ? nameProp.value.content : 'default'
+          if (!slotConditions.has(slotName))
+            slotConditions.set(slotName, here)
+        }
+
+        const hidesHere = hidden || hidesContent(element)
+        const binding = element.tagType === 1 ? imports.get(element.tag) ?? imports.get(pascalCase(element.tag)) : undefined
+        const child = binding ? await resolveBinding(binding, file) : undefined
+        const { names, unreadable } = namesOf(element, scope, child ? await isButtonComponent(child) : false)
+        if (!hidesHere) {
+          if (marksItemRows(element))
+            marksItems = true
+          for (const name of names) {
+            if (name.keys)
+              entries.push(...name.keys.map(key => ({ key, conditions: here })))
+            else
+              unreadable.push(name.source)
+          }
+          for (const expression of unreadable) {
+            const line = element.loc.start.line
+            unreadableNames.set(`${file}:${line}:${expression}`, { file, line, expression })
+          }
+          for (const key of await controlMarkersOf(element, valueScope))
+            controls.push({ key, conditions: here })
+        }
+
+        const childScan = child ? await scanComponent(child, usageOf(element), path) : undefined
+        if (!childScan) {
+          await walk(element.children, hidesHere, here)
+          continue
+        }
+        if (!hidesHere) {
+          entries.push(...prefixed(childScan.entries, here))
+          controls.push(...prefixed(childScan.controls, here))
+          marksItems ||= childScan.marksItems
+        }
+
+        // The children of a component fill its slots. They are hidden where its slots are, and they show under the conditions of
+        // their slot, such as the default slot of a collapsible section. The name of the component, such as the section title, is
+        // the gate of those conditions after the controls that the component itself has.
+        const usageGates = names.flatMap(name => name.keys ?? [])
+        const slotGroups = new Map<string, TemplateChild[]>()
+        for (const slotChild of element.children) {
+          const slotName = isElement(slotChild) ? slotNameOf(slotChild) : 'default'
+          slotGroups.set(slotName, [...slotGroups.get(slotName) ?? [], slotChild])
+        }
+        for (const [slotName, group] of slotGroups) {
+          const conditionsOfSlot = (childScan.slotConditions.get(slotName) ?? []).map(slotCondition => ({ gates: [...slotCondition.gates, ...usageGates] }))
+          await walk(group, hidesHere || childScan.slotsHidden, [...here, ...conditionsOfSlot])
+        }
+      }
+    }
+    await walk(root.children, false, [])
+
+    const scan: ComponentScan = { entries, controls, slotsHidden: slots > 0 && slots === hiddenSlots, marksItems, slotConditions }
+    componentScans.set(cacheKey, scan)
+    return scan
+  }
+
+  function reportUnreadableNames(names = [...unreadableNames.values()]) {
+    if (!names.length)
+      return undefined
+    const lines = names.map(name => `  ${name.file}:${name.line}  ${name.expression}`)
+    return `[settings-search] Search cannot read these setting names. Use t('key') with a literal key, or a prefix from a constant or a static prop:\n${lines.join('\n')}`
+  }
+
+  function reportPagesWithoutProvider() {
+    if (!pagesWithoutProvider.size)
+      return undefined
+    const lines = [...pagesWithoutProvider].map(file => `  ${file}`)
+    return `[settings-search] These pages mark rows of runtime items, but search cannot list the items. Add a sibling <page>.search.ts that exports the provider:\n${lines.join('\n')}`
+  }
+
+  /** In development, the scan never ends, so the names are reported once the routes settle. */
+  function reportNewUnreadableNamesSoon() {
+    if (failOnUnreadable)
+      return
+    clearTimeout(reportTimer)
+    reportTimer = setTimeout(() => {
+      const fresh = [...unreadableNames.entries()].filter(([id]) => !reported.has(id))
+      fresh.forEach(([id]) => reported.add(id))
+      const report = reportUnreadableNames(fresh.map(([, name]) => name))
+      if (report)
+        console.warn(report)
+      const missing = [...pagesWithoutProvider].filter(file => !reported.has(file))
+      missing.forEach(file => reported.add(file))
+      if (missing.length)
+        console.warn(reportPagesWithoutProvider())
+    }, 1000)
+  }
+
+  const plugin: Plugin = {
+    name: 'proj-airi:settings-search',
+    enforce: 'pre',
+    configResolved(config) {
+      failOnUnreadable = config.command === 'build'
+      for (const [name, value] of Object.entries(config.env))
+        env.set(name, value)
+      // `define` holds values as code, such as `"'electron'"`.
+      for (const [name, code] of Object.entries(config.define ?? {})) {
+        if (!name.startsWith('import.meta.env.') || typeof code !== 'string')
+          continue
+        const parsed = parseExpression(code)
+        const literal = parsed?.expression
+        if (literal && (literal.type === 'StringLiteral' || literal.type === 'BooleanLiteral' || literal.type === 'NumericLiteral'))
+          env.set(name.slice('import.meta.env.'.length), literal.value)
+      }
+    },
+    configureServer(devServer) {
+      server = devServer
+      // A provider file that appears or goes away changes the table of its page, while the page itself stays the same.
+      const onProviderFile = (file: string) => {
+        const route = file.endsWith('.search.ts') ? routesByPage.get(file.replace(/\.search\.ts$/, '.vue')) : undefined
+        if (route)
+          void updateProvider(route.path, file.replace(/\.search\.ts$/, '.vue'), route.marksItems)
+      }
+      devServer.watcher.on('add', onProviderFile)
+      devServer.watcher.on('unlink', onProviderFile)
+    },
+    buildStart() {
+      resolveId = async (id, importer) => (await this.resolve(id, importer, { skipSelf: true }))?.id
+      markResolverReady()
+    },
+    watchChange(id) {
+      const file = stripQuery(id)
+      descriptors.delete(file)
+      for (const key of programs.keys()) {
+        if (stripQuery(key) === file)
+          programs.delete(key)
+      }
+      for (const key of componentScans.keys()) {
+        if (key.startsWith(`${file}\n`))
+          componentScans.delete(key)
+      }
+      // A changed module can change what any name reads, such as a store that moved, or what a button renders.
+      sources.clear()
+      buttons.clear()
+    },
+    buildEnd() {
+      const report = [reportUnreadableNames(), reportPagesWithoutProvider()].filter(Boolean).join('\n')
+      if (report && failOnUnreadable)
+        this.error(report)
+    },
+    resolveId(id) {
+      return id === PROVIDERS_MODULE ? RESOLVED_PROVIDERS_MODULE : undefined
+    },
+    async load(id) {
+      if (id !== RESOLVED_PROVIDERS_MODULE)
+        return undefined
+      // The routes are scanned in `buildStart`, before any module loads.
+      const entries = [...providers].map(([path, file]) => `  ${JSON.stringify(path)}: () => import(${JSON.stringify(file)}).then(module => module.default),`)
+      return `export default {\n${entries.join('\n')}\n}\n`
+    },
+    async transform(code, id) {
+      if (id.includes('?'))
+        return undefined
+      if (SCRIPT_FILE.test(id)) {
+        if (!id.includes('/node_modules/') && code.includes('defineProvider(') && code.includes('views'))
+          await registerProviderViews(code, id)
+        return undefined
+      }
+      if (!scannedFiles.has(id) && !providerViews.has(id))
+        return undefined
+      const descriptor = parse(code, { filename: id }).descriptor
+      const root = descriptor.template?.ast
+      if (!root)
+        return undefined
+
+      // Without the usage, a key with a prefix from a prop is known only at runtime. Its marker binds the key expression.
+      // A control also carries the marker of the value that it binds, so a setting that depends on the value finds its gate.
+      // Controls from a `v-for`, such as the cards of a radio group, give it to their parent: the group is the control, not its first card.
+      const { values, helpers, scope, imports } = await scriptsOf(descriptor, id)
+      const markersOf = new Map<TemplateElement, string[]>()
+      const add = (element: TemplateElement, markers: string[]) => markersOf.set(element, [...markersOf.get(element) ?? [], ...markers])
+      for (const { element, parent } of elementsOf(root.children)) {
+        const controls = (await controlMarkersOf(element, scope)).map(marker => `'${marker}'`)
+        const repeated = element.props.some(prop => prop.name === 'for')
+        add(repeated && parent ? parent : element, controls)
+        // A row of a runtime item binds its own marker. Its names are not settings of the page.
+        if (!hasOwnMarker(element)) {
+          const binding = element.tagType === 1 ? imports.get(element.tag) ?? imports.get(pascalCase(element.tag)) : undefined
+          const child = binding ? await resolveBinding(binding, id) : undefined
+          const isButton = child ? await isButtonComponent(child) : false
+          add(element, namesOf(element, { values, helpers }, isButton).names.flatMap(name => name.marker ? [name.marker] : []))
+        }
+      }
+
+      const output = new MagicString(code)
+      for (const [element, found] of markersOf) {
+        const markers = [...new Set(found)]
+        if (!markers.length)
+          continue
+        const own = element.props.find(prop => prop.name === SETTINGS_SEARCH_ATTRIBUTE) ?? boundProp(element, [SETTINGS_SEARCH_ATTRIBUTE])
+        const ownMarker = !own ? undefined : 'value' in own ? `'${own.value?.content ?? ''}'` : own.exp && 'content' in own.exp ? `(${own.exp.content})` : undefined
+        const all = ownMarker ? [ownMarker, ...markers] : markers
+        const attribute = ` :${SETTINGS_SEARCH_ATTRIBUTE}="${(all.length === 1 ? all[0] : `[${all.join(', ')}].join(' ')`).replaceAll('"', '&quot;')}"`
+        if (own)
+          output.overwrite(own.loc.start.offset, own.loc.end.offset, attribute.trimStart())
+        else
+          output.appendLeft(element.loc.start.offset + 1 + element.tag.length, attribute)
+      }
+      if (providerViews.has(id))
+        await exportViewEntries(descriptor, id, output)
+      return output.hasChanged() ? { code: output.toString(), map: output.generateMap({ source: id, hires: true }) } : undefined
+    },
+  }
+
+  /** Records the views that the provider definitions of a module load. A view that loaded before, as after an edit, loads again. */
+  async function registerProviderViews(code: string, file: string) {
+    const program = await readProgram(file, code)
+    for (const specifier of program ? providerViewImportsOf(program) : []) {
+      const view = await resolveFile(specifier, file)
+      if (!view?.endsWith('.vue') || providerViews.has(view))
+        continue
+      providerViews.add(view)
+      const module = server?.moduleGraph.getModuleById(view)
+      if (module)
+        server?.moduleGraph.invalidateModule(module)
+    }
+  }
+
+  /** Adds the settings of a provider view to its module as {@link SETTINGS_SEARCH_VIEW_EXPORT}, each with its gates. */
+  async function exportViewEntries(descriptor: SFCDescriptor, file: string, output: MagicString) {
+    const scan = await scanComponent(file, NO_USAGE, new Set())
+    const gates = gatesOf(scan.entries, scan.controls)
+    const entries = [...new Set(scan.entries.map(entry => entry.key))].map(key => ({ key, gates: gateChainOf(key, gates) }))
+    const exported = `\nexport const ${SETTINGS_SEARCH_VIEW_EXPORT} = ${JSON.stringify(entries)}\n`
+    if (descriptor.script) {
+      output.appendLeft(descriptor.script.loc.end.offset, exported)
+      return
+    }
+    // A plain script block next to `<script setup>` holds the export. Both blocks need the same language.
+    const lang = descriptor.scriptSetup?.lang ? ` lang="${descriptor.scriptSetup.lang}"` : ''
+    output.append(`\n<script${lang}>${exported}</script>\n`)
+  }
+
+  async function extendRoute(route: SettingsSearchRouteNode) {
+    const file = route.component
+    if (!file || !route.fullPath.startsWith('/settings'))
+      return
+
+    const scan = await scanComponent(file, NO_USAGE, new Set())
+    routesByPage.set(file, { path: route.fullPath, marksItems: scan.marksItems })
+    await updateProvider(route.fullPath, file, scan.marksItems)
+
+    const entries = scan.entries.filter(entry => entry.key !== route.meta.titleKey)
+    const gates = gatesOf(entries, scan.controls)
+    const keys = [...new Set(entries.map(entry => entry.key))]
+    if (keys.length)
+      route.addToMeta({ searchKeys: keys, ...(Object.keys(gates).length ? { searchGates: gates } : {}) })
+    reportNewUnreadableNamesSoon()
+  }
+
+  return { plugin, extendRoute }
+}
diff --git a/packages/stage-shared/package.json b/packages/stage-shared/package.json
index 13e024dc98..44bfd8fe4e 100644
--- a/packages/stage-shared/package.json
+++ b/packages/stage-shared/package.json
@@ -26,6 +26,7 @@
     "./plugin-host": "./src/plugin-host.ts",
     "./screen-ambient-light": "./src/screen-ambient-light/index.ts",
     "./server-channel-qr": "./src/server-channel-qr.ts",
+    "./settings-search": "./src/settings-search/index.ts",
     "./speaker-model": "./src/speaker-model.ts",
     "./stores/screen-ambient-light": "./src/stores/screen-ambient-light.ts",
     "./types/io-trace": "./src/types/io-trace.ts",
diff --git a/packages/stage-shared/src/settings-search/index.ts b/packages/stage-shared/src/settings-search/index.ts
new file mode 100644
index 0000000000..86de1ef6fc
--- /dev/null
+++ b/packages/stage-shared/src/settings-search/index.ts
@@ -0,0 +1,120 @@
+/**
+ * The contract between the settings search index, the pages, and the settings layout.
+ *
+ * The build-time scan in `@proj-airi/stage-pages/vite/settings-search` writes the index and marks the rows.
+ * The settings search in stage-ui reads the index and opens a row.
+ * This module has no runtime dependencies, so both sides can import it.
+ */
+
+/**
+ * The query parameter that names the setting to show after a search opens its page.
+ * It repeats when one result stands for several settings with the same name, such as "Scale" of each model type.
+ */
+export const SETTINGS_SEARCH_QUERY = 'setting'
+
+/**
+ * The query parameter that names the row to show when the setting is not on the page, such as the card of the provider
+ * that lists a model. Static settings keep their gates in the route meta instead.
+ */
+export const SETTINGS_SEARCH_GATE_QUERY = 'setting-gate'
+
+/**
+ * The attribute that marks the row of a searchable setting.
+ * Its value is a key, or several keys separated by spaces, as in `class`. A key never has a space:
+ * an i18n key has none, and {@link settingsSearchItemKey} encodes the parts of a runtime key.
+ */
+export const SETTINGS_SEARCH_ATTRIBUTE = 'data-settings-search'
+
+/** Route meta fields that the settings search reads. */
+export interface SettingsSearchRouteMeta {
+  titleKey?: string
+  title?: string
+  descriptionKey?: string
+  description?: string
+  icon?: string
+  /** The i18n keys of the settings on the page. The build-time scan writes them. */
+  searchKeys?: string[]
+  /** For a setting that shows only in some state, the setting that controls it, such as its switch. The build-time scan writes them. */
+  searchGates?: Record<string, string>
+}
+
+/**
+ * Builds the marker of a runtime item from its kind and its parts, such as a card id and a wake word.
+ *
+ * Use when:
+ * - A provider and its page need the same marker for an item.
+ *
+ * Returns:
+ * - `kind:part:part`, with each part URI-encoded. The marker has no spaces, so a name such as "Hey AIRI" stays one key
+ *   in {@link SETTINGS_SEARCH_ATTRIBUTE}.
+ */
+export function settingsSearchItemKey(kind: string, ...parts: string[]) {
+  return [kind, ...parts.map(part => encodeURIComponent(part))].join(':')
+}
+
+/** The settings that a search result shows on its page. */
+export interface SettingsSearchTarget {
+  /** The keys of the setting. The page highlights the first one that it shows. */
+  keys: string[]
+  /** The rows to show when no key is on the page, nearest first. */
+  gates?: string[]
+}
+
+/** The address of a page that shows the target. Each key and gate is a query parameter of its own. */
+export function settingsSearchLocation(path: string, target: SettingsSearchTarget) {
+  const params = new URLSearchParams()
+  for (const key of target.keys)
+    params.append(SETTINGS_SEARCH_QUERY, key)
+  for (const gate of target.gates ?? [])
+    params.append(SETTINGS_SEARCH_GATE_QUERY, gate)
+  return `${path}?${params}`
+}
+
+/** The target that a route query names. A page without a search target has no keys. */
+export function settingsSearchTargetOf(query: Readonly<Record<string, unknown>>): Required<SettingsSearchTarget> {
+  const valuesOf = (value: unknown) => (Array.isArray(value) ? value : [value]).filter((item): item is string => typeof item === 'string' && item !== '')
+  return { keys: valuesOf(query[SETTINGS_SEARCH_QUERY]), gates: valuesOf(query[SETTINGS_SEARCH_GATE_QUERY]) }
+}
+
+/** One runtime item, such as a character card or an MCP server, that a settings page lists. */
+export interface SettingsSearchItem {
+  /** The name that a person searches for, such as the card name. */
+  title: string
+  /** Where on the page the item is, when the page lists it in more than one place, such as "Recently deleted". */
+  section?: string
+  /** The marker of the item's row on the page. The row binds the same value to {@link SETTINGS_SEARCH_ATTRIBUTE}. */
+  key: string
+  /**
+   * The markers of the rows to show when the item's row is not on the page, nearest first.
+   * For example, a voice that shows only under some models names those model cards, then the card of its provider.
+   */
+  gates?: string[]
+  /** A page that shows the item itself, such as the page of one card. Without it, the result opens the listing page at the row. */
+  to?: string
+}
+
+/**
+ * The export that the build-time scan adds to a provider view, such as the Hearing controls of a transcription provider.
+ * A page renders such a view by provider at runtime, so its own scan cannot reach it. The view lists its settings instead.
+ */
+export const SETTINGS_SEARCH_VIEW_EXPORT = 'settingsSearchEntries'
+
+/** A setting of a provider view: its i18n key, and the rows to show when it is not on the page, nearest first. */
+export interface SettingsSearchViewEntry {
+  key: string
+  gates: string[]
+}
+
+/** What a provider gets from the search, so its names match the page. */
+export interface SettingsSearchContext {
+  /** Translates a key in the current locale, as the page does. */
+  t: (key: string, params?: Record<string, unknown>) => string
+}
+
+/**
+ * Lists the runtime items of one settings page for the search.
+ *
+ * A page provides it in a sibling file named `<page>.search.ts`, as the default export.
+ * The search calls it when a person starts to search, so it can load data, such as a model catalog.
+ */
+export type SettingsSearchProvider = (context: SettingsSearchContext) => SettingsSearchItem[] | Promise<SettingsSearchItem[]>
diff --git a/packages/stage-ui/src/components/layouts/link-group.story.vue b/packages/stage-ui/src/components/layouts/link-group.story.vue
new file mode 100644
index 0000000000..b7daba7cbc
--- /dev/null
+++ b/packages/stage-ui/src/components/layouts/link-group.story.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { LinkGroup, LinkGroupItem } from '@proj-airi/ui'
+</script>
+
+<template>
+  <Story title="Link Group" group="misc">
+    <Variant id="default" title="Title, icon, and details">
+      <div :class="['max-w-xl p-4']">
+        <LinkGroup title="Modules" icon="i-solar:layers-bold-duotone">
+          <LinkGroupItem href="#" detail="Consciousness">
+            Model
+          </LinkGroupItem>
+          <LinkGroupItem href="#" detail="Hearing › Speech recognition">
+            Model
+          </LinkGroupItem>
+          <LinkGroupItem href="#" detail="Vision">
+            Use the vision <b :class="['font-semibold']">model</b> for chat images
+          </LinkGroupItem>
+          <LinkGroupItem href="#">
+            Modules
+          </LinkGroupItem>
+        </LinkGroup>
+      </div>
+    </Variant>
+    <Variant id="narrow" title="Narrow: the detail cuts first">
+      <div :class="['w-80 p-4']">
+        <LinkGroup title="Providers" icon="i-solar:box-minimalistic-bold-duotone">
+          <LinkGroupItem href="#" detail="Vision › OpenAI-compatible API">
+            API protocol
+          </LinkGroupItem>
+          <LinkGroupItem href="#" detail="Nano Banana">
+            Nano Banana (Google AI Studio)
+          </LinkGroupItem>
+        </LinkGroup>
+      </div>
+    </Variant>
+    <Variant id="plain" title="Without title or icon">
+      <div :class="['max-w-xl p-4']">
+        <LinkGroup>
+          <LinkGroupItem href="#">
+            Characters
+          </LinkGroupItem>
+        </LinkGroup>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/layouts/section.vue b/packages/stage-ui/src/components/layouts/section.vue
index 33d2251c87..e6b0990d80 100644
--- a/packages/stage-ui/src/components/layouts/section.vue
+++ b/packages/stage-ui/src/components/layouts/section.vue
@@ -16,6 +16,7 @@ withDefaults(defineProps<{
   <Collapsible :default="expand">
     <template #trigger="slotProps">
       <button
+        :aria-expanded="slotProps.visible"
         class="w-full flex items-center justify-between rounded-lg px-3 py-2 outline-none transition-all duration-250 ease-in-out sm:px-4 sm:py-3"
         text="neutral-600 dark:neutral-400 sm sm:base"
         bg="neutral-100 dark:neutral-800"
diff --git a/packages/stage-ui/src/components/menu/radio-card-many-select.vue b/packages/stage-ui/src/components/menu/radio-card-many-select.vue
index da1c8b2aa7..f76f49f974 100644
--- a/packages/stage-ui/src/components/menu/radio-card-many-select.vue
+++ b/packages/stage-ui/src/components/menu/radio-card-many-select.vue
@@ -33,6 +33,11 @@ interface Props {
    * expand/collapse stays visible above the grid scroll area (e.g. onboarding modal).
    */
   fillAvailableHeight?: boolean
+  /**
+   * The settings search marker of each item, such as a model's key. A settings page passes it,
+   * so a search result for an item scrolls to that item. Without it, the items have no marker.
+   */
+  searchKeyOf?: (item: Item) => string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -209,6 +214,7 @@ function updateCustomValue(value: string) {
               :id="item.id"
               :key="item.id"
               v-model="modelValue"
+              :data-settings-search="props.searchKeyOf?.(item)"
               :value="item.id"
               :title="item.name"
               :description="item.description"
diff --git a/packages/stage-ui/src/components/menu/voice-card-many-select.vue b/packages/stage-ui/src/components/menu/voice-card-many-select.vue
index 2c016b3eee..3886e694ed 100644
--- a/packages/stage-ui/src/components/menu/voice-card-many-select.vue
+++ b/packages/stage-ui/src/components/menu/voice-card-many-select.vue
@@ -47,6 +47,11 @@ interface Voice {
 
 interface Props {
   voices: Voice[]
+  /**
+   * The settings search marker of each voice. A settings page passes it,
+   * so a search result for a voice scrolls to that voice. Without it, the voices have no marker.
+   */
+  searchKeyOf?: (voice: Voice) => string
   columns?: number
   searchable?: boolean
   searchPlaceholder?: string
@@ -387,6 +392,7 @@ const customVoiceName = ref('')
             :key="voice.id"
             v-model:voice-id="voiceId"
             v-model:custom-voice-name="customVoiceName"
+            :data-settings-search="props.searchKeyOf?.(voice)"
             name="voice"
             class="snap-start"
             :voice="voice"
diff --git a/packages/stage-ui/src/components/modules/stickers.vue b/packages/stage-ui/src/components/modules/stickers.vue
index 3da8993761..68bb617ae8 100644
--- a/packages/stage-ui/src/components/modules/stickers.vue
+++ b/packages/stage-ui/src/components/modules/stickers.vue
@@ -9,7 +9,7 @@ import { useI18n } from 'vue-i18n'
 
 import { chatStickers } from '../../assets/stickers'
 import { StickerValidationError, validateStickerImage } from '../../libs/stickers/import'
-import { useStickersStore } from '../../stores/modules/stickers'
+import { stickerDisplayName, stickerSearchKey, useStickersStore } from '../../stores/modules/stickers'
 import { stickerEmotions } from '../../types/sticker'
 
 const { t } = useI18n()
@@ -33,8 +33,7 @@ const previewSrc = computed(() => validFile.value && preview.value ? preview.val
 const builtin = computed(() => chatStickers.some(sticker => sticker.id === editingId.value))
 
 function displayName(entry: StickerEntry) {
-  const bundled = chatStickers.find(sticker => sticker.id === entry.id)
-  return bundled && entry.name === bundled.description ? t(`settings.pages.modules.stickers.artwork.${entry.id}`) : entry.name
+  return stickerDisplayName(entry, t)
 }
 
 function showError(cause: unknown) {
@@ -164,7 +163,7 @@ async function remove(entry: StickerEntry) {
       {{ formError }}
     </p>
     <ul :aria-label="t('settings.pages.modules.stickers.catalog')" :class="['grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4']">
-      <li v-for="entry in entries" :key="entry.id" :class="['flex flex-col items-center gap-3', 'rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900']">
+      <li v-for="entry in entries" :key="entry.id" :data-settings-search="stickerSearchKey(entry.id)" :class="['flex flex-col items-center gap-3', 'rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900']">
         <img :src="artwork[entry.assetId]" :alt="displayName(entry)" width="96" height="96" :class="['size-24 object-contain']">
         <span :class="['max-w-full break-words text-center text-sm font-medium']">{{ displayName(entry) }}</span>
         <div :class="['flex flex-wrap justify-center gap-1']">
diff --git a/packages/stage-ui/src/components/scenarios/providers/provider-advanced-settings.vue b/packages/stage-ui/src/components/scenarios/providers/provider-advanced-settings.vue
index 1f986cb58c..cac6ad3e74 100644
--- a/packages/stage-ui/src/components/scenarios/providers/provider-advanced-settings.vue
+++ b/packages/stage-ui/src/components/scenarios/providers/provider-advanced-settings.vue
@@ -18,6 +18,7 @@ function toggleVisible() {
   <Collapsible w-full>
     <template #trigger="slotProps">
       <button
+        :aria-expanded="slotProps.visible"
         transition="all ease-in-out duration-250"
         w-full flex items-center gap-1.5 outline-none
         class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
diff --git a/packages/stage-ui/src/components/scenarios/settings/index.ts b/packages/stage-ui/src/components/scenarios/settings/index.ts
index e78f30d682..9b4d5c8a18 100644
--- a/packages/stage-ui/src/components/scenarios/settings/index.ts
+++ b/packages/stage-ui/src/components/scenarios/settings/index.ts
@@ -5,3 +5,5 @@ export { default as MicrophonePicker } from './microphone-picker.vue'
 export type * from './model-settings'
 export { default as ModelCacheManager } from './ModelCacheManager.vue'
 export { default as OptionList } from './option-list.vue'
+export { default as SettingsSearchField } from './settings-search-field.vue'
+export { default as SettingsSearchResults } from './settings-search-results.vue'
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/panel.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/panel.vue
index 28454c7848..26f8c9ded7 100644
--- a/packages/stage-ui/src/components/scenarios/settings/model-settings/panel.vue
+++ b/packages/stage-ui/src/components/scenarios/settings/model-settings/panel.vue
@@ -24,7 +24,7 @@ import VRM from './vrm.vue'
 import { useAiriCardStore } from '../../../../stores/modules/airi-card'
 import { useSettings } from '../../../../stores/settings'
 import { ModelSelectorDialog } from '../../dialogs/model-selector'
-import { resolveModelSettingsPanelRenderer } from './runtime'
+import { MODEL_PICKER_SEARCH_KEY, resolveModelSettingsPanelRenderer } from './runtime'
 
 interface ModelSettingsPanelProps {
   palette: string[]
@@ -100,7 +100,7 @@ async function handleModelPick(selectedModel: DisplayModel | undefined) {
       </Callout>
       <div :class="['flex flex-wrap items-center gap-2']">
         <ModelSelectorDialog v-model:show="modelSelectorOpen" :selected-model="stageModelSelectedDisplayModel" @pick="handleModelPick">
-          <Button>
+          <Button :data-settings-search="MODEL_PICKER_SEARCH_KEY">
             {{ t('settings.model-select.select-model.button') }}
           </Button>
         </ModelSelectorDialog>
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/runtime.ts b/packages/stage-ui/src/components/scenarios/settings/model-settings/runtime.ts
index 8347ede039..429cfc39a0 100644
--- a/packages/stage-ui/src/components/scenarios/settings/model-settings/runtime.ts
+++ b/packages/stage-ui/src/components/scenarios/settings/model-settings/runtime.ts
@@ -2,6 +2,12 @@ import type { StageAvatarBoundsPayload, StageViewState } from '@proj-airi/stage-
 
 import type { StageModelRenderer } from '../../../../stores/settings/stage-model'
 
+/**
+ * The marker of the button that opens the model picker. The display models live in that dialog,
+ * so a settings search result for a model points to this button.
+ */
+export const MODEL_PICKER_SEARCH_KEY = 'display-model-picker'
+
 export type ModelSettingsRuntimeRenderer = 'disabled' | 'live2d' | 'vrm' | 'spine' | 'tachie' | 'mmd' | 'godot'
 export type ModelSettingsRuntimePhase = 'pending' | 'loading' | 'binding' | 'mounted' | 'no-model' | 'error'
 
diff --git a/packages/stage-ui/src/components/scenarios/settings/settings-search-field.story.vue b/packages/stage-ui/src/components/scenarios/settings/settings-search-field.story.vue
new file mode 100644
index 0000000000..0043c0264d
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/settings/settings-search-field.story.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+import SettingsSearchField from './settings-search-field.vue'
+
+const query = shallowRef('model')
+</script>
+
+<template>
+  <Story title="Settings Search Field" group="misc">
+    <Variant id="default" title="With a query">
+      <div :class="['flex flex-col gap-4 p-4']">
+        <SettingsSearchField v-model="query" />
+        <p>Query: {{ query }}. Press Cmd+F or Ctrl+F anywhere to focus the field.</p>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/settings/settings-search-field.vue b/packages/stage-ui/src/components/scenarios/settings/settings-search-field.vue
new file mode 100644
index 0000000000..310579afd5
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/settings/settings-search-field.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Input } from '@proj-airi/ui'
+import { useEventListener } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const query = defineModel<string>({ required: true })
+
+const { t } = useI18n()
+const field = useTemplateRef<HTMLElement>('field')
+
+// Cmd+F or Ctrl+F, the find shortcut of the browser, finds settings while this field is on the page.
+// It moves the focus to the field from anywhere on the page, and selects the old query, so typing replaces it.
+useEventListener(window, 'keydown', (event: KeyboardEvent) => {
+  const command = event.metaKey || event.ctrlKey
+  if (!command || event.altKey || event.shiftKey || event.key.toLowerCase() !== 'f')
+    return
+  event.preventDefault()
+  const input = field.value?.querySelector('input')
+  input?.focus()
+  input?.select()
+})
+</script>
+
+<template>
+  <div ref="field" :class="['settings-search-field', 'relative']">
+    <div :class="['i-solar:magnifer-linear', 'pointer-events-none absolute left-3 top-1/2 -translate-y-1/2', 'text-neutral-400 dark:text-neutral-500']" />
+    <Input
+      v-model="query"
+      type="search"
+      :placeholder="t('settings.search.placeholder')"
+      :aria-label="t('settings.search.placeholder')"
+      :class="['pl-9!']"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* The clear button is the native one of a search field, drawn as the magnifier on the left is: a linear icon in light gray. */
+.settings-search-field :deep(input[type='search']::-webkit-search-cancel-button) {
+  --at-apply: 'i-solar:close-circle-linear size-4 text-neutral-400 dark:text-neutral-500';
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.settings-search-field :deep(input[type='search']::-webkit-search-cancel-button:hover) {
+  --at-apply: 'text-neutral-600 dark:text-neutral-300';
+}
+</style>
diff --git a/packages/stage-ui/src/components/scenarios/settings/settings-search-results.vue b/packages/stage-ui/src/components/scenarios/settings/settings-search-results.vue
new file mode 100644
index 0000000000..1cdec8e397
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/settings/settings-search-results.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { SettingsSearchCategory, SettingsSearchResult } from '../../../composables/use-settings-search'
+
+import { LinkGroup, LinkGroupItem } from '@proj-airi/ui'
+import { useResizeObserver } from '@vueuse/core'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<{
+  results: SettingsSearchResult[]
+  /** The text that the person searched for. The matching parts of each name are bold. */
+  query: string
+}>()
+
+/** Joins the pages of a location, for example "Hearing › Wake words". */
+const LOCATION_SEPARATOR = ' › '
+
+interface Group {
+  category: SettingsSearchCategory
+  results: SettingsSearchResult[]
+  /** The place of the best result of the group in the result list. */
+  rank: number
+}
+
+/** The results by category. A category comes in the order of its best result. */
+const groups = computed(() => {
+  const byCategory = new Map<string, Group>()
+  for (const result of props.results) {
+    const group = byCategory.get(result.category.title) ?? { category: result.category, results: [], rank: byCategory.size }
+    group.results.push(result)
+    byCategory.set(result.category.title, group)
+  }
+  return [...byCategory.values()]
+})
+
+// Cards stay whole, in one grid, in the order of the results. A card that changes column keeps its element,
+// so a focused link keeps the focus. Until the cards are measured, they stand in one column.
+const container = useTemplateRef<HTMLElement>('container')
+const cards = useTemplateRef<Array<InstanceType<typeof LinkGroup>>>('cards')
+const width = ref(0)
+const gap = ref(0)
+/** The narrowest column in which every card fits its text. */
+const columnWidth = ref(0)
+/** The height of each card, by category. */
+const heights = ref(new Map<string, number>())
+
+function measure() {
+  if (!container.value)
+    return
+  width.value = container.value.clientWidth
+  gap.value = Number.parseFloat(getComputedStyle(container.value).columnGap) || 0
+  const measured = new Map<string, number>()
+  let widest = 0
+  for (const card of cards.value ?? []) {
+    const element = card.$el as HTMLElement
+    measured.set(element.dataset.category ?? '', element.offsetHeight)
+    widest = Math.max(widest, card.naturalWidth())
+  }
+  columnWidth.value = widest
+  const changed = measured.size !== heights.value.size || [...measured].some(([title, height]) => heights.value.get(title) !== height)
+  if (changed)
+    heights.value = measured
+}
+useResizeObserver(container, measure)
+watch(groups, measure, { flush: 'post' })
+
+/**
+ * The number of columns and the column of each card, by category. `undefined` until the cards are measured.
+ * Each count that fits gets the cards tallest first, each into the shortest column. The lowest tallest column wins,
+ * then the smaller height difference, then the fewer columns.
+ */
+const layout = computed(() => {
+  if (columnWidth.value <= 0 || !groups.value.every(group => heights.value.has(group.category.title)))
+    return undefined
+  const fits = Math.floor((width.value + gap.value) / (columnWidth.value + gap.value))
+  const heightOf = (group: Group) => heights.value.get(group.category.title) ?? 0
+  const tallestFirst = groups.value.toSorted((left, right) => heightOf(right) - heightOf(left) || left.rank - right.rank)
+  const arrange = (count: number) => {
+    const columns = Array.from({ length: count }, () => ({ height: 0, groups: [] as Group[] }))
+    for (const group of tallestFirst) {
+      const shortest = columns.reduce((lowest, column) => column.height < lowest.height ? column : lowest)
+      shortest.groups.push(group)
+      shortest.height += heightOf(group) + gap.value
+    }
+    const heightsOf = columns.map(column => column.height)
+    return { count, columns, tallest: Math.max(...heightsOf), spread: Math.max(...heightsOf) - Math.min(...heightsOf) }
+  }
+  const counts = Array.from({ length: Math.max(1, Math.min(fits, groups.value.length)) }, (_, index) => index + 1)
+  const { count, columns } = counts.map(arrange).reduce((best, next) =>
+    next.tallest < best.tallest || (next.tallest === best.tallest && next.spread < best.spread) ? next : best)
+  // The column with the best card comes first. The DOM order keeps the order of the results in each column.
+  const bestRank = (column: { groups: Group[] }) => Math.min(...column.groups.map(group => group.rank))
+  const columnOf = new Map<string, number>()
+  columns.toSorted((left, right) => bestRank(left) - bestRank(right))
+    .forEach((column, index) => column.groups.forEach(group => columnOf.set(group.category.title, index)))
+  return { count, columnOf }
+})
+
+// The grid has rows of 1px, and each card spans as many rows as its height and the gap below it.
+// A card with a set column takes the first free rows in that column, so the cards of a column stack in the order of the results.
+const gridStyle = computed(() => layout.value
+  ? { gridTemplateColumns: `repeat(${layout.value.count}, minmax(0, 1fr))`, gridAutoRows: '1px', gridAutoFlow: 'row dense', rowGap: '0px' }
+  : { gridTemplateColumns: 'minmax(0, 1fr)' })
+function cardStyle(group: Group) {
+  const column = layout.value?.columnOf.get(group.category.title)
+  return column === undefined
+    ? undefined
+    : { gridColumn: `${column + 1}`, gridRowEnd: `span ${(heights.value.get(group.category.title) ?? 0) + gap.value}` }
+}
+
+const needle = computed(() => props.query.trim().toLocaleLowerCase())
+
+/** The parts of a name, with each part that matches the query marked. Bold marks a match, so color stays for hover. */
+function partsOf(title: string) {
+  const query = needle.value
+  const lower = title.toLocaleLowerCase()
+  const parts: Array<{ text: string, match: boolean }> = []
+  let from = 0
+  for (let at = query ? lower.indexOf(query) : -1; at !== -1; at = lower.indexOf(query, from)) {
+    if (at > from)
+      parts.push({ text: title.slice(from, at), match: false })
+    parts.push({ text: title.slice(at, at + query.length), match: true })
+    from = at + query.length
+  }
+  if (from < title.length)
+    parts.push({ text: title.slice(from), match: false })
+  return parts
+}
+</script>
+
+<template>
+  <div ref="container" :class="['grid items-start gap-3']" :style="gridStyle">
+    <LinkGroup
+      v-for="group in groups"
+      ref="cards"
+      :key="group.category.title"
+      :data-category="group.category.title"
+      :title="group.category.title"
+      :icon="group.category.icon"
+      :style="cardStyle(group)"
+    >
+      <LinkGroupItem
+        v-for="result in group.results"
+        :key="`${result.to}\n${result.title}`"
+        :as="RouterLink"
+        :to="result.to"
+        :detail="result.location.join(LOCATION_SEPARATOR)"
+      >
+        <template v-for="(part, partIndex) in partsOf(result.title)" :key="partIndex">
+          <b v-if="part.match" :class="['font-semibold']">{{ part.text }}</b>
+          <template v-else>
+            {{ part.text }}
+          </template>
+        </template>
+      </LinkGroupItem>
+    </LinkGroup>
+  </div>
+</template>
diff --git a/packages/stage-ui/src/composables/use-settings-search.ts b/packages/stage-ui/src/composables/use-settings-search.ts
new file mode 100644
index 0000000000..d35580b306
--- /dev/null
+++ b/packages/stage-ui/src/composables/use-settings-search.ts
@@ -0,0 +1,443 @@
+import type { SettingsSearchItem, SettingsSearchProvider, SettingsSearchRouteMeta } from '@proj-airi/stage-shared/settings-search'
+import type { MaybeRefOrGetter } from 'vue'
+
+import type { ProviderMetadata } from '../libs/providers/metadata'
+
+import { errorMessageFrom } from '@moeru/std'
+import { SETTINGS_SEARCH_ATTRIBUTE, settingsSearchLocation, settingsSearchTargetOf } from '@proj-airi/stage-shared/settings-search'
+import { storeToRefs } from 'pinia'
+import { computed, onScopeDispose, shallowRef, toValue, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { toast } from 'vue-sonner'
+
+import { useProviderStore } from '../stores/providers/provider'
+
+/** The top-level settings page that holds a search result, such as "Modules". */
+export interface SettingsSearchCategory {
+  title: string
+  icon?: string
+}
+
+/** A page or a setting that a settings search can open. */
+export interface SettingsSearchResult {
+  /** The name of the page or the setting. */
+  title: string
+  /** The top-level page that holds the result. A top-level page is its own category. */
+  category: SettingsSearchCategory
+  /** The pages and the section between the category and the result, from the top. */
+  location: string[]
+  to: string
+}
+
+/** A settings page in the search index. */
+interface SearchPage {
+  title: string
+  /** The titles of the pages above this page, from the top. The first one is the category. */
+  location: string[]
+  category: SettingsSearchCategory
+  searchKeys: string[]
+}
+
+const SETTINGS_ROOT = '/settings'
+const PROVIDERS_PAGE = '/settings/providers'
+/** A page can render its rows after async data loads. Stop waiting for the row after this time. */
+const REVEAL_TIMEOUT_MS = 3000
+/** When the page stops changing for this long and the row is still missing, the current state hides it. */
+const REVEAL_QUIET_MS = 600
+/** A page can render its rows again, such as after it reloads a list. The highlight follows the new row for this long. */
+const REVEAL_FOLLOW_MS = 10000
+/** Any of these inputs means that the person took over the page, so the search stops moving it. */
+const TAKE_OVER_EVENTS = ['wheel', 'touchstart', 'pointerdown', 'keydown'] as const
+/** How long the row keeps its highlight before it fades out. */
+const HIGHLIGHT_MS = 1600
+/** The highlight is an outline like the focus outline of AIRI buttons. It keeps the surface of the row. */
+const HIGHLIGHT_CLASSES = ['outline-2', 'outline-solid']
+/** The outline sits outside the row when it fits there, and inside the row when a parent would cut it. */
+const HIGHLIGHT_OUTSIDE_CLASS = 'outline-offset-4'
+const HIGHLIGHT_INSIDE_CLASS = '-outline-offset-2'
+/** The room that the outline takes outside the row: its offset and its width, in pixels. */
+const HIGHLIGHT_OUTSIDE_ROOM = 6
+const HIGHLIGHT_COLOR_CLASS = 'outline-primary-400/60'
+/** The outline fades to transparent. Its style must stay solid until then, because a style change does not animate. */
+const HIGHLIGHT_FADE_CLASSES = ['transition-[outline-color]', 'duration-500']
+const HIGHLIGHT_FADE_MS = 500
+const HIGHLIGHT_FADED_CLASS = 'outline-transparent'
+/** A row without its own corners gets these, so the outline is not square. A card keeps its corners. */
+const HIGHLIGHT_CORNER_CLASSES = ['rounded-lg']
+
+/**
+ * Finds settings pages, the settings on them, and providers by name.
+ *
+ * Use when:
+ * - The settings home filters its list as the user types.
+ *
+ * Expects:
+ * - Settings routes keep their titles in route meta, as the settings layout reads them.
+ * - The build-time scan in `@proj-airi/stage-pages/vite/settings-search` wrote `searchKeys` into the route meta.
+ * - `providers` lists the runtime items of each page, such as character cards, by route path.
+ *   The search calls them each time a person starts to search, so the items are fresh.
+ *
+ * Returns:
+ * - The results in index order, with titles that start with the query first. An empty query returns no results.
+ */
+export function useSettingsSearch(
+  query: MaybeRefOrGetter<string>,
+  providers: Readonly<Record<string, () => Promise<SettingsSearchProvider>>> = {},
+) {
+  const router = useRouter()
+  const { t } = useI18n()
+  const {
+    allChatProvidersMetadata,
+    allVisionProvidersMetadata,
+    allAudioSpeechProvidersMetadata,
+    allAudioTranscriptionProvidersMetadata,
+  } = storeToRefs(useProviderStore())
+
+  /** The runtime items of each page, by route path. */
+  const itemsByPath = shallowRef<ReadonlyMap<string, SettingsSearchItem[]>>(new Map())
+  const items = computed(() => [...itemsByPath.value].flatMap(([path, pathItems]) => pathItems.map(item => ({ path, item }))))
+  let loadGeneration = 0
+
+  /** Loads every provider. Each page's items show as soon as they arrive, so a slow catalog does not hold back the cards. */
+  function loadItems() {
+    const generation = ++loadGeneration
+    for (const [path, load] of Object.entries(providers)) {
+      void (async () => {
+        try {
+          const provide = await load()
+          const loaded = await provide({ t })
+          if (generation === loadGeneration)
+            itemsByPath.value = new Map([...itemsByPath.value, [path, loaded]])
+        }
+        catch (error) {
+          // One failing provider, such as an offline model catalog, must not hide the other results.
+          console.warn(`[settings search] The items of ${path} did not load:`, errorMessageFrom(error) ?? error)
+        }
+      })()
+    }
+  }
+
+  watch(() => toValue(query).trim() !== '', (searching) => {
+    if (searching)
+      loadItems()
+  }, { immediate: true })
+
+  const index = computed<SettingsSearchResult[]>(() => {
+    const pages = new Map<string, SearchPage>()
+
+    // Routes with parameters, such as one card, need data that a route does not have. Providers name theirs below.
+    for (const route of router.getRoutes()) {
+      if (!route.path.startsWith(`${SETTINGS_ROOT}/`) || route.path.includes(':'))
+        continue
+      const meta = route.meta as SettingsSearchRouteMeta
+      const title = meta.titleKey ? t(meta.titleKey) : meta.title
+      if (!title)
+        continue
+      pages.set(route.path, {
+        title,
+        location: [],
+        category: { title, icon: meta.icon },
+        searchKeys: meta.searchKeys ?? [],
+      })
+    }
+
+    // The location of a page is the titled pages on its path, from the top. The top one is its category.
+    for (const [path, page] of pages) {
+      const segments = path.slice(SETTINGS_ROOT.length + 1).split('/')
+      const ancestors = segments.slice(0, -1)
+        .map((_, end) => pages.get(`${SETTINGS_ROOT}/${segments.slice(0, end + 1).join('/')}`))
+        .filter(ancestor => ancestor !== undefined)
+      page.location = ancestors.map(ancestor => ancestor.title)
+      page.category = ancestors[0]?.category ?? page.category
+    }
+
+    // Provider pages take their names from the provider registry, as the providers page shows them.
+    // A provider page can be a route with a parameter, so its settings come from the route that its link resolves to.
+    const providersPage = pages.get(PROVIDERS_PAGE)
+    const providerGroups: Array<[string, ProviderMetadata[]]> = [
+      ['chat', allChatProvidersMetadata.value],
+      ['vision', allVisionProvidersMetadata.value],
+      ['speech', allAudioSpeechProvidersMetadata.value],
+      ['transcription', allAudioTranscriptionProvidersMetadata.value],
+    ]
+    // Some providers keep their settings on a module page, such as a local transcriber on the speech recognition page.
+    // Such a provider is a result of its own, under that page, and the page keeps its own entry and settings.
+    const providerPages: Array<[string, SearchPage]> = []
+    for (const [kind, providers] of providerGroups) {
+      if (!providersPage)
+        break
+      const location = [providersPage.title, t(`settings.pages.providers.categories.${kind}.title`)]
+      for (const provider of providers) {
+        // The providers page hides the No Speech choice. It has no settings.
+        if (!provider.to || provider.id === 'speech-noop')
+          continue
+        const routePage = pages.get(provider.to)
+        const meta = router.resolve(provider.to).matched.at(-1)?.meta as SettingsSearchRouteMeta | undefined
+        providerPages.push([provider.to, {
+          title: provider.localizedName,
+          location: routePage ? [...routePage.location, routePage.title] : location,
+          category: routePage?.category ?? providersPage.category,
+          searchKeys: routePage ? [] : meta?.searchKeys ?? [],
+        }])
+      }
+    }
+    const providerPageByPath = new Map(providerPages.toReversed())
+
+    const results: SettingsSearchResult[] = []
+    // A location starts with the category. The result names the category apart, so its location is what comes after it.
+    const below = (titles: string[]) => titles.slice(1)
+    // A runtime item opens its own page, or the listing page at its row. Its location is the page that lists it.
+    for (const { path, item } of items.value) {
+      const itemPath = (item.to ?? '').split('?')[0]
+      const listing = pages.get(path) ?? pages.get(itemPath) ?? providerPageByPath.get(itemPath)
+      if (!listing)
+        continue
+      results.push({
+        title: item.title,
+        category: listing.category,
+        location: below([...listing.location, listing.title, ...(item.section ? [item.section] : [])]),
+        to: item.to ?? settingsSearchLocation(path, { keys: [item.key], gates: item.gates }),
+      })
+    }
+    for (const [path, page] of [...pages, ...providerPages]) {
+      results.push({
+        title: page.title,
+        category: page.category,
+        location: below(page.location),
+        to: path,
+      })
+      // A section and its switch often share a name, such as "Microphone", and each model type has its own "Scale".
+      // One result per name and page lists all those keys, so the page highlights whichever one it shows.
+      const keysByTitle = new Map<string, string[]>()
+      for (const key of page.searchKeys) {
+        const title = t(key)
+        if (title !== page.title)
+          keysByTitle.set(title, [...keysByTitle.get(title) ?? [], key])
+      }
+      for (const [title, keys] of keysByTitle) {
+        results.push({
+          title,
+          category: page.category,
+          location: below([...page.location, page.title]),
+          to: settingsSearchLocation(path, { keys }),
+        })
+      }
+    }
+    // The same name at the same place can come twice, such as a provider page and the provider's card on that page.
+    // Runtime items come first, so the result that points to a row stays.
+    const seen = new Set<string>()
+    return results.filter((result) => {
+      const key = [result.to.split('?')[0], result.title, result.category.title, ...result.location].join('\n')
+      if (seen.has(key))
+        return false
+      seen.add(key)
+      return true
+    })
+  })
+
+  return computed(() => {
+    const needle = toValue(query).trim().toLocaleLowerCase()
+    if (!needle)
+      return []
+
+    const hits = index.value.filter(result => result.title.toLocaleLowerCase().includes(needle))
+    return [
+      ...hits.filter(result => result.title.toLocaleLowerCase().startsWith(needle)),
+      ...hits.filter(result => !result.title.toLocaleLowerCase().startsWith(needle)),
+    ]
+  })
+}
+
+/**
+ * The settings that the current search result names on this page.
+ *
+ * Use when:
+ * - A page renders only part of a long list, such as a batch of devices. It brings the named row into the rendered part.
+ *
+ * Returns:
+ * - The keys and the gates of the route query. Both are empty when the page did not open from a search.
+ */
+export function useSettingsSearchTarget() {
+  const route = useRoute()
+  return computed(() => settingsSearchTargetOf(route.query))
+}
+
+/**
+ * Scrolls to the setting that a search result names, then highlights its row.
+ *
+ * Use when:
+ * - A settings layout owns the scroll container of its pages.
+ *
+ * Expects:
+ * - The route query names the keys of the setting in `setting` parameters, one key in each.
+ *   `setting-gate` parameters can name the rows to show when the setting is not on the page, such as a provider card.
+ * - The build-time scan or the page marked the row with the same key in {@link SETTINGS_SEARCH_ATTRIBUTE},
+ *   and the scan wrote the gate of each conditional setting into `meta.searchGates`.
+ *
+ * Returns:
+ * - Nothing. A setting that shows only in another state is not on the page. Its gate, such as the switch that turns it on,
+ *   gets the highlight instead. Without a gate, such as a setting of another model type, a toast says so.
+ * - When the page renders the row again, such as after it reloads a list, the highlight moves to the new row.
+ *   It stops when the person scrolls, clicks, or types.
+ */
+export function useSettingsSearchReveal(container: MaybeRefOrGetter<HTMLElement | null | undefined>) {
+  const route = useRoute()
+  const target = useSettingsSearchTarget()
+  const { t } = useI18n()
+  let stopWaiting: (() => void) | undefined
+
+  /**
+   * Whether the outline fits outside the row. A parent that clips its content, such as a horizontal strip of cards,
+   * cuts an outline that reaches past the edges of its content. The check uses positions in the content of each parent,
+   * so it does not depend on where the parent is scrolled.
+   */
+  function outlineFitsOutside(row: HTMLElement, root: HTMLElement) {
+    const rect = row.getBoundingClientRect()
+    for (let parent = row.parentElement; parent && parent !== root.parentElement; parent = parent.parentElement) {
+      const style = getComputedStyle(parent)
+      if (style.overflowX === 'visible' && style.overflowY === 'visible')
+        continue
+      const box = parent.getBoundingClientRect()
+      const left = rect.left - box.left - parent.clientLeft + parent.scrollLeft
+      const top = rect.top - box.top - parent.clientTop + parent.scrollTop
+      if (left < HIGHLIGHT_OUTSIDE_ROOM || top < HIGHLIGHT_OUTSIDE_ROOM
+        || left + rect.width + HIGHLIGHT_OUTSIDE_ROOM > parent.scrollWidth
+        || top + rect.height + HIGHLIGHT_OUTSIDE_ROOM > parent.scrollHeight) {
+        return false
+      }
+    }
+    return true
+  }
+
+  function highlight(row: HTMLElement, root: HTMLElement) {
+    // `inline` centers a row of a horizontal strip too, such as a collapsed list of voice cards.
+    row.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' })
+    const corners = getComputedStyle(row).borderRadius === '0px' ? HIGHLIGHT_CORNER_CLASSES : []
+    const offset = outlineFitsOutside(row, root) ? HIGHLIGHT_OUTSIDE_CLASS : HIGHLIGHT_INSIDE_CLASS
+    const added = [...corners, ...HIGHLIGHT_CLASSES, offset, HIGHLIGHT_COLOR_CLASS]
+    row.classList.add(...added)
+    setTimeout(() => {
+      row.classList.add(...HIGHLIGHT_FADE_CLASSES)
+      // The transition must apply before the color changes, or the outline disappears at once.
+      requestAnimationFrame(() => row.classList.replace(HIGHLIGHT_COLOR_CLASS, HIGHLIGHT_FADED_CLASS))
+      setTimeout(() => row.classList.remove(...added, ...HIGHLIGHT_FADE_CLASSES, HIGHLIGHT_FADED_CLASS), HIGHLIGHT_FADE_MS + 100)
+    }, HIGHLIGHT_MS)
+  }
+
+  /** The gates of the keys, nearest first. A gate can have its own gate, such as a switch inside another section. */
+  function gatesOf(keys: string[], gates: Readonly<Record<string, string>>) {
+    const found: string[] = []
+    for (const key of keys) {
+      let gate = gates[key]
+      while (gate && !found.includes(gate)) {
+        found.push(gate)
+        gate = gates[gate]
+      }
+    }
+    return found
+  }
+
+  // The layout resets the scroll position after a path change. This watcher runs after it, in the same flush.
+  // The container is a source too, so a window that opens on a search link still finds the row after mount.
+  watch(() => [route.path, target.value, toValue(container)] as const, ([, { keys, gates }, root]) => {
+    stopWaiting?.()
+    // Settings with the same name, such as "Scale" of each model type, share one result. The page shows one of them.
+    if (!keys.length || !root)
+      return
+
+    const meta = route.matched.at(-1)?.meta as SettingsSearchRouteMeta | undefined
+    const gateKeys = [...new Set([...gates, ...gatesOf([...keys, ...gates], meta?.searchGates ?? {})])]
+    const findAny = (candidates: string[]) => {
+      for (const key of candidates) {
+        const row = root.querySelector<HTMLElement>(`[${SETTINGS_SEARCH_ATTRIBUTE}~="${CSS.escape(key)}"]`)
+        if (row)
+          return row
+      }
+      return null
+    }
+
+    // The row that has the highlight. When the page renders its rows again, the highlight moves to the new row.
+    let shownRow: HTMLElement | undefined
+    const showRow = (row: HTMLElement) => {
+      shownRow = row
+      highlight(row, root)
+    }
+
+    let gateShown = false
+    let quiet: ReturnType<typeof setTimeout> | undefined
+    const opened = new Set<HTMLElement>()
+    // When the row is missing, the nearest gate on the page decides the next step. A collapsed section opens, because that changes
+    // only the view, and the search waits for the row again. Any other gate, such as a switch, only gets the highlight:
+    // search never changes a setting.
+    const settle = () => {
+      if (shownRow)
+        return
+      for (const key of gateKeys) {
+        const gate = findAny([key])
+        if (!gate)
+          continue
+        const trigger = gate.matches('[aria-expanded]') ? gate : gate.querySelector<HTMLElement>('[aria-expanded]')
+        if (trigger?.getAttribute('aria-expanded') === 'false' && !opened.has(trigger)) {
+          opened.add(trigger)
+          trigger.click()
+          return
+        }
+        if (!gateShown) {
+          gateShown = true
+          highlight(gate, root)
+        }
+        return
+      }
+    }
+    const observer = new MutationObserver(() => {
+      if (shownRow?.isConnected)
+        return
+      // The row appeared, such as after its data loaded, or the page rendered it again.
+      const found = findAny(keys)
+      if (found) {
+        showRow(found)
+        return
+      }
+      // A shown row that went away comes back with the list. The gates are only for a row that the page has not shown.
+      if (shownRow)
+        return
+      // The page stopped changing and the setting is still missing, so the current state hides it.
+      clearTimeout(quiet)
+      quiet = setTimeout(settle, REVEAL_QUIET_MS)
+    })
+
+    const row = findAny(keys)
+    if (row)
+      showRow(row)
+    else
+      quiet = setTimeout(settle, REVEAL_QUIET_MS)
+    const timeout = setTimeout(() => {
+      if (shownRow)
+        return
+      const gate = findAny(gateKeys)
+      if (gate && !gateShown) {
+        gateShown = true
+        highlight(gate, root)
+      }
+      else if (!gate) {
+        toast.info(t('settings.search.not-shown', { name: t(keys[0] ?? '') }))
+      }
+    }, REVEAL_TIMEOUT_MS)
+    // The search stops following after a while, or as soon as the person scrolls, clicks, or types.
+    const follow = setTimeout(() => stopWaiting?.(), REVEAL_FOLLOW_MS)
+    const takeOver = () => stopWaiting?.()
+    TAKE_OVER_EVENTS.forEach(type => root.addEventListener(type, takeOver, { passive: true }))
+    observer.observe(root, { childList: true, subtree: true })
+    stopWaiting = () => {
+      observer.disconnect()
+      clearTimeout(timeout)
+      clearTimeout(quiet)
+      clearTimeout(follow)
+      TAKE_OVER_EVENTS.forEach(type => root.removeEventListener(type, takeOver))
+      stopWaiting = undefined
+    }
+  }, { flush: 'post', immediate: true })
+
+  onScopeDispose(() => stopWaiting?.())
+}
diff --git a/packages/stage-ui/src/libs/providers/providers/official/index.ts b/packages/stage-ui/src/libs/providers/providers/official/index.ts
index 9130c73791..1b796b67ed 100644
--- a/packages/stage-ui/src/libs/providers/providers/official/index.ts
+++ b/packages/stage-ui/src/libs/providers/providers/official/index.ts
@@ -125,6 +125,9 @@ export const providerOfficialSpeech = defineProvider({
   icon: OFFICIAL_ICON,
   requiresCredentials: false,
   configuredBy: 'authentication',
+  capabilities: {
+    speech: { transport: 'rest', voicesByModel: true },
+  },
   createProviderConfig: () => officialConfigSchema,
   createProvider(_config) {
     const provider = createOfficialAudioProvider()
@@ -247,7 +250,7 @@ export const providerOfficialSpeechStreaming = defineProvider({
   configuredBy: 'authentication',
   // The speech adapter selects the WebSocket transport from this capability.
   capabilities: {
-    speech: { transport: 'bidirectional-ws' },
+    speech: { transport: 'bidirectional-ws', voicesByModel: true },
   },
   createProviderConfig: () => officialConfigSchema,
   createProvider(_config) {
diff --git a/packages/stage-ui/src/stores/modules/stickers.ts b/packages/stage-ui/src/stores/modules/stickers.ts
index 243d96fd4f..6d6191fe83 100644
--- a/packages/stage-ui/src/stores/modules/stickers.ts
+++ b/packages/stage-ui/src/stores/modules/stickers.ts
@@ -1,6 +1,7 @@
 import type { StickerEntry } from '../../types/sticker'
 
 import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { settingsSearchItemKey } from '@proj-airi/stage-shared/settings-search'
 import { useBroadcastChannel } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, onScopeDispose, ref, watch } from 'vue'
@@ -9,6 +10,17 @@ import { chatStickers } from '../../assets/stickers'
 import { stickersRepo } from '../../database/repos/stickers.repo'
 import { StickerValidationError, validateStickerImage, validateStickerMetadata } from '../../libs/stickers/import'
 
+/** The marker of a sticker's row in settings. The page and the settings search share it. */
+export function stickerSearchKey(id: string) {
+  return settingsSearchItemKey('sticker', id)
+}
+
+/** The name that settings shows for a sticker: the translated name of a bundled sticker, or the name that its owner gave. */
+export function stickerDisplayName(entry: StickerEntry, t: (key: string) => string) {
+  const bundled = chatStickers.find(sticker => sticker.id === entry.id)
+  return bundled && entry.name === bundled.description ? t(`settings.pages.modules.stickers.artwork.${entry.id}`) : entry.name
+}
+
 /** IndexedDB owns the library. Broadcasts invalidate snapshots without sending image bytes between windows. */
 export const useStickersStore = defineStore('stickers', () => {
   const enabled = useLocalStorageManualReset('settings/stickers/enabled', false)
diff --git a/packages/ui/src/components/layouts/index.ts b/packages/ui/src/components/layouts/index.ts
index 40718d1ea2..e7dee0afe5 100644
--- a/packages/ui/src/components/layouts/index.ts
+++ b/packages/ui/src/components/layouts/index.ts
@@ -1,5 +1,7 @@
 export { default as BottomDrawer } from './bottom-drawer.vue'
 export { default as Collapsible } from './collapsible.vue'
+export { default as LinkGroupItem } from './link-group-item.vue'
+export { default as LinkGroup } from './link-group.vue'
 export { default as Screen } from './screen.vue'
 export { default as ScrollableArea } from './scrollable-area.vue'
 export { default as SettingsCard } from './settings-card.vue'
diff --git a/packages/ui/src/components/layouts/link-group-context.ts b/packages/ui/src/components/layouts/link-group-context.ts
new file mode 100644
index 0000000000..8c36eaa7cf
--- /dev/null
+++ b/packages/ui/src/components/layouts/link-group-context.ts
@@ -0,0 +1,16 @@
+import type { InjectionKey } from 'vue'
+
+/** What a `LinkGroupItem` tells the `LinkGroup` that holds it. */
+export interface LinkGroupItemHandle {
+  /** The element of the item. The group puts the dots of the item on its own dot grid. */
+  element: () => HTMLElement | undefined
+  /** The narrowest width at which the item does not cut its text. The item measures its own parts. */
+  naturalWidth: () => number
+}
+
+export interface LinkGroupContext {
+  /** Adds an item to the group. Call the returned function when the item goes away. */
+  register: (item: LinkGroupItemHandle) => () => void
+}
+
+export const linkGroupContextKey: InjectionKey<LinkGroupContext> = Symbol('link-group')
diff --git a/packages/ui/src/components/layouts/link-group-item.vue b/packages/ui/src/components/layouts/link-group-item.vue
new file mode 100644
index 0000000000..f401edc977
--- /dev/null
+++ b/packages/ui/src/components/layouts/link-group-item.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ComponentPublicInstance } from 'vue'
+
+import { Primitive } from 'reka-ui'
+import { inject, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+
+import { linkGroupContextKey } from './link-group-context'
+
+withDefaults(defineProps<{
+  /** Element or component that the item renders as, such as `RouterLink`. Other attributes, such as `to`, pass to it. */
+  as?: PrimitiveProps['as']
+  /** A short note on the right, such as where the link goes. It shrinks and cuts before the name does. */
+  detail?: string
+}>(), {
+  as: 'a',
+})
+
+const root = useTemplateRef<ComponentPublicInstance>('root')
+const nameBox = useTemplateRef<HTMLElement>('nameBox')
+const nameText = useTemplateRef<HTMLElement>('nameText')
+const detailBox = useTemplateRef<HTMLElement>('detailBox')
+const detailText = useTemplateRef<HTMLElement>('detailText')
+const arrow = useTemplateRef<HTMLElement>('arrow')
+const element = () => root.value?.$el as HTMLElement | undefined
+
+/**
+ * The narrowest width at which the item does not cut its text: each part at its natural width, with the gaps and the padding.
+ * A text sits in an inline box inside its part. The inline box keeps the full width of the text when the part cuts it.
+ */
+function naturalWidth() {
+  const item = element()
+  if (!item)
+    return 0
+  const style = getComputedStyle(item)
+  const textWidth = (box: HTMLElement | null, text: HTMLElement | null) => box && text
+    ? Math.max(text.getBoundingClientRect().width, Number.parseFloat(getComputedStyle(box).minWidth) || 0)
+    : undefined
+  const parts = [textWidth(nameBox.value, nameText.value), textWidth(detailBox.value, detailText.value), arrow.value?.offsetWidth]
+    .filter(width => width !== undefined)
+  const gaps = Number.parseFloat(style.columnGap) * Math.max(0, parts.length - 1)
+  const padding = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight)
+  return parts.reduce((sum, width) => sum + width, 0) + gaps + padding
+}
+
+const group = inject(linkGroupContextKey, undefined)
+let unregister: (() => void) | undefined
+onMounted(() => {
+  unregister = group?.register({ element, naturalWidth })
+})
+onBeforeUnmount(() => unregister?.())
+</script>
+
+<template>
+  <Primitive
+    ref="root"
+    :as="as"
+    :class="[
+      'link-group-item',
+      'relative isolate overflow-hidden',
+      'flex items-center gap-3',
+      'rounded-lg py-2.5 pl-3 pr-2.5',
+      'outline-none',
+    ]"
+  >
+    <!-- The name keeps its width. The detail shrinks and cuts first. -->
+    <span ref="nameBox" :class="['link-group-item-name', 'min-w-[4em] flex-[0_1_auto] truncate', 'text-base']">
+      <span ref="nameText"><slot /></span>
+    </span>
+    <span
+      v-if="detail || $slots.detail"
+      ref="detailBox"
+      :class="[
+        'link-group-item-detail',
+        'min-w-[3em] flex-[1_4_auto] truncate text-right',
+        'text-[13px] leading-[18px] text-neutral-400 dark:text-neutral-500',
+      ]"
+    >
+      <span ref="detailText"><slot name="detail">{{ detail }}</slot></span>
+    </span>
+    <div
+      ref="arrow"
+      :class="[
+        'link-group-item-arrow',
+        'i-solar:alt-arrow-right-linear ml-auto size-4 shrink-0',
+        'text-neutral-400 dark:text-neutral-500',
+      ]"
+    />
+  </Primitive>
+</template>
+
+<style scoped>
+/* The theme color sweeps in from the left and fills the item, fading toward the right. */
+.link-group-item::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: 30%;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.4s ease-in-out;
+}
+
+/*
+ * The dots under the item light up in the theme color. LinkGroup shifts them onto its own dot grid.
+ * The dots take the text color: `bg-dotted-[primary-300/50]` drops theme colors, and a text color utility keeps them.
+ */
+.link-group-item::after {
+  --at-apply: 'bg-dotted-[current] text-primary-300/50 dark:text-primary-200/20';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-size: 10px 10px;
+  background-position: var(--link-group-dot-x, 0) var(--link-group-dot-y, 0);
+  mask-image: linear-gradient(to right, white 10%, transparent 75%);
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.4s ease-in-out;
+}
+
+.link-group-item:hover::before,
+.link-group-item:focus-visible::before {
+  width: 100%;
+  opacity: 1;
+}
+
+.link-group-item:hover::after,
+.link-group-item:focus-visible::after {
+  opacity: 1;
+}
+
+/* Keyboard focus looks like hover, with an outline as well. */
+.link-group-item:focus-visible {
+  --at-apply: 'outline-2 outline-solid -outline-offset-2 outline-primary-300 dark:outline-primary-400/50';
+}
+
+.link-group-item-name,
+.link-group-item-detail {
+  transition: color 0.3s ease-in-out;
+}
+
+.link-group-item-arrow {
+  opacity: 0.6;
+  transition: all 0.3s ease-in-out;
+}
+
+.link-group-item:hover .link-group-item-name,
+.link-group-item:focus-visible .link-group-item-name {
+  --at-apply: text-primary-600 dark:text-primary-300;
+}
+
+.link-group-item:hover .link-group-item-detail,
+.link-group-item:focus-visible .link-group-item-detail {
+  --at-apply: text-primary-600 dark:text-primary-300;
+  opacity: 0.8;
+}
+
+.link-group-item:hover .link-group-item-arrow,
+.link-group-item:focus-visible .link-group-item-arrow {
+  --at-apply: text-primary-500 dark:text-primary-400;
+  opacity: 1;
+  transform: translateX(2px);
+}
+</style>
diff --git a/packages/ui/src/components/layouts/link-group.vue b/packages/ui/src/components/layouts/link-group.vue
new file mode 100644
index 0000000000..f5844c5ae8
--- /dev/null
+++ b/packages/ui/src/components/layouts/link-group.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { LinkGroupItemHandle } from './link-group-context'
+
+import { useResizeObserver } from '@vueuse/core'
+import { nextTick, provide, useTemplateRef } from 'vue'
+
+import { linkGroupContextKey } from './link-group-context'
+
+defineProps<{
+  /** The name of the group, shown small in the top-left corner. */
+  title?: string
+  /** An Iconify class, such as `i-solar:layers-bold-duotone`. It shows next to the title, and large and faded in the bottom-right corner. */
+  icon?: string
+}>()
+
+const group = useTemplateRef<HTMLElement>('group')
+const items = new Set<LinkGroupItemHandle>()
+
+// The dots of a hovered item sit on the dot grid of the group. The group shifts them by the offset of the item,
+// again when its size changes, as items come or go.
+function alignDots() {
+  for (const item of items) {
+    const element = item.element()
+    element?.style.setProperty('--link-group-dot-x', `${-element.offsetLeft}px`)
+    element?.style.setProperty('--link-group-dot-y', `${-element.offsetTop}px`)
+  }
+}
+useResizeObserver(group, alignDots)
+
+// Many items mount in one update, so they share one alignment after it.
+let alignScheduled = false
+function scheduleAlign() {
+  if (alignScheduled)
+    return
+  alignScheduled = true
+  void nextTick(() => {
+    alignScheduled = false
+    alignDots()
+  })
+}
+
+provide(linkGroupContextKey, {
+  register(item) {
+    items.add(item)
+    scheduleAlign()
+    return () => items.delete(item)
+  },
+})
+
+/**
+ * The narrowest width at which no item cuts its text: the widest item, with the padding and the border of the group around it.
+ * A layout can use it to decide how many groups fit side by side.
+ */
+function naturalWidth() {
+  const element = group.value
+  if (!element)
+    return 0
+  const style = getComputedStyle(element)
+  const frame = element.offsetWidth - element.clientWidth + Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight)
+  return Math.ceil(Math.max(0, ...[...items].map(item => item.naturalWidth())) + frame)
+}
+
+defineExpose({ naturalWidth })
+</script>
+
+<template>
+  <section
+    ref="group"
+    :aria-label="title"
+    :class="[
+      'link-group',
+      'relative isolate overflow-hidden',
+      'rounded-xl px-1.5 pb-2 pt-1.5',
+      'border-2 border-solid border-neutral-100 dark:border-neutral-800/25',
+      'bg-neutral-50 dark:bg-neutral-900',
+    ]"
+  >
+    <!-- The faded icon sits in the bottom-right corner and the edge cuts it, as on the settings category cards. -->
+    <div
+      v-if="icon"
+      :class="[
+        'link-group-icon',
+        'absolute -bottom-7 -right-2 -z-1 size-28',
+        'text-neutral-400/50 dark:text-neutral-600/50',
+        'transition-all duration-400 ease-in-out',
+        icon,
+      ]"
+    />
+    <div
+      v-if="title"
+      :class="[
+        'flex items-center gap-1.5',
+        'px-3 pb-1 pt-2',
+        'text-sm text-neutral-500 dark:text-neutral-400',
+      ]"
+    >
+      <div v-if="icon" :class="['size-4 shrink-0', 'text-neutral-400 dark:text-neutral-500', icon]" />
+      {{ title }}
+    </div>
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+/* The dot texture fills the top-left corner and fades out toward the middle, as on IconItem. */
+.link-group::after {
+  --at-apply: 'bg-dotted-[neutral-200/60] dark:bg-dotted-[neutral-700/25]';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-size: 10px 10px;
+  mask-image: linear-gradient(165deg, white 20%, transparent 40%);
+}
+
+.link-group-icon {
+  opacity: 0.5;
+}
+
+/* Hover only scales the icon. It keeps its gray, so it never covers the last item in the theme color. */
+.link-group:has(.link-group-item:hover) .link-group-icon,
+.link-group:has(.link-group-item:focus-visible) .link-group-icon {
+  scale: 1.1;
+}
+</style>