plutonium 0.60.5 → 0.61.0

data/src/js/controllers/dirty_form_guard_controller.js

@@ -1,9 +1,17 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="dirty-form-guard"
-// Prompts before dismissing a modal form whose contents have changed.
-// Self-disables when not inside a <dialog>, so it's safe to attach to
-// every form unconditionally.
+// Prompts before discarding a form's unsaved changes. Two guard surfaces,
+// both driven off the same dirtiness diff:
+//
+//   • Modal dismissal — when the form is inside a <dialog>, guard Esc / the
+//     close button / backdrop cancel (the original behaviour).
+//   • Full-page leave — guard a click on any control marked
+//     `data-dirty-form-guard-leave="<message>"` that posts WITHOUT this form's
+//     fields (e.g. a wizard Back/Cancel). The attribute value is the prompt.
+//
+// Safe to attach to every form unconditionally: with no dialog and no leave
+// controls it never prompts.
 //
 // Dirtiness is a diff against a baseline captured at the user's *first*
 // real interaction — not at connect. Field widgets (intl-tel-input,
@@ -46,52 +54,79 @@ export default class extends Controller {
 
   connect() {
     this.dialog = this.element.closest("dialog");
-    if (!this.dialog) return;
 
     this.baseline = null;
     this.forceClose = false;
     this.submitting = false;
 
     this.onFirstIntent = this.#onFirstIntent.bind(this);
-    this.onCancel = this.#onCancel.bind(this);
     this.onSubmit = this.#onSubmit.bind(this);
-    this.onCloseButtonClick = this.#onCloseButtonClick.bind(this);
-    this.onConfirmCancel = this.#onConfirmCancel.bind(this);
-    this.onKeydown = this.#onKeydown.bind(this);
+    this.onLeaveClick = this.#onLeaveClick.bind(this);
+    this.onSettled = this.#onSettled.bind(this);
 
     // A trusted pointer/key action inside the form is the user starting to
     // edit — capture the (settled, pre-edit) baseline then. Capture phase so
-    // a widget that stops propagation can't hide it from us.
+    // a widget that stops propagation can't hide it from us. Applies in both
+    // modal and full-page modes.
     this.element.addEventListener("pointerdown", this.onFirstIntent, true);
     this.element.addEventListener("keydown", this.onFirstIntent, true);
+    this.element.addEventListener("submit", this.onSubmit);
 
-    document.addEventListener("keydown", this.onKeydown, true);
-    // Capture phase so this runs before remote-modal's cancel handler
-    // — that way `defaultPrevented` is visible there if we intervene.
-    this.dialog.addEventListener("cancel", this.onCancel, true);
+    // When a submission settles, reset the transient guard flags. A failed submit
+    // (e.g. a validation error) can re-render the SAME form via Turbo morph, which
+    // preserves this element WITHOUT reconnecting the controller — so `submitting`
+    // / `forceClose` would otherwise stay set and silently kill the guard for the
+    // rest of the form's life. Also drop the baseline so the re-rendered form
+    // re-baselines against its new values on the next interaction.
+    this.element.addEventListener("turbo:submit-end", this.onSettled);
 
-    this.element.addEventListener("submit", this.onSubmit);
-    this.#closeButtons().forEach((btn) =>
-      btn.addEventListener("click", this.onCloseButtonClick, true),
-    );
+    // Full-page leave guard: a `data-dirty-form-guard-leave` control can live
+    // outside this form (a sibling nav strip), so listen at the document in the
+    // capture phase to intercept its click before the form it submits. Only for
+    // non-modal forms — a modal is guarded by the Esc/close/cancel handlers below,
+    // so a modal form needn't install a document-wide listener.
+    if (!this.dialog) {
+      document.addEventListener("click", this.onLeaveClick, true);
+    }
 
-    if (this.hasConfirmDialogTarget) {
-      this.confirmDialogTarget.addEventListener("cancel", this.onConfirmCancel);
+    if (this.dialog) {
+      this.onCancel = this.#onCancel.bind(this);
+      this.onCloseButtonClick = this.#onCloseButtonClick.bind(this);
+      this.onConfirmCancel = this.#onConfirmCancel.bind(this);
+      this.onKeydown = this.#onKeydown.bind(this);
+
+      document.addEventListener("keydown", this.onKeydown, true);
+      // Capture phase so this runs before remote-modal's cancel handler
+      // — that way `defaultPrevented` is visible there if we intervene.
+      this.dialog.addEventListener("cancel", this.onCancel, true);
+      this.#closeButtons().forEach((btn) =>
+        btn.addEventListener("click", this.onCloseButtonClick, true),
+      );
+
+      if (this.hasConfirmDialogTarget) {
+        this.confirmDialogTarget.addEventListener("cancel", this.onConfirmCancel);
+      }
     }
   }
 
   disconnect() {
-    if (!this.dialog) return;
     this.element.removeEventListener("pointerdown", this.onFirstIntent, true);
     this.element.removeEventListener("keydown", this.onFirstIntent, true);
-    document.removeEventListener("keydown", this.onKeydown, true);
-    this.dialog.removeEventListener("cancel", this.onCancel, true);
     this.element.removeEventListener("submit", this.onSubmit);
-    this.#closeButtons().forEach((btn) =>
-      btn.removeEventListener("click", this.onCloseButtonClick, true),
-    );
-    if (this.hasConfirmDialogTarget) {
-      this.confirmDialogTarget.removeEventListener("cancel", this.onConfirmCancel);
+    this.element.removeEventListener("turbo:submit-end", this.onSettled);
+    if (!this.dialog) {
+      document.removeEventListener("click", this.onLeaveClick, true);
+    }
+
+    if (this.dialog) {
+      document.removeEventListener("keydown", this.onKeydown, true);
+      this.dialog.removeEventListener("cancel", this.onCancel, true);
+      this.#closeButtons().forEach((btn) =>
+        btn.removeEventListener("click", this.onCloseButtonClick, true),
+      );
+      if (this.hasConfirmDialogTarget) {
+        this.confirmDialogTarget.removeEventListener("cancel", this.onConfirmCancel);
+      }
     }
   }
 
