ruby_everywhere 0.3.0 → 0.5.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
@@ -177,6 +178,19 @@ function detectPlatform() {
 
 // --- desktop: the Tauri-based RubyEverywhere shell -------------------------
 
+// Distinguishes concurrent desktop command calls. Only has to be unique within
+// one page, so a counter is enough; the random suffix just keeps two rapid
+// calls from colliding if the page is restored from bfcache mid-flight.
+let commandSequence = 0
+const COMMAND_TIMEOUT = 30000
+
+// The shell's own window handle. Named so it can't shadow the global `window`
+// inside the adapter below, where every other method still needs the real one.
+function tauriWindow() {
+  const api = window.__TAURI__ && window.__TAURI__.window
+  return api && api.getCurrentWindow ? api.getCurrentWindow() : null
+}
+
 const desktop = {
   notify({ title, body }) {
     return window.__TAURI__.event.emit("everywhere:notify", { title, body })
@@ -209,6 +223,56 @@ const desktop = {
     return window.__TAURI__.clipboardManager.readText()
   },
 
+  // Window controls, for apps that draw their own title bar (`window.title_bar:
+  // frameless`, and `overlay` on Windows/Linux where there's no native overlay
+  // style). Without a system title bar there's nothing to drag or click, so the
+  // page supplies both and calls these. One entry point rather than six methods
+  // because the Tauri window API is already uniform: every one of these is a
+  // no-arg call returning a promise.
+  //
+  // These are ACL-gated. The matching core:window:allow-* permissions have to be
+  // in BOTH capability sets (capabilities/default.json for local origins, and
+  // the mirrored list in authorize_remote_origin for remote mode) or they reject
+  // at runtime.
+  windowControl(action) {
+    const win = tauriWindow()
+    return win ? win[action]() : Promise.resolve(null)
+  },
+
+  // Call a Rust function the app keeps in native/desktop/. Events, not invoke:
+  // a RubyEverywhere page is always served over http (127.0.0.1 in local mode,
+  // your domain in remote mode) and Tauri v2 refuses invoke from any http
+  // origin — even the packaged app's own localhost server. See the comment on
+  // install_command_bridge in the shell's extension_host.rs.
+  //
+  // The id round-trips so concurrent calls can't take each other's answers,
+  // which a bare request/response event pair would otherwise allow.
+  desktopInvoke(name, payload) {
+    return new Promise((resolve, reject) => {
+      const id = `${commandSequence++}-${Math.random().toString(36).slice(2)}`
+      let off = null
+      const settle = (fn, value) => {
+        clearTimeout(timer)
+        if (off) off()
+        fn(value)
+      }
+      const timer = setTimeout(
+        () => settle(reject, new Error(`desktop command ${name} timed out`)),
+        COMMAND_TIMEOUT
+      )
+      off = this.on("command-result", (result) => {
+        if (!result || result.id !== id) return
+        if (result.ok) settle(resolve, result.value)
+        else settle(reject, new Error(result.error || `desktop command ${name} failed`))
+      })
+      window.__TAURI__.event.emit("everywhere:command", {
+        id,
+        name,
+        payload: payload === undefined ? null : payload
+      })
+    })
+  },
+
   // Ask the shell to check its update feed; resolve off whichever update
   // event answers first. The shell always replies to an explicit check
   // (available / none / error), the timeout is just a safety net.
@@ -294,6 +358,22 @@ const browser = {
     return null
   },
 
+  // A browser tab has no window of its own to drive — the one thing close()
+  // could map to (window.close) only works for script-opened windows, which
+  // this never is. Resolving null keeps a page that draws a custom title bar
+  // from throwing when it's opened in a plain browser.
+  windowControl() {
+    return Promise.resolve(null)
+  },
+
+  // There is no Rust here. Rejecting (rather than resolving null) is the honest
+  // answer: unlike the rest of the bridge, a desktop command has no web
+  // equivalent to degrade to, and silently resolving would let a page act on a
+  // result it never got. Gate on Everywhere.desktop.supported.
+  desktopInvoke(name) {
+    return Promise.reject(new Error(`desktop command ${name} is unavailable outside the desktop shell`))
+  },
+
   // Honest approximation: the Vibration API where it exists (Android
   // browsers); silently nothing elsewhere (iOS Safari has no equivalent).
   haptic(kind, value) {
@@ -532,8 +612,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) {
@@ -566,6 +647,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) {
@@ -702,10 +793,43 @@ const mobile = {
   }
 }
 
+// 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 ----------------------------------------------------------
@@ -719,6 +843,17 @@ const adapter = adapters[platform]
 // registered by the time app code first calls notify().
 if (platform === "mobile") installWebBridge()
 
+// Publish the window chrome mode to CSS. The titlebar utilities in native.css
+// key off this attribute, which is the only way they can know a mode that lives
+// in everywhere.yml — and it keeps them inert everywhere else, since nothing
+// stamps it in a browser tab, on mobile, or in a normally decorated window.
+if (platform === "desktop" && typeof document !== "undefined") {
+  const titleBar = config.window && config.window.title_bar
+  if (titleBar && titleBar !== "decorated") {
+    document.documentElement.dataset.everywhereTitlebar = titleBar
+  }
+}
+
 // Mutable so setChannel can keep updates.channel truthful without a reload.
 let updatesChannel = (config.updates && config.updates.channel) || null
 
@@ -790,6 +925,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)
@@ -977,6 +1124,67 @@ export const Everywhere = {
     }
   },
 
+  // Rust the app keeps in native/desktop/ and declares under
+  // `native.desktop.commands` in everywhere.yml:
+  //
+  //   const ports = await Everywhere.desktop.invoke("scan_ports", { baud: 9600 })
+  //
+  // The payload arrives as serde_json::Value and whatever the command returns
+  // comes back as the resolved value. Errors reject with the command's own
+  // message. Rejects immediately off the desktop — there's no web fallback for
+  // "talk to a serial port", so check `supported` first.
+  desktop: {
+    get supported() {
+      return platform === "desktop"
+    },
+    invoke(name, payload) {
+      return adapter.desktopInvoke(name, payload)
+    }
+  },
+
+  // Desktop window controls, for apps that draw their own title bar. Set
+  // `window.title_bar: overlay` (macOS traffic lights float over your content)
+  // or `frameless` (no system chrome at all) in everywhere.yml; frameless is
+  // the one that needs these, since the page then owns dragging and the
+  // minimize/maximize/close buttons:
+  //
+  //   <header data-tauri-drag-region>
+  //     <button onclick="Everywhere.window.close()">×</button>
+  //   </header>
+  //
+  // Everything resolves to null in a browser tab and on mobile, where the OS
+  // owns the frame — so the same markup is safe everywhere.
+  window: {
+    get supported() {
+      return platform === "desktop"
+    },
+    minimize() {
+      return adapter.windowControl("minimize")
+    },
+    maximize() {
+      return adapter.windowControl("maximize")
+    },
+    unmaximize() {
+      return adapter.windowControl("unmaximize")
+    },
+    // What a double-click on a title bar normally does.
+    toggleMaximize() {
+      return adapter.windowControl("toggleMaximize")
+    },
+    close() {
+      return adapter.windowControl("close")
+    },
+    isMaximized() {
+      return adapter.windowControl("isMaximized").then((maximized) => !!maximized)
+    },
+    // Call from a pointerdown handler on your custom title bar. Tauri's
+    // data-tauri-drag-region attribute does this for you; this is the escape
+    // hatch for a drag region you compute yourself.
+    startDragging() {
+      return adapter.windowControl("startDragging")
+    }
+  },
+
   updates: {
     // True only when the shell actually has a feed to check (everywhere.yml
     // updates: url + public_key made it into the shipped config).

data/bridge/everywhere/native.css

@@ -201,3 +201,64 @@ html[data-bridge-platform] [data-everywhere-nav-menu] {
 @keyframes everywhere-sheet-rise {
   from { transform: translateY(1rem); opacity: 0; }
 }
+
+/* ---------------------------------------------------------------------------
+ * Desktop window chrome — for `window.title_bar: overlay | frameless` in
+ * everywhere.yml. The bridge stamps data-everywhere-titlebar on <html>, so
+ * every rule here is scoped to the mode that needs it: on mobile, in a plain
+ * browser tab, and in a normal decorated window the attribute is absent and
+ * these classes do nothing. Safe to apply unconditionally.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  /* macOS traffic lights: a ~78px cluster inside a 28px band at the top left.
+   * Override both if you draw a taller bar. */
+  --everywhere-titlebar-height: 28px;
+  --everywhere-titlebar-controls: 78px;
+}
+
+/* Overlay mode: the system still draws (and positions) the traffic lights over
+ * your page. Reserve the band so your content doesn't slide underneath them.
+ * Frameless draws no controls at all, so it reserves nothing — the page owns
+ * that space and decides what goes there. */
+[data-everywhere-titlebar="overlay"] .everywhere-titlebar-inset {
+  padding-top: var(--everywhere-titlebar-height);
+}
+[data-everywhere-titlebar="overlay"] .everywhere-titlebar-controls-inset {
+  padding-left: var(--everywhere-titlebar-controls);
+}
+
+/* A title-bar strip across the top of the window. Purely layout — the shell
+ * already makes the top 28px drag the window, so this needs no attribute:
+ *
+ *   <header class="everywhere-titlebar">My App</header>
+ *
+ * Buttons and links inside it keep their clicks. Mark a region outside the
+ * strip with data-tauri-drag-region to make that draggable too, or set
+ * window.drag_height: 0 in everywhere.yml to take dragging over entirely.
+ *
+ * In overlay mode it clears the traffic lights; in frameless it starts at the
+ * left edge, because there's nothing there to clear. */
+[data-everywhere-titlebar] .everywhere-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: var(--everywhere-titlebar-height);
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+}
+[data-everywhere-titlebar="overlay"] .everywhere-titlebar {
+  padding-left: var(--everywhere-titlebar-controls);
+}
+
+/* Anything clickable inside the drag strip has to opt out, or the drag region
+ * swallows the click before the control ever sees it. */
+[data-everywhere-titlebar] .everywhere-titlebar button,
+[data-everywhere-titlebar] .everywhere-titlebar a,
+[data-everywhere-titlebar] .everywhere-titlebar input,
+[data-everywhere-titlebar] .everywhere-titlebar select,
+[data-everywhere-titlebar] .everywhere-titlebar [data-tauri-drag-region="false"] {
+  -webkit-app-region: no-drag;
+  cursor: default;
+}

data/lib/everywhere/android_resources.rb

@@ -0,0 +1,217 @@
+# frozen_string_literal: true
+
+require "fileutils"
+
+module Everywhere
+  # Compiles an app's native/android/assets/ tree into Android drawable
+  # resources so native code can reach them by name — R.drawable.logo in Kotlin,
+  # @drawable/logo in a layout.
+  #
+  # Deliberately the same filename API as the iOS side (see AssetCatalog), so one
+  # assets/ tree can be authored once and dropped into both native/ios/ and
+  # native/android/: <name>[@2x|@3x][~dark].<ext>. What differs is where the
+  # markers land, because Android expresses both as directory qualifiers rather
+  # than as catalog metadata:
+  #
+  #   logo.png        → res/drawable/logo.png              (density-independent baseline)
+  #   logo@2x.png     → res/drawable-xhdpi/logo.png        (2x = 320dpi)
+  #   logo@3x.png     → res/drawable-xxhdpi/logo.png       (3x = 480dpi)
+  #   logo~dark.png   → res/drawable-night/logo.png
+  #   logo@2x~dark.png→ res/drawable-night-xhdpi/logo.png
+  #
+  # Sub-directories organise the source tree but do NOT namespace the result —
+  # res/ is flat, and asset names are global on iOS too, so assets/branding/
+  # logo.png is R.drawable.logo either way.
+  module AndroidResources
+    # Raster formats aapt2 accepts as-is. WebP is included (and PDF/SVG are not)
+    # because that is the split Android itself draws — the reverse of iOS.
+    RASTER = %w[.png .jpg .jpeg .webp].freeze
+
+    # A drawable written as XML: vectors, shapes, layer lists, selectors. Scale
+    # -free, so the density qualifiers above don't apply to them.
+    VECTOR = %w[.xml].freeze
+    EXTENSIONS = (RASTER + VECTOR).freeze
+
+    # iOS's @2x/@3x in Android's density buckets. 1x is plain `drawable`, not
+    # `drawable-mdpi`: both mean 160dpi, but the unqualified directory is also
+    # the fallback every density falls back TO, which is what a single-file
+    # asset needs to be.
+    DENSITIES = { nil => nil, "2x" => "xhdpi", "3x" => "xxhdpi" }.freeze
+
+    # Written by the Android builder itself (adaptive launcher icon layers) or
+    # shipped in the frozen template's own res/. Both would collide in the
+    # merged resource table, so they're refused by name here — a merge conflict
+    # from aapt2 arrives minutes into a Gradle run and names no fix.
+    RESERVED = %w[
+      ic_launcher ic_launcher_round ic_launcher_foreground ic_launcher_background
+      ic_tab_placeholder
+    ].freeze
+
+    # An Android resource entry is a field on the generated R class, so the name
+    # has to be a Java identifier — and aapt2 additionally rejects uppercase in
+    # a res/ filename. Hyphens and dots are legal on iOS and never here.
+    VALID_NAME = /\A[a-z][a-z0-9_]*\z/
+
+    # Reserved words can't name a field on R. `val`/`fun` are fine (Kotlin reads
+    # R from Java), so this is the Java list, not the Kotlin one.
+    JAVA_KEYWORDS = %w[
+      abstract assert boolean break byte case catch char class const continue default do double else
+      enum extends final finally float for goto if implements import instanceof int interface long
+      native new package private protected public return short static strictfp super switch
+      synchronized this throw throws transient try void volatile while
+    ].freeze
+
+    class << self
+      # Copy every image under `source` into `res` as a drawable resource.
+      # Returns [names, errors]; nothing is written when errors is non-empty, so
+      # a broken assets/ tree can't half-stamp the resource dirs.
+      def write!(source, res)
+        variants, errors = plan(source)
+        return [[], errors] unless errors.empty?
+
+        variants.each do |variant|
+          dir = File.join(res, variant[:dir])
+          FileUtils.mkdir_p(dir)
+          FileUtils.cp(variant[:path], File.join(dir, "#{variant[:name]}#{variant[:extension]}"))
+        end
+
+        [variants.map { |variant| variant[:name] }.uniq.sort, []]
+      end
+
+      private
+
+      # Errors are collected (not raised) so one `every build` reports every
+      # problem in the tree instead of the first.
+      def plan(source)
+        errors = []
+        files = Dir.glob(File.join(source, "**", "*"))
+                   .select { |path| File.file?(path) && !File.basename(path).start_with?(".") }
+                   .sort
+        images, other = files.partition { |path| EXTENSIONS.include?(File.extname(path).downcase) }
+
+        other.each { |path| errors << unsupported(path, source) }
+        variants = images.filter_map { |path| variant(path, source, errors) }
+        errors.concat(clash_errors(variants))
+
+        [variants, errors]
+      end
+
+      def unsupported(path, source)
+        relative = relative(path, source)
+        case File.extname(path).downcase
+        when ".svg", ".pdf"
+          "#{relative}: Android has no runtime SVG or PDF renderer — export a PNG, or convert it to " \
+            "a VectorDrawable (Android Studio: right-click res → New → Vector Asset) and ship the .xml"
+        else
+          "#{relative}: unsupported image type — use #{EXTENSIONS.join(", ")}"
+        end
+      end
+
+      def variant(path, source, errors)
+        relative = relative(path, source)
+        extension = File.extname(path).downcase
+        stem = File.basename(path, File.extname(path))
+
+        # A nine-patch is `logo.9.png`, whose stem carries a dot that no valid
+        # resource name may — so it would otherwise fail with a naming error
+        # that says nothing about what the author actually tried to do.
+        if stem.end_with?(".9")
+          errors << "#{relative}: nine-patch drawables aren't supported yet — ship a plain #{extension} " \
+                    "(or a VectorDrawable .xml, which stretches without one)"
+          return nil
+        end
+
+        name, scale, dark = parse(stem)
+
+        unless name.match?(VALID_NAME)
+          errors << "#{relative}: #{name.inspect} isn't a usable Android resource name — use lowercase " \
+                    "letters, digits and _, starting with a letter (#{suggestion(name).inspect} would " \
+                    "work). Unlike iOS, Android has no room for capitals, hyphens or dots here"
+          return nil
+        end
+        if JAVA_KEYWORDS.include?(name)
+          errors << "#{relative}: #{name.inspect} is a Java keyword, so it can't name a field on R — " \
+                    "rename it (#{"#{name}_image".inspect})"
+          return nil
+        end
+        if RESERVED.include?(name)
+          errors << "#{relative}: #{name} is reserved by the shell (launcher icon and tab placeholder) — " \
+                    "rename it"
+          return nil
+        end
+        if scale && VECTOR.include?(extension)
+          errors << "#{relative}: an XML drawable is scale-free — drop the @#{scale} suffix"
+          return nil
+        end
+
+        { name: name, extension: extension, dir: directory(scale, dark), source_dir: File.dirname(relative),
+          scale: scale, dark: dark, vector: VECTOR.include?(extension), path: path, relative: relative }
+      end
+
+      # Trailing @2x/@3x and ~dark markers, in either order, off the stem —
+      # character for character AssetCatalog#parse, because the two platforms
+      # read the same filenames.
+      def parse(stem)
+        name = stem.dup
+        scale = nil
+        dark = false
+        loop do
+          if name.sub!(/~dark\z/, "")
+            dark = true
+          elsif name.sub!(/@([23])x\z/, "")
+            scale = "#{Regexp.last_match(1)}x"
+          else
+            break
+          end
+        end
+        [name, scale, dark]
+      end
+
+      # Qualifier order is fixed by the platform and is not alphabetical: UI mode
+      # (night) comes before density. `drawable-xhdpi-night` is not a directory
+      # Android will ever match — it's silently ignored, which reads as "my dark
+      # asset doesn't work" with nothing in the log.
+      def directory(scale, dark)
+        ["drawable", dark ? "night" : nil, DENSITIES.fetch(scale)].compact.join("-")
+      end
+
+      # What the author probably meant, so the error can show it rather than
+      # describe it. Not applied automatically: R.drawable.<name> is written by
+      # hand in Kotlin, so a name we invented is a name nobody can guess.
+      def suggestion(name)
+        candidate = name.gsub(/([a-z0-9])([A-Z])/, '\1_\2').downcase.gsub(/[^a-z0-9]+/, "_")
+                        .gsub(/_+/, "_").delete_prefix("_").delete_suffix("_")
+        candidate.match?(/\A[a-z]/) ? candidate : "image_#{candidate}"
+      end
+
+      def clash_errors(variants)
+        errors = []
+        variants.group_by { |variant| variant[:name] }.each do |name, group|
+          dirs = group.map { |variant| variant[:source_dir] }.uniq
+          if dirs.length > 1
+            listed = dirs.map { |dir| dir == "." ? "assets/" : "assets/#{dir}/" }.join(" and ")
+            errors << "#{name}: same asset name in #{listed} — res/ is flat, so both would become " \
+                      "R.drawable.#{name}. Rename one"
+          end
+          if group.map { |variant| variant[:vector] }.uniq.length > 1
+            errors << "#{name}: mixes an XML drawable with bitmaps — pick one per asset"
+          end
+
+          # Same destination directory and same name: aapt2 sees two files
+          # claiming one resource, whatever their extensions.
+          group.group_by { |variant| variant[:dir] }.each_value do |clash|
+            next if clash.length < 2
+
+            errors << "#{name}: #{clash.map { |variant| variant[:relative] }.join(" and ")} both become " \
+                      "res/#{clash.first[:dir]}/#{name}"
+          end
+        end
+        errors
+      end
+
+      def relative(path, source)
+        path.delete_prefix("#{source}/")
+      end
+    end
+  end
+end