ruby_everywhere 0.2.0 → 0.4.0

data/bridge/everywhere/bridge.js

@@ -16,6 +16,7 @@
 //   Everywhere.on("menu", handler)       // shell events; returns unsubscribe fn
 //   Everywhere.visit("/settings")        // Turbo.visit with location fallback
 //   Everywhere.reloadTabs()              // re-fetch native tab/nav config (mobile)
+//   Everywhere.auth.signIn("/auth/github") // provider sign-in in the system browser (mobile)
 //
 //   Everywhere.haptics.impact("medium")  // light | medium | heavy | soft | rigid
 //   Everywhere.haptics.notification("success") // success | warning | error
@@ -103,6 +104,50 @@
 //   notes is the markdown source; notesHtml is the same notes pre-rendered to
 //   HTML (from the signed update feed — your own content), ready for a
 //   changelog modal: el.innerHTML = notesHtml.
+//
+//   Everywhere.menu({ title, message, items })  // Promise<item|null>
+//     items: [{ title, id?, style?, disabled? }]  style: "destructive" | "cancel"
+//     Native action sheet in the mobile shell; a styled bottom sheet everywhere
+//     else. Resolves the chosen item (null on cancel/dismiss).
+//
+//   Native chrome, declarative (no JS) — the bridge watches every page and,
+//   inside the mobile shell, lifts these into real native controls; in a
+//   browser (and the desktop shell) they stay as the plain HTML they already
+//   are, so the same markup works everywhere. Tapping a native control just
+//   .click()s the element it mirrors — a link navigates, a submit submits, a
+//   button fires its handler — so behavior is defined once, in the DOM.
+//
+//     Nav bar button (right side by default):
+//       <a href="/notes/new" data-everywhere-nav-button
+//          data-everywhere-nav-title="New" data-everywhere-nav-icon="plus">New</a>
+//     Nav bar submit button (submits the form when tapped):
+//       <button type="submit" data-everywhere-nav-button
+//               data-everywhere-nav-title="Save" data-everywhere-nav-style="done">Save</button>
+//     Nav bar pull-down / overflow menu (defaults to the ⋯ ellipsis icon):
+//       <div data-everywhere-nav-menu data-everywhere-nav-title="More">
+//         <a href="/share" data-everywhere-menu-item data-everywhere-menu-title="Share"
+//            data-everywhere-menu-icon-ios="square.and.arrow.up"
+//            data-everywhere-menu-icon-android="share">Share</a>
+//         <button form="delete_1" data-everywhere-menu-item data-everywhere-menu-title="Delete"
+//                 data-everywhere-menu-style="destructive">Delete</button>
+//       </div>
+//     In-content action sheet (a trigger + the items it opens):
+//       <div data-everywhere-menu>
+//         <button data-everywhere-menu-trigger>Options</button>
+//         <div data-everywhere-menu-items>
+//           <a href="/x/edit" data-everywhere-menu-item>Edit</a>
+//           <button form="del" data-everywhere-menu-item
+//                   data-everywhere-menu-style="destructive">Delete</button>
+//         </div>
+//       </div>
+//   Icons are per-platform, like tabs: -icon-ios is an SF Symbol, -icon-android
+//   a Material name, and a plain -icon is the shared fallback; the bridge picks
+//   by the running os, so one page serves both shells. Icons are ignored on the
+//   web. side is "left" or "right" (default). Nav-bar sources are hidden in the
+//   shell (they live in the bar now) but shown in a browser; the action-sheet
+//   trigger toggles its items as an inline menu when there's no native shell.
+//   These are the everywhere_nav_button / everywhere_nav_menu /
+//   everywhere_submit_button / everywhere_menu Rails helpers.
 
 const config =
   (typeof window !== "undefined" && window.__EVERYWHERE_CONFIG__) || {}
