ultimate_static_modal 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9c6d76149c3291f4bec643d1062bc5e938a71d3f6559c5bc7b1ca59eb0d1443e
+  data.tar.gz: e08791d480b1cd90d98cb331ef8a44f4656fe2b40d002c6b451c06aeada044bc
+SHA512:
+  metadata.gz: 7a58f03583f0574c4047b46bd6762f07ec09da3ecf6f991a76e56344a973c8f383f4f69e60b2462ebcbb30bf6ab5dd7d28f410c171996da686908b7df26318a4
+  data.tar.gz: 89c2a1f36faf6bf8625ffc079cfab2c5781d0ce35abcae367fc4871625da05a2d6e06a51a015852b830ae5b89469202840aad186c2d1c570707e752b1e887ad7

data/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+## 0.1.0 — 2026-04-24
+
+Initial release.
+
+- View helpers for static (non-Turbo) modals and drawers that reuse
+  `ultimate_turbo_modal`'s Phlex chrome and configured flavor classes:
+  `static_modal`, `static_drawer`, `static_modal_template`,
+  `static_drawer_template`, `static_modal_trigger`.
+- Install generator (`rails g ultimate_static_modal:install`) that copies a
+  `static-modal` Stimulus controller (template-cloner) into the host app and
+  registers it.
+- Ships a forked copy of UTMR's `modal_controller.js` so dialogs that have no
+  enclosing `<turbo-frame>` can dispatch close events on `this.element` and
+  redirected form submissions can navigate via `Turbo.visit` instead of
+  dead-ending in a `turbo:frame-missing` handler that never fires. The host
+  app's UTMR npm package is still imported for its
+  `turbo:frame-missing` / `before-frame-render` / `before-cache` side-effects.

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Raghu Betina
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,144 @@
+# ultimate_static_modal
+
+Static-content companion to [ultimate_turbo_modal](https://github.com/cmer/ultimate_turbo_modal) (UTMR).
+
+UTMR renders its `<dialog>` chrome only when the request carries a `Turbo-Frame` header. This gem adds view helpers that render the same chrome — and reuse UTMR's configured flavor classes — for modals and drawers whose content is *not* loaded via a Turbo Frame. Use it for help popovers, client-side confirms, navigation drawers, and other one-off modals that don't warrant their own route.
+
+## Installation
+
+```ruby
+# Gemfile
+gem "ultimate_turbo_modal"   # follow its install instructions first
+gem "ultimate_static_modal"
+```
+
+After installing UTMR (`rails g ultimate_turbo_modal:install`), run our installer:
+
+```sh
+bin/rails generate ultimate_static_modal:install
+```
+
+This:
+
+1. Copies a small `static-modal` Stimulus controller into `app/javascript/controllers/static_modal_controller.js` (clones a `<template>` into the DOM on click).
+2. Copies a patched `modal_controller.js` next to it (a fork of UTMR's controller — see *Why we ship a forked controller* below).
+3. Updates `app/javascript/controllers/index.js` to register both controllers and replace UTMR's modal registration with the forked version, while still importing UTMR's npm package for its Turbo event side-effects.
+
+Rebuild your JS bundle and restart Rails.
+
+## Usage
+
+Three view helpers cover the common pattern: parking the modal markup inside a `<template>`, plus a button that clones it on click.
+
+```erb
+<%# Modal %>
+<%= static_modal_template("shortcuts", title: "Keyboard shortcuts") do |m| %>
+  <% m.footer do %>
+    <button type="button" data-action="modal#hideModal">Close</button>
+  <% end %>
+  <dl>
+    <dt>?</dt><dd>Show this dialog</dd>
+    <dt>g h</dt><dd>Go home</dd>
+  </dl>
+<% end %>
+
+<%# Drawer / offcanvas %>
+<%= static_drawer_template("filters", position: :right, size: :lg, title: "Filters") do |m| %>
+  <p>Anything goes here.</p>
+<% end %>
+
+<%# Trigger button (works for both) %>
+<%= static_modal_trigger("shortcuts", class: "btn btn-primary") do %>
+  Keyboard shortcuts
+<% end %>
+```
+
+The trigger emits a `<button>` wired to the `static-modal` Stimulus controller:
+
+```html
+<button type="button" class="btn btn-primary"
+        data-controller="static-modal"
+        data-static-modal-id-value="shortcuts"
+        data-action="click->static-modal#open">
+  Keyboard shortcuts
+</button>
+```
+
+When clicked, it clones the `<template>` content into `document.body`. UTMR's modal Stimulus controller (the forked copy) then connects to the cloned `<dialog>` and animates it open. ESC, the close button, and outside-clicks all dismiss as usual.
+
+### Lower-level helpers
+
+If you need to render a dialog directly (no `<template>` wrap, no trigger), use:
+
+```erb
+<%= static_modal(title: "…") do |m| %>…<% end %>
+<%= static_drawer(position: :right, size: :md, title: "…") do |m| %>…<% end %>
+```
+
+These accept every option UTMR's `modal()` / `drawer()` helpers accept, including the `m.title { … }` / `m.footer { … }` block DSL. The dialog opens immediately on connect, so they're typically only useful inside a `<template>` you'll clone yourself, or wrapped in your own conditional rendering.
+
+### Drawer sizes and positions
+
+`static_drawer` / `static_drawer_template` accept the same options UTMR supports: `position: :right` or `:left`, and `size: :xs`, `:sm`, `:md`, `:lg`, `:xl`, `:"2xl"`, `:full`, or any CSS length string.
+
+### Header, footer, dividers, overlay
+
+All of UTMR's options pass through:
+
+- `title:` — modal/drawer title text
+- `header: false` — hide the header entirely
+- `header_divider: false` / `footer_divider: false` — turn dividers off
+- `close_button: false` — hide the close button
+- `overlay: false` — undimmed backdrop
+- `padding: false` — remove content padding
+
+## How it works
+
+```ruby
+module UltimateStaticModal
+  def build_static_subclass(flavor_class)
+    Class.new(flavor_class) do
+      def view_template(&block)
+        drawer? ? render_drawer(&block) : render_modal(&block)
+      end
+    end
+  end
+end
+```
+
+That's the entire server-side mechanism: a runtime subclass of whatever flavor UTMR is configured with (Tailwind, vanilla, custom), with `view_template` overridden to skip UTMR's `turbo_frame?` early-return. Class constants, inline `<style>`, data attributes, and Phlex rendering all come straight from UTMR.
+
+## Why we ship a forked controller
+
+UTMR's Stimulus controller assumes every `<dialog>` it manages is wrapped in a `<turbo-frame>` (because every dialog UTMR itself renders *is* wrapped in one). Three places dispatch lifecycle events on that frame:
+
+```js
+this.turboFrame.dispatchEvent(event);  // throws if turboFrame is null
+```
+
+For static modals, there is no enclosing frame. On the first close attempt, `hideModal` sets `this.hidingModal = true` and *then* throws on `dispatchEvent`. Every click after that is short-circuited by the `if (this.hidingModal) return false` guard, so the modal becomes un-closeable.
+
+We could wrap our static dialogs in a sentinel `<turbo-frame id="modal">` that never navigates — and an earlier prototype did exactly that — but Turbo's frame routing then traps any `<a>` or `<button>` inside the modal and tries to swap their target into the layout's empty modal frame. Drawer nav links blanked out instead of navigating the page.
+
+Instead we ship a fork of `modal_controller.js` with a single substantive change: a `#eventTarget()` helper that returns `this.turboFrame ?? this.element`. All three dispatch sites route through it. We also added one branch to `submitEnd`: when a redirected form response comes back and there's no `<turbo-frame>` ancestor, close the modal with a promise and `Turbo.visit(response.url)` directly — UTMR's normal flow defers this to a `turbo:frame-missing` handler that won't fire without a frame.
+
+The two patches are exercised by `javascript/modal_controller.test.js`, which also includes a regression guard ensuring the new `submitEnd` branch is correctly gated on `!this.turboFrame` (so UTMR's normal redirect flow is preserved when a frame *is* present).
+
+If UTMR adopts an equivalent change upstream, this fork goes away and the gem becomes a pure server-side add-on.
+
+## Status
+
+Experimental. Used in production-adjacent projects and being dogfooded. The plan is to propose folding the null-safe controller behavior into UTMR itself; if that lands, this gem drops the forked controller and shrinks to just the view helpers.
+
+## Development
+
+```sh
+# JS unit tests for the forked controller
+cd javascript && npm install && npm test
+```
+
+The Ruby gem has no test suite. UTMR also has none, and the gem is small enough that the JS tests plus manual smoke-testing in a host app cover the load-bearing behavior.
+
+## License
+
+MIT — see [LICENSE.txt](LICENSE.txt).

data/VERSION

@@ -0,0 +1 @@
+0.1.0

data/lib/generators/ultimate_static_modal/install_generator.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module UltimateStaticModal
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Installs UltimateStaticModal: copies Stimulus controllers (static_modal + forked modal) and wires them into controllers/index.js."
+
+      def copy_static_modal_controller
+        copy_file "static_modal_controller.js",
+          "app/javascript/controllers/static_modal_controller.js"
+      end
+
+      def copy_forked_modal_controller
+        copy_file "modal_controller.js",
+          "app/javascript/controllers/modal_controller.js"
+      end
+
+      def update_controllers_index
+        index_path = Rails.root.join("app", "javascript", "controllers", "index.js")
+
+        unless File.exist?(index_path)
+          say_manual_snippet(index_path)
+          return
+        end
+
+        content = File.read(index_path)
+
+        # Add static-modal import + registration
+        static_import = "import StaticModalController from \"./static_modal_controller\"\n"
+        static_register = "application.register(\"static-modal\", StaticModalController)\n"
+
+        if content.include?("StaticModalController")
+          say "⏩ static-modal controller already registered.", :blue
+        else
+          if content.match?(/import .* from ["'](?:@hotwired\/stimulus|\.\/application)["']\n/)
+            insert_into_file index_path.to_s, static_import,
+              after: /import .* from ["'](?:@hotwired\/stimulus|\.\/application)["']\n/
+          else
+            prepend_to_file index_path.to_s, static_import
+          end
+          append_to_file index_path.to_s, static_register
+          say "✅ Registered `static-modal` Stimulus controller.", :green
+        end
+
+        # Re-read after static-modal insert
+        content = File.read(index_path)
+
+        # Swap UTMR's modal registration for our forked controller
+        utmr_pattern = /import\s*\{\s*UltimateTurboModalController\s*\}\s*from\s*["']ultimate_turbo_modal["']\s*\n\s*application\.register\(\s*["']modal["']\s*,\s*UltimateTurboModalController\s*\)\s*\n/
+
+        fork_block = <<~JS
+          import ModalController from "./modal_controller"
+          // Side-effect import: turbo:frame-missing / before-frame-render / before-cache handlers
+          import "ultimate_turbo_modal"
+          application.register("modal", ModalController)
+        JS
+
+        if content.include?('import ModalController from "./modal_controller"')
+          say "⏩ Forked modal controller already registered.", :blue
+        elsif content.match?(utmr_pattern)
+          gsub_file index_path.to_s, utmr_pattern, fork_block
+          say "✅ Swapped UTMR modal registration for the forked null-safe controller (UTMR npm package still imported for side-effects).", :green
+        else
+          say "⚠️  Could not find UTMR's modal registration to swap.", :yellow
+          say "   Add these lines to controllers/index.js manually, replacing any existing UTMR modal registration:", :yellow
+          fork_block.each_line { |line| say "   #{line.rstrip}", :cyan }
+        end
+      end
+
+      def show_readme
+        say "\nUltimateStaticModal installation complete!", :magenta
+        say "Rebuild your JS bundle and restart Rails.", :yellow
+      end
+
+      private
+
+      def say_manual_snippet(index_path)
+        say "\n❌ Could not find #{index_path}.", :red
+        say "   Register the controllers manually in your Stimulus setup.", :yellow
+      end
+    end
+  end
+end

data/lib/generators/ultimate_static_modal/templates/modal_controller.js

@@ -0,0 +1,302 @@
+// Forked from ultimate_turbo_modal's modal_controller.js.
+//
+// The only substantive change is that event dispatch now falls back to
+// `this.element` when no ancestor <turbo-frame> is present, so the controller
+// works for dialogs that are not rendered inside a Turbo Frame (e.g., static
+// modals cloned from a <template>). Without this fallback, `hideModal`
+// throws the first time and the `hidingModal` guard traps subsequent clicks.
+//
+// The version-mismatch console warning from UTMR is also removed here — our
+// fork has its own version that won't match UTMR's, so the warning would
+// fire on every open.
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container", "content"]
+  static values = {
+    advanceUrl: String,
+    allowedClickOutsideSelector: String
+  }
+
+  connect() {
+    this.#cleanupStaleDialogs();
+    this.turboFrame = this.element.closest('turbo-frame');
+    this.hidingModal = this.containerTarget.hasAttribute('data-closing');
+    this.originalUrl = window.location.href;
+
+    if (this.hidingModal) {
+      this.#resumeClosing();
+    } else if (!this.containerTarget.open) {
+      this.showModal();
+    }
+
+    this.popstateHandler = () => {
+      if (this.#hasHistoryAdvanced()) {
+        this.#resetHistoryAdvanced();
+        this.#immediateCleanup();
+      }
+    };
+    window.addEventListener('popstate', this.popstateHandler);
+
+    this.beforeCacheHandler = () => {
+      this.containerTarget.remove();
+    };
+    document.addEventListener('turbo:before-cache', this.beforeCacheHandler);
+
+    window.modal = this;
+  }
+
+  disconnect() {
+    this.#cancelEnter();
+    this.#cancelResumeClosing();
+    this.#cancelCloseCleanup();
+    window.removeEventListener('popstate', this.popstateHandler);
+    document.removeEventListener('turbo:before-cache', this.beforeCacheHandler);
+    window.modal = undefined;
+  }
+
+  showModal() {
+    this.containerTarget.removeAttribute('data-closing');
+    this.containerTarget.removeAttribute('data-enter-ready');
+    this.containerTarget.removeAttribute('data-entered');
+    if (this.containerTarget.open) this.containerTarget.close();
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    this.containerTarget.showModal();
+    window.scrollTo(scrollX, scrollY);
+    this.#queueEnter();
+
+    if (this.advanceUrlValue && !this.#hasHistoryAdvanced()) {
+      this.#setHistoryAdvanced();
+      history.pushState({}, "", this.advanceUrlValue);
+    }
+  }
+
+  hideModal({ skipHistoryBack = false } = {}) {
+    if (this.hidingModal) return false
+    this.hidingModal = true;
+
+    let event = new Event('modal:closing', { cancelable: true });
+    this.#eventTarget().dispatchEvent(event);
+    if (event.defaultPrevented) {
+      this.hidingModal = false;
+      return false
+    }
+
+    this._skipHistoryBack = skipHistoryBack;
+    this.#resetModalElement();
+  }
+
+  hideModalWithPromise(options = {}) {
+    return new Promise((resolve) => {
+      const target = this.#eventTarget();
+      const handler = () => {
+        target.removeEventListener('modal:closed', handler);
+        resolve();
+      };
+      target.addEventListener('modal:closed', handler);
+      if (this.hideModal(options) === false) {
+        target.removeEventListener('modal:closed', handler);
+        resolve();
+      }
+    });
+  }
+
+  hide() { this.hideModal(); }
+  close() { this.hideModal(); }
+
+  refreshPage() {
+    window.Turbo.visit(window.location.href, { action: "replace" });
+  }
+
+  submitEnd(e) {
+    if (e.detail.success) {
+      const response = e.detail.fetchResponse?.response;
+      if (response?.redirected) {
+        // With a <turbo-frame> ancestor, UTMR's turbo:frame-missing handler
+        // consumes this URL and performs the smooth redirect. Without one,
+        // that handler never fires — close the modal and navigate directly.
+        if (!this.turboFrame) {
+          this.hideModalWithPromise({ skipHistoryBack: true }).then(() => {
+            window.Turbo.visit(response.url);
+          });
+          return;
+        }
+        this._pendingRedirectUrl = response.url;
+        return;
+      }
+      this.hideModal();
+    }
+  }
+
+  cancelEvent(e) {
+    e.preventDefault();
+    this.hideModal();
+  }
+
+  dialogClicked(e) {
+    if (!this.hasContentTarget) return;
+    if (this.contentTarget.contains(e.target)) return;
+    if (this.#isAllowedOutsideClick(e.target)) return;
+    this.hideModal();
+  }
+
+  #eventTarget() {
+    return this.turboFrame ?? this.element;
+  }
+
+  #isAllowedOutsideClick(target) {
+    if (!this.allowedClickOutsideSelectorValue) return false;
+    return target.closest(this.allowedClickOutsideSelectorValue) !== null;
+  }
+
+  #resetModalElement() {
+    const historyWasAdvanced = this.#hasHistoryAdvanced();
+    this.containerTarget.dataset.utmrHistoryAdvanced = String(historyWasAdvanced);
+    this.containerTarget.dataset.utmrSkipHistoryBack = String(!!this._skipHistoryBack);
+    this.#applyClosingState();
+    this.#queueCloseCleanup(historyWasAdvanced);
+  }
+
+  #resumeClosing() {
+    const historyWasAdvanced = this.containerTarget.dataset.utmrHistoryAdvanced == 'true';
+    this._skipHistoryBack = this.containerTarget.dataset.utmrSkipHistoryBack == 'true';
+
+    this.containerTarget.removeAttribute('data-closing');
+    this.containerTarget.setAttribute('data-enter-ready', '');
+    this.containerTarget.setAttribute('data-entered', '');
+    this.#cancelResumeClosing();
+
+    this.closeFrames = [];
+    const outerFrame = requestAnimationFrame(() => {
+      if (!this.containerTarget.isConnected) return;
+
+      const innerFrame = requestAnimationFrame(() => {
+        if (!this.containerTarget.isConnected) return;
+        this.#applyClosingState();
+        this.closeFrames = null;
+        this.#queueCloseCleanup(historyWasAdvanced);
+      });
+      this.closeFrames?.push(innerFrame);
+    });
+    this.closeFrames.push(outerFrame);
+  }
+
+  #applyClosingState() {
+    this.containerTarget.setAttribute('data-closing', '');
+    this.containerTarget.setAttribute('data-enter-ready', '');
+    this.containerTarget.removeAttribute('data-entered');
+    this.#cancelEnter();
+  }
+
+  #queueCloseCleanup(historyWasAdvanced) {
+    const dialog = this.containerTarget;
+    const transitionTarget = this.#isDrawer()
+      ? dialog.querySelector('#drawer-panel')
+      : dialog.querySelector('#modal-inner');
+    const closeTimeoutMs = this.#isDrawer() ? 750 : 300;
+    this.#cancelCloseCleanup();
+
+    let cleaned = false;
+    const cleanup = () => {
+      if (cleaned) return;
+      cleaned = true;
+      this.#cancelCloseCleanup();
+      window.removeEventListener('popstate', this.popstateHandler);
+      const target = this.#eventTarget();
+      try { dialog.close(); } catch (_) {}
+      try { target.removeAttribute("src"); } catch (_) {}
+      try { dialog.remove(); } catch (_) {}
+      delete dialog.dataset.utmrHistoryAdvanced;
+      delete dialog.dataset.utmrSkipHistoryBack;
+      this.#resetHistoryAdvanced();
+      try { target.dispatchEvent(new Event('modal:closed', { cancelable: false })); } catch (_) {}
+
+      if (historyWasAdvanced && !this._skipHistoryBack) history.back();
+    };
+
+    const onTransitionEnd = (e) => {
+      if (e.target === transitionTarget) cleanup();
+    };
+
+    this.closeTransitionHandler = onTransitionEnd;
+    dialog.addEventListener('transitionend', onTransitionEnd);
+    this.closeTimeout = setTimeout(cleanup, closeTimeoutMs);
+  }
+
+  #immediateCleanup() {
+    this.#cancelEnter();
+    this.#cancelResumeClosing();
+    this.#cancelCloseCleanup();
+    const dialog = this.containerTarget;
+    const target = this.#eventTarget();
+    try { dialog.close(); } catch (_) {}
+    try { target.removeAttribute("src"); } catch (_) {}
+    try { dialog.remove(); } catch (_) {}
+    try { target.dispatchEvent(new Event('modal:closed', { cancelable: false })); } catch (_) {}
+  }
+
+  #cleanupStaleDialogs() {
+    document.querySelectorAll('dialog#modal-container').forEach(d => {
+      if (d !== this.containerTarget) {
+        try { d.close(); } catch (_) {}
+        d.remove();
+      }
+    });
+  }
+
+  #isDrawer() {
+    return this.containerTarget.dataset.drawer !== undefined
+  }
+
+  #queueEnter() {
+    this.#cancelEnter();
+
+    this.enterFrames = [];
+    const outerFrame = requestAnimationFrame(() => {
+      if (!this.containerTarget.isConnected || this.containerTarget.hasAttribute('data-closing')) return;
+      this.containerTarget.setAttribute('data-enter-ready', '');
+
+      const innerFrame = requestAnimationFrame(() => {
+        if (!this.containerTarget.isConnected || this.containerTarget.hasAttribute('data-closing')) return;
+        this.containerTarget.setAttribute('data-entered', '');
+        this.enterFrames = null;
+      });
+      this.enterFrames?.push(innerFrame);
+    });
+    this.enterFrames.push(outerFrame);
+  }
+
+  #cancelEnter() {
+    if (!this.enterFrames) return;
+    this.enterFrames.forEach(id => cancelAnimationFrame(id));
+    this.enterFrames = null;
+  }
+
+  #cancelResumeClosing() {
+    if (!this.closeFrames) return;
+    this.closeFrames.forEach(id => cancelAnimationFrame(id));
+    this.closeFrames = null;
+  }
+
+  #cancelCloseCleanup() {
+    clearTimeout(this.closeTimeout);
+    this.closeTimeout = null;
+
+    if (!this.closeTransitionHandler) return;
+    this.containerTarget.removeEventListener('transitionend', this.closeTransitionHandler);
+    this.closeTransitionHandler = null;
+  }
+
+  #hasHistoryAdvanced() {
+    return document.body.getAttribute("data-turbo-modal-history-advanced") == "true"
+  }
+
+  #setHistoryAdvanced() {
+    return document.body.setAttribute("data-turbo-modal-history-advanced", "true")
+  }
+
+  #resetHistoryAdvanced() {
+    document.body.removeAttribute("data-turbo-modal-history-advanced");
+  }
+}