@@ -156,6 +191,99 @@ export default class extends Controller {
     this.submitting = true;
   }
 
+  // A submission settled. Reset the transient guards so a same-URL Turbo-morph
+  // re-render (which keeps this element and does NOT reconnect the controller)
+  // doesn't leave the guard permanently disabled. Re-baseline on next interaction.
+  #onSettled() {
+    this.submitting = false;
+    this.forceClose = false;
+    this.baseline = null;
+  }
+
+  // Full-page leave guard. A control marked `data-dirty-form-guard-leave` posts
+  // without this form's fields, so its unsaved edits would be lost. If the form
+  // is dirty, confirm first through the app's themed dialog; the attribute's
+  // value is the prompt. We always intercept the click (the themed confirm is
+  // async), then re-submit the trigger's form if the user confirms.
+  async #onLeaveClick(event) {
+    const trigger = event.target.closest("[data-dirty-form-guard-leave]");
+    if (!trigger) return;
+    // The document listener fires for every guarded form on the page. A leave
+    // control discards exactly one form — the one it bypasses — so only that
+    // form's instance responds; otherwise unrelated forms would double-prompt.
+    if (this.#guardedFormFor(trigger) !== this.element) return;
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const message =
+      trigger.getAttribute("data-dirty-form-guard-leave") ||
+      "You have unsaved changes that will be lost. Continue?";
+    const confirmed = await this.#confirm(message);
+    if (!confirmed) return;
+
+    // Approved — let the original navigation through without re-prompting. Pass
+    // the trigger as the SUBMITTER when it is itself a submit control, so its
+    // name/value (e.g. `_direction=back`) is included in the POST — `requestSubmit()`
+    // with no submitter drops it, which would silently turn a Back/Cancel into a
+    // finalize.
+    this.forceClose = true;
+    const form = trigger.closest("form");
+    if (form) {
+      const submitter = trigger.matches("button, input[type=submit], input[type=image]") ? trigger : null;
+      form.requestSubmit(submitter);
+    }
+  }
+
+  // The CSS selector for a guarded form. The guard is attached as a Stimulus
+  // controller (`data-controller="… dirty-form-guard"`), NOT as a CSS class — so
+  // match on the controller token, not `form.dirty-form-guard` (which never
+  // matches the framework's forms, leaving the leave guard silently dormant).
+  static GUARDED_FORM_SELECTOR = "form[data-controller~='dirty-form-guard']";
+
+  // The single guarded form a leave control discards: the one containing it, or —
+  // for a control outside any form (a wizard's sibling nav strip) — the closest
+  // guarded form, i.e. the one sharing the deepest common ancestor with the
+  // trigger. Returns the only guarded form on simple pages.
+  #guardedFormFor(trigger) {
+    const selector = this.constructor.GUARDED_FORM_SELECTOR;
+    const inside = trigger.closest(selector);
+    if (inside) return inside;
+
+    let best = null;
+    let bestDepth = -1;
+    document.querySelectorAll(selector).forEach((form) => {
+      let ancestor = form;
+      while (ancestor && !ancestor.contains(trigger)) ancestor = ancestor.parentElement;
+      if (!ancestor) return;
+      const depth = this.#depthOf(ancestor);
+      if (depth > bestDepth) {
+        bestDepth = depth;
+        best = form;
+      }
+    });
+    return best;
+  }
+
+  #depthOf(node) {
+    let depth = 0;
+    while ((node = node.parentElement)) depth++;
+    return depth;
+  }
+
+  // Defer to the themed Turbo confirm dialog the app installs as the global
+  // confirm method (a styled <dialog>, not the native chrome bar); fall back to
+  // window.confirm only if it isn't available. Returns a Promise<boolean>.
+  #confirm(message) {
+    const turboConfirm = window.Turbo?.config?.forms?.confirm;
+    if (typeof turboConfirm === "function") {
+      return Promise.resolve(turboConfirm(message));
+    }
+    return Promise.resolve(window.confirm(message));
+  }
+
   #confirmIsOpen() {
     return this.hasConfirmDialogTarget && this.confirmDialogTarget.open;
   }

