From d48f4a5d22060a3a8b1f092a8123015290af5444 Mon Sep 17 00:00:00 2001
From: vickeykumar <kumarvickey45@gmail.com>
Date: Sat, 10 Oct 2026 12:03:35 +0530
Subject: [PATCH] The IDE's dropdowns have a menu of their own

The language picker, the editor's syntax mode and the theme are drawn by the
IDE instead of the browser: dark, with a check on the current choice, a search
box on lists of more than 8 (names, file extensions and groups are searched),
an extension badge on each language, a colour on each theme and Bright and Dark
groups. The status bar's menus open upwards. Arrows, Home, End, Enter, Esc, Tab
and typing work.

The <select> stays in the page and stays the source of truth: choosing sets it
and fires input and change, the page setting select.value redraws the button,
and focus() and showPicker() (the palette, the All 19 chip) open the menu. The
tour points at the button, and so does the pulse that shows where Genie is
working when it sets the language. A touch screen keeps the browser's picker.

The search field is bare: the page's global input styling and its focus ring
are turned off inside the menu, so there is one box and not two.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 docs/lld/06-frontend.md                |   2 +
 src/js/src/page/03-run-and-files.js    |   2 +-
 src/js/test/select-menu.test.mjs       | 127 +++++++
 src/resources/chat-widget/src/agent.ts |   2 +-
 src/resources/css/ui-refresh.css       | 123 +++++++
 src/resources/index.html               | 117 +++----
 src/resources/js/select-menu.js        | 440 +++++++++++++++++++++++++
 7 files changed, 753 insertions(+), 60 deletions(-)
 create mode 100644 src/js/test/select-menu.test.mjs
 create mode 100644 src/resources/js/select-menu.js

diff --git a/docs/lld/06-frontend.md b/docs/lld/06-frontend.md
index 714f45f7..493845d8 100644
--- a/docs/lld/06-frontend.md
+++ b/docs/lld/06-frontend.md
@@ -174,6 +174,8 @@ It uses no jQuery, DataTables, select2 or Font Awesome.
 
 **Opening a question** (`js/question-loader.js`, `fetchLanguageTmplAndSetEditorcode` in `index.html`, `getCodeTemplate` in `common.js`). A question on `/practice?name=<slug>` that has no description or no starter for the chosen language is written by Genie when it is first opened. A card (`#question-loading`, over `.editor-body`) says so from the moment the page loads, not only when the fetch starts: "Getting your question ready…", then "Genie (GPT-6 Luna) is writing “Two Sum” and a starter for Python. This usually takes 5 to 20 seconds." (the model chosen in Genie's model menu), with "Still working. A busy model can take up to a minute." after 20 seconds and a Cancel button throughout (Esc cancels too). The request is dropped after **60 seconds** (`QuestionLoader.settings.timeoutMs`; the proxy's own limit to the model is 90 seconds, `openAITimeout`, and a visitor should not wait for that). Whatever goes wrong, the card turns into an error card (`role=alert`) that says why, with Try again and Close: `getCodeTemplate` and `apiFailure` throw an Error with `.kind` (`timeout`, `offline` when the request could not be made, `limit` for 429, `auth` for 401 and 403, `off` when Genie or the model is switched off (503 `GenieDisabled`, `model_unavailable`; the proxy's own words are shown), `empty` when the model answered with nothing in it (the proxy's 502 `model_empty` for an OpenRouter model, or a reply without content seen by the page; the card says which model and why as far as the reply told, for example that it used its whole answer budget thinking), `format` for an answer that cannot be used, otherwise `server` with the HTTP status), and `describeFailure` turns each into a title, a sentence and, where there is one, the status. Cancel is not an error: the card goes away. Close, and a cancel, leave the editor with the question's header (name, level, description) without the starter code; a description that is not there says so instead of "null". A newer load (another language picked meanwhile) stops the older one without showing an error. A question that is already complete (description and a starter for the language) shows no card. Before this, a failure only wrote to the console, there was no time limit, nothing showed during the 4-second wait, and the description Genie wrote was never saved, so a starter question opened as "Problem Description: null". Tests: `src/js/test/question-loader.test.mjs`.
 
+**The IDE's dropdowns** (`js/select-menu.js`, `.sm-*` and `.select-wrap.has-menu` in `css/ui-refresh.css`). The language picker (`#optionlist`), the editor's syntax mode (`#select-lang`) and the theme (`#select-theme`) carry `data-select-menu`, and `SelectMenu.init()` replaces the list the browser draws with a button and a menu of the IDE's own: dark, with a check on the current choice, a search box when a list has more than 8 options (names, extensions and group names are searched, so `.js` finds both JavaScripts and `dark` the dark themes), a file extension next to each language (`data-ext` on the `<option>`), a colour next to each theme (`data-swatch`) and the theme's Bright and Dark groups. The menu is appended to `body` (the IDE clips its children), sits at `z-index` 10035 (over the Genie panel, under the context menus and the palette), opens under its button or above it when the status bar at the bottom leaves no room, and closes on Esc, a click outside, Tab, a scroll or a resize. Keys: arrows, Home, End, PageUp, PageDown, Enter, and typing to search (or, in a list with no search box, to jump). **The `<select>` stays in the page as the source of truth**, out of sight (1px, `aria-hidden`, `tabindex=-1`): choosing sets it and fires `input` and `change` as the browser would, and the instance's own `value` and `selectedIndex` redraw the button when the page sets them (`select.value = …`, which is what the chips, the URL and the share link do; jQuery's `.val(x)` setter would not be seen, and nothing here uses it), while `focus()` and `showPicker()` open the menu, which is what the command palette and the home page's "All 19" chip call. The tour points at `#optionlist-button`. A touch screen (`(hover: none), (pointer: coarse)`) keeps the browser's own picker. Without the script, or if it throws for a select, that select stays as it was. To add it to another select: `data-select-menu` on the `<select>` inside a `.select-wrap`. Tests: `src/js/test/select-menu.test.mjs` (the list, the search, where the menu goes, the keys); the page part was checked in a browser.
+
 **New question dialog** (`#modal`, same markup on both pages). A topic text field with suggestions from `topics` (a `<datalist>`, so any topic can be typed), level, creativity (the LLM temperature) and extra instructions. `practice-store.js` moves focus into it, keeps Tab inside, closes it on Esc and returns focus, and shows "Generating…" on the button while `common.js` works.
 
 **In the editor** (`/practice?<Lang>&name=<slug>`), `index.html` adds:
