ruby_everywhere 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0bb96376a66f4202388542212bc1d03b2dea1bb6519ccc4a8339cc1b3cda3e43
-  data.tar.gz: be5f8b69e0157a93dfc1837445faa8f4e6326678741b88ddd76c9bff0521ddf5
+  metadata.gz: b255975aa8724cb4980606ddbde415eea3a238c193ffce8530028ef5fdc63c24
+  data.tar.gz: 386145d42d750984da4fa800ea9b63417371937dbf67d49642a229cd92cfbb71
 SHA512:
-  metadata.gz: 29c23a79521c57f81a0881e663debc4e2c9a505a424dbe8b615c1a1c5eccba3d93c1dfd7ee0281ea04c8121d2c4ba6ec4c0de8276453ab5ca0d348d6d8afdf00
-  data.tar.gz: 7a626876bb0820701922e23990541e149360b35246b2456be3b2d5f7729743f2c5e3772d6e9e2d94d7ea898b85d6e528ff5e9ad85e919653357463073cfbdcea
+  metadata.gz: 6af24db6e60c693ae855fa47832564074d887c18248a63be23c343c5e85c7d84cf4210017ba6bb26dae9950bb6b1394255f02cbea4d278f9407952a22f37dd6c
+  data.tar.gz: 368f12504a2a5748aa30eaf641eadf5b85bbd54b99e0f372015b9621510f01dc5779ca6e3e37cfab594083768815e40e48200e2c3649195c5b5e800cc7cf5557

data/bridge/README.md

@@ -33,6 +33,11 @@ Everywhere.confirm("Sure?")          // Promise<boolean>, native dialog when pos
 Everywhere.on("menu", handler)       // shell events; returns an unsubscribe fn
 Everywhere.visit("/settings")        // Turbo.visit with location fallback
 
+Everywhere.menu({ title, items })    // Promise<item | null> — native action
+                                     // sheet in the shell, a styled bottom
+                                     // sheet everywhere else. items:
+                                     // [{ title, id?, style?, disabled? }]
+
 Everywhere.clipboard.write(text)     // Promise<void>
 Everywhere.clipboard.read()          // Promise<string | null>
 
@@ -61,6 +66,49 @@ Everywhere.storage.clear()           // Promise<boolean> — clears app keys onl
 // desktop shell. Settings, not secrets — tokens go in biometrics.credential.
 ```
 
+### Native chrome (nav bar buttons, menus, action sheets)
+
+Tag ordinary markup, and inside the mobile shell the bridge lifts it into real
+native controls — a nav-bar button, a pull-down / overflow menu, or an action
+sheet. Tapping the native control just `.click()`s the element it mirrors, so a
+link navigates, a submit submits, and behavior stays defined once in the DOM. In
+a browser the same markup is the plain HTML it already is. No JavaScript, no
+Stimulus — CSP-safe.
+
+```html
+<!-- becomes a nav-bar button (right side); icons are per-platform like tabs -->
+<a href="/notes/new" data-everywhere-nav-button
+   data-everywhere-nav-title="New"
+   data-everywhere-nav-icon-ios="plus"
+   data-everywhere-nav-icon-android="add">New</a>
+
+<!-- a submit button in the nav bar -->
+<button type="submit" data-everywhere-nav-button
+        data-everywhere-nav-title="Save" data-everywhere-nav-style="done">Save</button>
+
+<!-- a nav-bar pull-down / overflow menu (defaults to the ⋯ icon) -->
+<div data-everywhere-nav-menu data-everywhere-nav-title="More">
+  <a href="/share" data-everywhere-menu-item data-everywhere-menu-title="Share">Share</a>
+  <button form="delete_1" data-everywhere-menu-item
+          data-everywhere-menu-title="Delete"
+          data-everywhere-menu-style="destructive">Delete</button>
+</div>
+
+<!-- an in-content action sheet: a trigger and 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>
+  </div>
+</div>
+```
+
+Rails ships helpers that emit exactly this — `everywhere_nav_button`,
+`everywhere_submit_button`, `everywhere_nav_menu` / `everywhere_menu_item`,
+`everywhere_menu`, and `everywhere_fab` (a floating action button). Include
+`everywhere/native.css` for the FAB, the action-sheet fallback, and the
+safe-area utilities.
+
 ### Multi-instance apps
 
 Apps whose users pick a server — one hosted platform, many instances — opt in

data/bridge/everywhere/bridge.js

@@ -103,6 +103,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 +439,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
@@ -633,6 +678,27 @@ 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)
   }
 }
 
@@ -689,6 +755,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() {
@@ -1032,10 +1118,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 +1374,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 +1391,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; }
+}

data/bridge/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@rubyeverywhere/bridge",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "One API for browser, desktop, and mobile — the JS half of RubyEverywhere",
   "type": "module",
   "main": "everywhere/bridge.js",
-  "exports": { ".": "./everywhere/bridge.js" },
-  "files": ["everywhere/bridge.js", "README.md", "LICENSE"],
+  "exports": {
+    ".": "./everywhere/bridge.js",
+    "./native.css": "./everywhere/native.css"
+  },
+  "files": ["everywhere/bridge.js", "everywhere/native.css", "README.md", "LICENSE"],
   "sideEffects": false,
   "keywords": ["rubyeverywhere", "tauri", "hotwire", "turbo", "rails", "desktop", "native", "bridge"],
   "homepage": "https://rubyeverywhere.com",