data/src/js/controllers/kanban_controller.js

@@ -0,0 +1,330 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="kanban"
+//
+// Enables drag-and-drop reordering of kanban cards across columns using the
+// browser's native HTML5 drag-and-drop API (no additional npm dependency).
+//
+// ## DOM contract
+//
+// Board wrapper (this element):
+//   data-controller="kanban"
+//   data-kanban-move-url-template-value="/path/__ID__/kanban_move"
+//     — the collection path with an __ID__ placeholder; the controller
+//       substitutes the dragged card's record id at drop time.
+//
+// Column wrapper (rendered by Kanban::Column as the turbo-frame body):
+//   data-kanban-col="<key>"            — unique wrapper identifier for JS
+//   data-kanban-accepts="all|none|<key>,<key>,…"
+//     — "all": any card may be dropped here
+//     — "none": no card may be dropped here
+//     — comma list: only cards whose source column key is in the list
+//   data-kanban-locked="true|false"
+//     — true: cards in this column cannot be dragged out of it
+//
+// Column drop zone (rendered by Kanban::Column inside each turbo-frame):
+//   data-kanban-target="column"
+//   data-kanban-column-key-value="<key>"
+//
+// Draggable card (rendered by Kanban::Card):
+//   draggable="true"
+//   data-kanban-record-id="<id>"
+//   data-kanban-column-key="<source-column-key>"
+//
+// Column toggle control (button inside the strip / expanded header):
+//   data-action="click->kanban#toggleColumn"
+//   data-kanban-column-key="<key>"
+//
+// ## Collapse toggle
+//
+// toggleColumn reads data-kanban-column-key from the clicked button, finds
+// the matching [data-kanban-col] wrapper, and flips the CSS class
+// `pu-kanban-column-collapsed` on it. CSS handles show/hide of strip vs body.
+// The per-column state is persisted in localStorage keyed by the resource
+// path + column key so the preference survives page reloads.
+//
+// On connect() the controller reads all persisted states and applies them
+// before the first paint (wrappers are present in the DOM when the turbo-frame
+// content loads; Stimulus's MutationObserver reconnects after each frame swap).
+//
+// ## Drop hints
+//
+// On dragstart:
+//   1. Determine whether the source column is locked (cards cannot leave).
+//   2. For each column wrapper, compute whether a drop would be accepted and
+//      add the CSS class `pu-kanban-no-drop` to wrappers that would reject.
+//   3. Also suppress the browser's `dragover` preventDefault() for no-drop
+//      columns so the native "no entry" cursor shows.
+// On dragend: clear all hint classes.
+//
+// ## Move flow
+//
+// 1. dragstart — record which card was grabbed and apply an opacity hint.
+// 2. dragover  — highlight the target column drop zone; suppress the browser's
+//                "forbidden" cursor by calling preventDefault(). For columns
+//                marked pu-kanban-no-drop we skip preventDefault so the native
+//                "no entry" cursor shows instead.
+// 3. drop      — compute to_index (vertical cursor position within the column),
+//                POST {from_column, to_column, to_index} to the move endpoint,
+//                and feed the Turbo Stream response to Turbo.renderStreamMessage.
+//                On success the server re-renders both column frames; on 422 it
+//                re-renders only the source column so the card snaps back — the
+//                controller never hand-manages rollback state.
+// 4. dragend   — clean up opacity + highlights + drop-hint classes.
+export default class extends Controller {
+  static values = { moveUrlTemplate: String }
+  static targets = ["column"]
+
+  connect() {
+    this.draggedCard = null
+
+    this.onDragStart = this.#onDragStart.bind(this)
+    this.onDragOver = this.#onDragOver.bind(this)
+    this.onDragLeave = this.#onDragLeave.bind(this)
+    this.onDrop = this.#onDrop.bind(this)
+    this.onDragEnd = this.#onDragEnd.bind(this)
+
+    this.element.addEventListener("dragstart", this.onDragStart)
+    this.element.addEventListener("dragover", this.onDragOver)
+    this.element.addEventListener("dragleave", this.onDragLeave)
+    this.element.addEventListener("drop", this.onDrop)
+    this.element.addEventListener("dragend", this.onDragEnd)
+
+    // Apply any persisted collapse states from localStorage so columns
+    // retain the user's preference across page reloads.
+    this.#applyPersistedCollapseStates()
+  }
+
+  disconnect() {
+    this.element.removeEventListener("dragstart", this.onDragStart)
+    this.element.removeEventListener("dragover", this.onDragOver)
+    this.element.removeEventListener("dragleave", this.onDragLeave)
+    this.element.removeEventListener("drop", this.onDrop)
+    this.element.removeEventListener("dragend", this.onDragEnd)
+  }
+
+  // ─── Collapse toggle ─────────────────────────────────────────────────────────
+
+  // Stimulus action: data-action="click->kanban#toggleColumn"
+  // Expected on the expand button in the collapsed strip and the collapse
+  // button in the expanded header.  data-kanban-column-key on the button
+  // identifies which column to toggle.
+  toggleColumn(event) {
+    const key = event.currentTarget.dataset.kanbanColumnKey
+    if (!key) return
+
+    const wrapper = this.element.querySelector(`[data-kanban-col="${key}"]`)
+    if (!wrapper) return
+
+    const strip = wrapper.querySelector("[data-kanban-role='strip']")
+    const body  = wrapper.querySelector("[data-kanban-role='body']")
+    if (!strip || !body) return
+
+    // `pu-kanban-column-collapsed` on the wrapper is what CSS uses to decide
+    // which half to show. Toggling the class is the only state mutation.
+    const isCollapsed = wrapper.classList.contains("pu-kanban-column-collapsed")
+
+    if (isCollapsed) {
+      wrapper.classList.remove("pu-kanban-column-collapsed")
+      this.#saveCollapseState(key, false)
+    } else {
+      wrapper.classList.add("pu-kanban-column-collapsed")
+      this.#saveCollapseState(key, true)
+    }
+  }
+
+  // ─── drag lifecycle ──────────────────────────────────────────────────────────
+
+  #onDragStart(event) {
+    const card = event.target.closest("[data-kanban-record-id]")
+    if (!card) return
+
+    this.draggedCard = card
+    event.dataTransfer.effectAllowed = "move"
+    // Store the id so native DnD still carries data if the card is dropped
+    // outside the board (where we won't handle it, but no error).
+    event.dataTransfer.setData("text/plain", card.dataset.kanbanRecordId)
+
+    // Defer the opacity change so the drag ghost image is captured first.
+    requestAnimationFrame(() => card.classList.add("pu-kanban-dragging"))
+
+    // Mark columns that would reject a drop from this card's source column.
+    this.#applyDropHints(card.dataset.kanbanColumnKey)
+  }
+
+  #onDragOver(event) {
+    const column = event.target.closest("[data-kanban-target='column']")
+    if (!column) return
+
+    // Skip preventDefault for no-drop columns so the browser shows a
+    // "no entry" cursor rather than the move cursor.
+    const wrapper = event.target.closest("[data-kanban-col]")
+    if (wrapper?.classList.contains("pu-kanban-no-drop")) return
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = "move"
+    this.#highlightColumn(column)
+  }
+
+  #onDragLeave(event) {
+    // Only clear the highlight when the cursor leaves the board entirely.
+    // relatedTarget is null when leaving the viewport, or a node outside
+    // the board wrapper when crossing the edge.
+    if (!this.element.contains(event.relatedTarget)) {
+      this.#clearHighlights()
+    }
+  }
+
+  async #onDrop(event) {
+    event.preventDefault()
+    this.#clearHighlights()
+
+    if (!this.draggedCard) return
+
+    // Respect client-side drop hints: skip the POST for columns the client
+    // knows would reject. The server enforces this authoritatively on every
+    // request, so skipping saves a round-trip and avoids a 422 flash.
+    const wrapper = event.target.closest("[data-kanban-col]")
+    if (wrapper?.classList.contains("pu-kanban-no-drop")) return
+
+    const column = event.target.closest("[data-kanban-target='column']")
+    if (!column) return
+
+    const recordId = this.draggedCard.dataset.kanbanRecordId
+    const fromColumn = this.draggedCard.dataset.kanbanColumnKey
+    const toColumn = column.dataset.kanbanColumnKeyValue
+
+    // Cards currently in the destination column, excluding the dragged card
+    // itself (it may already be there for a same-column reorder).
+    const existingCards = [...column.querySelectorAll("[data-kanban-record-id]")]
+      .filter(c => c !== this.draggedCard)
+
+    const toIndex = this.#computeDropIndex(event.clientY, existingCards)
+    const url = this.moveUrlTemplateValue.replace("__ID__", recordId)
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ?? ""
+
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Accept": "text/vnd.turbo-stream.html",
+          "Content-Type": "application/x-www-form-urlencoded",
+          "X-CSRF-Token": csrfToken,
+        },
+        body: new URLSearchParams({
+          from_column: fromColumn,
+          to_column: toColumn,
+          to_index: toIndex,
+        }),
+        credentials: "same-origin",
+      })
+
+      const body = await response.text()
+      // Turbo.renderStreamMessage processes <turbo-stream> elements in the
+      // response body. On success this re-renders the from + to column frames;
+      // on 422 it re-renders only the source frame, snapping the card back.
+      if (window.Turbo) {
+        Turbo.renderStreamMessage(body)
+      }
+    } catch (error) {
+      console.error("[kanban] move request failed:", error)
+    }
+  }
+
+  #onDragEnd(_event) {
+    this.#clearHighlights()
+    this.#clearDropHints()
+    if (this.draggedCard) {
+      this.draggedCard.classList.remove("pu-kanban-dragging")
+      this.draggedCard = null
+    }
+  }
+
+  // ─── drop hints ──────────────────────────────────────────────────────────────
+
+  // Marks each column wrapper with `pu-kanban-no-drop` when it would refuse
+  // a card dragged from sourceKey. The server remains the authority; this
+  // is a display-only hint to give the user immediate visual feedback.
+  #applyDropHints(sourceKey) {
+    // If the source column is locked, no card can leave it — all targets are
+    // effectively invalid.
+    const sourceWrapper = this.element.querySelector(`[data-kanban-col="${sourceKey}"]`)
+    const sourceLocked = sourceWrapper?.dataset.kanbanLocked === "true"
+
+    this.element.querySelectorAll("[data-kanban-col]").forEach(wrapper => {
+      const noDrop = sourceLocked || !this.#columnAccepts(wrapper.dataset.kanbanAccepts, sourceKey)
+      wrapper.classList.toggle("pu-kanban-no-drop", noDrop)
+    })
+  }
+
+  #clearDropHints() {
+    this.element.querySelectorAll("[data-kanban-col]")
+      .forEach(w => w.classList.remove("pu-kanban-no-drop"))
+  }
+
+  // Returns true if the column described by `accepts` (the serialised form
+  // from data-kanban-accepts) would accept a card from `sourceKey`.
+  #columnAccepts(accepts, sourceKey) {
+    if (!accepts || accepts === "all") return true
+    if (accepts === "none") return false
+    return accepts.split(",").map(k => k.trim()).includes(sourceKey)
+  }
+
+  // ─── collapse persistence ─────────────────────────────────────────────────────
+
+  // Applies localStorage collapse states to all column wrappers currently in
+  // the DOM. Called on connect() and implicitly after Turbo frame swaps
+  // because Stimulus re-connects the controller when the frame content changes.
+  #applyPersistedCollapseStates() {
+    this.element.querySelectorAll("[data-kanban-col]").forEach(wrapper => {
+      const key = wrapper.dataset.kanbanCol
+      const stored = localStorage.getItem(this.#storageKey(key))
+      if (stored === null) return  // No stored preference; use server-rendered initial state.
+
+      const collapsed = stored === "1"
+      wrapper.classList.toggle("pu-kanban-column-collapsed", collapsed)
+    })
+  }
+
+  #saveCollapseState(key, collapsed) {
+    // Safari private-browsing reports a 0-byte quota and throws
+    // QuotaExceededError on setItem. Swallow it so the toggle still works
+    // visually — it just won't persist across reloads in that mode.
+    try {
+      localStorage.setItem(this.#storageKey(key), collapsed ? "1" : "0")
+    } catch { /* private browsing: toggle still works, just won't persist */ }
+  }
+
+  // Derives a unique localStorage key from the resource collection path so
+  // different boards (different resources / tenants) don't share state.
+  // The move URL template is "/path/__ID__/kanban_move"; strip the suffix to
+  // recover the collection path.
+  #storageKey(key) {
+    const path = this.moveUrlTemplateValue.replace("/__ID__/kanban_move", "")
+    return `pu-kanban:${path}:${key}:collapsed`
+  }
+
+  // ─── helpers ─────────────────────────────────────────────────────────────────
+
+  // Returns the 0-based insertion index within the destination column by
+  // comparing the cursor y-position against each card's vertical midpoint.
+  // The card is inserted before the first card whose midpoint is below the
+  // cursor, or appended after all cards if the cursor is below every midpoint.
+  #computeDropIndex(clientY, cards) {
+    for (let i = 0; i < cards.length; i++) {
+      const rect = cards[i].getBoundingClientRect()
+      if (clientY < rect.top + rect.height / 2) return i
+    }
+    return cards.length
+  }
+
+  #highlightColumn(column) {
+    this.columnTargets.forEach(c => {
+      c.classList.toggle("pu-kanban-drop-target", c === column)
+    })
+  }
+
+  #clearHighlights() {
+    this.columnTargets.forEach(c => c.classList.remove("pu-kanban-drop-target"))
+  }
+}