diff --git a/src/js/src/page/03-run-and-files.js b/src/js/src/page/03-run-and-files.js
index 1ca12bbe..4b07139f 100644
--- a/src/js/src/page/03-run-and-files.js
+++ b/src/js/src/page/03-run-and-files.js
@@ -40,7 +40,7 @@ function StartTour() {
   var steps = [
     { title: 'Welcome to OpenREPL', intro: 'A one-minute tour of the workspace. Press Esc at any time to leave.' },
     { element: q('#lang-chips'), intro: 'Pick a language here, or use the picker in the workspace. A fresh REPL starts in its own sandbox.' },
-    { element: q('#optionlist'), intro: 'All 19 languages are in this picker.' },
+    { element: q('#optionlist-button') || q('#optionlist'), intro: 'All 19 languages are in this picker.' },
     { element: q('#terminal-div'), title: 'The REPL', intro: 'Type a line and press Enter to see the result straight away. Use + to open more terminals.' },
     { element: q('#ide'), title: 'The editor', intro: 'Write longer code here. The status bar has the editor language, theme and font size.' },
     { element: q('.run-split'), title: 'Run', intro: 'Run the editor code with Ctrl+Enter (Cmd+Enter on a Mac). The arrow opens Debug, program arguments and environment variables.' },
diff --git a/src/js/test/select-menu.test.mjs b/src/js/test/select-menu.test.mjs
new file mode 100644
index 00000000..a2434fe5
--- /dev/null
+++ b/src/js/test/select-menu.test.mjs
@@ -0,0 +1,127 @@
+// The parts of the IDE's dropdown menu (resources/js/select-menu.js) that need no
+// page: the list built from a select, the search, where the menu goes, how the
+// keys move, and type-ahead. The page part is checked in a browser.
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import vm from "node:vm";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const source = fs.readFileSync(path.join(here, "..", "..", "resources", "js", "select-menu.js"), "utf8");
+
+function load() {
+  const window = { matchMedia: () => ({ matches: true }) }; // a touch screen: init() enhances nothing
+  const ctx = { window, document: { readyState: "complete", querySelectorAll: () => [] }, console, Object, HTMLSelectElement: function () {} };
+  vm.createContext(ctx);
+  vm.runInContext(source, ctx);
+  return window.SelectMenu;
+}
+const SM = load();
+// what the script made lives in another realm (the vm): compared as plain data
+const plain = (x) => JSON.parse(JSON.stringify(x));
+
+// a select as the page has it: options, some in groups, with data-ext and data-swatch
+const opt = (value, text, attrs = {}, disabled = false) => ({
+  tagName: "OPTION", value, text, disabled,
+  getAttribute: (k) => (k in attrs ? attrs[k] : null),
+});
+const group = (label, children) => ({ tagName: "OPTGROUP", children, getAttribute: (k) => (k === "label" ? label : null) });
+const select = (children) => ({ children });
+
+const languages = select([
+  opt("c", "C", { "data-ext": ".c" }), opt("python", "Python", { "data-ext": ".py" }), opt("python2.7", "Python2.7", { "data-ext": ".py" }),
+  opt("ipython3", "IPython3", { "data-ext": ".py" }), opt("javascript", "JavaScript", { "data-ext": ".js" }), opt("node", "NodeJS", { "data-ext": ".js" }),
+]);
+
+test("the list is made of the options, in order, with their extension and colour", () => {
+  const items = plain(SM.itemsOf(languages));
+  assert.deepEqual(items.map((i) => i.label), ["C", "Python", "Python2.7", "IPython3", "JavaScript", "NodeJS"]);
+  assert.deepEqual(items.map((i) => i.index), [0, 1, 2, 3, 4, 5]);
+  assert.equal(items[1].badge, ".py");
+  assert.equal(items[1].value, "python");
+  assert.equal(items[0].swatch, "");
+  assert.equal(items[0].group, "");
+});
+
+test("options in groups keep their group, and count through the groups", () => {
+  const themes = select([
+    group("Bright", [opt("a/chrome", "Chrome", { "data-swatch": "#ffffff" }), opt("a/github", "GitHub", { "data-swatch": "#ffffff" })]),
+    group("Dark", [opt("a/monokai", "Monokai", { "data-swatch": "#272822" })]),
+  ]);
+  const items = plain(SM.itemsOf(themes));
+  assert.deepEqual(items.map((i) => [i.label, i.group, i.index, i.swatch]), [["Chrome", "Bright", 0, "#ffffff"], ["GitHub", "Bright", 1, "#ffffff"], ["Monokai", "Dark", 2, "#272822"]]);
+});
+
+test("whitespace in an option's text is not shown, and a disabled option is marked", () => {
+  const items = SM.itemsOf(select([opt("x", "  Spaced  \n"), opt("y", "Off", {}, true)]));
+  assert.equal(items[0].label, "Spaced");
+  assert.equal(items[1].disabled, true);
+});
+
+test("typing narrows the list by name, by extension and by group", () => {
+  const items = SM.itemsOf(languages);
+  const names = (q) => plain(SM.filterItems(items, q)).map((i) => i.label);
+  assert.deepEqual(names(""), ["C", "Python", "Python2.7", "IPython3", "JavaScript", "NodeJS"]);
+  assert.deepEqual(names("py"), ["Python", "Python2.7", "IPython3"], "inside a word too: IPython3");
+  assert.deepEqual(names("PY"), ["Python", "Python2.7", "IPython3"], "any case");
+  assert.deepEqual(names(".js"), ["JavaScript", "NodeJS"], "by extension");
+  assert.deepEqual(names("py 2"), ["Python2.7"], "every word has to match");
+  assert.deepEqual(names("zzz"), []);
+  const themes = SM.itemsOf(select([group("Bright", [opt("a", "Chrome")]), group("Dark", [opt("b", "Monokai"), opt("c", "Dracula")])]));
+  assert.deepEqual(plain(SM.filterItems(themes, "dark")).map((i) => i.label), ["Monokai", "Dracula"], "a group name finds its members");
+});
+
+test("the menu goes under its button, at least as wide, and inside the window", () => {
+  const view = { width: 1200, height: 800 };
+  const at = SM.placeMenu({ left: 100, right: 260, top: 60, bottom: 96 }, 240, 300, view);
+  assert.deepEqual({ ...at }, { left: 100, width: 240, up: false, top: 100, bottom: null, maxHeight: 692 });
+  // a wide button makes a wide menu
+  assert.equal(SM.placeMenu({ left: 100, right: 500, top: 60, bottom: 96 }, 240, 300, view).width, 400);
+  // against the right edge it slides left
+  const right = SM.placeMenu({ left: 1150, right: 1190, top: 60, bottom: 96 }, 240, 300, view);
+  assert.equal(right.left, 1200 - 240 - 8);
+  // against the left edge it stays inside
+  assert.equal(SM.placeMenu({ left: 0, right: 20, top: 60, bottom: 96 }, 240, 300, view).left, 8);
+});
+
+test("in the status bar at the bottom the menu opens upwards", () => {
+  const view = { width: 1200, height: 800 };
+  const at = SM.placeMenu({ left: 900, right: 1000, top: 760, bottom: 784 }, 240, 300, view);
+  assert.equal(at.up, true);
+  assert.equal(at.top, null);
+  assert.equal(at.bottom, 800 - 760 + 4, "it hangs from the top of the button, so a shorter list stays attached");
+  assert.equal(at.maxHeight, 760 - 4 - 8);
+  // with room on neither side it uses the larger, and never less than 120px
+  const cramped = SM.placeMenu({ left: 10, right: 80, top: 40, bottom: 70 }, 240, 300, { width: 1200, height: 100 });
+  assert.ok(cramped.maxHeight >= 120);
+  // a window narrower than the menu
+  assert.equal(SM.placeMenu({ left: 10, right: 80, top: 60, bottom: 90 }, 240, 100, { width: 200, height: 800 }).width, 184);
+});
+
+test("the keys move through the shown items, and skip what is off", () => {
+  const items = SM.itemsOf(select([opt("a", "A"), opt("b", "B", {}, true), opt("c", "C"), opt("d", "D")]));
+  const m = (active, key) => SM.moveActive(items, active, key);
+  assert.equal(m(-1, "ArrowDown"), 0);
+  assert.equal(m(0, "ArrowDown"), 2, "B is off");
+  assert.equal(m(3, "ArrowDown"), 3, "the end stays at the end");
+  assert.equal(m(2, "ArrowUp"), 0);
+  assert.equal(m(0, "ArrowUp"), 0);
+  assert.equal(m(-1, "ArrowUp"), 3, "up from nothing is the last");
+  assert.equal(m(2, "Home"), 0);
+  assert.equal(m(0, "End"), 3);
+  assert.equal(m(0, "x"), 0, "any other key leaves it");
+  assert.equal(SM.moveActive([], -1, "ArrowDown"), -1);
+  assert.equal(SM.moveActive(items, 0, "PageDown", 2), 2);
+});
+
+test("typing in a list with no search box jumps to a name that starts so", () => {
+  const items = SM.itemsOf(select([opt("c", "Chrome"), opt("cl", "Clouds"), opt("d", "Dawn"), opt("dr", "Dracula")]));
+  assert.equal(SM.typeAhead(items, "d", 0), 2, "from the one before, the next that starts with d");
+  assert.equal(SM.typeAhead(items, "d", 2), 3, "the same letter again goes on to the next");
+  assert.equal(SM.typeAhead(items, "dr", 2), 3, "more letters narrow it");
+  assert.equal(SM.typeAhead(items, "cl", 0), 1);
+  assert.equal(SM.typeAhead(items, "z", 0), -1);
+  assert.equal(SM.typeAhead(items, "", 0), -1);
+});
diff --git a/src/resources/chat-widget/src/agent.ts b/src/resources/chat-widget/src/agent.ts
index 14e94463..c159f6cf 100644
--- a/src/resources/chat-widget/src/agent.ts
+++ b/src/resources/chat-widget/src/agent.ts
@@ -137,7 +137,7 @@ const NEW_TERMINAL_WAIT_MS = 12000;
 const TARGETS: Record<string, string> = {
   editor: ".editor-body",
   run: ".run-split",
-  language: "#optionlist",
+  language: "#optionlist, #optionlist-button", // the picker is a button and a menu now (js/select-menu.js); the select is out of sight
   output: "#terminal-div",
   tabs: "#terminal-tabs",
   files: "#file-browser",
diff --git a/src/resources/css/ui-refresh.css b/src/resources/css/ui-refresh.css
index 0641391b..f06154e2 100644
--- a/src/resources/css/ui-refresh.css
+++ b/src/resources/css/ui-refresh.css
@@ -594,6 +594,129 @@ body.genie-dock-dragging iframe { pointer-events: none; }
   padding: 0 34px 0 12px;
 }
 
+/* The menu of our own for the IDE's dropdowns (js/select-menu.js): the <select>
+   stays in the page, out of sight, and a button and a menu take its place. */
+.select-wrap.has-menu > select {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.select-wrap.has-menu > svg:not(.sm-chevron) { display: none; }
+.sm-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0;
+  text-align: left;
+  font: 500 14px var(--font-ui);
+  color: var(--paper);
+  background: var(--ink-750);
+  border: 1px solid var(--ink-600);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.sm-btn:hover,
+.sm-btn:focus-visible,
+.sm-btn[aria-expanded="true"] { border-color: var(--muted-3); }
+.sm-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
+.sm-btn:disabled { opacity: 0.5; cursor: default; }
+.sm-value { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.select-wrap--lang .sm-btn { height: 36px; min-width: 170px; padding: 0 34px 0 12px; }
+.select-wrap--status .sm-btn {
+  height: 24px;
+  padding: 0 24px 0 8px;
+  font-size: 12px;
+  color: var(--muted-1);
+  background: transparent;
+  border-color: transparent;
+}
+.select-wrap--status .sm-btn:hover,
+.select-wrap--status .sm-btn[aria-expanded="true"] { color: var(--paper); border-color: var(--ink-600); }
+.sm-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.28); }
+
+.sm-menu {
+  position: fixed;
+  z-index: 10035; /* over the Genie panel, under the menus and the palette */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 16px);
+  padding: 6px;
+  color: #E6E4EC;
+  font: 13px var(--font-ui);
+  background: var(--ink-850, #1B1B24);
+  border: 1px solid var(--ink-500, #3A3A48);
+  border-radius: 10px;
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.7);
+}
+.sm-menu[hidden] { display: none; }
+.sm-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  margin-bottom: 6px;
+  padding: 6px 8px;
+  color: var(--muted-2, #8C8A98);
+  background: var(--ink-950, #0D0D12);
+  border: 1px solid var(--ink-600, #34343F);
+  border-radius: 7px;
+}
+.sm-search:focus-within { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }
+/* The field is bare: the box around it is the field. (The page styles every text
+   input with a border, a padding and a focus ring; those are turned off here, or
+   there are two boxes, one in the other.) */
+.sm-menu .sm-search input[type=text],
+.sm-menu .sm-search input[type=text]:focus,
+.sm-menu .sm-search input[type=text]:focus-visible {
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  line-height: 1.4;
+  color: var(--paper);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.sm-menu .sm-search input::placeholder { color: var(--muted-2, #8C8A98); opacity: 1; }
+/* the page puts a focus ring on every focused thing, with !important; the ring of
+   this field is the box around it (:focus-within), as in the command palette */
+body .sm-menu .sm-search input:focus,
+body .sm-menu .sm-search input:focus-visible { outline: none !important; box-shadow: none !important; }
+.sm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; outline: none; scrollbar-width: thin; }
+.sm-group { padding: 8px 8px 3px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2, #8C8A98); }
+.sm-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: #E6E4EC; }
+.sm-item.is-active { background: var(--ink-600, #2A2A36); }
+.sm-item.is-current { color: #fff; }
+.sm-item.is-disabled { opacity: 0.45; cursor: default; }
+.sm-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.sm-badge { flex: none; min-width: 30px; padding: 1px 6px; font: 11px var(--font-code, monospace); text-align: center; color: var(--muted-2, #8C8A98); background: var(--ink-700, #24242E); border-radius: 4px; }
+.sm-check { flex: none; color: var(--accent-color); visibility: hidden; }
+.sm-item.is-current .sm-check { visibility: visible; }
+.sm-empty { margin: 0; padding: 10px 8px; font-size: 12px; color: var(--muted-2, #8C8A98); }
+.sm-empty[hidden] { display: none; }
+.sm-hint { display: flex; justify-content: space-between; flex: none; margin-top: 6px; padding: 6px 8px 2px; font-size: 11px; color: var(--muted-3, #6f6d7c); border-top: 1px solid var(--ink-700, #24242E); }
+@media (prefers-reduced-motion: no-preference) {
+  .sm-menu.is-open { animation: sm-in 0.1s ease-out; }
+  @keyframes sm-in { from { opacity: 0; transform: translateY(-3px); } }
+  .sm-menu.is-open.is-up { animation-name: sm-in-up; }
+  @keyframes sm-in-up { from { opacity: 0; transform: translateY(3px); } }
+}
+
 /* ---------- app bar ---------- */
 .app-bar {
   display: flex;
diff --git a/src/resources/index.html b/src/resources/index.html
index 383fa386..18619333 100644
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -267,26 +267,26 @@ <h1 class="hero__title" itemprop="name"><span id="hero-heading">{{.Page.Heading}
         <button type="button" class="ide-btn ide-btn--icon" id="files-toggle" data-tip-name="Files" aria-controls="files-panel" aria-expanded="true" title="Show or hide files"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg><span class="visually-hidden">Files</span></button>
         <label class="visually-hidden" for="optionlist">Language</label>
         <div class="select-wrap select-wrap--lang">
-        <select class="list" id="optionlist">
-          <option value="c" data-editor="c_cpp">C</option>
-          <option value="cpp" data-editor="c_cpp">CPP</option>
-          <option value="go" data-editor="golang">Go</option>
-          <option value="yaegi" data-editor="golang">Go-yaegi</option>
-          <option value="java" data-editor="java">Java</option>
-          <option value="javascript" data-editor="javascript">JavaScript</option>
-          <option value="ts-node" data-editor="typescript">Typescript</option>
-          <option value="jq-repl" data-editor="json">JSON</option>
-          <option value="node" data-editor="javascript">NodeJS</option>
-        	<option value="python" data-editor="python">Python</option>
-          <option value="python2.7" data-editor="python">Python2.7</option>
-          <option value="ipython3" data-editor="python">IPython3</option>
-          <option value="irb" data-editor="ruby">Ruby</option>
-          <option value="perli" data-editor="perl">Perl</option>
-          <option value="bash" data-editor="sh">bash</option>
-          <option value="tclsh" data-editor="tcl">Tcl</option>
-          <option value="evcxr" data-editor="rust">Rust</option>
-          <option value="sqlite3" data-editor="sql">SQLite</option>
-          <option value="rappel" data-editor="assembly_x86">Assembly x86</option>
+        <select class="list" id="optionlist" data-select-menu>
+          <option value="c" data-ext=".c" data-editor="c_cpp">C</option>
+          <option value="cpp" data-ext=".cpp" data-editor="c_cpp">CPP</option>
+          <option value="go" data-ext=".go" data-editor="golang">Go</option>
+          <option value="yaegi" data-ext=".go" data-editor="golang">Go-yaegi</option>
+          <option value="java" data-ext=".java" data-editor="java">Java</option>
+          <option value="javascript" data-ext=".js" data-editor="javascript">JavaScript</option>
+          <option value="ts-node" data-ext=".ts" data-editor="typescript">Typescript</option>
+          <option value="jq-repl" data-ext=".json" data-editor="json">JSON</option>
+          <option value="node" data-ext=".js" data-editor="javascript">NodeJS</option>
+        	<option value="python" data-ext=".py" data-editor="python">Python</option>
+          <option value="python2.7" data-ext=".py" data-editor="python">Python2.7</option>
+          <option value="ipython3" data-ext=".py" data-editor="python">IPython3</option>
+          <option value="irb" data-ext=".rb" data-editor="ruby">Ruby</option>
+          <option value="perli" data-ext=".pl" data-editor="perl">Perl</option>
+          <option value="bash" data-ext=".sh" data-editor="sh">bash</option>
+          <option value="tclsh" data-ext=".tcl" data-editor="tcl">Tcl</option>
+          <option value="evcxr" data-ext=".rs" data-editor="rust">Rust</option>
+          <option value="sqlite3" data-ext=".sql" data-editor="sql">SQLite</option>
+          <option value="rappel" data-ext=".asm" data-editor="assembly_x86">Assembly x86</option>
         </select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
         </div>
         <div class="mobile-views" role="tablist" aria-label="Show">
@@ -379,7 +379,7 @@ <h1 class="hero__title" itemprop="name"><span id="hero-heading">{{.Page.Heading}
         <div class="editor-status" id="controls-buttons">
           <label class="visually-hidden" for="select-lang">Editor language</label>
           <div class="select-wrap select-wrap--status">
-          <select id="select-lang" class="status-select">
+          <select id="select-lang" class="status-select" data-select-menu>
             <option value="assembly_x86">Assembly x86</option>
             <option value="batchfile">BatchFile</option>
             <option value="c_cpp">C and C++</option>
@@ -412,46 +412,46 @@ <h1 class="hero__title" itemprop="name"><span id="hero-heading">{{.Page.Heading}
           </div>
           <label class="visually-hidden" for="select-theme">Editor theme</label>
           <div class="select-wrap select-wrap--status">
-          <select id="select-theme" class="status-select">
+          <select id="select-theme" class="status-select" data-select-menu>
             <optgroup label="Bright">
-                <option value="ace/theme/chrome">Chrome</option>
-                <option value="ace/theme/clouds">Clouds</option>
-                <option value="ace/theme/crimson_editor">Crimson Editor</option>
-                <option value="ace/theme/dawn">Dawn</option>
-                <option value="ace/theme/dreamweaver">Dreamweaver</option>
-                <option value="ace/theme/eclipse">Eclipse</option>
-                <option value="ace/theme/github">GitHub</option>
-                <option value="ace/theme/iplastic">IPlastic</option>
-                <option value="ace/theme/solarized_light">Solarized Light</option>
-                <option value="ace/theme/textmate">TextMate</option>
-                <option value="ace/theme/tomorrow">Tomorrow</option>
-                <option value="ace/theme/xcode">XCode</option>
-                <option value="ace/theme/kuroir">Kuroir</option>
-                <option value="ace/theme/katzenmilch">KatzenMilch</option>
-                <option value="ace/theme/sqlserver">SQL Server</option>
+                <option value="ace/theme/chrome" data-swatch="#ffffff">Chrome</option>
+                <option value="ace/theme/clouds" data-swatch="#ffffff">Clouds</option>
+                <option value="ace/theme/crimson_editor" data-swatch="#ffffff">Crimson Editor</option>
+                <option value="ace/theme/dawn" data-swatch="#f9f9f9">Dawn</option>
+                <option value="ace/theme/dreamweaver" data-swatch="#ffffff">Dreamweaver</option>
+                <option value="ace/theme/eclipse" data-swatch="#ffffff">Eclipse</option>
+                <option value="ace/theme/github" data-swatch="#ffffff">GitHub</option>
+                <option value="ace/theme/iplastic" data-swatch="#eeeeee">IPlastic</option>
+                <option value="ace/theme/solarized_light" data-swatch="#fdf6e3">Solarized Light</option>
+                <option value="ace/theme/textmate" data-swatch="#ffffff">TextMate</option>
+                <option value="ace/theme/tomorrow" data-swatch="#ffffff">Tomorrow</option>
+                <option value="ace/theme/xcode" data-swatch="#ffffff">XCode</option>
+                <option value="ace/theme/kuroir" data-swatch="#e8e9e8">Kuroir</option>
+                <option value="ace/theme/katzenmilch" data-swatch="#f3f2f3">KatzenMilch</option>
+                <option value="ace/theme/sqlserver" data-swatch="#ffffff">SQL Server</option>
             </optgroup>
             <optgroup label="Dark">
-                <option value="ace/theme/openrepl_dark">OpenREPL Dark</option>
-                <option value="ace/theme/ambiance">Ambiance</option>
-                <option value="ace/theme/chaos">Chaos</option>
-                <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
-                <option value="ace/theme/cobalt">Cobalt</option>
-                <option value="ace/theme/gruvbox">Gruvbox</option>
-                <option value="ace/theme/idle_fingers">idle Fingers</option>
-                <option value="ace/theme/kr_theme">krTheme</option>
-                <option value="ace/theme/merbivore">Merbivore</option>
-                <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
-                <option value="ace/theme/mono_industrial">Mono Industrial</option>
-                <option value="ace/theme/monokai">Monokai</option>
-                <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
-                <option value="ace/theme/solarized_dark">Solarized Dark</option>
-                <option value="ace/theme/terminal">Terminal</option>
-                <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
-                <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
-                <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
-                <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
-                <option value="ace/theme/twilight">Twilight</option>
-                <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
+                <option value="ace/theme/openrepl_dark" data-swatch="#0d0d12">OpenREPL Dark</option>
+                <option value="ace/theme/ambiance" data-swatch="#202020">Ambiance</option>
+                <option value="ace/theme/chaos" data-swatch="#161616">Chaos</option>
+                <option value="ace/theme/clouds_midnight" data-swatch="#191919">Clouds Midnight</option>
+                <option value="ace/theme/cobalt" data-swatch="#002240">Cobalt</option>
+                <option value="ace/theme/gruvbox" data-swatch="#282828">Gruvbox</option>
+                <option value="ace/theme/idle_fingers" data-swatch="#323232">idle Fingers</option>
+                <option value="ace/theme/kr_theme" data-swatch="#0b0a09">krTheme</option>
+                <option value="ace/theme/merbivore" data-swatch="#161616">Merbivore</option>
+                <option value="ace/theme/merbivore_soft" data-swatch="#1c1c1c">Merbivore Soft</option>
+                <option value="ace/theme/mono_industrial" data-swatch="#222c28">Mono Industrial</option>
+                <option value="ace/theme/monokai" data-swatch="#272822">Monokai</option>
+                <option value="ace/theme/pastel_on_dark" data-swatch="#2c2828">Pastel on dark</option>
+                <option value="ace/theme/solarized_dark" data-swatch="#002b36">Solarized Dark</option>
+                <option value="ace/theme/terminal" data-swatch="#000000">Terminal</option>
+                <option value="ace/theme/tomorrow_night" data-swatch="#1d1f21">Tomorrow Night</option>
+                <option value="ace/theme/tomorrow_night_blue" data-swatch="#002451">Tomorrow Night Blue</option>
+                <option value="ace/theme/tomorrow_night_bright" data-swatch="#000000">Tomorrow Night Bright</option>
+                <option value="ace/theme/tomorrow_night_eighties" data-swatch="#2d2d2d">Tomorrow Night 80s</option>
+                <option value="ace/theme/twilight" data-swatch="#141414">Twilight</option>
+                <option value="ace/theme/vibrant_ink" data-swatch="#000000">Vibrant Ink</option>
             </optgroup>
           </select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
           </div>
@@ -784,6 +784,7 @@ <h2 class="site-footer__title" id="request">Contact us</h2>
     <script src="./js/model-choice.js"></script>
     <script src="./js/common.js"></script>
     <script src="./js/question-loader.js"></script>
+    <script src="./js/select-menu.js"></script>
     <script src="./js/practice-store.js"></script>
     <script src="./js/palette.js"></script>
     <script src="./js/gotty-bundle.js"></script>
diff --git a/src/resources/js/select-menu.js b/src/resources/js/select-menu.js
new file mode 100644
index 00000000..d2634d4b
--- /dev/null
+++ b/src/resources/js/select-menu.js
@@ -0,0 +1,440 @@
+/*
+ * A menu of our own for the IDE's dropdowns (language, editor syntax mode,
+ * editor theme), in place of the list the browser draws: it follows the IDE's
+ * colours, has a search box when the list is long, shows a file extension next
+ * to a language and a colour next to a theme, and is the same on every browser.
+ *
+ * The <select> stays in the page and stays the source of truth: the editor, the
+ * tour, the home page chips and the command palette all read it, set it and
+ * listen to its "change". The menu only draws it and, when a visitor chooses,
+ * sets it and fires "input" and "change" as the browser would. For the code that
+ * sets it from outside (select.value = ..., jQuery's .val()) the instance has its
+ * own value and selectedIndex that also redraw the button, and focus() and
+ * showPicker() open the menu, which is what the palette and the home page's
+ * "All 19" chip call.
+ *
+ *   <select data-select-menu> ... </select>      enhanced when the page loads
+ *   <option data-ext=".py">, <option data-swatch="#272822">   a badge, a colour
+ *
+ * A touch screen keeps the browser's own picker, which is the better one there.
+ * Without this script, or if it fails, the page has its plain selects.
+ */
+(function () {
+  "use strict";
+
+  var SEARCH_MIN = 8; // options in a list before it gets a search box
+
+  // ---- the parts that need no page --------------------------------------------------
+
+  // The options of a select as a flat list: {value, label, badge, swatch, group, disabled, index}.
+  function itemsOf(select) {
+    var out = [];
+    function add(option, group) {
+      out.push({
+        value: option.value,
+        label: String(option.text != null ? option.text : option.textContent || "").trim(),
+        badge: option.getAttribute("data-ext") || "",
+        swatch: option.getAttribute("data-swatch") || "",
+        group: group || "",
+        disabled: !!option.disabled,
+        index: out.length
+      });
+    }
+    Array.prototype.forEach.call(select.children, function (el) {
+      var tag = String(el.tagName).toUpperCase();
+      if (tag === "OPTGROUP") {
+        Array.prototype.forEach.call(el.children, function (o) { add(o, el.getAttribute("label") || ""); });
+      } else if (tag === "OPTION") {
+        add(el, "");
+      }
+    });
+    return out;
+  }
+
+  // The items that match what was typed: every word of it is somewhere in the
+  // name, the extension or the group ("py" finds Python and IPython3, ".js" the two
+  // JavaScripts, "dark" the dark themes).
+  function filterItems(items, query) {
+    var words = String(query || "").toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length) return items.slice();
+    return items.filter(function (it) {
+      var hay = (it.label + " " + it.badge + " " + it.group).toLowerCase();
+      return words.every(function (w) { return hay.indexOf(w) >= 0; });
+    });
+  }
+
+  // Where the menu goes: under its button, as wide as the button at least, inside the
+  // window; above the button when there is no room under it (the status bar is at
+  // the bottom of the IDE). anchor is the button's {left, top, right, bottom} and
+  // view the window's {width, height}.
+  function placeMenu(anchor, menuWidth, menuHeight, view, gap, margin) {
+    gap = gap === undefined ? 4 : gap;
+    margin = margin === undefined ? 8 : margin;
+    var width = Math.min(Math.max(menuWidth, anchor.right - anchor.left), view.width - 2 * margin);
+    var left = Math.max(margin, Math.min(anchor.left, view.width - width - margin));
+    var below = view.height - anchor.bottom - gap - margin;
+    var above = anchor.top - gap - margin;
+    var up = below < menuHeight && above > below;
+    var room = Math.max(120, up ? above : below);
+    return {
+      left: Math.round(left),
+      width: Math.round(width),
+      up: up,
+      top: up ? null : Math.round(anchor.bottom + gap),
+      bottom: up ? Math.round(view.height - anchor.top + gap) : null,
+      maxHeight: Math.round(room)
+    };
+  }
+
+  // The item a key moves to, skipping any that are disabled. items is what is
+  // shown, active the position now (-1: none).
+  function moveActive(items, active, key, pageSize) {
+    var n = items.length;
+    if (!n) return -1;
+    var enabled = function (i) { return i >= 0 && i < n && !items[i].disabled; };
+    var step = function (from, dir) {
+      for (var i = from; i >= 0 && i < n; i += dir) if (enabled(i)) return i;
+      return -1;
+    };
+    var to;
+    switch (key) {
+      case "ArrowDown": to = step(active + 1, 1); break;
+      case "ArrowUp": to = step(active < 0 ? n - 1 : active - 1, -1); break;
+      case "Home": to = step(0, 1); break;
+      case "End": to = step(n - 1, -1); break;
+      case "PageDown": to = step(Math.min(n - 1, Math.max(0, active) + (pageSize || 8)), -1); break;
+      case "PageUp": to = step(Math.max(0, active - (pageSize || 8)), 1); break;
+      default: return active;
+    }
+    return to < 0 ? active : to;
+  }
+
+  // The first item whose name starts with what was typed (for a list with no search box).
+  function typeAhead(items, typed, from) {
+    typed = String(typed || "").toLowerCase();
+    if (!typed) return -1;
+    var n = items.length;
+    for (var k = 0; k < n; k++) {
+      var i = (from + (typed.length === 1 ? 1 : 0) + k + n) % n;
+      if (!items[i].disabled && items[i].label.toLowerCase().indexOf(typed) === 0) return i;
+    }
+    return -1;
+  }
+
+  // ---- the menu ---------------------------------------------------------------------
+
+  var CHEVRON = '<svg class="sm-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>';
+  var SEARCH_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg>';
+  var CHECK = '<svg class="sm-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10"></path></svg>';
+
+  var openMenu = null; // the one menu that is open
+
+  function el(tag, cls, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text !== undefined) e.textContent = text;
+    return e;
+  }
+
+  function enhance(select) {
+    if (!select || select.__selectMenu) return select && select.__selectMenu;
+    var wrap = select.parentNode;
+    if (!wrap) return null;
+    var id = select.id || "select-" + Math.random().toString(36).slice(2, 7);
+    var labelEl = select.id ? document.querySelector('label[for="' + select.id + '"]') : null;
+    var labelText = (labelEl && labelEl.textContent.trim()) || select.getAttribute("aria-label") || "Choose";
+    if (labelEl && !labelEl.id) labelEl.id = id + "-label";
+
+    var nativeValue = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value");
+    var nativeIndex = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "selectedIndex");
+
+    // the button
+    var button = el("button", "sm-btn");
+    button.type = "button";
+    button.id = id + "-button";
+    button.setAttribute("aria-haspopup", "listbox");
+    button.setAttribute("aria-expanded", "false");
+    var valueEl = el("span", "sm-value");
+    valueEl.id = id + "-value";
+    button.append(valueEl);
+    button.insertAdjacentHTML("beforeend", CHEVRON);
+    button.setAttribute("aria-labelledby", (labelEl ? labelEl.id + " " : "") + valueEl.id);
+    if (!labelEl) button.setAttribute("aria-label", labelText);
+    if (select.title) button.title = select.title;
+    select.insertAdjacentElement("afterend", button);
+    wrap.classList.add("has-menu");
+    select.setAttribute("tabindex", "-1");
+    select.setAttribute("aria-hidden", "true");
+
+    var items = itemsOf(select);
+    var shown = [];
+    var active = -1;
+    var menu = null, list = null, input = null, empty = null, typed = "", typedAt = 0;
+    var searchable = items.length > SEARCH_MIN;
+
+    function selectedItem() {
+      var i = nativeIndex.get.call(select);
+      for (var k = 0; k < items.length; k++) if (items[k].index === i) return items[k];
+      return null;
+    }
+
+    // the button shows the choice
+    function refresh() {
+      items = itemsOf(select);
+      var cur = selectedItem();
+      valueEl.textContent = "";
+      if (cur && cur.swatch) {
+        var sw = el("span", "sm-swatch");
+        sw.style.background = cur.swatch;
+        valueEl.appendChild(sw);
+      }
+      valueEl.appendChild(document.createTextNode(cur ? cur.label : ""));
+      button.disabled = !!select.disabled;
+    }
+
+    function build() {
+      menu = el("div", "sm-menu");
+      menu.setAttribute("data-for", id);
+      if (searchable) {
+        var box = el("div", "sm-search");
+        box.insertAdjacentHTML("beforeend", SEARCH_ICON);
+        input = el("input");
+        input.type = "text";
+        input.setAttribute("role", "combobox");
+        input.setAttribute("aria-label", "Search " + labelText.toLowerCase());
+        input.setAttribute("aria-autocomplete", "list");
+        input.setAttribute("aria-expanded", "true");
+        input.setAttribute("aria-controls", id + "-listbox");
+        input.setAttribute("autocomplete", "off");
+        input.setAttribute("spellcheck", "false");
+        input.placeholder = "Search " + items.length + " " + (labelText.toLowerCase() === "language" ? "languages" : "options");
+        box.appendChild(input);
+        menu.appendChild(box);
+        input.addEventListener("input", function () { draw(input.value, true); });
+      }
+      list = el("div", "sm-list");
+      list.id = id + "-listbox";
+      list.setAttribute("role", "listbox");
+      list.setAttribute("aria-label", labelText);
+      list.tabIndex = -1;
+      menu.appendChild(list);
+      empty = el("p", "sm-empty", "Nothing matches.");
+      empty.hidden = true;
+      menu.appendChild(empty);
+      var hint = el("div", "sm-hint");
+      hint.append(el("span", "", "↑↓ move · Enter choose"), el("span", "", "Esc close"));
+      menu.appendChild(hint);
+
+      // keep the focus where it is (the search box) when the mouse is used
+      menu.addEventListener("mousedown", function (e) { if (e.target !== input) e.preventDefault(); });
+      list.addEventListener("mousemove", function (e) {
+        var row = e.target.closest && e.target.closest(".sm-item");
+        if (row && !row.classList.contains("is-disabled")) setActive(+row.getAttribute("data-at"), false);
+      });
+      list.addEventListener("click", function (e) {
+        var row = e.target.closest && e.target.closest(".sm-item");
+        if (row && !row.classList.contains("is-disabled")) choose(shown[+row.getAttribute("data-at")]);
+      });
+      menu.addEventListener("keydown", onKey);
+      document.body.appendChild(menu);
+    }
+
+    // the rows for what is typed
+    function draw(query, keepNone) {
+      shown = filterItems(items, query);
+      var cur = selectedItem();
+      list.textContent = "";
+      var lastGroup = null;
+      shown.forEach(function (it, at) {
+        if (it.group && it.group !== lastGroup) {
+          list.appendChild(el("div", "sm-group", it.group));
+          lastGroup = it.group;
+        }
+        var row = el("div", "sm-item" + (it.disabled ? " is-disabled" : ""));
+        row.id = id + "-opt-" + at;
+        row.setAttribute("role", "option");
+        row.setAttribute("data-at", String(at));
+        var isCur = !!cur && cur.index === it.index;
+        row.setAttribute("aria-selected", isCur ? "true" : "false");
+        if (isCur) row.classList.add("is-current");
+        if (it.swatch) {
+          var sw = el("span", "sm-swatch");
+          sw.style.background = it.swatch;
+          row.appendChild(sw);
+        }
+        row.appendChild(el("span", "sm-label", it.label));
+        if (it.badge) row.appendChild(el("span", "sm-badge", it.badge));
+        row.insertAdjacentHTML("beforeend", CHECK);
+        list.appendChild(row);
+      });
+      empty.hidden = shown.length > 0;
+      // the item to start on: the one typed for, else the current one, else the first
+      var start = -1;
+      if (query) start = moveActive(shown, -1, "ArrowDown");
+      else if (cur) start = shown.findIndex(function (it) { return it.index === cur.index; });
+      if (start < 0 && !keepNone) start = moveActive(shown, -1, "ArrowDown");
+      setActive(start, true);
+    }
+
+    function setActive(at, scroll) {
+      active = at;
+      var rows = list.querySelectorAll(".sm-item");
+      for (var i = 0; i < rows.length; i++) rows[i].classList.toggle("is-active", i === at);
+      var row = rows[at];
+      var target = input || list;
+      if (row) {
+        target.setAttribute("aria-activedescendant", row.id);
+        if (scroll) {
+          // keep the group heading in view above the first item of a group
+          var prev = row.previousElementSibling;
+          (at === 0 && prev ? prev : row).scrollIntoView({ block: "nearest" });
+        }
+      } else {
+        target.removeAttribute("aria-activedescendant");
+      }
+    }
+
+    function choose(item) {
+      if (!item || item.disabled) return;
+      var changed = nativeValue.get.call(select) !== item.value;
+      close(true);
+      if (changed) {
+        nativeValue.set.call(select, item.value);
+        refresh();
+        select.dispatchEvent(new Event("input", { bubbles: true }));
+        select.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    }
+
+    function onKey(e) {
+      var k = e.key;
+      if (k === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        close(true);
+      } else if (k === "Tab") {
+        close(true); // the focus is back on the button; Tab goes on from there
+      } else if (k === "Enter") {
+        e.preventDefault();
+        if (active >= 0) choose(shown[active]);
+      } else if (k === "ArrowDown" || k === "ArrowUp" || k === "Home" || k === "End" || k === "PageDown" || k === "PageUp") {
+        if ((k === "Home" || k === "End") && input) return; // the caret of the search box
+        e.preventDefault();
+        setActive(moveActive(shown, active, k), true);
+      } else if (!input && k.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        // a list with no search box: type to jump
+        var now = Date.now();
+        typed = now - typedAt > 700 ? k : typed + k;
+        typedAt = now;
+        var hit = typeAhead(shown, typed, active);
+        if (hit >= 0) setActive(hit, true);
+        e.preventDefault();
+      }
+    }
+
+    function outside(e) {
+      if (menu && !menu.contains(e.target) && !button.contains(e.target)) close(false);
+    }
+    function onScroll(e) {
+      if (menu && !menu.contains(e.target)) close(false);
+    }
+    function onResize() { close(false); }
+
+    function open() {
+      if (button.disabled) return;
+      if (openMenu && openMenu !== api) openMenu.close(false);
+      if (api.isOpen()) return;
+      items = itemsOf(select);
+      searchable = items.length > SEARCH_MIN;
+      if (!menu) build();
+      if (input) input.value = "";
+      draw("", false);
+      menu.hidden = false;
+      menu.classList.add("is-open");
+      button.setAttribute("aria-expanded", "true");
+      // measured at its largest, so that the list under it can grow and shrink while it is searched
+      menu.style.maxHeight = "";
+      menu.style.visibility = "hidden";
+      var at = placeMenu(button.getBoundingClientRect(), 240, Math.min(menu.scrollHeight, 340), { width: window.innerWidth, height: window.innerHeight });
+      menu.style.left = at.left + "px";
+      menu.style.minWidth = at.width + "px";
+      menu.style.top = at.top === null ? "auto" : at.top + "px";
+      menu.style.bottom = at.bottom === null ? "auto" : at.bottom + "px";
+      menu.style.maxHeight = at.maxHeight + "px";
+      menu.classList.toggle("is-up", at.up);
+      menu.style.visibility = "";
+      setActive(active, true);
+      (input || list).focus({ preventScroll: true });
+      openMenu = api;
+      document.addEventListener("mousedown", outside, true);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("resize", onResize);
+    }
+
+    function close(returnFocus) {
+      if (!api.isOpen()) return;
+      menu.hidden = true;
+      menu.classList.remove("is-open");
+      button.setAttribute("aria-expanded", "false");
+      document.removeEventListener("mousedown", outside, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      if (openMenu === api) openMenu = null;
+      if (returnFocus) button.focus({ preventScroll: true });
+    }
+
+    button.addEventListener("click", function () { api.isOpen() ? close(true) : open(); });
+    button.addEventListener("keydown", function (e) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        open();
+      }
+    });
+
+    // what the page does to the select from outside shows on the button, and its
+    // focus() and showPicker() are the menu's
+    Object.defineProperty(select, "value", {
+      configurable: true,
+      get: function () { return nativeValue.get.call(this); },
+      set: function (v) { nativeValue.set.call(this, v); refresh(); }
+    });
+    Object.defineProperty(select, "selectedIndex", {
+      configurable: true,
+      get: function () { return nativeIndex.get.call(this); },
+      set: function (v) { nativeIndex.set.call(this, v); refresh(); }
+    });
+    select.focus = function (o) { button.focus(o); };
+    select.showPicker = function () { open(); };
+    select.addEventListener("change", refresh);
+
+    var api = {
+      select: select,
+      button: button,
+      open: open,
+      close: close,
+      refresh: refresh,
+      isOpen: function () { return !!menu && !menu.hidden; }
+    };
+    select.__selectMenu = api;
+    refresh();
+    return api;
+  }
+
+  function init() {
+    // a touch screen keeps the browser's own picker
+    if (window.matchMedia && window.matchMedia("(hover: none), (pointer: coarse)").matches) return;
+    var selects = document.querySelectorAll("select[data-select-menu]");
+    for (var i = 0; i < selects.length; i++) {
+      try {
+        enhance(selects[i]);
+      } catch (e) {
+        console.error("select menu:", e); // that select stays as the browser draws it
+      }
+    }
+  }
+
+  window.SelectMenu = { enhance: enhance, init: init, itemsOf: itemsOf, filterItems: filterItems, placeMenu: placeMenu, moveActive: moveActive, typeAhead: typeAhead };
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+  else init();
+})();