data/lib/generators/ultimate_static_modal/templates/static_modal_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Clones the <template> referenced by data-static-modal-id-value into
+// document.body. UTMR's "modal" Stimulus controller takes over once the
+// cloned <dialog> is attached and animates the modal/drawer into view.
+export default class extends Controller {
+  static values = { id: String }
+
+  open() {
+    const template = document.getElementById(this.idValue)
+    if (!template) {
+      console.warn(`[static-modal] No <template> found with id="${this.idValue}"`)
+      return
+    }
+    document.body.appendChild(template.content.cloneNode(true))
+  }
+}

data/lib/ultimate_static_modal/helpers/view_helper.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module UltimateStaticModal
+  module Helpers
+    module ViewHelper
+      def static_modal(**opts, &block)
+        render(UltimateStaticModal.new(**opts), &block)
+      end
+
+      def static_drawer(position: nil, size: nil, **options, &block)
+        cfg = UltimateTurboModal.configuration.drawer_config
+        position = UltimateTurboModal::Base.validate_drawer_position!(position || cfg.position)
+        size = UltimateTurboModal::Base.validate_drawer_size!(size || cfg.size)
+        static_modal(drawer_position: position, size: size, **options, &block)
+      end
+
+      def static_modal_template(id, **opts, &block)
+        content_tag(:template, id: id) { static_modal(**opts, &block) }
+      end
+
+      def static_drawer_template(id, **opts, &block)
+        content_tag(:template, id: id) { static_drawer(**opts, &block) }
+      end
+
+      def static_modal_trigger(template_id, **button_opts, &block)
+        data = button_opts.delete(:data) || {}
+        data = data.merge(
+          controller: [data[:controller], "static-modal"].compact.join(" "),
+          static_modal_id_value: template_id,
+          action: [data[:action], "click->static-modal#open"].compact.join(" ")
+        )
+
+        button_opts = {type: "button"}.merge(button_opts).merge(data: data)
+        button_tag(button_opts, &block)
+      end
+    end
+  end
+end

