getobsrv 0.14.1 → 0.16.0

package/out/main/index.js

@@ -146,6 +146,35 @@ function parseScrollReport(raw) {
   const warnings = Array.isArray(raw.warnings) ? raw.warnings.filter((w) => typeof w === "string").slice(0, MAX_SCROLL_WARNINGS) : [];
   return { id, x, y, scroller, warnings };
 }
+const MAX_MENU_OPTIONS = 200;
+const MAX_MENU_LABEL = 120;
+function parseMenuRequest(raw) {
+  if (!isRecord$3(raw)) return null;
+  const { groups, value, ariaLabel, anchor } = raw;
+  if (typeof value !== "string" || value.length > MAX_MENU_LABEL) return null;
+  if (typeof ariaLabel !== "string" || ariaLabel.length > MAX_MENU_LABEL) return null;
+  const rect = parseRect(anchor);
+  if (!rect) return null;
+  if (!Array.isArray(groups)) return null;
+  const out = [];
+  let rows = 0;
+  for (const g of groups) {
+    if (!isRecord$3(g)) return null;
+    if (g.label !== void 0 && (typeof g.label !== "string" || g.label.length > MAX_MENU_LABEL)) return null;
+    if (!Array.isArray(g.options)) return null;
+    const options = [];
+    for (const o of g.options) {
+      if (!isRecord$3(o)) return null;
+      if (typeof o.value !== "string" || o.value.length > MAX_MENU_LABEL) return null;
+      if (typeof o.label !== "string" || o.label.length > MAX_MENU_LABEL) return null;
+      if (++rows > MAX_MENU_OPTIONS) return null;
+      options.push({ value: o.value, label: o.label });
+    }
+    out.push(g.label === void 0 ? { options } : { label: g.label, options });
+  }
+  if (rows === 0) return null;
+  return { groups: out, value, ariaLabel, anchor: rect };
+}
 const CONTROL_FILE_NAME = "control.json";
 const CONTROL_TOKEN_BYTES = 32;
 const CONTROL_COMMANDS = [
@@ -308,6 +337,12 @@ const IPC = {
   setViewport: "obsrv:set-viewport",
   setNativeBounds: "obsrv:set-native-bounds",
   setNativeVisible: "obsrv:set-native-visible",
+  /** Chrome -> main: open a menu in the overlay view. */
+  menuOpen: "obsrv:menu-open",
+  /** Main -> overlay: draw this menu. */
+  menuShow: "obsrv:menu-show",
+  /** Overlay -> main: a row was chosen, or the menu was dismissed. */
+  menuPick: "obsrv:menu-pick",
   setMode: "obsrv:set-mode",
   sendInput: "obsrv:send-input",
   getHostInfo: "obsrv:get-host-info",
@@ -754,7 +789,7 @@ function hostInfo(win) {
   }
 }
 function registerIpc(ctx) {
-  const { win, bus, tabs } = ctx;
+  const { win, bus, tabs, overlay } = ctx;
   const tab = () => tabs.active();
   const settingsFile = node_path.join(electron.app.getPath("userData"), "settings.json");
   let settings = loadSettings(settingsFile);
@@ -838,6 +873,28 @@ function registerIpc(ctx) {
     applyNativeVisibility();
     bus.setEnabled(tab().modeIsLive);
   });
+  let pendingMenu = null;
+  const settleMenu = (value) => {
+    const resolve = pendingMenu;
+    pendingMenu = null;
+    overlay.hide();
+    resolve?.(value);
+  };
+  handle(IPC.menuOpen, (e, raw) => {
+    if (!fromRenderer(e)) return null;
+    const request = parseMenuRequest(raw);
+    if (!request) return null;
+    settleMenu(null);
+    overlay.show(request);
+    return new Promise((resolve) => {
+      pendingMenu = resolve;
+    });
+  });
+  on(IPC.menuPick, (e, raw) => {
+    if (e.sender !== overlay.webContents) return;
+    if (raw !== null && typeof raw !== "string") return;
+    settleMenu(raw);
+  });
   on(IPC.setNativeVisible, (e, raw) => {
     if (!fromRenderer(e)) return;
     if (typeof raw !== "boolean") return;
@@ -1433,6 +1490,76 @@ function installMenu({ win, tabs }) {
   ];
   electron.Menu.setApplicationMenu(electron.Menu.buildFromTemplate(template));
 }
+class Overlay {
+  constructor(win) {
+    this.win = win;
+    this.view = new electron.WebContentsView({
+      webPreferences: {
+        preload: node_path.join(__dirname, "../preload/app.js"),
+        contextIsolation: true,
+        sandbox: true,
+        // Transparency has to be asked for at construction; setting the
+        // background colour afterwards is not enough to keep the page's own
+        // white from painting over the panes.
+        transparent: true
+      }
+    });
+    this.view.setBackgroundColor("#00000000");
+    this.win.contentView.addChildView(this.view);
+    this.view.setVisible(false);
+    this.layout();
+    if (!electron.app.isPackaged && process.env.ELECTRON_RENDERER_URL)
+      void this.view.webContents.loadURL(`${process.env.ELECTRON_RENDERER_URL}?overlay=1`);
+    else
+      void this.view.webContents.loadFile(node_path.join(__dirname, "../renderer/index.html"), {
+        query: { overlay: "1" }
+      });
+    this.win.on("resize", () => this.layout());
+  }
+  view;
+  open = false;
+  destroyed = false;
+  get webContents() {
+    return this.view.webContents;
+  }
+  /** Covers the whole content area: the menu positions itself within it, and
+   *  the rest of the surface is what catches a click meant to dismiss. */
+  layout() {
+    const [width = 0, height = 0] = this.win.getContentSize();
+    this.view.setBounds({ x: 0, y: 0, width, height });
+  }
+  show(request) {
+    this.win.contentView.addChildView(this.view);
+    this.layout();
+    this.view.setVisible(true);
+    this.open = true;
+    this.view.webContents.focus();
+    this.view.webContents.send(IPC.menuShow, request);
+  }
+  hide() {
+    if (!this.open) return;
+    this.open = false;
+    this.view.setVisible(false);
+    this.win.webContents.focus();
+  }
+  get isOpen() {
+    return this.open;
+  }
+  /**
+   * Idempotent, because the window's `close` handler is not guaranteed to run
+   * once: quit.spec.ts emits `close` by hand to drive the teardown while the
+   * window is still alive, and the real close then runs it again. A throw on
+   * the second pass would take the rest of that handler with it — including the
+   * destroy of the offscreen windows, without which `window-all-closed` never
+   * fires and the app hangs instead of quitting.
+   */
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.win.contentView.removeChildView(this.view);
+    if (!this.view.webContents.isDestroyed()) this.view.webContents.close();
+  }
+}
 function closeTab(tabs, closeId, activeId) {
   const index = tabs.findIndex((t) => t.id === closeId);
   if (index === -1) return { tabs, activeId };
@@ -1990,12 +2117,14 @@ function createMainWindow() {
 function boot() {
   const win = createMainWindow();
   const tabs = new TabManager(win);
-  const ctx = { win, tabs, bus: tabs.bus, toolbarH: TOOLBAR_H };
+  const overlay = new Overlay(win);
+  const ctx = { win, tabs, bus: tabs.bus, toolbarH: TOOLBAR_H, overlay };
   const stopIpc = registerIpc(ctx);
   installMenu(ctx);
   win.on("close", () => {
     stopIpc();
     tabs.destroy();
+    overlay.destroy();
   });
   exposeForTests(ctx);
 }

package/out/preload/app.js

@@ -8,6 +8,12 @@ const IPC = {
   setViewport: "obsrv:set-viewport",
   setNativeBounds: "obsrv:set-native-bounds",
   setNativeVisible: "obsrv:set-native-visible",
+  /** Chrome -> main: open a menu in the overlay view. */
+  menuOpen: "obsrv:menu-open",
+  /** Main -> overlay: draw this menu. */
+  menuShow: "obsrv:menu-show",
+  /** Overlay -> main: a row was chosen, or the menu was dismissed. */
+  menuPick: "obsrv:menu-pick",
   setMode: "obsrv:set-mode",
   sendInput: "obsrv:send-input",
   getHostInfo: "obsrv:get-host-info",
@@ -69,6 +75,13 @@ const api = {
   setViewport: (width, height, deviceScaleFactor) => electron.ipcRenderer.invoke(IPC.setViewport, width, height, deviceScaleFactor),
   setNativeBounds: (rect) => electron.ipcRenderer.send(IPC.setNativeBounds, rect),
   setNativeVisible: (visible) => electron.ipcRenderer.send(IPC.setNativeVisible, visible),
+  openMenu: (request) => electron.ipcRenderer.invoke(IPC.menuOpen, request),
+  onMenuShow: (fn) => {
+    const h = (_e, request) => fn(request);
+    electron.ipcRenderer.on(IPC.menuShow, h);
+    return () => electron.ipcRenderer.off(IPC.menuShow, h);
+  },
+  pickMenu: (value) => electron.ipcRenderer.send(IPC.menuPick, value),
   setMode: (mode) => electron.ipcRenderer.send(IPC.setMode, mode),
   sendInput: (ev) => electron.ipcRenderer.send(IPC.sendInput, ev),
   getHostInfo: () => electron.ipcRenderer.invoke(IPC.getHostInfo),

package/out/renderer/assets/{index-WM0cwf7d.js → index-BJmd2r3W.js}

@@ -13554,6 +13554,11 @@ function NumberField({ className, label, unit, value, min, step, onCommit, onInv
     )
   ] });
 }
+const SURROUNDS = [
+  { id: "black", label: "Black surround", swatch: "#000000" },
+  { id: "graphite", label: "Graphite surround", swatch: "#2a2a2a" },
+  { id: "grey50", label: "Neutral 50% surround", swatch: "#808080" }
+];
 function SettingsPanel() {
   const host = useStore(useShallow((s) => s.host));
   const settings = useStore(useShallow((s) => s.settings));
@@ -13566,6 +13571,8 @@ function SettingsPanel() {
   const fallback = useStore(selectScaleIsFallback);
   const setSettings = useStore((s) => s.setSettings);
   const setCustom = useStore((s) => s.setCustom);
+  const surround = useStore((s) => s.surround);
+  const setSurround = useStore((s) => s.setSurround);
   const [hostError, setHostError] = reactExports.useState(null);
   const [customError, setCustomError] = reactExports.useState(null);
   const queue = reactExports.useRef(Promise.resolve());
@@ -13688,6 +13695,20 @@ function SettingsPanel() {
       "."
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "readout", children: custom.diagonalInches > 0 ? `${ppi(custom.width, custom.height, custom.diagonalInches).toFixed(0)} PPI` : "Enter a diagonal to compute PPI" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Pane surround" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "hint", children: "What the panes are filled with around a render. It changes nothing in the render itself, but the same pixels read lighter or darker against a different ground — which is why it is a choice and not a constant. Black for judging a dark UI, 50% grey for a neutral reference." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "surround-control", role: "group", "aria-label": "Pane surround", children: SURROUNDS.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        title: s.label,
+        "aria-label": s.label,
+        "aria-pressed": surround === s.id,
+        onClick: () => setSurround(s.id),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "surround-swatch", style: { background: s.swatch } })
+      },
+      s.id
+    )) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Updates" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "version-block", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "version-row", children: [
@@ -14829,22 +14850,30 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$a);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$b);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$a = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$9);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$a);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$9);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
@@ -14962,6 +14991,8 @@ const ICONS = {
   sliders: SlidersHorizontal,
   gear: Settings,
   chevron: ChevronDown,
+  // The listbox's tick. Marks the chosen row the way the native menu did.
+  check: Check,
   plus: Plus,
   // The rotate control's two shapes. A plain outline of the screen you get is
   // the whole affordance — no arrow, no device silhouette: the target may be a
@@ -15109,27 +15140,54 @@ Agent control is driving this tab` : label,
     )
   ] });
 }
-function Select({ className, value, label, ariaLabel, onChange, children }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "select-shell", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-label", "aria-hidden": "true", children: label }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-chevron", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "chevron", size: 14 }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "select",
-      {
-        className,
-        value,
-        "aria-label": ariaLabel,
-        onChange: (e) => onChange(e.target.value),
-        children
-      }
-    )
-  ] });
+function Select({ className, value, label, ariaLabel, groups, onChange }) {
+  const triggerRef = reactExports.useRef(null);
+  const [open, setOpen] = reactExports.useState(false);
+  const openMenu = async () => {
+    const el = triggerRef.current;
+    if (!el || open) return;
+    const r = el.getBoundingClientRect();
+    setOpen(true);
+    const picked = await window.obsrv.openMenu({
+      groups,
+      value,
+      ariaLabel,
+      // Window coordinates: the overlay spans the content area, so the menu
+      // needs no conversion to place itself under this control.
+      anchor: { x: r.left, y: r.top, width: r.width, height: r.height }
+    });
+    setOpen(false);
+    el.focus();
+    if (picked !== null) onChange(picked);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "select-shell", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      type: "button",
+      ref: triggerRef,
+      className: `select-trigger ${className}`,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-label": ariaLabel,
+      "data-value": value,
+      onClick: () => void openMenu(),
+      onKeyDown: (e) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          void openMenu();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "select-label", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-label-text", children: label }),
+          groups.flatMap((g) => g.options).map((o) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-label-sizer", "aria-hidden": "true", children: o.label }, o.value))
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-chevron", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "chevron", size: 14 }) })
+      ]
+    }
+  ) });
 }
-const SURROUNDS = [
-  { id: "black", label: "Black surround", swatch: "#000000" },
-  { id: "graphite", label: "Graphite surround", swatch: "#2a2a2a" },
-  { id: "grey50", label: "Neutral 50% surround", swatch: "#808080" }
-];
 const VIEWS = [
   { id: "1:1", label: "1:1", title: "Actual size" },
   { id: "fit", label: "Fit", title: "Fit the pane — not pixel-exact" }
@@ -15138,6 +15196,17 @@ const PANES = [
   { id: "both", label: "Both", title: "Native and target side by side" },
   { id: "target", label: "Target", title: "The target render alone, full width" }
 ];
+const inGroup = (group) => SCREEN_PRESETS.filter((p) => p.group === group).map((p) => ({ value: p.id, label: p.label }));
+const PRESET_GROUPS = [
+  { label: "Laptops", options: inGroup("laptop") },
+  { label: "Desktops", options: inGroup("desktop") },
+  { label: "Mobile", options: inGroup("mobile") },
+  // Ungrouped, as it was: "Custom" is not one more screen among the presets.
+  { options: [{ value: CUSTOM_PRESET_ID, label: "Custom" }] }
+];
+const PROFILE_GROUPS = [
+  { options: PANEL_PROFILES.map((p) => ({ value: p.id, label: p.label })) }
+];
 function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const mode = useStore((s) => selectTab(s).mode);
   const presetId = useStore((s) => selectTab(s).presetId);
@@ -15156,9 +15225,7 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const setProfile = useStore((s) => s.setProfile);
   const setPixelExact = useStore((s) => s.setPixelExact);
   const setError = useStore((s) => s.setError);
-  const surround = useStore((s) => s.surround);
   const update = useStore((s) => s.update);
-  const setSurround = useStore((s) => s.setSurround);
   const viewMode = useStore((s) => selectTab(s).viewMode);
   const setViewMode = useStore((s) => s.setViewMode);
   const panes = useStore((s) => s.panes);
@@ -15409,20 +15476,15 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome-row chrome-screen", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
         Select,
         {
           className: "preset-select",
           value: presetId,
           label: presetLabel,
           ariaLabel: "Target screen",
-          onChange: setPreset,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Laptops", children: SCREEN_PRESETS.filter((p) => p.group === "laptop").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Desktops", children: SCREEN_PRESETS.filter((p) => p.group === "desktop").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Mobile", children: SCREEN_PRESETS.filter((p) => p.group === "mobile").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: CUSTOM_PRESET_ID, children: "Custom" })
-          ]
+          groups: PRESET_GROUPS,
+          onChange: setPreset
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "orientation-control", role: "group", "aria-label": "Screen orientation", children: ORIENTATIONS.map((value, i) => {
@@ -15469,22 +15531,10 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
           value: profileId,
           label: profileLabel,
           ariaLabel: "Panel profile",
-          onChange: setProfile,
-          children: PANEL_PROFILES.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id))
+          groups: PROFILE_GROUPS,
+          onChange: setProfile
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "surround-control", role: "group", "aria-label": "Pane surround", children: SURROUNDS.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          title: s.label,
-          "aria-label": s.label,
-          "aria-pressed": surround === s.id,
-          onClick: () => setSurround(s.id),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "surround-swatch", style: { background: s.swatch } })
-        },
-        s.id
-      )) }),
       agentControl && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `agent-activity${agentActive ? " active" : ""}`, children: "AGENT" })
     ] })
   ] });
@@ -15733,6 +15783,134 @@ function App() {
     )
   );
 }
+const MARGIN = 8;
+const TYPEAHEAD_MS = 700;
+function MenuLayer() {
+  const [request, setRequest] = reactExports.useState(null);
+  const [active, setActive] = reactExports.useState(0);
+  const [pos, setPos] = reactExports.useState(null);
+  const listRef = reactExports.useRef(null);
+  const typed = reactExports.useRef({ text: "", at: 0 });
+  const flat = request?.groups.flatMap((g) => g.options) ?? [];
+  reactExports.useEffect(() => window.obsrv.onMenuShow(setRequest), []);
+  reactExports.useEffect(() => {
+    if (!request) return;
+    setActive(Math.max(0, flat.findIndex((o) => o.value === request.value)));
+  }, [request]);
+  const finish = (value) => {
+    window.obsrv.pickMenu(value);
+    setRequest(null);
+    setPos(null);
+  };
+  reactExports.useLayoutEffect(() => {
+    if (!request) return;
+    const list = listRef.current;
+    if (!list) return;
+    const a = request.anchor;
+    const below = window.innerHeight - (a.y + a.height) - MARGIN;
+    const above = a.y - MARGIN;
+    const wanted = list.scrollHeight;
+    const dropDown = below >= wanted || below >= above;
+    const maxHeight = Math.max(80, dropDown ? below : above);
+    const height = Math.min(wanted, maxHeight);
+    const top = dropDown ? a.y + a.height : a.y - height;
+    const left = Math.max(MARGIN, Math.min(a.x, window.innerWidth - list.offsetWidth - MARGIN));
+    setPos({ left, top, maxHeight });
+  }, [request]);
+  reactExports.useEffect(() => {
+    if (!request) return;
+    const move = (to) => {
+      const next = Math.max(0, Math.min(flat.length - 1, to));
+      setActive(next);
+      listRef.current?.querySelector(`[data-index="${next}"]`)?.scrollIntoView({ block: "nearest" });
+    };
+    const onKey = (e) => {
+      switch (e.key) {
+        case "Escape":
+          e.preventDefault();
+          return finish(null);
+        case "ArrowDown":
+          e.preventDefault();
+          return move(active + 1);
+        case "ArrowUp":
+          e.preventDefault();
+          return move(active - 1);
+        case "Home":
+          e.preventDefault();
+          return move(0);
+        case "End":
+          e.preventDefault();
+          return move(flat.length - 1);
+        case "Tab":
+          e.preventDefault();
+          return finish(null);
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          return finish(flat[active]?.value ?? null);
+      }
+      if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const now = Date.now();
+        typed.current.text = now - typed.current.at > TYPEAHEAD_MS ? e.key : typed.current.text + e.key;
+        typed.current.at = now;
+        const q = typed.current.text.toLowerCase();
+        const hit = flat.findIndex((o) => o.label.toLowerCase().startsWith(q));
+        if (hit >= 0) move(hit);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [request, active, flat.length]);
+  reactExports.useEffect(() => {
+    if (!request || !pos) return;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [pos]);
+  if (!request) return null;
+  let index = -1;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "menu-backdrop", onMouseDown: () => finish(null), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: listRef,
+      className: "select-menu",
+      role: "listbox",
+      "aria-label": request.ariaLabel,
+      style: pos ? { left: pos.left, top: pos.top, maxHeight: pos.maxHeight } : (
+        // Hidden until measured: the first pass needs the real height, and
+        // a menu that flashes in the wrong place is worse than one that
+        // appears a frame later.
+        { visibility: "hidden", top: 0, left: 0 }
+      ),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: request.groups.map((g, gi) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "select-group", role: "group", "aria-label": g.label, children: [
+        g.label && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "select-group-label", "aria-hidden": "true", children: g.label }),
+        g.options.map((o) => {
+          index += 1;
+          const i = index;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              role: "option",
+              "data-index": i,
+              "data-value": o.value,
+              className: `select-option${i === active ? " active" : ""}`,
+              "aria-selected": o.value === request.value,
+              onMouseDown: (e) => {
+                e.stopPropagation();
+                finish(o.value);
+              },
+              onMouseEnter: () => setActive(i),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-tick", "aria-hidden": "true", children: o.value === request.value ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "check", size: 12 }) : null }),
+                o.label
+              ]
+            },
+            o.value
+          );
+        })
+      ] }, g.label ?? gi))
+    }
+  ) });
+}
 function BrowserNotice() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "browser-notice", role: "note", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "This is only Obsrv's renderer shell." }),
@@ -15751,4 +15929,8 @@ function BrowserNotice() {
     ] })
   ] });
 }
-clientExports.createRoot(document.getElementById("root")).render("obsrv" in window ? /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(BrowserNotice, {}));
+const overlay = new URLSearchParams(location.search).has("overlay");
+if (overlay) document.documentElement.dataset.overlay = "";
+clientExports.createRoot(document.getElementById("root")).render(
+  !("obsrv" in window) ? /* @__PURE__ */ jsxRuntimeExports.jsx(BrowserNotice, {}) : overlay ? /* @__PURE__ */ jsxRuntimeExports.jsx(MenuLayer, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(App, {})
+);

package/out/renderer/assets/{index-BpvyvKfD.css → index-DUmCxwNL.css}

@@ -421,7 +421,10 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 /* Our surface, the platform's popup: the real select sits transparent on
    top, keeping the native menu, keyboard handling and Playwright's
    `selectOption` working unchanged. */
-.select-shell {
+.select-shell { position: relative; flex: 0 0 auto; display: inline-flex; }
+/* The trigger carries the surface the shell used to: it is a real button now,
+   not a transparent native select sitting on top of a painted div. */
+.select-trigger {
   position: relative;
   flex: 0 0 auto;
   display: inline-flex;
@@ -429,22 +432,23 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   height: 30px;
   box-sizing: border-box;
   padding: 0 26px 0 9px;
+  font: inherit;
   font-size: 11.5px;
   white-space: nowrap;
   background: var(--chrome-2);
   color: var(--text-0);
   border: 1px solid var(--line);
   border-radius: 5px;
-}
-.select-shell select {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  appearance: none;
   cursor: pointer;
 }
+.select-trigger:hover { background: var(--chrome-3); }
+/* The stack that fixes the width: one cell, every label in it, only the chosen
+   one visible. `visibility` rather than `display: none` because a hidden box
+   still has to take its width for this to work at all. */
+.select-label { display: grid; align-items: center; }
+.select-label > * { grid-area: 1 / 1; white-space: nowrap; text-align: left; }
+.select-label-sizer { visibility: hidden; }
+.select-trigger:focus-visible { outline: none; border-color: var(--text-1); }
 .select-shell .select-chevron {
   position: absolute;
   right: 7px;
@@ -453,6 +457,56 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   pointer-events: none;
 }
 
+/* The menu. Fixed, so it is positioned against the window rather than against
+   whatever the toolbar's overflow happens to be, and clamped in JS to the
+   window's box — the whole point of replacing the native popup, which drew
+   outside the app entirely. */
+.select-menu {
+  position: fixed;
+  z-index: 60;
+  /* Or `max-height` would bound the *content* box and the padding and border
+     would sit outside it — the menu overflowed the window's bottom edge by
+     exactly those 10px, which is the one thing this control exists to prevent. */
+  box-sizing: border-box;
+  min-width: 220px;
+  padding: 4px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  font-size: 11.5px;
+  background: var(--chrome-1);
+  color: var(--text-0);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  /* The one shadow in the chrome. A menu is the only surface that genuinely
+     floats above the rest, and without it the panel reads as part of the page
+     under test rather than as app chrome. */
+  box-shadow: 0 8px 24px rgb(0 0 0 / 55%);
+}
+.select-group + .select-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
+.select-group-label {
+  padding: 5px 9px 3px;
+  color: var(--text-1);
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.select-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 9px 5px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+/* Hover and keyboard share one highlight: two different treatments for "the
+   row you are about to choose" is one too many. */
+.select-option.active { background: var(--chrome-3); }
+/* The tick's column is always reserved, so labels do not shift by 12px when
+   the selection moves. */
+.select-tick { display: flex; width: 14px; justify-content: center; color: var(--text-0); }
+
+
 /* Segmented groups. Pressed is a fill step and weight, never hue. */
 .segmented {
   flex: 0 0 auto;
@@ -1074,3 +1128,16 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    being simulated, which is the one fact that survives having no page. Stacking
    rather than insetting the overlay, so nothing depends on the footer's height. */
 .pane-footer { position: relative; z-index: 3; }
+
+/* --- overlay view --------------------------------------------------------- */
+/* The menu view is a transparent sheet over the whole window, so its page must
+   paint nothing of its own — a background here would hide both panes. */
+:root[data-overlay] html,
+:root[data-overlay],
+:root[data-overlay] body,
+:root[data-overlay] #root {
+  background: transparent;
+}
+/* Spans the overlay so a press anywhere outside the menu dismisses it, which is
+   what a native menu's invisible tracking window does. */
+.menu-backdrop { position: fixed; inset: 0; }

package/out/renderer/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:" />
     <title>Obsrv</title>
-    <script type="module" crossorigin src="./assets/index-WM0cwf7d.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BpvyvKfD.css">
+    <script type="module" crossorigin src="./assets/index-BJmd2r3W.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DUmCxwNL.css">
   </head>
   <body>
     <div id="root"></div>

package/out/shared/ipcPayloads.js

@@ -12,6 +12,7 @@ exports.parseUiState = parseUiState;
 exports.parseScrollPos = parseScrollPos;
 exports.parseScrollRequest = parseScrollRequest;
 exports.parseScrollReport = parseScrollReport;
+exports.parseMenuRequest = parseMenuRequest;
 const presets_1 = require("./presets");
 const types_1 = require("./types");
 /**
@@ -281,3 +282,52 @@ function parseScrollReport(raw) {
         : [];
     return { id, x, y, scroller, warnings };
 }
+/** Rows in one menu, and characters in a label. A renderer bug should not be
+ *  able to ask main to hold an unbounded payload. */
+const MAX_MENU_OPTIONS = 200;
+const MAX_MENU_LABEL = 120;
+/**
+ * The menu the chrome is asking the overlay to draw. Validated like anything
+ * else crossing into main: the two sides are separate web contents, and main is
+ * the only thing standing between them.
+ */
+function parseMenuRequest(raw) {
+    if (!isRecord(raw))
+        return null;
+    const { groups, value, ariaLabel, anchor } = raw;
+    if (typeof value !== 'string' || value.length > MAX_MENU_LABEL)
+        return null;
+    if (typeof ariaLabel !== 'string' || ariaLabel.length > MAX_MENU_LABEL)
+        return null;
+    const rect = parseRect(anchor);
+    if (!rect)
+        return null;
+    if (!Array.isArray(groups))
+        return null;
+    const out = [];
+    let rows = 0;
+    for (const g of groups) {
+        if (!isRecord(g))
+            return null;
+        if (g.label !== undefined && (typeof g.label !== 'string' || g.label.length > MAX_MENU_LABEL))
+            return null;
+        if (!Array.isArray(g.options))
+            return null;
+        const options = [];
+        for (const o of g.options) {
+            if (!isRecord(o))
+                return null;
+            if (typeof o.value !== 'string' || o.value.length > MAX_MENU_LABEL)
+                return null;
+            if (typeof o.label !== 'string' || o.label.length > MAX_MENU_LABEL)
+                return null;
+            if (++rows > MAX_MENU_OPTIONS)
+                return null;
+            options.push({ value: o.value, label: o.label });
+        }
+        out.push(g.label === undefined ? { options } : { label: g.label, options });
+    }
+    if (rows === 0)
+        return null;
+    return { groups: out, value, ariaLabel, anchor: rect };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "getobsrv",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "See your site the way 1x screens see it",
   "main": "./out/main/index.js",
   "bin": {