diff --git a/.gitignore b/.gitignore
index b6efd5caf8a..4dfe5a02327 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,9 @@
 storybook-static/
 openlibrary/components/dev/_dev.js
+tests/e2e/reports/
+tests/e2e/screenshots/
+playwright-report/
+test-results/
 *venv
 *.pyc
 *~
diff --git a/docs/ai/README.md b/docs/ai/README.md
index 922baacd9bd..de040ba5bd9 100644
--- a/docs/ai/README.md
+++ b/docs/ai/README.md
@@ -167,6 +167,7 @@ These companion docs cover specific areas in depth:
 - [CSS](css.md) — BEM naming, selector rules, tokens in practice, bundle sizes, CSS-to-template wiring
 - [Design](design.md) — UI design patterns: typography, layout shift prevention, design tokens, animations
 - [Web Component Standards](web-components.md) — When to build a component, Lit conventions, accessibility, events
+- [Front-End Dev Environment](front-end.md) — Build commands, Lit/jQuery timing trap, Colima LAN access, Playwright setup, known flaky tests, pre-commit.ci squash procedure
 
 ## Key File Locations
 
diff --git a/docs/ai/front-end.md b/docs/ai/front-end.md
new file mode 100644
index 00000000000..dc9d36ae4d8
--- /dev/null
+++ b/docs/ai/front-end.md
@@ -0,0 +1,276 @@
+# Front-End Dev Environment Guide
+
+Lessons from building the `ol-search-bar` LIT component. These are the non-obvious
+gotchas that will waste your day if you don't already know them.
+
+---
+
+## Build Commands: Which to Run and When
+
+| What changed | Command |
+|---|---|
+| CSS / LESS only | `docker compose run --rm home make css` |
+| JS only (`openlibrary/plugins/openlibrary/js/`) | `docker compose run --rm home make js` |
+| Lit components (`openlibrary/components/lit/`) | `docker compose run --rm home make lit-components` |
+| Templates only | `docker compose restart web` (no make needed) |
+| Multiple or unsure | `docker compose run --rm home make all` |
+| After any make | `docker compose restart web` to pick up new bundles |
+
+**Do not skip `docker compose restart web`** after building JS or Lit components. The
+web container caches the old bundle path and will serve stale assets.
+
+After `make js` or `make lit-components`, always verify the build succeeded with zero
+errors before restarting:
+
+```bash
+# Confirm the Lit bundle was written
+ls -lh static/build/lit-components/ol-components.js
+```
+
+---
+
+## LIT Component + jQuery Timing: The Load-Order Problem
+
+**This is the single most dangerous trap when wiring a new Lit component into OL's jQuery code.**
+
+`all.js` is loaded as a plain `<script>` tag (synchronous). `ol-components.js` (the Lit
+bundle) is loaded as `<script type="module">` which is **always deferred** — it runs
+after the page's HTML is parsed AND after all synchronous scripts. This means:
+
+```
+all.js runs  →  SearchBar constructor runs  →  jQuery finds nothing  →  ol-components.js finally runs  →  Lit renders
+```
+
+If you call `this.$component.find('input[type="text"]')` in a jQuery constructor, and
+the Lit component hasn't rendered yet, you get an **empty set**. Event bindings on empty
+sets silently do nothing. This looks like "clicking does nothing" — there is no error.
+
+**The fix**: dispatch a custom event from the Lit component's `firstUpdated()` and defer
+all DOM-dependent jQuery init until that event fires:
+
+```js
+// In the Lit component
+firstUpdated() {
+    this.dispatchEvent(new CustomEvent('ol-search-bar-ready'));
+}
+
+// In the jQuery class constructor
+if (this._olSearchBar) {
+    this._olSearchBar.addEventListener('ol-search-bar-ready', () => {
+        this._initDomHandlers(urlParams);
+    }, { once: true });
+} else {
+    this._initDomHandlers(urlParams);  // legacy path: no Lit, init immediately
+}
+```
+
+`{ once: true }` is important — the event fires exactly once, and the listener removes
+itself automatically.
+
+**Any jQuery selector that touches Lit-rendered light DOM must be inside `_initDomHandlers`**, not in the constructor directly.
+
+---
+
+## Colima: LAN Access Doesn't Work Out of the Box
+
+If you run Docker via Colima on a Mac and try to access `http://<your-LAN-IP>:8080`
+from another device (phone, tablet, second laptop), it won't work even though
+`lsof -i :8080` shows `*:8080 LISTEN`. Colima's Lima SSH tunnel binds the port to
+`127.0.0.1` only.
+
+**Workaround** — use `socat` to re-expose the port on all interfaces:
+
+```bash
+socat TCP-LISTEN:8081,bind=0.0.0.0,fork,reuseaddr TCP:127.0.0.1:8080
+```
+
+Then access via `http://<your-LAN-IP>:8081`. Run this in a background terminal or tmux
+pane — it exits when you kill it.
+
+---
+
+## `/search.json` Always Returns 500 in Docker
+
+**Symptom:** Autocomplete triggers a fetch to `/search.json?q=...` and gets a 500.
+The search input appears to "do nothing" because the dropdown never populates.
+
+**Root cause:** `openlibrary/core/lending.py:get_available_async` calls
+`https://archive.org/services/availability/` on every search request. That URL is
+unreachable from inside Docker containers in a local dev environment.
+
+**This is a pre-existing dev environment limitation, not caused by your changes.** You
+can verify it's not your bug:
+
+```bash
+# Check the web container logs for the real error
+docker compose logs web --tail=30 | grep -i "availability\|ConnectionError\|aiohttp"
+```
+
+**Workaround:** Disable the lending API check in your local config. In
+`openlibrary/conf/openlibrary.yml`, find `ia_availability_api_v2_url` and set it to an
+empty string or a stub that returns `{}`. Then restart web.
+
+This does NOT affect search results — it only suppresses the availability overlay on
+search results (the "Borrow"/"Read" badges). Search still works for testing once this
+is disabled.
+
+---
+
+## Playwright: File Extension Must Be `.mjs`
+
+If `package.json` does not have `"type": "module"`, Playwright config and spec files
+must use the `.mjs` extension:
+
+```
+playwright.config.mjs        ✓
+tests/e2e/header-search.spec.mjs   ✓
+
+playwright.config.js         ✗  (ReferenceError: require is not defined in ES module)
+```
+
+The `package.json` in this repo does NOT have `"type": "module"`, so use `.mjs`.
+
+**Installing Playwright with a Node version mismatch:**
+
+If `npm install @playwright/test` fails with `EBADENGINE` because your Node version
+doesn't satisfy `"node":"^24.0.0"` in `package.json`, override the engine check:
+
+```bash
+npm_config_engine_strict=false npm install --save-dev @playwright/test
+npx playwright install chromium
+```
+
+---
+
+## pre-commit.ci Bot Commits Must Be Squashed
+
+After you push a PR, pre-commit.ci may add a `[pre-commit.ci] auto fixes` commit (e.g.,
+updating `messages.pot` when you remove or add `$_(...)` strings from templates).
+
+These bot commits must be squashed into the parent commit before the PR is merged. To do
+this interactively:
+
+```bash
+git fetch origin
+git pull --rebase origin BRANCH      # pick up the bot commit
+git log --oneline origin/master..HEAD  # confirm which commit to squash
+
+# Squash: mark the bot commit as `squash` in the rebase editor
+GIT_SEQUENCE_EDITOR='python3 -c "
+import sys
+lines = open(sys.argv[1]).readlines()
+out = []
+for line in lines:
+    if \"pre-commit\" in line.lower():
+        out.append(line.replace(\"pick\", \"squash\", 1))
+    else:
+        out.append(line)
+open(sys.argv[1], \"w\").writelines(out)
+"' git rebase -i origin/master
+
+git push --force-with-lease origin BRANCH
+```
+
+Run `pre-commit run --files <changed files>` locally before pushing to minimize
+how often the bot fires.
+
+---
+
+## Stylelint: Specificity Limit Workaround
+
+Stylelint enforces a specificity limit (`selector-max-specificity`). The default cap is
+`0,2,0` (two class selectors). If you need a three-class selector for state overrides
+(e.g., `.header-bar .search-component.expanded ol-facet-select`), disable the rule
+inline:
+
+```css
+/* stylelint-disable-next-line selector-max-specificity */
+.header-bar .search-component.expanded ol-facet-select {
+    display: inline-flex;
+}
+```
+
+---
+
+## Known Flaky Test: `test_olspy_sh.py::test_log_workers_cur_fn_fastapi`
+
+This test fails when run as part of the full suite (`make test`) due to test ordering
+— another test leaves state that breaks this one. It passes in isolation:
+
+```bash
+pytest tests/integration/test_olspy_sh.py::test_log_workers_cur_fn_fastapi -xvs
+```
+
+This is a **pre-existing flaky test on master**. If you see it fail in CI, check whether
+it also fails on master's CI before investigating.
+
+---
+
+## CSS: Mirroring Existing Patterns for New Elements
+
+When a new element (e.g. `ol-facet-select`) replaces an existing element (e.g.
+`.search-facet`) in the DOM, check whether the existing element has any media-query or
+state-driven visibility rules. You must mirror those rules for the new element.
+
+Example: `.search-facet { display: none; }` at mobile widths (hidden until expanded)
+needed to be matched with:
+
+```css
+.header-bar .search-component ol-facet-select {
+    display: none;
+}
+/* stylelint-disable-next-line selector-max-specificity */
+.header-bar .search-component.expanded ol-facet-select {
+    display: inline-flex;
+}
+@media only screen and (min-width: 35.5em) {
+    .header-bar .search-component ol-facet-select {
+        display: inline-flex;
+    }
+}
+```
+
+Missing this causes the element to be visible in collapsed mobile state — a subtle but
+visually obvious bug that only shows up at narrow viewport widths.
+
+---
+
+## Checking What's Actually Running
+
+```bash
+# What's listening on port 8080?
+lsof -i :8080
+
+# Which docker containers are running?
+docker ps --format "table {{.Names}}\t{{.Ports}}\t{{.Status}}"
+
+# Web container logs (look for errors after a restart)
+docker compose logs web --tail=50 | grep -iE "error|exception|traceback"
+
+# Check if bundles were built correctly
+ls -lh static/build/lit-components/
+ls -lh static/build/js/
+```
+
+---
+
+## Quick Sanity Checks Before Reporting "It Works"
+
+```bash
+# HTTP 200 on homepage
+curl -s -o /dev/null -w "%{http_code}" http://localhost:8080
+# Expected: 200
+
+# JS tests
+docker compose run --rm home npm run test:js
+
+# Python tests
+docker compose run --rm home make test
+
+# Playwright E2E (desktop + mobile screenshots)
+npx playwright test tests/e2e/header-search.spec.mjs
+# Screenshots land in tests/e2e/screenshots/
+```
+
+Always view the Playwright screenshots — they catch mobile layout bugs (collapsed state,
+hidden elements, wrong z-index) that HTTP 200 and passing unit tests do not catch.
diff --git a/openlibrary/components/lit/OlFacetDrop.js b/openlibrary/components/lit/OlFacetDrop.js
new file mode 100644
index 00000000000..e8079ee134d
--- /dev/null
+++ b/openlibrary/components/lit/OlFacetDrop.js
@@ -0,0 +1,468 @@
+import { LitElement, html, css } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import {
+    GENRE_OPTIONS, FICTION_OPTIONS,
+    toggleArrayValue,
+} from './search/filters.js';
+import './OlPopover.js';
+
+/**
+ * Multi-select facet dropdown for genre, author, and subject.
+ * Composes `<ol-popover>` for animation, focus trap, and dismissal.
+ *
+ * @element ol-facet-drop
+ *
+ * @prop {String}  name            - 'genre'|'author'|'subject'
+ * @prop {String}  placement       - OlPopover placement (default 'bottom-start')
+ * @prop {Object}  filters         - current filter state
+ * @prop {Array}   authorResults   - author search results from parent
+ * @prop {Array}   subjectResults  - subject search results from parent
+ * @prop {Array}   defaultAuthors  - random author suggestions
+ * @prop {Array}   defaultSubjects - random subject suggestions
+ * @prop {Boolean} facetsLoading   - true while parent fetches
+ *
+ * @fires ol-facet-change          - { filter, value, keepOpen }
+ * @fires ol-facet-search-authors  - { q }
+ * @fires ol-facet-search-subjects - { q }
+ * @fires ol-facet-shuffle-authors
+ * @fires ol-facet-shuffle-subjects
+ */
+export class OlFacetDrop extends LitElement {
+    static properties = {
+        name: { type: String },
+        placement: { type: String },
+        filters: { type: Object },
+        authorResults: { type: Array },
+        subjectResults: { type: Array },
+        defaultAuthors: { type: Array },
+        defaultSubjects: { type: Array },
+        facetsLoading: { type: Boolean },
+
+        _isOpen: { state: true },
+        _genreSearch: { state: true },
+        _authorSearch: { state: true },
+        _subjectSearch: { state: true },
+    };
+
+    constructor() {
+        super();
+        this.name            = '';
+        this.placement       = 'bottom-start';
+        this.filters         = {};
+        this.authorResults   = [];
+        this.subjectResults  = [];
+        this.defaultAuthors  = [];
+        this.defaultSubjects = [];
+        this.facetsLoading   = false;
+        this._isOpen        = false;
+        this._genreSearch   = '';
+        this._authorSearch  = '';
+        this._subjectSearch = '';
+    }
+
+    get _label() {
+        const f = this.filters ?? {};
+        switch (this.name) {
+        case 'genre': {
+            const total = (f.genres?.length ?? 0) + (f.fictionFilter ? 1 : 0);
+            return total ? `Genre (${total})` : 'Genre';
+        }
+        case 'author':  return f.authors?.length  ? `Author (${f.authors.length})`   : 'Author';
+        case 'subject': return f.subjects?.length ? `Subject (${f.subjects.length})` : 'Subject';
+        default: return this.name;
+        }
+    }
+
+    get _isActive() {
+        const f = this.filters ?? {};
+        switch (this.name) {
+        case 'genre':   return (f.genres?.length > 0) || !!f.fictionFilter;
+        case 'author':  return f.authors?.length  > 0;
+        case 'subject': return f.subjects?.length > 0;
+        default: return false;
+        }
+    }
+
+    _change(filter, value, keepOpen = false) {
+        this.dispatchEvent(new CustomEvent('ol-facet-change', {
+            detail: { filter, value, keepOpen }, bubbles: true, composed: true,
+        }));
+    }
+
+    _fireAuthorSearch(q) {
+        this._authorSearch = q;
+        this.dispatchEvent(new CustomEvent('ol-facet-search-authors', {
+            detail: { q }, bubbles: true, composed: true,
+        }));
+    }
+
+    _fireSubjectSearch(q) {
+        this._subjectSearch = q;
+        this.dispatchEvent(new CustomEvent('ol-facet-search-subjects', {
+            detail: { q }, bubbles: true, composed: true,
+        }));
+    }
+
+    _onOpen() {
+        this._isOpen = true;
+        this.setAttribute('data-open', '');
+        requestAnimationFrame(() => {
+            const input = this.shadowRoot?.querySelector('.search-input, .search-inline');
+            input?.focus();
+        });
+    }
+
+    _onClose() {
+        this._isOpen = false;
+        this.removeAttribute('data-open');
+    }
+
+    static styles = css`
+        :host {
+            display: inline-flex;
+            align-items: stretch;
+            font-family: var(--font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+        }
+
+        /* stretch ol-popover to fill the host */
+        ol-popover {
+            flex: 1;
+            align-self: stretch;
+        }
+
+        /* ── Trigger button (matches OlFacetSelect) ─────────────── */
+
+        .trigger {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            padding: var(--ol-trigger-padding, 0 8px);
+            height: 100%;
+            min-height: var(--ol-trigger-min-height, 34px);
+            flex: 1;
+            background: var(--ol-trigger-bg, transparent);
+            border: none;
+            border-right: var(--ol-trigger-border-right, 1px solid var(--color-border-subtle, #ddd));
+            border-radius: var(--ol-trigger-border-radius, 0);
+            color: var(--darker-grey, #333);
+            font: inherit;
+            font-size: var(--ol-trigger-font-size, 14px);
+            font-weight: 500;
+            line-height: 1.4;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: background 100ms ease;
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+            .trigger:hover {
+                background: var(--ol-trigger-bg-hover, var(--lightest-grey, #f5f5f5));
+            }
+        }
+
+        .trigger:active { transform: scale(0.97); }
+        .trigger:focus { outline: none; }
+        .trigger:focus-visible {
+            outline: 2px solid var(--color-focus-ring, #0070b8);
+            outline-offset: -2px;
+        }
+
+        .trigger-chevron {
+            display: inline-block;
+            width: 14px; height: 14px;
+            flex-shrink: 0;
+            color: var(--accessible-grey, #666);
+            transition: transform 150ms ease-out;
+        }
+
+        :host([data-open]) .trigger-chevron { transform: rotate(180deg); }
+
+        @media (prefers-reduced-motion: reduce) {
+            .trigger-chevron { transition: none; }
+        }
+
+        /* ── Panel content ──────────────────────────────────────── */
+
+        .panel { min-width: 210px; }
+
+        .section-hdr {
+            padding: 5px 12px 4px;
+            font-size: 11px; font-weight: 600; color: hsl(0,0%,40%);
+            background: hsl(0,0%,98%); border-bottom: 1px solid hsl(0,0%,93%);
+            letter-spacing: 0.03em; text-transform: uppercase;
+        }
+        .section-sep { height: 1px; background: hsl(0,0%,90%); }
+
+        .search-wrap {
+            position: relative; border-bottom: 1px solid hsl(0,0%,90%);
+        }
+        .search-icon {
+            position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
+            color: hsl(0,0%,58%); pointer-events: none;
+            display: inline-flex; align-items: center;
+        }
+        .search-input {
+            border: none; padding: 8px 12px 8px 30px;
+            font-size: 12px; font-family: inherit; width: 100%;
+            box-sizing: border-box; outline: none; color: hsl(0,0%,15%); background: transparent;
+        }
+        .search-input::placeholder { color: hsl(0,0%,58%); }
+
+        .search-row {
+            position: relative; display: flex; align-items: stretch;
+            border-bottom: 1px solid hsl(0,0%,90%);
+        }
+        .search-row-icon {
+            position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
+            color: hsl(0,0%,58%); pointer-events: none;
+            display: inline-flex; align-items: center;
+        }
+        .search-inline {
+            flex: 1; border: none; padding: 8px 12px 8px 30px; font-size: 12px;
+            font-family: inherit; outline: none; color: hsl(0,0%,15%); background: transparent;
+        }
+        .search-inline::placeholder { color: hsl(0,0%,58%); }
+        .dice {
+            padding: 4px 9px; border: none; border-left: 1px solid hsl(0,0%,90%);
+            background: transparent; cursor: pointer; font-size: 15px; flex-shrink: 0; line-height: 1;
+        }
+        .dice:hover { background: hsl(0,0%,96%); }
+        .dice-icon { display: inline-block; transition: transform .2s; }
+        .dice:hover .dice-icon { transform: rotate(120deg); }
+
+        .fiction-section { background: hsl(270,20%,97%); padding: 2px 0; }
+        .fiction-sep { height: 1px; background: hsl(0,0%,88%); }
+
+        .scroll { max-height: 220px; overflow-y: auto; }
+
+        .item {
+            display: flex; align-items: center; gap: 8px;
+            padding: 7px 12px; font-size: 12px; font-family: inherit;
+            color: hsl(0,0%,20%); cursor: pointer; border: none;
+            background: transparent; width: 100%; text-align: left; transition: background .07s;
+        }
+        .item:hover  { background: hsl(202,96%,96%); color: hsl(202,96%,28%); }
+        .item.sel    { background: hsl(202,96%,97%); font-weight: 600; color: hsl(202,96%,28%); }
+        .item input[type="checkbox"] { accent-color: hsl(202,96%,37%); flex-shrink: 0; cursor: pointer; }
+        .count { margin-left: auto; font-size: 11px; color: hsl(0,0%,55%); }
+        .empty { padding: 10px 12px; font-size: 12px; color: hsl(0,0%,55%); text-align: center; }
+        .hint  { padding: 6px 12px; font-size: 11px; color: hsl(0,0%,55%); font-style: italic; }
+
+        .footer {
+            border-top: 1px solid hsl(0,0%,90%); background: white;
+            padding: 5px 10px; display: flex; justify-content: center;
+        }
+        .clear {
+            width: 100%;
+            font-size: 11px; color: hsl(0,72%,38%); background: none; border: none;
+            cursor: pointer; padding: 6px 8px; border-radius: 4px; font-family: inherit;
+            font-weight: 500; transition: background .1s; text-align: center;
+        }
+        .clear:hover { background: hsl(0,72%,95%); }
+    `;
+
+    static _chevronIcon = html`
+        <svg class="trigger-chevron" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+             aria-hidden="true">
+            <path d="m6 9 6 6 6-6"/>
+        </svg>`;
+
+    get _searchSvg() {
+        return html`<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+        </svg>`;
+    }
+
+    _renderGenre(f) {
+        const selectedGenres = f.genres ?? [];
+        const selGenreOpts   = GENRE_OPTIONS.filter(o => selectedGenres.includes(o.value));
+        const unselVisible   = GENRE_OPTIONS.filter(o =>
+            !selectedGenres.includes(o.value) &&
+            (!this._genreSearch || o.label.toLowerCase().includes(this._genreSearch.toLowerCase()))
+        );
+        const hasAnySelection = selectedGenres.length > 0 || !!f.fictionFilter;
+        return html`
+            <div class="search-wrap">
+                <span class="search-icon">${this._searchSvg}</span>
+                <input class="search-input" placeholder="Filter genres…" .value=${this._genreSearch}
+                       @input=${e => { this._genreSearch = e.target.value; }}
+                       @click=${e => e.stopPropagation()}>
+            </div>
+            <div class="fiction-section">
+                ${FICTION_OPTIONS.map(o => html`
+                    <button class="item ${f.fictionFilter === o.value ? 'sel' : ''}"
+                            @click=${() => this._change('fictionFilter', f.fictionFilter === o.value ? '' : o.value, true)}>
+                        <input type="checkbox" .checked=${f.fictionFilter === o.value} readonly> ${o.label}
+                    </button>`)}
+            </div>
+            <div class="fiction-sep"></div>
+            ${selGenreOpts.length ? html`
+                <div class="section-hdr">Selected</div>
+                ${selGenreOpts.map(o => html`
+                    <button class="item sel"
+                            @click=${() => this._change('genres', toggleArrayValue(selectedGenres, o.value), true)}>
+                        <input type="checkbox" .checked=${true} readonly> ${o.label}
+                    </button>`)}
+                <div class="section-sep"></div>
+            ` : ''}
+            <div class="section-hdr">${selGenreOpts.length ? 'Suggestions' : 'Genres'}</div>
+            <div class="scroll">
+                ${unselVisible.length === 0
+        ? html`<div class="empty">${this._genreSearch ? 'No matches' : 'All selected'}</div>`
+        : ''}
+                ${repeat(unselVisible, o => o.value, o => html`
+                    <button class="item"
+                            @click=${() => this._change('genres', toggleArrayValue(selectedGenres, o.value), true)}>
+                        <input type="checkbox" .checked=${false} readonly> ${o.label}
+                    </button>`)}
+            </div>
+            ${hasAnySelection ? html`
+                <div class="footer">
+                    <button class="clear" @click=${e => {
+        e.stopPropagation();
+        this._change('genres', []);
+        this._change('fictionFilter', '', true);
+    }}>Clear selections</button>
+                </div>` : ''}`;
+    }
+
+    _renderAuthor(f) {
+        const searching       = this._authorSearch.trim().length >= 2;
+        const selectedAuthors = f.authors ?? [];
+        const suggestions     = searching ? this.authorResults : this.defaultAuthors;
+        const unselSugg       = suggestions
+            .map(a => typeof a === 'string' ? { name: a } : a)
+            .filter(a => !selectedAuthors.includes(a.name));
+
+        return html`
+            <div class="search-row">
+                <span class="search-row-icon">${this._searchSvg}</span>
+                <input class="search-inline" placeholder="Search authors…" .value=${this._authorSearch}
+                       @input=${e => this._fireAuthorSearch(e.target.value)}
+                       @click=${e => e.stopPropagation()}>
+                <button class="dice" title="Shuffle suggestions"
+                        @click=${e => { e.stopPropagation(); this.dispatchEvent(new CustomEvent('ol-facet-shuffle-authors', { bubbles: true, composed: true })); }}>
+                    <span class="dice-icon">🎲</span>
+                </button>
+            </div>
+            ${selectedAuthors.length ? html`
+                <div class="section-hdr">Selected</div>
+                ${selectedAuthors.map(name => html`
+                    <button class="item sel"
+                            @click=${() => this._change('authors', toggleArrayValue(selectedAuthors, name), true)}>
+                        <input type="checkbox" .checked=${true} readonly> ${name}
+                    </button>`)}
+                <div class="section-sep"></div>
+            ` : ''}
+            <div class="section-hdr">${selectedAuthors.length ? 'Suggestions' : 'Authors'}</div>
+            <div class="scroll">
+                ${this.facetsLoading ? html`<div class="empty">Loading…</div>` : ''}
+                ${!searching && !this.facetsLoading && this.defaultAuthors.length === 0
+        ? html`<div class="hint">Type to search authors</div>` : ''}
+                ${searching && !this.facetsLoading && this.authorResults.length === 0
+        ? html`<div class="empty">No authors found</div>` : ''}
+                ${!this.facetsLoading ? repeat(unselSugg, a => a.name, a => html`
+                    <button class="item"
+                            @click=${() => this._change('authors', toggleArrayValue(selectedAuthors, a.name), true)}>
+                        <input type="checkbox" .checked=${false} readonly>
+                        ${a.name}
+                        ${a.work_count ? html`<span class="count">${a.work_count.toLocaleString()}</span>` : ''}
+                    </button>`) : ''}
+            </div>
+            ${selectedAuthors.length ? html`
+                <div class="footer">
+                    <button class="clear"
+                            @click=${e => { e.stopPropagation(); this._change('authors', []); }}>
+                        Clear selections
+                    </button>
+                </div>` : ''}`;
+    }
+
+    _renderSubject(f) {
+        const searching        = this._subjectSearch.trim().length >= 2;
+        const selectedSubjects = f.subjects ?? [];
+        const suggestions      = searching ? this.subjectResults : this.defaultSubjects;
+        const unselSugg        = suggestions
+            .map(s => typeof s === 'string' ? { name: s } : s)
+            .filter(s => !selectedSubjects.includes(s.name));
+
+        return html`
+            <div class="search-row">
+                <span class="search-row-icon">${this._searchSvg}</span>
+                <input class="search-inline" placeholder="Search subjects…" .value=${this._subjectSearch}
+                       @input=${e => this._fireSubjectSearch(e.target.value)}
+                       @click=${e => e.stopPropagation()}>
+                <button class="dice" title="Shuffle suggestions"
+                        @click=${e => { e.stopPropagation(); this.dispatchEvent(new CustomEvent('ol-facet-shuffle-subjects', { bubbles: true, composed: true })); }}>
+                    <span class="dice-icon">🎲</span>
+                </button>
+            </div>
+            ${selectedSubjects.length ? html`
+                <div class="section-hdr">Selected</div>
+                ${selectedSubjects.map(name => html`
+                    <button class="item sel"
+                            @click=${() => this._change('subjects', toggleArrayValue(selectedSubjects, name), true)}>
+                        <input type="checkbox" .checked=${true} readonly> ${name}
+                    </button>`)}
+                <div class="section-sep"></div>
+            ` : ''}
+            <div class="section-hdr">${selectedSubjects.length ? 'Suggestions' : 'Subjects'}</div>
+            <div class="scroll">
+                ${this.facetsLoading ? html`<div class="empty">Loading…</div>` : ''}
+                ${!searching && !this.facetsLoading && this.defaultSubjects.length === 0
+        ? html`<div class="hint">Type to search subjects</div>` : ''}
+                ${searching && !this.facetsLoading && this.subjectResults.length === 0
+        ? html`<div class="empty">No subjects found</div>` : ''}
+                ${!this.facetsLoading ? repeat(unselSugg, s => s.name, s => html`
+                    <button class="item"
+                            @click=${() => this._change('subjects', toggleArrayValue(selectedSubjects, s.name), true)}>
+                        <input type="checkbox" .checked=${false} readonly>
+                        ${s.name}
+                        ${s.work_count ? html`<span class="count">${s.work_count.toLocaleString()}</span>` : ''}
+                    </button>`) : ''}
+            </div>
+            ${selectedSubjects.length ? html`
+                <div class="footer">
+                    <button class="clear"
+                            @click=${e => { e.stopPropagation(); this._change('subjects', []); }}>
+                        Clear selections
+                    </button>
+                </div>` : ''}`;
+    }
+
+    render() {
+        const f = this.filters ?? {};
+        let panelContent;
+        switch (this.name) {
+        case 'genre':   panelContent = this._renderGenre(f);   break;
+        case 'author':  panelContent = this._renderAuthor(f);  break;
+        case 'subject': panelContent = this._renderSubject(f); break;
+        default: panelContent = html``;
+        }
+
+        return html`
+            <ol-popover
+                placement=${this.placement}
+                aria-label=${`Filter by ${this.name}`}
+                @ol-popover-open=${this._onOpen}
+                @ol-popover-close=${this._onClose}
+            >
+                <button
+                    slot="trigger"
+                    type="button"
+                    class="trigger"
+                    aria-haspopup="dialog"
+                >
+                    ${this._label}
+                    ${OlFacetDrop._chevronIcon}
+                </button>
+                <div class="panel">${panelContent}</div>
+            </ol-popover>
+        `;
+    }
+}
+
+customElements.define('ol-facet-drop', OlFacetDrop);
diff --git a/openlibrary/components/lit/OlFacetSelect.js b/openlibrary/components/lit/OlFacetSelect.js
new file mode 100644
index 00000000000..170d68ecd05
--- /dev/null
+++ b/openlibrary/components/lit/OlFacetSelect.js
@@ -0,0 +1,353 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import './OlPopover.js';
+
+let _idCounter = 0;
+
+/**
+ * A single-select trigger button paired with a popover list of options.
+ * Selecting any option fires `ol-facet-select-change` and closes the popover.
+ *
+ * Composes `<ol-popover>` for animation, focus trap, mobile tray, and
+ * Escape/outside-click dismissal.
+ *
+ * Intentionally minimal — no multi-select, no filter input, no SELECTED/
+ * SUGGESTIONS grouping. Designed as a sibling primitive to `ol-select-popover`.
+ *
+ * @element ol-facet-select
+ *
+ * @prop {Array}  options         - List of `{ value, label, count?, subParts? }` objects.
+ *     `count` (String)  — shown after the label (e.g. "~50M").
+ *     `subParts` (Array) — description parts: `[{ text, href? }]`.
+ * @prop {String} value           - Currently selected value.
+ * @prop {String} triggerLabel    - Fixed text for the trigger button. When set,
+ *     the trigger always shows this text instead of the selected option's label.
+ * @prop {String} accessibleLabel - Accessible label forwarded to the popover dialog.
+ *
+ * @fires ol-facet-select-change - Fired when the user picks an option.
+ *     detail: { value: String, label: String }
+ *
+ * @example
+ * <ol-facet-select
+ *   accessible-label="Search by"
+ *   .options=${[{value:'all',label:'All'},{value:'title',label:'Title'}]}
+ *   value="all"
+ * ></ol-facet-select>
+ */
+export class OlFacetSelect extends LitElement {
+    static properties = {
+        options: { type: Array },
+        value: { type: String },
+        triggerLabel: { type: String, attribute: 'trigger-label' },
+        accessibleLabel: { type: String, attribute: 'accessible-label' },
+        _isOpen: { state: true },
+    };
+
+    static styles = css`
+        :host {
+            display: inline-flex;
+            align-items: stretch;
+            font-family: var(--font-family-body);
+        }
+
+        /* stretch ol-popover to fill the host */
+        ol-popover {
+            flex: 1;
+            align-self: stretch;
+        }
+
+        /* ── Trigger button ─────────────────────────────────────── */
+
+        .trigger {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            padding: var(--ol-trigger-padding, 0 8px);
+            height: 100%;
+            min-height: var(--ol-trigger-min-height, 34px);
+            flex: 1;
+            background: var(--ol-trigger-bg, transparent);
+            border: none;
+            border-right: var(--ol-trigger-border-right, 1px solid var(--color-border-subtle, #ddd));
+            border-radius: var(--ol-trigger-border-radius, 0);
+            color: var(--darker-grey, #333);
+            font: inherit;
+            font-size: var(--ol-trigger-font-size, 14px);
+            font-weight: 500;
+            line-height: 1.4;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: background 100ms ease;
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+            .trigger:hover {
+                background: var(--ol-trigger-bg-hover, var(--lightest-grey, #f5f5f5));
+            }
+        }
+
+        .trigger:active {
+            transform: scale(0.97);
+        }
+
+        .trigger:focus {
+            outline: none;
+        }
+
+        .trigger:focus-visible {
+            outline: 2px solid var(--color-focus-ring, #0070b8);
+            outline-offset: -2px;
+        }
+
+        .trigger-chevron {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+            color: var(--accessible-grey, #666);
+            transition: transform 150ms ease-out;
+        }
+
+        :host([data-open]) .trigger-chevron {
+            transform: rotate(180deg);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .trigger-chevron { transition: none; }
+        }
+
+        /* ── Panel ──────────────────────────────────────────────── */
+
+        .panel {
+            min-width: 220px;
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 4px 0;
+        }
+
+        li button {
+            display: block;
+            width: 100%;
+            padding: 8px 16px;
+            background: transparent;
+            border: none;
+            color: var(--darker-grey, #333);
+            font: inherit;
+            font-size: 14px;
+            text-align: left;
+            cursor: pointer;
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+            li button:hover {
+                background: var(--icon-link-grey, #f0f0f0);
+            }
+        }
+
+        li button:focus {
+            outline: none;
+        }
+
+        li button:focus-visible {
+            outline: 2px solid var(--color-focus-ring, #0070b8);
+            outline-offset: -2px;
+        }
+
+        li[aria-selected="true"] button {
+            background: hsla(202, 96%, 37%, 0.08);
+            color: var(--link-blue, #0070b8);
+            font-weight: 600;
+        }
+
+        li button {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 2px;
+        }
+
+        .opt-main {
+            display: flex;
+            align-items: baseline;
+            gap: 6px;
+            width: 100%;
+        }
+
+        .opt-count {
+            font-size: 12px;
+            color: var(--accessible-grey, #666);
+            font-weight: 400;
+            flex-shrink: 0;
+        }
+
+        li[aria-selected="true"] .opt-count {
+            color: inherit;
+            opacity: 0.75;
+        }
+
+        .opt-desc {
+            font-size: 11px;
+            color: var(--accessible-grey, #666);
+            font-weight: 400;
+            line-height: 1.3;
+        }
+
+        li[aria-selected="true"] .opt-desc {
+            color: inherit;
+            opacity: 0.75;
+        }
+
+        .opt-desc a {
+            color: inherit;
+            text-decoration: underline;
+        }
+    `;
+
+    static _chevronIcon = html`
+        <svg class="trigger-chevron" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+             aria-hidden="true">
+            <path d="m6 9 6 6 6-6"/>
+        </svg>`;
+
+    constructor() {
+        super();
+        this.options = [];
+        this.value = '';
+        this.accessibleLabel = '';
+        this._isOpen = false;
+        this._panelId = `ol-facet-select-${++_idCounter}`;
+    }
+
+    get _selectedLabel() {
+        const match = (this.options || []).find(o => o.value === this.value);
+        return match?.label ?? this.value;
+    }
+
+    render() {
+        return html`
+            <ol-popover
+                placement="bottom-start"
+                aria-label=${this.accessibleLabel || 'Select option'}
+                @ol-popover-open=${this._onOpen}
+                @ol-popover-close=${this._onClose}
+            >
+                <button
+                    slot="trigger"
+                    type="button"
+                    class="trigger"
+                    aria-haspopup="listbox"
+                    aria-expanded=${this._isOpen}
+                    aria-controls=${this._panelId}
+                    aria-label=${ifDefined(this.accessibleLabel
+        ? `${this.accessibleLabel}: ${this._selectedLabel}`
+        : undefined)}
+                >
+                    ${this.triggerLabel || this._selectedLabel}
+                    ${OlFacetSelect._chevronIcon}
+                </button>
+
+                <div
+                    class="panel"
+                    role="listbox"
+                    id=${this._panelId}
+                    aria-label=${this.accessibleLabel || 'Select option'}
+                    @keydown=${this._onKeydown}
+                >
+                    <ul>
+                        ${repeat(this.options || [], o => o.value, o => html`
+                            <li role="option" aria-selected=${o.value === this.value}>
+                                <button
+                                    type="button"
+                                    data-value=${o.value}
+                                    @click=${this._onSelect}
+                                >
+                                    <span class="opt-main">
+                                        ${o.label}
+                                        ${o.count ? html`<span class="opt-count">${o.count}</span>` : nothing}
+                                    </span>
+                                    ${o.subParts?.length ? html`
+                                        <span class="opt-desc">
+                                            ${o.subParts.map(p => p.href
+        ? html`<a href=${p.href} target="_blank" rel="noopener">${p.text}</a>`
+        : p.text)}
+                                        </span>` : nothing}
+                                </button>
+                            </li>
+                        `)}
+                    </ul>
+                </div>
+            </ol-popover>
+        `;
+    }
+
+    // ── Event handlers ───────────────────────────────────────────
+
+    _onOpen() {
+        this._isOpen = true;
+        this.setAttribute('data-open', '');
+        // Focus current selection (desktop only; skip on mobile to avoid keyboard popup)
+        if (!window.matchMedia('(max-width: 767px)').matches) {
+            requestAnimationFrame(() => {
+                const activeBtn = this.shadowRoot?.querySelector('li[aria-selected="true"] button');
+                const firstBtn = this.shadowRoot?.querySelector('li button');
+                (activeBtn || firstBtn)?.focus();
+            });
+        }
+    }
+
+    _onClose() {
+        this._isOpen = false;
+        this.removeAttribute('data-open');
+    }
+
+    _onSelect(e) {
+        const value = e.currentTarget.dataset.value;
+        const opt = (this.options || []).find(o => o.value === value);
+        if (!opt) return;
+
+        this.value = value;
+        this.dispatchEvent(new CustomEvent('ol-facet-select-change', {
+            bubbles: true, composed: true,
+            detail: { value: opt.value, label: opt.label },
+        }));
+
+        // Close the popover. Set open=false directly rather than going through
+        // _requestClose so we avoid a cancelable event that callers could prevent.
+        // Because setting open=false bypasses the ol-popover-close event path,
+        // sync local state explicitly so _isOpen/data-open don't stay stuck.
+        const popover = this.shadowRoot?.querySelector('ol-popover');
+        if (popover) {
+            popover.open = false;
+            this._onClose();
+        }
+    }
+
+    _onKeydown(e) {
+        const btns = Array.from(this.shadowRoot?.querySelectorAll('li button') || []);
+        if (!btns.length) return;
+        const active = this.shadowRoot?.activeElement;
+        const idx = btns.indexOf(active);
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            btns[Math.min(idx + 1, btns.length - 1)]?.focus();
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            btns[Math.max(idx - 1, 0)]?.focus();
+        } else if (e.key === 'Home') {
+            e.preventDefault();
+            btns[0]?.focus();
+        } else if (e.key === 'End') {
+            e.preventDefault();
+            btns[btns.length - 1]?.focus();
+        }
+    }
+}
+
+customElements.define('ol-facet-select', OlFacetSelect);
diff --git a/openlibrary/components/lit/OlHowtoModal.js b/openlibrary/components/lit/OlHowtoModal.js
new file mode 100644
index 00000000000..d470d43bf69
--- /dev/null
+++ b/openlibrary/components/lit/OlHowtoModal.js
@@ -0,0 +1,87 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Modal dialog showing the OL search help page in an iframe.
+ *
+ * @element ol-howto-modal
+ * @prop {Boolean} open - when true the overlay is visible
+ * @fires close - fired when the user dismisses the modal
+ */
+export class OlHowtoModal extends LitElement {
+    static properties = {
+        open: { type: Boolean },
+    };
+
+    constructor() {
+        super();
+        this.open = false;
+        this._onKey = e => { if (this.open && e.key === 'Escape') this._close(); };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this._onKey);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._onKey);
+    }
+
+    _close() {
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+
+    static styles = css`
+        .overlay {
+            position: fixed; inset: 0;
+            background: rgba(0,0,0,.52);
+            z-index: 9000;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .modal {
+            background: white; border-radius: 10px;
+            width: min(820px, 92vw); height: 82vh;
+            display: flex; flex-direction: column;
+            box-shadow: 0 24px 72px rgba(0,0,0,.35);
+            overflow: hidden;
+        }
+        .modal-head {
+            display: flex; align-items: center; justify-content: space-between;
+            padding: 12px 16px; border-bottom: 1px solid hsl(0,0%,90%);
+            flex-shrink: 0;
+        }
+        .modal-title {
+            font-size: 14px; font-weight: 600;
+            color: hsl(202,96%,28%);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        }
+        .close-btn {
+            background: none; border: none; cursor: pointer;
+            font-size: 20px; color: hsl(0,0%,45%); padding: 2px 7px;
+            border-radius: 4px; line-height: 1; font-family: inherit;
+        }
+        .close-btn:hover { background: hsl(0,0%,94%); color: hsl(0,0%,20%); }
+        iframe { flex: 1; border: none; width: 100%; }
+    `;
+
+    render() {
+        if (!this.open) return html``;
+        return html`
+            <div class="overlay" @click=${this._close}>
+                <div class="modal" @click=${e => e.stopPropagation()}>
+                    <div class="modal-head">
+                        <span class="modal-title">⚙️ Search Help &amp; Advanced Syntax</span>
+                        <button class="close-btn" @click=${this._close} aria-label="Close">×</button>
+                    </div>
+                    <iframe
+                        src="/search/howto"
+                        title="Open Library Search Help"
+                        loading="lazy">
+                    </iframe>
+                </div>
+            </div>`;
+    }
+}
+
+customElements.define('ol-howto-modal', OlHowtoModal);
diff --git a/openlibrary/components/lit/OlPopover.js b/openlibrary/components/lit/OlPopover.js
index 4b27d5c11de..9a280684118 100644
--- a/openlibrary/components/lit/OlPopover.js
+++ b/openlibrary/components/lit/OlPopover.js
@@ -73,7 +73,7 @@ export class OlPopover extends LitElement {
     static styles = css`
         :host {
             display: inline-flex;
-            align-items: center;
+            align-items: var(--ol-popover-trigger-align, center);
             position: relative;
         }
 
@@ -565,6 +565,13 @@ export class OlPopover extends LitElement {
             top = pad;
         }
 
+        // For bottom placement: never let the panel slide up over the trigger button.
+        // If the panel is too tall for the available space, it will overflow the
+        // viewport bottom — the panel's internal scroll handles the remainder.
+        if (side === 'bottom') {
+            top = Math.max(top, anchor.bottom + gap);
+        }
+
         // Compute transform-origin so the animation radiates from the trigger.
         // The origin is expressed relative to the panel's top-left corner.
         const originY = side === 'bottom' ? 'top' : 'bottom';
diff --git a/openlibrary/components/lit/OlSearchBar.js b/openlibrary/components/lit/OlSearchBar.js
new file mode 100644
index 00000000000..0ef1c445f7a
--- /dev/null
+++ b/openlibrary/components/lit/OlSearchBar.js
@@ -0,0 +1,1032 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import {
+    POPULAR_AUTHORS, POPULAR_SUBJECTS, AVAILABILITY_OPTIONS, LANGUAGE_OPTIONS, SORT_OPTIONS,
+    EMPTY_FILTERS, shufflePick, bestEdition,
+    buildChips,
+} from './search/filters.js';
+import { BREAKPOINTS } from './search/breakpoints.js';
+import { fetchAuthorSuggestions, fetchSubjectSuggestions } from './search/facets.js';
+import './OlHowtoModal.js';
+import './OlFacetDrop.js';
+import './OlFacetSelect.js';
+import './OlSelectPopover.js';
+
+/** Facet drop configs — drives the repeated ol-facet-drop blocks in the facet bar */
+const DROPS = [
+    { name: 'genre',   placement: 'bottom-start' },
+    { name: 'subject', placement: 'bottom-end' },
+    { name: 'author',  placement: 'bottom-end' },
+];
+
+/**
+ * Unified search bar used in two modes:
+ *
+ *   showFacets=true  ("header" mode)
+ *     - owns local filter state (_localFilters)
+ *     - chips shown in input row, always visible
+ *     - panel opens on focus: facets + autocomplete cards
+ *
+ *   showFacets=false ("search-page" mode)
+ *     - chips and filters passed as props, shown in input row
+ *     - NO panel — just a query input; submit triggers ol-search
+ *
+ * Uses Shadow DOM (LitElement default) — intentional: keeps styles and
+ * structure self-contained so the component is droppable on any page
+ * without style leakage in either direction.
+ *
+ * @element ol-search-bar
+ */
+export class OlSearchBar extends LitElement {
+    static properties = {
+        q: { type: String },
+        chips: { type: Array },
+        showFacets: { type: Boolean, attribute: 'show-facets' },
+        filters: { type: Object },
+        siteBase: { type: String },
+        placeholder: { type: String },
+
+        _q: { state: true },
+        _suggestions: { state: true },
+        _open: { state: true },
+        _loading: { state: true },
+        _total: { state: true },
+        _localFilters: { state: true },
+        _howtoOpen: { state: true },
+        _authorResults: { state: true },
+        _subjectResults: { state: true },
+        _defaultAuthors: { state: true },
+        _defaultSubjects: { state: true },
+        _facetsLoading: { state: true },
+        _acFocusIdx: { state: true },
+        _mobileExpanded: { state: true },
+        _acError: { state: true },
+    };
+
+    constructor() {
+        super();
+        this.q           = '';
+        this.chips       = [];
+        this.showFacets  = false;
+        this.filters     = { ...EMPTY_FILTERS };
+        this.siteBase    = '';
+        this.placeholder = 'Search books, authors…';
+
+        this._q             = '';
+        this._suggestions   = [];
+        this._open          = false;
+        this._loading       = false;
+        this._total         = 0;
+        this._acError       = false;
+        this._timer         = null;
+        this._localFilters  = { ...EMPTY_FILTERS };
+
+        this._howtoOpen       = false;
+        this._authorResults   = [];
+        this._subjectResults  = [];
+        this._defaultAuthors  = shufflePick(POPULAR_AUTHORS, 6);
+        this._defaultSubjects = shufflePick(POPULAR_SUBJECTS, 6);
+        this._facetsLoading   = false;
+        this._acFocusIdx      = -1;
+        this._mobileExpanded  = false;
+        this._authorTimer     = null;
+        this._subjectTimer    = null;
+        this._acAbort         = null;
+        this._authorAbort     = null;
+        this._subjectAbort    = null;
+
+        this._onWinResize = () => {
+            if (!this._open) return;
+            const isMobile = window.matchMedia(`(max-width: ${BREAKPOINTS.mobile}px)`).matches;
+            if (isMobile && !this._mobileExpanded) {
+                this._mobileExpanded = true;
+            } else if (!isMobile && this._mobileExpanded) {
+                this._mobileExpanded = false;
+                requestAnimationFrame(() => this._positionPanel());
+            } else if (!isMobile) {
+                requestAnimationFrame(() => this._positionPanel());
+            }
+        };
+
+        this._onDoc = e => {
+            const path = e.composedPath();
+            if (!path.includes(this)) this._closePanel();
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._onDoc, true);
+        window.addEventListener('resize', this._onWinResize);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._onDoc, true);
+        window.removeEventListener('resize', this._onWinResize);
+        this._acAbort?.abort();
+        this._authorAbort?.abort();
+        this._subjectAbort?.abort();
+        clearTimeout(this._timer);
+        clearTimeout(this._authorTimer);
+        clearTimeout(this._subjectTimer);
+        if (this._scrollLockActive) {
+            document.body.style.overflow            = this._prevBodyOverflow ?? '';
+            document.documentElement.style.overflow = this._prevDocumentOverflow ?? '';
+            this._scrollLockActive = false;
+        }
+    }
+
+    updated(changed) {
+        if (changed.has('q') && this.q !== null && this.q !== this._q) {
+            this._q = this.q;
+        }
+        if (!this.showFacets && changed.has('filters') && this.filters) {
+            this._localFilters = { ...this.filters };
+        }
+        this.classList.toggle('mobile-exp', this._mobileExpanded);
+        if (changed.has('_open') || changed.has('_mobileExpanded')) {
+            const shouldLock = this._mobileExpanded;
+            if (shouldLock && !this._scrollLockActive) {
+                this._prevBodyOverflow            = document.body.style.overflow;
+                this._prevDocumentOverflow        = document.documentElement.style.overflow;
+                this._scrollLockActive            = true;
+                document.body.style.overflow      = 'hidden';
+                document.documentElement.style.overflow = 'hidden';
+            } else if (!shouldLock && this._scrollLockActive) {
+                document.body.style.overflow            = this._prevBodyOverflow ?? '';
+                document.documentElement.style.overflow = this._prevDocumentOverflow ?? '';
+                this._scrollLockActive      = false;
+                this._prevBodyOverflow      = undefined;
+                this._prevDocumentOverflow  = undefined;
+            }
+        }
+        if ((changed.has('_open') || changed.has('_mobileExpanded')) && this._open && this.showFacets) {
+            if (!this._mobileExpanded) this._positionPanel();
+            requestAnimationFrame(() => this.shadowRoot?.querySelector('.panel-input')?.focus());
+        }
+    }
+
+    _positionPanel() {
+        if (this._mobileExpanded) return;
+        const trigger = this.shadowRoot?.querySelector('.input-row');
+        if (!trigger) return;
+        const rect = trigger.getBoundingClientRect();
+        const vw   = window.innerWidth;
+        this.style.setProperty('--ol-panel-top', `${rect.top}px`);
+        if (vw > BREAKPOINTS.wide) {
+            const desired = Math.max(600, Math.min(860, rect.width));
+            const panelW  = Math.min(desired, rect.right - 8);
+            this.style.setProperty('--ol-panel-width', `${panelW}px`);
+            this.style.setProperty('--ol-panel-right', `${Math.max(0, vw - rect.right)}px`);
+            this.style.setProperty('--ol-panel-left',  'auto');
+        } else {
+            const panelW = Math.max(600, Math.round(vw * 0.85));
+            const left   = Math.round((vw - panelW) / 2);
+            this.style.setProperty('--ol-panel-width', `${panelW}px`);
+            this.style.setProperty('--ol-panel-left',  `${left}px`);
+            this.style.setProperty('--ol-panel-right', 'auto');
+        }
+    }
+
+    _hasActiveFilters() {
+        const f = this._localFilters;
+        const nonDefaultAvail = f.availability && f.availability !== EMPTY_FILTERS.availability;
+        return !!(nonDefaultAvail || f.fictionFilter ||
+            f.languages?.length || f.genres?.length ||
+            f.authors?.length   || f.subjects?.length);
+    }
+
+    _onTriggerClick(e) {
+        e.stopPropagation();
+        this._open = true;
+        if (window.matchMedia(`(max-width: ${BREAKPOINTS.mobile}px)`).matches) {
+            this._mobileExpanded = true;
+        }
+    }
+
+    _closePanel() {
+        this._open           = false;
+        this._mobileExpanded = false;
+        this._acFocusIdx     = -1;
+    }
+
+    _onInput(e) {
+        this._q = e.target.value;
+        if (this.showFacets) this._open = true;
+        clearTimeout(this._timer);
+        if (this._q.trim().length < 2 && !this._hasActiveFilters()) {
+            this._suggestions = [];
+            this._acError     = false;
+            this._loading     = false;
+            return;
+        }
+        this._loading = true;
+        this._timer = setTimeout(() => this._fetchAutocomplete(), 300);
+    }
+
+    async _fetchAutocomplete() {
+        this._acAbort?.abort();
+        this._acAbort = new AbortController();
+        const { signal } = this._acAbort;
+        this._acError = false;
+
+        const q = this._q.trim();
+        const f = this._localFilters;
+        try {
+            // OL search API: /search.json with OL-specific param names
+            const p = new URLSearchParams({ limit: 5 });
+            p.set('fields', 'key,title,author_name,cover_i,first_publish_year,ratings_average,ebook_access,editions');
+            p.set('mode', this._readMode());
+            if (q)               p.set('q', q);
+            if (f.availability)  p.set('availability', f.availability);
+            // OL uses 'subject' for fiction, genres, and subjects (all map to subject param)
+            if (f.fictionFilter) p.append('subject', f.fictionFilter);
+            for (const v of f.languages ?? []) p.append('language', v);
+            for (const v of f.genres    ?? []) p.append('subject',  v);
+            for (const v of f.authors   ?? []) p.append('author',   v);
+            for (const v of f.subjects  ?? []) p.append('subject',  v);
+            const d = await (await fetch(`/search.json?${p}`, { signal })).json();
+            this._suggestions = d.docs ?? [];
+            this._total       = d.numFound ?? 0;  // OL uses numFound, not num_found
+            this._acFocusIdx  = -1;
+        } catch (err) {
+            if (err.name !== 'AbortError') {
+                this._suggestions = []; this._total = 0; this._acFocusIdx = -1;
+                this._acError = true;
+            }
+        } finally {
+            if (!signal.aborted) this._loading = false;
+        }
+    }
+
+    _clearInput() {
+        this._acAbort?.abort();
+        clearTimeout(this._timer);
+        this._q           = '';
+        this._suggestions = [];
+        this._acError     = false;
+        this._total       = 0;
+        this._acFocusIdx  = -1;
+        this._loading     = false;
+        this.shadowRoot?.querySelector('.text-input')?.focus();
+    }
+
+    _onKeyDown(e) {
+        if (e.key === 'Escape') {
+            this._closePanel(); return;
+        }
+        if (this._open && this._suggestions.length > 0) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this._acFocusIdx = Math.min(this._acFocusIdx + 1, this._suggestions.length - 1);
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this._acFocusIdx = Math.max(this._acFocusIdx - 1, -1);
+                return;
+            }
+            if (e.key === 'Enter' && this._acFocusIdx >= 0) {
+                e.preventDefault();
+                this.shadowRoot?.querySelectorAll('.suggestion-row')?.[this._acFocusIdx]?.click();
+                return;
+            }
+        }
+        if (e.key === 'Enter') this._submit();
+    }
+
+    _readMode() {
+        try { return localStorage.getItem('mode') || 'everything'; } catch { return 'everything'; }
+    }
+
+    _buildSearchUrl(q, f = {}) {
+        const p = new URLSearchParams();
+        if (q) p.set('q', q);
+        if (f.sort)           p.set('sort', f.sort);
+        if (f.availability)   p.set('availability', f.availability);
+        if (f.fictionFilter)  p.append('subject', f.fictionFilter);
+        (f.languages ?? []).forEach(l => p.append('language', l));
+        (f.genres    ?? []).forEach(g => p.append('subject', g));
+        (f.authors   ?? []).forEach(a => p.append('author', a));
+        (f.subjects  ?? []).forEach(s => p.append('subject', s));
+        p.set('mode', this._readMode());
+        // siteBase may be '' in OL — fall back to origin for URL construction
+        const base = this.siteBase || window.location.origin;
+        const url = new URL('/search', base);
+        url.search = p.toString();
+        // Return relative URL when siteBase is empty
+        return this.siteBase ? url.toString() : url.pathname + url.search;
+    }
+
+    _submit() {
+        if (!this._q.trim() && !this._hasActiveFilters()) return;
+        this._mobileExpanded = false;
+        const event = new CustomEvent('ol-search', {
+            detail: { q: this._q.trim(), filters: this._localFilters },
+            bubbles: true, composed: true, cancelable: true,
+        });
+        this.dispatchEvent(event);
+        if (this.showFacets && !event.defaultPrevented) {
+            window.location.href = this._buildSearchUrl(this._q.trim(), this._localFilters);
+        }
+    }
+
+    _clearAllFilters() {
+        if (this.showFacets) {
+            const f = this._localFilters;
+            const fields = [
+                ['availability',  EMPTY_FILTERS.availability],
+                ['fictionFilter', EMPTY_FILTERS.fictionFilter],
+                ['languages',     EMPTY_FILTERS.languages],
+                ['genres',        EMPTY_FILTERS.genres],
+                ['authors',       EMPTY_FILTERS.authors],
+                ['subjects',      EMPTY_FILTERS.subjects],
+                ['sort',          EMPTY_FILTERS.sort],
+            ];
+            for (const [field, empty] of fields) {
+                const cur = f[field];
+                const isDiff = Array.isArray(cur) ? cur.length > 0 : cur !== empty;
+                if (isDiff) this._emitFilter(field, empty);
+            }
+        } else {
+            this.dispatchEvent(new CustomEvent('ol-clear-all-filters', {
+                bubbles: true, composed: true,
+            }));
+        }
+    }
+
+    _handleChipRemove(c) {
+        if (this.showFacets) {
+            const f = this._localFilters;
+            if      (c.type === 'access')  this._emitFilter('availability',  '');
+            else if (c.type === 'fiction') this._emitFilter('fictionFilter', '');
+            else if (c.type === 'lang')    this._emitFilter('languages', []);
+            else if (c.type === 'genre')   this._emitFilter('genres',    (f.genres    ?? []).filter(v => v !== c.value));
+            else if (c.type === 'author')  this._emitFilter('authors',   (f.authors   ?? []).filter(v => v !== c.value));
+            else if (c.type === 'subject') this._emitFilter('subjects',  (f.subjects  ?? []).filter(v => v !== c.value));
+        } else {
+            const f = this.filters ?? this._localFilters;
+            let filter, value;
+            if      (c.type === 'access')  { filter = 'availability';  value = ''; }
+            else if (c.type === 'fiction') { filter = 'fictionFilter'; value = ''; }
+            else if (c.type === 'lang')    { filter = 'languages';     value = []; }
+            else if (c.type === 'genre')   { filter = 'genres';        value = (f.genres    ?? []).filter(v => v !== c.value); }
+            else if (c.type === 'author')  { filter = 'authors';       value = (f.authors   ?? []).filter(v => v !== c.value); }
+            else if (c.type === 'subject') { filter = 'subjects';      value = (f.subjects  ?? []).filter(v => v !== c.value); }
+            if (filter !== undefined) {
+                this.dispatchEvent(new CustomEvent('ol-filter-change', {
+                    detail: { filter, value }, bubbles: true, composed: true,
+                }));
+            }
+        }
+    }
+
+    _emitFilter(filter, value) {
+        this._localFilters = { ...this._localFilters, [filter]: value };
+        this.dispatchEvent(new CustomEvent('ol-filter-change', {
+            detail: { filter, value }, bubbles: true, composed: true,
+        }));
+        this._open = true;
+        clearTimeout(this._timer);
+        this._loading = true;
+        this._timer = setTimeout(() => this._fetchAutocomplete(), 150);
+    }
+
+    _onDropFacetChange(e) {
+        this._emitFilter(e.detail.filter, e.detail.value);
+    }
+
+    _onDropAuthorSearch(e) {
+        clearTimeout(this._authorTimer);
+        this._authorAbort?.abort();
+        const q = e.detail.q;
+        if (q.trim().length < 2) { this._authorResults = []; this._facetsLoading = false; return; }
+        this._facetsLoading = true;
+        this._authorAbort = new AbortController();
+        const { signal } = this._authorAbort;
+        this._authorTimer = setTimeout(async() => {
+            try {
+                this._authorResults = await fetchAuthorSuggestions(q, { signal });
+            } catch {
+                this._authorResults = [];
+            } finally {
+                if (!signal.aborted) this._facetsLoading = false;
+            }
+        }, 250);
+    }
+
+    _onDropSubjectSearch(e) {
+        clearTimeout(this._subjectTimer);
+        this._subjectAbort?.abort();
+        const q = e.detail.q;
+        if (q.trim().length < 2) { this._subjectResults = []; this._facetsLoading = false; return; }
+        this._facetsLoading = true;
+        this._subjectAbort = new AbortController();
+        const { signal } = this._subjectAbort;
+        this._subjectTimer = setTimeout(async() => {
+            try {
+                this._subjectResults = await fetchSubjectSuggestions(q, { signal });
+            } catch {
+                this._subjectResults = [];
+            } finally {
+                if (!signal.aborted) this._facetsLoading = false;
+            }
+        }, 250);
+    }
+
+    _shuffleAuthors()  { this._defaultAuthors  = shufflePick(POPULAR_AUTHORS,  6); }
+    _shuffleSubjects() { this._defaultSubjects = shufflePick(POPULAR_SUBJECTS, 6); }
+    _openHowto(e)      { e.stopPropagation(); this._howtoOpen = true; }
+    _closeHowto()      { this._howtoOpen = false; }
+
+    static styles = css`
+        :host { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; }
+
+        .search-outer { position: relative; }
+
+        .input-row {
+            display: flex; align-items: center; gap: 6px;
+            background: white; border: 1.5px solid hsl(0,0%,78%); border-radius: 8px;
+            padding: 6px 8px; transition: border-color .15s, box-shadow .15s;
+            cursor: text;
+        }
+        .input-row:focus-within {
+            border-color: hsl(202,96%,37%);
+            box-shadow: 0 0 0 3px hsla(202,96%,37%,.12);
+        }
+        .search-outer.open .input-row {
+            background: white;
+            border-color: hsl(202,96%,37%);
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            box-shadow: 0 0 0 3px hsla(202,96%,37%,.12);
+        }
+
+        .chip-bar {
+            display: flex; flex-wrap: wrap; gap: 4px;
+            padding: 6px 2px 0;
+        }
+        .panel-chips {
+            display: flex; flex-wrap: wrap; gap: 4px;
+            padding: 8px 14px 6px;
+            border-bottom: 1px solid hsl(0,0%,90%);
+            background: hsl(0,0%,98.5%);
+        }
+
+        .chip {
+            display: inline-flex; align-items: center; gap: 3px;
+            padding: 2px 7px 2px 9px; border-radius: 9999px;
+            font-size: 12px; font-weight: 500; border: 1px solid; white-space: nowrap; line-height: 1.5;
+            flex-shrink: 0;
+        }
+        .chip-access   { background:hsl(142,50%,91%); color:hsl(142,50%,22%); border-color:hsl(142,50%,72%); }
+        .chip-fiction  { background:hsl(270,45%,92%); color:hsl(270,45%,30%); border-color:hsl(270,45%,76%); }
+        .chip-lang     { background:hsl(217,70%,92%); color:hsl(217,70%,28%); border-color:hsl(217,70%,76%); }
+        .chip-genre    { background:hsl(270,35%,93%); color:hsl(270,35%,32%); border-color:hsl(270,35%,78%); }
+        .chip-author   { background:hsl(25,80%,92%);  color:hsl(25,80%,28%);  border-color:hsl(25,80%,72%); }
+        .chip-subject  { background:hsl(340,60%,92%); color:hsl(340,60%,28%); border-color:hsl(340,60%,76%); }
+        .chip-x {
+            background:none; border:none; cursor:pointer;
+            padding:0 1px; font-size:15px; line-height:1; opacity:.5;
+        }
+        .chip-x:hover { opacity:1; }
+
+        .clear-all-btn {
+            flex-shrink:0; margin-left:auto; background:none; border:none;
+            cursor:pointer; font-size:11px; font-family:inherit;
+            font-weight:500; color:hsl(0,0%,50%);
+            padding:2px 8px; border-radius:4px;
+            white-space:nowrap; line-height:1.5;
+            transition:color .1s, background .1s;
+        }
+        .clear-all-btn:hover { color:hsl(0,72%,35%); background:hsl(0,72%,96%); }
+
+        .text-input {
+            flex:1; min-width:80px; border:none; outline:none;
+            font-size:14px; font-family:inherit; color:hsl(0,0%,15%);
+            background:white; padding:2px 4px;
+            -webkit-appearance:none; appearance:none;
+        }
+        .text-input::placeholder { color:hsl(0,0%,52%); }
+
+        .input-controls {
+            display:flex; align-items:center; flex:1; gap:5px;
+        }
+
+        .submit {
+            flex-shrink:0; margin-left:auto;
+            background:hsl(202,96%,37%); color:white; border:none;
+            border-radius:6px; padding:6px 14px; font-size:13px;
+            font-weight:500; font-family:inherit; cursor:pointer;
+            display:inline-flex; align-items:center; gap:5px;
+            white-space:nowrap; transition:background .12s;
+        }
+        .submit:hover { background:hsl(202,96%,28%); }
+
+        .scan-sep { width:1px; height:20px; background:hsl(0,0%,82%); flex-shrink:0; margin:0 2px; }
+        .scan-btn {
+            flex-shrink:0; padding:5px 7px; border:1px solid hsl(0,0%,84%); border-radius:6px;
+            background:white; cursor:pointer; display:inline-flex; align-items:center;
+            transition:background .1s, border-color .1s;
+        }
+        .scan-btn:hover { background:hsl(0,0%,96%); border-color:hsl(0,0%,70%); }
+        .scan-btn img { display:block; width:18px; height:18px; }
+
+        .trigger-btn {
+            flex:1; min-width:0; border:none; outline:none; cursor:pointer;
+            background:transparent; font-size:14px; font-family:inherit;
+            padding:2px 4px; text-align:left; color:hsl(0,0%,15%);
+            overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
+        }
+        .trigger-placeholder { color:hsl(0,0%,52%); }
+
+        .panel-input-row {
+            display:flex; align-items:center; min-width:0; gap:6px;
+            padding:6px 8px; border-bottom:1px solid hsl(0,0%,90%);
+            background:white; border-radius:6.5px 6.5px 0 0;
+        }
+
+        .panel {
+            position:fixed;
+            top:var(--ol-panel-top, auto);
+            right:var(--ol-panel-right, 0px);
+            width:var(--ol-panel-width, 600px);
+            left:var(--ol-panel-left, auto);
+            background:white;
+            border:1.5px solid hsl(202,96%,37%);
+            border-radius:8px;
+            box-shadow:0 12px 32px rgba(0,0,0,.16);
+            z-index:500; overflow:visible;
+        }
+
+        .facet-bar {
+            display:flex; border-bottom:1px solid hsl(0,0%,90%);
+            background:hsl(0,0%,98.5%);
+            overflow-x: auto; scrollbar-width: none;
+        }
+        .facet-bar::-webkit-scrollbar { display: none; }
+        .facet-item { flex:1; min-width: max-content; position:relative; display:flex; }
+        .facet-item + .facet-item { border-left:1px solid hsl(0,0%,90%); }
+        .facet-item--cog { flex:0 0 38px; }
+        .facet-item--first { border-bottom-left-radius:9px; }
+        .facet-item--first .facet-btn { border-bottom-left-radius:9px; }
+        .facet-item--last  { border-bottom-right-radius:9px; }
+        .facet-item--last  .facet-btn { border-bottom-right-radius:9px; }
+        .facet-btn {
+            flex:1; padding:7px 4px; border:none; background:transparent;
+            font-size:11px; font-weight:500; font-family:inherit; color:hsl(0,0%,35%);
+            cursor:pointer; display:flex; align-items:center; justify-content:center;
+            gap:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+            transition:background .08s;
+        }
+        .facet-btn:hover  { background:hsl(0,0%,95%); color:hsl(202,96%,28%); }
+        .facet-btn.active { color:hsl(202,96%,28%); font-weight:600; }
+
+        /* OL primitive selectors within the facet bar — match facet-btn visual style */
+        .facet-item > ol-facet-select,
+        .facet-item > ol-facet-drop {
+            flex:1; align-self:stretch;
+            --ol-trigger-bg: transparent;
+            --ol-trigger-border-right: none;
+            --ol-trigger-border-radius: 0;
+            --ol-trigger-padding: 7px 4px;
+            --ol-trigger-font-size: 11px;
+            --ol-trigger-min-height: 0;
+            --darker-grey: hsl(0,0%,35%);
+            font-family: inherit;
+        }
+        .facet-item > ol-facet-select:hover,
+        .facet-item > ol-facet-drop:hover { --ol-trigger-bg-hover: hsl(0,0%,95%); }
+        .facet-item > ol-select-popover {
+            flex:1; align-self:stretch;
+            /* ol-select-popover is inline-block, which makes its flex-stretched
+               cross-size non-definite for child % resolution (unlike inline-flex).
+               Overriding display to inline-flex matches ol-facet-drop/:host behavior
+               and makes height:100% on the slotted trigger resolve correctly. */
+            display: inline-flex; align-items: stretch;
+            --ol-popover-trigger-align: stretch;
+        }
+        .facet-item > ol-select-popover > [slot="trigger"] {
+            width: 100%; height: 100%;
+        }
+
+        /* SVG chevron for Language slot="trigger" button */
+        .facet-chevron {
+            display: inline-block;
+            width: 12px; height: 12px;
+            flex-shrink: 0;
+            opacity: .55;
+            transition: transform 150ms ease-out;
+        }
+        .facet-item > ol-select-popover[data-open] > [slot="trigger"] .facet-chevron {
+            transform: rotate(180deg);
+        }
+        @media (prefers-reduced-motion: reduce) {
+            .facet-chevron { transition: none; }
+        }
+
+        .clear-btn {
+            flex-shrink:0; background:none; border:none; cursor:pointer;
+            padding:2px 4px; color:hsl(0,0%,55%); font-size:16px; line-height:1;
+            border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
+            transition:color .1s, background .1s;
+        }
+        .clear-btn:hover { color:hsl(0,0%,20%); background:hsl(0,0%,93%); }
+
+        .suggestion-list { max-height:280px; overflow-y:auto; }
+        .suggestion-loading, .suggestion-hint, .suggestion-empty {
+            padding:16px; text-align:center; font-size:13px; color:hsl(0,0%,55%);
+        }
+        .suggestion-error {
+            padding:16px; text-align:center; font-size:13px;
+            color:hsl(0,72%,40%); background:hsl(0,72%,97%);
+            border-bottom-left-radius: 6.5px; border-bottom-right-radius: 6.5px;
+        }
+        .suggestion-row {
+            display:flex; align-items:center; gap:12px; padding:10px 14px;
+            text-decoration:none; border-bottom:1px solid hsl(0,0%,94%);
+            transition:background .1s; cursor:pointer; color:inherit;
+        }
+        .suggestion-row:hover, .suggestion-row.focused { background:hsl(0,0%,97%); }
+        .suggestion-row.focused { outline:2px solid hsl(202,96%,37%); outline-offset:-2px; }
+        .suggestion-row:last-of-type { border-bottom:none; }
+        .suggestion-cover {
+            width:36px; height:54px; object-fit:cover; border-radius:3px;
+            background:hsl(0,0%,90%); flex-shrink:0; display:block;
+            box-shadow:1px 1px 3px rgba(0,0,0,.15);
+        }
+        .suggestion-blank {
+            width:36px; height:54px; flex-shrink:0; border-radius:3px;
+            background:hsl(48,20%,88%); display:flex;
+            align-items:center; justify-content:center; font-size:18px;
+        }
+        .suggestion-body { flex:1; min-width:0; text-align:left; }
+        .suggestion-title {
+            font-family:Georgia,serif; font-size:14px; font-weight:600;
+            color:hsl(202,96%,22%); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+        }
+        .suggestion-author { font-size:12px; color:hsl(0,0%,45%); margin-top:2px; }
+        .suggestion-year   { font-size:11px; color:hsl(0,0%,58%); }
+        .suggestion-meta   { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
+        .suggestion-badge  { font-size:10px; font-weight:600; padding:2px 6px; border-radius:3px; white-space:nowrap; }
+        .suggestion-badge--readable { background:hsl(142,50%,91%); color:hsl(142,50%,22%); }
+        .suggestion-badge--catalog  { background:hsl(0,0%,92%); color:hsl(0,0%,42%); }
+        .suggestion-star   { font-size:11px; color:hsl(40,80%,38%); white-space:nowrap; }
+        .suggestion-footer {
+            display:flex; align-items:center; justify-content:space-between;
+            padding:10px 14px; border-top:1px solid hsl(0,0%,92%);
+        }
+        .suggestion-add-book {
+            font-size:12px; color:hsl(202,96%,37%); text-decoration:none;
+            font-weight:500; padding:5px 10px; border-radius:5px;
+            border:1px solid hsl(202,96%,80%); transition:background .1s; white-space:nowrap;
+        }
+        .suggestion-add-book:hover { background:hsl(202,96%,96%); }
+        .suggestion-see-all {
+            background:hsl(202,96%,37%); color:white; border:none;
+            border-radius:6px; padding:7px 18px; font-size:13px;
+            font-weight:500; font-family:inherit; cursor:pointer;
+            white-space:nowrap; transition:background .12s;
+        }
+        .suggestion-see-all:hover { background:hsl(202,96%,28%); }
+
+        @media (max-width: 785px) {
+            :host { height: 100%; }
+            .search-outer { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
+            .input-row,
+            .input-row:focus-within,
+            .search-outer.open .input-row {
+                border: none; box-shadow: none; background: transparent;
+                padding: 0; border-radius: 8px; flex: none;
+            }
+            .input-row .trigger-btn { display: none; }
+            .input-row .submit { margin-left: 0; padding: 6px 8px; }
+        }
+
+        :host(.mobile-exp) {
+            position: fixed; inset: 0; z-index: 9000;
+            width: 100dvw; height: 100dvh;
+            display: flex; flex-direction: column;
+            background: white; overflow: hidden;
+        }
+        :host(.mobile-exp) .search-outer {
+            flex: 1; min-height: 0; display: flex; flex-direction: column;
+        }
+        :host(.mobile-exp) .input-row { display: none; }
+        :host(.mobile-exp) .panel {
+            position: static; flex: 1; min-height: 0;
+            width: 100%; box-sizing: border-box;
+            display: flex; flex-direction: column; overflow: hidden; max-height: none;
+            border: none; box-shadow: none; border-radius: 0;
+            border-top: none;
+        }
+        :host(.mobile-exp) .panel-chips { max-height: none; }
+        :host(.mobile-exp) .suggestion-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
+        :host(.mobile-exp) .facet-bar { overflow: visible; flex-wrap: wrap; }
+
+        .mobile-header {
+            padding: 8px 12px 4px;
+            border-bottom: 1px solid hsl(0,0%,92%);
+            background: hsl(0,0%,98.5%);
+        }
+        .mobile-back-btn {
+            background: none; border: none; cursor: pointer;
+            font-size: 14px; font-family: inherit; color: hsl(202,96%,37%);
+            padding: 4px 0; font-weight: 500;
+        }
+        .mobile-back-btn:hover { color: hsl(202,96%,28%); }
+
+        @media (max-width: 600px) {
+            .facet-btn { font-size: 10px; padding: 11px 4px; }
+            .submit { padding: 6px 10px; }
+            :host(:not(.mobile-exp)) .suggestion-list { max-height: 40vh; }
+            .panel-chips { max-height: 72px; overflow-y: auto; }
+        }
+    `;
+
+    _renderFacetBar() {
+        const f = this._localFilters;
+        const facetDropProps = {
+            filters: this._localFilters,
+            authorResults: this._authorResults,
+            subjectResults: this._subjectResults,
+            defaultAuthors: this._defaultAuthors,
+            defaultSubjects: this._defaultSubjects,
+            facetsLoading: this._facetsLoading,
+        };
+        return html`
+            <div class="facet-bar">
+                <div class="facet-item facet-item--first">
+                    <ol-facet-select
+                        accessible-label="Availability"
+                        trigger-label="Availability"
+                        .options=${AVAILABILITY_OPTIONS.map(o => ({
+        value: o.value, label: o.label,
+        count: o.staticCount, subParts: o.subParts,
+    }))}
+                        .value=${f.availability ?? ''}
+                        @ol-facet-select-change=${e => this._emitFilter('availability', e.detail.value)}
+                    ></ol-facet-select>
+                </div>
+                <div class="facet-item">
+                    <ol-select-popover
+                        label="Language"
+                        .items=${LANGUAGE_OPTIONS}
+                        .selected=${f.languages ?? []}
+                        placeholder="Filter languages…"
+                        selected-heading="Selected"
+                        suggestions-heading="Languages"
+                        clear-label="Clear selections"
+                        @ol-select-popover-change=${e => this._emitFilter('languages', e.detail.selected)}
+                    >
+                        <button slot="trigger" type="button"
+                                class="facet-btn ${(f.languages ?? []).length ? 'active' : ''}">
+                            ${(f.languages ?? []).length
+        ? `Language (${f.languages.length})`
+        : 'Language'}
+                            <svg class="facet-chevron" xmlns="http://www.w3.org/2000/svg"
+                                 viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+                                 aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
+                        </button>
+                    </ol-select-popover>
+                </div>
+                ${repeat(DROPS, d => d.name, d => html`
+                <div class="facet-item">
+                    <ol-facet-drop
+                        name=${d.name}
+                        placement=${d.placement}
+                        .filters=${facetDropProps.filters}
+                        .authorResults=${facetDropProps.authorResults}
+                        .subjectResults=${facetDropProps.subjectResults}
+                        .defaultAuthors=${facetDropProps.defaultAuthors}
+                        .defaultSubjects=${facetDropProps.defaultSubjects}
+                        .facetsLoading=${facetDropProps.facetsLoading}
+                        @ol-facet-change=${this._onDropFacetChange}
+                        @ol-facet-search-authors=${this._onDropAuthorSearch}
+                        @ol-facet-search-subjects=${this._onDropSubjectSearch}
+                        @ol-facet-shuffle-authors=${this._shuffleAuthors}
+                        @ol-facet-shuffle-subjects=${this._shuffleSubjects}
+                    ></ol-facet-drop>
+                </div>`)}
+                <div class="facet-item">
+                    <ol-facet-select
+                        accessible-label="Sort by"
+                        .options=${SORT_OPTIONS}
+                        .value=${f.sort ?? ''}
+                        @ol-facet-select-change=${e => this._emitFilter('sort', e.detail.value)}
+                    ></ol-facet-select>
+                </div>
+                <div class="facet-item facet-item--cog facet-item--last">
+                    <button class="facet-btn" type="button"
+                            aria-label="Search help" title="Search help"
+                            @click=${this._openHowto}>⚙️</button>
+                </div>
+            </div>
+            <ol-howto-modal .open=${this._howtoOpen} @close=${this._closeHowto}></ol-howto-modal>`;
+    }
+
+    _renderChipItems(chips) {
+        return chips.map(c => html`
+            <span class="chip chip-${c.type}">
+                ${c.label}
+                <button class="chip-x"
+                        @click=${e => { e.stopPropagation(); this._handleChipRemove(c); }}>×</button>
+            </span>`);
+    }
+
+    _renderResults(q) {
+        const showResults = q.length >= 2 || this._hasActiveFilters();
+        if (this._loading) return html`<div class="suggestion-loading" role="status" aria-live="polite">Searching…</div>`;
+        if (this._acError) return html`<div class="suggestion-error" role="alert">Search is unavailable — check your connection and try again.</div>`;
+        if (!showResults)  return html`<div class="suggestion-hint" aria-live="polite">Start typing to search, or pick a filter above…</div>`;
+        return html`
+            <div class="suggestion-list" id="ac-listbox" role="listbox" aria-label="Search suggestions">
+                ${this._suggestions.length === 0
+        ? html`<div class="suggestion-empty" aria-live="polite">No results</div>`
+        : this._suggestions.map((w, idx) => {
+            const ed = bestEdition(w.editions);
+            const coverId = ed?.cover_i ?? w.cover_i;
+            const edOlid  = ed?.key?.split('/').pop();
+            const wOlid   = w.key?.split('/').pop();
+            const linkKey = ed?.key ?? w.key;
+            const access  = ed?.ebook_access ?? w.ebook_access;
+            const cover = edOlid  ? `https://covers.openlibrary.org/b/olid/${edOlid}-S.jpg`
+                : coverId ? `https://covers.openlibrary.org/b/id/${coverId}-S.jpg`
+                    : wOlid   ? `https://covers.openlibrary.org/b/olid/${wOlid}-S.jpg`
+                        : null;
+            const isReadable = access === 'public' || access === 'borrowable';
+            return html`
+                            <a class="suggestion-row ${this._acFocusIdx === idx ? 'focused' : ''}"
+                               id="ac-opt-${idx}"
+                               href="${this.siteBase}${linkKey}"
+                               role="option"
+                               @click=${() => this._closePanel()}>
+                                ${cover
+        ? html`<img class="suggestion-cover" src=${cover} alt="" loading="lazy">`
+        : html`<div class="suggestion-blank">📖</div>`}
+                                <div class="suggestion-body">
+                                    <div class="suggestion-title">${ed?.title ?? w.title}</div>
+                                    <div class="suggestion-author">${(w.author_name ?? []).slice(0, 2).join(', ')}</div>
+                                    ${w.first_publish_year ? html`<div class="suggestion-year">${w.first_publish_year}</div>` : ''}
+                                </div>
+                                <div class="suggestion-meta">
+                                    <span class="suggestion-badge ${isReadable ? 'suggestion-badge--readable' : 'suggestion-badge--catalog'}">
+                                        ${isReadable ? 'Readable' : 'Catalog'}
+                                    </span>
+                                    ${w.ratings_average
+        ? html`<span class="suggestion-star">★ ${w.ratings_average.toFixed(1)}</span>`
+        : ''}
+                                </div>
+                            </a>`;})}
+            </div>
+            <div class="suggestion-footer">
+                <a class="suggestion-add-book" href="${this.siteBase}/books/add"
+                   target="_blank" rel="noopener"
+                   @click=${e => e.stopPropagation()}>+ Add Book</a>
+                <button class="suggestion-see-all" @click=${() => {
+        this._closePanel();
+        if (!q && !this._hasActiveFilters()) return;
+        const event = new CustomEvent('ol-search', {
+            detail: { q, filters: this._localFilters }, bubbles: true, composed: true, cancelable: true,
+        });
+        this.dispatchEvent(event);
+        if (this.showFacets && !event.defaultPrevented) {
+            window.location.href = this._buildSearchUrl(q, this._localFilters);
+        }
+    }}>See all ${this._total.toLocaleString()} results →</button>
+            </div>`;
+    }
+
+    _renderSearchPageMode(chips, chipItems) {
+        return html`
+            <div class="search-outer" role="search">
+                <div class="input-row">
+                    <div class="input-controls">
+                        <input class="text-input" type="text" autocomplete="off"
+                               placeholder="${this.placeholder}" .value=${this._q}
+                               @input=${this._onInput}
+                               @keydown=${this._onKeyDown}>
+                        ${this._q ? html`
+                            <button class="clear-btn" aria-label="Clear search"
+                                    @click=${e => { e.stopPropagation(); this._clearInput(); }}>✕</button>
+                        ` : ''}
+                        <button class="submit" @click=${() => this._submit()} aria-label="Search">
+                            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                            </svg>
+                        </button>
+                        <span class="scan-sep"></span>
+                        <a class="scan-btn" title="Scan ISBN barcode"
+                           href="/barcodescanner?returnTo=/isbn/$$$"
+                           target="_blank" rel="noopener"
+                           @click=${e => e.stopPropagation()}>
+                            <img src="/static/images/icons/barcode_scanner.svg"
+                                 alt="Scan barcode" width="18" height="18">
+                        </a>
+                    </div>
+                </div>
+                ${chips.length ? html`
+                    <div class="chip-bar">
+                        ${chipItems}
+                        ${this._hasActiveFilters() ? html`<button class="clear-all-btn"
+                                aria-label="Clear all filters"
+                                @click=${e => { e.stopPropagation(); this._clearAllFilters(); }}>Clear all</button>` : ''}
+                    </div>` : ''}
+            </div>`;
+    }
+
+    _renderHeaderMode(q, chips, chipItems) {
+        return html`
+            <div class="search-outer ${this._open ? 'open' : ''}" role="search">
+
+                <div class="input-row">
+                    <button class="trigger-btn"
+                            @click=${this._onTriggerClick}
+                            aria-expanded=${this._open ? 'true' : 'false'}
+                            aria-haspopup="true"
+                            aria-controls="search-panel"
+                            aria-label="${this.placeholder}">
+                        <span class="${!this._q ? 'trigger-placeholder' : ''}">${this._q || this.placeholder}</span>
+                    </button>
+                    <button class="submit" @click=${this._onTriggerClick} aria-label="Search">
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                        </svg>
+                    </button>
+                    <span class="scan-sep"></span>
+                    <a class="scan-btn" title="Scan ISBN barcode"
+                       href="/barcodescanner?returnTo=/isbn/$$$"
+                       target="_blank" rel="noopener"
+                       @click=${e => e.stopPropagation()}>
+                        <img src="/static/images/icons/barcode_scanner.svg"
+                             alt="Scan barcode" width="18" height="18">
+                    </a>
+                </div>
+
+                ${this._open ? html`
+                    <div class="panel" id="search-panel" role="dialog" aria-modal=${this._mobileExpanded ? 'true' : 'false'} aria-label="${this.placeholder}">
+                        ${this._mobileExpanded ? html`
+                            <div class="mobile-header">
+                                <button class="mobile-back-btn" aria-label="Close search"
+                                        @click=${e => { e.stopPropagation(); this._closePanel(); }}>
+                                    ← Back
+                                </button>
+                            </div>` : nothing}
+
+                        <div class="panel-input-row">
+                            <input class="text-input panel-input" type="text" autocomplete="off"
+                                   placeholder="${this.placeholder}" .value=${this._q}
+                                   role="combobox"
+                                   aria-label="${this.placeholder}"
+                                   aria-expanded="true"
+                                   aria-autocomplete="list"
+                                   aria-haspopup="listbox"
+                                   aria-controls="ac-listbox"
+                                   aria-activedescendant=${this._acFocusIdx >= 0 ? `ac-opt-${this._acFocusIdx}` : nothing}
+                                   @input=${this._onInput}
+                                   @keydown=${this._onKeyDown}>
+                            ${this._q ? html`
+                                <button class="clear-btn" aria-label="Clear search"
+                                        @click=${e => { e.stopPropagation(); this._clearInput(); }}>✕</button>
+                            ` : ''}
+                            <button class="submit" @click=${() => this._submit()} aria-label="Search">
+                                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                                </svg>
+                            </button>
+                            <span class="scan-sep"></span>
+                            <a class="scan-btn" title="Scan ISBN barcode"
+                               href="/barcodescanner?returnTo=/isbn/$$$"
+                               target="_blank" rel="noopener"
+                               @click=${e => e.stopPropagation()}>
+                                <img src="/static/images/icons/barcode_scanner.svg"
+                                     alt="Scan barcode" width="18" height="18">
+                            </a>
+                        </div>
+
+                        ${chips.length ? html`
+                            <div class="panel-chips">
+                                ${chipItems}
+                                ${this._hasActiveFilters() ? html`<button class="clear-all-btn"
+                                        aria-label="Clear all filters"
+                                        @click=${e => { e.stopPropagation(); this._clearAllFilters(); }}>Clear all</button>` : ''}
+                            </div>` : ''}
+                        ${this._renderFacetBar()}
+                        ${this._renderResults(q)}
+                    </div>` : ''}
+            </div>`;
+    }
+
+    render() {
+        const q        = this._q.trim();
+        const chips    = this.showFacets ? buildChips(this._localFilters) : (this.chips ?? []);
+        const chipItems = this._renderChipItems(chips);
+        return this.showFacets
+            ? this._renderHeaderMode(q, chips, chipItems)
+            : this._renderSearchPageMode(chips, chipItems);
+    }
+}
+
+customElements.define('ol-search-bar', OlSearchBar);
diff --git a/openlibrary/components/lit/OlSelectPopover.js b/openlibrary/components/lit/OlSelectPopover.js
index c2eeb9ae25b..7e93c274ba6 100644
--- a/openlibrary/components/lit/OlSelectPopover.js
+++ b/openlibrary/components/lit/OlSelectPopover.js
@@ -90,6 +90,13 @@ export class OlSelectPopover extends LitElement {
             font-family: var(--font-family-body);
         }
 
+        /* When the host is overridden to flex (e.g. in facet bar), let the inner
+           ol-popover stretch to fill the full container width/height. */
+        ol-popover {
+            flex: 1;
+            align-self: stretch;
+        }
+
         /* ── Default trigger ─────────────────────────────────────── */
 
         .default-trigger {
@@ -312,6 +319,7 @@ export class OlSelectPopover extends LitElement {
         }
 
         .clear-button {
+            width: 100%;
             padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
             background: transparent;
             border: 1px solid transparent;
@@ -321,6 +329,7 @@ export class OlSelectPopover extends LitElement {
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
+            text-align: center;
         }
 
         @media (hover: hover) and (pointer: fine) {
diff --git a/openlibrary/components/lit/index.js b/openlibrary/components/lit/index.js
index 90adfae20ab..bad80b3e593 100644
--- a/openlibrary/components/lit/index.js
+++ b/openlibrary/components/lit/index.js
@@ -11,6 +11,10 @@ export { OlPagination } from './OlPagination.js';
 export { OLMarkdownEditor } from './OLMarkdownEditor.js';
 export { OlPopover } from './OlPopover.js';
 export { OlSelectPopover } from './OlSelectPopover.js';
+export { OlFacetSelect } from './OlFacetSelect.js';
+export { OlFacetDrop } from './OlFacetDrop.js';
+export { OlHowtoModal } from './OlHowtoModal.js';
+export { OlSearchBar } from './OlSearchBar.js';
 export { OLChip } from './OLChip.js';
 export { OLChipGroup } from './OLChipGroup.js';
 export { OLButton } from './OLButton.js';
diff --git a/openlibrary/components/lit/search/breakpoints.js b/openlibrary/components/lit/search/breakpoints.js
new file mode 100644
index 00000000000..ca7dfd6066e
--- /dev/null
+++ b/openlibrary/components/lit/search/breakpoints.js
@@ -0,0 +1,7 @@
+// Central viewport breakpoint constants.
+// CSS media queries in component stylesheets must duplicate these as literals.
+export const BREAKPOINTS = {
+    mobile: 600,  // full-screen overlay threshold (JS + CSS @media)
+    narrow: 785,  // icon-only trigger in header   (CSS @media only)
+    wide: 900,  // panel right-align vs. centered (JS _positionPanel only)
+};
diff --git a/openlibrary/components/lit/search/facets.js b/openlibrary/components/lit/search/facets.js
new file mode 100644
index 00000000000..6bc0d08ddec
--- /dev/null
+++ b/openlibrary/components/lit/search/facets.js
@@ -0,0 +1,34 @@
+// Fetch helpers for author and subject typeahead suggestions.
+// Adapted from archivelabs/openlibrary-components for Open Library's own endpoints.
+
+import { POPULAR_SUBJECTS } from './filters.js';
+
+/**
+ * Fetch author suggestions from OL's author search API.
+ * Endpoint: /search/authors.json?q=...&limit=8
+ * Returns { docs: [{key, name, work_count}] }
+ */
+export async function fetchAuthorSuggestions(q, { signal } = {}) {
+    if (q.trim().length < 2) return [];
+    try {
+        const url = `/search/authors.json?q=${encodeURIComponent(q.trim())}&limit=8`;
+        const d = await (await fetch(url, { signal })).json();
+        return (d.docs ?? []).map(a => ({ name: a.name, work_count: a.work_count }));
+    } catch (err) {
+        if (err.name === 'AbortError') return [];
+        throw err;
+    }
+}
+
+/**
+ * Return subject suggestions by filtering the static POPULAR_SUBJECTS list.
+ * OL has no dedicated subject typeahead API; client-side filtering is fast enough.
+ */
+export async function fetchSubjectSuggestions(q) {
+    if (q.trim().length < 2) return [];
+    const lower = q.trim().toLowerCase();
+    return POPULAR_SUBJECTS
+        .filter(s => s.toLowerCase().includes(lower))
+        .slice(0, 8)
+        .map(name => ({ name }));
+}
diff --git a/openlibrary/components/lit/search/filters.js b/openlibrary/components/lit/search/filters.js
new file mode 100644
index 00000000000..b0bc229421e
--- /dev/null
+++ b/openlibrary/components/lit/search/filters.js
@@ -0,0 +1,197 @@
+// Pure filter utilities — no DOM, no fetch, fully testable.
+// Ported from archivelabs/openlibrary-components frontend/src/utils/filters.js
+
+export const SORT_OPTIONS = [
+    { value: '',                label: 'Relevance' },
+    { value: 'new',             label: 'Newest first' },
+    { value: 'old',             label: 'Oldest first' },
+    { value: 'rating desc',     label: 'Top rated' },
+    { value: 'readinglog desc', label: 'Most read' },
+    { value: 'title',           label: 'Title A–Z' },
+];
+
+export const AVAILABILITY_OPTIONS = [
+    {
+        value: '', label: 'Full Card Catalog', staticCount: '~50M', fraction: 1.00,
+        subParts: [{ text: 'Info on every book published' }],
+    },
+    {
+        value: 'readable', label: 'Readable Books Only', staticCount: '~4.6M', fraction: 0.092,
+        subParts: [
+            { text: 'Primary ' },
+            { text: 'older digitized, preserved, physical books', href: 'https://openlibrary.org/help/faq/borrow#how' },
+        ],
+    },
+    {
+        value: 'borrowable', label: 'Borrowable Only', staticCount: '~2.7M', fraction: 0.054,
+        subParts: [{ text: 'From Internet Archive\'s lending library' }],
+    },
+    {
+        value: 'open', label: 'Open Access Only', staticCount: '~1.8M', fraction: 0.036,
+        subParts: [
+            { text: 'From ' },
+            { text: 'Trusted Book Providers', href: 'https://openlibrary.org/trusted-book-providers' },
+        ],
+    },
+];
+
+export const LANGUAGE_OPTIONS = [
+    { value: 'eng', label: 'English' },
+    { value: 'spa', label: 'Spanish' },
+    { value: 'fre', label: 'French' },
+    { value: 'ger', label: 'German' },
+    { value: 'ita', label: 'Italian' },
+    { value: 'por', label: 'Portuguese' },
+    { value: 'chi', label: 'Chinese' },
+    { value: 'jpn', label: 'Japanese' },
+    { value: 'ara', label: 'Arabic' },
+    { value: 'rus', label: 'Russian' },
+    { value: 'dut', label: 'Dutch' },
+    { value: 'swe', label: 'Swedish' },
+    { value: 'nor', label: 'Norwegian' },
+    { value: 'dan', label: 'Danish' },
+    { value: 'fin', label: 'Finnish' },
+    { value: 'pol', label: 'Polish' },
+    { value: 'cze', label: 'Czech' },
+    { value: 'hun', label: 'Hungarian' },
+    { value: 'tur', label: 'Turkish' },
+    { value: 'kor', label: 'Korean' },
+    { value: 'heb', label: 'Hebrew' },
+    { value: 'hin', label: 'Hindi' },
+    { value: 'vie', label: 'Vietnamese' },
+];
+
+export const FICTION_OPTIONS = [
+    { value: 'fiction',    label: 'Fiction Only' },
+    { value: 'nonfiction', label: 'Nonfiction Only' },
+];
+
+export const GENRE_OPTIONS = [
+    { value: 'mystery',         label: 'Mystery' },
+    { value: 'science fiction', label: 'Science Fiction' },
+    { value: 'fantasy',         label: 'Fantasy' },
+    { value: 'romance',         label: 'Romance' },
+    { value: 'thriller',        label: 'Thriller' },
+    { value: 'biography',       label: 'Biography' },
+    { value: 'history',         label: 'History' },
+    { value: 'children\'s',      label: 'Children\'s' },
+    { value: 'poetry',          label: 'Poetry' },
+    { value: 'drama',           label: 'Drama' },
+    { value: 'short stories',   label: 'Short Stories' },
+    { value: 'graphic novels',  label: 'Graphic Novels' },
+    { value: 'self-help',       label: 'Self-help' },
+    { value: 'science',         label: 'Science' },
+    { value: 'travel',          label: 'Travel' },
+    { value: 'cooking',         label: 'Cooking' },
+];
+
+export const POPULAR_SUBJECTS = [
+    'Cooking', 'Computer Science', 'Productivity', 'Dragons', 'Supernatural', 'Detectives',
+    'History', 'Philosophy', 'Psychology', 'Mathematics', 'Art', 'Music', 'Travel', 'Nature',
+    'Medicine', 'Law', 'Economics', 'Politics', 'Religion', 'Poetry', 'Horror', 'Romance',
+    'Adventure', 'Education', 'Business', 'Self-Help', 'Biography', 'Memoir', 'True Crime',
+    'Space', 'Ocean', 'Cats', 'Dogs', 'Gardens', 'Architecture', 'Photography', 'Cinema',
+    'Theater', 'Dance', 'Sports', 'Chess', 'Yoga', 'Meditation', 'Artificial Intelligence',
+    'Climate', 'Astronomy', 'Biology', 'Chemistry', 'Physics', 'Engineering', 'Design',
+    'Typography', 'Comics', 'Mythology', 'Folklore', 'Linguistics', 'Anthropology',
+    'Archaeology', 'Sociology', 'Feminism', 'Ethics', 'Logic', 'Cryptography', 'Privacy',
+    'War', 'Peace', 'Revolution', 'Democracy', 'Capitalism', 'Environment', 'Sustainability',
+    'Vegetarian', 'Wine', 'Coffee', 'Magic', 'Ghosts', 'Vampires', 'Zombies', 'Pirates',
+    'Vikings', 'Ancient Rome', 'Ancient Egypt', 'Renaissance', 'Industrial Revolution',
+    'Cold War', 'World War II', 'Civil War', 'Exploration', 'Espionage', 'Puzzles',
+];
+
+export const POPULAR_AUTHORS = [
+    'Stephen King', 'J.R.R. Tolkien', 'Agatha Christie', 'Isaac Asimov',
+    'Jane Austen', 'Mark Twain', 'Ernest Hemingway', 'George Orwell',
+    'J.K. Rowling', 'Neil Gaiman', 'Terry Pratchett', 'Douglas Adams',
+    'Philip K. Dick', 'Ursula K. Le Guin', 'Ray Bradbury', 'Arthur C. Clarke',
+    'Kurt Vonnegut', 'Franz Kafka', 'Virginia Woolf', 'Toni Morrison',
+    'Gabriel García Márquez', 'Haruki Murakami', 'Leo Tolstoy', 'Fyodor Dostoevsky',
+    'Charles Dickens', 'Victor Hugo', 'Herman Melville', 'William Faulkner',
+    'F. Scott Fitzgerald', 'John Steinbeck', 'Aldous Huxley', 'James Joyce',
+    'Edgar Allan Poe', 'H.P. Lovecraft', 'Arthur Conan Doyle', 'Maya Angelou',
+    'Langston Hughes', 'W.E.B. Du Bois', 'Frederick Douglass', 'Octavia Butler',
+    'Cormac McCarthy', 'Don DeLillo', 'David Foster Wallace', 'Zadie Smith',
+    'Chimamanda Ngozi Adichie', 'Kazuo Ishiguro', 'Salman Rushdie', 'Milan Kundera',
+];
+
+export const DEFAULT_FILTERS = {
+    sort: '',
+    availability: 'readable',
+    fictionFilter: '',
+    languages: [],
+    genres: [],
+    authors: [],
+    subjects: [],
+};
+
+export const EMPTY_FILTERS = DEFAULT_FILTERS;
+
+export const getLangLabel         = v => LANGUAGE_OPTIONS.find(o => o.value === v)?.label ?? v;
+export const getAvailabilityLabel = v => AVAILABILITY_OPTIONS.find(o => o.value === v)?.label ?? v;
+export const getGenreLabel        = v => GENRE_OPTIONS.find(o => o.value === v)?.label ?? v;
+export const getSortLabel         = v => SORT_OPTIONS.find(o => o.value === v)?.label ?? v;
+export const getFictionLabel      = v => FICTION_OPTIONS.find(o => o.value === v)?.label ?? v;
+
+const ACCESS_RANK = { public: 3, borrowable: 2, printdisabled: 1, no_ebook: 0 };
+
+export function bestEdition(editions) {
+    const docs = editions?.docs;
+    if (!docs?.length) return null;
+    return docs.reduce((best, ed) =>
+        (ACCESS_RANK[ed.ebook_access] ?? -1) > (ACCESS_RANK[best.ebook_access] ?? -1) ? ed : best
+    );
+}
+
+export function toggleArrayValue(arr, value) {
+    return arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value];
+}
+
+export function shufflePick(arr, n) {
+    const copy = [...arr];
+    for (let i = copy.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy.slice(0, n);
+}
+
+export function buildChips(filters) {
+    const chips = [];
+
+    if (filters.availability) {
+        chips.push({
+            type: 'access',
+            label: getAvailabilityLabel(filters.availability),
+            value: filters.availability,
+        });
+    }
+
+    if (filters.fictionFilter) {
+        chips.push({
+            type: 'fiction',
+            label: filters.fictionFilter === 'fiction' ? 'fiction only' : 'nonfiction only',
+            value: filters.fictionFilter,
+        });
+    }
+
+    if ((filters.languages ?? []).length > 0) {
+        const labels = filters.languages.map(getLangLabel);
+        chips.push({ type: 'lang', label: `language: ${labels.join(' OR ')}`, value: null });
+    }
+
+    for (const genre of filters.genres ?? []) {
+        chips.push({ type: 'genre', label: `genre: ${getGenreLabel(genre)}`, value: genre });
+    }
+
+    for (const author of filters.authors ?? []) {
+        chips.push({ type: 'author', label: `author: ${author}`, value: author });
+    }
+
+    for (const subject of filters.subjects ?? []) {
+        chips.push({ type: 'subject', label: `subject: ${subject}`, value: subject });
+    }
+
+    return chips;
+}
diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
index c63482a64e5..c5458110039 100644
--- a/openlibrary/i18n/messages.pot
+++ b/openlibrary/i18n/messages.pot
@@ -1113,13 +1113,13 @@ msgstr ""
 msgid "PR"
 msgstr ""
 
-#: books/add.html books/edit.html books/edit/edition.html lib/nav_head.html
+#: books/add.html books/edit.html books/edit/edition.html
 #: search/advancedsearch.html status.html type/about/edit.html
 #: type/page/edit.html type/template/edit.html
 msgid "Title"
 msgstr ""
 
-#: books/add.html books/edit.html books/edit/edition.html lib/nav_head.html
+#: books/add.html books/edit.html books/edit/edition.html
 #: openlibrary/plugins/worksearch/code.py search/advancedsearch.html
 #: search/work_search_selected_facets.html status.html
 msgid "Author"
@@ -1458,7 +1458,7 @@ msgstr ""
 msgid "Role:"
 msgstr ""
 
-#: about/index.html lib/nav_head.html type/tag/index.html
+#: about/index.html type/tag/index.html
 msgid "All"
 msgstr ""
 
@@ -5660,22 +5660,6 @@ msgstr ""
 msgid "The Internet Archive's Open Library: One page for every book"
 msgstr ""
 
-#: lib/nav_head.html
-msgid "Text"
-msgstr ""
-
-#: lib/nav_head.html search/advancedsearch.html
-msgid "Subject"
-msgstr ""
-
-#: lib/nav_head.html
-msgid "Advanced"
-msgstr ""
-
-#: lib/nav_head.html
-msgid "Search by barcode"
-msgstr ""
-
 #: lib/not_logged.html
 msgid ""
 "<strong>You are not <a href=\"/account/login\" title=\"Log in "
@@ -6616,6 +6600,10 @@ msgstr ""
 msgid "ISBN"
 msgstr ""
 
+#: search/advancedsearch.html
+msgid "Subject"
+msgstr ""
+
 #: search/advancedsearch.html
 msgid "Place"
 msgstr ""
diff --git a/openlibrary/plugins/openlibrary/js/SearchBar.js b/openlibrary/plugins/openlibrary/js/SearchBar.js
index e64fdc91950..7b62a71e8d6 100644
--- a/openlibrary/plugins/openlibrary/js/SearchBar.js
+++ b/openlibrary/plugins/openlibrary/js/SearchBar.js
@@ -76,12 +76,21 @@ export class SearchBar {
     constructor($component, urlParams={}) {
         /** UI Elements */
         this.$component = $component;
-        this.$form = this.$component.find('form.search-bar-input');
-        this.$input = this.$form.find('input[type="text"]');
-        this.$results = this.$component.find('ul.search-results');
+
+        // When ol-search-bar[show-facets] is present the new component is fully
+        // self-contained (panel, facets, autocomplete, submit). Skip all legacy init.
+        if (this.$component.find('ol-search-bar[show-facets]').length) {
+            return;
+        }
+
         this.$facetSelect = this.$component.find('.search-facet-selector select');
-        this.$barcodeScanner = this.$component.find('#barcode_scanner_link');
-        this.$searchSubmit = this.$component.find('.search-bar-submit');
+        this.$facetSelect.on('change', this.handleFacetSelectChange.bind(this));
+        // Shift+Tab out of facet clears autocomplete results
+        this.$facetSelect.on('keydown', (e) => {
+            if (e.key === 'Tab' && e.shiftKey) {
+                this.clearAutocompletionResults();
+            }
+        });
 
         /** State */
         /** Whether the bar is in collapsible mode */
@@ -94,23 +103,31 @@ export class SearchBar {
             initValidation(val) { return val in FACET_TO_ENDPOINT; }
         });
 
-        this.initFromUrlParams(urlParams);
-        this.initCollapsibleMode();
         // Stop renderAutoCompletionResults from firing when ESC is pressed in results list
         this.escapeInput = false;
 
-        // Bind to changes in the search state
+        // Bind to changes in the search state (safe before DOM is ready)
         SearchUtils.mode.sync(this.handleSearchModeChange.bind(this));
         this.facet.sync(this.handleFacetValueChange.bind(this));
-        this.$facetSelect.on('change', this.handleFacetSelectChange.bind(this));
-        this.$form.on('submit', this.submitForm.bind(this));
 
-        // Shift + Tabbing out of the search facet to clear results list
-        this.$facetSelect.on('keydown', (e) => {
-            if (e.key === 'Tab' && e.shiftKey) {
-                this.clearAutocompletionResults();
-            }
-        });
+        this._initDomHandlers(urlParams);
+    }
+
+    /**
+     * Initializes all DOM-dependent state and event handlers.
+     * @param {Object} urlParams
+     */
+    _initDomHandlers(urlParams) {
+        this.$form = this.$component.find('form.search-bar-input');
+        this.$input = this.$form.find('input[type="text"]');
+        this.$results = this.$component.find('ul.search-results');
+        this.$barcodeScanner = this.$component.find('#barcode_scanner_link');
+        this.$searchSubmit = this.$component.find('.search-bar-submit');
+
+        this.initFromUrlParams(urlParams);
+        this.initCollapsibleMode();
+
+        this.$form.on('submit', this.submitForm.bind(this));
 
         this.$input.on('keydown', (e) => {
             if (e.key === 'ArrowUp') {
@@ -145,7 +162,15 @@ export class SearchBar {
                 // On tab, always go to the next selector (instead of next result), like wikipedia
                 this.clearAutocompletionResults();
                 if (e.shiftKey) {
-                    this.$facetSelect.trigger('focus');
+                    // Focus the facet selector: try new OlFacetSelect trigger or legacy select.
+                    // .trigger lives inside ol-facet-select's shadow root; jQuery can't pierce it.
+                    const olFacetSelect = this.$component.find('ol-facet-select')[0];
+                    const olFacetTrigger = olFacetSelect?.shadowRoot?.querySelector('.trigger');
+                    if (olFacetTrigger) {
+                        $(olFacetTrigger).trigger('focus');
+                    } else {
+                        this.$facetSelect.trigger('focus');
+                    }
                     return false;
                 } else {
                     this.$searchSubmit.trigger('focus');
@@ -369,7 +394,7 @@ export class SearchBar {
     }
 
     clearAutocompletionResults() {
-        this.$results.empty();
+        if (this.$results) this.$results.empty();
     }
 
     /**
@@ -377,13 +402,11 @@ export class SearchBar {
      * @param {String} newFacet
      */
     handleFacetValueChange(newFacet) {
-        // update the UI
         this.$facetSelect.val(newFacet);
         const text = this.$facetSelect.find('option:selected').text();
         $('header#header-bar .search-facet-value').html(text);
 
-        // Add immediate refresh when input has value and focus is on the facet selector
-        if (this.$input.val() && this.$facetSelect.is(':focus')) {
+        if (this.$input && this.$input.val() && this.$facetSelect.is(':focus')) {
             this.renderAutocompletionResults();
         }
     }
@@ -428,6 +451,7 @@ export class SearchBar {
     handleSearchModeChange(newMode) {
         $('.instantsearch-mode').val(newMode);
         $(`input[name=mode][value=${newMode}]`).prop('checked', true);
-        SearchUtils.addModeInputsToForm(this.$form, newMode);
+        // this.$form may not be initialised yet if _initDomHandlers is still deferred
+        if (this.$form) SearchUtils.addModeInputsToForm(this.$form, newMode);
     }
 }
diff --git a/openlibrary/templates/lib/nav_head.html b/openlibrary/templates/lib/nav_head.html
index fe56adf5ea7..595863b7e89 100644
--- a/openlibrary/templates/lib/nav_head.html
+++ b/openlibrary/templates/lib/nav_head.html
@@ -86,42 +86,13 @@
   </ul>
 
   <div class="search-component">
-    <div class="search-bar-component">
-      <div class="search-bar">
-        <div class="search-facet">
-          <label class="search-facet-selector">
-            <span aria-hidden="true" class="search-facet-value">$_("All")</span>
-            <select aria-label="Search by">
-              <option value="all">$_("All")</option>
-              <option value="title">$_("Title")</option>
-              <option value="author">$_("Author")</option>
-              <option value="text">$_("Text")</option>
-              <option value="subject">$_("Subject")</option>
-              <option value="lists">$_("Lists")</option>
-              <option value="advanced">$_("Advanced")</option>
-            </select>
-          </label>
-        </div>
-        <form class="search-bar-input" action="/search" method="get" role="search">
-          <input type="text" name="q" placeholder="$_('Search')" aria-label="Search" autocomplete="off">
-          <input name="mode" type="checkbox" aria-hidden="true" aria-label="Search checkbox" checked="checked" value="" id="ftokenstop" class="hidden instantsearch-mode">
-          <input type="submit" value="" class="search-bar-submit" aria-label="Search submit">
-          <div class="vertical-separator"></div>
-          <a
-            id="barcode_scanner_link"
-            class="search-by-barcode-submit"
-            aria-label="$_('Search by barcode')"
-            title="$_('Search by barcode')"
-            href="/barcodescanner?returnTo=/isbn/$$$$$$"
-          >
-          </a>
-        </form>
-      </div>
-      <div class="search-dropdown">
-        <ul class="search-results">
-        </ul>
-      </div>
-    </div>
+    <ol-search-bar show-facets></ol-search-bar>
+    <noscript>
+      <form class="search-bar-input" action="/search" method="get" role="search">
+        <input type="text" name="q" placeholder="$_('Search')" aria-label="$_('Search')" autocomplete="off">
+        <input type="submit" value="$_('Search')" class="search-bar-submit" aria-label="$_('Search')">
+      </form>
+    </noscript>
   </div>
 
   $if not ctx.user:
diff --git a/package-lock.json b/package-lock.json
index 1163a40e452..b1e67f6034d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@babel/preset-env": "^7.29.3",
         "@ericblade/quagga2": "^1.7.4",
         "@eslint/js": "^9.39.4",
+        "@playwright/test": "^1.60.0",
         "@tiptap/core": "^3.20.4",
         "@tiptap/extension-image": "^3.22.1",
         "@tiptap/extension-placeholder": "^3.20.4",
@@ -3757,6 +3758,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
@@ -12284,6 +12301,53 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/plur": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/plur/-/plur-4.0.0.tgz",
diff --git a/package.json b/package.json
index 8cb3d177e14..a282d8ad2e2 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "serve": "node openlibrary/components/dev/serve-component.js && cd openlibrary/components/dev && vite",
     "test": "npm run test:js && bundlesize",
     "test:js": "jest",
+    "test:e2e": "playwright test",
     "storybook": "cd stories && npm install --no-audit && npx storybook dev -p 6006",
     "build-storybook": "cd stories && npm install --no-audit && npx storybook build"
   },
@@ -33,6 +34,7 @@
     "@babel/preset-env": "^7.29.3",
     "@ericblade/quagga2": "^1.7.4",
     "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.60.0",
     "@tiptap/core": "^3.20.4",
     "@tiptap/extension-image": "^3.22.1",
     "@tiptap/extension-placeholder": "^3.20.4",
diff --git a/playwright.config.mjs b/playwright.config.mjs
new file mode 100644
index 00000000000..234dee8f389
--- /dev/null
+++ b/playwright.config.mjs
@@ -0,0 +1,28 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright config for header search UX visual/E2E tests.
+ * Requires Docker to be running on port 8080:
+ *   OL_MOUNT_DIR=$(pwd) docker compose up -d web
+ *
+ * These tests are intentionally manual-only — they require a running
+ * OL Docker instance and are not wired into `npm run test` (JS unit CI).
+ * Run with: npx playwright test
+ */
+export default defineConfig({
+    testDir: './tests/e2e',
+    timeout: 30000,
+    fullyParallel: false,
+    reporter: [['html', { outputFolder: 'tests/e2e/reports', open: 'never' }]],
+    use: {
+        baseURL: 'http://localhost:8080',
+        screenshot: 'only-on-failure',
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+    ],
+});
diff --git a/static/css/components/header-bar.css b/static/css/components/header-bar.css
index 7527b34f6c0..e38164b0ab8 100644
--- a/static/css/components/header-bar.css
+++ b/static/css/components/header-bar.css
@@ -905,3 +905,11 @@ div.search-facet:focus-within {
     padding: var(--spacing-inset-sm) 0;
   }
 }
+
+/* ── ol-search-bar integration ────────────────────────────────────────────── */
+
+/* Shadow DOM component: take up full width of the search-component container */
+ol-search-bar {
+  display: block;
+  width: 100%;
+}
diff --git a/tests/e2e/header-search.spec.mjs b/tests/e2e/header-search.spec.mjs
new file mode 100644
index 00000000000..cbe553004cd
--- /dev/null
+++ b/tests/e2e/header-search.spec.mjs
@@ -0,0 +1,132 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SCREENSHOTS = join(__dirname, 'screenshots');
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function screenshotPath(name) {
+    return join(SCREENSHOTS, `${name}.png`);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tests
+// ─────────────────────────────────────────────────────────────────────────────
+
+test.describe('Header Search — Desktop', () => {
+    test.use({ viewport: { width: 1280, height: 800 } });
+
+    test('baseline: page loads with header search visible', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('header#header-bar');
+
+        await page.screenshot({ path: screenshotPath('01-baseline-desktop'), clip: { x: 0, y: 0, width: 1280, height: 120 } });
+
+        // Search input is visible
+        const input = page.locator('header#header-bar input[name="q"]').first();
+        await expect(input).toBeVisible();
+
+        // Facet selector area is visible (either native select or ol-facet-select)
+        const facetArea = page.locator('header#header-bar .search-bar').first();
+        await expect(facetArea).toBeVisible();
+    });
+
+    test('facet selector: shows current selection', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('header#header-bar');
+
+        const searchBar = page.locator('header#header-bar .search-bar').first();
+        await expect(searchBar).toBeVisible();
+
+        await page.screenshot({ path: screenshotPath('02-facet-selector-default'), clip: { x: 0, y: 0, width: 500, height: 120 } });
+    });
+
+    test('facet selector: ol-facet-select opens popover on click', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('ol-facet-select')).toBeVisible({ timeout: 5000 });
+
+        const trigger = page.locator('ol-facet-select .trigger').first();
+        await trigger.click();
+
+        await page.screenshot({ path: screenshotPath('03-facet-popover-open'), clip: { x: 0, y: 0, width: 500, height: 400 } });
+
+        // Popover panel with options should be visible
+        const panel = page.locator('ol-popover').first();
+        await expect(panel).toBeVisible();
+    });
+
+    test('facet selector: selecting Title closes popover and updates trigger', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('ol-facet-select')).toBeVisible({ timeout: 5000 });
+
+        const trigger = page.locator('ol-facet-select .trigger').first();
+        await trigger.click();
+
+        // Click the "Title" option
+        const titleBtn = page.locator('ol-facet-select li button').filter({ hasText: 'Title' }).first();
+        await titleBtn.click();
+
+        await page.screenshot({ path: screenshotPath('04-facet-title-selected'), clip: { x: 0, y: 0, width: 500, height: 120 } });
+
+        // Trigger should now show "Title"
+        await expect(trigger).toContainText('Title');
+    });
+
+    test('search: submitting navigates to /search', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('header#header-bar input[name="q"]');
+
+        const input = page.locator('header#header-bar input[name="q"]').first();
+        await input.fill('frankenstein');
+        await input.press('Enter');
+
+        await page.waitForURL(/\/search\?.*q=frankenstein/, { timeout: 10000 });
+        expect(page.url()).toContain('/search');
+        expect(page.url()).toContain('frankenstein');
+    });
+
+    test('autocomplete: shows results after 3+ characters', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('ol-search-bar')).toBeVisible({ timeout: 5000 });
+
+        // Open the panel, then type into the panel input (shadow DOM)
+        await page.locator('ol-search-bar .trigger-btn').first().click();
+        const input = page.locator('ol-search-bar .panel-input').first();
+        await expect(input).toBeVisible();
+        await input.fill('dune');
+
+        // Results are inside shadow DOM; debounce is 300ms + network
+        const results = page.locator('ol-search-bar .suggestion-row');
+        await expect(results.first()).toBeVisible({ timeout: 8000 });
+
+        await page.screenshot({ path: screenshotPath('05-autocomplete-results'), clip: { x: 0, y: 0, width: 600, height: 400 } });
+    });
+});
+
+test.describe('Header Search — Mobile', () => {
+    test.use({ viewport: { width: 375, height: 812 } });
+
+    test('baseline: mobile layout at 375px', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('header#header-bar');
+
+        await page.screenshot({ path: screenshotPath('06-baseline-mobile'), clip: { x: 0, y: 0, width: 375, height: 120 } });
+    });
+
+    test('mobile: search expands on click', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('header#header-bar');
+
+        // Click the search area to expand it
+        const searchComponent = page.locator('header#header-bar .search-component').first();
+        await searchComponent.click();
+
+        await page.waitForTimeout(300);
+        await page.screenshot({ path: screenshotPath('07-mobile-expanded'), clip: { x: 0, y: 0, width: 375, height: 160 } });
+    });
+});