data/src/js/controllers/password_sentinel_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Guards a password field pre-filled with the server "unchanged" sentinel — a
+// stored secret the user hasn't touched, masked behind a fixed placeholder.
+//
+// The sentinel must be edited all-or-nothing: a partial edit (e.g. one
+// backspace) would leave a truncated sentinel that no longer matches on the
+// server and gets saved as a literal new password. So the first edit gesture
+// replaces the whole field — Backspace/Delete empties it (keep-or-clear), a
+// typed/pasted character starts a fresh value. After that first edit the field
+// behaves natively.
+export default class extends Controller {
+  static values = { sentinel: String };
+
+  connect() {
+    this.armed = this.element.value === this.sentinelValue;
+  }
+
+  beforeinput(event) {
+    if (!this.armed) return;
+
+    // Replace the whole sentinel regardless of caret position, so a click into
+    // the middle followed by a keystroke can't corrupt it.
+    event.preventDefault();
+    this.armed = false;
+
+    let next = "";
+    if (event.inputType === "insertText" && event.data != null) {
+      next = event.data;
+    } else if (event.inputType === "insertFromPaste" && event.dataTransfer) {
+      next = event.dataTransfer.getData("text");
+    }
+    // Backspace/Delete (deleteContent*) and anything else collapse to "".
+
+    this.element.value = next;
+    this.element.setSelectionRange(next.length, next.length);
+    this.element.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -19,6 +19,7 @@ import AttachmentPreviewController from "./attachment_preview_controller.js"
 import AttachmentPreviewContainerController from "./attachment_preview_container_controller.js"
 import SidebarController from "./sidebar_controller.js"
 import PasswordVisibilityController from "./password_visibility_controller.js"
+import PasswordSentinelController from "./password_sentinel_controller.js"
 import RemoteModalController from "./remote_modal_controller.js"
 import KeyValueStoreController from "./key_value_store_controller.js"
 import BulkActionsController from "./bulk_actions_controller.js"
@@ -34,10 +35,13 @@ import RowClickController from "./row_click_controller.js"
 import ViewSwitcherController from "./view_switcher_controller.js"
 import AutosubmitController from "./autosubmit_controller.js"
 import DirtyFormGuardController from "./dirty_form_guard_controller.js"
+import WizardController from "./wizard_controller.js"
+import KanbanController from "./kanban_controller.js"
 
 export default function (application) {
   // Register controllers here
   application.register("password-visibility", PasswordVisibilityController)
+  application.register("password-sentinel", PasswordSentinelController)
   application.register("sidebar", SidebarController)
   application.register("resource-header", ResourceHeaderController)
   application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
@@ -72,4 +76,6 @@ export default function (application) {
   application.register("view-switcher", ViewSwitcherController)
   application.register("autosubmit", AutosubmitController)
   application.register("dirty-form-guard", DirtyFormGuardController)
+  application.register("wizard", WizardController)
+  application.register("kanban", KanbanController)
 }

data/src/js/controllers/remote_modal_controller.js

@@ -67,6 +67,16 @@ export default class extends Controller {
     if (this._closing) return;
     this._closing = true;
 
+    // Commit any in-flight enter transition to its open end-state before
+    // reversing it. Removing data-open while the enter is still running
+    // reverses that transition, and CSS shortens the reverse duration in
+    // proportion to how far the enter got — so a quick open→close snaps
+    // shut instead of animating, which reads as choppy. finish() jumps to
+    // the open state so the exit always plays its full duration. Scoped to
+    // the dialog's own transitions (not the subtree) so a descendant's
+    // infinite animation can't throw on finish().
+    this.element.getAnimations().forEach((animation) => animation.finish());
+
     this.element.removeAttribute("data-open");
 
     const animations = this.element.getAnimations({ subtree: true });

data/src/js/controllers/row_click_controller.js

@@ -16,6 +16,19 @@ export default class extends Controller {
     if (event.target.closest("a, button, input, label, select, textarea, [data-row-click-ignore]")) {
       return
     }
-    this.element.querySelector('[data-row-click-target="show"]')?.click()
+
+    const show = this.element.querySelector('[data-row-click-target="show"]')
+    if (!show) return
+
+    // Modifier-click (⌘/Ctrl) or middle-click opens the record's full page in a
+    // new tab — the standard "open in new tab" gesture — instead of following
+    // the show link's configured target (which may be a modal frame). A new
+    // browsing context sends no Turbo-Frame header, so it renders full-page.
+    if (event.metaKey || event.ctrlKey || event.button === 1) {
+      window.open(show.href, "_blank", "noopener")
+      return
+    }
+
+    show.click()
   }
 }