katalyst-kpop 3.4.0 → 4.0.0.beta.1

data/app/assets/builds/katalyst/kpop.js

@@ -1,135 +1,153 @@
 import { Controller } from '@hotwired/stimulus';
 import { Turbo as Turbo$1 } from '@hotwired/turbo-rails';
 
-class Modal {
-  constructor(id) {
-    this.id = id;
-  }
+let enabled = false;
 
-  async open() {
-    this.debug("open");
+const debug = function (receiver) {
+  if (enabled) {
+    return console.debug.bind(console, "[%s] %s", receiver);
+  } else {
+    return noop;
   }
+};
 
-  async dismiss() {
-    this.debug(`dismiss`);
-  }
+const noop = () => {};
 
-  beforeVisit(frame, e) {
-    this.debug(`before-visit`, e.detail.url);
-  }
+Object.defineProperty(debug, "enabled", {
+  get: function () {
+    return enabled;
+  },
+  set: function (debug) {
+    enabled = debug;
+  },
+});
 
-  popstate(frame, e) {
-    this.debug(`popstate`, e.state);
+class Modal {
+  constructor(frame, dialog, src = null) {
+    this.frame = frame;
+    this.element = dialog;
+    this.uri = new URL(src || dialog.dataset.src, window.location.origin);
   }
 
-  async pop(event, callback) {
-    this.debug(`pop`);
-
-    const promise = new Promise((resolve) => {
-      window.addEventListener(
-        event,
-        () => {
-          resolve();
-        },
-        { once: true },
-      );
-    });
-
-    callback();
-
-    return promise;
+  connect() {
+    this.element.addEventListener("cancel", this.cancel);
+    this.element.addEventListener("close", this.close);
+    this.element.addEventListener("mousedown", this.scrim);
   }
 
-  get frameElement() {
-    return document.getElementById(this.id);
+  disconnect() {
+    this.element.removeEventListener("cancel", this.cancel);
+    this.element.removeEventListener("close", this.close);
+    this.element.removeEventListener("mousedown", this.scrim);
   }
 
-  get controller() {
-    return this.frameElement?.kpop;
+  get src() {
+    return this.uri.pathname + this.uri.search + this.uri.hash;
   }
 
-  get modalElement() {
-    return this.frameElement?.querySelector("[data-controller*='kpop--modal']");
-  }
+  cancel = (e) => {
+    this.debug("event:cancel", e);
 
-  get currentLocationValue() {
-    return this.modalElement?.dataset["kpop-ModalCurrentLocationValue"] || "/";
-  }
+    e.preventDefault();
 
-  get fallbackLocationValue() {
-    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"];
-  }
+    this.frame.dismiss({ animate: true, reason: "dialog:cancel" });
+  };
 
-  get isCurrentLocation() {
-    return (
-      window.history.state?.turbo && Turbo$1.session.location.href === this.src
-    );
-  }
+  close = (e) => {
+    this.debug("event:close", e);
 
-  static debug(event, ...args) {
-  }
+    this.frame.clear({ reason: "dialog:close" });
+  };
 
-  debug(event, ...args) {
-  }
-}
+  scrim = (e) => {
+    if (e.target.tagName === "DIALOG") {
+      this.debug("event:scrim", e);
 
-class ContentModal extends Modal {
-  static connect(frame, element) {
-    frame.open(new ContentModal(element.id), { animate: false });
-  }
+      this.frame.dismiss({ animate: true, reason: "dialog:scrim" });
+    }
+  };
 
-  constructor(id, src = null) {
-    super(id);
+  async open({ animate = true } = {}) {
+    this.debug("open-start", animate);
 
-    if (src) this.src = src;
+    await animation(this.element, animate, () => this.element.showModal());
+
+    this.debug("open-end");
   }
 
   /**
-   * When the modal is dismissed we can't rely on a back navigation to close the
-   * modal as the user may have navigated to a different location. Instead we
-   * remove the content from the dom and replace the current history state with
-   * the fallback location, if set.
-   *
-   * If there is no fallback location, we may be showing a stream modal that was
-   * injected and cached by turbo. In this case, we clear the frame element and
-   * do not change history.
+   * Modals are closed by animating out the modal then removing the modal
+   * element from the wrapping frame.
    *
    * @returns {Promise<void>}
    */
-  async dismiss() {
-    const fallbackLocation = this.fallbackLocationValue;
-
-    await super.dismiss();
+  async dismiss({ animate = true } = {}) {
+    this.debug("dismiss-start", animate);
 
-    if (this.visitStarted) {
-      this.debug("skipping dismiss, visit started");
-      return;
-    }
-    if (!this.isCurrentLocation) {
-      this.debug("skipping dismiss, not current location");
-      return;
-    }
+    await animation(this.element, animate, () =>
+      this.element.removeAttribute("open"),
+    );
 
-    this.frameElement.innerHTML = "";
+    this.debug("dismiss-end");
 
-    if (fallbackLocation) {
-      window.history.replaceState(window.history.state, "", fallbackLocation);
-    }
+    this.element.close();
   }
 
+  /**
+   * When user navigates from inside a modal, dismiss the modal first so
+   * that the modal does not appear in the history stack.
+   *
+   * @param frame FrameController
+   * @param e Turbo navigation event
+   */
   beforeVisit(frame, e) {
-    super.beforeVisit(frame, e);
+    this.debug(`before-visit`, e.detail.url);
 
-    this.visitStarted = true;
+    this.frame.clear();
+  }
 
-    frame.scrimOutlet.hide({ animate: false });
+  static get debug() {
+    return debug(this.name);
   }
 
-  get src() {
-    return new URL(
-      this.currentLocationValue.toString(),
-      document.baseURI,
-    ).toString();
+  get debug() {
+    return debug(this.constructor.name);
+  }
+}
+
+function animation(el, animate, trigger) {
+  if (!animate) return trigger();
+
+  const duration = animationDuration(el);
+
+  return new Promise((resolve) => {
+    const resolver = () => {
+      el.removeEventListener("animationend", resolver, { once: true });
+      clearTimeout(timeout);
+      el.toggleAttribute("animate", false);
+      resolve();
+    };
+
+    el.addEventListener("animationend", resolver, { once: true });
+    const timeout = setTimeout(resolver, duration);
+
+    el.toggleAttribute("animate", animate);
+    trigger();
+  });
+}
+
+function animationDuration(el, defaultValue = "0.2s") {
+  const value =
+    getComputedStyle(el).getPropertyValue("--animation-duration") ||
+    defaultValue;
+  const num = parseFloat(value);
+  if (value.endsWith("ms")) return num;
+  return num * 1000;
+}
+
+class ContentModal extends Modal {
+  static connect(frame, dialog) {
+    frame.open(new ContentModal(frame, dialog), { animate: false });
   }
 }
 
@@ -138,25 +156,27 @@ class FrameModal extends Modal {
    * When the FrameController detects a frame element on connect, it runs this
    * method to sanity check the frame src and restore the modal state.
    *
-   * @param frame FrameController
-   * @param element TurboFrame element
+   * @param {Kpop__FrameController} frame
+   * @param {HTMLDialogElement} dialog
+   * @param {String} src
    */
-  static connect(frame, element) {
-    const modal = new FrameModal(element.id, element.src);
-
-    // state reconciliation for turbo restore of invalid frames
-    if (modal.isCurrentLocation) {
-      // restoration visit
-      this.debug("restore", element.src);
-      return frame.open(modal, { animate: false });
-    } else {
-      console.warn(
-        "kpop: restored frame src doesn't match window href",
-        modal.src,
-        window.location.href,
-      );
-      return frame.clear();
-    }
+  static connect(frame, dialog, src) {
+    // restoration visit
+    this.debug("restore", src);
+    return frame.open(new FrameModal(frame, dialog, src), { animate: false });
+  }
+
+  /**
+   * When the FrameController detects a frame load event, it runs this
+   * method to open the modal.
+   *
+   * @param {Kpop__FrameController} frame
+   * @param {HTMLDialogElement} dialog
+   * @param {String} src
+   */
+  static load(frame, dialog, src) {
+    this.debug("load", src);
+    return frame.open(new FrameModal(frame, dialog, src), { animate: true });
   }
 
   /**
@@ -179,71 +199,12 @@ class FrameModal extends Modal {
       element.src = "";
     }
 
-    if (element.src === location) {
-      this.debug("skipping navigate as already on location");
-      return;
-    }
-
-    if (element.src && element.src !== window.location.href) {
-      console.warn(
-        "kpop: frame src doesn't match window",
-        element.src,
-        window.location.href,
-        location,
-      );
-      frame.clear();
-    }
-
     this.debug("navigate to", location);
     resolve();
   }
-
-  constructor(id, src) {
-    super(id);
-    this.src = src;
-  }
-
-  /**
-   * FrameModals are closed by running pop state and awaiting the turbo:load
-   * event that follows on history restoration.
-   *
-   * @returns {Promise<void>}
-   */
-  async dismiss() {
-    await super.dismiss();
-
-    if (!this.isCurrentLocation) {
-      this.debug("skipping dismiss, not current location");
-    } else {
-      await this.pop("turbo:load", () => window.history.back());
-    }
-
-    // no specific close action required, this is turbo's responsibility
-  }
-
-  /**
-   * When user navigates from inside a Frame modal, dismiss the modal first so
-   * that the modal does not appear in the history stack.
-   *
-   * @param frame FrameController
-   * @param e Turbo navigation event
-   */
-  beforeVisit(frame, e) {
-    super.beforeVisit(frame, e);
-
-    e.preventDefault();
-
-    frame.dismiss({ animate: false }).then(() => {
-      Turbo$1.visit(e.detail.url);
-
-      this.debug("before-visit-end");
-    });
-  }
 }
 
 class Kpop__FrameController extends Controller {
-  static outlets = ["scrim"];
-  static targets = ["modal"];
   static values = {
     open: Boolean,
   };
@@ -256,12 +217,14 @@ class Kpop__FrameController extends Controller {
     // allow our code to intercept frame navigation requests before dom changes
     installNavigationInterception(this);
 
-    if (this.element.src && this.element.complete) {
+    const dialog = this.element.querySelector("dialog");
+
+    if (this.element.src && dialog) {
       this.debug("new frame modal", this.element.src);
-      FrameModal.connect(this, this.element);
-    } else if (this.modalElements.length > 0) {
-      this.debug("new content modal", window.location.pathname);
-      ContentModal.connect(this, this.element);
+      FrameModal.connect(this, dialog, this.element.src).then(() => {});
+    } else if (dialog) {
+      this.debug("new content modal", dialog);
+      ContentModal.connect(this, dialog);
     } else {
       this.debug("no modal");
       this.clear();
@@ -275,24 +238,18 @@ class Kpop__FrameController extends Controller {
     delete this.modal;
   }
 
-  scrimOutletConnected(scrim) {
-    this.debug("scrim-connected");
-
-    this.scrimConnected = true;
-
-    if (this.openValue) {
-      scrim.show({ animate: false });
-    } else {
-      scrim.hide({ animate: false });
-    }
-  }
-
   openValueChanged(open) {
     this.debug("open-changed", open);
-
-    this.element.parentElement.style.display = open ? "flex" : "none";
   }
 
+  /**
+   * Animate an attached modal into the foreground. Returns a promise that
+   * resolves when the animation is complete.
+   *
+   * @param modal
+   * @param animate
+   * @returns {Promise<Boolean>}
+   */
   async open(modal, { animate = true } = {}) {
     if (this.isOpen) {
       this.debug("skip open as already open");
@@ -302,12 +259,25 @@ class Kpop__FrameController extends Controller {
 
     await this.dismissing;
 
-    return (this.opening ||= this.#nextFrame(() =>
-      this.#open(modal, { animate }),
-    ));
+    return (this.opening ||= Promise.resolve().then(() => {
+      modal.connect();
+      return this.#open(modal, { animate });
+    }));
   }
 
+  /**
+   * Cause a modal to hide. Returns a promise that will resolve when the
+   * animation (if requested) is finished.
+   *
+   * If the modal is already animating out, returns the existing promise instead.
+   *
+   * @param {Boolean} animate
+   * @param {String} reason
+   * @returns {Promise}
+   */
   async dismiss({ animate = true, reason = "" } = {}) {
+    this.debug("event:dismiss", reason);
+
     if (!this.isOpen) {
       this.debug("skip dismiss as already closed");
       return false;
@@ -315,36 +285,30 @@ class Kpop__FrameController extends Controller {
 
     await this.opening;
 
-    return (this.dismissing ||= this.#nextFrame(() =>
-      this.#dismiss({ animate, reason }),
-    ));
+    return (this.dismissing ||= this.#dismiss({ animate, reason }));
   }
 
-  async clear() {
+  /**
+   * Clean up after a modal is finished dismissing.
+   */
+  clear({ reason = "" } = {}) {
+    this.debug("event:clear", reason);
+
     // clear the src from the frame (if any)
     this.element.src = "";
+    this.element.innerHTML = "";
 
-    // remove any open modal(s)
-    this.modalElements.forEach((element) => element.remove());
-
-    // mark the modal as hidden (will hide scrim on connect)
+    // mark the modal as hidden
     this.openValue = false;
 
-    // close the scrim, if connected
-    if (this.scrimConnected) {
-      return this.scrimOutlet.hide({ animate: false });
-    }
-
     // unset modal
-    this.modal = null;
+    if (this.modal) this.modal.disconnect();
+    delete this.modal;
+    delete this.dismissing;
   }
 
   // EVENTS
 
-  popstate(event) {
-    this.modal?.popstate(this, event);
-  }
-
   /**
    * Incoming frame render, dismiss the current modal (if any) first.
    *
@@ -388,53 +352,72 @@ class Kpop__FrameController extends Controller {
     // ignore visits to the current frame, these fire when the frame navigates
     if (e.detail.url === this.element.src) return;
 
+    const url = new URL(e.detail.url.toString(), document.baseURI);
+    if (url.pathname === "/resume_historical_location") {
+      e.preventDefault();
+      return this.dismiss();
+    }
+
     // ignore unless we're open
     if (!this.isOpen) return;
 
     this.modal.beforeVisit(this, e);
   }
 
-  frameLoad(event) {
+  frameLoad(e) {
     this.debug("frame-load");
 
-    const modal = new FrameModal(this.element.id, this.element.src);
-
-    window.addEventListener(
-      "turbo:visit",
-      (e) => {
-        this.open(modal, { animate: true });
-      },
-      { once: true },
+    FrameModal.load(this, e.target.firstElementChild, e.target.src).then(
+      () => {},
     );
   }
 
-  get isOpen() {
-    return this.openValue && !this.dismissing;
+  /**
+   * Outgoing fetch request. Capture the initiator so we can return focus if it causes a modal to show.
+   */
+  beforeFetchRequest() {
+    const focusElement = document.activeElement;
+
+    if (focusElement === document.body) {
+      delete this.lastFetchFocusRef;
+    } else {
+      this.lastFetchFocusRef = new WeakRef(focusElement);
+    }
   }
 
-  get modalElements() {
-    return this.element.querySelectorAll("[data-controller*='kpop--modal']");
+  get isOpen() {
+    return this.openValue && !this.dismissing;
   }
 
   async #open(modal, { animate = true } = {}) {
     this.debug("open-start", { animate });
 
-    const scrim = this.scrimConnected && this.scrimOutlet;
+    this.previousFocusRef =
+      document.activeElement === document.body
+        ? this.lastFetchFocusRef
+        : new WeakRef(document.activeElement);
+    this.debug("capture focus", this.previousFocusRef?.deref());
 
     this.modal = modal;
     this.openValue = true;
 
+    // Set turbo-frame[src] without causing a load event
+    this.element.delegate.sourceURL = this.modal.src;
+
     await modal.open({ animate });
-    await scrim?.show({ animate });
 
     delete this.opening;
 
     this.debug("open-end");
 
+    autofocus(this.modal?.element)?.focus();
+
     // Detect https://github.com/hotwired/turbo-rails/issues/580
     if (Turbo.session.view.forceReloaded) {
       console.error("Turbo-Frame response is incompatible with current page");
     }
+
+    return true;
   }
 
   async #dismiss({ animate = true, reason = "" } = {}) {
@@ -450,12 +433,13 @@ class Kpop__FrameController extends Controller {
       console.warn("modal missing on dismiss");
     }
 
-    await this.scrimOutlet.hide({ animate });
-    await this.modal?.dismiss();
+    await this.modal?.dismiss({ animate });
 
-    this.openValue = false;
-    this.modal = null;
-    delete this.dismissing;
+    this.clear();
+
+    this.previousFocusRef?.deref()?.focus();
+    this.debug("restore focus", this.previousFocusRef?.deref());
+    delete this.previousFocusRef;
 
     this.debug("dismiss-end");
   }
@@ -464,7 +448,8 @@ class Kpop__FrameController extends Controller {
     return new Promise(window.requestAnimationFrame).then(callback);
   }
 
-  debug(event, ...args) {
+  get debug() {
+    return debug("FrameController");
   }
 }
 
@@ -512,296 +497,317 @@ function installNavigationInterception(controller) {
   };
 }
 
-class Kpop__ModalController extends Controller {
-  static values = {
-    fallback_location: String,
-    layout: String,
-  };
-
-  connect() {
-    this.debug("connect");
+function autofocus(container) {
+  if (!container) return null;
 
-    if (this.layoutValue) {
-      document.querySelector("#kpop").classList.toggle(this.layoutValue, true);
-    }
-  }
-
-  disconnect() {
-    this.debug("disconnect");
-
-    if (this.layoutValue) {
-      document.querySelector("#kpop").classList.toggle(this.layoutValue, false);
-    }
-  }
-
-  debug(event, ...args) {
-  }
+  return (
+    container.querySelector("[autofocus]") ??
+    container.querySelector("button:not([disabled])")
+  );
 }
 
 /**
- * Scrim controller wraps an element that creates a whole page layer.
- * It is intended to be used behind a modal or nav drawer.
- *
- * If the Scrim element receives a click event, it automatically triggers "scrim:hide".
- *
- * You can show and hide the scrim programmatically by calling show/hide on the controller, e.g. using an outlet.
- *
- * If you need to respond to the scrim showing or hiding you should subscribe to "scrim:show" and "scrim:hide".
+ * Based on Turbo's LinkObserver, checks links on mouse-over and focus to see
+ * whether they should open in modals. If they should, then sets the
+ * data-turbo-frame attribute so it will be prefetched and opened in the context
+ * of the kpop turbo frame.
  */
-class ScrimController extends Controller {
-  static values = {
-    open: Boolean,
-    captive: Boolean,
-    zIndex: Number,
-  };
-
-  connect() {
+class LinkObserver {
+  started = false;
 
-    this.defaultZIndexValue = this.zIndexValue;
-    this.defaultCaptiveValue = this.captiveValue;
-
-    this.element.scrim = this;
+  constructor(delegate, eventTarget) {
+    this.delegate = delegate;
+    this.eventTarget = eventTarget;
   }
 
-  disconnect() {
+  start() {
+    if (this.started) return;
+    if (this.eventTarget.readyState === "loading") {
+      this.eventTarget.addEventListener("DOMContentLoaded", this.#enable, {
+        once: true,
+      });
+    } else {
+      this.#enable();
+    }
+  }
 
-    delete this.element.scrim;
+  stop() {
+    if (!this.started) return;
+    this.eventTarget.removeEventListener("mouseenter", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.removeEventListener(
+      "turbo:before-prefetch",
+      this.#addKpopLink,
+      {
+        capture: true,
+        passive: true,
+      },
+    );
+    this.eventTarget.removeEventListener("focusin", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.removeEventListener("mouseleave", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.removeEventListener("focusout", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.started = false;
   }
 
-  async show({
-    captive = this.defaultCaptiveValue,
-    zIndex = this.defaultZIndexValue,
-    top = window.scrollY,
-    animate = true,
-  } = {}) {
+  #enable = () => {
+    if (this.started) return;
+    this.started = true;
+    this.eventTarget.addEventListener("mouseenter", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.addEventListener("focusin", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.addEventListener(
+      "turbo:before-prefetch",
+      this.#addKpopLink,
+      {
+        capture: true,
+        passive: true,
+      },
+    );
+    this.eventTarget.addEventListener("mouseleave", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.addEventListener("focusout", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+  };
 
-    // hide the scrim before opening the new one if it's already open
-    if (this.openValue) {
-      await this.hide({ animate });
+  #addKpopLink = (event) => {
+    const target = event.target;
+    const isLink =
+      target.matches &&
+      target.matches(
+        "a[href]:not([target^=_]):not([download]):not([data-turbo-frame]",
+      );
+    if (isLink && this.#isPrefetchable(target)) {
+      const link = target;
+      const location = getLocationForLink(link);
+      if (this.delegate.isModalLink(link, location)) {
+        link.dataset.turboFrame = "kpop";
+      }
     }
+  };
 
-    // update internal state
-    this.openValue = true;
-
-    // notify listeners of pending request
-    this.dispatch("show", { bubbles: true });
-
-    // update state, perform style updates
-    this.#show(captive, zIndex, top);
-
-    if (animate) {
-      // animate opening
-      // this will trigger an animationEnd event via CSS that completes the open
-      this.element.dataset.showAnimating = "";
-
-      await new Promise((resolve) => {
-        this.element.addEventListener("animationend", () => resolve(), {
-          once: true,
-        });
-      });
-
-      delete this.element.dataset.showAnimating;
+  #removeKpopLink = (event) => {
+    const target = event.target;
+    const isLink =
+      target.matches && target.matches("a[href][data-turbo-frame='kpop']");
+    if (isLink) {
+      delete target.dataset.turboFrame;
     }
-  }
-
-  async hide({ animate = true } = {}) {
-    if (!this.openValue || this.element.dataset.hideAnimating) return;
+  };
 
-    // notify listeners of pending request
-    this.dispatch("hide", { bubbles: true });
+  #isPrefetchable(link) {
+    const href = link.getAttribute("href");
+    if (!href) return false;
+    if (unfetchableLink(link)) return false;
+    if (linkToTheSamePage(link)) return false;
+    if (linkOptsOut(link)) return false;
+    if (nonSafeLink(link)) return false;
+    return true;
+  }
+}
 
-    if (animate) {
-      // set animation state
-      // this will trigger an animationEnd event via CSS that completes the hide
-      this.element.dataset.hideAnimating = "";
+function getLocationForLink(link) {
+  return new URL(link.getAttribute("href").toString(), document.baseURI);
+}
 
-      await new Promise((resolve) => {
-        this.element.addEventListener("animationend", () => resolve(), {
-          once: true,
-        });
-      });
+const unfetchableLink = (link) =>
+  link.origin !== document.location.origin ||
+  !["http:", "https:"].includes(link.protocol) ||
+  link.hasAttribute("target");
 
-      delete this.element.dataset.hideAnimating;
-    }
+const linkToTheSamePage = (link) =>
+  link.pathname + link.search ===
+    document.location.pathname + document.location.search ||
+  link.href.startsWith("#");
 
-    this.#hide();
+const linkOptsOut = (link) => {
+  return link.getAttribute("data-turbo") === "false";
+};
 
-    this.openValue = false;
-  }
+const nonSafeLink = (link) => {
+  const turboMethod = link.getAttribute("data-turbo-method");
+  if (turboMethod && turboMethod.toLowerCase() !== "get") return true;
+  if (isUJS(link)) return true;
+  if (link.hasAttribute("data-turbo-confirm")) return true;
+  if (link.hasAttribute("data-turbo-stream")) return true;
+  return false;
+};
 
-  dismiss(event) {
+const isUJS = (link) =>
+  link.hasAttribute("data-remote") ||
+  link.hasAttribute("data-behavior") ||
+  link.hasAttribute("data-confirm") ||
+  link.hasAttribute("data-method");
 
-    if (!this.captiveValue) this.dispatch("dismiss", { bubbles: true });
-  }
+/**
+ * Similar to Hotwire's PathConfiguration.json, this class compiles a list of
+ * rules to check link hrefs against so that we can identify links that
+ * should open in a KPOP modal.
+ *
+ * Unlike Hotwire Native, we can't intercept 303s in the browser before they
+ * load. Browser sandbox prevents us from inspecting the location of redirect
+ * requests so we can only intercept links that match modals directly.
+ *
+ * For posts and redirects, we need server support (flash modals, streams).
+ */
+class Ruleset {
+  constructor(rules = []) {
+    this.rules = [];
 
-  escape(event) {
-    if (
-      event.key === "Escape" &&
-      !this.captiveValue &&
-      !event.defaultPrevented
-    ) {
-      this.dispatch("dismiss", { bubbles: true });
-    }
+    rules.forEach((rule) => {
+      this.#compileRule(rule);
+    });
   }
 
   /**
-   * Clips body to viewport size and sets the z-index
+   * Returns properties for the given URL
+   *
+   * @param {URL} location
+   * @returns {} properties
    */
-  #show(captive, zIndex, top) {
-    this.captiveValue = captive;
-    this.zIndexValue = zIndex;
-    this.scrollY = top;
-
-    this.element.style.zIndex = this.zIndexValue;
-    document.body.style.top = `-${top}px`;
-    document.body.style.position = "fixed";
-    document.body.style.paddingRight = `-${this.scrollPadding}px`;
-
-    if (document.body.scrollHeight > window.innerHeight) {
-      document.body.style.overflowY = "scroll";
-    }
+  properties(location) {
+    return this.rules.reduce((c, f) => f(location, c), {});
   }
 
+  #compileRule({ patterns, properties }) {
+    patterns.forEach((pattern) => {
+      this.rules.push(locationMatcher(new RegExp(pattern), properties));
+    });
+  }
+}
+
+function locationMatcher(re, properties) {
+  return (location, accumulator) =>
+    re.test(location.pathname)
+      ? { ...accumulator, ...properties }
+      : accumulator;
+}
+
+class StreamModal extends Modal {
   /**
-   * Unclips body from viewport size and unsets the z-index
+   * When a turbo-stream[action=kpop_open] element is rendered, it runs this
+   * method to load the modal template as a StreamModal.
+   *
+   * @param {Kpop__FrameController} frame
+   * @param {Turbo.StreamElement} action
    */
-  #hide() {
-    this.captiveValue = this.defaultCaptiveValue;
-    this.zIndexValue = this.defaultZIndexValue;
+  static async open(frame, action) {
+    const animate = !frame.isOpen;
+
+    await frame.dismiss({ animate, reason: "turbo-stream.kpop_open" });
 
-    this.element.style.removeProperty("z-index");
-    document.body.style.removeProperty("position");
-    document.body.style.removeProperty("top");
-    document.body.style.removeProperty("overflow-y");
+    frame.element.append(action.templateContent);
 
-    window.scrollTo({ left: 0, top: this.scrollY, behavior: "instant" });
+    const dialog = frame.element.querySelector("dialog");
+    const src = dialog.dataset.src;
 
-    delete this.scrollY;
+    await frame.open(new StreamModal(frame, dialog, src), { animate });
   }
 }
 
-class StreamModal extends Modal {
-  constructor(id, action) {
-    super(id);
+class StreamActions {
+  start() {
+    Turbo$1.StreamActions.kpop_open = openStreamModal;
+  }
 
-    this.action = action;
+  stop() {
+    delete Turbo$1.StreamActions.kpop_open;
   }
+}
 
-  /**
-   * When the modal opens, push a state event for the current location so that
-   * the user can dismiss the modal by navigating back.
-   *
-   * @returns {Promise<void>}
-   */
-  async open() {
-    await super.open();
+function openStreamModal() {
+  const frame = this.targetElements[0]?.kpop;
 
-    window.history.pushState({ kpop: true, id: this.id }, "", window.location);
+  if (frame) {
+    StreamModal.open(frame, this).then(() => {});
   }
+}
 
-  /**
-   * On dismiss, pop the state event that was pushed when the modal opened,
-   * then clear any modals from the turbo frame element.
-   *
-   * @returns {Promise<void>}
-   */
-  async dismiss() {
-    await super.dismiss();
+const controllers = [
+  { identifier: "kpop--frame", controllerConstructor: Kpop__FrameController },
+];
 
-    if (this.isCurrentLocation) {
-      await this.pop("popstate", () => window.history.back());
-    }
+class Application {
+  static configure(config = {}) {
+    this.instance ||= new this(config);
+    debug.enabled = this.instance.debug;
+    return this.instance;
+  }
 
-    this.frameElement.innerHTML = "";
+  constructor({ rules = [], debug = false } = {}) {
+    this.config = { rules, debug };
+    this.ruleset = new Ruleset(rules);
+    this.linkObserver = new LinkObserver(this, document);
+    this.streamActions = new StreamActions();
   }
 
-  /**
-   * On navigation from inside the modal, dismiss the modal first so that the
-   * modal does not appear in the history stack.
-   *
-   * @param frame TurboFrame element
-   * @param e Turbo navigation event
-   */
-  beforeVisit(frame, e) {
-    super.beforeVisit(frame, e);
+  start() {
+    this.streamActions.start();
+    this.linkObserver.start();
 
-    e.preventDefault();
+    window.addEventListener(
+      "turbo:before-fetch-request",
+      addKpopToRequestHeaders,
+    );
 
-    frame.dismiss({ animate: false }).then(() => {
-      Turbo$1.visit(e.detail.url);
+    if (this.debug) {
+      document.addEventListener("focusin", debugFocusIn);
+      document.addEventListener("focusout", debugFocusOut);
+    }
 
-      this.debug("before-visit-end");
-    });
+    return this;
   }
 
-  /**
-   * If the user pops state, dismiss the modal.
-   *
-   * @param frame FrameController
-   * @param e history event
-   */
-  popstate(frame, e) {
-    super.popstate(frame, e);
+  stop() {
+    window.removeEventListener(
+      "turbo:before-fetch-request",
+      addKpopToRequestHeaders,
+    );
+    document.removeEventListener("focusin", debugFocusIn);
+    document.removeEventListener("focusout", debugFocusOut);
 
-    frame.dismiss({ animate: true, reason: "popstate" });
+    this.streamActions.stop();
+    this.linkObserver.stop();
   }
 
-  get isCurrentLocation() {
-    return window.history.state?.kpop && window.history.state?.id === this.id;
-  }
-}
-
-class StreamRenderer {
-  constructor(frame, action) {
-    this.frame = frame;
-    this.action = action;
+  isModalLink(link, location) {
+    const properties = this.ruleset.properties(location);
+    return properties.context === "modal";
   }
 
-  render() {
-    this.frame.src = "";
-    this.frame.innerHTML = "";
-    this.frame.append(this.action.templateContent);
+  get debug() {
+    return Boolean(this.config.debug);
   }
 }
 
-function kpop(action) {
-  return action.targetElements[0]?.kpop;
-}
-
-Turbo$1.StreamActions.kpop_open = function () {
-  const animate = !kpop(this).openValue;
+const debugFocusIn = (e) => debug("Application")("focus", e.target);
+const debugFocusOut = (e) => debug("Application")("blur", e.target);
 
-  kpop(this)
-    ?.dismiss({ animate, reason: "before-turbo-stream" })
-    .then(() => {
-      new StreamRenderer(this.targetElements[0], this).render();
-      kpop(this)?.open(new StreamModal(this.target, this), { animate });
-    });
-};
+const addKpopToRequestHeaders = (e) => {
+  const headers = e.detail.fetchOptions.headers;
 
-Turbo$1.StreamActions.kpop_dismiss = function () {
-  kpop(this)?.dismiss({ reason: "turbo_stream.kpop.dismiss" });
-};
-
-Turbo$1.StreamActions.kpop_redirect_to = function () {
-  if (this.dataset.turboFrame === this.target) {
-    const a = document.createElement("A");
-    a.setAttribute("data-turbo-action", "replace");
-    this.targetElements[0].delegate.linkClickIntercepted(
-      a,
-      this.getAttribute("href"),
-    );
-  } else {
-    Turbo$1.visit(this.getAttribute("href"), {
-      action: this.dataset.turboAction,
-    });
+  if (headers["Accept"]?.includes("text/vnd.turbo-stream.html")) {
+    headers["Kpop-Available"] = "true";
   }
 };
 
-const Definitions = [
-  { identifier: "kpop--frame", controllerConstructor: Kpop__FrameController },
-  { identifier: "kpop--modal", controllerConstructor: Kpop__ModalController },
-  { identifier: "scrim", controllerConstructor: ScrimController },
-];
-
-export { Definitions as default };
+export { controllers, Application as default };