modal_stack 0.3.0 → 0.4.1

data/app/assets/stylesheets/modal_stack/bootstrap.css

@@ -10,7 +10,7 @@
  *   :root { --modal-stack-radius: 4px; }
  *
  * Variants:    [data-variant="modal" | "drawer" | "bottom_sheet" | "confirmation"]
- * Drawer side: [data-side="left" | "right"]
+ * Drawer side: [data-side="left" | "right" | "top" | "bottom"]
  * Sizes:       [data-modal-stack-size="sm" | "md" | "lg" | "xl"]
  */
 
@@ -32,6 +32,7 @@
   --modal-stack-size-lg: 800px;
   --modal-stack-size-xl: 1140px;
   --modal-stack-drawer-width: 400px;
+  --modal-stack-drawer-height: 22rem; /* 352px */
 }
 
 body[data-modal-stack-locked] {
@@ -94,6 +95,7 @@ body[data-modal-stack-locked] {
   max-width: 92vw;
   max-height: min(85vh, 720px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--modal-stack-bg);
   color: var(--modal-stack-fg);
   border-radius: var(--modal-stack-radius);
@@ -114,7 +116,7 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][data-leaving] {
   opacity: 0;
-  transform: translate(-50%, -56%) scale(0.97);
+  transform: translate(-50%, -44%) scale(0.97);
   pointer-events: none;
 }
 
@@ -142,7 +144,14 @@ body[data-modal-stack-locked] {
 /* --- Drawer (Bootstrap offcanvas-flavored) ----------------------- */
 
 [data-modal-stack-target="layer"][data-variant="drawer"] {
+  left: 0;
   top: 0;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"],
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="left"] {
   height: 100vh;
   max-height: none;
   width: var(--modal-stack-drawer-width);
@@ -162,6 +171,30 @@ body[data-modal-stack-locked] {
   border-radius: 0 var(--modal-stack-radius) var(--modal-stack-radius) 0;
 }
 
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"] {
+  left: 0;
+  top: 0;
+  width: 100vw;
+  max-width: none;
+  height: var(--modal-stack-drawer-height);
+  max-height: 85vh;
+  transform: translateY(0);
+  border-radius: 0 0 var(--modal-stack-radius) var(--modal-stack-radius);
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"] {
+  left: 0;
+  top: auto;
+  bottom: 0;
+  width: 100vw;
+  max-width: none;
+  height: var(--modal-stack-drawer-height);
+  max-height: 85vh;
+  transform: translateY(0);
+  border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
 @starting-style {
   [data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"] {
     opacity: 0;
@@ -171,6 +204,14 @@ body[data-modal-stack-locked] {
     opacity: 0;
     transform: translateX(-100%);
   }
+  [data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"] {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  [data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"] {
+    opacity: 0;
+    transform: translateY(100%);
+  }
 }
 
 [data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"][data-leaving] {
@@ -183,6 +224,16 @@ body[data-modal-stack-locked] {
   transform: translateX(-100%);
 }
 
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"][data-leaving] {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"][data-leaving] {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
 /* --- Bottom sheet ------------------------------------------------ */
 
 [data-modal-stack-target="layer"][data-variant="bottom_sheet"] {
@@ -194,6 +245,7 @@ body[data-modal-stack-locked] {
   transform: translate(0, 0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
   max-height: 90vh;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -222,10 +274,68 @@ body[data-modal-stack-locked] {
   gap: 0.5rem;
 }
 
+/* Path frames are transparent layout wrappers — CSS transitions can hook
+   on [data-modal-stack-frame][data-transition][data-direction] to
+   animate slide/fade. */
+[data-modal-stack-frame] {
+  display: contents;
+}
+
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="slide"]),
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="fade"]) {
+  overflow: hidden;
+}
+
+[data-modal-stack-frame][data-transition="slide"] {
+  display: block;
+  translate: 0 0;
+  transition: translate var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+[data-modal-stack-frame][data-transition="fade"] {
+  display: block;
+  opacity: 1;
+  transition: opacity var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+@starting-style {
+  [data-modal-stack-frame][data-transition="slide"][data-direction="forward"] {
+    translate: 100% 0;
+  }
+  [data-modal-stack-frame][data-transition="slide"][data-direction="back"] {
+    translate: -100% 0;
+  }
+  [data-modal-stack-frame][data-transition="fade"] {
+    opacity: 0;
+  }
+}
+
+.modal-stack__panel-back {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  align-self: start;
+  justify-self: start;
+}
+
+.modal-stack__panel-back:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-modal-stack-target="layer"][data-frame-depth="1"] .modal-stack__panel-back {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,
-  [data-modal-stack-target="layer"] {
+  [data-modal-stack-target="layer"],
+  [data-modal-stack-frame][data-transition] {
     transition-duration: 1ms !important;
   }
 }

data/app/assets/stylesheets/modal_stack/tailwind_v3.css

@@ -118,6 +118,7 @@ body[data-modal-stack-locked] {
   max-width: 92vw;
   max-height: min(85vh, 720px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--modal-stack-bg);
   color: var(--modal-stack-fg);
   border-radius: var(--modal-stack-radius);
@@ -138,7 +139,7 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][data-leaving] {
   opacity: 0;
-  transform: translate(-50%, -56%) scale(0.97);
+  transform: translate(-50%, -44%) scale(0.97);
   pointer-events: none;
 }
 
@@ -219,6 +220,7 @@ body[data-modal-stack-locked] {
   max-height: 85vh;
   transform: translateY(0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -271,6 +273,7 @@ body[data-modal-stack-locked] {
   transform: translate(0, 0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
   max-height: 90vh;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -299,12 +302,70 @@ body[data-modal-stack-locked] {
   gap: 14px;
 }
 
+/* Path frames are transparent layout wrappers — CSS transitions can hook
+   on [data-modal-stack-frame][data-transition][data-direction] to
+   animate slide/fade. */
+[data-modal-stack-frame] {
+  display: contents;
+}
+
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="slide"]),
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="fade"]) {
+  overflow: hidden;
+}
+
+[data-modal-stack-frame][data-transition="slide"] {
+  display: block;
+  translate: 0 0;
+  transition: translate var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+[data-modal-stack-frame][data-transition="fade"] {
+  display: block;
+  opacity: 1;
+  transition: opacity var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+@starting-style {
+  [data-modal-stack-frame][data-transition="slide"][data-direction="forward"] {
+    translate: 100% 0;
+  }
+  [data-modal-stack-frame][data-transition="slide"][data-direction="back"] {
+    translate: -100% 0;
+  }
+  [data-modal-stack-frame][data-transition="fade"] {
+    opacity: 0;
+  }
+}
+
+.modal-stack__panel-back {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  align-self: start;
+  justify-self: start;
+}
+
+.modal-stack__panel-back:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-modal-stack-target="layer"][data-frame-depth="1"] .modal-stack__panel-back {
+  display: none;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,
-  [data-modal-stack-target="layer"] {
+  [data-modal-stack-target="layer"],
+  [data-modal-stack-frame][data-transition] {
     transition-duration: 1ms !important;
   }
 }

data/app/assets/stylesheets/modal_stack/tailwind_v4.css

@@ -119,6 +119,7 @@ body[data-modal-stack-locked] {
   max-width: 92vw;
   max-height: min(85vh, 720px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--modal-stack-bg);
   color: var(--modal-stack-fg);
   border-radius: var(--modal-stack-radius);
@@ -139,7 +140,7 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][data-leaving] {
   opacity: 0;
-  transform: translate(-50%, -56%) scale(0.97);
+  transform: translate(-50%, -44%) scale(0.97);
   pointer-events: none;
 }
 
@@ -220,6 +221,7 @@ body[data-modal-stack-locked] {
   max-height: 85vh;
   transform: translateY(0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -272,6 +274,7 @@ body[data-modal-stack-locked] {
   transform: translate(0, 0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
   max-height: 90vh;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -300,12 +303,70 @@ body[data-modal-stack-locked] {
   gap: 14px;
 }
 
+/* Path frames are transparent layout wrappers — CSS transitions can hook
+   on [data-modal-stack-frame][data-transition][data-direction] to
+   animate slide/fade. */
+[data-modal-stack-frame] {
+  display: contents;
+}
+
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="slide"]),
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="fade"]) {
+  overflow: hidden;
+}
+
+[data-modal-stack-frame][data-transition="slide"] {
+  display: block;
+  translate: 0 0;
+  transition: translate var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+[data-modal-stack-frame][data-transition="fade"] {
+  display: block;
+  opacity: 1;
+  transition: opacity var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+@starting-style {
+  [data-modal-stack-frame][data-transition="slide"][data-direction="forward"] {
+    translate: 100% 0;
+  }
+  [data-modal-stack-frame][data-transition="slide"][data-direction="back"] {
+    translate: -100% 0;
+  }
+  [data-modal-stack-frame][data-transition="fade"] {
+    opacity: 0;
+  }
+}
+
+.modal-stack__panel-back {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  align-self: start;
+  justify-self: start;
+}
+
+.modal-stack__panel-back:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-modal-stack-target="layer"][data-frame-depth="1"] .modal-stack__panel-back {
+  display: none;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,
-  [data-modal-stack-target="layer"] {
+  [data-modal-stack-target="layer"],
+  [data-modal-stack-frame][data-transition] {
     transition-duration: 1ms !important;
   }
 }

data/app/assets/stylesheets/modal_stack/vanilla.css

@@ -5,7 +5,7 @@
  * --modal-stack-* tokens on :root to retheme.
  *
  * Variants:    [data-variant="modal" | "drawer" | "bottom_sheet" | "confirmation"]
- * Drawer side: [data-side="left" | "right"]
+ * Drawer side: [data-side="left" | "right" | "top" | "bottom"]
  * Sizes:       [data-modal-stack-size="sm" | "md" | "lg" | "xl"]
  */
 
@@ -27,6 +27,7 @@
   --modal-stack-size-lg: 720px;
   --modal-stack-size-xl: 960px;
   --modal-stack-drawer-width: 400px;
+  --modal-stack-drawer-height: 22rem; /* 352px */
 }
 
 body[data-modal-stack-locked] {
@@ -89,6 +90,7 @@ body[data-modal-stack-locked] {
   max-width: 92vw;
   max-height: min(85vh, 720px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--modal-stack-bg);
   color: var(--modal-stack-fg);
   border-radius: var(--modal-stack-radius);
@@ -109,7 +111,7 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][data-leaving] {
   opacity: 0;
-  transform: translate(-50%, -56%) scale(0.97);
+  transform: translate(-50%, -44%) scale(0.97);
   pointer-events: none;
 }
 
@@ -135,7 +137,14 @@ body[data-modal-stack-locked] {
 }
 
 [data-modal-stack-target="layer"][data-variant="drawer"] {
+  left: 0;
   top: 0;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"],
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="left"] {
   height: 100vh;
   max-height: none;
   width: var(--modal-stack-drawer-width);
@@ -155,6 +164,30 @@ body[data-modal-stack-locked] {
   border-radius: 0 var(--modal-stack-radius) var(--modal-stack-radius) 0;
 }
 
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"] {
+  left: 0;
+  top: 0;
+  width: 100vw;
+  max-width: none;
+  height: var(--modal-stack-drawer-height);
+  max-height: 85vh;
+  transform: translateY(0);
+  border-radius: 0 0 var(--modal-stack-radius) var(--modal-stack-radius);
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"] {
+  left: 0;
+  top: auto;
+  bottom: 0;
+  width: 100vw;
+  max-width: none;
+  height: var(--modal-stack-drawer-height);
+  max-height: 85vh;
+  transform: translateY(0);
+  border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
 @starting-style {
   [data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"] {
     opacity: 0;
@@ -164,6 +197,14 @@ body[data-modal-stack-locked] {
     opacity: 0;
     transform: translateX(-100%);
   }
+  [data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"] {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  [data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"] {
+    opacity: 0;
+    transform: translateY(100%);
+  }
 }
 
 [data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"][data-leaving] {
@@ -176,6 +217,16 @@ body[data-modal-stack-locked] {
   transform: translateX(-100%);
 }
 
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"][data-leaving] {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"][data-leaving] {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
 [data-modal-stack-target="layer"][data-variant="bottom_sheet"] {
   top: auto;
   bottom: 0;
@@ -185,6 +236,7 @@ body[data-modal-stack-locked] {
   transform: translate(0, 0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
   max-height: 90vh;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -209,10 +261,76 @@ body[data-modal-stack-locked] {
   gap: 12px;
 }
 
+/* Path frames live inside the layer as transparent wrappers. Switching
+   to `display: contents` keeps the wrapper layout-invisible so adding
+   the modal_path feature doesn't change visuals for layers that never
+   navigate forward. Frame-level CSS transitions (slide / fade) can hook
+   on [data-modal-stack-frame][data-transition][data-direction]. */
+[data-modal-stack-frame] {
+  display: contents;
+}
+
+/* Frame transitions — the JS runtime sets [data-transition] + [data-direction]
+   on new frame wrappers and removes them after the animation. While the
+   attribute is present, the frame is promoted from display:contents to a
+   block context so translate/opacity apply. The :has() rule clips the layer
+   so off-screen frames don't overflow the panel area. */
+
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="slide"]),
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="fade"]) {
+  overflow: hidden;
+}
+
+[data-modal-stack-frame][data-transition="slide"] {
+  display: block;
+  translate: 0 0;
+  transition: translate var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+[data-modal-stack-frame][data-transition="fade"] {
+  display: block;
+  opacity: 1;
+  transition: opacity var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+@starting-style {
+  [data-modal-stack-frame][data-transition="slide"][data-direction="forward"] {
+    translate: 100% 0;
+  }
+  [data-modal-stack-frame][data-transition="slide"][data-direction="back"] {
+    translate: -100% 0;
+  }
+  [data-modal-stack-frame][data-transition="fade"] {
+    opacity: 0;
+  }
+}
+
+.modal-stack__panel-back {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  align-self: start;
+  justify-self: start;
+}
+
+.modal-stack__panel-back:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-modal-stack-target="layer"][data-frame-depth="1"] .modal-stack__panel-back {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,
-  [data-modal-stack-target="layer"] {
+  [data-modal-stack-target="layer"],
+  [data-modal-stack-frame][data-transition] {
     transition-duration: 1ms !important;
   }
 }

data/app/javascript/modal_stack/controllers/modal_stack_back_link_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Backed by `<%= modal_back_link %>`. Triggers orchestrator.pathBack on
+// click; falls back to a no-op when no modal-stack controller is on the
+// page (e.g. server-side rendered link viewed outside a modal).
+export class ModalStackBackLinkController extends Controller {
+  static values = {
+    steps: { type: Number, default: 1 },
+  };
+
+  trigger(event) {
+    const stackController = this.#stackController();
+    if (!stackController) return;
+
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    stackController.orchestrator.pathBack({
+      steps: this.stepsValue > 0 ? this.stepsValue : 1,
+    });
+  }
+
+  #stackController() {
+    const stack = document.querySelector('[data-controller~="modal-stack"]');
+    if (!stack) return null;
+    return this.application.getControllerForElementAndIdentifier(
+      stack,
+      "modal-stack",
+    );
+  }
+}

data/app/javascript/modal_stack/controllers/modal_stack_controller.js

@@ -83,6 +83,17 @@ export class ModalStackController extends Controller {
     return this.orchestrator.prefetch(url);
   }
 
+  // Stimulus action — wire up via data-action="click->modal-stack#pathBack"
+  // on any button/link inside a modal panel.
+  pathBack(event) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const steps = readSteps(event);
+    return this.orchestrator.pathBack({ steps });
+  }
+
   #topLayer() {
     const layers = this.orchestrator.layers;
     return layers[layers.length - 1] ?? null;
@@ -136,6 +147,21 @@ export class ModalStackController extends Controller {
     StreamActions.modal_close_all = guarded("modal_close_all", function (orch) {
       return orch.closeAll();
     });
+
+    StreamActions.modal_path_to = guarded("modal_path_to", function (orch) {
+      return orch.pathTo(frameFromStreamElement(this), {
+        fragment: this.templateContent.cloneNode(true),
+        transition: this.dataset.transition || null,
+      });
+    });
+
+    StreamActions.modal_path_back = guarded("modal_path_back", function (orch) {
+      const steps = parsePositiveInt(this.dataset.steps, 1);
+      return orch.pathBack({
+        steps,
+        transition: this.dataset.transition || null,
+      });
+    });
   }
 }
 
@@ -186,3 +212,27 @@ function generateLayerId() {
   }
   return `ms-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
 }
+
+function frameFromStreamElement(el) {
+  return {
+    url: el.dataset.url || window.location.href,
+    stale: el.dataset.stale === "true" || el.dataset.stale === "1",
+  };
+}
+
+function parsePositiveInt(raw, fallback) {
+  const n = Number.parseInt(raw, 10);
+  return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+
+// Steps for pathBack come from either Stimulus action params
+// (data-modal-stack-steps-param) or a plain data-steps attribute on
+// the action target, e.g. <button data-modal-stack-steps-param="2">.
+function readSteps(event) {
+  const params = event?.params;
+  if (params && Number.isFinite(params.steps) && params.steps > 0) {
+    return params.steps;
+  }
+  const target = event?.currentTarget ?? event?.target;
+  return parsePositiveInt(target?.dataset?.steps, 1);
+}

data/app/javascript/modal_stack/install.js

@@ -1,3 +1,4 @@
+import { ModalStackBackLinkController } from "./controllers/modal_stack_back_link_controller.js";
 import { ModalStackController } from "./controllers/modal_stack_controller.js";
 import { ModalStackLinkController } from "./controllers/modal_stack_link_controller.js";
 
@@ -9,7 +10,12 @@ export function install(application) {
   }
   application.register("modal-stack", ModalStackController);
   application.register("modal-stack-link", ModalStackLinkController);
+  application.register("modal-stack-back-link", ModalStackBackLinkController);
   return application;
 }
 
-export { ModalStackController, ModalStackLinkController };
+export {
+  ModalStackBackLinkController,
+  ModalStackController,
+  ModalStackLinkController,
+};