@@ -395,6 +440,7 @@ const HAPTICS_COMPONENT = "everywhere--haptics"
 const PERMISSIONS_COMPONENT = "everywhere--permissions"
 const BIOMETRICS_COMPONENT = "everywhere--biometrics"
 const STORAGE_COMPONENT = "everywhere--storage"
+const MENU_COMPONENT = "everywhere--menu"
 
 function installWebBridge() {
   if (window.HotwireNative) return
@@ -487,8 +533,9 @@ const mobile = {
   // Ask the shell to re-fetch its native navigation config (tabs + path
   // rules) now, instead of waiting for the next app foreground. Call it after
   // a change that affects which tabs should show — signing in or out — so the
-  // tab bar updates immediately. Uses a dedicated WKScriptMessageHandler, so
-  // it doesn't depend on a bridge component being mounted on the page.
+  // tab bar updates immediately. Uses the shell's control channel (a dedicated
+  // WKScriptMessageHandler on iOS, a WebMessageListener on Android), so it
+  // doesn't depend on a bridge component being mounted on the page.
   reloadTabs() {
     const control = nativeControlChannel()
     if (control) {
@@ -521,6 +568,16 @@ const mobile = {
     if (control) control.postMessage({ action: "clearInstance", ...(to ? { to } : {}) })
   },
 
+  // Open a provider sign-in in the system browser rather than this web view —
+  // where Google refuses to run at all and the rest lose the password manager
+  // and the user's existing session. The shell takes it from here: auth
+  // session, one-time handoff token, full reset onto the signed-in app.
+  authSignIn(path) {
+    const control = nativeControlChannel()
+    if (control) control.postMessage({ action: "authFlow", to: path })
+    else window.location.assign(path)
+  },
+
   // Real haptics via the shell's "everywhere--haptics" component; vibration
   // fallback while the handshake completes or on an older shell.
   haptic(kind, value) {
@@ -633,13 +690,67 @@ const mobile = {
         }
       })
     })
+  },
+
+  // Native chrome (nav bar items + action sheets) via the shell's
+  // "everywhere--menu" component. Unlike the other components these replies are
+  // not one-shot: native re-replies to the SAME message on every tap, so the
+  // caller owns the callback's lifetime (menuRemove) rather than clearing it on
+  // first reply.
+  menuSupported() {
+    const web = window.HotwireNative && window.HotwireNative.web
+    return !!(web && web.supportsComponent(MENU_COMPONENT))
+  },
+
+  menuSend(event, data, callback) {
+    const web = window.HotwireNative && window.HotwireNative.web
+    if (!web || !web.supportsComponent(MENU_COMPONENT)) return null
+    return web.send({ component: MENU_COMPONENT, event, data, callback })
+  },
+
+  menuRemove(id) {
+    const web = window.HotwireNative && window.HotwireNative.web
+    if (web && id !== null && id !== undefined && web.removeCallbackFor) web.removeCallbackFor(id)
   }
 }
 
+// The shell's out-of-band command line: app-level actions (reset, tabs,
+// badges, instance, auth) that must work on any page, whether or not a bridge
+// component happens to be mounted on it. Each shell injects it its own way,
+// and the two APIs disagree about what a message is:
+//
+//   iOS     — WKUserContentController.add(_:name:) hands us
+//             window.webkit.messageHandlers.everywhereControl, whose
+//             postMessage takes an *object* and serializes it across the
+//             boundary for us.
+//   Android — WebViewCompat.addWebMessageListener("everywhereControl") hands us
+//             window.everywhereControl, backed by a WebMessagePort, and a web
+//             message is *text*: postMessage(String). (Android has no user
+//             scripts either, so the shell injects this with
+//             addDocumentStartJavaScript — it's in place before page JS runs.)
+//
+// Normalizing here rather than at each call site is the point: the seven
+// callers below all speak the object shape, and only this function knows which
+// shell is listening. iOS gets its handler back untouched — it already is the
+// normalized shape, so that path stays byte-for-byte what it was.
 function nativeControlChannel() {
-  return window.webkit &&
+  if (typeof window === "undefined") return null
+
+  const webkit =
+    window.webkit &&
     window.webkit.messageHandlers &&
     window.webkit.messageHandlers.everywhereControl
+  if (webkit) return webkit
+
+  const android = window.everywhereControl
+  if (android && typeof android.postMessage === "function") {
+    // Built per call, not cached: a fresh document (a Turbo drive visit is
+    // not, but a real navigation is) gets a fresh injected object, and there's
+    // nothing here worth keeping alive across one.
+    return { postMessage: (message) => android.postMessage(JSON.stringify(message)) }
+  }
+
+  return null
 }
 
 // --- public surface ----------------------------------------------------------