data/lib/ultimate_static_modal/railtie.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "rails/railtie"
+require_relative "helpers/view_helper"
+
+module UltimateStaticModal
+  class Railtie < Rails::Railtie
+    initializer "ultimate_static_modal.action_view" do
+      ActiveSupport.on_load(:action_view) do
+        include UltimateStaticModal::Helpers::ViewHelper
+      end
+    end
+  end
+end

data/lib/ultimate_static_modal/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module UltimateStaticModal
+  VERSION = File.read(File.expand_path("../../VERSION", __dir__)).strip
+end

data/lib/ultimate_static_modal.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "ultimate_turbo_modal"
+require_relative "ultimate_static_modal/version"
+require_relative "ultimate_static_modal/railtie" if defined?(Rails::Railtie)
+
+module UltimateStaticModal
+  extend self
+
+  class Error < StandardError; end
+
+  def new(**opts)
+    static_modal_class.new(**opts)
+  end
+
+  def static_modal_class
+    flavor_class = UltimateTurboModal.modal_class
+    static_subclasses[flavor_class] ||= build_static_subclass(flavor_class)
+  end
+
+  private
+
+  def static_subclasses
+    @static_subclasses ||= {}
+  end
+
+  def build_static_subclass(flavor_class)
+    Class.new(flavor_class) do
+      def view_template(&block)
+        drawer? ? render_drawer(&block) : render_modal(&block)
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,71 @@
+--- !ruby/object:Gem::Specification
+name: ultimate_static_modal
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Raghu Betina
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: ultimate_turbo_modal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: View helpers and Stimulus controllers for rendering ultimate_turbo_modal's
+  <dialog> chrome on content that is not loaded via a Turbo Frame. Reuses UTMR's flavor
+  classes; ships a small null-safe fork of UTMR's modal controller via an install
+  generator.
+email:
+- raghu@firstdraft.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- VERSION
+- lib/generators/ultimate_static_modal/install_generator.rb
+- lib/generators/ultimate_static_modal/templates/modal_controller.js
+- lib/generators/ultimate_static_modal/templates/static_modal_controller.js
+- lib/ultimate_static_modal.rb
+- lib/ultimate_static_modal/helpers/view_helper.rb
+- lib/ultimate_static_modal/railtie.rb
+- lib/ultimate_static_modal/version.rb
+homepage: https://github.com/firstdraft/ultimate_static_modal
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/firstdraft/ultimate_static_modal
+  source_code_uri: https://github.com/firstdraft/ultimate_static_modal
+  changelog_uri: https://github.com/firstdraft/ultimate_static_modal/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.2'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.3
+specification_version: 4
+summary: Static-content companion to ultimate_turbo_modal.
+test_files: []