jet_ui 0.2.11 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89ac34e7a4ba973ca0e253bd918a62aaf9397cb166b4a61841033024521c938b
-  data.tar.gz: 6ec8cd6cd71014a3cf3d06684717cab4ea0e952c3ed4fba51916356b35525a7f
+  metadata.gz: aaa259d3afc97d0f95133cdb1f0f4a5ab4ecdb8e202cc3e2915adf675747e8e3
+  data.tar.gz: e67258fe470b32b455ff87ff3c3d2121eba46f5b549cdce377c105e8f9485d9a
 SHA512:
-  metadata.gz: 6c11d7a76915590603cd836206086772518c1712c1af743d2cda78ddcf03cd584b27a80bfcbe2a6c67c48b7f0f7429ea37cca18f2d329d1692241da316a4aad7
-  data.tar.gz: ec4adf80d2294c2cd792efa1f49994f064d1f27119938aa8d79dec006f31a71692641ad0546b12e1e543c3e82f41f8f10206a05aa057e8120a9db8d96b9f338e
+  metadata.gz: a4eeb23778ec35b7df6d67d73185851f34bd261d930251159abf6977ed09a2c6deb19adc3112f8f506266d460fea28353a2974db2fb575e33179f109ad10e521
+  data.tar.gz: d6a945c029554f92578e4f32e9cd7c834d8a2d72d1f43497a179d0b92f4a2b7694f8538f093cce1c381f3d93a9ca4ff032f291a9059cb9b5c9d3ad77fb0fe670