@@ -689,6 +800,26 @@ export const Everywhere = {
     else window.location.assign(path)
   },
 
+  // A native action sheet in the mobile shell; a styled bottom sheet in the
+  // browser and desktop shell. Resolves the chosen item (the same object you
+  // passed), or null on cancel/dismiss:
+  //
+  //   const choice = await Everywhere.menu({
+  //     title: "Post",
+  //     items: [{ id: "share", title: "Share" },
+  //             { id: "delete", title: "Delete", style: "destructive" }]
+  //   })
+  //   if (choice?.id === "delete") …
+  menu(options = {}) {
+    const items = Array.isArray(options.items) ? options.items : []
+    return presentMenu({
+      title: options.title,
+      message: options.message,
+      items,
+      source: options.source
+    }).then((id) => (id == null ? null : items.find((item) => String(item.id) === String(id)) || null))
+  },
+
   // Refresh the native tab bar / navigation config now (mobile only; a no-op
   // in the browser and desktop shell, where there's nothing to refresh).
   reloadTabs() {
@@ -704,6 +835,18 @@ export const Everywhere = {
     else this.visit(to || window.location.pathname)
   },
 
+  // Third-party sign-in (everywhere.yml `auth:`). You rarely need this: the
+  // shell already diverts the paths listed there, so a plain link to
+  // /auth/github does the right thing everywhere. Call it when the sign-in is
+  // driven by something the shell can't see as a visit — a fetch, a custom
+  // element, a button that has other work to do first.
+  auth: {
+    signIn(path) {
+      if (adapter.authSignIn) adapter.authSignIn(path)
+      else window.location.assign(path)
+    }
+  },
+
   clipboard: {
     write(text) {
       return adapter.clipboardWrite(text)
@@ -1032,10 +1175,237 @@ async function wireBiometricToggles() {
   })
 }
 
+// --- native chrome (menus, nav bar items) -----------------------------------
+// Picks the native action sheet in the mobile shell and a DOM bottom sheet
+// (native.css .everywhere-sheet) everywhere else. Resolves the chosen item's
+// id, or null on cancel/dismiss.
+function presentMenu({ title, message, items, source }) {
+  const list = (items || []).map((item, i) => ({
+    id: item.id != null ? String(item.id) : String(i),
+    title: item.title || "",
+    image: item.image || null,
+    style: item.style || "default",
+    disabled: !!item.disabled
+  }))
+
+  if (platform === "mobile" && adapter.menuSupported && adapter.menuSupported()) {
+    return new Promise((resolve) => {
+      let settled = false
+      const id = adapter.menuSend("menu", { title, message, items: list, source }, (message) => {
+        if (settled) return
+        settled = true
+        adapter.menuRemove(id)
+        const data = (message && message.data) || {}
+        resolve(data.action === "select" && data.id != null ? String(data.id) : null)
+      })
+      if (id === null) resolve(domMenu({ title, message, items: list }))
+    })
+  }
+  return domMenu({ title, message, items: list })
+}
+
+// The honest web/desktop fallback for Everywhere.menu(): a modal bottom sheet
+// built from the same item list. No inline scripts — pure DOM — so it clears CSP.
+function domMenu({ title, message, items }) {
+  if (typeof document === "undefined") return Promise.resolve(null)
+
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div")
+    overlay.className = "everywhere-sheet-overlay"
+    const sheet = document.createElement("div")
+    sheet.className = "everywhere-sheet"
+    sheet.setAttribute("role", "menu")
+
+    if (title || message) {
+      const header = document.createElement("div")
+      header.className = "everywhere-sheet-header"
+      if (title) {
+        const el = document.createElement("div")
+        el.className = "everywhere-sheet-title"
+        el.textContent = title
+        header.appendChild(el)
+      }
+      if (message) {
+        const el = document.createElement("div")
+        el.className = "everywhere-sheet-message"
+        el.textContent = message
+        header.appendChild(el)
+      }
+      sheet.appendChild(header)
+    }
+
+    let done = false
+    const close = (value) => {
+      if (done) return
+      done = true
+      document.removeEventListener("keydown", onKey)
+      overlay.remove()
+      resolve(value)
+    }
+    const onKey = (event) => { if (event.key === "Escape") close(null) }
+
+    items.forEach((item) => {
+      const button = document.createElement("button")
+      button.type = "button"
+      button.className = "everywhere-sheet-item" +
+        (item.style === "destructive" ? " everywhere-sheet-item-destructive" : "")
+      button.textContent = item.title
+      button.setAttribute("role", "menuitem")
+      if (item.disabled) button.disabled = true
+      else button.addEventListener("click", () => close(item.id))
+      sheet.appendChild(button)
+    })
+
+    const cancel = document.createElement("button")
+    cancel.type = "button"
+    cancel.className = "everywhere-sheet-item everywhere-sheet-cancel"
+    cancel.textContent = "Cancel"
+    cancel.addEventListener("click", () => close(null))
+    sheet.appendChild(cancel)
+
+    overlay.addEventListener("click", (event) => { if (event.target === overlay) close(null) })
+    document.addEventListener("keydown", onKey)
+    overlay.appendChild(sheet)
+    document.body.appendChild(overlay)
+  })
+}
+
+// Per-platform icon, resolved like tabs: `<base>-<os>` (SF Symbol on iOS, a
+// Material name on Android) then the shared `<base>`. One page serves both shells.
+function resolveNativeIcon(el, base) {
+  return el.getAttribute(`${base}-${os}`) || el.getAttribute(base) || null
+}
+
+function navText(el) {
+  return (el.getAttribute("data-everywhere-nav-title") || el.textContent || "").trim()
+}
+
+function navSide(el) {
+  return el.getAttribute("data-everywhere-nav-side") === "left" ? "left" : "right"
+}
+
+function menuItemTitle(el) {
+  return (el.getAttribute("data-everywhere-menu-title") || el.textContent || "").trim()
+}
+
+// The nav bar items the current page declares, plus a fresh id→element map so
+// native taps can .click() the source element. Menu children get ids like
+// "n2.0" so a pull-down item routes back to the right element.
+let navMessageId = null
+const navElements = new Map()
+
+function collectNavItems() {
+  navElements.clear()
+  const items = []
+  let n = 0
+
+  document.querySelectorAll("[data-everywhere-nav-button]").forEach((el) => {
+    const id = "n" + (n++)
+    navElements.set(id, el)
+    items.push({
+      id,
+      kind: "button",
+      title: navText(el),
+      image: resolveNativeIcon(el, "data-everywhere-nav-icon"),
+      side: navSide(el),
+      style: el.getAttribute("data-everywhere-nav-style") || "plain",
+      disabled: el.disabled === true || el.hasAttribute("data-everywhere-nav-disabled")
+    })
+  })
+
+  document.querySelectorAll("[data-everywhere-nav-menu]").forEach((menuEl) => {
+    const id = "n" + (n++)
+    const children = []
+    menuEl.querySelectorAll("[data-everywhere-menu-item]").forEach((child, i) => {
+      const cid = id + "." + i
+      navElements.set(cid, child)
+      children.push({
+        id: cid,
+        title: menuItemTitle(child),
+        image: resolveNativeIcon(child, "data-everywhere-menu-icon"),
+        style: child.getAttribute("data-everywhere-menu-style") || "default"
+      })
+    })
+    items.push({
+      id,
+      kind: "menu",
+      title: navText(menuEl),
+      image: resolveNativeIcon(menuEl, "data-everywhere-nav-icon") || "ellipsis.circle",
+      side: navSide(menuEl),
+      children
+    })
+  })
+
+  return items
+}
+
+// Send this page's nav bar items to the shell. Native re-replies on every tap,
+// so the callback lives until the next page swaps it out (menuRemove first).
+function applyNavItems() {
+  if (platform !== "mobile" || !adapter.menuSupported || !adapter.menuSupported()) return
+  if (navMessageId !== null) {
+    adapter.menuRemove(navMessageId)
+    navMessageId = null
+  }
+  const items = collectNavItems()
+  if (!items.length) return
+
+  navMessageId = adapter.menuSend("navItems", { items }, (message) => {
+    const data = (message && message.data) || {}
+    if (data.action === "tap" && data.id != null) {
+      const el = navElements.get(String(data.id))
+      if (el) el.click()
+    }
+  })
+}
+
+// A tap on an in-content [data-everywhere-menu-trigger]: a native action sheet
+// in the shell, an inline disclosure (toggling [data-everywhere-menu-open]) in
+// a browser. Either way, choosing an item .click()s the element it maps to.
+function handleMenuTrigger(event, trigger) {
+  const container = trigger.closest("[data-everywhere-menu]") || trigger.parentElement
+  if (!container) return
+  const holder = container.querySelector("[data-everywhere-menu-items]") || container
+  const elements = Array.from(holder.querySelectorAll("[data-everywhere-menu-item]"))
+
+  if (platform === "mobile" && adapter.menuSupported && adapter.menuSupported()) {
+    event.preventDefault()
+    const rect = trigger.getBoundingClientRect()
+    const items = elements.map((el, i) => ({
+      id: String(i),
+      title: menuItemTitle(el),
+      image: resolveNativeIcon(el, "data-everywhere-menu-icon"),
+      style: el.getAttribute("data-everywhere-menu-style") || "default",
+      disabled: el.disabled === true
+    }))
+    presentMenu({
+      title: trigger.getAttribute("data-everywhere-menu-title") ||
+             container.getAttribute("data-everywhere-menu-title") || null,
+      items,
+      source: { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+    }).then((id) => {
+      if (id == null) return
+      const el = elements[parseInt(id, 10)]
+      if (el) el.click()
+    })
+  } else {
+    event.preventDefault()
+    const open = container.hasAttribute("data-everywhere-menu-open")
+    closeInlineMenus()
+    if (!open) container.setAttribute("data-everywhere-menu-open", "")
+  }
+}
+
+function closeInlineMenus() {
+  document.querySelectorAll("[data-everywhere-menu-open]")
+    .forEach((el) => el.removeAttribute("data-everywhere-menu-open"))
+}
+
 function applyDeclarative() {
   applyBadgeMetas()
   applyBiometricGates()
   wireBiometricToggles()
+  applyNavItems()
 }
 
 if (typeof document !== "undefined") {
@@ -1061,6 +1431,13 @@ if (typeof document !== "undefined") {
       if (content) content.hidden = true
       if (overlay) overlay.hidden = true
     })
+    // Never snapshot an open inline menu; the next page's applyNavItems()
+    // replaces the nav callback, so drop this page's before it's cached.
+    closeInlineMenus()
+    if (navMessageId !== null) {
+      adapter.menuRemove(navMessageId)
+      navMessageId = null
+    }
   })
 
   document.addEventListener("click", (event) => {
@@ -1071,6 +1448,14 @@ if (typeof document !== "undefined") {
     const unlock = event.target.closest("[data-everywhere-biometric-unlock]")
     const gate = unlock && unlock.closest("[data-everywhere-biometric-lock]")
     if (gate) resolveBiometricGate(gate, { prompt: true })
+
+    const trigger = event.target.closest("[data-everywhere-menu-trigger]")
+    if (trigger) {
+      handleMenuTrigger(event, trigger)
+    } else if (!event.target.closest("[data-everywhere-menu-open]")) {
+      // A click anywhere outside an open inline menu dismisses it.
+      closeInlineMenus()
+    }
   })
 
   document.addEventListener("change", async (event) => {

data/bridge/everywhere/native.css

@@ -0,0 +1,203 @@
+/* @rubyeverywhere/bridge — safe-area utilities for the native shells.
+ *
+ * Pair with <meta name="viewport" content="…, viewport-fit=cover"> so the
+ * browser exposes the device's safe-area insets. These classes pad content
+ * clear of the status bar / Dynamic Island / home indicator without
+ * hardcoding device sizes. On the desktop shell and plain browsers the insets
+ * are 0, so the classes are inert — safe to apply unconditionally.
+ *
+ * Include in Rails: <%= stylesheet_link_tag "everywhere/native" %>
+ * (Sinatra/Hanami: it's vendored to public/ by `every install`.)
+ */
+
+:root {
+  --everywhere-inset-top: env(safe-area-inset-top, 0px);
+  --everywhere-inset-right: env(safe-area-inset-right, 0px);
+  --everywhere-inset-bottom: env(safe-area-inset-bottom, 0px);
+  --everywhere-inset-left: env(safe-area-inset-left, 0px);
+}
+
+/* Padding utilities — add safe-area room on top of any existing padding. */
+.native-inset {
+  padding-top: calc(var(--everywhere-inset-top) + var(--native-inset-pad, 0px));
+  padding-bottom: calc(var(--everywhere-inset-bottom) + var(--native-inset-pad, 0px));
+}
+.native-inset-top    { padding-top: calc(var(--everywhere-inset-top) + var(--native-inset-pad, 0px)); }
+.native-inset-bottom { padding-bottom: calc(var(--everywhere-inset-bottom) + var(--native-inset-pad, 0px)); }
+.native-inset-left   { padding-left: calc(var(--everywhere-inset-left) + var(--native-inset-pad, 0px)); }
+.native-inset-right  { padding-right: calc(var(--everywhere-inset-right) + var(--native-inset-pad, 0px)); }
+
+/* Margin variants, when padding would fight an existing background. */
+.native-inset-mt { margin-top: var(--everywhere-inset-top); }
+.native-inset-mb { margin-bottom: var(--everywhere-inset-bottom); }
+
+/* A bar pinned to the bottom edge that stays above the home indicator. */
+.native-safe-bottom {
+  padding-bottom: max(var(--everywhere-inset-bottom), var(--native-safe-min, 0.5rem));
+}
+
+/* Fixed/absolute elements anchored near the bottom (toasts, nudges, FABs):
+ * lifts them clear of the home indicator AND anything overlaying the webview
+ * from below — on iOS the floating tab bar contributes to the bottom inset.
+ * --native-bottom-gap is the visual gap above that (default 1rem). */
+.native-bottom {
+  bottom: calc(var(--everywhere-inset-bottom) + var(--native-bottom-gap, 1rem));
+}
+
+/* Full-height element that respects both vertical insets. */
+.native-safe-height {
+  min-height: calc(100dvh - var(--everywhere-inset-top) - var(--everywhere-inset-bottom));
+}
+
+/* ---------------------------------------------------------------------------
+ * Native chrome — styling for the everywhere_fab / everywhere_menu helpers and
+ * the bridge's DOM action-sheet fallback. Set --everywhere-tint in your own CSS
+ * to brand the accent (it defaults to the platform accent color).
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --everywhere-tint: AccentColor;
+}
+
+/* Floating action button (everywhere_fab): fixed, safe-area-aware, above the
+ * home indicator and iOS floating tab bar. A real link/button, so it shows in
+ * a browser too. */
+.everywhere-fab {
+  position: fixed;
+  right: max(var(--everywhere-inset-right), 1rem);
+  bottom: calc(var(--everywhere-inset-bottom) + var(--native-bottom-gap, 1rem));
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--everywhere-fab-bg, var(--everywhere-tint, #1a73e8));
+  color: var(--everywhere-fab-color, #fff);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+.everywhere-fab:active {
+  transform: scale(0.94);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+}
+.everywhere-fab-left {
+  right: auto;
+  left: max(var(--everywhere-inset-left), 1rem);
+}
+/* Extended FAB: pill with a visible label beside the icon. */
+.everywhere-fab-extended {
+  width: auto;
+  height: 3.25rem;
+  padding: 0 1.25rem;
+  font: inherit;
+  font-weight: 600;
+}
+.everywhere-fab-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: none;
+}
+.everywhere-fab-label {
+  white-space: nowrap;
+}
+
+/* In-content action sheet (everywhere_menu) inline fallback: the items stay
+ * hidden until the trigger opens them. In the native shell the bridge shows a
+ * real action sheet instead and these never appear. */
+[data-everywhere-menu-items] {
+  display: none;
+}
+[data-everywhere-menu-open] > [data-everywhere-menu-items],
+[data-everywhere-menu-open] [data-everywhere-menu-items] {
+  display: block;
+}
+
+/* Nav-bar sources (everywhere_nav_button / everywhere_nav_menu) live in the
+ * top bar inside the shell, so hide the in-page copy there — but keep it in a
+ * browser, where there is no native bar. Keyed on the bridge's platform marker
+ * (set only by the mobile web bridge). */
+html[data-bridge-platform] [data-everywhere-nav-button],
+html[data-bridge-platform] [data-everywhere-nav-menu] {
+  display: none !important;
+}
+
+/* DOM action-sheet fallback rendered by the bridge (Everywhere.menu / the
+ * everywhere_menu trigger) when there is no native shell. */
+.everywhere-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0.75rem;
+  padding-bottom: calc(var(--everywhere-inset-bottom) + 0.75rem);
+  background: rgba(0, 0, 0, 0.4);
+  animation: everywhere-sheet-fade 0.15s ease;
+}
+.everywhere-sheet {
+  width: 100%;
+  max-width: 30rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-radius: 0.9rem;
+  overflow: hidden;
+  background: rgba(120, 120, 128, 0.2);
+  animation: everywhere-sheet-rise 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.everywhere-sheet-header {
+  padding: 0.85rem 1rem;
+  text-align: center;
+  background: Canvas;
+  color: color-mix(in srgb, CanvasText 60%, transparent);
+}
+.everywhere-sheet-title {
+  font-weight: 600;
+  color: CanvasText;
+}
+.everywhere-sheet-message {
+  font-size: 0.85rem;
+  margin-top: 0.15rem;
+}
+.everywhere-sheet-item {
+  appearance: none;
+  border: 0;
+  width: 100%;
+  padding: 1rem;
+  font: inherit;
+  font-size: 1.05rem;
+  text-align: center;
+  background: Canvas;
+  color: var(--everywhere-tint, #1a73e8);
+  cursor: pointer;
+}
+.everywhere-sheet-item:active {
+  background: color-mix(in srgb, CanvasText 8%, Canvas);
+}
+.everywhere-sheet-item:disabled {
+  color: color-mix(in srgb, CanvasText 30%, transparent);
+  cursor: default;
+}
+.everywhere-sheet-item-destructive {
+  color: #e5484d;
+}
+.everywhere-sheet-cancel {
+  margin-top: 0.5rem;
+  border-radius: 0.9rem;
+  font-weight: 600;
+  color: CanvasText;
+}
+@keyframes everywhere-sheet-fade {
+  from { opacity: 0; }
+}
+@keyframes everywhere-sheet-rise {
+  from { transform: translateY(1rem); opacity: 0; }
+}