katalyst-kpop 2.0.9 → 3.0.0.beta.2

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

@@ -1,564 +1,484 @@
-function camelize(value) {
-  return value.replace(/(?:[_-])([a-z0-9])/g, ((_, char) => char.toUpperCase()));
-}
+import { Controller } from '@hotwired/stimulus';
+import { Turbo } from '@hotwired/turbo-rails';
 
-function namespaceCamelize(value) {
-  return camelize(value.replace(/--/g, "-").replace(/__/g, "_"));
-}
+class Modal {
+  constructor(id) {
+    this.id = id;
+  }
 
-function capitalize(value) {
-  return value.charAt(0).toUpperCase() + value.slice(1);
-}
+  async open() {
+    this.debug("open");
+  }
 
-function dasherize(value) {
-  return value.replace(/([A-Z])/g, ((_, char) => `-${char.toLowerCase()}`));
-}
+  async dismiss() {
+    this.debug(`dismiss`);
+  }
 
-function readInheritableStaticArrayValues(constructor, propertyName) {
-  const ancestors = getAncestorsForConstructor(constructor);
-  return Array.from(ancestors.reduce(((values, constructor) => {
-    getOwnStaticArrayValues(constructor, propertyName).forEach((name => values.add(name)));
-    return values;
-  }), new Set));
-}
+  beforeVisit(frame, e) {
+    this.debug(`before-visit`, e.detail.url);
+  }
 
-function readInheritableStaticObjectPairs(constructor, propertyName) {
-  const ancestors = getAncestorsForConstructor(constructor);
-  return ancestors.reduce(((pairs, constructor) => {
-    pairs.push(...getOwnStaticObjectPairs(constructor, propertyName));
-    return pairs;
-  }), []);
-}
+  popstate(frame, e) {
+    this.debug(`popstate`, e.state);
+  }
+
+  async pop(event, callback) {
+    this.debug(`pop`);
+
+    const promise = new Promise((resolve) => {
+      window.addEventListener(
+        event,
+        () => {
+          resolve();
+        },
+        { once: true }
+      );
+    });
+
+    callback();
 
-function getAncestorsForConstructor(constructor) {
-  const ancestors = [];
-  while (constructor) {
-    ancestors.push(constructor);
-    constructor = Object.getPrototypeOf(constructor);
+    return promise;
   }
-  return ancestors.reverse();
-}
 
-function getOwnStaticArrayValues(constructor, propertyName) {
-  const definition = constructor[propertyName];
-  return Array.isArray(definition) ? definition : [];
-}
+  get frameElement() {
+    return document.getElementById(this.id);
+  }
 
-function getOwnStaticObjectPairs(constructor, propertyName) {
-  const definition = constructor[propertyName];
-  return definition ? Object.keys(definition).map((key => [ key, definition[key] ])) : [];
-}
+  get modalElement() {
+    return this.frameElement?.querySelector("[data-controller*='kpop--modal']");
+  }
 
-(() => {
-  function extendWithReflect(constructor) {
-    function extended() {
-      return Reflect.construct(constructor, arguments, new.target);
-    }
-    extended.prototype = Object.create(constructor.prototype, {
-      constructor: {
-        value: extended
-      }
-    });
-    Reflect.setPrototypeOf(extended, constructor);
-    return extended;
+  get currentLocationValue() {
+    return this.modalElement?.dataset["kpop-ModalCurrentLocationValue"] || "/";
   }
-  function testReflectExtension() {
-    const a = function() {
-      this.a.call(this);
-    };
-    const b = extendWithReflect(a);
-    b.prototype.a = function() {};
-    return new b;
-  }
-  try {
-    testReflectExtension();
-    return extendWithReflect;
-  } catch (error) {
-    return constructor => class extended extends constructor {};
-  }
-})();
-
-({
-  controllerAttribute: "data-controller",
-  actionAttribute: "data-action",
-  targetAttribute: "data-target",
-  targetAttributeForScope: identifier => `data-${identifier}-target`,
-  outletAttributeForScope: (identifier, outlet) => `data-${identifier}-${outlet}-outlet`,
-  keyMappings: Object.assign(Object.assign({
-    enter: "Enter",
-    tab: "Tab",
-    esc: "Escape",
-    space: " ",
-    up: "ArrowUp",
-    down: "ArrowDown",
-    left: "ArrowLeft",
-    right: "ArrowRight",
-    home: "Home",
-    end: "End"
-  }, objectFromEntries("abcdefghijklmnopqrstuvwxyz".split("").map((c => [ c, c ])))), objectFromEntries("0123456789".split("").map((n => [ n, n ]))))
-});
-
-function objectFromEntries(array) {
-  return array.reduce(((memo, [k, v]) => Object.assign(Object.assign({}, memo), {
-    [k]: v
-  })), {});
-}
 
-function ClassPropertiesBlessing(constructor) {
-  const classes = readInheritableStaticArrayValues(constructor, "classes");
-  return classes.reduce(((properties, classDefinition) => Object.assign(properties, propertiesForClassDefinition(classDefinition))), {});
-}
+  get fallbackLocationValue() {
+    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"] || "/";
+  }
 
-function propertiesForClassDefinition(key) {
-  return {
-    [`${key}Class`]: {
-      get() {
-        const {classes: classes} = this;
-        if (classes.has(key)) {
-          return classes.get(key);
-        } else {
-          const attribute = classes.getAttributeName(key);
-          throw new Error(`Missing attribute "${attribute}"`);
-        }
-      }
-    },
-    [`${key}Classes`]: {
-      get() {
-        return this.classes.getAll(key);
-      }
-    },
-    [`has${capitalize(key)}Class`]: {
-      get() {
-        return this.classes.has(key);
-      }
-    }
-  };
-}
+  get isCurrentLocation() {
+    return (
+      window.history.state?.turbo && Turbo.session.location.href === this.src
+    );
+  }
 
-function OutletPropertiesBlessing(constructor) {
-  const outlets = readInheritableStaticArrayValues(constructor, "outlets");
-  return outlets.reduce(((properties, outletDefinition) => Object.assign(properties, propertiesForOutletDefinition(outletDefinition))), {});
+  debug(event, ...args) {
+  }
 }
 
-function propertiesForOutletDefinition(name) {
-  const camelizedName = namespaceCamelize(name);
-  return {
-    [`${camelizedName}Outlet`]: {
-      get() {
-        const outlet = this.outlets.find(name);
-        if (outlet) {
-          const outletController = this.application.getControllerForElementAndIdentifier(outlet, name);
-          if (outletController) {
-            return outletController;
-          } else {
-            throw new Error(`Missing "data-controller=${name}" attribute on outlet element for "${this.identifier}" controller`);
-          }
-        }
-        throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
-      }
-    },
-    [`${camelizedName}Outlets`]: {
-      get() {
-        const outlets = this.outlets.findAll(name);
-        if (outlets.length > 0) {
-          return outlets.map((outlet => {
-            const controller = this.application.getControllerForElementAndIdentifier(outlet, name);
-            if (controller) {
-              return controller;
-            } else {
-              console.warn(`The provided outlet element is missing the outlet controller "${name}" for "${this.identifier}"`, outlet);
-            }
-          })).filter((controller => controller));
-        }
-        return [];
-      }
-    },
-    [`${camelizedName}OutletElement`]: {
-      get() {
-        const outlet = this.outlets.find(name);
-        if (outlet) {
-          return outlet;
-        } else {
-          throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
-        }
-      }
-    },
-    [`${camelizedName}OutletElements`]: {
-      get() {
-        return this.outlets.findAll(name);
-      }
-    },
-    [`has${capitalize(camelizedName)}Outlet`]: {
-      get() {
-        return this.outlets.has(name);
-      }
-    }
-  };
-}
+class ContentModal extends Modal {
+  constructor(id, src = null) {
+    super(id);
 
-function TargetPropertiesBlessing(constructor) {
-  const targets = readInheritableStaticArrayValues(constructor, "targets");
-  return targets.reduce(((properties, targetDefinition) => Object.assign(properties, propertiesForTargetDefinition(targetDefinition))), {});
-}
+    if (src) this.src = src;
+  }
 
-function propertiesForTargetDefinition(name) {
-  return {
-    [`${name}Target`]: {
-      get() {
-        const target = this.targets.find(name);
-        if (target) {
-          return target;
-        } else {
-          throw new Error(`Missing target element "${name}" for "${this.identifier}" controller`);
-        }
-      }
-    },
-    [`${name}Targets`]: {
-      get() {
-        return this.targets.findAll(name);
-      }
-    },
-    [`has${capitalize(name)}Target`]: {
-      get() {
-        return this.targets.has(name);
-      }
-    }
-  };
-}
+  async dismiss() {
+    await super.dismiss();
 
-function ValuePropertiesBlessing(constructor) {
-  const valueDefinitionPairs = readInheritableStaticObjectPairs(constructor, "values");
-  const propertyDescriptorMap = {
-    valueDescriptorMap: {
-      get() {
-        return valueDefinitionPairs.reduce(((result, valueDefinitionPair) => {
-          const valueDescriptor = parseValueDefinitionPair(valueDefinitionPair, this.identifier);
-          const attributeName = this.data.getAttributeNameForKey(valueDescriptor.key);
-          return Object.assign(result, {
-            [attributeName]: valueDescriptor
-          });
-        }), {});
-      }
+    if (this.visitStarted) {
+      this.debug("skipping dismiss, visit started");
+      return;
     }
-  };
-  return valueDefinitionPairs.reduce(((properties, valueDefinitionPair) => Object.assign(properties, propertiesForValueDefinitionPair(valueDefinitionPair))), propertyDescriptorMap);
-}
-
-function propertiesForValueDefinitionPair(valueDefinitionPair, controller) {
-  const definition = parseValueDefinitionPair(valueDefinitionPair, controller);
-  const {key: key, name: name, reader: read, writer: write} = definition;
-  return {
-    [name]: {
-      get() {
-        const value = this.data.get(key);
-        if (value !== null) {
-          return read(value);
-        } else {
-          return definition.defaultValue;
-        }
-      },
-      set(value) {
-        if (value === undefined) {
-          this.data.delete(key);
-        } else {
-          this.data.set(key, write(value));
-        }
-      }
-    },
-    [`has${capitalize(name)}`]: {
-      get() {
-        return this.data.has(key) || definition.hasCustomDefaultValue;
-      }
+    if (!this.isCurrentLocation) {
+      this.debug("skipping dismiss, not current location");
+      return;
     }
-  };
-}
 
-function parseValueDefinitionPair([token, typeDefinition], controller) {
-  return valueDescriptorForTokenAndTypeDefinition({
-    controller: controller,
-    token: token,
-    typeDefinition: typeDefinition
-  });
-}
+    return this.pop("turbo:load", () => {
+      this.debug("turbo-visit", this.fallbackLocationValue);
+      Turbo.visit(this.fallbackLocationValue, { action: "replace" });
+    });
 
-function parseValueTypeConstant(constant) {
-  switch (constant) {
-   case Array:
-    return "array";
+    // no specific close action required, this is turbo's responsibility
+  }
 
-   case Boolean:
-    return "boolean";
+  beforeVisit(frame, e) {
+    super.beforeVisit(frame, e);
 
-   case Number:
-    return "number";
+    this.visitStarted = true;
 
-   case Object:
-    return "object";
+    frame.scrimOutlet.hide({ animate: false });
+  }
 
-   case String:
-    return "string";
+  get src() {
+    return new URL(
+      this.currentLocationValue.toString(),
+      document.baseURI
+    ).toString();
   }
 }
 
-function parseValueTypeDefault(defaultValue) {
-  switch (typeof defaultValue) {
-   case "boolean":
-    return "boolean";
+class FrameModal extends Modal {
+  constructor(id, src) {
+    super(id);
+    this.src = src;
+  }
 
-   case "number":
-    return "number";
+  async dismiss() {
+    await super.dismiss();
 
-   case "string":
-    return "string";
+    if (!this.isCurrentLocation) {
+      this.debug("skipping dismiss, not current location");
+    }
+
+    await this.pop("turbo:load", () => window.history.back());
+
+    // no specific close action required, this is turbo's responsibility
   }
-  if (Array.isArray(defaultValue)) return "array";
-  if (Object.prototype.toString.call(defaultValue) === "[object Object]") return "object";
-}
 
-function parseValueTypeObject(payload) {
-  const typeFromObject = parseValueTypeConstant(payload.typeObject.type);
-  if (!typeFromObject) return;
-  const defaultValueType = parseValueTypeDefault(payload.typeObject.default);
-  if (typeFromObject !== defaultValueType) {
-    const propertyPath = payload.controller ? `${payload.controller}.${payload.token}` : payload.token;
-    throw new Error(`The specified default value for the Stimulus Value "${propertyPath}" must match the defined type "${typeFromObject}". The provided default value of "${payload.typeObject.default}" is of type "${defaultValueType}".`);
+  beforeVisit(frame, e) {
+    super.beforeVisit(frame, e);
+
+    e.preventDefault();
+
+    frame.dismiss({ animate: false }).then(() => {
+      Turbo.visit(e.detail.url);
+
+      this.debug("before-visit-end");
+    });
   }
-  return typeFromObject;
-}
 
-function parseValueTypeDefinition(payload) {
-  const typeFromObject = parseValueTypeObject({
-    controller: payload.controller,
-    token: payload.token,
-    typeObject: payload.typeDefinition
-  });
-  const typeFromDefaultValue = parseValueTypeDefault(payload.typeDefinition);
-  const typeFromConstant = parseValueTypeConstant(payload.typeDefinition);
-  const type = typeFromObject || typeFromDefaultValue || typeFromConstant;
-  if (type) return type;
-  const propertyPath = payload.controller ? `${payload.controller}.${payload.typeDefinition}` : payload.token;
-  throw new Error(`Unknown value type "${propertyPath}" for "${payload.token}" value`);
-}
+  popstate(frame, e) {
+    super.popstate(frame, e);
 
-function defaultValueForDefinition(typeDefinition) {
-  const constant = parseValueTypeConstant(typeDefinition);
-  if (constant) return defaultValuesByType[constant];
-  const defaultValue = typeDefinition.default;
-  if (defaultValue !== undefined) return defaultValue;
-  return typeDefinition;
+    // Turbo will restore modal state, but we need to reset the scrim
+    frame.scrimOutlet.hide({ animate: false });
+  }
 }
 
-function valueDescriptorForTokenAndTypeDefinition(payload) {
-  const key = `${dasherize(payload.token)}-value`;
-  const type = parseValueTypeDefinition(payload);
-  return {
-    type: type,
-    key: key,
-    name: camelize(key),
-    get defaultValue() {
-      return defaultValueForDefinition(payload.typeDefinition);
-    },
-    get hasCustomDefaultValue() {
-      return parseValueTypeDefault(payload.typeDefinition) !== undefined;
-    },
-    reader: readers[type],
-    writer: writers[type] || writers.default
+class Kpop__FrameController extends Controller {
+  static outlets = ["scrim"];
+  static targets = ["modal"];
+  static values = {
+    open: Boolean,
   };
-}
 
-const defaultValuesByType = {
-  get array() {
-    return [];
-  },
-  boolean: false,
-  number: 0,
-  get object() {
-    return {};
-  },
-  string: ""
-};
+  connect() {
+    this.debug("connect", this.element.src);
 
-const readers = {
-  array(value) {
-    const array = JSON.parse(value);
-    if (!Array.isArray(array)) {
-      throw new TypeError(`expected value of type "array" but instead got value "${value}" of type "${parseValueTypeDefault(array)}"`);
-    }
-    return array;
-  },
-  boolean(value) {
-    return !(value == "0" || String(value).toLowerCase() == "false");
-  },
-  number(value) {
-    return Number(value);
-  },
-  object(value) {
-    const object = JSON.parse(value);
-    if (object === null || typeof object != "object" || Array.isArray(object)) {
-      throw new TypeError(`expected value of type "object" but instead got value "${value}" of type "${parseValueTypeDefault(object)}"`);
+    this.element.kpop = this;
+
+    // restoration visit
+    if (this.element.src && this.element.complete) {
+      this.debug("new frame modal", this.element.src);
+      this.open(new FrameModal(this.element.id, this.element.src), {
+        animate: false,
+      });
+    } else {
+      const element = this.element.querySelector(
+        "[data-controller*='kpop--modal']"
+      );
+      if (element) {
+        this.debug("new content modal", window.location.pathname);
+        this.open(new ContentModal(this.element.id), { animate: false });
+      }
     }
-    return object;
-  },
-  string(value) {
-    return value;
   }
-};
 
-const writers = {
-  default: writeString,
-  array: writeJSON,
-  object: writeJSON
-};
+  disconnect() {
+    this.debug("disconnect");
 
-function writeJSON(value) {
-  return JSON.stringify(value);
-}
+    delete this.element.kpop;
+    delete this.modal;
+  }
 
-function writeString(value) {
-  return `${value}`;
-}
+  scrimOutletConnected(scrim) {
+    this.debug("scrim-connected");
 
-class Controller {
-  constructor(context) {
-    this.context = context;
+    this.scrimConnected = true;
+
+    if (this.openValue) scrim.show({ animate: false });
   }
-  static get shouldLoad() {
-    return true;
+
+  openValueChanged(open) {
+    this.debug("open-changed", open);
+
+    this.element.parentElement.style.display = open ? "flex" : "none";
   }
-  static afterLoad(_identifier, _application) {
-    return;
+
+  async open(modal, { animate = true } = {}) {
+    if (this.isOpen) {
+      this.debug("skip open as already open");
+      return false;
+    }
+
+    return (this.opening ||= this.#nextFrame(() =>
+      this.#open(modal, { animate })
+    ));
   }
-  get application() {
-    return this.context.application;
+
+  async dismiss({ animate = true, reason = "" } = {}) {
+    if (!this.isOpen) {
+      this.debug("skip dismiss as already closed");
+      return false;
+    }
+
+    return (this.dismissing ||= this.#nextFrame(() =>
+      this.#dismiss({ animate, reason })
+    ));
   }
-  get scope() {
-    return this.context.scope;
+
+  // EVENTS
+
+  popstate(event) {
+    this.modal?.popstate(this, event);
+  }
+
+  beforeFrameRender(event) {
+    this.debug("before-frame-render", event.detail.newFrame.baseURI);
+
+    event.preventDefault();
+
+    this.dismiss({ animate: true, reason: "before-frame-render" }).then(() => {
+      this.debug("resume-frame-render", event.detail.newFrame.baseURI);
+      event.detail.resume();
+    });
+  }
+
+  beforeStreamRender(event) {
+    this.debug("before-stream-render", event.detail);
+
+    const resume = event.detail.render;
+
+    // Defer rendering until dismiss is complete.
+    // Dismiss may change history so we need to wait for it to complete to avoid
+    // losing DOM changes on restoration visits.
+    event.detail.render = (stream) => {
+      (this.dismissing || Promise.resolve()).then(() => {
+        this.debug("stream-render", stream);
+        resume(stream);
+      });
+    };
   }
-  get element() {
-    return this.scope.element;
+
+  beforeVisit(e) {
+    this.debug("before-visit", e.detail.url);
+
+    // ignore visits to the current frame, these fire when the frame navigates
+    if (e.detail.url === this.element.src) return;
+
+    // ignore unless we're open
+    if (!this.isOpen) return;
+
+    this.modal.beforeVisit(this, e);
   }
-  get identifier() {
-    return this.scope.identifier;
+
+  frameLoad(event) {
+    this.debug("frame-load");
+
+    return this.open(new FrameModal(this.element.id, this.element.src), {
+      animate: true,
+    });
   }
-  get targets() {
-    return this.scope.targets;
+
+  get isOpen() {
+    return this.openValue && !this.dismissing;
   }
-  get outlets() {
-    return this.scope.outlets;
+
+  async #open(modal, { animate = true } = {}) {
+    this.debug("open-start", { animate });
+
+    const scrim = this.scrimConnected && this.scrimOutlet;
+
+    this.modal = modal;
+    this.openValue = true;
+
+    await modal.open({ animate });
+    await scrim?.show({ animate });
+
+    delete this.opening;
+
+    this.debug("open-end");
   }
-  get classes() {
-    return this.scope.classes;
+
+  async #dismiss({ animate = true, reason = "" } = {}) {
+    this.debug("dismiss-start", { animate, reason });
+
+    if (!this.modal) {
+      console.warn("modal missing on dismiss");
+    }
+
+    await this.scrimOutlet.hide({ animate });
+    await this.modal?.dismiss();
+
+    this.openValue = false;
+    this.modal = null;
+    delete this.dismissing;
+
+    this.debug("dismiss-end");
   }
-  get data() {
-    return this.scope.data;
+
+  async #nextFrame(callback) {
+    // return Promise.resolve().then(callback);
+    return new Promise(window.requestAnimationFrame).then(callback);
   }
-  initialize() {}
-  connect() {}
-  disconnect() {}
-  dispatch(eventName, {target: target = this.element, detail: detail = {}, prefix: prefix = this.identifier, bubbles: bubbles = true, cancelable: cancelable = true} = {}) {
-    const type = prefix ? `${prefix}:${eventName}` : eventName;
-    const event = new CustomEvent(type, {
-      detail: detail,
-      bubbles: bubbles,
-      cancelable: cancelable
-    });
-    target.dispatchEvent(event);
-    return event;
+
+  debug(event, ...args) {
   }
 }
 
-Controller.blessings = [ ClassPropertiesBlessing, TargetPropertiesBlessing, ValuePropertiesBlessing, OutletPropertiesBlessing ];
+class Kpop__ModalController extends Controller {
+  static values = {
+    fallback_location: String,
+    layout: String,
+  };
+
+  connect() {
+    this.debug("connect");
 
-Controller.targets = [];
+    if (this.layoutValue) {
+      document.querySelector("#kpop").classList.toggle(this.layoutValue, true);
+    }
+  }
+
+  disconnect() {
+    this.debug("disconnect");
 
-Controller.outlets = [];
+    if (this.layoutValue) {
+      document.querySelector("#kpop").classList.toggle(this.layoutValue, false);
+    }
+  }
 
-Controller.values = {};
+  debug(event, ...args) {
+  }
+}
 
+/**
+ * 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".
+ */
 class ScrimController extends Controller {
-  static values={
+  static values = {
     open: Boolean,
     captive: Boolean,
-    zIndex: Number
+    zIndex: Number,
   };
-  static showScrim({dismiss: dismiss = true, zIndex: zIndex = undefined, top: top = undefined} = {}) {
-    return window.dispatchEvent(new CustomEvent("scrim:request:show", {
-      cancelable: true,
-      detail: {
-        captive: !dismiss,
-        zIndex: zIndex,
-        top: top
-      }
-    }));
-  }
-  static hideScrim() {
-    return window.dispatchEvent(new CustomEvent("scrim:request:hide", {
-      cancelable: true
-    }));
-  }
+
   connect() {
+
     this.defaultZIndexValue = this.zIndexValue;
     this.defaultCaptiveValue = this.captiveValue;
+
+    this.element.scrim = this;
   }
-  show(request) {
-    if (this.openValue) this.hide(request);
-    if (this.openValue) return;
+
+  disconnect() {
+
+    delete this.element.scrim;
+  }
+
+  async show({
+    captive = this.defaultCaptiveValue,
+    zIndex = this.defaultZIndexValue,
+    top = window.scrollY,
+    animate = true,
+  } = {}) {
+
+    // hide the scrim before opening the new one if it's already open
+    if (this.openValue) {
+      await this.hide({ animate });
+    }
+
+    // update internal state
     this.openValue = true;
-    const event = this.dispatch("show", {
-      bubbles: true,
-      cancelable: true
-    });
-    if (event.defaultPrevented) {
-      this.openValue = false;
-      request.preventDefault();
-      return;
+
+    // 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;
     }
-    this.#show(request.detail);
   }
-  hide(request) {
-    if (!this.openValue) return;
-    this.openValue = false;
-    const event = this.dispatch("hide", {
-      bubbles: true,
-      cancelable: true
-    });
-    if (event.defaultPrevented) {
-      this.openValue = true;
-      request.preventDefault();
-      return;
+
+  async hide({ animate = true } = {}) {
+    if (!this.openValue || this.element.dataset.hideAnimating) return;
+
+    // notify listeners of pending request
+    this.dispatch("hide", { bubbles: true });
+
+    if (animate) {
+      // set animation state
+      // this will trigger an animationEnd event via CSS that completes the hide
+      this.element.dataset.hideAnimating = "";
+
+      await new Promise((resolve) => {
+        this.element.addEventListener("animationend", () => resolve(), {
+          once: true,
+        });
+      });
+
+      delete this.element.dataset.hideAnimating;
     }
+
     this.#hide();
+
+    this.openValue = false;
   }
+
   dismiss(event) {
-    if (!this.captiveValue) this.hide(event);
+
+    if (!this.captiveValue) this.dispatch("dismiss", { bubbles: true });
   }
+
   escape(event) {
-    if (event.key === "Escape" && !this.captiveValue && !event.defaultPrevented) this.hide(event);
-  }
-  disconnect() {
-    super.disconnect();
+    if (
+      event.key === "Escape" &&
+      !this.captiveValue &&
+      !event.defaultPrevented
+    ) {
+      this.dispatch("dismiss", { bubbles: true });
+    }
   }
-  #show({captive: captive = this.defaultCaptiveValue, zIndex: zIndex = this.defaultZIndexValue, top: top = window.scrollY}) {
+
+  /**
+   * Clips body to viewport size and sets the z-index
+   */
+  #show(captive, zIndex, top) {
     this.captiveValue = captive;
     this.zIndexValue = zIndex;
     this.scrollY = top;
+
     this.previousPosition = document.body.style.position;
     this.previousTop = document.body.style.top;
+
     this.element.style.zIndex = this.zIndexValue;
     document.body.style.top = `-${top}px`;
     document.body.style.position = "fixed";
   }
+
+  /**
+   * Unclips body from viewport size and unsets the z-index
+   */
   #hide() {
     this.captiveValue = this.defaultCaptiveValue;
     this.zIndexValue = this.defaultZIndexValue;
+
     resetStyle(this.element, "z-index", null);
     resetStyle(document.body, "position", null);
     resetStyle(document.body, "top", null);
-    window.scrollTo({
-      left: 0,
-      top: this.scrollY,
-      behavior: "instant"
-    });
+
+    window.scrollTo({ left: 0, top: this.scrollY, behavior: "instant" });
+
     delete this.scrollY;
     delete this.previousPosition;
     delete this.previousTop;
@@ -573,67 +493,98 @@ function resetStyle(element, property, previousValue) {
   }
 }
 
-class KpopController extends Controller {
-  static targets=[ "content", "closeButton" ];
-  static values={
-    open: Boolean
-  };
-  contentTargetConnected(target) {
-    target.setAttribute("data-turbo-temporary", "");
-    if (this.openValue) return;
-    if (ScrimController.showScrim({
-      dismiss: this.hasCloseButtonTarget
-    })) {
-      this.openValue = true;
-    } else {
-      this.#clear();
-    }
+class StreamModal extends Modal {
+  constructor(id, action) {
+    super(id);
+
+    this.action = action;
   }
-  contentTargetDisconnected() {
-    if (this.hasContentTarget) return;
-    this.openValue = false;
-    ScrimController.hideScrim();
+
+  async open() {
+    await super.open();
+
+    window.history.pushState({ kpop: true, id: this.id }, "", window.location);
   }
-  openValueChanged(open) {
-    this.element.style.display = open ? "flex" : "none";
-  }
-  dismiss() {
-    if (!this.hasContentTarget || !this.openValue) return;
-    const dismissUrl = this.contentTarget.dataset.dismissUrl;
-    const dismissAction = this.contentTarget.dataset.dismissAction;
-    if (dismissUrl) {
-      if (dismissAction === "replace") {
-        if (isSameUrl(document.referrer, dismissUrl)) {
-          history.back();
-        } else {
-          history.replaceState({}, "", dismissUrl);
-        }
-      } else {
-        window.location.href = dismissUrl;
-      }
+
+  async dismiss() {
+    await super.dismiss();
+
+    if (this.isCurrentLocation) {
+      await this.pop("popstate", () => window.history.back());
     }
-    this.#clear();
+
+    this.frameElement.innerHTML = "";
   }
-  #clear() {
-    this.element.removeAttribute("src");
-    this.element.innerHTML = "";
+
+  beforeVisit(frame, e) {
+    super.beforeVisit(frame, e);
+
+    e.preventDefault();
+
+    frame.dismiss({ animate: false }).then(() => {
+      Turbo.visit(e.detail.url);
+
+      this.debug("before-visit-end");
+    });
+  }
+
+  popstate(frame, e) {
+    super.popstate(frame, e);
+
+    frame.dismiss({ animate: true, reason: "popstate" });
+  }
+
+  get isCurrentLocation() {
+    return window.history.state?.kpop && window.history.state?.id === this.id;
   }
 }
 
-function isSameUrl(previous, next) {
-  try {
-    return `${new URL(previous)}` === `${new URL(next, location.href)}`;
-  } catch {
-    return false;
+class StreamRenderer {
+  constructor(frame, action) {
+    this.frame = frame;
+    this.action = action;
   }
+
+  render() {
+    this.frame.src = "";
+    this.frame.innerHTML = "";
+    this.frame.append(this.action.templateContent);
+  }
+}
+
+function kpop(action) {
+  return action.targetElements[0]?.kpop;
 }
 
-const Definitions = [ {
-  identifier: "kpop",
-  controllerConstructor: KpopController
-}, {
-  identifier: "scrim",
-  controllerConstructor: ScrimController
-} ];
+Turbo.StreamActions.kpop_open = function () {
+  const animate = !kpop(this).openValue;
+
+  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 });
+    });
+};
+
+Turbo.StreamActions.kpop_dismiss = function () {
+  kpop(this)?.dismiss({ reason: "turbo_stream.kpop.dismiss" });
+};
+
+Turbo.StreamActions.kpop_redirect_to = function () {
+  if (this.dataset.turboFrame === this.target) {
+    this.targetElements[0].src = this.getAttribute("href");
+  } else {
+    Turbo.visit(this.getAttribute("href"), {
+      action: this.dataset.turboAction,
+    });
+  }
+};
+
+const Definitions = [
+  { identifier: "kpop--frame", controllerConstructor: Kpop__FrameController },
+  { identifier: "kpop--modal", controllerConstructor: Kpop__ModalController },
+  { identifier: "scrim", controllerConstructor: ScrimController },
+];
 
-export { KpopController, ScrimController, Definitions as default };
+export { Definitions as default };