@chassis-ui/docs 0.3.4 → 0.3.6

package/README.md

@@ -2,7 +2,7 @@
 
 > Shared Astro layouts, components, and utilities for Chassis documentation sites.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.3.4](https://img.shields.io/badge/Version-0.3.4-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.3.6](https://img.shields.io/badge/Version-0.3.6-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
 
 ## Overview
 
@@ -26,11 +26,19 @@ npm install @chassis-ui/docs
 
 ```json
 {
-  "astro": "^5.0.0"
+  "@astrojs/markdown-remark": "^7.0.0",
+  "@chassis-ui/css": ">=0.3.2",
+  "@pagefind/component-ui": "^1.0.0",
+  "@shikijs/transformers": "^4.3.1",
+  "astro": "^7.0.0",
+  "htmlparser2": "^12.0.0",
+  "rehype-autolink-headings": "^7.0.0",
+  "sass": "^1.101.0",
+  "shiki": "^4.3.1"
 }
 ```
 
-In practice, sites also install the rest of the Chassis stack — `@chassis-ui/css`, `@chassis-ui/tokens`, `@chassis-ui/icons` — to render the layouts and styles correctly.
+In practice, sites also install the rest of the Chassis stack — `@chassis-ui/tokens`, `@chassis-ui/icons` — to render the layouts and styles correctly.
 
 ## Usage
 
@@ -55,7 +63,7 @@ import { generateTOC, processImage } from '@chassis-ui/docs'
 
 | Subpath                         | Contents                                                                                      |
 | ------------------------------- | --------------------------------------------------------------------------------------------- |
-| `@chassis-ui/docs`              | Library functions: `chassis`, `image`, `layout`, `rehype`, `toc`, `utils`                     |
+| `@chassis-ui/docs`              | Library functions: `highlight`, `image`, `layout`, `markdown`, `placeholder`, `rehype`, `shortcodes`, `site`, `toc`, `utils` |
 | `@chassis-ui/docs/layouts/*`    | `BaseLayout`, `DocsLayout`, `RedirectLayout`, `SingleLayout`                                  |
 | `@chassis-ui/docs/components/*` | `DocsSidebar`, `FeatureCard`, `NavLink`, `ResponsiveImage`, `TableOfContents`, `ThemeToggler` |
 | `@chassis-ui/docs/shortcodes/*` | MDX shortcode components                                                                      |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "repository": {
     "type": "git",
@@ -54,11 +54,6 @@
     "sass": "^1.101.0",
     "shiki": "^4.3.1"
   },
-  "peerDependenciesMeta": {
-    "@pagefind/component-ui": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "github-slugger": "^2.0.0",
     "image-size": "^2.0.2",
@@ -71,7 +66,6 @@
   "devDependencies": {
     "@types/hast": "^3.0.4",
     "astro": "^7.0.6",
-    "unified": "^11.0.5",
-    "vite": "^8.1.3"
+    "unified": "^11.0.5"
   }
 }

package/src/js/search.js

@@ -22,7 +22,163 @@ const LOADING_SKELETON_DELAY_MS = 200
 const RECENT_STORAGE_KEY = 'cxd:search:recent'
 const RECENT_LIMIT = 5
 
-const instance = getInstanceManager().getInstance('default')
+// ─── Multi-site search ────────────────────────────────────────────────────────
+// Every Chassis project deploys its own Pagefind index under its own path
+// prefix (e.g. `/tokens/pagefind/`), matching the prefix chassis-ui.com's
+// Vercel rewrites proxy that project under (see `ref/VERCEL_CONFIG.md`).
+// This lets one shared instance merge every project's index into a single,
+// site-filterable search — no cross-origin requests required, since
+// `chassis-ui.com/<slug>/...` and `<slug>.vercel.app/<slug>/...` both resolve
+// the same root-relative bundle path.
+
+/** All Chassis projects with their own Pagefind index, in nav order. `website` is the hub (root-level index, no path prefix). */
+const CHASSIS_SITES = [
+  { slug: 'website', label: 'Website' },
+  { slug: 'tokens', label: 'Tokens' },
+  { slug: 'css', label: 'CSS' },
+  { slug: 'assets', label: 'Assets' },
+  { slug: 'icons', label: 'Icons' },
+  { slug: 'figma', label: 'Figma' }
+]
+
+// Hosts where every project's index is *expected* to be reachable at its
+// root-relative bundle path via Vercel's proxy rewrites. Everywhere else
+// (local dev, direct `*.vercel.app` preview deployments) only this site's own
+// pages exist, so merging would always 404 — not attempted there at all.
+const CANONICAL_HOSTS = new Set(['chassis-ui.com', 'staging.chassis-ui.com'])
+
+const getBundlePath = (slug) => (slug === 'website' ? '/pagefind/' : `/${slug}/pagefind/`)
+
+const getCurrentSite = () => {
+  const [, firstSegment] = typeof location === 'undefined' ? [] : location.pathname.split('/')
+  return CHASSIS_SITES.find((site) => site.slug === firstSegment) ?? CHASSIS_SITES[0]
+}
+
+const isCanonicalHost = () =>
+  typeof location !== 'undefined' && CANONICAL_HOSTS.has(location.hostname)
+
+const currentSite = getCurrentSite()
+
+// Pagefind derives `baseUrl` from `bundlePath` by stripping the trailing
+// `pagefind` segment (e.g. `/tokens/pagefind/` -> `/tokens/`), then prepends
+// that to every result's raw URL. Those raw URLs are already site-root-relative
+// (e.g. `tokens/docs/...`, because that's where the page actually lives inside
+// `_site`), so the auto-derived baseUrl would double up the prefix into
+// `/tokens/tokens/docs/...`. Force it back to `/` for every index.
+const BASE_URL = '/'
+
+// NOTE: we deliberately do NOT pass `mergeIndex` here. `@pagefind/component-ui`
+// awaits every entry in that array back-to-back with no try/catch — if a
+// single sibling site's index 404s (e.g. mid-rollout, one repo deployed
+// before another), the whole `__doLoad__` throws and search breaks entirely,
+// including this site's own results. We instead merge additional sites
+// ourselves afterwards, in `mergeAdditionalSites()` below, so a single
+// unreachable sibling is skipped rather than taking everything down.
+const instance = getInstanceManager().getInstance('default', {
+  bundlePath: getBundlePath(currentSite.slug),
+  baseUrl: BASE_URL,
+  mergeFilter: { site: currentSite.slug }
+})
+
+// Default filter scope: the website (hub) defaults to searching everywhere;
+// every project site defaults to its own results, but can still be widened
+// or switched via the `cxd-search-filter` control.
+if (currentSite.slug !== 'website') {
+  instance.searchFilters = { site: currentSite.slug }
+}
+
+let mergeAttempted = false
+
+// How long to wait for a sibling's Pagefind entry file before assuming it's
+// unreachable (bad deploy, rollout in progress, host down, etc.).
+const PROBE_TIMEOUT_MS = 4000
+
+// Mirrors Pagefind's own language selection in `PagefindInstance.findIndex`:
+// exact `<html lang>` match, then its base subtag, then the language with the
+// most pages. Needed so the probe below checks the same chunk `init()` will
+// actually request.
+const getPreferredLanguageHash = (entry) => {
+  const languages = entry?.languages
+  if (!languages) return null
+  const htmlLang = document.documentElement.getAttribute('lang')?.toLowerCase()
+  if (htmlLang && languages[htmlLang]) return languages[htmlLang].hash
+  const base = htmlLang?.split('-')[0]
+  if (base && languages[base]) return languages[base].hash
+  const [topLanguage] = Object.values(languages).sort((a, b) => b.page_count - a.page_count)
+  return topLanguage?.hash ?? null
+}
+
+/**
+ * Checks whether a sibling site's Pagefind bundle actually exists, without
+ * touching the shared `pf` instance. This matters because a *failed*
+ * `pf.mergeIndex()` call corrupts that instance beyond recovery — there is no
+ * public API to detach a bad merge, and every future search (including this
+ * site's own) throws the same error afterwards.
+ *
+ * `init()` performs two fetches, not one: `pagefind-entry.json`, then the
+ * language-specific `pagefind.<hash>.pf_meta` chunk it points to. Checking
+ * only the entry file misses exactly the failure this is meant to guard
+ * against — a deploy mid-rollout where the entry file has already updated to
+ * reference a hash whose chunk hasn't finished uploading (or was purged) yet.
+ * So we probe both before ever calling `mergeIndex`.
+ */
+const isBundleReachable = async (bundlePath) => {
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), PROBE_TIMEOUT_MS)
+  try {
+    const entryResponse = await fetch(`${bundlePath}pagefind-entry.json`, {
+      signal: controller.signal
+    })
+    if (!entryResponse.ok) return false
+
+    const hash = getPreferredLanguageHash(await entryResponse.json())
+    if (!hash) return false
+
+    const metaResponse = await fetch(`${bundlePath}pagefind.${hash}.pf_meta`, {
+      signal: controller.signal
+    })
+    return metaResponse.ok
+  } catch {
+    return false
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+/**
+ * Loads this site's own Pagefind bundle, then merges every other Chassis
+ * site's index in, one at a time. Each sibling is probed first (see
+ * `isBundleReachable`) so an unreachable one — a bad deploy, a rollout still
+ * in progress across the (separate) Chassis repos, etc. — is silently skipped
+ * instead of breaking search for everyone. Safe to call multiple times; only
+ * does real work once.
+ */
+const mergeAdditionalSites = async () => {
+  if (mergeAttempted) return
+  mergeAttempted = true
+
+  await instance.triggerLoad()
+  const pf = instance.__pagefind__
+  if (!pf || !isCanonicalHost()) return
+
+  const siblings = CHASSIS_SITES.filter((site) => site.slug !== currentSite.slug)
+  await Promise.allSettled(
+    siblings.map(async (site) => {
+      const bundlePath = getBundlePath(site.slug)
+      if (!(await isBundleReachable(bundlePath))) {
+        console.warn(
+          `Chassis search: "${site.slug}" index not reachable at ${bundlePath}, skipping`
+        )
+        return
+      }
+      try {
+        await pf.mergeIndex(bundlePath, { baseUrl: BASE_URL, mergeFilter: { site: site.slug } })
+      } catch (error) {
+        console.warn(`Chassis search: failed to merge the "${site.slug}" index`, error)
+      }
+    })
+  )
+}
 
 // ─── Recent visits ────────────────────────────────────────────────────────────
 // Opt-out via Do Not Track; silently no-op when storage is unavailable.
@@ -70,20 +226,40 @@ const HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'
 const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => HTML_ESCAPES[char])
 
 // Single template for every clickable row: top-level results, sub-results, and