data/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-09-11
+
+### Added
+- `Dialog` component — unifies `Modal` and `Drawer` into a single component built on the native `<dialog>` element, with five positions (`:center`, `:left`, `:right`, `:top`, `:bottom`) and unlimited nesting of stacked dialogs
+- `Dialogs` mount point component — renders the dialog stack root and the sentinel Turbo Frame that async dialog opens adopt
+- ViewComponent previews for `Alert`, `Badge`, `Group`, and `Stat`
+- `docs/vite.md` — setup and troubleshooting guide for the Vite/npm install path
+
+### Changed
+- README `Installation` section reorganized with a comparison table so Importmap and Vite get equal visual weight, instead of Vite being a subordinate "Alternative:" section
+- Dropped the `Ruby >=`/`Rails >=` badges from the README — duplicated info already in `## Requirements`, and not a pattern followed by comparable Ruby gems
+
+### Deprecated
+- `Modal` and `Drawer` — now thin shims delegating to `Dialog` with `position: :center`/`:right`; emit an `ActiveSupport::Deprecation` warning and will be removed in the next major version. Existing `data: { turbo_frame: :modal }`/`:drawer` links keep working automatically. See [docs/components/dialog.md](docs/components/dialog.md#migrating-from-modaldrawer) for the full migration path
+
 ## [0.2.11] - 2026-09-07
 
 ### Fixed

data/README.md

@@ -4,8 +4,7 @@
 [![Checks](https://img.shields.io/github/actions/workflow/status/jetrockets/jet_ui/ci.yml?label=checks&logo=github)](https://github.com/jetrockets/jet_ui/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue)](LICENSE.md)
 [![Downloads](https://img.shields.io/gem/dt/jet_ui)](https://rubygems.org/gems/jet_ui)
-[![Ruby](https://img.shields.io/badge/ruby-%3E%3D%203.0-CC342D)](https://rubygems.org/gems/jet_ui)
-[![Rails](https://img.shields.io/badge/rails-%3E%3D%207.0-CC0000)](https://rubygems.org/gems/jet_ui)
+[![Stars](https://img.shields.io/github/stars/jetrockets/jet_ui?style=social)](https://github.com/jetrockets/jet_ui/stargazers)
 
 ViewComponent-based UI library for Rails applications, matching the design system at [ui.jetrockets.com](https://ui.jetrockets.com).
 
@@ -18,40 +17,47 @@ ViewComponent-based UI library for Rails applications, matching the design syste
 
 ## Installation
 
-Add to your Gemfile:
+Add the gem to your Gemfile, then run the install generator — it detects how your app manages
+JavaScript and wires jet_ui up accordingly, no flags needed:
 
 ```ruby
 gem "jet_ui"
 ```
 
-Run the install generator:
-
 ```bash
 bundle install
 rails generate jet_ui:install
 ```
 
-The generator:
-- Detects your Tailwind CSS source file and injects a single import covering all component stylesheets
-- Registers JetUi Stimulus controllers in your app's controllers index
+|              | Importmap                                                        | Vite                                                                          |
+|--------------|-------------------------------------------------------------------|---------------------------------------------------------------------------------|
+| **Detected by**  | `config/importmap.rb` present                                  | a Vite config, or `vite` in `package.json`                                      |
+| **JS wiring**    | Automatic — controllers auto-register                          | Manual — you `import` and `application.register(...)` the ones you use          |
+| **CSS wiring**   | Automatic — injected into your Tailwind source                 | Manual — `@import "@jetrockets/jet_ui/css"` in your CSS entry point             |
+| **npm install**  | None needed — the gem ships the controllers itself              | Done for you by the generator (`yarn add @jetrockets/jet_ui`, or your package manager's equivalent) |
 
-When the gem is updated, both CSS and JS are picked up automatically — no further changes needed. Safe to re-run after upgrades.
+Full walkthrough and troubleshooting for the Vite path: [docs/vite.md](docs/vite.md).
 
-### Alternative: npm package (Vite)
+### Importmap
 
-The above (importmap) setup needs no npm install — the gem ships the controllers itself. If your app bundles JavaScript with Vite instead, run the install generator: it detects Vite, **installs the `@jetrockets/jet_ui` npm package** for you (running `yarn add @jetrockets/jet_ui`, or the npm/pnpm/bun equivalent it detects), and prints the wiring steps:
+The generator detects your Tailwind CSS source file and injects a single import covering all
+component stylesheets, and registers JetUi Stimulus controllers in your app's controllers index.
+When the gem is updated, both CSS and JS are picked up automatically — no further changes needed.
+Safe to re-run after upgrades.
 
-```bash
-rails generate jet_ui:install
-# detects Vite → runs: yarn add @jetrockets/jet_ui
-```
+### Vite
+
+The generator detects Vite and installs the `@jetrockets/jet_ui` npm package for you. Vite apps
+own their JS/CSS entry points, so those are not modified automatically — wire up the two pieces
+yourself:
 
-Then register the controllers you use (`@hotwired/stimulus` is a peer dependency):
+Register the controllers you use (`@hotwired/stimulus` is a peer dependency):
 
 ```javascript
-import { ModalController } from "@jetrockets/jet_ui"
+import { DialogController, DialogsController } from "@jetrockets/jet_ui"
 
-application.register("modal", ModalController)
+application.register("dialog", DialogController)
+application.register("dialogs", DialogsController)
 ```
 
 Import the component styles in your Tailwind/CSS entry point:
@@ -67,6 +73,8 @@ import "@jetrockets/jet_ui/css"          // all component styles
 import "@jetrockets/jet_ui/css/btn.css"  // a single component
 ```
 
+See [docs/vite.md](docs/vite.md) for detection details and troubleshooting.
+
 ## Usage
 
 The `jet_ui` helper is available in all views:
@@ -112,8 +120,9 @@ Subcomponents follow the `namespace_subcomponent` naming convention (`card_heade
 | Sidebar | [docs/components/sidebar.md](docs/components/sidebar.md) |
 | Header | [docs/components/header.md](docs/components/header.md) |
 | Navbar | [docs/components/navbar.md](docs/components/navbar.md) |
-| Modal ⚡ | [docs/components/modal.md](docs/components/modal.md) |
-| Drawer ⚡ | [docs/components/drawer.md](docs/components/drawer.md) |
+| Dialog ⚡ | [docs/components/dialog.md](docs/components/dialog.md) |
+| Modal ⚡ (deprecated, use Dialog) | [docs/components/modal.md](docs/components/modal.md) |
+| Drawer ⚡ (deprecated, use Dialog) | [docs/components/drawer.md](docs/components/drawer.md) |
 | Dropdown ⚡ | [docs/components/dropdown.md](docs/components/dropdown.md) |
 | Tooltip ⚡ | [docs/components/tooltip.md](docs/components/tooltip.md) |
 | Popover ⚡ | [docs/components/popover.md](docs/components/popover.md) |

data/app/assets/javascripts/jet_ui/dialog_controller.js

@@ -0,0 +1,95 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Per-dialog behaviour: backdrop click / swipe-to-dismiss / Esc handling for a single
+// <dialog>. Opening, stacking and DOM cleanup are owned by DialogsController — this
+// controller only reacts to interactions on an already-mounted dialog.
+export default class DialogController extends Controller {
+  static targets = ["panel"]
+
+  static values = {
+    position: { type: String, default: "center" },
+    dismissible: { type: Boolean, default: true },
+    swipe: { type: Boolean, default: false },
+    swipeThreshold: { type: Number, default: 100 }
+  }
+
+  #touchStart = 0
+
+  connect() {
+    this.element.addEventListener("click", this.#handleBackdropClick)
+    this.element.addEventListener("cancel", this.#handleCancel)
+
+    if (this.swipeValue) {
+      this.element.addEventListener("touchstart", this.#handleTouchStart, { passive: true })
+      this.element.addEventListener("touchmove", this.#handleTouchMove, { passive: true })
+      this.element.addEventListener("touchend", this.#handleTouchEnd, { passive: true })
+    }
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.#handleBackdropClick)
+    this.element.removeEventListener("cancel", this.#handleCancel)
+    this.element.removeEventListener("touchstart", this.#handleTouchStart)
+    this.element.removeEventListener("touchmove", this.#handleTouchMove)
+    this.element.removeEventListener("touchend", this.#handleTouchEnd)
+  }
+
+  close() {
+    try {
+      this.element.close()
+    } catch (e) {}
+  }
+
+  #handleBackdropClick = (event) => {
+    if (event.target === this.element && this.dismissibleValue) {
+      this.close()
+    }
+  }
+
+  #handleCancel = (event) => {
+    if (!this.dismissibleValue) event.preventDefault()
+  }
+
+  #axis() {
+    return this.positionValue === "top" || this.positionValue === "bottom" ? "y" : "x"
+  }
+
+  // Sign of the direction that counts as "swiping the panel away".
+  #sign() {
+    return { left: -1, right: 1, top: -1, bottom: 1 }[this.positionValue] ?? 1
+  }
+
+  #coordinate(touch) {
+    return this.#axis() === "x" ? touch.clientX : touch.clientY
+  }
+
+  #translate(value, unit) {
+    return this.#axis() === "x" ? `translateX(${value}${unit})` : `translateY(${value}${unit})`
+  }
+
+  #handleTouchStart = (event) => {
+    if (!this.hasPanelTarget) return
+    this.#touchStart = this.#coordinate(event.touches[0])
+    this.panelTarget.style.transition = "none"
+  }
+
+  #handleTouchMove = (event) => {
+    if (!this.hasPanelTarget) return
+    const delta = (this.#coordinate(event.touches[0]) - this.#touchStart) * this.#sign()
+    const clamped = Math.max(0, delta)
+    this.panelTarget.style.transform = this.#translate(clamped * this.#sign(), "px")
+  }
+
+  #handleTouchEnd = (event) => {
+    if (!this.hasPanelTarget) return
+    const delta = (this.#coordinate(event.changedTouches[0]) - this.#touchStart) * this.#sign()
+    this.panelTarget.style.transition = "transform 0.2s ease-out"
+
+    if (delta > this.swipeThresholdValue) {
+      this.panelTarget.style.transform = this.#translate(this.#sign() * 100, "%")
+      this.panelTarget.addEventListener("transitionend", () => this.close(), { once: true })
+    } else {
+      this.panelTarget.style.transform = this.#translate(0, "px")
+    }
+  }
+}

data/app/assets/javascripts/jet_ui/dialogs_controller.js

@@ -0,0 +1,248 @@
+import { Controller } from "@hotwired/stimulus"
+
+const FRAME_ID = "dialog"
+const DEFAULT_POSITION = "center"
+const DEFAULT_SIZE = "2xl"
+const HORIZONTAL_POSITIONS = ["top", "bottom"]
+
+// Legacy `data-turbo-frame` values kept working after the Modal/Drawer → Dialog unification.
+// Each alias presets a position and is rewritten to the real frame id ("dialog") before Turbo
+// resolves it, so existing async links need no edits — see docs/components/dialog.md.
+const FRAME_ALIASES = {
+  dialog: DEFAULT_POSITION,
+  modal: "center",
+  drawer: "right"
+}
+
+// Stack manager for every <dialog> on the page — sync (declared inline with an `id`) and
+// remote (opened via a link/form with data-turbo-frame="dialog", or the deprecated "modal"/
+// "drawer" aliases). Unlimited nesting works because the manager, not any single dialog, owns
+// depth tracking, the flash portal and the "sentinel" <turbo-frame id="dialog"> that every
+// async open adopts.
+export default class DialogsController extends Controller {
+  static targets = ["root", "sentinel", "dialog"]
+
+  #stack = []
+  #frameCounter = 0
+
+  connect() {
+    window.addEventListener("click", this.#interceptTrigger, { capture: true })
+    window.addEventListener("submit", this.#interceptTrigger, { capture: true })
+    document.addEventListener("turbo:frame-load", this.#handleFrameLoad)
+    document.addEventListener("turbo:frame-missing", this.#handleFrameMissing)
+    document.addEventListener("turbo:fetch-request-error", this.#handleFrameMissing)
+    document.addEventListener("turbo:before-visit", this.closeAll)
+    document.addEventListener("turbo:before-cache", this.closeAll)
+    document.addEventListener("turbo:before-render", this.#handleBeforeRender)
+    document.addEventListener("turbo:render", this.#handleRender)
+  }
+
+  disconnect() {
+    window.removeEventListener("click", this.#interceptTrigger, { capture: true })
+    window.removeEventListener("submit", this.#interceptTrigger, { capture: true })
+    document.removeEventListener("turbo:frame-load", this.#handleFrameLoad)
+    document.removeEventListener("turbo:frame-missing", this.#handleFrameMissing)
+    document.removeEventListener("turbo:fetch-request-error", this.#handleFrameMissing)
+    document.removeEventListener("turbo:before-visit", this.closeAll)
+    document.removeEventListener("turbo:before-cache", this.closeAll)
+    document.removeEventListener("turbo:before-render", this.#handleBeforeRender)
+    document.removeEventListener("turbo:render", this.#handleRender)
+  }
+
+  // Sync open — data-action="click->dialogs#open" data-id="myDialog" on the trigger.
+  open(event) {
+    const id = event.currentTarget.dataset.id
+    const dialog = this.dialogTargets.find((d) => d.id === id)
+    if (!dialog || this.#stack.includes(dialog)) return
+
+    this.#push(dialog, { remote: false })
+  }
+
+  closeAll = () => {
+    // Copy first: closing dispatches 'close' synchronously, which mutates #stack.
+    ;[...this.#stack].reverse().forEach((dialog) => dialog.close())
+  }
+
+  // --- async open: adopt the sentinel frame before Turbo navigates it ---------------------
+
+  #interceptTrigger = (event) => {
+    const frameName = this.#resolveFrameName(event)
+    if (!(frameName in FRAME_ALIASES)) return
+    if (!this.hasSentinelTarget) return
+    if (this.#opensInNewTab(event)) return
+
+    const sentinel = this.sentinelTarget
+    if (sentinel.dataset.pending === "true") return // already adopted, let Turbo re-navigate it
+
+    const trigger = this.#resolveTrigger(event)
+    const position = trigger?.dataset.dialogPosition || FRAME_ALIASES[frameName]
+    const size = trigger?.dataset.dialogSize || DEFAULT_SIZE
+    const dismissible = trigger?.dataset.dialogDismissible !== "false"
+
+    // Deprecated aliases ("modal"/"drawer") point at a frame id that no longer exists in the
+    // DOM — only the "dialog" sentinel does. Rewrite the trigger before Turbo reads it (we run
+    // first, same capture phase) so its own getElementById(frameName) lookup still finds it.
+    // Persist the resolved position on the trigger too: once data-turbo-frame becomes "dialog"
+    // it no longer carries the alias, so without this a second click on the same trigger would
+    // resolve to the "dialog" default position instead of the alias's preset.
+    if (frameName !== FRAME_ID) {
+      this.#rewriteFrameName(event, trigger)
+      if (trigger && !trigger.dataset.dialogPosition) trigger.dataset.dialogPosition = position
+    }
+
+    sentinel.dataset.pending = "true"
+
+    const shell = this.#buildShell({ position, size, dismissible })
+    shell.append(sentinel)
+    this.rootTarget.append(shell)
+
+    this.#push(shell, { remote: true })
+  }
+
+  // A modified click (Cmd/Ctrl/Shift/Alt, middle-click) or a link with target/download makes
+  // the browser open a new tab/window instead of navigating in place — Turbo itself ignores
+  // these clicks and lets the browser handle them, so we must too, or we'd adopt the sentinel
+  // and show an overlay for a navigation that never actually happens on this page.
+  #opensInNewTab(event) {
+    if (event.type !== "click") return false
+    if (event.button !== 0) return true
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return true
+
+    const trigger = this.#resolveTrigger(event)
+    const target = trigger?.getAttribute?.("target")
+    if (target && target !== "_self") return true
+
+    return trigger?.hasAttribute?.("download") ?? false
+  }
+
+  #resolveFrameName(event) {
+    if (event.type === "submit") {
+      const form = event.target
+      return event.submitter?.dataset.turboFrame || form?.dataset.turboFrame || null
+    }
+
+    const trigger = event.target?.closest?.("[data-turbo-frame]")
+    return trigger?.dataset.turboFrame || null
+  }
+
+  #resolveTrigger(event) {
+    if (event.type === "submit") {
+      return event.submitter?.dataset.turboFrame ? event.submitter : event.target
+    }
+
+    return event.target?.closest?.("[data-turbo-frame]") || null
+  }
+
+  #rewriteFrameName(event, trigger) {
+    if (!trigger) return
+    trigger.dataset.turboFrame = FRAME_ID
+  }
+
+  #buildShell({ position, size, dismissible }) {
+    const horizontal = HORIZONTAL_POSITIONS.includes(position)
+    const edge = position !== DEFAULT_POSITION
+
+    const dialog = document.createElement("dialog")
+    dialog.tabIndex = -1
+    dialog.className = `dialog dialog-${position} ${horizontal ? "h" : "w"}-${size}`
+    dialog.dataset.controller = "dialog"
+    dialog.dataset.dialogPositionValue = position
+    dialog.dataset.dialogDismissibleValue = String(dismissible)
+    dialog.dataset.dialogSwipeValue = String(edge)
+    return dialog
+  }
+
+  #handleFrameLoad = (event) => {
+    const frame = event.target
+    if (frame?.tagName !== "TURBO-FRAME") return
+    if (frame.id !== FRAME_ID) return
+
+    delete frame.dataset.pending
+    delete frame.dataset.dialogsTarget
+    frame.id = `${FRAME_ID}-${++this.#frameCounter}`
+
+    this.#respawnSentinel()
+    this.#portalFlash()
+  }
+
+  #handleFrameMissing = (event) => {
+    const frame = event.target
+    if (frame?.tagName !== "TURBO-FRAME") return
+    if (!new RegExp(`^${FRAME_ID}(-\\d+)?$`).test(frame.id)) return
+
+    const shell = frame.closest("dialog.dialog")
+    if (!shell) return
+
+    if (frame.id === FRAME_ID) this.#respawnSentinel()
+    shell.close()
+  }
+
+  #respawnSentinel() {
+    const sentinel = document.createElement("turbo-frame")
+    sentinel.id = FRAME_ID
+    sentinel.dataset.dialogsTarget = "sentinel"
+    this.rootTarget.append(sentinel)
+  }
+
+  // --- stack bookkeeping -------------------------------------------------------------------
+
+  #push(dialog, { remote }) {
+    dialog.dataset.remote = String(remote)
+    this.#stack.push(dialog)
+    this.#renumber()
+
+    dialog.addEventListener("close", this.#handleDialogClosed, { once: true })
+    dialog.showModal()
+
+    this.#portalFlash()
+    dialog.dispatchEvent(new CustomEvent("jet-ui:dialog:opened", {
+      bubbles: true,
+      detail: { depth: this.#stack.indexOf(dialog), position: dialog.dataset.dialogPositionValue }
+    }))
+  }
+
+  #handleDialogClosed = (event) => {
+    const dialog = event.target
+    const index = this.#stack.indexOf(dialog)
+    if (index === -1) return
+
+    this.#stack.splice(index, 1)
+    this.#renumber()
+
+    dialog.dispatchEvent(new CustomEvent("jet-ui:dialog:closed", { bubbles: true }))
+
+    if (dialog.dataset.remote === "true") dialog.remove()
+
+    this.#portalFlash()
+  }
+
+  #renumber() {
+    this.#stack.forEach((dialog, index) => { dialog.dataset.depth = String(index) })
+  }
+
+  // --- flash portal --------------------------------------------------------------------------
+  // The topmost open dialog is promoted to the browser's top layer, which makes everything
+  // outside it inert — a flash frame left in <body> would be invisible and unclickable.
+  // We move #flash into the topmost dialog's .dialog__flash-slot instead (see dialog.css).
+
+  #portalFlash = () => {
+    const flashFrame = document.getElementById("flash")
+    if (!flashFrame) return
+
+    const top = this.#stack.at(-1)
+    const target = top ? top.querySelector(".dialog__flash-slot") : document.body
+    if (target && flashFrame.parentElement !== target) target.append(flashFrame)
+  }
+
+  // #dialogs is data-turbo-permanent so open dialogs survive a morph refresh — but that also
+  // means Turbo won't merge a fresh #flash into a copy that is currently portaled inside it.
+  // Pull it back out to <body> before every render, then re-portal it after.
+  #handleBeforeRender = () => {
+    const flashFrame = document.getElementById("flash")
+    if (flashFrame && flashFrame.parentElement !== document.body) document.body.append(flashFrame)
+  }
+
+  #handleRender = () => {
+    this.#portalFlash()
+  }
+}

data/app/assets/javascripts/jet_ui/drawer_controller.js

@@ -1,5 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
+// @deprecated Only the async (Turbo Frame) dialog markup rendered by JetUi::Dialog::Component
+// still uses "modal"/"drawer" as data-turbo-frame aliases — those keep working automatically,
+// handled by DialogsController. This standalone controller matches the pre-Dialog async drawer
+// markup and is no longer wired up by JetUi::Drawer::Component. Kept only for apps with custom
+// markup still registering it directly. Migrate to the "dialog" controller. Removed in the
+// next major version.
 export default class DrawerController extends Controller {
   static values = {
     swipeThreshold: { type: Number, default: 100 }

data/app/assets/javascripts/jet_ui/drawers_controller.js

@@ -1,5 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
+// @deprecated JetUi::Drawer::Component's sync-mode markup now targets
+// data-dialogs-target="dialog" (see JetUi::Dialog::Component), not
+// data-drawers-target="dialog" — this controller no longer matches it. Migrate your
+// data-controller="drawers" wrapper and click->drawers#open actions to "dialogs" /
+// click->dialogs#open. Removed in the next major version.
 export default class DrawersController extends Controller {
   static targets = ["dialog"]
   static values = {

data/app/assets/javascripts/jet_ui/modal_controller.js

@@ -1,5 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
+// @deprecated Only the async (Turbo Frame) dialog markup rendered by JetUi::Dialog::Component
+// still uses "modal"/"drawer" as data-turbo-frame aliases — those keep working automatically,
+// handled by DialogsController. This standalone controller matches the pre-Dialog async modal
+// markup and is no longer wired up by JetUi::Modal::Component. Kept only for apps with custom
+// markup still registering it directly. Migrate to the "dialog" controller. Removed in the
+// next major version.
 export default class ModalController extends Controller {
   connect() {
     this.element.addEventListener("click", this.#closeOnBackdropClick.bind(this))

data/app/assets/javascripts/jet_ui/modals_controller.js

@@ -1,5 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
+// @deprecated JetUi::Modal::Component's sync-mode markup now targets
+// data-dialogs-target="dialog" (see JetUi::Dialog::Component), not
+// data-modals-target="dialog" — this controller no longer matches it. Migrate your
+// data-controller="modals" wrapper and click->modals#open actions to "dialogs" /
+// click->dialogs#open. Removed in the next major version.
 export default class ModalsController extends Controller {
   static targets = ["dialog"]
 

data/app/assets/stylesheets/jet_ui/dialog.css

@@ -0,0 +1,134 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  /*
+   * .dialog is a pure, invisible positioning shell: fixed, sized, anchored to an edge (or
+   * centered). It must never carry a background, shadow, rounded corners, overflow-hidden, or
+   * — most importantly — transform/filter/perspective/contain/will-change, because any of
+   * those would make it a containing block for position: fixed descendants, breaking the
+   * flash portal (see dialogs_controller.js's #portalFlash — .dialog__flash-slot is a sibling
+   * of .dialog__panel for exactly this reason, not a descendant of it).
+   *
+   * All visible chrome (background, shadow, rounded corners, clipping) and the enter animation
+   * live on .dialog__panel instead, so the whole visible card animates as one piece instead of
+   * the chrome popping in instantly while only the content inside it slides/fades.
+   */
+  .dialog {
+    @apply fixed hidden p-0 m-0 border-0 bg-transparent;
+    @apply animate-slide-up;
+  }
+
+  .dialog[open] {
+    @apply flex flex-col;
+  }
+
+  .dialog::backdrop {
+    @apply bg-overlay;
+  }
+
+  .dialog-center {
+    @apply inset-0 m-auto h-fit min-h-24 max-w-11/12 max-h-11/12;
+  }
+
+  .dialog-left {
+    @apply animate-slide-right;
+    @apply inset-y-0 left-0 right-auto h-full max-h-full;
+    max-width: min(90%, 1280px);
+  }
+
+  .dialog-right {
+    @apply animate-slide-left;
+    @apply inset-y-0 left-auto right-0 h-full max-h-full;
+    max-width: min(90%, 1280px);
+  }
+
+  .dialog-top {
+    @apply animate-slide-down;
+    @apply inset-x-0 bottom-auto top-0 w-full max-h-11/12 max-w-full;
+  }
+
+  .dialog-bottom {
+    @apply animate-slide-up;
+    @apply inset-x-0 bottom-0 top-auto w-full max-h-11/12 max-w-full;
+  }
+
+  /*
+   * A remote dialog's content arrives inside a <turbo-frame id="dialog">, which sits between
+   * .dialog and its children — make it transparent to layout so .dialog__panel and
+   * .dialog__flash-slot still behave as .dialog's direct flex children.
+   */
+  .dialog > turbo-frame {
+    display: contents;
+  }
+
+  .dialog__panel {
+    @apply relative flex flex-col flex-1 overflow-hidden;
+    @apply shadow-sm bg-card rounded-modal;
+  }
+
+  .dialog-left .dialog__panel {
+    @apply rounded-l-none;
+  }
+
+  .dialog-right .dialog__panel {
+    @apply rounded-r-none;
+  }
+
+  .dialog-top .dialog__panel {
+    @apply rounded-t-none;
+  }
+
+  .dialog-bottom .dialog__panel {
+    @apply rounded-b-none;
+  }
+
+  .dialog__header {
+    @apply flex items-start justify-between flex-shrink-0 p-4 px-6 backdrop-blur-sm bg-card/70;
+  }
+
+  .dialog__header-bordered {
+    @apply border-b border-border;
+  }
+
+  .dialog__title {
+    @apply text-xl font-semibold leading-tight text-foreground;
+  }
+
+  .dialog__subtitle {
+    @apply mt-1 text-sm text-muted-foreground;
+  }
+
+  .dialog__close {
+    @apply inline-flex items-center p-1 ml-auto text-sm transition-all duration-300 bg-transparent rounded-full cursor-pointer outline-0;
+    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .dialog__body {
+    @apply flex-1 min-h-0 px-6 py-6 overflow-auto;
+  }
+
+  .dialog__footer {
+    @apply flex-shrink-0 w-full p-4 backdrop-blur-sm bg-card/70;
+  }
+
+  .dialog__footer-bordered {
+    @apply border-t border-border;
+  }
+
+  /*
+   * Zero-size anchor the flash frame is portaled into (see dialogs_controller.js) so it is
+   * painted inside the topmost dialog's top-layer subtree. Deliberately a *sibling* of
+   * .dialog__panel, not nested inside it — .dialog__panel carries the enter animation
+   * (transform), which would otherwise turn it into a containing block for the portaled
+   * flash frame's position: fixed. display:contents keeps this slot itself out of the
+   * flex flow entirely.
+   */
+  .dialog__flash-slot {
+    display: contents;
+  }
+
+  /* Direct (non-Turbo-Frame, non-dialog) page render — e.g. a dialog URL visited directly. */
+  .dialog-page {
+    @apply mt-4 mx-auto;
+  }
+}