-// recently visited items. `title` and `excerpt` are inlined as-is so callers
-// can either escape them (recents, plain text) or pass Pagefind's pre-marked HTML.
-const renderItem = ({ url, title, excerpt = '', icon, sub = false }) => `
+// recently visited items. `titleHtml`/`excerptHtml` name the contract, not just
+// describe it: callers must pass already-safe HTML, either by running plain
+// text through `escapeHtml` (recents) or by using Pagefind's own pre-marked
+// excerpt (search results, which embed `<mark>` highlights).
+const renderItem = ({ url, titleHtml, excerptHtml = '', icon, sub = false }) => `
   <a class="cxd-search-item${sub ? ' cxd-search-subitem' : ''}" href="${escapeHtml(url)}">
     <svg class="icon cxd-search-item-icon" width="16" height="16" aria-hidden="true">
-      <use href="#${icon}"></use>
+      <use href="/static/icons/chassis-icons.svg#${icon}"></use>
     </svg>
     <div class="cxd-search-item-body">
-      <div class="cxd-search-item-title">${title}</div>
-      ${excerpt ? `<div class="cxd-search-item-excerpt">${excerpt}</div>` : ''}
+      <div class="cxd-search-item-title">${titleHtml}</div>
+      ${excerptHtml ? `<div class="cxd-search-item-excerpt">${excerptHtml}</div>` : ''}
     </div>
   </a>
 `
 
+// Shared wrapper for every rendered list of rows (recents, top-level results).
+const renderResultsList = (itemsHtml) =>
+  `<ol class="list flush cxd-search-results-list">${itemsHtml}</ol>`
+
+// Wires `handlers` (eventType -> bound listener) onto `target` and returns a
+// cleanup function that removes them all — the bind/track/remove dance every
+// element below otherwise repeats by hand in connectedCallback/disconnectedCallback.
+const addListeners = (target, handlers) => {
+  for (const [type, handler] of Object.entries(handlers)) {
+    target.addEventListener(type, handler)
+  }
+  return () => {
+    for (const [type, handler] of Object.entries(handlers)) {
+      target.removeEventListener(type, handler)
+    }
+  }
+}
+
 // ─── Custom elements ──────────────────────────────────────────────────────────
 
 class CxdSearchInput extends HTMLElement {
@@ -94,23 +270,16 @@ class CxdSearchInput extends HTMLElement {
     this.inputEl = this.input
     instance.registerInput(this, { keyboardNavigation: true })
 
-    this._onInput = this._onInput.bind(this)
-    this._onKeydown = this._onKeydown.bind(this)
-    this.input.addEventListener('input', this._onInput)
-    this.input.addEventListener('keydown', this._onKeydown)
-
-    this.input.addEventListener(
-      'focus',
-      () => {
-        instance.triggerLoad()
-      },
-      { once: true }
-    )
+    this._removeListeners = addListeners(this.input, {
+      input: this._onInput.bind(this),
+      keydown: this._onKeydown.bind(this)
+    })
+
+    this.input.addEventListener('focus', () => mergeAdditionalSites(), { once: true })
   }
 
   disconnectedCallback() {
-    this.input?.removeEventListener('input', this._onInput)
-    this.input?.removeEventListener('keydown', this._onKeydown)
+    this._removeListeners?.()
   }
 
   _onInput(event) {
@@ -146,17 +315,16 @@ class CxdSearchResults extends HTMLElement {
     instance.on('results', (result) => this._renderResults(result), this)
     instance.on('error', (error) => this._renderError(error), this)
 
-    this._onKeydown = this._onKeydown.bind(this)
-    this._onClick = this._onClick.bind(this)
-    this.addEventListener('keydown', this._onKeydown)
-    this.addEventListener('click', this._onClick)
+    this._removeListeners = addListeners(this, {
+      keydown: this._onKeydown.bind(this),
+      click: this._onClick.bind(this)
+    })
 
     this._renderEmpty()
   }
 
   disconnectedCallback() {
-    this.removeEventListener('keydown', this._onKeydown)
-    this.removeEventListener('click', this._onClick)
+    this._removeListeners?.()
     this._clearLoadingTimer()
   }
 
@@ -250,24 +418,24 @@ class CxdSearchResults extends HTMLElement {
           <span class="cxd-search-recent-label">Recently visited</span>
           <button type="button" class="cxd-search-recent-clear" data-cxd-search-clear-recent>Clear</button>
         </div>
-        <ol class="list flush cxd-search-results-list">
-          ${recents
+        ${renderResultsList(
+          recents
             .map((visit) => {
               const isSubLink = visit.url.includes('#')
               return `
               <li class="cxd-search-result">
                 ${renderItem({
                   url: visit.url,
-                  title: escapeHtml(visit.title),
-                  excerpt: escapeHtml(visit.excerpt),
+                  titleHtml: escapeHtml(visit.title),
+                  excerptHtml: escapeHtml(visit.excerpt),
                   icon: isSubLink ? 'hashtag-outline' : 'file-outline',
                   sub: isSubLink
                 })}
               </li>
             `
             })
-            .join('')}
-        </ol>
+            .join('')
+        )}
       </div>
     `
   }
@@ -331,11 +499,7 @@ class CxdSearchResults extends HTMLElement {
 
     if (instance.searchTerm !== term) return // newer search started
 
-    this.innerHTML = `
-      <ol class="list flush cxd-search-results-list">
-        ${data.map((result) => this._renderResult(result)).join('')}
-      </ol>
-    `
+    this.innerHTML = renderResultsList(data.map((result) => this._renderResult(result)).join(''))
   }
 
   _renderResult(result) {
@@ -351,7 +515,7 @@ class CxdSearchResults extends HTMLElement {
           .map(
             (sub) => `
           <li class="list-item">
-            ${renderItem({ url: sub.url, title: escapeHtml(sub.title), excerpt: sub.excerpt, icon: 'hashtag-outline', sub: true })}
+            ${renderItem({ url: sub.url, titleHtml: escapeHtml(sub.title), excerptHtml: sub.excerpt, icon: 'hashtag-outline', sub: true })}
           </li>
         `
           )
@@ -361,13 +525,51 @@ class CxdSearchResults extends HTMLElement {
 
     return `
       <li class="list-item cxd-search-result">
-        ${renderItem({ url: result.url, title: escapeHtml(title), excerpt: result.excerpt, icon: 'file-outline' })}
+        ${renderItem({ url: result.url, titleHtml: escapeHtml(title), excerptHtml: result.excerpt, icon: 'file-outline' })}
         ${subResultsHtml}
       </li>
     `
   }
 }
 
+// ─── Site filter ──────────────────────────────────────────────────────────────
+// Dropdown letting the visitor scope results to a single project, or back out
+// to "Everywhere". Always rendered (see `CxdSearchFilter` below) — filtering to
+// a site that hasn't actually been merged in just yields no results.
+
+const FILTER_OPTIONS = [{ slug: '', label: 'Everywhere' }, ...CHASSIS_SITES]
+
+class CxdSearchFilter extends HTMLElement {
+  connectedCallback() {
+    this.select = this.querySelector('select')
+    if (!this.select) return
+
+    // Always rendered — even outside merging (local dev, direct preview
+    // deployments) the current site's own results are tagged with `site`, so
+    // "Everywhere" and the current site both work; switching to a *different*
+    // site just yields no results until it's actually merged in.
+    this.hidden = false
+
+    this.select.innerHTML = FILTER_OPTIONS.map(
+      (option) => `<option value="${option.slug}">${escapeHtml(option.label)}</option>`
+    ).join('')
+    this.select.value = currentSite.slug === 'website' ? '' : currentSite.slug
+
+    this._removeListeners = addListeners(this.select, {
+      change: this._onChange.bind(this)
+    })
+  }
+
+  disconnectedCallback() {
+    this._removeListeners?.()
+  }
+
+  _onChange() {
+    const value = this.select.value
+    instance.triggerSearchWithFilters(instance.searchTerm, value ? { site: value } : {})
+  }
+}
+
 // ─── Registration ─────────────────────────────────────────────────────────────
 
 const defineSearchCustomElements = () => {
@@ -377,6 +579,9 @@ const defineSearchCustomElements = () => {
   if (!customElements.get('cxd-search-results')) {
     customElements.define('cxd-search-results', CxdSearchResults)
   }
+  if (!customElements.get('cxd-search-filter')) {
+    customElements.define('cxd-search-filter', CxdSearchFilter)
+  }
 }
 
 // ─── Trigger shortcut hints ───────────────────────────────────────────────────

package/src/layouts/header/SearchDialog.astro

@@ -44,6 +44,10 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
         />
       </div>
     </cxd-search-input>
+    <cxd-search-filter class="cxd-search-filter" hidden>
+      <label class="visually-hidden" for={`${id}-filter`}>Search in</label>
+      <select id={`${id}-filter`} class="form-input cxd-search-filter-select"></select>
+    </cxd-search-filter>
     <button
       type="button"
       class="close-button"

package/src/scss/_search.scss

@@ -1,418 +1,434 @@
 @use "@chassis-ui/css/scss/mixins" as *;
 @use "@chassis-ui/css/scss/placeholders" as *;
 
-//
-// Pagefind search UI
-//
-
-.cxd-search {
-  position: relative;
-
-  @include media-breakpoint-up(large) {
-    position: absolute;
-    top: 20%;
-    right: 13rem;
-    width: 200px;
-
-    [dir="rtl"] & {
-      right: auto;
-      left: 13rem;
+@layer custom {
+  //
+  // Pagefind search UI
+  //
+
+  .cxd-search {
+    position: relative;
+
+    @include media-breakpoint-up(large) {
+      position: absolute;
+      top: 20%;
+      right: 13rem;
+      width: 200px;
+
+      [dir="rtl"] & {
+        right: auto;
+        left: 13rem;
+      }
     }
+
   }
 
-}
 
+  // Trigger button
+  //
+  // Mobile (< md): icon-only, no chrome.
+  // md+:           expands to a faux input with label and ⌘K shortcut hint.
 
-// Trigger button
-//
-// Mobile (< md): icon-only, no chrome.
-// md+:           expands to a faux input with label and ⌘K shortcut hint.
-
-.cxd-search-trigger {
-  // @extend %form-input;
-  --cx-padding-x: var(--cx-space-xsmall);
-  --cx-padding-y: .375rem;
-  --cx-icon-color: var(--cx-fg-color);
-  display: inline-flex;
-  gap: .5rem;
-  align-items: center;
-  margin-block: .125rem;
-  // padding-inline-end: .5rem;
-  // padding: .25rem .5rem;
-  @include exclude-strokes(form-input);
-  @include font-size(var(--cx-font-size-small));
-  color: var(--cx-fg-subtle);
-  text-align: start;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  @include border-radius(var(--cx-border-radius-medium));
-  @include transition(color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out);
-
-  &:focus-visible {
-    @include focus-ring(true);
-  }
+  .cxd-search-trigger {
+    // @extend %form-input;
+    --cx-padding-x: var(--cx-space-xsmall);
+    --cx-padding-y: .375rem;
+    --cx-icon-color: var(--cx-fg-color);
+    display: inline-flex;
+    gap: .5rem;
+    align-items: center;
+    margin-block: .125rem;
+    // padding-inline-end: .5rem;
+    // padding: .25rem .5rem;
+    @include exclude-strokes(form-input);
+    @include font-size(var(--cx-font-size-small));
+    color: var(--cx-fg-subtle);
+    text-align: start;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    @include border-radius(var(--cx-border-radius-medium));
+    @include transition(color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out);
 
-  @include media-breakpoint-up(large) {
-    --cx-border-color: var(--cx-border-subtle);
-    --cx-icon-size: var(--cx-icon-small);
-    --cx-icon-color: var(--cx-fg-subtle);
-    width: 100%;
-    background-color: var(--cx-bg-main);
-    @include border();
+    &:focus-visible {
+      @include focus-ring(true);
+    }
 
-    &:hover {
-      // --fg-color: var(--cx-fg-main);
-      --cx-icon-color: var(--cx-fg-color);
-      --cx-border-color: var(--cx-border-main);
+    @include media-breakpoint-up(large) {
+      --cx-border-color: var(--cx-border-subtle);
+      --cx-icon-size: var(--cx-icon-small);
+      --cx-icon-color: var(--cx-fg-subtle);
+      width: 100%;
+      background-color: var(--cx-bg-main);
+      @include border();
+
+      &:hover {
+        // --fg-color: var(--cx-fg-main);
+        --cx-icon-color: var(--cx-fg-color);
+        --cx-border-color: var(--cx-border-main);
+      }
     }
   }
-}
 
-.cxd-search-trigger-icon {
-  flex-shrink: 0;
-  color: var(--cx-fg-subtle);
-}
+  .cxd-search-trigger-icon {
+    flex-shrink: 0;
+    color: var(--cx-fg-subtle);
+  }
 
-.cxd-search-trigger-label,
-.cxd-search-trigger-shortcut {
-  display: none;
+  .cxd-search-trigger-label,
+  .cxd-search-trigger-shortcut {
+    display: none;
 
-  @include media-breakpoint-up(large) {
-    display: inline-flex;
+    @include media-breakpoint-up(large) {
+      display: inline-flex;
+    }
   }
-}
 
-.cxd-search-trigger-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .cxd-search-trigger-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.cxd-search-trigger-shortcut {
-  flex-shrink: 0;
-  gap: .125rem;
-}
+  .cxd-search-trigger-shortcut {
+    flex-shrink: 0;
+    gap: .125rem;
+  }
 
-.cxd-search-trigger-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  padding: .125rem .375rem;
-  font-family: var(--cx-font-family-code);
-  @include font-size(var(--cx-font-size-small));
-  @include line-height(var(--cx-line-height-small));
-  color: var(--cx-fg-subtle);
-  background-color: var(--cx-bg-evident);
-  // border: var(--cx-border-width) solid var(--cx-border-color);
-  @include border-radius(var(--cx-border-radius-small));
-}
+  .cxd-search-trigger-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    padding: .125rem .375rem;
+    font-family: var(--cx-font-family-code);
+    @include font-size(var(--cx-font-size-small));
+    @include line-height(var(--cx-line-height-small));
+    color: var(--cx-fg-subtle);
+    background-color: var(--cx-bg-evident);
+    // border: var(--cx-border-width) solid var(--cx-border-color);
+    @include border-radius(var(--cx-border-radius-small));
+  }
 
-// Search dialog shell
-//
-// Top-aligned overlay using the existing `.dialog` surface.
-// Sizing and position make it feel like a command palette.
+  // Search dialog shell
+  //
+  // Top-aligned overlay using the existing `.dialog` surface.
+  // Sizing and position make it feel like a command palette.
+
+  .cxd-search-dialog {
+    --cx-dialog-margin: 1.5rem;
+    --cx-dialog-padding: .75rem;
+    --cx-dialog-header-padding: .75rem;
+    --cx-dialog-footer-padding: .5rem .75rem;
+    --cx-dialog-border-radius: var(--cx-border-radius-large);
+
+    align-self: flex-start;
+    width: 640px;
+    max-height: min(80dvh, 720px);
+    margin-block-start: 3rem;
+    overflow: hidden;
+    background-color: var(--cx-bg-even);
+
+    @include media-breakpoint-down(small) {
+      max-height: calc(100dvh - 4rem);
+    }
+  }
 
-.cxd-search-dialog {
-  --cx-dialog-margin: 1.5rem;
-  --cx-dialog-padding: .75rem;
-  --cx-dialog-header-padding: .75rem;
-  --cx-dialog-footer-padding: .5rem .75rem;
-  --cx-dialog-border-radius: var(--cx-border-radius-large);
+  // Header / search form
 
-  align-self: flex-start;
-  width: 640px;
-  max-height: min(80dvh, 720px);
-  margin-block-start: 3rem;
-  overflow: hidden;
-  background-color: var(--cx-bg-even);
+  .cxd-search-form {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: .75rem;
+    align-items: center;
+    padding: var(--cx-space-medium);
+    border-bottom: 0;
+  }
 
-  @include media-breakpoint-down(small) {
-    max-height: calc(100dvh - 4rem);
+  cxd-search-input {
+    flex-grow: 1;
   }
-}
 
-// Header / search form
+  // Site filter dropdown — only shown when other project indexes were merged
+  // in (see `search.js`), letting the visitor scope results to one project or
+  // back out to "Everywhere".
+  .cxd-search-filter {
+    flex-shrink: 0;
+  }
 
-.cxd-search-form {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: .75rem;
-  align-items: center;
-  padding: var(--cx-space-medium);
-  border-bottom: 0;
-}
+  // .cxd-search-filter-select {
+  //   --cx-padding-y: .375rem;
+  //   --cx-padding-x: .5rem;
+  //   width: auto;
+  //   @include font-size(var(--cx-font-size-small));
+  // }
+  // .cxd-search-input {
+  //   flex: 1;
+  //   width: 100%;
+  //   min-width: 0;
+  //   background-color: transparent;
+  //   border-color: transparent;
+  //   box-shadow: none;
+
+  //   &:focus {
+  //     background-color: transparent;
+  //     border-color: transparent;
+  //     box-shadow: none;
+  //   }
+  // }
 
-cxd-search-input {
-  width: 100%;
-}
-// .cxd-search-input {
-//   flex: 1;
-//   width: 100%;
-//   min-width: 0;
-//   background-color: transparent;
-//   border-color: transparent;
-//   box-shadow: none;
-
-//   &:focus {
-//     background-color: transparent;
-//     border-color: transparent;
-//     box-shadow: none;
-//   }
-// }
-
-// .cxd-search-close {
-//   flex-shrink: 0;
-//   margin-inline-start: 0;
-// }
-
-// Body / results
-
-.cxd-search-body {
-  padding: 0 var(--cx-space-medium) var(--cx-space-medium);
-}
+  // .cxd-search-close {
+  //   flex-shrink: 0;
+  //   margin-inline-start: 0;
+  // }
 
-.cxd-search-results {
-  display: block;
-  min-height: 6rem;
-  border: 0;
-}
+  // Body / results
 
-.cxd-search-results-list {
-  // --cx-list-border-width: 0;
-  // --cx-list-border-radius: 0;
+  .cxd-search-body {
+    padding: 0 var(--cx-space-medium) var(--cx-space-medium);
+  }
 
-  gap: var(--cx-space-small);
-  padding-block-start: var(--cx-space-xsmall);
-  list-style: none;
-  .list-item {
-    padding: 0;
+  .cxd-search-results {
+    display: block;
+    min-height: 6rem;
     border: 0;
   }
-}
 
-.cxd-search-result {
-  display: flex;
-  flex-direction: column;
-  // gap: var(--cx-space-xsmall);
-  gap: 0;
-  padding: 0;
-}
+  .cxd-search-results-list {
+    // --cx-list-border-width: 0;
+    // --cx-list-border-radius: 0;
 
-// Default-active state: while focus is in the search input, the first result
-// is highlighted as the Enter target. Once the user arrows into the list,
-// :focus-within takes over.
-.cxd-search-results:not(:focus-within) .cxd-search-result:first-child > .cxd-search-item {
-  @include focus-ring(true);
-  --cx-focus-ring-offset: -2px;
-  background-color: var(--cx-bg-main);
-}
-
-// Single row template: top-level results, sub-results, and recent visits.
-.cxd-search-item {
-  --cx-icon-size: var(--cx-icon-medium);
-  --cx-icon-color: var(--cx-fg-subtle);
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  column-gap: .5rem;
-  align-items: center;
-  padding: var(--cx-space-xsmall);
-  text-decoration: none;
-  background-color: var(--cx-bg-main);
-  @include border();
-  @include border-radius(var(--cx-border-radius-medium));
-
-  mark {
-    background: none;
+    gap: var(--cx-space-small);
+    padding-block-start: var(--cx-space-xsmall);
+    list-style: none;
+    .list-item {
+      padding: 0;
+      border: 0;
+    }
   }
 
-  &:has(+ .cxd-search-subresults) {
-    border-block-end-width: 0;
-    @include border-bottom-radius(0);
+  .cxd-search-result {
+    display: flex;
+    flex-direction: column;
+    // gap: var(--cx-space-xsmall);
+    gap: 0;
+    padding: 0;
   }
 
-  &:hover {
+  // Default-active state: while focus is in the search input, the first result
+  // is highlighted as the Enter target. Once the user arrows into the list,
+  // :focus-within takes over.
+  .cxd-search-results:not(:focus-within) .cxd-search-result:first-child > .cxd-search-item {
+    @include focus-ring(true);
+    --cx-focus-ring-offset: -2px;
     background-color: var(--cx-bg-main);
   }
 
-  &:focus-visible {
-    --cx-focus-ring-offset: -2px;
-    z-index: 1;
-    @include focus-ring(true);
-  }
+  // Single row template: top-level results, sub-results, and recent visits.
+  .cxd-search-item {
+    --cx-icon-size: var(--cx-icon-medium);
+    --cx-icon-color: var(--cx-fg-subtle);
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: .5rem;
+    align-items: center;
+    padding: var(--cx-space-xsmall);
+    text-decoration: none;
+    background-color: var(--cx-bg-main);
+    @include border();
+    @include border-radius(var(--cx-border-radius-medium));
 
-  // &:not(.cxd-search-item-sub) {
-  //   border: var(--cx-border-width) solid var(--cx-border-color);
-  // }
-}
+    mark {
+      background: none;
+    }
 
-.cxd-search-item-icon {
-  // margin-block-start: .15rem;
-  color: var(--cx-fg-subtle);
-}
+    &:has(+ .cxd-search-subresults) {
+      border-block-end-width: 0;
+      @include border-bottom-radius(0);
+    }
 
-.cxd-search-item-body {
-  grid-column: 2;
-  min-width: 0;
-}
+    &:hover {
+      background-color: var(--cx-bg-main);
+    }
 
-.cxd-search-item-title {
-  font-weight: var(--cx-font-weight-strong);
-  color: var(--cx-fg-main);
-}
+    &:focus-visible {
+      --cx-focus-ring-offset: -2px;
+      z-index: 1;
+      @include focus-ring(true);
+    }
 
-.cxd-search-item-excerpt {
-  overflow: hidden;
-  color: var(--cx-fg-subtle);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @include font-size(var(--cx-font-size-small));
-  @include line-height(var(--cx-line-height-small));
-}
+    // &:not(.cxd-search-item-sub) {
+    //   border: var(--cx-border-width) solid var(--cx-border-color);
+    // }
+  }
+
+  .cxd-search-item-icon {
+    // margin-block-start: .15rem;
+    color: var(--cx-fg-subtle);
+  }
 
-.cxd-search-subitem {
-  --cx-icon-size: var(--cx-icon-small);
-  --cx-icon-color: var(--cx-fg-subtle);
-  align-items: center;
-  padding-inline-start: var(--cx-space-4xlarge);
-  // padding-inline-start: var(--cx-space-medium);
-
-  &::before {
-    position: absolute;
-    inset-block: 15%;
-    inset-inline: 0;
-    width: var(--cx-border-width);
-    height: 70%;
-    margin-inline-start: 1.25rem;
-    content: " ";
-    background-color: var(--cx-fg-subtle);
-  }
-  &::after {
-    position: absolute;
-    inset: 0;
-    width: .75rem;
-    height: var(--cx-border-width);
-    margin-block: auto;
-    margin-inline-start: 1.25rem;
-    content: " ";
-    background-color: var(--cx-fg-subtle);
+  .cxd-search-item-body {
+    grid-column: 2;
+    min-width: 0;
   }
+
   .cxd-search-item-title {
+    font-weight: var(--cx-font-weight-strong);
+    color: var(--cx-fg-main);
+  }
+
+  .cxd-search-item-excerpt {
+    overflow: hidden;
+    color: var(--cx-fg-subtle);
+    text-overflow: ellipsis;
+    white-space: nowrap;
     @include font-size(var(--cx-font-size-small));
     @include line-height(var(--cx-line-height-small));
   }
 
-}
-
-.cxd-search-subresults {
-  display: flex;
-  flex-direction: column;
-  // gap: var(--cx-space-xsmall);
-  gap: 0;
-  // padding-inline-start: var(--cx-space-large);
   .cxd-search-subitem {
-    border-block-end-width: 0;
-    @include border-radius(0);
-    &:is(:last-child > .cxd-search-subitem) {
-      border-block-end-width: var(--cx-border-width);
-      @include border-bottom-radius(var(--cx-border-radius));
-      &::before {
-        height: 35%;
-      }
+    --cx-icon-size: var(--cx-icon-small);
+    --cx-icon-color: var(--cx-fg-subtle);
+    align-items: center;
+    padding-inline-start: var(--cx-space-4xlarge);
+    // padding-inline-start: var(--cx-space-medium);
+
+    &::before {
+      position: absolute;
+      inset-block: 15%;
+      inset-inline: 0;
+      width: var(--cx-border-width);
+      height: 70%;
+      margin-inline-start: 1.25rem;
+      content: " ";
+      background-color: var(--cx-fg-subtle);
+    }
+    &::after {
+      position: absolute;
+      inset: 0;
+      width: .75rem;
+      height: var(--cx-border-width);
+      margin-block: auto;
+      margin-inline-start: 1.25rem;
+      content: " ";
+      background-color: var(--cx-fg-subtle);
+    }
+    .cxd-search-item-title {
+      @include font-size(var(--cx-font-size-small));
+      @include line-height(var(--cx-line-height-small));
     }
 
   }
-}
 
-// Recently visited
+  .cxd-search-subresults {
+    display: flex;
+    flex-direction: column;
+    // gap: var(--cx-space-xsmall);
+    gap: 0;
+    // padding-inline-start: var(--cx-space-large);
+    .cxd-search-subitem {
+      border-block-end-width: 0;
+      @include border-radius(0);
+      &:is(:last-child > .cxd-search-subitem) {
+        border-block-end-width: var(--cx-border-width);
+        @include border-bottom-radius(var(--cx-border-radius));
+        &::before {
+          height: 35%;
+        }
+      }
 
-.cxd-search-recent-header {
-  display: flex;
-  gap: .5rem;
-  align-items: center;
-  justify-content: space-between;
-  padding-block: .5rem;
-}
+    }
+  }
 
-.cxd-search-recent-label {
-  @include font-size(var(--cx-font-size-xsmall));
-  font-weight: 600;
-  color: var(--cx-fg-subtle);
-  text-transform: uppercase;
-  letter-spacing: .04em;
-}
+  // Recently visited
 
-.cxd-search-recent-clear {
-  padding: .125rem .375rem;
-  @include font-size(var(--cx-font-size-xsmall));
-  color: var(--cx-fg-subtle);
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  @include border-radius(var(--cx-border-radius-medium));
-  @include transition(color .15s ease-in-out, background-color .15s ease-in-out);
-
-  &:hover {
-    color: var(--cx-fg-main);
-    background-color: var(--cx-bg-main);
+  .cxd-search-recent-header {
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+    justify-content: space-between;
+    padding-block: .5rem;
   }
 
-  &:focus-visible {
-    @include focus-ring(true);
+  .cxd-search-recent-label {
+    @include font-size(var(--cx-font-size-xsmall));
+    font-weight: 600;
+    color: var(--cx-fg-subtle);
+    text-transform: uppercase;
+    letter-spacing: .04em;
   }
-}
 
-// Empty / loading / error states
+  .cxd-search-recent-clear {
+    padding: .125rem .375rem;
+    @include font-size(var(--cx-font-size-xsmall));
+    color: var(--cx-fg-subtle);
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    @include border-radius(var(--cx-border-radius-medium));
+    @include transition(color .15s ease-in-out, background-color .15s ease-in-out);
 
-.cxd-search-empty,
-.cxd-search-error {
-  padding: 2rem 1rem;
-  @include font-size(var(--cx-font-size-small));
-  color: var(--cx-fg-subtle);
-  text-align: center;
-}
+    &:hover {
+      color: var(--cx-fg-main);
+      background-color: var(--cx-bg-main);
+    }
 
-.cxd-search-error {
-  color: var(--cx-danger-fg-main);
-}
+    &:focus-visible {
+      @include focus-ring(true);
+    }
+  }
 
-.cxd-search-loading {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cx-space-small);
-}
+  // Empty / loading / error states
 
+  .cxd-search-empty,
+  .cxd-search-error {
+    padding: 2rem 1rem;
+    @include font-size(var(--cx-font-size-small));
+    color: var(--cx-fg-subtle);
+    text-align: center;
+  }
 
-.cxd-search-footer {
-  padding-block: var(--cx-space-small);
-  background-color: var(--cx-bg-evident);
-}
+  .cxd-search-error {
+    color: var(--cx-danger-fg-main);
+  }
 
-.cxd-search-shortcuts-list > .list-item {
-  display: inline-flex;
-  gap: .25rem;
-  align-items: center;
-  padding: 0 .5rem;
-  color: var(--cx-fg-subtle);
-  background: none;
-  border: 0;
-}
+  .cxd-search-loading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cx-space-small);
+  }
 
-.cxd-search-shortcut-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  min-height: 1.25rem;
-  padding: 0 .25rem;
-  background-color: var(--cx-bg-main);
-}
 
-.cxd-search-shortcut-label {
-  padding-inline-start: .25rem;
-  @include font-size(var(--cx-font-size-small));
-  @include line-height(var(--cx-line-height-small));
+  .cxd-search-footer {
+    padding-block: var(--cx-space-small);
+    background-color: var(--cx-bg-evident);
+  }
+
+  .cxd-search-shortcuts-list > .list-item {
+    display: inline-flex;
+    gap: .25rem;
+    align-items: center;
+    padding: 0 .5rem;
+    color: var(--cx-fg-subtle);
+    background: none;
+    border: 0;
+  }
+
+  .cxd-search-shortcut-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    min-height: 1.25rem;
+    padding: 0 .25rem;
+    background-color: var(--cx-bg-main);
+  }
+
+  .cxd-search-shortcut-label {
+    padding-inline-start: .25rem;
+    @include font-size(var(--cx-font-size-small));
+    @include line-height(var(--cx-line-height-small));
+  }
 }